javascript基础

为什么需要脚本程序

关于用户录入信息的验证

关于动态改变网站上的内容

网页上添加特效

时钟/滚动文字/拖放操作

网页游戏

打字游戏

看几个实例：

表单

<p><strong>用户注册

</strong></p>

<p>用户名：

<label>

</label>

</p>

<p>密码：

</p>

<p>电子邮件：

</p>

<p>所在地区：

<label>

</select>

</label>

省(直辖市)

</select>

区(县、市)

</select>

镇

</p>

<p>

<label>

同意注册所有条款

</label>

</p>

<p>

</p>

</form>

拖放操作

可以用邮箱系统中的拖放操作来举例!

网页游戏

简单智力游戏举例

打字游戏举例

什么是脚本程序和JavaScript

什么是脚本程序

         <html>
         <script language="javascript">
                   alert(new Date());
         </script>
         </html>

JavaScript简介

前身叫作Livescript，是一种基于对象(Object)和事件驱动(Event Driven)、并具有安全性的脚本语言。

JavaScript与Java

　　是两个公司开发的两个不同的产品，作用与用途大不一样，但两者语法上有很多相似之处，JavaScript并不是Java的子集。

javascript语言的特点

　　基于对象/动态语言/无需编译，直接解释执行

脚本代码的位置

放置在一个单独的文件中

将脚本程序代码作为属性值

放置在<script></script>标签对之间

Javascript的关键字及保留字

关键字(Keywords)

break else new var case finally return void

catch for switch while continue function this with

default if throwdelete in try do instanceof typeof

保留字(Reserved Words)

abstract enum int short boolean export interface static

byte extends long super char final native synchronized

class float package throws const goto private transient

debugger implements protected volatile double import public

Javascript基本语法

JavaScript中的标识符

标识符是指JavaScript中定义的符号，例如，变量名，函数名，数组名等。标识符可以由任意顺序的大小写字母、数字、下划线(_)和美元符号($)组成，但标识符不能以数字开头，不能是JavaScript中的保留关键字。

合法的标识符举例：indentifier、username、user_name、_userName、$username

非法的标识符举例：int、98.3、Hello World

JavaScript严格区分大小写

computer和Computer是两个完全不同的符号

JavaScript程序代码的格式

每条功能执行语句的最后必须用分号(;)结束，每个词之间用空格、制表符、换行符或大括号、小括号这样的分隔符隔开。

语句块使用{}来表示

JavaScript程序的注释

/*…*/中可以嵌套“//”注释，但不能嵌套“ /*…*/”。

变量

定义一个变量，系统为之设置一个标识，程序可以用变量名来指向具体的对象内存，并通过变量名来获得对应的对象。

声明变量要使用var关键字

例如：var name;

声明变量的同时为其赋值

例如：var name = "caishiyou";

对已赋值的变量赋予一个其他类型的数据

例如：name = 123;

不事先声明变量而直接使用

例如：x = 1234;

全面理解动态语言的特点，变量的值是随时可以改变的，可以存任何类型，因为没有编译过程，所以只有在执行到的具体代码的时候才会知识这个变量是什么类型。

基本数据类型及常量

Number(数字类型)

1、整型常量(10进制\8进制\16进制)

十六进制以0x或0X开头，例如：0x8a。

八进制必须以0开头，例如：0123。

十进制的第一位不能是0（数字0除外），例如：123。

２、实型常量

12.32、193.98、 5E7、4e5等。

特殊数值：NaN、Infinity、isNaN()、isFinite()

Boolean(布尔值)

true和false。

String字符串

“a book of JavaScript”、‘abc’、 “a”、“”。

字符串中的特殊字符，需要以反斜杠（\）后跟一个普通字符来表示，例如：\r、\n、\t、\b、\'、\ " 、\\xxx

null常量

undefined常量

运算符

算术运算符

赋值运算符

比较运算符

逻辑运算符

位运算符

算术运算符

+ 加法运算符或正值运算符，例如，x + 5，+6。

“+”还能实现多个字符串的相加，也能将字符串与其它的数据类型相连成一个新的字符串，条件是该表达式中至少有一个字符串，例如：“x” + 123的结果是“x123”。

- 减法运算符或负值运算符，例如，7 - 3，-8。

