web前端 【JavaScript】 学习笔记
第一课 JavaScript介绍
在HTML页面嵌入JavaScript的代码有两种方法：
· 使用JavaScript：前缀构建执行JavaScript代码
例：
<a href="javascript：alert（'使用前缀运行JavaScript'）；"
</a>
· 使用<script>...</script>标签来包含JavaScript代码
例：
<script type="text/javascript">
alert（"直接运行的JavaScript"）；
</script>
导入外部JavaScript文件可让脚本与HTML页面分离，方便维护。
语法如下：
<script src="xxx.js" type="text/javascript"></script>
第二课 JavaScript基础语法
定义变量
隐式定义：
例：
<script type="text/javascript">
temp="welcome，JavaScript！"； #使用隐式定义直接赋值
alert（temp）；
</script>
显式定义：（使用var关键字定义变量）
例：
<script type="text/javascript">
var temp； #显示声明 可用“，”一次性多个变量
temp=12； #给变量赋值
alert（temp）；
</script>
变量名称规则：
1.首字是字母，下划线或美元符号$。
2.余下字母可是下划线，美元符$和任意字母数字。
3.变量名不能为关键字。
数据类型：
数值（整数和浮点数），布尔（true和false），字符串（使用引号），未定义（undefined 确定创建但未使用的变量），空（null 值为空）对象（对象，数组等）。
数据类型转换
· 通过“+”连接两个字符串 用toString（）将数值转化成字符串。
例：
var a = 3; b = 10;
var c = a.toString()； #转化成字符串
var d = b+c;
alert(d); #输出字符串连接为103
· 通过 parseInt将字符串转换成整型。
例：
parseInt（“67red”） #取起始位整数位置显示，如起始位不是数字报错NaN
parseInt（“53.5”） #取整数部分，不进行四舍五入
parseInt（“pinyin”） #无整数显示NaN
parseInt（“0xC”） #自动进行进制转换并显示结果12
· 通过 parseFloat将字符串转换成浮点型。
例：
parseFloat（“0xC”） #与整型不同，不进行转换，值截取起始位数字显示。
parseFloat（“435.34.35”） #只截取起始位带小数点的数字显示435.34
字符串常用操作方法：
· charAt() #获取字符串特定索引出字符 -- 类似python的x[index]
· toUpperCase() #转换大写 -- 类似python的upper()
· toLowerCase() #转换小写 -- 类似python的lower()
· indexOf() #返回字符串中特定字符串第一次出现的位置 -- 类似python的x.index()
· lastindexOf() #返回字符串中特点字符串最后一次出现位置 -- 类似python的x.rindex()
· substring #返回字符串中的某个子串
· slice() #返回字符串中某个子串，支持负数参数
· concat() #将多个字符串拼接成一个字符串
· replace() #替换字符串中某个子串 -- 类似python的x.replace(old,new)
· split() #将字符串分割成多个字符串，可指定分隔符
· match() #使用正则表达式搜索目标字符串，返回匹配字符串
· search() #同上，但返回匹配字符串索引值
正则表达式
语法：
第一种方法：
var str = "..."
var reg = /pattern/ ; #pattern为表达式规则
alert(reg.exec(str)); #返回查找内容
alert(reg.test(str)); #返回是否存在查找内容
第二种方法：
...同上
var reg = new RegExp("pattern")；
...同上
RegExp对象的常用方法：
· exec(str) #检索字符串中指定值，返回找到的值并确定其位置。
· test(str) #检索字符串是否有满足指定条件的值，返回true或false。
正则表达式支持的常用通配符：
例：
var str="Hello"
var reg=/o\b/; #是否以o结尾 \bH判断是否以H开始。
alert(reg.test(str)); 返回true
通配符转义用“\”如 \.
正则表达式量词：
正则表达式修饰符：
语法：
var str="BACDJKQWBDJKL";
var reg=/B/g； #修饰符在表达式后方写入
alert(reg.test(str))； #匹配到第一个B返回true
alert(reg.test(str))； #匹配到第二个B返回true
alert(reg.test(str))； #匹配不到B返回false
JavaScript数组： #与python的列表类似
语法有三种：
var arr1=[2,4,6]； #定义是直接给数组元素赋值
var arr2=[]； #定义空数组
var arr3=new Array()； #定义空数组并通过索引赋值
arr3[0]=1；
arr3[1]="abc"；
例：
var arr=[1,"a",true]； #设置数组
for(i=0;i<arr.length;i++){ #输入每个数组值，形式类似python的for i in range(len(arr))
document.write(arr[i]+"<br/>")
}
#通过第二和第三种方法赋值，如直接赋值索引值1的位置，跳过的0位置会直接赋值undefined。
常用运算符：
三目运算符：
例： 5>2?alert("5大于2")：alert("5不大于2")； #判断成立执行：前，不成立执行：后。
逗号运算符：
例： var a,b,c； a=(b=5,c=2)； alert(a)； #a的值为最右侧变量的值，故输出为2。
void运算符：
例： var a,b,c； a=void(b=5,c=2)； alert(a)； #强调不会返回任何值，故为undefined。
typeof：
例： var a="abc"； alert(typeof(a))； #返回变量的类型，故为string。
instanceof：
例： var=[1,2]； alert(a instanceof Array)； #判断变量是否为某个类型，JS中只有Object一个父类，其他对象均平级。
流程控制语句
语句主要有if和switch：
if语句： if（条件）{执行语句块}
else if {执行语句块}
else {执行语句块}
switch语句： switch（表达式）{
case值1：执行语句块；break；
case值2：执行语句块；break；
...
default：执行语句块；}
循环语句：
主要有while循环、do while循环、for循环、for in循环。
while循环：while（循环条件）{ 循环体语句块；}
do while循环：do{ 循环体语句块；} while（循环条件）；
for循环：for（表达式1-初始化；表达式2-条件；表达式3-更新循环体变量）{循环体语句；}
例：
var i=0;
for(i=0;i<=5;i++){document.write("这个数字是："+i+"<br/>")}
#类似python中的for i in range(6)：print(i)
for in循环：for（变量in对象）{执行语句块；}
例：
var arr=new Array(3);
arr[0]=1;arr[2]="abc";arr[4]=true;
for(var index in arr){ document.write(arr[index]+"<br/>") }
#类似python中的for i in len(value): print(value[i])
#JavaScript提供了break和continue来改变循环的控制流。
常用特殊语句
· 语句块
· 空语句
· 异常抛出语句
例：throw new Error（"报错了..."）;
· 异常捕捉语句
例：
try{
var i=5;
if(i==5){ throw new Error("报错！") }
catch(e){ document.write("错误信息："+e.message+"<br/>") }
finally{ document.write("finally<br/>") }
}
#类似python中的try-except-finally。
· with语句
JavaScript函数详解
定义函数主要有三种方法：
第一种：命名函数 function 函数名（参数列表）{ 执行语句块 }
例：
function show（name）{ alert(name+",你好！") }
show（“ABC”）
第二种：匿名函数 function （参数列表）{ 执行语句块 }
例：
var f=function（name）{ alert（"匿名函数\n你好："+name）}
f（“ABC”）
第三种：使用function类构造匿名函数 new function（参数列表，函数值形态）；
例：
var f=new Function（"name","age","alert（'名字：'）+name+'年龄：'+age；"）；
f（“ABC”，22）；
函数返回值：JavaScript函数是不会有任何返回值的，如需返回值加入return语句即可。
局部变量和局部函数：和python定义相同。
三种常见调用函数方法：
第一种：直接调用函数： 对象.函数引用； 如没有分配指定对象则默认分配给window对象。
第二种：以call方法调用函数： 函数引用.call（调用者，参数1，参数2...）
第三种：以apply方法调用函数：函数引用.apply（调用者，arguments-数组）
语法：
function show（name，age）{ alert（“你好”+name+“，年龄：”+age）； }
1. window.show("a",30)；
2. show.call（window，“a”,30）;
3. sohw.apply（window，[“a”,30]）;
例：
function show(arr,func){ func.call(window,arr)；}
show（[1,2,3,4]，function(arr)){
for (i in arr){ document.write(arr[i]+"<br/>")；} }）
第三课 常用内置对象
例：
var d1=new Date(); #获取系统时间
document.write(d1.toString()+"<br/>")
var d2=new Date(“2012-12-21”); #设置时间，可自定义某些部分或全部。
document.write(d2.toString()+"<br/>")
例：
var d=new Date()；
var year=d.getFullYear()；
var month=d.getMonth()+1； #根据JS算法实际月份需+1。
var date=d.getDate()；
var day=d.getDay()；
switch（day）{ #判断执行语句将星期改为中国人习惯的方式。
case 0：day="星期日"；break；
case 1：day="星期一"；break；
case 2：day="星期二"；break；
case 3：day="星期三"；break；
case 4：day="星期四"；break；
case 5：day="星期五"；break； case 6：day="星期六"；break；
}
document.write（"今天是"+year+"年"+month+"月"+date+"日，"+day）；
对象创建
例：
function Student（name，age） {
this.name=name; #this为当前对象
student.gender="male" #student为当前类对象，故该值不能用this引用。
}
例：
var student=new Object（）；
student.name="abc"；
student.age=30;
student.info=function(){ document.write("名字："+this.name+"，年龄："+this.age)；}
student.info()；
例：
var person={
"name"："zhangsan"，"age"：30，
"son"：[ {"name"："jack"，"age"：2 }，{"name"："rose"，"age"：5 } ]
"info"：function( ) { document.write( "名字："+this.name+"，年龄："+this.age+"<br/>")；
for（var child in this.son）{ document.write（"孩子名字："+this.son[child].name+"，年龄："+
this.son[child].age+"<br/>"）}；
}
}
person.info（）；
第四课 BOM模型
例：
var count=0； #定义计数器
function showTime(){ #创建调用本地时间函数
var d=new Date()；
var hour=d.getHours()；
if（hour<10）{ hour="0"+hour；} #如小时为个位数添加0增加美观
var minute=d.getMinutes()；
var second=d.getSeconds()；
count++； #计数器+1
if（count==10）{ window.clearInterval（t）; }
docment.getElementById（"display"）.innerHTML=hour+'：'+minute+'：'+second； #显示计时器
}
var t=window.setInterval（"showTime()"，1000）； #设置计时器，并间隔1秒刷新一次
<body>
<div id="display"></div>
例：
<body> #创建第一个页面page1.html
第一页面<br/>
<a href="page2.html">下一页</a>
</body>
<body> #创建第二个页面page2.html
第二页面<br/>
<a href="page3.html">下一页</a>
<a href="javascript：history.back()">返回上一页</a>
#通过history函数返回上一页（上一页需要被浏览过才可使用）也可用history：go(-1)来实现。
<a href="javascript：history.forward()">返回上一页</a><br/>
#通过history函数返回上一页（下一页需要被浏览过才可使用）也可用history：go(1)来实现。
</body>
<body> #创建第三个页面page3.html
第三页面<br/>
<a href="javascript：history.back()">返回上一页</a>
#通过history函数返回上一页（下一页需要被浏览过才可使用）
</body>
第五课 DOM
添加创建好的选项至列表框或下拉菜单的方式：直接为<select.../>的指定选项赋值
列表或下拉菜单对象.options[i]=创建好的option对象
删除列表框、下拉菜单的选项方法：直接使用列表框或下拉菜单对象.remove（index）方法删除指定选项
列表框或下拉菜单对象.remove（index） 或 对象.option[index]=null
另一种删除方式：
city.options[city.options.length-1]=null；
清空列表方法：（直接将列表数量改为0）
function clearAll(){
var city=document.getElementById("city")；
if(city.options.length>0){ city.options.length=0；}
}
第六课 事件概念和监听事件
绑定HTML元素，在元素内增加ONCLICK，缺点是JS无法与HTML文本完全分离，如改动函数名则需要在ONCLICK中调用的函数名同样修改才可。
绑定DOM对象属性，可以将JS与HTML分离，但绑定事件需要在按钮下方执行。
解除HTML元素默认行为，如超链接等，可在绑定事件中加入 return false来阻止。
在DOM标准事件监听中，第三个参数为false执行冒泡事件（从下级往上级逐一执行），true执行捕获事件（从上级往下级逐一执行）
如绑定DOM对象又不希望将JS文件分开，可通过window.onload来实现，此功能是在整个HTML加载完毕后再去执行的命令，故当HTML全部加载后即可找到后续的ID并实现功能。
IE浏览器可通过attachEvent（事件类型，函数）添加监听，detachEvaent（事件类型，函数）来取消监听。
谷歌浏览器给mytest1添加一个监听事件，然后mytest2添加一个函数，通过函数去执行取消监听事件，或给mytest2添加一个监听事件，然后在该监听事件需要执行的函数中创建一个取消mytest1的监听事件的命令。
不建议使用浏览器指定的命令，通常使用标准监听命令,如：
function show() { alert("say something...") }
window.function() { document.getElementById("需绑定标签ID").onclick=show }