当前位置:文档之家› JavaScript 总结笔记

JavaScript 总结笔记

JavaScript 总结笔记
JavaScript 总结笔记

JavaScript 基础

JavaScript是一种描述式语言,它与HTML结合起来,用于增强功能,并提高与最终用户之间的交互性能。

由Netscape公司利用Sun的Java开发,它是与Java完全不同的一种语言。虽然在结构和语法上与Java类似,但是,它只是函数式的语言。

客户端的JavaScript 必须要有浏览器的支持,与一些编译性语言不同,JavaScript是一种解释性语言,其源码不经过编译,而直接在运行时被“翻译”,因而,被成为“脚本式”语言。

一个完整的JavaScript实现是由以下3个不同部分组成的:

核心(ECMAScript)

文档对象模型(DOM)

浏览器对象模型(BOM)

在网页中加入JavaScript

通过在网页中加入标记JavaScript的开始和结束,将JavaScript 代码放到之间;

也可以引入一个外部的JavaScript文件,这个JavaScript文件一般以.js作为扩展名;

原则上,放在之间。但视情况可以放在网页的任何部分;

一个页面可以有几个 ,不同部分的方法和变量,可以共享。

1.在中使用

可以出现在HTML文件中的之间,也可以出现在中的任何位置。

在一个HTML文档中,可以使用多个标签对,嵌入多段JavaScript 代码,并且各段代码之间可以相互访问,如同将所有代码放在一对标签之中效果相同。

【注意】

有些浏览器不能很好地支持JavaScript,在这些浏览器中,需要将JavaScript代码屏蔽,否则,浏览器会把JavaScript代码与Web页面的其他内容一起显示在屏幕上,可以将标签对中的内容用HTML的注释标记括起来,这样,支持标签对中的HTML注释符,会继续执行注释符之间的脚本程序。

2.在单独文件中使用

可以将脚本代码放置在一个单独的文件中,该文件以js为扩展名,称为JavaScript 脚本文件。

在HTML文件中引用JavaScript脚本文件,与将该脚本文件直接插入到一对标签对中的效果相同。

【注意】

(1).js文件中只写js代码,不能写入

3.作为属性值使用

HTML中的超链接标签的href属性值,除了可以使用http和mailto等协议外,还可以使用JavaScript,使用方式如下:

style="color:gray">收藏本页 -

联系我们

JavaScript基本语法—概述

执行顺序:

JavaScript程序是按照其在HTML文件中出现的顺序逐行执行的。如果需要在整个HTML 文件中执行,最好将其放在HTML文件的中。某些代码,比如函数体内的代码,不会被立即执行,只有当所在的函数被其他程序调用时,该代码才会被执行。

大小写敏感:

JavaScript是大小写敏感的,区分大小写。

空白符与换行符:

JavaScript会忽略关键字、变量名、数字、函数名或其他各种元素实体之间的空格或换行符,除非这些空格是字符串常量的一部分。

语句与分隔符:

分号(;)标识着一个语句的结束。

块:

大括号{ }通常用来括起一行或多行语句。

注释:

JavaScript提供了两种注释符号:

“//”

“/*…*/”

JavaScript基本语法—数据类型

JavaScript的数据类型分为基本数据类型和复合数据类型,复合数据类型主要有对象、数组和函数。

简单数据类型

JavaScript的基本数据类型有数值型、字符型、逻辑型,以及两个特殊的数据类型。1.普通数值型

与C、C++、Java等语言不同,JavaScript中的数值包含整数和浮点数。

2.特殊数值型

特殊数值型包括Infinity和NAN。

Infinity表示值超出了可表示的最大值的范围,而NAN是“not a number”的缩写形式,表示undefined表达式结果为数值型数据。

3.字符型

在JavaScript中,字符串是一组被引号(单引号或双引号)括起来的文本。

注:JavaScript不对字符和字符串加以区分。

字母、数字与标点可以放在字符串内,但诸如换行符等符号,若要在字符串中使用,必须用到转义字符。

【常用的转义字符如下】

【注意】

由于字符串是用单引号或双引号括起来的,所以当字符串中出现引号时,必须进行转义,但若单引号内出现双引号或双引号内出现单引号时,则无需转义。

4.Boolean布尔型(true or false)

特殊数据类型

在JavaScript中,有一些是没有任何类型的变量,称为undefined,还有一种空值数据类型。

1.无定义数据类型(undefined)

undefinded用来表示不存在的值,或者尚未赋值的变量。

如果只声明了m,而没有为其赋值,此时判断m的类型,就是undefined。如果赋予一个不存在的属性值,系统也会认为是undefined。

2.空值(null)

null表示空值,是一个“什么都没有”的占位符。

【null与undefined的区别】

undefined表示一个变量尚未赋值;

null表示该变量被赋予了一个空值。

基本类型与合成类型