* 乘法运算符，例如，3*6。

/ 除法运算符，例如，9/4。

% 求模运算符（也就算术中的求余），例如，5%2。

++ 将变量值加1后再将结果赋给这个变量。

“++”有两种用法：++x，x++。前者是变量在参与其它运算之前先将自己加1后，再用新的值参与其它运算，而后者是先用原值参与其它运算后，再将自己加1。例如：b = ++a是a先自增，即a的值加1后，才赋值给b；而b = a++是先将a赋值给b后，a再自增。

-- 将变量值减1后再将结果赋给这个变量，与++的用法一样。

赋值运算符

赋值运算符的作用是将一个值赋给一个变量，最常用的赋值运算符是“=”。还可以由“=”赋值运算符和其它一些运算符组合产生一些新的赋值运算符，例如， “+=”，“*=”等。

= 将一个值或表达式的结果赋给变量

例如， x = 3。

+= 将变量与所赋的值相加后的结果再赋给该变量

例如， x += 3等价于x = x + 3。

-= 将变量与所赋的值相减后的结果再赋给该变量

例如， x -= 3等价于x = x - 3。

*= 将变量与所赋的值相乘后的结果再赋给该变量

例如， x *= 3等价于x = x * 3。

/= 将变量与所赋的值相除后的结果再赋给该变量

例如， x /= 3等价于x = x / 3。

%= 将变量与所赋的值求模后的结果再赋给该变量

例如， x %= 3等价于x = x % 3。

比较运算符

当左边操作数大于右边操作数时返回true，否则返回false。

当左边操作数小于右边操作数时返回true，否则返回false。

当左边操作数大于等于右边操作数时返回true，否则返回false。

当左边操作数小于等于右边操作数时返回true，否则返回false。

当左边操作数等于右边操作数时返回true，否则返回false。

当左边操作数不等于右边操作数时返回true，否则返回false。

脚下留心：

不要将比较运算符“==”误写成“=” ；alert(7.5=="7.5")

逻辑运算符

逻辑与，当左右两边操作数都为true时，返回值为true，否则返回false。

| |

逻辑或，当左右两边操作数都为false时，返回其中第一个不为false的值或者最后一个值。

逻辑非，当操作数为true时，返回值为false，否则返回true。

注意：

在逻辑运算中，0、""、false、null、undefined、NaN均表示false。

位运算符

多个电子元器件的组合可以表示更多状态，也就是可以表示更多的数据，其中，每个电子元器件分别表示数据中的一位，这样的一位数据只能是0或1，被称之为bit位。例如，000表示0，001表示1，010表示2，011表示3，依此类推，111表示7，这种表示数据的方式就叫二进制。任何信息在计算机中都是以二进制的形式保存的，位运算用于对操作数中的每一个二进制位进行运算，包括位逻辑运算符和位移动运算符。

& 只有参加运算的两位都为1，运算的结果才为1，否则就为0。

| 只有参加运算的两位都为0，运算的结果才为0，否则就为1。

^ 只有参加运算的两位不同，运算的结果才为1，否则就为0。

>> 将左边操作数在内存中的二进制数据右移右边操作数指定的位数，左边移空的部分，补上左边操作数原来的最高位的二进制位值。

<< 将左边操作数在内存中的二进制数据左移右边操作数指定的位数，右边移空的部分补0。

>>> 将左边操作数在内存中的二进制数据右移右边操作数指定的位数，左边移空的部分补0。

程序流程控制

顺序结构

if条件选择语句

switch选择语句

while循环语句

do while语句

for循环语句

break与continue语句

if语句语法

if (条件语句)

｛

执行语句

｝

…

多学两招：

if(x == null)或if(typeof(x) == “undefined”)可以简写成if(!x)。

if (条件语句)

{

执行语句块1

}

else

{

执行语句块2

}

…

多学两招：

变量＝布尔表达式？语句1:语句2；

例如，y = x>0 ? x : -x;

if (条件语句1)

{

执行语句块1

}

else if(条件语句2)

{

执行语句块2

}

...

else if(条件语句n)

{

执行语句块n

}

else

{

执行语句块n+1

}

if语句的嵌套

if (x < 1)

if(y == 1)

alert("x < 1,y == 1");

