案例：按钮点击弹出对话框
js的基本介绍
①js是一种脚本语言（介于编程语言之间，配合其他语言来写。特点：不能独立运行，往往配合别的语言使用，比如：html php...语法和规则不是很严格）；
②js有自己的函数（系统函数，自定义函数）变量，控制语句（顺序控制，分支，循环），语法规范不是特别的严格。
③js是解释执行语言
js源码->直接被执行（js引擎，内嵌到浏览器里）浏览器基于myie内核开发。
编译语言：java->.class->执行
c->目标文件->执行
④js可以对网页的元素进行编程控制，可以改变网页某个元素的外观
案例：按钮点击变色（推广：改变大小 位置等）
{
如何自己查询js的手册
①w3school
②jscript
}
⑤js只能用于b（brower浏览器）/s（server服务器）开发，即我们通常所说的web开发
⑥js是客户端技术，它运行在客户端的浏览器
注意：因为浏览器的差异，有些代码不支持
应当在不同的浏览器中测试，不要用偏僻的函数
js是事件驱动的，也就是用户做什么操作产生什么反应
var 的知识点：
var 变量：表示该变量是全局的，如果你其他函数中，使用变量是前面没用带var，则表示要使用全局变量，
如果你在函数中使用变量的时候，带了var则说明你要使用全新的变量。
第一个程序
hello world！
<script language="javascript" type="text/javascript">
window.alert("hellow world1!");
</script>
window是DOM对象
总结：1 js码可以放在html任何一个位置<head>~~</body> 从上到下依次执行
嵌入代码
<script language="javascript" type="text/javascript">
操作。。。。。。
</script>
程序改进：
在js中定义变量 改为加法求和
<script language="javascript" type="text/javascript">
var num1=4;
var num2=78;
var result=num1+num2;
window.alert("hellow world1!"+result);
</script>
js是弱变量类型语言 ，不需要指明变量类型。
var name='zyl';//字符串string
var num=1;//数字 number
var yy;//未定义 undefined
可以利用typeof查看某个变量的类型
typeof 变量
用alert弹出查看
变量 函数取名不要使用js的保留关键字 变量名不要用数字开头 字母 下划线 美元符号 不能用空格
严格区分大小写 例 var a；！= var A；
每条语句后加分号
js的注释
单行//
多行/* */
js的基本数据类型
Number
①整数
十进制
二进制
八进制 0开头
十六进制 0x开头
②小数（实数）
parseInt（数字字符串）；全局函数 ，解析字符串（数字字符串）并返回一个整数
特殊数值
NaN=not a number //不是一个数字
Infinity=无穷大 // 整数/0
在js中提供了两个函数来判断是不是一个NaN Infinity：
isNaN（）：判断是不是NaN；不是数返回true 是数返回false
isFinite（）：判断是不是Infinity；
Boolean
③布尔型
表示真和假
true/false
在js中表是假的有如下：false， 0 ，‘’，null， 空数组，空对象
其他的都是真
String
④字符串型
“”，‘’都可以使用
字符串的基本用法 var str=‘’；var str=“”
var str=‘hello‘w’； var str=‘hello\‘w’；
转义字符\ :\r \n 换行 \t tab
我们希望字符串中包含特殊字符，考虑使用转义符
js的复合数据类型
①数组
②对象
js的特殊数据类型
①null 空
②undefined 未定义
---------------------------------------------------------------------------------------------------------------
强制转换
字符串转换为数字
parseInt(); 整数
parseFloat(); 实数
案列：让用户输入两个数并计算（方法：setAttribute getAttribute prompt() confirm（））；推广：实现加减乘除。
js的
算数运算符
+ - * / % ++ --
除法：小数保留的精度是17位，如果要四舍五入到第二位
利用Number方法：数字.toFixed(保留小数点后的位数)
res=res+"";//数字转字符串
字符串.indexof(符号)；返回第一次出现该符号的位置
字符串.substring(起始位置，结束位置)；
案例：判断这两个数能不能被整除。
为了更好的管理js文件，可以把js文件写在一个单独的文件里
引入方法：<script src="js文件路径" type="text/javascript"></script>
---------------------------------------------------------------------------------------------------------------
++a a++
比较运算符> < >= <= == === != !==
逻辑运算符&& || ！
例题：
var a=100||0；
function abc(obj){
var k=obj||new Object();
alert(k);
}
abc('hellow');
关于或的特别说明：
如果||有一个为真就返回第一个为真的那个值，如果都为假，就返回最后一个值
位运算和移位运算******
关于补码的运算
& 按位与（两个都是1，才是1） var a=4&5;
| 按位或（1个是1，就是1）
^ 按位异或（1个是1&&1个是0，就是1）
>>右移运算 5>>2
低位溢出，用符号位补溢出的高位
<<左移运算
符号位不变，低位补0
>>>无符号右移运算
右移后，左边空出来的位用0来补充
赋值运算符=
---------------------------------------------------------------------------------------------------------------
js的三大流程控制
①顺序控制
②循环控制
案例：弹出十个对话框
1 for（）
2 while（）{}
3 do{}while（）
案例：打出金字塔
③分支控制
单分支
if(条件表达式) {
语句；
语句；
}//为真进入
document.write(内容): 不弹出对话框，直接在页面输出一句话
双分支 if(条件表达式){}
else{}
多分支
if(){}
else if(){}
...
else{}//可有可无
switch(表达式)
{
case 常量/变量：语句：break；
case 常量/变量：语句：break；
case 常量/变量：语句：break；
case 常量/变量：语句：break；
defulat： 语句；
}
注意：switch相当灵活：
1 表达式的结果类型可以是string number boolan 对象 Array
2 case 后面可以是常量，可以是变量
3 case 后面没有break，那么当程序执行某个case块时，就会一直执行，直到碰到一个break语句。
4 defualt 语句可以放到任何一个位置
5 switch （固定值）/ if else if （范围）
作业：计算器
---------------------------------------------------------------------------------------------------------------
函数
自定义函数
function 函数名（参数列表）{
语句；
}
arguments是一个数组，可以存储参数列表
js支持可变参数，即使在参数列表中为写传递的参数，依旧可以写参数，参数存储在arguments'数组里
系统函数
---------------------------------------------------------------------------------------------------------------
数组
数组的方法
数组名.length 返回数组的长度
concat(数组1，数组2，数组3，数组4，....) 连接两个或更多的数组，并返回结果
join() ： 数组名.join('字符'); 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop()： 数组名.pop() 删除并返回数组的最后一个元素
push()： 数组名.push(要添加的新项) 向数组的末尾添加一个或更多元素，并返回新的长度
reverse()： 数组名.reverse() 颠倒数组中元素的顺序。
shift()： 数组名. shift() 删除并返回数组的第一个元素
unshift()： 数组名.unshift(要添加的新项)向数组的开头添加一个或更多元素，并返回新的长度。
sort():排序
sort(排序方式)：若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
若 a 等于 b，则返回 0。
若 a 大于 b，则返回一个大于 0 的值。
splice()： 传递三个参数 splice(开始的位置，删除的个数，添加项) 删除元素，并向数组添加新元素。
slice()： slice(开始位置，结束位置)选出区间内的元素
toString()： 把数组转换为字符串，并返回结果。
valueOf()： 返回数组对象的原始值
split(): 数组名.split(按什么分割，分割多少个) 可以拆分字符串成为字符串数组
说明：当给变量赋字符串时，该变量就变成了数组，可以用来留言的验证
①一维数组
创建数组
方法1
var 数组名[元素1，元素2....];
方法2
var 数组名=new Array();
说明 js中数组是动态的
遍历数组
1 for循环
2 var key in 数组名
② 排序（冒泡,选择，插入，快速，）
查找
顺序查找：一个一个比较， 就是遍历的意思
二分查找：（一定要掌握）首先把数组中间的数找出，然后和要查找的数比对，
var arr=[1,90,100,123,4000]
function binarySearch(findval,arr,left,right){
if(right<left) { alert('查无结果');return；}
var midindex=Math.round((left+right)/2);
if(findval>arr[midindex]){
binarySearch(findval,arr,midindex+1,right)
}
else if{
binarySearch(findval,arr,0,midindex-1)
}
else alert('找到了,下标是'+midindex);
}
binarySearch(100,arr,0,arr.length-1);
③多维数组
二维数组：一维数组的元素是一维数组[[],[],[],[]]
遍历二维数组：
var arr=[[1,2,3],[1,2,3],[1,2,3]]
for(var i=0;i<arr.length;i++)
{
var ele=arr[i];
for(var j=0;j<ele.length;j++)
{
ele[j];
}
}
创建二维数组的第二种方法：
var arr=new Array();
for(var i=0;i<5;i++)
{ arr[i]=new Array();
for(var j=0;j<4;j++)
arr[i][j]= ;
}
④对象数组：
function Person(name,age){
this.name=name;
this.age=age;
}
var p1=new Person();
var p2=new Person();
var p3=new Person();
var arr=new Array();
arr[0]=p1;
arr[1]=p2;
arr[2]=p3;
---------------------------------------------------------------------------------------------------------------
js面向对象编程
对象名.construct返回对象的构造函数
1.js面向（基于）对象编程--类（原型对象）与对象（实例）
例:
function cat(){
}
var cat1=new cat();
cat1.name= ;
cat1.age= ;
cat1.color= ; //在这把cat（）当作是类（原型对象），如果直接cat（）；则是函数
对象公开属性的访问方式有：①对象名.属性名②对象名['属性名']
---------------------------------------------------------------------------------------------------------------
自定义类和对象
js中一切均为对象
如何判断一个对象是不是某个类呢？
如下方法：instanceof ： 对象 instanceof 类
1.工厂方法-使用new Object创建对象并添加相关属性(了解即可)
当编写js代码时，当你需要一个对象时，可以通过new Object来创建一个对象，然后再动态的给该对象添加属性和方法。
例：
var obj=new Object();
obj.name='王浩然';
2.通过构造函数来定义类（原型对象）
例:
function cat(){
}
var cat1=new cat();
cat1.name= ;
cat1.age= ;
cat1.color= ;
this：
我们在编程中，可能需要当我们创建一个对象后，这个对象就自动拥有某些属性。
function cat(m){
this.name=m;
}
var cat1=new cat('王浩然');
this.属性 该属性是一个公开属性
哪个对象实例调用this所在的函数，那么this就代表哪个对象实例
var是私用属性
3.使用prototype
prototype可以给类创建一个方法。
例：
给数组添加一个查找数字的方法：
Array.prototype.find=function(val){
for(var i=0;i<this.length;i++)
{
if(val==this[i]) return i;
}return -1;
}
var arr=[1,2,5,3];arr.find(5);
给所有的对象实例添加方法（原型法）
function Dog(){}
Dog.pototype.shout=function(){document.write("小狗汪汪叫");}
通过原型法分配的函数是所有对象共享的，通过原型法分配的属性是独立的
4.构造函数及原型混合方式
5.动态原型方式
js面向对象的成员函数
如果我们希望某个对象创建后，自动有方法使用，可以在定义类的时候，直接指定成员函数。
给一个对象分配函数
function person(name,age){
this.name=name;
this.age=age;
}
function speak（）
{
};
var p1=new person();
p1.fun=speak;
p1.fun();
给所有对象分配函数
function person(name,age){
this.name=name;
this.age=age;
//特权函数
this.show=function
{
};
}
var p1=new person();
p1.show();
---------------------------------------------------------------------------------------------------------------
2.js面向（基于）对象编程--构造方法和this
js的对象回收机制
当对象的地址被引用的次数，变成0，则gc就会认为该对象是垃圾，就会回收。
js中还提供了一种主动销毁对象属性的方法s
基本语法是：
delete： delete a.age; 删除a的age
js是一种支持面向对象的脚本语句，它有继承，封装，多态的特点。
js的闭包：
js的闭包问题
1.js的变量作用域问题
①js允许函数中套用函数
②如果你使用变量，该变量前面有var，则表示创建一个全新的变量，如果该变量是直接写 在页面，则我们认为是全局变量，否则是局部变量，如果没有带var则js引擎会这样处理 ，首先到父函数去找有没有该变量，如果有则使用，如果没有则创建。
2.如何解决从外部读取内部函数的局部变量，结局方法是使用闭包。
3.何为闭包？
闭包就是能够读取其他函数内部变量的函数
例：function test1(){
var n=10;
function test2(){
alert(n++);
}
return test2;}
var res=test1;
res(); //test2就实现了闭包
4.用处：
①让外部函数去访问内部函数的局部变量；②把局部变量始终保持在内存中，不被释放，不让垃圾回收机制回收该变量
练习： 设计计算机类（属性：品牌，颜色，cpu型号，内存容量，硬盘大小，价格，工作状态；方法：打开，关闭，休眠，创建一个计算机对象，调用打开，关闭方法）
用面向对象的思想做一个简单的小人移动的游戏
另一种创建对象的方式
例：var dog={
name: ,
age: ,
...
}
方法：call（），apply（）：
var dog={name:'王浩然';}
function test(){
window.alert(this.name)
}
test.call(dog);/test.apply(dog);//将test中的this的指向改为dog
for...in
①对数组遍历
var arr=new Array();
for(var key in arr){arr[key];}
②对对象遍历
通过delete 对象名.属性 来手动的删除某个属性值
js面向对象编程--三大特征
①封装性
把我们抽象出来的属性和对属性的操作写到类的定义中，
js中实现封装主要有两种（私有，公开）
②继承
1.对象冒充(实现多重继承)
function Stu(name,age){
this.name=name;
this.age=age;
this.show=function(){
alert("ss");
}
}
function midstu(name,age){
this.stu=Stu;
this.stu(name,age);//初始化，必须有
}
2.call apply
function Stu(name,age){
this.name=name;
this.age=age;
this.show=function(){
alert("ss");
}
}
function midstu(name,age){
Stu.call(this,name,age);
或
Stu.apply(this,[name,age]);
}
③多态（一个引用在不同情况下的多种状态）
方法的重载（overloading）和覆盖（overriding）
重载：类的同一种功能的多种实现方式，到底采用哪种方式取决于调用者给出的参数（js不支持）
function person(){
this.show1=function(a){};
this.show1=function(a,b){};
}
var p1=new person();
p1.show1(a);//会被覆盖
p1.show1(a,b);
js通过判断参数的个数来实现重载 例：
function person(){
this.test=function(){if(arguements.length==1) this.show1(arguements[0]);}
else if(arguements.length==2) this.show2(arguements[0],arguements[1]);
else if(arguements.length==3) this.show3(arguements[0],arguements[1],arguements[2]);
this.show1=function(a){};
this.show2=function(a,b){};
this.show3=function(a,b,c){};
}
var p1=new person();
p1.test(a);
p1.test(a,b);
覆盖：子类中定义的方法替换掉父类的方法 和顺序有关
function Stu(name,age){ function Stu(name,age){
this.name=name; this.name=name;
this.age=age; this.age=age;
this.show=function(){ this.show=function(){
alert("ss");//会被覆盖 alert("ss");//不会被覆盖
} }
} }
function midstu(name,age){ function midstu(name,age){
this.stu=Stu; this.show=function(){alert("sst");}
this.stu(name,age); this.stu(name,age);//初始化，必须有
this.show=function(){ this.stu=Stu;
alert("sst"); }
} }
多态：一个引用类型（变量）在不同情况下的多种状态，js本身是无态的，天生就支持多态
<html>
<meta http-aquiv="content-type" content=text/html;charset=utf-8"/>
<head>
</head>
<script language="javascript" type="text/javascript">
//创建一个主人
function Master(name)
{
this.name=name;
}
//创建主人喂食的方法
Master.prototype.feed=function(master,animal,food)
{
window.alert(master.name+'给'+animal.name+'喂'+food.name);
}
//创建动物的名字
function Animal(name)
{
this.name=name;
}
//通过继承的方法给每个动物添加名字
function Cat(name)
{
this.animal=Animal;
this.animal(name);
}
//创建食物的名字
function Food(name)
{
this.name=name;
}
//通过继承的方法给每个食物添加名字
function Fish(name)
{
this.food=Food;
this.food(name);
}
//创建新的类
var master=new Master('赵银龙');
var cat=new Cat('阿花');
var fish=new Fish('黄花鱼');
master.feed(master,cat,fish);
</script>
<body>
</div>
</body>
</html>
js内部对象和系统函数
1.js的内部对象（Array，Boolean，Date，Math，Number，String，正则表达）
js的内部类
toString() ：num.toString(进制) 将一对象转换为对应的字符串
concat() : 连接传入的参数
动态类 要创建一个对象，再使用其方法
Array类:
splice(开始的位置，删除的个数，添加的项):可以完成删除，添加，修改
Date类：获取当前日期 var mydate=new Date(); alert(mydate);
toLocaleString(): 根据本地时间格式，把 Date 对象转换为字符串。
alert(mydate.toLocaleString());
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getFullYear() 从 Date 对象以四位数字返回年份。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
String类：先创建一个字符串 var str="ss";
indexOf(): str.indexOf(字符) 从前面开始检索， 返回该字符首次出现的位置，对大小写敏感。 如果找不到返回-1
lastIndexOf():从后面开始检索，返回该字符首次出现的位置，对大小写敏感。如果找不到返回-1
charAt (): str.charAt(位置) 返回指定位置的字符
split (): str.split(按什么分割字符串) 把字符串分割为字符串数组。
substr(开始的位置，取的个数):从开始位置取出相应个数的字符
substring(开始的位置，结束的位置):取出从开始位置到结束位置之间的字符，包括开始位置但不 包括结束位置
静态类 通过类名就可以使用其方法
Math类：
abs() : 返回数的绝对值
ceil（） ：对一个数进行上舍入
floor（）：对一个数进行下舍入
max（） ：求出传入数字的最大数
min() : 求出传入数字的最小数
round（）：四舍五入
random() : 得到一个0--1的数字（不包括0但包括1）
PI：返回圆周率
两种都有 Number：toFixed ：num.toFixed（保留的小数点后的位数）
toString() ：num.toString(进制) 将一对象转换为对应的字符串
toLocaleString：num.toLocaleString() 可把一个数字转换为本地格式的字符串。
2.js的系统函数
js提交数据：
decodeURI():解码
encodeURI():编码 var name=encodeURI(内容);//防止乱码产生
eval():把一个字符串当成一个脚本来引用
var str='alert('2')'; eval(str);
js里的事件
①js事件驱动编程
②js事件
获取鼠标点击处的坐标
event.clientX
event.clientY
获取键值
event.keyCode
ALT是否被按下
event.altKey
shift是否被按下
event.shiftKey
鼠标事件
onmousedown: 鼠标按下事件
onmouseup： 鼠标松开事件
onclick: 鼠标点击事件
ondblclick： 鼠标双击事件
onmousemove：鼠标移动事件
onmouseover：鼠标移到某元素之上。
onmouseout： 鼠标从某元素移开。
键盘事件
onkeydown： 某个键盘按键被按下。
onkeyup： 某个键盘按键被松开。
onkeypress： 某个键盘按键被按下并松开。
HTML事件
onload ：一张页面或一幅图像完成加载。
onunload ：用户退出页面。
onabort ：图像的加载被中断。
onselect ：文本被选中。
如何区分当前浏览器的内核？
if(window.XMLHttpRequest)// Mozilla.Safari,IE7，IE8
{
if(widow.ActiveXObject)/ Mozilla.Safari
else // IE7，IE8
}
else // IE6
HTML DOM 树
在进行html dom变成是，我们把html文件看成是一个dom树
bom
浏览器对象模型
window对象
方法：
alert();
confirm();
setInterval();
clearInterval();
setTimeout(); 过多长时间去调用函数 只调用一次
clearTimeout();
moveTo(坐标) :把窗口的左上角移动到一个指定的坐标
moveBy（）：可相对窗口的当前坐标把他移动指定的像素 相对于原来的坐标 增加
resizeTo（宽，高）：把窗口变到指定像素
resizeBy（）：按照指定的像素调整窗口的大小 在原来的基础上增加或减少多少
open（）：打开一个新的浏览器窗口或查找一个一命名的窗口
open(url,name,features,replace);
name：_self（替换本窗口），_blank(开新窗口)
features:
location（是否显示地址字段）
,menubar（是否显示菜单栏）
,resizable（窗口是否可调节尺寸）
,scrollbars（是否显示滚动条）
,titlebar（是否显示标题栏）
,toolbar（是否显示工具栏）
,top（y坐标）
,width（宽）
,height（高，以像素记）
,directories（是否添加目录按钮）
,channellmode(是否使用剧院模式显示窗口)
close（）：关闭窗口
closed（）：返回窗口是否已被关闭
status=：设置窗口状态栏的文本
opener（）：返回对创建此窗口的窗口的引用
onload：页面装载
onunload：关闭窗口
history对象
该对象包含客户端的历史url信息
入门案例
函数和属性
back（）；
forward（）：
length：返回浏览器中url的数量
go（数值或url）：
window.history.属性
location对象
包含当前url的信息
函数和属性
reload（）：重新加载当前页面
replace():
hostname:
port:
href:可以指定载入新页面
window.location.属性
nabigator:
该对象包含浏览器的信息
javaEnabled():返回该浏览器是否支持java
appName:浏览器的名称
appVersion:浏览器的版本
browserLanguage:浏览器当前使用的语言
cookieEnabled:返回浏览器是否启用cookie
platform:返回浏览器所在操作系统名称
systemLanguage:系统默认语言
for(var key in window)
{
alert("<br/>"+key+"="+navigator[key]);
}
screen对象
包含有关客户机显示屏幕的信息
height：
width：
availHeight:返回屏幕可用高度
availWidth:返回屏幕可用宽度
for(var key in window)
{
alert("<br/>"+key+"="+screen[key]);
}
event对象
代表事件的信息
onresize:窗口变化
onsubmit（）：提交
onselect：文本被选中
onselectstart：return false；不能复制
给某个html元素（控件），绑定事件的三种方法
①静态绑定
②动态绑定
③通过attchEvent和detachEvent来绑定事件和解除事件的绑定
例：
but1.attachEvent("onclick",vote);
but1.detachEvent("onclick",vote);
如何获取事件的对象
在ie中
function test(){window.event;}
function test(event){}
在非ie
innerText=:替换文本
charCodeAt():返回指定字符的键值
return false 很重要//returnValue=
document对象
getElementById
getElementByTagName
getElementByName
write():在浏览器中输出字符
open（）：
close（）：
creatElement（）：
checked:检测是否被选中
307
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
