案例:按钮点击弹出对话框
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:检测是否被选中