JavaScript DOM编程艺术 笔记3Word格式.docx
- 文档编号:6568684
- 上传时间:2023-05-06
- 格式:DOCX
- 页数:48
- 大小:948KB
JavaScript DOM编程艺术 笔记3Word格式.docx
《JavaScript DOM编程艺术 笔记3Word格式.docx》由会员分享,可在线阅读,更多相关《JavaScript DOM编程艺术 笔记3Word格式.docx(48页珍藏版)》请在冰点文库上搜索。
几种主要的数据类型:
:
字符串:
由零个或是多个字符构成,包括(但不限于)字母,数字,标点符号和空格。
字符串必须包含在引号里,单引号或是双引号都可以,可以自行选择,最好是根据字符串的字符来选择,字符串包含单引号,整个字符串就用双引号,反之亦然。
也可以用反斜线对字符进行转义。
Varmood=’don\’task’;
数值:
给变量赋一个数值,不用限定它必须是一个整数。
允许小数点,也就是浮动数,也可以是个负数加上‘—’号
布尔值:
只有两个可选值true和false,不是字符串,千万不要用引号括起来,varmarried=true;
数组:
字符串,数值和布尔值都是标量。
,标量的任意时刻都只有一个值,如果想用一个变量来存储一组值,就需要使用数组。
数组就是用一个变量表示一个值得集合,集合中的每个值都是这个数组的一个元素。
Varbeatles=Array(4)4是数组的元素个数也可以不给出元素的个数。
向数组里添加元素成为填充。
要给出新元素的值,还需要给出新元素在数组中的存放位置,这个位置就是这个元素的下标。
数组里一个元素一个下标。
下标必须用方括号括起来,从0开始算起:
array[index]=element;
也可以声明数组的同时对它进行填充,元素间用逗号隔开:
varbeatles=Array(”john”,”paul”,”george”,”ringo”);
会自动分配下标
有时不必明确的表明是在创建数组,只需用一对方括号把各个元素的初始值括起来就可以了:
varbeatles=[”john”,”paul”,”george”,”ringo”]
数组的元素不一定是字符串,布尔值和数值都可以是数组的元素。
三种类型的混合也是可以的,实际上变量,另一个数组的元素,另一个数组都可以是数组的元素。
Beatles[0][1]数组包含数组时的取值方法。
关联数组:
就是数组元素的下标不是数字而是字符串。
此时代码更具可读性。
对象:
与数组类似,也是使用一个名字表示一组值。
兑现的每个值就是对象的每一个属性。
Varlennon=object();
lennon.name=”John”;
lennon.year=1940;
lennon.living=false;
创建对象使用object关键字,他不是用方括号和下标来获取元素,而是想任何JavaScript对象一样,使用点号来获取属性
简洁的语法,即花括号语法:
{propertyName:
value;
propertyName:
}
比如lennon对象varlennon={name:
”John”,year:
1940,living:
false};
属性名与JavaScript变量的命名规则有相同之处,属性值可以是任何JavaScript值,包括其他对象。
用对象来代替传统数组的做法意味着可以通过元素的名字而不是下标数字来引用它们。
这大大提高了脚本的可读性。
Varbeatles={};
beatles.vocalist=lennon;
这样beatles.vocalist.name的值是“john”了
操作:
计算和处理数据
算术操作符:
操作符是JavaScript为完成各种操作而定义的一些符号。
+-*/分别是加减乘除。
不仅是数值,变量也可以进行操作。
加号+比较特殊,可以用于连接字符串,甚至是数字和字符串的连接,JavaScript是一种弱类型语言是可以的,此时数值会自动转化为字符串。
数值和字符串连接到一起结果是一个更长的字符串。
当是连接两个数值时,结果将是两者的和。
另一个非常有用的快捷键操作就是+=,一次完成“加法和赋值(或是拼接和赋值)”varyear=2010;
varmessage=”theyearis”;
message+=year;
执行结果是theyearis2005.
2.4条件语句
JavaScript使用条件语句来做判断。
可以在脚本中设置条件,只有满足了条件才能让更多的语句得到执行。
If(条件){条件满足时才能执行的语句;
}条件的求值结果永远是一个布尔值,只能是true或false。
有时候,只有一条语句时,花括号可以省略。
后面可以跟着一个else语句在条件是false时执行。
If(1>
2){
alert(“theworldhasgonemad!
”);
}else{
alert(“Alliswellwiththeworld”);
2.4.1比较操作符
大于>
小于<
大于或等于>
=,小于或等于<
=,等于号是==,单个等号=,是完成赋值操作的。
不等于符号是由一个感叹号和一个等号构成的(!
=)
相等操作符==并不表示严格相等,比如false和null会被当做是相等的,严格相等是===,同时严格不等于是(!
==)
2.4.2逻辑操作符
逻辑操作符的对象是布尔值,逻辑与&
&
,逻辑或||,逻辑非!
,逻辑非作用于单个逻辑操作数,其结果是操作数所取得值取反。
2.5循环语句
循环语句可以多次执行同一个代码块,只要条件得到满足,包含在循环语句里的代码就将重复地只想下去。
知道条件结果为false。
2.5.1while循环
While(条件){执行语句;
}条件满足时,会一直执行下去。
关键字在于循环对条件的影响,否则可以一直执行下去。
Do…..while中,循环至少执行一次,先执行在判断条件。
Do{执行语句;
}while(条件);
2.5.2for循环
For循环实际上是while循环的一种变体。
用for循环来重复执行一些代码的好处是循环控制结构更加清晰。
与循环有关的所有内容都包含在for语句的圆括号部分。
最常用的用途之一就是对某个数组里的全体元素进行遍历处理。
2.6函数
如果需要多次使用同一段代码,可以把它们封装成一个函数。
函数就是一组允许在你的代码里随时调用的语句。
事实上,每个函数实际上是一个短小的脚本。
Fnctionshout(){varbeatles=Array(“a”,”b”,”c”,”d”);
For(varcount=0;
count<
beatles.length;
count++){alert(beatles[count]);
}}这个函数的循环语句将依次弹出对话框来显示beatles乐队成员的名字。
现在,如果想在自己的脚本里执行这一动作,可以随时使用如下的语句来调用这个函数:
shout();
每当需要反复做一件事时,都可以利用函数来避免重复键入大量的内容。
不过,函数的真正威力体现在,你可以把不同的数据传递给他们,而他们将使用这些数据区完成预定的操作。
我们把传递给函数的数据成为参数(argument)。
Functionname(参数){执行语句;
JavaScript提供了很多内建函数,如alert。
在定义函数时,你可以为它声明任意多个参数,只要用逗号把他们分隔开来就行。
在函数的内部,你可以像使用普通变量那样使用它的任何一个参数。
传递俩个参数给函数,函数将对他们进行乘法元算:
Functionmultiply(num1,num2){
Vartotal=num1*num2;
Alert(total);
}调用函数multiply(10,2);
如果这个函数能把结果返回给调用这个函数的语句往往会更有用。
函数不仅能接收数据,而且能返回数据。
我们完全可以让一个函数返回数值,字符串,数组和布尔值。
这就需要return:
Functionmultiply(num1,num2){vartotal=num1*num2;
returntotal;
函数的真正价值体现在,我们还可以把他们当做一种数据类型来使用,这意味着可以把一个函数的调用结果赋给一个变量:
在命名变量的时候,用下划线来分割各个单词,在命名函数时,从第二个单词把每个单词的第一个字母大写(即驼峰命名法),这样就可以一眼看出那个是变量,那个是函数。
函数名字也不能包含空格。
变量的作用域
全局变量可以在脚本中的任何位置被引用,作用域是整个脚本。
局部变量值存在于声明它的那个函数的内部,在函数外是无法饮用的。
仅作用域特定的函数。
如果在某个函数中使用了var,那个变量就将被视为一个局部变量。
只存在于这个函数的上下文中,反之,没有var,那个变量就被视为一个全局比阿奴变量,如果脚本里已经存在一个与之同名的全局变量,这个函数就会改变那个全局变量的值。
Functionsquare(num){total=num*num;
}
Vartatal=50;
varnumber=square(20);
alert(total):
本来是让square()函数只把它计算出来的平方值返回给变量number,但因为未吧函数内部的total设为局部变量,这个函数把名字同样是他他俩的那个全局变量的值也改变了。
函数在行为方面应该像一个自给自足的脚本,在函数内部明确声明局部变量,就能避免任何形式的二义性隐患。
2.7对象
对象是自包含的数据集合,包含在对象里的数据可以通过两种形式访问——属性和方法:
属性是隶属于某个特定对象的变量;
方法是只有某个特定对象才能调用的函数;
对象就是由一些属性和方法组合在一起而构成的一个数据实体
方法和属性全部集合在一起,就是对象了object.属性object.方法(调用方法)
实例:
为了使用person对象来描述一个特定的人,需要创建一个person对象的实例。
实例就是对象的具体个体。
实例除了具有对象的属性和方法外,还有别的
New关键字创建varJeremy=newperson;
可以利用对象的属性来检索关于jeremy的信息jeremy.ageJeremy.mood
2.7.1内建对象
内建对象就是JavaScript预先定义好的对象数组就是我们用new关键字去初始化一个数组,其实就是在创建一个array对象的新实例varbeatles=newArray();
Math对象的round方法可以把十进制数值舍入为一个与之最接近的整数
Date对象可以用来存储和检索与特定日期和时间有关的信息,创建date新实例时,JavaScript自动使用当前日期和时间对它进行初始化:
varcurrent_date=newDate();
还有getDay(),getHours(),getMonth()系列方法,供对象和实例调用vartoday=current_date.getDay();
2.7.2宿主对象
不是由JavaScript语言本身而是由它的运行环境提供的,预先定义好的其他对象。
具体到web应用,这个环境就是浏览器。
由浏览器提供的预设定义对象被称为宿主对象。
如Form,Image,Element和document,document可以获得网页上任何一个元素的信息。
第3章DOM
对象的三种类型:
用户定义对象:
由程序员自行创建的对象
内建对象:
内建在JavaScript语言里对象,如Array,math和Date
宿主对象:
由浏览器提供的对象(JavaScript最初脚本中已能用了,最基础的如window)
我们的主要精力在浏览器窗口内的网页上,document对象的主要功能就是处理网页内容。
Document的对象和方法及其重要。
节点
文档是由节点构成的集合,只不过此时的节点是文档树上的树枝和树叶而已。
主要有三种:
元素节点,文本节点和属性节点
3.4.1元素节点Dom的原子是元素节点,标签的名字就是元素的名字。
3.4.2文本节点:
既是文档中文本元素
3.4.3属性节点属性节点用来对元素做出更具体的描述,几乎所有的元素都有一个title的属性title=“***”就是一个属性节点
3.4.5获取元素有3种DOM方法可获取元素节点,分别通过ID,标签名和class
1.getElementById区分大小写只有一个参数既是ID的名称document.getElementById(id)
Typeof操作符可以告诉我们它的操作数是一个字符串,数值,函数,布尔值还是对象。
事实上,文档中的每一个元素都是一个对象。
2.getElementByTagName返回一个对象数组,每个对象分别对应着文档里有着给定标签的一个元素,也只有参数,既是标签名document.getElementByTagName(“tag”);
但是好像标签名要带引号,不然好像不起作用(必须带上)通配符*号,也可以作为参数,只是要加引号,以此与乘法操作符,有所区别。
并且可以查到所有的元素document.getElementByTagName(”*”)
3.getElementByClassName接受一个参数既是类名,返回结果也是一个数组。
就算只有一个元素,也是数组。
并且要用引号括主,可能是参数值字符串的原因,所有要用引号吧。
也可以查找多个类名,不同的类用空格分隔就行了。
并且类名的顺序不重要,就算元素中还有其他的类名也不和重要。
三种方法可以混合使用,varshopping=document.getElementById(“purchase”);
Varsales=shopping.getElementByClassName(“sale”);
其中getElementByClassName只有在比较新的浏览器中才能用,有一些替代方法
FunctiongetElementByClassName(node,classname){
If(node.getElementByClassName){
Returnnode.getElementByClassName(classname);
Varresults=newArray();
Varelems=node.getElementByClassName(“*”);
For(vari=0;
i<
elems.length;
i++){
If(elems[i].className.indexof(classname)!
=-1){
Results[results.length]=elems[i]
Returnresults;
这个getElementByClassName函数接受两个参数。
第一个node表示Dom树中的搜索起点,第二个classname就是要搜索的类名。
如果传入节点上已经存在了适当的getElementByClassName函数,那么这个新函数就直接返回相应的几点列表。
如果getElementByClassName函数不存在,这个函数就会循环遍历所有标签,查找带有相应类名的元素。
(这个例子不适合多个类名)替代上面的函数:
Varshopping=document.getElementById(“purchase”);
Varsales=getElementByClassName(shopping,”sales”);
indexOf()方法可返回某个指定的字符串值在字符串中首次出现的位置.如果要检索的字符串值没有出现,则该方法返回-1。
3.5获取属性
3.5.1getAttribute只有一个参数要查询的属性名getAttribute不属于document对象,所以不能通过document来调用,只能通过元素节点调用。
还可以和document方法一起使用用if语句来验证条件,if(something)和if(something!
=null)两者作用是一样的,但是前者比较简洁啊if(title_text)alert(title_text);
3.5.2getAttribute修改元素节点的属性object.setAttribute(属性,值)可以设置根本没有的属性,此时完成两种操作创建属性和修改属性若是存在的属性,设置后将会被覆盖。
但是修改后在浏览器查看源代码是仍是之前的属性:
这有由于DOM的工作模式:
先加载文档的静态内容,再动态刷新,动态刷新不影响文档的静态内容。
DOM的真正威力:
对页面进行刷新缺不需要再浏览器里刷新页面。
第4章 案例研究:
JavaScript图片库
事件处理函数
在特定事件调用特定的JavaScript代码。
需要注意的是showpic()函数需要一个参数:
一个带有href属性的元素节点参数。
当我们把onclick事件处理函数嵌入到一个连接中时,需要把这个连接本身作showpic函数的参数。
有个简单有效的方法可以做到这一点:
使用this关键字。
这个关键在这里的含义是“这个对象”。
具体到这个例子,this表示“这个<
a>
元素节点”:
showpic(this)
事件=“JavaScript语句”可以把任意数量的JavaScript语句放在引号之间,用分号隔开即可。
Onclick=”showpic(this)”;
4.4.1childNodes属性可以用来获取任何一个元素的所有子元素,它是一个包含这个元素全部子元素的数组
想让函数在页面加载时执行,就需要使用onload事件处理函数
Window.onload=countBodyChidren;
记住函数后面不加小括号的
4.4.2nodeType属性每个节点都有nodeType属性,这个属性让我们知道自己正在与哪一种节点打交道,差劲的是nodeType的值并不是英文。
Node.nodeType获取节点类型
结果是数值共12种,其中3种具有使用价值:
元素节点的nodeType的属性值是1.属性节点的nodeType的属性值是2.文本节点的nodeType属性值是3.
4.4.5nodeValue属性用来得到(和设置)一个节点的值node.nodeValue但是得到的并不是包含在node中的文本,我们想要的是他的第一个子节点
Node。
childNodes[0].nodeValue
4.4.6firstChild和lastChildnode.firstChild和node.childNodes[0]对应
Node.childNodes[node.childNodes.length-1]和node.lastChild基本是等价的
第5章最佳实践
平稳退化:
确保网页在没有JavaScript的情况下也能正常工作
向后兼容性:
确保老版本的浏览器不会因为你的JavaScript脚本而死掉
性能考虑:
确保脚本执行的性能最优
平稳退化
JavaScript使用window对象的open()方法来创建新的浏览器窗口,有三个参数window.open(url,name,features)三个参数都是可选的
url是想在新窗口里打开的网页的url地址,如不写,就会弹出一个空白页
name是弹出的新窗口的名称。
可以在代码里通过这个名字与新窗口进行同信。
Feature是一个以逗号分割的字符串,其内容是新窗口的各种属性。
新窗口的尺寸(宽高),启用和禁用各种浏览器功能(工具条,菜单条,初始显示位置)
Open()方法是使用BOM的一个好案例,他对文档内容无任何影响(那是DOM的地盘),这个方法只与浏览环境(具体到这个例子,就是window对象)有关。
Functionpopup(winURL){
Window.open(winURL,”popup”,”width=320,height=480”);
}这个函数将打开一个320*480的新窗口“popup”将此函数村委外部文件。
如何调用此函数。
一个方法是伪协议
5.2.1“Javascript:
”伪协议
“真”协议用来在因特网上的计算机之间传输数据包,如HTTP协议(http:
//),FTP协议(ftp:
//)等。
伪协议是一种非标准化的协议。
“Javascript:
”伪协议让我们通过一个连接来调用JavaScript函数。
<
ahref=”javascript:
popup(‘’);
”>
Example<
/a>
这条语句在支持”javascript:
”伪协议的浏览器中运行正常,较老的浏览器则会去阐释打开那个连接但失败,支持这种伪协议但禁用JavaScript功能的浏览器会失眠也不做。
总之,在HTML文档里通过“javascript:
”伪协议吊桶JavaScript代码的做法非常不好。
5.2.2内嵌的事件处理函数
图片库脚本中见识了事件处理函数。
Onclick最为属性嵌入<
中。
但当在某个连接里用onclick事件处理函数如onclick去打开新窗口是,这个连接的href属性似乎没有什么用处——与这个连接有关的重要信息已经都被包含在他的onclick属性里了。
ahref=”#”onclick=popup(‘false;
因为使用了returnfalse语句,这个连接不会真的被打开。
这里的“#“就是为了创建一个空连接,实际工作全部由onclick属性完成。
同样在“javascript:
”伪协议中应用不好,不能平稳退化。
当用户禁用浏览器的JavaScript功能时,这个连接毫无用处。
5.2.3谁关心这个
当浏览器不支持JavaScript功能时,不影响访问者对网页访问。
同事也影响个网页在用户搜索时的排名。
把popup函数平稳退化和简化后
ahref=onclick=”popup(this.href;
returnfalse;
)”>
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- JavaScript DOM 编程艺术 笔记3 编程 艺术 笔记