Web技术基础第一章

第1章Javascript基础

Javascript是一种小型的，轻量级的，面向对象的，跨平台的脚本语言，是目前最流行的客户端编程语言

Javascript的作用是表单有效性的验证、动态显示内容、动态改变文本格式、动态改变元素位置等

Javascript是一种解释性的语言，是HTML网页的一部分存在，随着网页内容的丰富，功能强大，基于浏览器的应用已经成为趋势。Javascript能做什么表单数据验证动态HTML用户交互数据绑定少量数据查找Ajax核心技术（Asynchronous

Javascript

+XML)Javascript如何实现动态效果

要实现动态效果，需要访问和控制浏览器部件和页面文档中元素的途径，使Javascript能够访问和控制它们，需要使用BOM(Browser

Object

Model)和DOM(DocumentObject

Model)和浏览器事件模型

BOM由一组对象组成，它们提供了访问浏览器各种功能部件的途径，例如浏览器窗口本身，浏览器历史等

DOM创建了一组按顺序、层次访问文档中各种元素的结构化方法。在DOM中，每个元素都成为Javascript可以访问的对象，既可以读，也可以改变属性值Javascript的历史和发展

Javascript最初称为Livescript语言，是由NetScape公司的Brendan

Erich开发的，是NetScape

Navigator

2.0脚本语言，为了推广它，用了流行语言Java.

Microsoft推出IE,由于没有授权，微软公司的支持的脚本是Jscript,实际是Javascript的克隆

1997年，Javascript

1.1提交给ECMA(European

Computer

Manufacturer’s

Association),ECMA专门成立第39技术委员会来制定Javascript标准，并于1997年6月发表了第一个正式规范ECMA-262，由于授权问题，将其命名为ECMAscript.

ECMA网站：http://www.ecma-/publications/standards/Standard.htJavascript与ECMAscriptECMAscript只是一种语言规范，描述了脚本语言的语法、类型、属性、方法和对象等内容，而Javascript则是实现

Javascript不是唯一实现ECMAscript规范的语言，Flash中使用的Actionscript也是ECMAscript的一种实现ECMAscript与浏览器无关Javascript语言的特点安全性：

Javascript是一种安全性高的语言，它只能通过浏览器实现网络的访问和动态交互，可以有效地防止通过访问本地硬盘或者将数据存入到服务器，而对网络文档或者重要数据进行不正当的操作。Javascript语言的特点易用性：

Javascript是一种脚本的编程语言，没有严格的数据类型，同时是采用小段程序的编写方式来实现编程的。Javascript语言的特点动态交互性：

在HTML中嵌入Javascript小程序后，提高了网页的动态性。Javascript可以直接对用户提交的信息在客户端做出回应。Javascript的出现使用户与信息之间不再是一种浏览与显示的关系，而是一种实时、动态、可交互式的关系。Javascript语言的特点跨平台性：

它的运行环境与操作系统没有关系，它是一种依赖浏览器本身运行的编程语言，只要安装了支持Javascript浏览器，并且能正常运行浏览器的电脑，就可以正确地执行

Javascript程序。Javascript常用元素Javascript程序Javascript程序网页效果数据类型基本类型：数值、字符串、布尔、未定义和空复合型：数组、对象和函数数值型

数值型包括整数和浮点数，所有的数均被作为

64位的浮点数处理。数值可以用十进制或十六进制表示（0x)特殊数据NaN,表示不是数字字符串型由单引号或双引号括起来的字符串

在双引号中使用单引号或在单引号中使用双引号时不需用转义

在双引号中使用双引号或单引号中使用单引号时需用转义例如：”The

boy

is

name‘John’.”“The

boy

is

name\”John\”.

”\b

//退格

\f

//换页 \n

//换行

\r

//回车\’//单引号/”//双引号\\//\\x

XX//十六进制数表示的符号\uXXXX//四位十六进制表示的二进制字符布尔型、undefineed和null两个可取值：true和false，不区分大小写

当一个对象的属性不存在或变量定义后从未赋值，则返回undefined

不能通过比较来判断是否变量是undefined,只能通过字符串来比较例如：if(a==undefined)

