JavaScript—脚本语言
- js是一个解释型的脚本语言
- 基本语法
变量命名：var
1、可以使用 /_/字母
注意：不允许有空格
js数据类型
两类：基本数据类型：Number，String，Boolean
引用数据类型：Object
alert(" “);调程序（慎用）
console.log(” “);（控制台输出）
console.log(typeof obj);判断输入类型
三种弹出对话框的语句
alert（“”）
prompt(”"):通过prompt输入的数据，统统都是string类型
confirm("")
"+"运算符：一、算术相加，必须都得是number类型
二、如果有一个不为number类型，只起连接作用
数据类型转化：
parseInt(arg) 只保留整数部分
parseFloat(arg)
Number(arg): Number(arg)是个对象
如果给的参数无法转换为number类型数据，返回NaN
判断用户输入是不是数字 ： isNaN(arg)
Boolean(“0”)->true
Boolean()->false
Boolean("")->false
Boolean(null)->false
三、函数
1、函数声明不用写参数类型，所有函数都以小写字母开头
2、自定义函数不要与js系统函数名相同
3、js中不存在方法重载，后出现的方法会覆盖掉之前的方法
4、变量提升
var num=10;
function myFunc(){var num;
console.log(num);
}
myFunc();
等价于
var num=10;
function myFunc(){
console.log(num);
var num;
}
myFunc();
在函数中，后声明的变量，声明前就调用了 。它是一种叫“变量提升“的机制。
插入：js 异常处理
try{
}catch(err){
}finally{
}
四、对象
js 中单引号与双引号无区别
内置对象
String
Boolean
Date
Math
Number
Array
//String对象
console.log(str.substr(2,3); //从2号索引位置，连续截取3个字符作为字符串
console.log(str.substring(5,10); //从5号位置到10号位置，组成字符串
//Date对象
var d=new Date();
console.log(d.toLocaleString());—>显示本地时间
console.log(d.toDateString);–>显示年月日
console.log(d.getFullYear()+"-"+d.getMonth()+"-"+d.getDay());—>年-月-日
//Math对象
var m=Math.ceil(12.1);
consol.log(m);//向上取整（13）
m=Math.round(9.5);//四舍五入（9）
m=Math.random();//js中的random取随机数，0<=m<1
//班里共50个人，随机点名
m=parseInt(Math.random()*50);
consol.log(m);
五、数组
//Array对象
var arr=new Array();
//var[] arr=new var[3];错误
arr[0]="猪八戒";
arr[1]="孙悟空";
for (var i = 0; i<arr.length; i++) {
console.log(arr[i]);
}
console.log(arr.join(" "));
//for ... in语句
for(var i in arr){
console.log(arr[i]);
}
js中Array对象可以当字典使用，.length属性就不能使用了
<–>如果遍历一个字典，只能使用for…in语句
访问对象只能使用key
arr=[1,2,3,4];
for (var i = 0; i <arr.length; i++) {
console.log(arr[i]);
}
//字典里的字面量表示方法
var nameList={"name":"黄家驹","age":"21","address":"香港"};
for (var key in nameList) {
console.log(key+":"+nameList[key]);
}
console.log(nameList.name);
console.log(nameList.age);
console.log(nameList.address);
六、Json对象
Json对象，它是以”key:value"对集合的一种数据存储方式
var nameList1={"name":"黄家驹","age":21,"address":"香港"};
var nameList2={"name":"成龙","age":42,"address":"香港"};
var nameList3={"name":"黄晓明","age":32,"address":"上海"};
nameList=[{"name":"黄家驹","age":21,"address":"香港"},{"name":"成龙","age":42,"address":"香港"},{"name":"黄晓明","age":32,"address":"上海"}];
console.log(nameList.length);
for (var i=0;i<nameList.length;i++) {
console.log("name"+nameList[i].name);
console.log("age"+nameList[i].age);
console.log("address"+nameList.address);
}
七、js的扩展函数
var name="张三丰";
String.prototype.biaoqing=function(bq){//给String对象扩展一个叫biaoqing的方法
if (!bq) {
bq="~_~";
}
return bq+this+bq;
}
console.log(name.biaoqing("@"));
八、全局变量与局部变量
1.js里没有块级作用域
2. 全局变量与局部变量
全局变量：在函数外部声明的变量是全局变量
在函数内部没声明的局部变量，默认为全局变量
局部变量：在函数内部声明的变量是局部变量
var a=10;
function myFun(){
a="我爱你们";
b=a;
}
myFun();
alert(a);
alert(b);
九、事件
事件是js内置好的 ，所有事件都是以“on”开头
js里事件的三要素：事件源、事件、事件响应程序
十、DOM
DOM：文档对象模型
BOM：BOM>DOM
window对象，是一个顶级对象。window对象给我们提供了一些列的对象、方法、属性，供开发者使用。比如alert就是window对象的一个方法操作页面元素的方法``
由于window是一个顶级对象，所以js中可以省略不写。
DOM给我们提供一系列
<input type="button" value="链接到新浪" onclick="window.location.herf='http://www.sina.com.cn';">
DOM树
元素、节点、标记
html+css+js（类上样式，Id上动作）
十一、事件的注册
1.行内注册
2.动态注册
注意：1.注册代码必须出现在标记之后
2.注册时，只给要绑定的事件响应函数的函数名就行了，不要带圆扩号，带圆括号就成了方法调用。
但是，我们习惯把js 代码写在头部（head）；
终极的动态注册事件方法，就要用到window.onload事件，它在文档全部加载完毕后才会触发
this在任何时候都是指向当前触发事件的事件的事件源（对象）
js在web引用中的三大用处；
1、DOM操作 document.getElementById(),document.getElementByTagName()
2、控制样式
3、动画效果
十二、js控制样式
两种方法:1、行内样式，控制页面
$("test").style="background-color: orange;width: 500px;"
不正确 （IE不支持）
$("test").style.backgroundColor="red";
$("test").style.width="500px";
2、控制元素的“类”，达到控制样式的目的
需要控制元素的className属性，而不是class属性，class也是js的关键字
十五、Date对象
十六、正则表达式
1、任务：检查用户在文本框中输入的字符串是不是合法的电话号码
2、正则表达式的作用：做字符串的格式匹配
3、注意：正则表达式不是js独有的，Java、c#
4、元字符
1> ".“代表除了\n以外，任意的单个字符
a.b
“a/b”，“a/b”
2> "[ ]"代表在任意一定范围之内的任意1个字符
a[0-9]b ->表示a和b之间必须有一个阿拉伯数字
a0b,a2b
a[xyz]b ->表示在a和b之间必须有一个字符，这个字符必须是x 或 y 或 z
axb,ayb
a[0-9a-zA-Z] ->表示在a和b 之间必须有一个字符，这个字符可以是0-9a-zA-Z之间任意一个字符
aHb
3> “|” 代表或的意思
m|hello ->表示：m或者hello
千万别理解为：mello或者hello
(m|h)ello: mello或者hello
5、限定符
1> 表示前面出现的表达式可以出现0次或者多次（0-n)
abc
ab,abc,abcc
x(abc)*y
xy,xabcy
2> + 表示前面出现的表达式可以出现0次或者多次（0-n）
3 > ? 表示0次或者1次
4 > {n} 表示必须出现n次
x(abc){2}y xabcabcy
x[0-9]{5}
x[a-zA-Z]{5}y
x[^0-9a-z}{5}y
abc,abcabc,ayxabc
只能是abc,其他字符都不能有^abc$
^xy.z$ : xy9z , xy&z , 123xy&z
8、元字符简写方法
1> \d代表数字 [0-9]
2> \D 表示\d的取反
3> \w 表示字母、_ 、数字（汉字）
4> \W 表示\w的取反
5> \s表示空白符（空格，回车，制表符、\t）
6> \S 表示\s的取反
练习：
1、写出中国的电话号码的正则表达式
010-78656432 ，0372-2900006，95580，110，15537241221
^(\d{3,4}-?\d{7,8})|(\d{5})$
2、写出Email的正则表达式，[email protected]
^\w+@[0-9a-zA-z]+(.[a-zA-Z]+(.[a-zA-Z)+)+$
十七、定时器
js 里有两种定时器
1、每隔一段时间做一件事，（循环一直做，直到你强制停止了定时器）
2、多久之后，干一件事情（只做1次），延迟做一件事
setInterval(function,ms);
//假如我要设置一个定时器，要求5秒灯泡闪一下
1> setInterval（function(){//灯泡闪烁},5000);
2> function shake(){//灯泡闪烁}
setInterval(shake,5000);
setInterval(shake(),5000);//错误写法
注意：setInterval()又返回值，这个返回值就是指向当前定时器对象的引用
清理定时器 clearInterval(timer);
setTimeOut(function,ms);
十八、this
this只能在函数内部出现，它永远代表的是直接调用该函数的对象。
十九、arguments
它是一个对象，只用在函数里，它的一些成员，是用来表示本函数执行是的一些重要数据
arguments.length :调用函数时传递的实参个数
arguments.callee: 正在执行的函数它自己本身
二十、动画效果
1、匀速动画
2、缓动动画
缓动动画公式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>缓动动画</title>
<style>
#box{
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
top: 100px;
left: 0px;
}
</style>
<script>
function $(id){
return document.getElementById(id);
}
window.onload=function(){
var leader=0;//用来计算每次定时器跳动之后，盒子应该处在的位置
var target=0;//目标位置
setInterval(function(){
leader=leader+(target-leader)/10;
$("box").style.left=leader+"px";
}, 30);
$("btn").onclick=function(){
target=500;
}
}
</script>
</head>
<body>
<input type="button" value="开始" id="btn">
<div id="box"> </div>
</body>
</html>