Javascript学习总结课案.docx
- 文档编号:17151551
- 上传时间:2023-07-22
- 格式:DOCX
- 页数:32
- 大小:29.20KB
Javascript学习总结课案.docx
《Javascript学习总结课案.docx》由会员分享,可在线阅读,更多相关《Javascript学习总结课案.docx(32页珍藏版)》请在冰点文库上搜索。
Javascript学习总结课案
Javascript学习总结
经过一个月的Javascript学习,现总结如下:
一.Javascript简介:
首先简单说一下Javascript这门语言。
JavaScript是一种属于网络的解释型的脚本语言,已经被广泛用于Web应用开发。
最早是在HTML网页上使用,用来给HTML网页增加各式各样的动态功能。
在过去,JavaScript只是被用来做一些简单的网页效果,比如表单验证、浮动广告等,所以那时候JavaScript并没有受到重视。
自从AJAX开始流行后,人们发现利用JavaScript可以给用户带来更好的体验,甚至利用这一优点开发了大型网页游戏,于是这门语言被重视了起来。
二.Javascript代码存放的位置
1.JavaScript代码可以直接嵌在网页的任何地方,不过通常我们把Javascript代码放在
中。2.可以将JavaScript代码放到一个单独.js文件中,如将文件命名为:
script.js那么引用方式为:
三.Javascript中的数据类型
Javascript脚本语言同其他语言一样,有它自身的基本数据类型,表达式和算术运算符及程序的基本程序框架。
Javascript提供了五种基本的数据类型(Number,String,Boolean,Null,Undefined)和两种特殊数据类型(数组,对象)用来处理数据和文字。
1.Number
JavaScript不区分整数和浮点数,统一用Number表示。
Number可以直接做四则运算,规则和数学一致:
2.String
字符串是以单引号'或双引号"括起来的任意文本,比如'abc',"xyz"等等。
请注意,''或""本身只是一种表示方式,不是字符串的一部分,因此,字符串'abc'只有a,b,c这3个字符。
3.Boolean
布尔值和布尔代数的表示完全一致,一个布尔值只有true、false两种值,要么是true,要么是false。
4.Null
null表示一个“空”的值,它和0以及空字符串''不同,0是一个数值,''表示长度为0的字符串,而null表示“空”。
5.Undefined
在JavaScript中,还有一个和null类似的undefined,它表示“未定义”。
6.数组
数组是一组按顺序排列的集合,集合的每个值称为元素。
JavaScript的数组可以包括任意数据类型。
例如:
[1,2,3.14,'Hello',null,true];
7.对像
JavaScript的对象是一组由键-值组成的无序集合。
JavaScript对象的键都是字符串类型,值可以是任意数据类型。
例如:
varperson={
name:
'Bob',
age:
20,
tags:
‘js’,‘web',‘mobile’],
city:
‘Beijing',
hasCar:
true,
};
Javascript标识符可以使用数字、大小写字母,下划线,美元符号构成,标识符不能以数字开头。
JavaScipt严格区分大小写,代码必须以分号结束。
四.Javascript中的函数
1.方法
在一个对象中绑定函数,称为这个对象的方法。
在JavaScript中,对象的定义是这样的:
varxiaoming={
name:
'小明',
birth:
1990
};
但是,如果我们给xiaoming绑定一个函数,就可以做更多的事情。
比如,写个age()方法,返回xiaoming的年龄:
varxiaoming={
name:
'小明',
birth:
1990,
age:
function(){
vary=newDate().getFullYear();
returny-this.birth;
}
};
xiaoming.age;//functionxiaoming.age()
xiaoming.age();//今年调用是25,明年调用就变成26了
2.高阶函数
JavaScript的函数其实都指向某个变量。
既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这种函数就称之为高阶函数。
(1).map()
举例说明,比如我们有一个函数f(x)=x*x,要把这个函数作用在一个数组[1,2,3,4,5,6,7,8,9]上,就可以用map实现如下:
functionpow(x){
returnx*x;
}
vararr=[1,2,3,4,5,6,7,8,9];
arr.map(pow);//[1,4,9,16,25,36,49,64,81]
由于map()方法定义在JavaScript的Array中,我们调用Array的map()方法,传入我们自己的函数,就得到了一个新的Array作为结果:
(2).reduce()
Array的reduce()把一个函数作用在这个Array的[x1,x2,x3...]上,这个函数必须接收两个参数,reduce()把结果继续和序列的下一个元素做累积计算,
比方说对一个Array求和,就可以用reduce实现:
vararr=[1,3,5,7,9];
arr.reduce(function(x,y){
returnx+y;
});//25
(3).filter()
filter也是一个常用的操作,它用于把Array的某些元素过滤掉,然后返回剩下的元素。
和map()类似,Array的filter()也接收一个函数。
和map()不同的是,filter()把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素。
例如,在一个Array中,删掉偶数,只保留奇数,可以这么写:
vararr=[1,2,4,5,6,9,10,15];
varr=arr.filter(function(x){
returnx%2!
==0;
});
r;//[1,5,9,15]
(4).sort()
JavaScript的Array的sort()方法就是用于排序的,但是排序结果可能让你大吃一惊:
//看上去正常的结果:
['Google','Apple','Microsoft'].sort();//['Apple','Google','Microsoft'];
//apple排在了最后:
['Google','apple','Microsoft'].sort();//['Google','Microsoft",'apple']
//无法理解的结果:
[10,20,1,2].sort();//[1,10,2,20]
这是因为Array的sort()方法默认把所有元素先转换为String再排序。
sort()方法也是一个高阶函数,它还可以接收一个比较函数来实现自定义的排序。
例如:
要按数字大小排序,我们可以这么写:
vararr=[10,20,1,2];
arr.sort(function(x,y){
if(x return-1; } if(x>y){ return1; } return0; });//[1,2,10,20] 3.闭包 闭包(closure)定义非常抽象,很难看懂。 我的理解是,闭包就是能够读取其他函数内部变量的函数。 由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成"定义在一个函数内部的函数"。 所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。 闭包的用处,一个是可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。 (1).读取函数内部的变量 例如: functionf1(){ varn=999; functionf2(){ alert(n); } returnf2; } varresult=f1(); result();//999 把f2作为返回值,我们就可以在f1外部读取它的内部变量 (2).将变量的值始终保持在内存中 例如: functionf1(){ varn=999; nAdd=function(){n+=1} functionf2(){ alert(n); } returnf2; } varresult=f1(); result();//999 nAdd(); result();//1000 在这段代码中,result实际上就是闭包f2函数。 它一共运行了两次,第一次的值是999,第二次的值是1000。 这证明了,函数f1中的局部变量n一直保存在内存中,并没有在f1调用后被自动清除。 原因就在于f1是f2的父函数,而f2被赋给了一个全局变量,这导致f2始终在内存中,而f2的存在依赖于f1,因此f1也始终在内存中,不会在调用结束后,被垃圾回收机制回收。 4.箭头函数 ES6标准新增了一种新的函数: ArrowFunction(箭头函数)。 为什么叫ArrowFunction? 因为它的定义用的就是一个箭头: x=>x*x 上面的箭头函数相当于: function(x){ returnx*x; } 箭头函数相当于匿名函数,并且简化了函数定义。 箭头函数有两种格式,一种像上面的,只包含一个表达式,连{...}和return都省略掉了。 还有一种可以包含多条语句,这时候就不能省略{...}和return: x=>{ if(x>0){ returnx*x; } else{ return-x*x; } } 如果参数不是一个,就需要用括号()括起来: (x,y)=>x*x+y*y 5.generator generator(生成器)是ES6标准引入的新的数据类型。 一个generator看上去像一个函数,但可以返回多次。 generator跟函数很像,定义如下: function*foo(x){ yieldx+1; yieldx+2; returnx+3; } generator和函数不同的是,generator由function*定义(注意多出的*号),并且,除了return语句,还可以用yield返回多次。 五.标准对象 1.Date 在JavaScript中,Date对象用来表示日期和时间。 要获取系统当前时间,用: varnow=newDate(); now;//TueNov01201611: 34: 14GMT+0800(中国标准时间) now.getFullYear();//2016,年份 now.getMonth();//10,月份,注意月份范围是0~11,10表示11月 now.getDate();//1,表示1号 now.getDay();//2,表示星期二 now.getHours();//11,24小时制 now.getMinutes();//30,分钟 now.getSeconds();//22,秒 now.getMilliseconds();//490,毫秒数 now.getTime();//1477971254490,以number形式表示的时间戳 注意,当前时间是浏览器从本机操作系统获取的时间,所以不一定准确,因为用户可以把当前时间设定为任何值。 如果要创建一个指定日期和时间的Date对象,可以用: vard=newDate(2016,5,19,20,15,30,123); d;//FriJun19201620: 15: 30GMT+0800(CST) 2.RegExp 正则表达式是一种用来匹配字符串的强有力的武器。 它的设计思想是用一种描述性的语言来给字符串定义一个规则,凡是符合规则的字符串,我们就认为它“匹配”了,否则,该字符串就是不合法的。 在javascript我们可以通过内建的类来定义一个正则表达式。 varreName=newRegExp(); 在javascript中处理正则表达式的方法。 test--RegExp的test方法用来测试字符串是否匹配给出的匹配模式,返回布尔值; exec--RegExp的exec方法返回包含第一个匹配的的数组或null; match--String的match方法返回包含所有匹配子字符串的数组; replace--String的replace方法完成string的替换操作,支持正则表达式; search--与String的indexof方法类似,不同的是search支持正则表达式,而不仅仅是字符串; split--按照一定规则拆分字符串并将子字符串存储到数组中的String方法。 关于这些函数的具体使用方法,可以参阅JS的相关函数手册。 3.JSON JSON是JavaScriptObjectNotation的缩写,它是一种数据交换格式。 在JSON中有以下几种数据类型: number: 和JavaScript的number完全一致; boolean: 就是JavaScript的true或false; string: 就是JavaScript的string; null: 就是JavaScript的null; array: 就是JavaScript的Array表示方式——[]; object: 就是JavaScript的{...}表示方式。 以及上面的任意组合。 并且,JSON还定死了字符集必须是UTF-8,表示多语言就没有问题了。 为了统一解析,JSON的字符串规定必须用双引号"",Object的键也必须用双引号""。 序列化 让我们先把小明这个对象序列化成JSON格式的字符串: varxiaoming={ name: '小明', age: 14, gender: true, height: 1.65, grade: null, 'middle-school': '\"W3C\"MiddleSchool', skills: ['JavaScript','Java','Python','Lisp'] }; JSON.stringify(xiaoming,null,’’); 结果: { "name": "小明", "age": 14, "gender": true, "height": 1.65, "grade": null, "middle-school": "\"W3C\"MiddleSchool", "skills": [ "JavaScript", "Java", "Python", "Lisp" ] } 第二个参数用于控制如何筛选对象的键值,如果我们只想输出指定的属性,可以传入Array: JSON.stringify(xiaoming,['name','skills'],''); 结果: { "name": "小明", "skills": [ "JavaScript", "Java", "Python", "Lisp" ] } 六.面向对象编程 JavaScript的所有数据都可以看成对象,不区分类和实例的概念,而是通过原型(prototype)来实现面向对象编程。 1.创建对象的几种方法 (1).使用对象字面量的方式{}创建一个对象 varCat={}; Cat.name="kity";//添加属性并赋值 Cat.age=2; Cat.sayHello=function(){ alert("hello"+Cat.name+",今年"+Cat["age"]+"岁了");//可以使用“.”的方式访问属性,也可以使用HashMap的方式访问 } Cat.sayHello();//调用对象的(方法)函数 (2).用构造函数创建对象 functionPerson(){ } varpersonOne=newPerson();//定义一个function,如果有new关键字去"实例化",那么该function可以看作是一个类 personOne.name="dylan"; personOne.hobby="coding"; personOne.work=function(){ alert(personOne.name+"iscodingnow..."); } personOne.work(); (3).使用原型模式创建对象 functionDog(){ } Dog.prototype.name="旺财"; Dog.prototype.eat=function(){ alert(this.name+"是个吃货"); } varwangcai=newDog(); wangcai.eat(); 2.class继承 新的关键字class从ES6开始正式被引入到JavaScript中。 class的目的就是让定义类更简单。 如果用新的class关键字来编写Student,可以这样写: classStudent{ constructor(name){ this.name=name; } hello(){ alert('Hello,'+this.name+'! '); } } 用class定义对象的一个巨大的好处是继承更方便。 现在,原型继承的中间对象,原型对象的构造函数等等都不需要考虑了,直接通过extends来实现: classPrimaryStudentextendsStudent{ constructor(name,grade){ super(name);//记得用super调用父类的构造方法! this.grade=grade; } myGrade(){ alert('Iamatgrade'+this.grade); } } ES6引入的class和原有的JavaScript原型继承有什么区别呢? 实际上它们没有任何区别,class的作用就是让JavaScript引擎去实现原来需要我们自己编写的原型链代码。 简而言之,用class的好处就是极大地简化了原型链代码。 七.浏览器 由于JavaScript的出现就是为了能在浏览器中运行,所以,浏览器自然是JavaScript开发者必须要关注的。 1.浏览器对象 (1).window window对象不但充当全局作用域,而且表示浏览器窗口。 (2).navigator navigator对象表示浏览器的信息,最常用的属性包括: navigator.appName: 浏览器名称; navigator.appVersion: 浏览器版本; navigator.language: 浏览器设置的语言; navigator.platform: 操作系统类型; navigator.userAgent: 浏览器设定的User-Agent字符串。 (3).screen screen对象表示屏幕的信息,常用的属性有: screen.width: 屏幕宽度,以像素为单位; screen.height: 屏幕高度,以像素为单位; screen.colorDepth: 返回颜色位数,如8、16、24。 (4).document document对象表示当前页面。 由于HTML在浏览器中以DOM形式表示为树形结构,document对象就是整个DOM树的根节点。 (5).history history对象保存了浏览器的历史记录,JavaScript可以调用history对象的back()或forward(),相当于用户点击了浏览器的“后退”或“前进”按钮。 2.操作DOM (1).更新DOM 一种是修改innerHTML属性,这个方式非常强大,不但可以修改一个DOM节点的文本内容,还可以直接通过HTML片段修改DOM节点内部的子树: //获取
varp=document.getElementById('p-id');
//设置文本为abc:
p.innerHTML='ABC';//
//设置HTML:
p.innerHTML='ABC red">REDXYZ'; // ...
第二种是修改innerText或textContent属性,这样可以自动对字符串进行HTML编码,保证无法设置任何HTML标签:
//获取
varp=document.getElementById('p-id');
//设置文本:
p.innerText='';
两者的区别在于读取属性时,innerText不返回隐藏元素的文本,而textContent返回所有文本。
另外注意IE<9不支持textContent。
(2).插入DOM
如果这个DOM节点是空的,例如,
,那么,直接使用innerHTML='child'就可以修改DOM节点的内容,相当于“插入”了新的DOM节点。如果这个DOM节点不是空的,那就不能这么做,因为innerHTML会直接替换掉原来的所有子节点。
可以使用appendChild,把一个子节点添加到父节点的最后一个子节点。
例如:
--HTML结构-->
把
Varjs=document.getElementById('js'),
list=document.getElementById('list');
list.appendChild(js);
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Javascript 学习 总结