//errorif(typeof(a)==undefined)

//errorif(typeof(a)=“undefined”)

//right

null是一个值,表示该变量没有保存有效的数值、字符串、布尔值、数组或对象，可以用其清除变量的内容数组不要求数组类型相同数组长度可以动态变化

不支持多维数组，但支持数组嵌套，即数组中的元素可以是数组数组定义一、通过Array构造函数定义var

name=new

Array(num);name[0]=元素1；name[1]=元素2；var

name=new

Array();//个数由赋值个数决定(3)var

name=new

Array(元素1，元素2，…..)二、直接赋值var

name=[元素1，元素2，….];数组元素与长度数组中元素类型可以不同长度可以动态变化var

arr=new

Array(3);可以赋值的个数超过3个

可以用delete删除数组中的元素，如果输出被删除的元素，则显示undefined数组嵌套不支持多维数组，但支持嵌套 var

arr=new

Array(3); arr[0]=[‘xiao’,3,45]; arr[1]=4;arr[2]=“hi”;document.writer(arr[0][0]);var

arr=[

[‘xiao’,3,45],[4,5,6],“hi”];嵌套可以是多层的不支持类似于c的定义与赋值变

量使用var定义一次可以定义一个或几个变量变量名必须以字母或下划线开始区分大小写重复定义变量时，后面的覆盖前面的

在函数之外定义的变量为全局变量，在函数内省略var定义的变量也是全局变量

当函数中定义的局部变量与全局变量重名时，局部变量覆盖全局变量数据类型转换

Javascript是弱数据类型语言，可以根据赋值的类型确定数据类型表达式中自动实现数据类型转换

布尔型转换：数值0或NaN为false,字符串空串为false,undefined,null为false,布尔值true转换为数值时，false为0，转换为字符串是为”true”和”false”

ParseInt()和ParseFloat()强制将字符串转换成数值，左至右提取数值，遇到非数值为止。如果全部是非数

值，则返回NaN.函

数定义：function