else

alert("x < 1,y != 1");

else if(x > 10)

if(y == 1)

alert("x > 10,y == 1");

else

alert("x?,y?");

if (x < 1)

{

if(y == 1)

alert("x < 1,y == 1");

else

alert("x < 1,y != 1");

}

else if(x > 10)

{

if(y == 1)

alert("x > 10,y == 1");

else

alert("x > 10,y != 1");

}

if (x < 1)

if(y == 1)

alert("x < 1,y == 1");

else

alert("x < 1,y != 1");

else if(x > 10)

if(y == 1)

alert("x > 10,y == 1");

else

alert("x?,y?");

if (x < 1)

{

if(y == 1)

alert("x < 1,y == 1");

else

alert("x < 1,y != 1");

}

else if(x > 10)

{

if(y == 1)

alert("x > 10,y == 1");

}

else

alert(“1 <= x <= 10");

switch选择语句

switch(表达式)

{

case 取值1:

语句块1

break;

…

case 取值n:

语句块n

break;

default:

语句块n+1

break;

}

var x = 2;

switch(x)

{

case 1: alert("Monday");

break;

case 2:

alert ("Tuesday");

break;

case 3:

alert ("Wednesday");

break;

default:

alert ("Sorry,I don't Know");

}

case 1:

case 2:

case 3:

case 4:

case 5:

alert ("working day");

break;

default:

alert ("off day");

while循环语句

while(条件表达式语句)

{

执行语句块

}

var x = 1;

while(x < 3)

{

alert("x=" + x);

x++;

}

多想一想：

在while从句后面增加一个分号（;）后，程序将产生怎样的执行效果。

do while循环语句

{

执行语句块

}while(条件表达式语句);

var x = 3;

while(x == 0)

{

alert("ok1");

x++;

}

var y = 3;

{

alert("ok2");

y++;

}

while(y == 0);

for循环语句

for(初始化表达式;循环条件表达式;循环后的操作表达式)

{

执行语句块

}

var output = "";

for(var x=1; x<10; x++)

{

output = output + " x= " + x;

}

alert(output);

</script>

for(;;)

{

.......

}

等效于

while(true)

{

……

}

for...in循环语句

for(变量 in 集合或对象)

{

执行语句块

}

var as= [1,4,5,6],output="";

for(var x in as)

{

output += " x= " + as[x];

}

alert(output);

</script>

var as={id:5,name:'test'};

for(var x in as)

{

output += x+"="+as[x];

}

alert(output);

break与continue语句

break语句：

st:while(true)

{

while(true)

{

break st;

}

continue语句：

var output = "";

for(var x=1; x<10; x++)

{

if(x%2 == 0)

continue;

output=output + " x=" + x;

}

alert(output);

函数

函数的作用与定义

全局变量与局部变量

参数个数可变的函数

创建动态函数

JavaScript中的系统函数

函数的作用

函数的定义及调用

定义一个函数的格式如下：

function 函数名（参数列表）

{

程序代码
return 表达式;

}

var msg = "全局变量";

function square(x,y)

{

var sum;

sum = x*x + y*y;

return sum;

}

function show()

{

var msg = "局部变量";

alert(msg);

}

//var sum;

alert("sum=" + sum);

sum=square(2,3);

alert("sum=" + sum);

show();

</script>

undefined

alert("sum=" + square(2,3));

对函数进行调用的几种方式：

函数名（传递给函数的参数1，传递给函数的参数2，….）

变量 = 函数名（传递给函数的参数1，传递给函数的参数2，….）

对于有返回值的函数调用，也可以在程序中直接使用返回的结果，例如：alert("sum=“ + square(2,3));

不指定任何函数值的函数，返回undefined。

全局变量与局部变量

var msg = "全局变量";

function show()

{

msg = "局部变量";

}

show();

alert(msg);

</script>

var msg = "全局变量";

function show()

{

var msg;

msg = "局部变量";

}

show();

alert(msg);

</script>

此处的msg值为多少？

值为“局部变量”

此处的msg值为多少？

值为“全局变量”

JavaScript中的系统函数(Global类)

encodeURI及encodeURIComponent方法

返回对一个URI字符串编码后的结果。

decodeURI及decodeURIComponent()方法

将一个已编码的URI字符串解码成最初始的字符串并返回。

parseInt方法

将一个字符串按指定的进制转换成一个整数，语法格式为：parseInt(numString, [radix])。如果没有指定第二个参数，则前缀为 ‘0x’ 的字符串被视为十六进制，前缀为 ‘0’ 的字符串被视为八进制，所有其他字符串都被视为是十进制。

parseFloat方法

将一个字符串转换成对应的小数。

isNaN方法

用于检测parseInt和parseFloat方法的返回值是否为NaN。

escape方法

返回对一个字符串进行编码后的结果字符串。所有空格、标点、重音符号以及任何其他非 ASCII 字符都用 %xx 编码替换，其中xx等于表示该字符的Unicode编码的十六进制数，字符值大于255的字符以%uxxxx格式存储。

unescape 方法

将一个用escape方法编码的结果字符串解码成原始字符串并返回。

eval 方法

将其中的参数字符串作为一个JavaScript表达式执行。

面向对象的javascript

类(对象)与对象(对象实例)

构造方法与this关键字的作用

在函数中修改参数值的问题

对象及对象实例

对象中所包含的变量就是对象的属性，对象中所包含的对属性进行操作的函数就是对象的方法，对象的属性和方法都叫对象的成员。

对象是对某一类事物的描述，是抽象上的概念；而对象实例是一类事物中的具体个例。

能够被用来创建对象实例的函数就叫对象的构造函数，只要定义了一个对象的构造函数，就等于定义了一个对象。使用new关键字和对象的构造函数就可以创建对象实例，语法格式如下：var objInstance = new ObjName(传递给该对象的实际参数列表);

function Person()

{

}

var person1 = new Person();

person1.age = 18;

person1.name ="zxx";

//alert(person1.name + ":“ + person1.age);

function sayFunc()

{

alert(person1.name + ":“ + person1.age);

}

person1.say = sayFunc;

person1.say();

</script>



构造函数

对象实例

属性



方法

可以为对象实例无限制地添加新的成员

用“对象实例名.成员名”的格式访问，也可以用（对象实例[“成员变量名”]）的格式，例如，person1[“age”]

构造函数与this关键字

为一个对象实例新增加的属性和方法，不会增加到同一个对象所产生的其它对象实例上。

所有的实例对象在创建后都会自动调用构造函数，在构造函数中增加的属性和方法会被增加到每个对象实例上。

对象实例是用new关键字创建的，在构造方法中不要有返回结果的return语句。

调用对象的成员方法时，需要使用“对象实例.成员方法”的形式，很显然，用作成员方法的函数被调用时，一定伴随有某个对象实例。this关键字代表某个成员方法执行时，引用该方法的当前对象实例，所以，this关键字一般只在用作对象成员方法的函数中出现。

function Person(name,age)

{

this.age = age;

this.name = name;

this.say = sayFunc;

}

function sayFunc()

{

alert(this.name + ":“ + this.age);

}

var person1 = new Person("张三",18);

person1.say();

var person2 = new Person("李四",20);

person2.say();

</script>

引用传递及值传递

将基本数据类型的变量作为函数参数传递的情况：

function changeValue(x)

{

x = 5;

}

var x = 3;

changeValue(x);

alert(x);

</script>

将对象类型的变量作为函数参数传递的情况：

function Person(name,age)

{

this.age = age;

this.name = name;

this.say = sayFunc;

}

function sayFunc()

{

alert(this.name + ":“ + this.age);

}

function change(p1)

{

p1.name = "李四";

}

var person1 = new Person("张三",18);

change(person1);

person1.say();

</script>

此处的x值为多少？

值为3

此处的person1.name值为多少？

值为“李四”

JavaScript的内部类

动态对象

使用“对象实例名.成员”的格式来访问其属性和方法。

静态对象

直接使用“对象名.成员”的格式来访问其属性和方法。

Object类(对象)

Number类(对象)

String类 (对象)

Math类(对象)

Date类(对象)

toString方法

Object类

Object类是所有javascript类的基类，提供了一种创建自定义对象的简单方式，不需要程序员再定义构造函数。

主要属性：

constructor-对象的构造函数

prototype-获得类的prototype对象,static性质

主要方法：

hasOwnProperty(property)－是否属于本类定义的属性

isPrototypeOf(object)－是否是指定类的prototype

propertyIsEnumerable(property)－是否可例举的属性

toString()－返回对象对应的字符串

valueOf()－返回对象对应的原始类型值

function getAttributeValue(attr)

{

alert(person[attr]);

}

var person = new Object();

person.name = "zs";

person.age = 18;

getAttributeValue("name");

getAttributeValue("age");

</script>

Number类

Number类代表数据类，包含一些静态的成员及数值处理的方法。

静态属性：

MAX_VALUE、MIN_VALUE、NEGATIVE_INFINITY、POSITIVE_INFINITY、NaN

主要方法：

toFixed(n)－取小数位数，自动四舍五入

toPrecision(n)－是否是指定类的prototype

propertyIsEnumerable(property)－是否可例举的属性

toString()－返回对象对应的字符串

valueOf()－返回对象对应的原始类型值

var oNumberObject = new Number(99);

alert(oNumberObject.toFixed(2)); //outputs “99.00”

</script>

String类

length属性

anchor、big、bold、fontcolor、link等方法

charAt方法

注意：一个字符串中的第一个字符的索引位置为0，依次类推。

charCodeAt方法

注意：返回的结果是字符的unicode编码。

concat方法，连接字符串

indexOf方法及lastIndexOf方法

match、search方法

replace、split方法

slice方法

说明：str1.slice(0)和str1.slice(0,-1)都是返回整个字符串。

substr、substring方法

substring方法返回的内容不包含结束位置的字符。

toLowerCase、toUpperCase 方法

Math类

属性：

E，代表数学常数e，约等于 2.718。

LN10，代表10的自然对数，约等于 2.302。

LN2，代表2的自然对数，约等于 0.693。

PI，代表数学常数∏的值，约等于 3.14159。

SQRT1-2，代表2 的平方根分之一，约等于0.707。

SQRT2，代表2 的平方根，约等于1.414。

方法：

abs方法，返回数字的绝对值。

sin、cos方法，分别返回数字的正弦、余弦值。

asin、acos方法，分别返回数字的反正弦、反余弦值。

random方法，返回介于 0 和 1 之间的伪随机数

Math对象是一个静态类，不能使用new关键字创建对象实例，应直接使用“对象名.成员”的格式来访问其属性或方法，例如，var num = Math.random();

Date类

toGMTString方法，返回Date对象实例所表示的日期的字符串形式，该字符串使用格林尼治标准时间 (GMT) 格式，例如，“05 Jan 1996 00:00:00 GMT”。

getYear、getMonth、getDate、getDay方法

getHours、getMinutes、getSeconds、getMilliseconds方法

getTime方法，返回自1970年1月1日0点0分0秒算起，至Date对象实例代表的时间为止的毫秒数。

var current_time = new Date();

var strDate = current_time.getYear() + "年";

strDate += current_time.getMonth() + "月";

strDate += current_time.getDate() + "日 ";

strDate += current_time.getHours() + ":";

strDate += current_time.getMinutes() + ":";

strDate += current_time.getSeconds();

alert(strDate);

</script>

构造方法 ：Date()、Date(dateVal) 、Date(year, month, date[, hours[, minutes[, seconds[,ms]]]])

parse方法，分析一个表示日期时间的字符串，返回它所表示的时间值，该值以自1970年1月1日0点0分0秒算起的毫秒值表示。parse方法属于一个静态方法。

toString方法

toString 方法是JavaScript中的所有内部对象的一个成员方法，它的主要作用就是将对象中的数据转换成某种格式的字符串来表示，具体的转换方式取决于对象的类型。

举例：

var x = 328;

alert("hex=“ + x.toString(16) + " bin=“ + x.toString(2));

</script>

对象专用语句

with语句：

with (对象名称)

{

执行语句块

}

for...in语句：

for（变量 in 对象）

{

执行语句

}

for…in举例：

function Person()

{

this.name = "zxx";

this.age = 19;

this.height = 176;

}

var p1 = new Person();

var prop, str = "";

for(prop in p1)

{

str += prop + " ";

}

alert(str);

</script>

with举例：

var current_time=new Date();

with(current_time)

{

var strDate= getYear() + "年";

strDate += getMonth() + "月";

strDate += getDate() + "日";

strDate += getHours() + ":";

strDate += getMinutes() + ":";

strDate += getSeconds();

alert(strDate);

}

</script>

Host Object

Host Object是指原始对象以外对象，通常是指javascript运行环境中提供的内部对象，比如浏览器中关于DOM及BOM提供。

几个用于交互的方法：

alert－显示提示信息框

confirm－确认框

prompt－信息录入框

window中的对象：

alert("hello world");

var ret=confirm("是否要删除学生记录?");

if(ret)alert("删除");

else alert("不删除");

var s=prompt("请输入开源团队名称:","EasyJF");

alert(s);

数组

数组列表

用对象的方式实现数组

Array对象

数组成员

数组列表

数组列表用于表示一组数据的集合，它由一对方括号 ([]) 包围，列表中的每个元素用逗号分隔，数组元素可以是任意类型的数据（包括其他数组）。例如，

var arr = ["zs",123,'li',3.5];

对于每个数组变量，都有一个length属性，表示该数组中元素的个数。

使用“数组变量名[索引号]”的格式来访问每个数组元素。数组列表中的第一个元素的索引号为0，最后那个元素的索引号为数组的length属性值-1。

数组列表的每个元素既可以是有效的JavaScript 表达式，也可以为空，空元素的值为undefined。例如，

var arr = [1,,,,5];

数组元素本身又是数组，这就叫数组的数组，例如，

[[“Names”,“Beansprout”,“Pumpkin”,“Max”], [“Ages”,6,5,4]] ，

使用“数组变量名[子数组索引号][子数组中的元素索引号]”的格式来访问数组的数组中的元素。

var cats = [["Names","Beansprout",

"Pumpkin","Max"],

["Ages",6,5,4]];

for(var i=0; i<arr.length; i++)

{

for(var j=0; j<arr[i].length; j++)

{

alert(arr[i][j]);

}

</script>

用对象的方式实现数组

function MyArray()

{

this.length = arguments.length;

for (var i=0; i<this.length;i++)

{

this[i] = arguments[i];

}

var str = "";

var arr = new MyArray(4,3.5,"abc");

for(var i=0; i<arr.length; i++)

{

str += arr[i] + "\n";

}

alert(str);

</script>

function MyArray(size)

{

this.length = size;

for (var i=0; i<size; i++)

{

this[i] = "";

}

var arr = new MyArray(2);

arr[0] = 3;

arr[1] = "abc";

arr[2] = 4;

var x, str = "";

for(x in arr)

{

str += x + ":" + arr[x] + "\n";

}

alert(str);

</script>

Array类

三种构造方法：

Array()

Array(4)

Array(3.5,"abc",3)

数组排序例子：

var arr = new Array();

arr[0] = 3.5;

arr[1] = "abc"

arr[2] = 3;

arr.sort();

var x,str = "";

for(x in arr)

{

str += x + ":“ + arr[x] + "\n";

}

alert(str);

</script>

Array类的属性及方法

length－获得数组的长度；

concat－连接数组；

join－把数组转换成字符串；

pop－弹出一个元素；

push－放入一个元素；

reverse－颠倒数据中的元素顺序；

shift－移出第一个元素；

slice－截取数组;

sort－排序数组;

unshift－在前面追加元素；

用户自定义类及对象

１、工厂方法－使用new Object创建对象并添加相关属性；

２、使用构造函数来定义类。

３、使用prototype

４、构造函数及原型混合方式

５、动态原型方式

实例

Car类(对象)

属性：

color-颜色

doors－门的个数

price－价格

drivers-司机

方法：

showColor－显示出车的颜色

思考与实践

1.描述在哪些地方可以编写JavaScript脚本程序，各举一例说明。

2.描述y = x>0 ? x : -x;语句的执行流程及其作用。

3.描述JavaScript中的全局变量与局部变量的差异。

4.描述对象的构造方法及this关键字的作用。

5.用javascript在页面上打印出乘法99表，在页面上动态输出内容直接使用document.write方法。

posted @ 2012-03-17 17:22 水之原阅读(1101) 评论(0) 编辑收藏举报

刷新页面返回顶部

水之原

建立自我，追求无我

javascript基础

公告