基本数据类型在内存中有固定大小,而合成类型(如对象、数组、函数等类型)则可以具有任意长度。因此,不能将合成类型直接存储在关联每个变量的固定内存地址中,实际上存储的只是这个值的引用。

类型转换

JavaScript是一种无类型语言。在声明变量时无需指定数据类型,这使得JavaScript 具有灵活性和简单性。在代码执行过程中,JavaScript会根据需要进行自动类型转换。

转换规则

1. 转换为逻辑型数据

undefined: false

null: false

数值型:若为0或NaN,则结果为false,否则为true

字符串型:若长度为0,则结果为false,否则为true.

其他对象:true

2.转换为数值型数据

undefined: NaN

null: 0

逻辑型:值为true,则结果为1,值为false,则结果为0

字符串型:若内容为数字,则结果为相应数字,否则为NaN

其他对象:NaN

3.转换为字符串型数据

undefined: Undefined

null: NaN

逻辑型:若为true,则结果为”true”

提升基本数据为对象

每一个基本数据类型都存在一个相应的对象,这些对象提供了一些很有用的方法来处理基本数据。

例如,String对象提供了一个toLowerCase()方法来把一个字符串转换为小写格式。

JavaScript基本语法—变量

JavaScript是一门弱类型的语言,所有的变量定义均以var来定义。

JavaScript的变量应该先定义,再使用。虽然JavaScript可以不需定义即可直接使用变量,但不建议这么做。

类型规则

JavaScript、Java和C这样的语言之间存在一个重要的差别:JavaScript是无类型的,即JavaScript的变量可以存放任何数据类型的值,而Java和C的变量都只能存放特定类型的数据。

与HTML不同,JavaScript区分大小写

声明变量

在JavaScript中,变量使用关键字“var”来声明。声明变量必须遵循以下规则:可以使用一个var同时声明多个变量。

可以在声明变量的同时对其进行赋值。

如果只是声明了变量,并未对其赋值,其值默认为undefined。

使用var多次声明同一变量也是允许的,如果重复声明的语句已有一个初始值,此时的声明就相当于对变量的重新赋值。

JavaScript基本语法—数组

数组定义

var arr = new Array(3);

通过arr.length取得数组的长度

Javascript数组可以越界访问元素

创建一个数组有以下3种方式:

new Array();

new Array(len);

new Array([item0,[item1,[…]]]);

【注意】

数组中的每个元素代表了一个变量,而JavaScript中的变量是没有类型的,因此数组

元素也是没有类型的。所以,可以在一个数组中存储不同类型的数据。

数组使用

使用方式:

myarray=new Array(num)

myarray=new Array(value1,value2…)

num不设定,则按数组默认的最大长度自动设定。例如:

JavaScript基本语法—表达式

表达式

表达式是一个句子,用于JavaScript脚本进行运行、运算的句子。其可以包含常量、变量、运算符等。表达式的结果通常会通过赋值语句赋值给一个变量,或直接作为函数的参数。

JavaScript基本语法—运算符

算术运算符

运算符是在表达式中用于进行运算的一种符号。JavaScript包括+、-、*、/、%等算术运算符。

减号(-)的特殊含义

减号(-)的另外一种用法是对数值或数值型变量求反。

赋值运算符

赋值运算符只有一个等号“=”,其作用是给变量赋值。

比较运算符

比较运算符用来连接操作数用来组成比较表达式,比较表达式的结果为逻辑值trut 或false。

常用的比较运算符有:< 、 <= 、 > 、>= 、 != 、 == 、 === 、 !==

补充说明

条件语句中使用=符号

在条件语句中如果误将“=”用于“==”,程序将不会报错,但运行结果错误。

比较运算符的自动转换

在比较过程中,“!=”和“==”会进行自动类型转换,而“!==”和“===”则不转换。【注意】

进行相等比较时,如果不希望进行类型自动转换,则应使用“===”。

逻辑运算符

常用的逻辑运算符:&&、||、!

位运算符

常用的位运算符有:&、|、^(异或)、~

其他运算符

递增(++)、递减(--)运算符

?:运算符

?:是构造快速条件分支的运算符,可以看做是“if…else”语句的间歇形式。

逗号(,)运算符

逗号(,)用来将多个表达式连接为一个表达式,新表达式的值为最后一个表达式的值。void运算符

void运算符用来指明一个表达式无返回结果。

typeof运算符

typeof运算符返回一个字符串,指明其操作数的数据类型。

typeof 返回值有六种可能:

number、string、boolean、object、function、undefined

JavaScript基本语法—运算符

字符串运算符

连接运算:+

取子集:substring(index1,index2)

JavaScript基本语法—控制语句

if语句

if(条件) {

}else if(条件1) {

}else

}

switch 语句

switch(i)

case i1:…

case i2:…

default:…

