韩顺平javascript笔记全套解析.docx
《韩顺平javascript笔记全套解析.docx》由会员分享,可在线阅读,更多相关《韩顺平javascript笔记全套解析.docx(62页珍藏版)》请在冰豆网上搜索。
![韩顺平javascript笔记全套解析.docx](https://file1.bdocx.com/fileroot1/2023-1/8/c3aebb0f-2b46-425a-ba18-5f52c71ce122/c3aebb0f-2b46-425a-ba18-5f52c71ce1221.gif)
韩顺平javascript笔记全套解析
韩顺平2011javascript笔记(全)
JavaScript
1.javascript基本介绍:
(1)javascript是实现网页动态效果的基石,在web的开发中扮演重要的角色,被广泛的应用到各个领域:
网页游戏
地图搜索
股市信息查询
web聊天
····
(2)在web开发中,js是必不可少的技术,同时js也是ajax/jquery/extjs等框架的基础。
(3)javascript是一种广泛用于客户端WEB开发的脚本语言,常用来给HTML网页添加动态的功能,比如响应用户的各种操作。
2.脚本语言:
(1)脚本语言往往不能独立使用(单独使用没有什么意义),它一般与html/asp/jsp/php
(2)脚本语言有自己的变量,函数,控制语句。
(3)脚本语言是一种解释性语言。
3.JS一般在客户端的浏览器执行。
但也可以对服务器进行编程(非常少)
4.JavaScript简介
JavaScript是一种解释型的语言。
Javascript并不是java的一种java脚本语言,除了名字都带有java这个此外,两者并没有任何关系。
Javascript的第一个版本出现在NetscapeNavigator2浏览器中。
人们最初给javascript起的名字是LiveScript。
然而由于,当时java技术的正是如日中天,netscape公司给livescript改名为javascript,以便是人们更加注意javascript。
随着javascript的发展,微软公司决定在IE浏览器中加入微软的品牌的javascript,即Jscript。
脚本语言不仅只有javascript的一种,还有其他的脚本语言,如VBscript和perl语言
(1)标签中添加javascript代码,在之间的代码块,不是用于显示html元素,而是需要浏览器进行处理的脚本代码,在标记之间包围的代码块,称为脚本块。
☞如果没有使用包含起来的话,则浏览器则会视为普通文本
6.案例2:
对前面的程序,改成一个简单加法运算程序
◆js的变量的类型是怎样决定?
(1)js的数据类型是弱数据类型语言。
即在定义变量的时候,统一使用var表示,甚至可以去掉var关键字
(2)js中的数据类型是有js引擎来决定的。
数据类型可以变化的。
varname=”shopping”;//js引擎知道name是字符串
name=22;//这时name自动变成了数
varkk=2;//kk是整数
varyy;//y是undefined类型
7.javascript中的标识符
标识符指的是javascript中定义的符号,例如,变量名,函数名,数组名等。
标识符可以有任意顺序的大小小字母、数字,下划线和美元符号($)组成,但是标识符不能以数字开头,不能是javascript的保留关键字。
8.javascript是严格区分大小写的。
javascript中每条语句用分号“;”结束。
9.注释:
单行注释//多行注释/**/
10.javascript的基本语法---数据类型:
Ø基本数据类型:
通过typeof关键字,可以看到数据的类型
(1)Number(数值类型)
✧整型常量(10进制\8进制\16进制)
16进制以0x或者是0X开头,例如:
0x83;
8进制必须以0开头:
✧实型常量
12.32193.985E7等
✧特殊数值:
NaN(notisanumber)、Infinity、isNaN()、isFinite()
(2)Boolean(布尔类型)
true和false
(3)String字符串
“thisisabook”
Ø复合数据类型:
Ø特殊数据类型:
(1)undefine的例子:
vara;
window.alert("a的数据类型"+typeofa);
(2)null的例子:
vara=null;
window.alert("a的数据类型"+typeofa);
11.javascript的基本语法---定义变量、初始化、赋值:
(1)定义变量:
vara;
(2)初始化变量:
在定义变量的时候,就赋值:
vara=45;
(3)给变量赋值:
先定义变量:
varnum;
再赋值:
num=33
12.javascript的基本语法---数据类型转换:
(1)自动转换:
javascript的数据类型是动态的
请看一个案例:
//num先定义成Number数据类型
varnum=22;
num="helloword";
window.alert("num的数据类型"+typeofnum);
(2)强制转换:
请看案例:
如何将字符串转换成数字
//num先定义成String数据类型
vars="123";
varnum=parseInt(s);
window.alert(typeofnum);
13.javascript中的运算符和java中的一样的,但是有几个注意点:
(1)案例一:
b先转成9,在比较
vara=9;
varb=’9’
if(a==b){
window.alert(“ok”);
}else{
window.alert(“faile”);
}
(2)在逻辑运算中,0、“”、false、null、undefined、NaN均表示false
vara=0;
if(a){
window.alert(“ok”);
}else{
window.alert(“faile”);
}
14.函数:
为完成某一个功能的代码的集合。
函数定义:
函数名位于关键字function之后,为了让代码易于理解,函数名应具有一定的意义。
注意点:
函数没有返回值类型。
形参数不写具体的类型。
15.eval()可以将一个字符串当成一个脚本运行
例如:
varstr=”window.alert(“ok”)”;
eval(str);
16.escape()可以将中文或日文转为ascii码:
unescape()反之。
一般这个函数相互配合,防止在浏览器中出现乱码:
varstr=”江西”;
varstr2=escape(str);
//转回来
varstr3=unescape(str2);
17.数组:
(1)为什么需要数组?
将一组数据放在一起,组成集合。
它由一对方括号[]包围,数组的每个元素用逗号分隔,数组元素可以是任意类型的数据
(2)创建数组:
var数组名=[元素值,元素值,```]
例如:
vara=[“shopping”,123,1.1,4.5,true]
(3)二维数组:
vara=[[1,2,3],[“hello”,”world”,”jiangxi”]]
=============================================================================================================================================================================================================================================
Js面向(基于)对象编程
一、⊙澄清概念
js中基于对象==js面向对象
js中没有类class,但是它取了一个新的名字叫原型对象,因此,类==原型对象
二、⊙为什么需要对象
问题提出:
/*
张老太养了两只猫:
一只名字叫小白,今年3岁,白色,还有一只叫小花,今年10岁,花色。
请编写一个程序,当用户输入小猫的名字时,就显示该猫的名字,年龄,颜色。
如果用户输入小猫的名字错误时,则显示张老太没有这只猫猫。
*/
//传统方法比较麻烦
cat1_name="小白";
varcat1_age=3;
varcat1_color="白色";
//解决办法,把猫的属性集中,创建一种新的数据类(原型对象/类)
//用面向对象的方法来解决上面的问题
//这里就是一个类cat类
functioncat(){
}
//如果这样用
//cat()//函数
varcat1=newcat()//类
//这时cat1就是一个对象(实例)
cat1.name="小白";
cat1.age=3;
cat1.color="白色";
//从上面的代码我们可以看出
//1.js中的对象的属性可以动态添加
//2.属性没有限制
window.alert(cat1.name+cat1.age+cat1.color+cat.hobby);
三、⊙类(原型对象)和对象的区别和联系
(1)类是抽象的,概念,代表类事物
(2)对象是具体的,体表一个实体
(3)对象是以类(原型对象)为模板创建起来的实体
四、⊙创建对象的方式有五种
(1)工厂方法—使用newObject创建对象并添加相关属性.
(2)使用构造函数来定义类(原型对象).
(3)使用prototype
(4)构造函数及原型混合方式.
(5)动态原型方式.
目前我们先讲使用构造函数来定义类(原型对象),然后再创建对象实例.
基本语法:
function类名/原型对象(){
}
创建对象:
var对象名=new类名()
现在对对象特别说明:
1.js中一切都是对象
functionPerson(){}
window.alert(Person.constructor);
vara=newPerson();
window.alert(a.constructor);//a对象实例的构造函数
window.alert(typeofa);//a的类型是什么
varb=123;
window.alert(b.constructor);
window.alert(typeofb);
varc="123";
window.alert(c.constructor);
window.alert(typeofc);
//思考:
如何判断一个对象实例是不是Person类型?
if(ainstanceofPerson){
window.alert("a是Person1");
}
if(a.constructor==Person){
window.alert("a是Person2");
}
五、⊙补充说明(全局变量与局部变量的区别)
//全局变量
varabc=89;
functiontest(){
//在函数里,如果不带var,则表示使用全局的abc变量
//如果带var,则表示在test()中,定义了一个新的abc变量(局部变量)
abc=900;
}
test();
window.alert(abc);
访问对象的属性有两种方法:
(1)普通方式
对象名.属性名
(2)动态访问
对象名[“属性名”]
functionperson(){}
varp1=newperson();
p1.name="阿华";
window.alert(p1.name);//普通方式
window.alert(p1["name"]);
varval="na"+"me";
window.alert(p1[val]);//动态方式
对象引用问题的说明(图)
js还提供一种方式,主动释放对象内存
delete对象名.属性、;//这样就会立即释放对象的这个属性的空间
六、⊙this
◇问题的提出:
functionPerson(){};
varp1=newPerson();
p1.name="老韩";
p1.age=30;
window.alert(p1.name+""+p1.age);
varp2=newPerson();
window.alert(p2.name);//这里会输出什么呢?
(undefine);
这里我们可以看到window.alert(p2.name)会输出undefined
在实际编程中,我们可能有这样的需求,当我们创建一个对象后,就希望该对象自动的拥有某些属性
[比如:
当我们创建一个Person对象后,就希望该对象自动拥有name和age属性,这又怎么办?
]
◇使用this来解决
functionPerson(){
this.name="abc";
this.age=30;
}
varp1=newPerson();
varp2=newPerson();
window.alert(p1.name+""+p2.name);
◇可能有人会这样去思考问题
//***有些同学可能会这么想:
functionPerson(){
varname="abc";//私有的,只能在内部使用
varage=30;//私有的,只能在内部使用
this.name2="abc2";//this.name2表示name2这个属性是公开的
this.show=function(){//函数这就是Person类里面的一个公开的方法
window.alert("name"+name+"age"+age);
}
functionshow2(){//这就是Person类里面的一个私有的方法,只能在类内部使用,
//如要一定要使用,只能通过公开方法(特权方法)来调用私有方法来实现
window.alert("show2()"+name+"age"+age);
}
}
varp1=newPerson();
p1.show();
//p1.show2();//这里会报错
//window.alert(p1.name+""+p1.age);//错误的
记住一句话:
哪个对象实例调用this所有的函数,那么this就代表哪个对象实例
This注意事项:
This不能放在类的外部使用,否则调用就变成window调用了
◇对象---成员函数
给一个对象添加(指定)函数的几种方式
1.通用常用方式:
functionPerson(){
this.name="abc";
this.age=30;
this.show=function(){
window.alert("name:
"+this.name+""+"age:
"+this.age);
}
}
varp1=newPerson();
p1.show();
2.方式二:
functionPerson(){
this.name="abc";
this.age=30;
}
functionshow1(){
window.alert("name:
"+this.name+""+"age:
"+this.age);
}
window.alert(show1);//这个解释下面的p2.show=show2的疑惑.这个输出的是上面
//的函数代码.(构造函数)
varp2=newPerson();
p2.show=show1;//记住不要加括号
p2.show();
3.方式三:
functionPerson(){
this.name="abc";
this.age=30;
}
varp3=newPerson();
p3.show=functionshow2(){
window.alert("name:
"+this.name+""+"age:
"+this.age);
}
p3.show();
加强思考题看它们会输出什么?
题1.
functionPerson(){
this.name="abc";
this.age=30;
}
functionshow1(){
window.alert("name:
"+this.name);
}
varp2=newPerson();
p2.show=show1;
show1();//注意思考会输出什么?
提示谁调用它.this就代表谁
答案:
name:
空白(undefined)
题2.
functionPerson(){
this.name="abc";
this.age=30;
}
Varname="abc2";
functionshow1(){
window.alert("name:
"+this.name);
}
varp2=newPerson();
p2.show=show1;
show1();
答案:
nane:
abc2
4.方式四:
前几种方法有一个问题,那就是以上对象独占函数代码,这样如果对象过多,则会影响效率,js设计者,给我们提供了别一个方法,原型法:
这样多个对象可以共享函数代码,代码如下:
functiondog(){
}
//使用prototype去绑定一个函数给shout
dog.prototype.shout=function(){
window.alert('小狗');
}
vardog1=newdog();
dog1.shout();
vardog2=newdog();
dog2.shout();//ok
window.alert(dog1.shout==dog2.shout);//返回true
//扩展
vardog3=newdog();
vardog4=newdog();
vardog5=dog4;
window.alert(dog3==dog4);//false不是同一个地址
window.alert(dog4==dog5);//true
对代码原理说明图:
补讲==号的作用
1.当==的两边都是字符串的时候,则比较内容相等否。
2.如==的两边都是数字的时候,则数的大小是否相等。
3.如==的两边是对象或对象中的函数属性,则比较地址是否相等。
六、加深对类和对象的认识
如何给类添加方法(如何给某类型的所有对象添加方法)
//创建Person实例
/*
functionPerson(){
}
varP1=newPerson();
P1.name="sp";
window.alert(P1.name);
*/
//初步体验Object类,通过Object直接创建对象//Object超类
/*
varP1=newObject();
P1.name="abc";
window.alert(P1.name);
window.alert(P1.constructor);
*/
/*
vari=newNumber(10);
//我们可以给类添加方法.
Number.prototype.add=function(a){
returnthis+a;
}
window.alert(i.add(10).add(30));
varb=90;
window.alert(b.add(40));
*/
/*
请思考给js的Array对象扩展一个find(val)方法,当一个Array对象调用该方法
时候,如果能找到val则返回其下标,否则返回-1;
*/
//体验一下array;
vararr=newArray(3)
arr[0]="George"
arr[1]="John"
arr[2]="Thomas"
//遍历该数组
for(vari=0;idocument.write('name:
'+arr[i]+" ");
}