function_name(参数列表）{

codesreturn;

}

调用函数时，如果实参数的个数少于形参数个数时，缺少的用undefined代替，如果多于形参数的个数，则忽略

参数可以通过arguments属性访问。函数定义中，关键字arguments代表一个与当前函数对象对应的数组对象型属性，实参列表中每个参数是arguments的一个元素，定义函数时可以不制定参数名称，而在调用时用arguments访问调用时指定的各个参数函

数function

showInfo(){

if(arguments.length==1)documesnt.write(“您好！”+arguments[0]);if(arguments.length==2)document.write(showInfo.arguemts[0]+”今年”+showInfo.arguments[1]+”岁”);}

showInfo(“小黑“);showInfo(“小黑“,23);函

数在调用函数时，如果将基本数据类型变量作为函数参数，直接将值传递给函数，函数内的操作对原变量没有影响。如果将复合类型变量作为函数参数时，传递给函数的是存储地址，将改变函数外的原变量值例：var

arrName={“Li”,”Zhang”,”Wang”};newName=“He”;functionchangeName(arrA,name){

code;

}changeName(arrName,newName);函

数

不支持函数重载，即如果定义了两个名字相同的函数，则后面的覆盖前面的。函数作为数据使用： function

getCube(num1){

return

num1*num1*num1；}var

a=getCube;var

b=a(20);var

arr=Array();arr[0]=getCube;var

c=arr[0](30);匿

名

函

数

当函数被作为数据使用时，函数定义可以直接被指定给变量，数组元素，对象属性等，而不需要指定名称var

obj=new

object;obj.func=function(num)

{

returnnum*num*num;}var

n=obj.func(20);函数作为函数的参数函数作为函数的参数<script

language="Javascript">function

getCube(num1){ return

num1*num1*num1;}var

a

=

getCube;var

b

=

a(20);var

arr

=

Array();arr[0]

=

getCube;var

c

=

arr[0](30);document.write(b+","+c);var

obj=new

Object; //定义一个对象obj.func

=

function(num)

{return

num*num*num;};var

n

=obj.func(20);document.write("<br>"+n);函数作为函数的参数function

getMax(number_arr){var

max

=

number_arr[0];for(var

i=0;i<number_arr.length;i++){ if(max

<

number_arr[i])max

=

number_arr[i];

}return

max;

}function

getMin(number_arr){var

min

=

number_arr[0];for(var

i=0;i<number_arr.length;i++){ if(min

>

number_arr[i])min

=

number_arr[i];

}return

min;

}函数作为函数的参数function

getSum(number_arr){var

sum

=

0;for(var

i=0;i<number_arr.length;i++){

sum

+=

number_arr[i];

}return

sum;

}function

getAvg(number_arr){var

sum

=

0;for(var

i=0;i<number_arr.length;i++){ sum

+=

number_arr[i];

}return

sum/number_arr.length;

}函数作为函数的参数function

getResult(func){

var number_arr

=

new

Array();for(var

i=1;i<arguments.length;i++)number_arr[i-1]

=

arguments[i];return

func(number_arr);

}var

max

=

getResult(getMax,3,4.5,6,1,23);var

min

=

getResult(getMin,3,4.5,6,1,23);var

sum

=

getResult(getSum,3,4.5,6,1,23);var

avg

=

getResult(getAvg,3,4.5,6,1,23);document.write("max:"+max);document.write("min:"+min);document.write("sum:"+sum);document.write("avg:"+avg);</script>函数对象的属性与方法

函数对象的属性有argument,它表示函数所接受的参数，argument.length表示函数实际接受的参数个数，length表示函数定义时参数的个数

Javascript函数对象拥有一些通用的内建方法，如value()和toString(),它们功能相同，返回函数定义代码function

showInfo(name,age){document.write(name+”今年”+age+”岁“）；

}alert(showInfo.toString)());函数对象的属性与方法call()与apply()使函数象调用其他对象的方法一样

var

obj=new

object();showInfo.call(obj,”xiao”,24);上述代码等同于：var

obj=new

Object();obj.func=showInfo;obj.func(“xiao”,24);showInfo.apply(obj,[“xiao”,24]

);函数对象的属性与方法自定义属性和方法function

getsum()//定义一个函数对象{

getsum.sum=0;for(var

i=0;i<arguments.length;i++)getsum.sum+=arguments[i];

return

getsum.sum;

}getsum(4,5,6);//函数必须先被调用，产生实体alter(“sum”+getsum.sum);//才能对函数属性调用函数对象的属性与方法

当将函数定义赋予函数对象的属性后，便为函数定义了方法function

hello(theName){

=theName;hello.welcome=function(){

alert(“welcome:”+);

};hello.bye=function()

{

alert(“Bye!”);

};

}hello(“xiao”);hello.welcome();函数对象的属性与方法<script

language="Javascript">function

showInfo(name,age){document.write(name+"今年"+age+"岁");}

alert(showInfo.toString());var

obj=new

Object;showInfo.call(obj,"小轩",24);function

getSum(){getSum.sum

=

0;for(var

i=0;i<arguments.length;i++)getSum.sum

+=

arguments[i];return

getSum.sum;

}getSum(4,5,6);alert("sum:"+getSum.sum);函数对象的属性与方法function

getAcc(){for(var

i=0;i<arguments.length;i++)getAcc.sum

+=

arguments[i];return

getAcc.sum;

}getAcc.sum=0;//静态属性getAcc.show

=

function(){alert("The

sum

is:"+getAcc.sum)};getAcc.show();getAcc(2,3);

getAcc(4,5,6);

getAcc(8);alert("sum:"+getAcc.sum);function

hello(theName){

=

theName;hello.welcome

=

function()

{alert("welcome

to

ourweb:"+);

};hello.bye=function(){alert("Bye!");};}

hello("小轩");hello.welcome();</script>嵌套函数<script

language="Javascript">function

dealNum(){var

number_arr

=

arguments;//这里省略var关键字,定义全局变量getMax=function()/*求最大值,getMax是全局变量*/{ var

max

=

number_arr[0];for(var

i=0;i<number_arr.length;i++){ if(max

<

num