函数(超级武器)-适用于各种不同环境的代码,可以反复利用
1,setTimeout(函数,时间) 每隔多少时间执行一次函数
2,Prompt(指定字符串)函数
与alert类似,提供一个对话框,其中包含你指定的字符串,还提供用户输入区域,将输入内容以字符串的形式返回,如果没有输入则返回null
3,布尔运算符能够让你编写更复杂的逻辑语句
判断一款商品是否有库存且在促销
If ( inStock(有库存) == true && ( onSale(在促销) || price < 60 ) == true )
{
Alert( “buy buy buy!” );
}
一般用布尔变量直接作为判断条件,这样更为简洁
If(inStock){ }
4,Math.random()函数,对象,返回的值是[0-1)的小数,且包括0但不包括1
[0~4] Math.random()*5
Math.floor()向下取整
Math.ceil()向上取整
5,函数
Function 函数名(参数,参数,…,参数){ }
函数调用后,函数体将完成所有的工作
可以有返回值
6,数组
Var 数组名=[元素1,元素2,元素3,…,元素n]
索引 数组名.length 确定数组长度
迭代数组
While(i<数组名.length){ i++;}
For(i=0;i<数组名.length;i++){ }
Var genres=[] ;创建空数组,赋值的时候与注意下标,否则易形成稀疏数组
7,对象(一系列属性的集合)
管理复杂代码,理解浏览器对象模型和组织数据
具有属性和行为
创建对象(引用[指针]变量,不实际存储变量)
var chevy={make:”chevy”,model”belair”,year:1957,color:”red” }
你可以传递对象,获取其中的值,修改其中的值,添加属性或删除属性
访问属性:对象名.属性名(句点表示法)
添加新属性:需指定新属性并给他赋值
对象名.新属性名=值
删除属性: delete 对象名.属性名
可以先创建一个空对象,再动态的添加属性
将对象赋值给变量时,变量存储的是对象的引用,而不是对象本身,因此将对象引用作为形参传递给函数时,在函数中修改对象的属性,修改的是原始对象属性,函数结束时,在函数中对对象所做的修改都依然有效。
给对象添加行为(方法)
var chevy={
make:”chevy”,
model”bel air”,
year:1957,
color:”red”
driver:function(){
alert(“我会开车”);
make+=1;错误写法
this.make+=1;正确写法
函数中被引用的变量通常是局部变量,函数形参或者全局变量,但是make不属于上面的·任何一种,他是当前对象chevy的一个属性,因此我们需要具体告诉他是哪个对象的属性,在这里,需要用到this(当前所处的对象)在你调用方法时,this被设置为相应的对象(Math,Date,RegExp,JSON…对象)(浏览器提供的对象:Document,Window,Console)
}
}
调用:chevy.driver();
8,DOM(文档对象模型document object model)树形结构
功能:
1, 从DOM获取元素
2, 创建元素并加入到DOM后面
3, 从DOM删除元素
4, 遍历DOM中的元素
在浏览器加载网页时创建,javascript可以通过与DOM交互来访问元素和内容,还可以使用DOM来创建和删除元素
通过元素ID获取元素(元素对象:也有属性和方法):
document.getElementById(" ”);
获取元素后对其进行操作(增删改查-修改内容):
InnerHTML:读取和替换元素的内容
document.getElementById(" ”).innerHTML=”sdsdggasgd”;
9,处理DOM时,应确保代码在网页完全加载后再执行
(1)把代码移到body元素的末尾
(2)Window.οnlοad=function(){}
(3)回调函数(callback)又叫事件处理程序
10,setAttribute设置特性(css,id,style,alt,href…)
planet.setAttribute(“class”,”redtext”)---如果·指定的特性不存在,将在元素中创建它
11,getAttribute获取特性
p.getAttribute(“class/alt/href”);
12,数据类型
undefined:使用未初始化的变量,访问不存在的属性,使用不存在的数组元素。---用于判断是否给变量赋值
typeof ,用于探测操作数的类型
null:用于表示对象不存在
NaN:不是数字,无法表示的数字,它与任何东西包括本身都不相等
isNaN:检查变量与NaN是否相等
==:相等运算符,如果两个值的类型相同,就直接进行比较
如果两个值的类型不同,则尝试将他们转换为相同的类型再进行比较
(1)比较数字和字符串,将字符串转为数字,再对数字进行比较
(2)比较布尔值和其他类型,把布尔值转换成数字,再进行比较
(3)比较null和undefind,比较结果为true
===:严格相等运算符,类型和值都相同
拼接运算符:“+”,数字与字符串拼接时,将数字转为字符串
判断对象是否相等: 检查两个对象是否相等,比较的是指向对象的引用,当且仅当两个引用指向的是同一个对象时,它们才相等。
假值:undefined,null,0,“”,NaN,其他的都是真值
字符串:既像基本类型又像对象
属性:length(用于迭代)
方法:input.charAt(i)用于获得字符串中指定索引处的字符
indexOf(“cat”,“5”)将一个字符串作为参数,并在字符串中该参数首次出现的位置返回该参数中第一个字符的索引,还可以指定从哪个位置开始查找。
substring(5,10)将两个索引作为参数,提取并返回这两个索引之间的子串。
Split(“|”)将一个用作分隔符的字符作为参数,并根据这个分隔符将字符串分成多个部分。
字符串方法:
toLowerCase(大写转小写),replace(查找子串并将他们替换为了另一个字符串),slice(删除字符串的一部分),substring(返回字符串的一部分),match(在字符串中查找与正则表达式匹配的子串),concat(将字符串拼接起来),trim(删除字符串开头与末尾的空白字符),toUpperCase(小写转大写)
13,事件(某个动作触发事件)
每当有事件发生时,你都可以在代码中处理它。
处理程序(一小段代码,回调函数,监听器):一般是一个函数
每当用户点击时,都将传入一个事件对象
target:指出了触发事件的是哪个元素
//将模糊的图像替换为清晰的图像
(1)获取图像集合,迭代图像集合
将每幅图像的单击处理程序showAnswer
(2)id的名称即为清晰图像的名称
funcion showAnswer(eventObj){
varimg=eventObj.target;
varname=image.id;
name=name+”.jpg”;
image.src=name;
}
Mousemove事件:通知相应的处理程序
Onmousemove事件:指定处理程序,这样会给事件处理程序传递一个对象,其中包含如下属性:
clientX和clientY:相对于浏览器窗口左边缘和上边缘的距离
screenX和screenY:相对于设备屏幕左边缘和上边缘的距离
pageX和pageY:相对于网页左边缘和上边缘
setTimeout(函数,时间)事件-倒计时定时器:只执行一次
timer=setInterval(函数,时间):不断的执行,持续执行
clearInterval(timer);停止定时器
事件:
Click(单击时)
load(加载网页后),unload(关闭窗口时)
resize(调整浏览器窗口大小时)
mousemove(移动鼠标时),mouseover(指向元素时),mouseout(鼠标移开时)
keypress(按下任何键时)
play(单击<video)元素的播放按钮时),pause(单击<video>元素的暂停按钮时)
dragstart(拖拽网页中的元素时),drop(放下拖拽的元素时)
touchstart(在触摸设备上,触摸并按住元素时),touchend(用户停止触摸时)
14,函数
两种方式创建函数
(1)函数声明
创建一个与函数同名的变量,并将指向函数的引用赋给他
函数将在执行代码前创建,在处理其他代码前,先处理函数声明
function 函数名(形参){程序段}
(2)函数表达式
函数将在运行阶段执行代码时创建
var 变量=function(形参){程序段}-变量的值为指向函数的引用
无论是使用哪种方式,最终得到的都是函数的引用。
函数的引用:
Var fly=function(num){
…
}
Fly(5);
Var super=fly;
Super(5);
函数也是一个值,类似于数字,字符串,布尔值和对象,相比于这些值,函数值的不同之处在于我们可以调用它。
一等值
(1)可以将其赋给变量或存储在数组和对象等数据结构中。
(2)将其传递给函数
(3)从函数中返回它们
在编程语言中,可像对待其他任何值一样对待的值,包括赋值给变量,作为实参传递给函数以及从函数中返回。
数组方法sort()的工作原理:
按升序排序:在第一个数字大于第二个数字时,返回大于0的值,相等时返回0,小于时返回小于0的值
比较函数:
function compareNumbers(num1,num2){
if(num1>num2){
return1;//将第一项放在第二项后面
}elseif(num1===num2){
Return 0;//位置不变
}else{
Return -1;//将第一项放在第二项前面
}
}
Var numbe=[…];
Number.sort(compareNumber);