while语句

while(条件){

}

JavaScript基本语法—循环语句

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

do{

}while(条件);

循环控制:

continue

break

JavaScript基本语法—函数

函数的定义:

利用function来定义一个函数

传入参数

传出值(需要return语句)

定义函数使用function关键字,语法规则如下:

function 函数名([参数列表]){

程序语句;

}

函数调用:

全局变量与局部变量

全局变量是在所有函数之外的脚本中定义的变量,其作用范围是该变量定义后的所有语句,包括其后定义的函数中的代码,以及其后的标签对中的代码。

局部变量是定义在函数代码之内的变量,只有在该函数中、且位于该变量定义之后的程序代码,才可以使用这个变量。局部变量对其后的其他函数和脚本代码来说,都是不可见的。函数的参数传递:

preloadTreeImages("1.gif","2.gif","3.gif");

function preloadTreeImages(){

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

var img =

document.createElement("img");

img.src = arguments[i];

div1.appendChild(img);

}

}

JavaScript事件

可将在浏览器中发生的事件分为以下几种类型:

鼠标事件:用户使用鼠标进行特定操作时触发

键盘事件:用户在键盘上敲击、输入时触发

HTML事件:窗口发生变动或者发生特定的客户端-服务器端交互时触发。

1、鼠标事件:

鼠标事件是Web上最常见的事件类型。其中包含以下事件:

onclick:点击鼠标左键时触发(如果鼠标右键也按下则不会触发)。当用户的焦点在按钮上,并按了回车键,同样会触发该事件

ondblclick:双击鼠标左键响应(如果鼠标右键也按下则不会触发)

onmousedown:点击任意一个鼠标按钮时触发

onmouseup:松开任意一个鼠标按钮时触发

onmouseout:鼠标指针在某个元素上,且用户正要将鼠标移出元素的边界时触发onmouseover:鼠标移出某个元素到另一个元素上时触发

onmousemove:鼠标在某个元素上移动时持续触发

鼠标事件的属性

每个鼠标事件都会给以下event对象的属性填入值:

坐标属性(如:clientX和clientY等)

type属性:事件名称

shiftKey:true表示按下Shift键;否则为false

ctrlKey:true表示按下Ctrl键;否则为false

altKey:true表示按下Alt键;否则为false

鼠标事件的执行顺序

onclick事件触发前,会先发生onmousedown事件,然后发生onmouseup事件。

onmousedown

onmouseup

onclick

类似地,要触发ondblclick事件,在同一个目标上要按顺序发生以下事件:onmousedown

onmouseup

onclick

ondblclick

移动鼠标从一个对象进入另一个对象时,先发生的事件是onmouseout(发生在鼠标移出的那个对象)。接着,在这两个对象上都触发onmousemove事件。最后,在鼠标进入的那个对象上触发onmouseover事件。

2、键盘事件:

键盘事件由用户对键盘的动作触发,有以下键盘事件:

onkeydown:用户在键盘上按下某按键时触发。一直按差某键,它则会不断触发(Opera浏览器除外)。

onkeypress:用户按下键盘上的一个按键,并产生一个字符时触发(也就是不管类似Shift、Alt之类的按键)。一直按下按键时,它则会持续触发。

onkeyup:用户释放按着的按键时触发。

尽管所有的元素都支持键盘事件,但在文本框中输入文字时,是最容易触发这些事件的。

键盘事件的属性

对每个键盘事件,会填入以下的事件属性:

keyCode属性:对于onkeypress事件,表示按下按键的Unicode码;对于onkeydown/onkeyup 事件,表示按下按键的数字代码

charCode属性:按下按键的Unicode值。

shiftKey:true表示按下Shift键;否则为false

ctrlKey:true表示按下Ctrl键;否则为false

altKey:true表示按下Alt键;否则为false

键盘事件的执行顺序

用户按一次某字符按键时,会按以下顺序触发事件:

onkeydown

onkeypress

onkeyup

如果用户按一次某非字符按键(如:shift),会按以下顺序触发事件:

onkeydown

onkeyup

如果用户按下一个字符按键且不放,onkeydown和onkeypress事件将逐个持续触发,直到松开按键;如果用户按下非字符按键且不放,将只有onkeydown事件持续触发。

3、HTML事件处理:

onblur:任何元素或窗口本身失去焦点时触发。

onfocus:任何元素或者窗口本身获取焦点时(用户点击它、Tab键切换到它或者任何其他与它交互的手段)触发。

onload:页面完全载入后,在window对象上触发;所有的框架载入后,在框架集上触发;完全载入后,在其上触发;或者元素,当其完全载入后在其上触发。onunload:页面完全卸载后,在window对象上触发;所有的框架卸载后,在框架集上触发;完全卸载后,在其上触发;或者元素,当其完全卸载后在其上触发。onchange:文本框(