JavaScript
概述:是网景公司(Netscape)开发的一种基于客户端浏览器(也常用于服务器端)、对象、事件驱动的网页(轻量级解释型)脚本语言。(一种行为控制,决定干什么事?)前身叫作LiveScript
作用与优势:
—
通常用于浏览器,令开发者能透过DOM来操纵网页内容、或是透过AJAX与IndexedDB来操纵资料; 改善用户体验
—
电脑上的 Node.js 能让 JavaScript 作为脚本语言使用以处理自动化 减少服务器交互
—
可以组建完整的HTTP与Web Sockets服务器 立刻反馈结果
格式:
—
内嵌
—
外联
—
javascript协议:请单击
变量与数据类型
—
类型
—
—
基本类型
—
—
—
string(字符串型) "111"
—
—
—
number(数字类型) 整数1 浮点数0.1
—
—
—
boolean(布尔型) true(真) false(假)
—
—
—
undefined(未定义值) 没有被赋值的变量
—
—
—
null(空值) 没有对象被呈现
—
—
复合类型
—
—
—
object(对象)
—
—
—
—
new创建一个对象实例化
—
—
—
—
this继承函数的原型 表示当前对象。 对象,构造函数,原型链与事件处理中的几种this略微不同,一般来说谁调用了它 this就指向谁。
—
—
—
Array 数组
—
—
—
—
在JS中,数组不是数据类型,数组的数据类型其实就是对象,这是从“一切都是对象”的角度来诠释的。个人觉得还是要把它单独列出来
—
—
typeOf判断数据的类型 转义字符: \退格 \f 换页 \n 换行 \r 回车 \t制表符
—
运算符
—
—
算数运算
—
—
—
除了简单的 + - * / %之外 应该注意区别递增/递减运算符 ++ --
—
—
—
i++,与++i,的区别:前者是先赋值再自加,后者是先自加再赋值 同理--也是一样
—
—
比较运算
—
—
—
< > <= >= != ==(判断值是否相等) !== ===(判断值与类型是否相等)
—
—
—
字符串运算符 + ,+=,
—
—
逻辑运算
—
—
—
&&/and(逻辑与) 左右表达式均成立则为true ||/or(逻辑或) 左右表达式一个成立则为true !/not(非) 当为真时返回false,假时返回true
—
变量
—
—
规则:首字符必须是大写或小写的字母或下划线(_)或美元符($) ,变量名称不能是保留字和关键字 ,区分大小写
—
—
变量是什么? 用来临时存储数值的容器,变量存储的数值是可以变化的。
—
—
作用域:
—
—
—
局部变量:必须使用Var来声明变量,在函数内定义的就是局部的,否则就是全局的 局部访问全局使用作用域链
—
—
—
全局变量:省略var,在函数外声明, 在整个脚本中被使用,如果函数内的变量没有Var声明会直接影响全局的变量 全局访问局部可以使用闭包进行模拟
—
—
解释下为什么没有Var是全局变量?
—
—
—
在JS中,如果某个变量没有Var声明,会自动到上一层作用域去找这个变量的声明语句,假设找到!就使用。假设没找到!继续向上查找,一直找到全局作用域为止。如果全局中仍然没有这个变量的声明语句,那么会自动在全局作用域中自动声明。这个就是JS中的作用域链。
流程控制
—
分支语句:
—
—
if(表达式1){ 语句1 }else if(表达式2){ 语句2 }else{ 语句3 }; 和 三目运算符相似 条件 ?结果1 : 结果2; 但又有不同! 三目运算符是先运算后赋值 if语句直接赋值,不存在运算
—
—
switch(变量) {case 值: 语句 break(阻止执行); befault(相当于else): (不存在时执行)语句 ;} 当值有固定的几种情况时,使用switch语句结构清新,执行效率高。
—
—
—
break; 默认直接退出当前循环体,也可以指定退出 层级
—
—
—
说下与contiue的区别:直接运行到循环体结尾。就是结束单次循环。break是结束整个循环体。
—
循环语句
—
—
for(初始表达式;判断表达式;变动量表达式) {执行语句;}
—
—
—
特点:常用于 明确 循环次数时,条理清晰
—
—
while(表达式) {语句} do{ 语句 }while(表达式) 两者的区别 : 后者先执行语句再判定
—
—
for (变量 in 对象 ) { 执行语句 }用于遍历数组与对象 实现一个对象的所有属性的遍历
—
with()语句通常用来减少特定情形下必须写入的代码数量。在严格模式中不允许使用 with。会导致代码更难读取和调试,因此通常应当避免。
函数
—
函数的功能:1.代码重复性使用(封装) ,2.模块化编程(把大的程序分成若干个模块,多个模块封装在一个函数里)
—
函数语法: function 函数名(参数列表) { 函数执行部分; return 表达式;}
—
—
弱类型的数据类型可以来回自动转换,所以函数在定义的时候是不需要指定函数的类型的。
—
—
Javascript函数的声明 是没有返回值类型这一说法的
—
—
形参值的改变不会影响到实参。 在JS中,对象类型默认就是按地址传递。
—
匿名函数
—
—
变量(堆)是可以保存数据的,也可以保存地址的。函数名=首地址 变量名可以不断变化,函数可以不断被调用
—
自调用匿名函数
—
—
function(){ } :相当于返回首地址 ( function(){ } ) :把这部分看成一个整体
—
—
( function(){ } ) () :相当于找到这个地址并执行
—
—
—
这种写法:可以避免代码中的函数有重名问题,代码只会在运行时执行一次,一般用作初始化工作
—
arguments的使用?
—
—
在函数内部可以使用,它表示函数的形参列表,以数组形式表现,arguments对象是所有功能中可用的本地变量。
—
—
—
arguments.callee 引用当前执行的函数 arguments.length 引用传递给函数的参数
—
—
在使用函数递归调用时推荐使用arguments.callee代替函数名本身。当函数的参数列表不确定时可以通过aeguments来保存所有实参。其它时候不考虑!
—
说下 JS中 字符串的处理
—
—
substring() 方法用于提取字符串中介于两个指定下标之间的字符。不接受负数。
—
—
—
substring(n,m) 意思是 从索引 n 开始取 一直取到索引 m 注意 :不包含 索引为 m 的。
—
—
slice() 方法可从已有的数组中返回选定的元素。和 substring 相同,但它接受负数
—
—
语法:stringObject.substr(start,length) 意思是 跳过 n 个取 m 个
—
—
—
var s = "abcdef";
s.substr(2, 1) ; //跳过2个取1个 那么结果是c
—
JavaScript的词法分析!
—
—
JS中的script是分段执行的
—
—
—
1.读入第一个代码段
—
—
—
2.编译---指二进制的计算机语言 声明变量--声明函数--语法检查--语义检查--代码优化--分析并得到代码树 var i;
—
—
—
3.执行 i=数据 ; 以此类推 直到执行完毕
—
Array(数组)
—
—
什么是数组?
—
—
—
数组就是一组数据的集合,其表现形式就是内存中的一段连续的内存地址
—
—
—
数组名称 其实就是连续内存地址的首地址
—
—
JS中数组的定义?
—
—
—
无需指定数据类型,可以无需指定数组长度,可以存储任何数据类型的数据
—
—
创建数组的语法?
—
—
—
var arr=[值1,值2,值3] ; 隐式创建
—
—
—
var arr=new Array(值1,值2,值3); 构造函数的参数 直接实例化
—
—
—
var array=new array(3); arr[0]=1; arr[1]=2; arr[2]=3; array(3) 表示创建一个数组,它的长度为多少? 而不是下标0的值为3 常常会有些分不清
—
—
文本下标?
—
—
—
子主在PHP中,创建数组是就可以直接指定带有文本下标的元素
—
—
—
但在JS中,必须在创建数组之后创建带有文本下标的元素
—
—
—
在JS中,文本下标的数组元素,不计入数组长度。 数组对象可以通过“.”来引用文本下标的数组元素
—
—
如何遍历带有 文本下标 的数组元素?
—
—
—
js中,“文本下标不计入长度”,所以不能依赖length属性来进行遍历,文本下标的数组元素必须“通过for...in 语句进行遍历” for(var i in arr) { document.write(i+":"+arr[i]+"
") }
—
—
—
arr.i 这样是错误的方式,会出事undefined 表示的是找一个i的属性,而不是把i当作一个变量来进行解析
—
—
多维数组
—
—
—
var arr=[ [], [] , [] ]; for(var i=0;i
事件编程
—
绑定事件的方式
—
—
行内绑定
—
—
—
<元素 事件 =“事件处理程序”>
—
—
—
—
—
—
动态绑定
—
—
—
结构+样式+行为页面分离
—
—
—
—
document.getElementById("").onclick="display()";
—
常用事件
—
—
onload onblur onclick onmouseover onmouseout onchange onkeyup onsubmit
—
事件对象
—
—
加载事件
—
—
—
window.obload=function() { 函数名称(); } js代码后执行,通过“加载事件”实现加载过程
—
—
事件监听
—
—
—
W3C: addEventListener(type,callback,capture) IE:attach(type,callback)
—
—
—
两者不同:
—
—
—
—
触发顺序: W3C是先绑定 先触发 IE8及以下的浏览器则相反
—
—
—
—
事件名称不同:IE下事件名需要"on"前缀 W3C不需要。
—
—
—
解决监听事件的兼容性问题
—
—
—
—
function addEvent(obj,type,callback) { if(window.attachEvent) { obj.attachEvent("on"+type,callback); }else{ obj.addEventListener(type,callback); } };
—
—
事件冒泡
—
—
—
指事件响应时会象水冒一样上升至最顶级元素(必须是相同事件才会触发),大多数情况下,程序需要对事件冒泡进行取消。
—
—
—
W3C: event.stopPropagation();//必须放在函数后面执行 IE:window.event.cancelBubble=true;
—
—
—
解决取消事件的兼容性问题
—
—
—
—
function stopPropagation(ent) { if(window.event) { window.event.cancelBubble=true; }else{ ent.stopPropagation(); } };
—
—
浏览器的默认行为
—
—
—
表单按钮点击时,用户资料填写不完整,我们需要将按钮的默认行为“取消”。
—
—
—
W3C: preventDefault(event); IE:window.event.returnValue=false;
—
—
—
解决兼容性
—
—
—
—
function prevent(ent) { if(window.event) { window.event.returnValue=false; }else { ent.preventDefault(); } };
—
DOM文档对象模型
—
—
介绍:
—
—
—
DOM:document object model 文档对象模型
—
—
—
DOM:就是利用javascript如何对html标签内容的“增”、“删”、“改”、“查”等操作。
—
—
—
DOM技术:
—
—
—
—
php里边有:PHP语言 与 “XML”/HTML标签之间沟通的一个桥梁。
—
—
—
—
javascript里边有:Js语言与“HTML”/xml标签之间的沟通的一个桥梁。
—
—
—
把html标签的内容划分为各种节点: 文档节点 元素节点 文本节点 属性节点 注释节点
—
—
—
通过getElementsByTagName收集的元素节点以“集合/数组”的形式返回
—
—
属性值操作
—
—
—
获取属性值
—
—
—
—
itnode.getAttribute(属性名称);
—
—
—
—
—
只能操作w3c规定的属性
—
—
—
设置属性值
—
—
—
—
itnode.setAttribute(名称,值);
—
—
—
属性节点获取
—
—
—
—
var attrlist=itnode.attributes 返回对应节点内部的全部属性信息,数组列表形式返回 attrlist.属性名称 //获得具体属性节点
—
—
—
—
判断节点类型:nodeType
—
—
—
—
—
1--->元素节点 2--->属性节点 3--->文本节点 9--->document节点
—
—
—
节点创建与追加
—
—
—
—
节点创建
—
—
—
—
—
元素节点:document.createElement(tag标签名称);
—
—
—
—
—
文本节点:document.createTextNode(文本内容);
—
—
—
—
节点追加
—
—
—
—
—
父节点:appendchild(子节点);
—
—
—
—
—
父节点:insertBefore(newnode,oldnode);//newnode放到oldnode的前边
—
—
—
—
—
父节点:replaceChild(newnode,oldnode);//newnode替换到oldnode节点
—
—
—
节点复制与删除
—
—
—
—
节点复制操作
—
—
—
—
—
被复制节点.cloneNode(true/false); true:深层复制--->本身和内部子节点都复制 false:浅层复制--->本身(包括属性)节点被复制
—
—
—
—
节点删除操作
—
—
—
—
—
父节点.removeChild(子节点);
—
—
DOM 操作 css样式只能操作“行内样式”,操作属性样式需要把"中横线"去掉,后边“首字母”大写。
—
—
事件操作
—
—
—
什么是事件
—
—
—
—
通过鼠标,键盘对页面所做的动作就是事件。事件一旦发生需要有事件处理,该处理称为“事件驱动”,通常由“函数”担任。
—
—
—
设置事件
—
—
—
—
DOM1级方式设置
—
—
—
—
—
function 函数名称() {this[window] };
—
—
—
—
—
感觉只有这种用的相对多些,其它三种没怎么用,就不多说了
—
—
—
—
DOM2级方式设置
—
—
—
—
—
主流浏览器方式:
—
—
—
—
—
—
itnode.addEventListener(事件类型,事件处理[,事件流]); //设置
—
—
—
—
—
—
itnode.removeEventListener(事件类型,事件处理[,事件流]); //取消
—
—
—
—
—
IE浏览器方式:
—
—
—
—
—
—
itnode.attachEvent(事件类型,事件处理); //设置
—
—
—
—
—
—
itnode.detachEvent(事件类型,事件处理); //取消
—
—
—
—
—
DOM2级的特点及要求
—
—
—
—
—
—
1.事件取消必须是“有名函数”,不可以是匿名函数! 参数与判定的参数完全一致(数量/内容)!
—
—
—
—
—
—
可以为同一个对象设置“多个同类型”事件。 事件取消也非常灵活。 对事件流也有很好的处理。
—
—
—
dom2级事件对象
—
—
—
—
相对于DOM1及对象来说简化了些,但都差不多 这里介绍些不同的
—
—
—
—
事件对象作用 获得鼠标的坐标信息
—
—
—
—
—
event.clientX/clientY event.pageX/pageY //相对dom区域坐标, 后者给考虑滚动条
—
—
—
—
—
event.screenX/screenY //鼠标相对整个屏幕的坐标
—
—
—
—
感知被触发键盘键子信息 event.keyCode 通过事件触发时候获得的keyCode数值码信息可以对应键盘的键子信息。
BOM浏览器对象模型
—
window对象
—
—
alert():消息框 confirm():确认框 prompt():输入框
—
—
open():打开窗口 close():关闭窗口 focus() 获得焦点 blur() 失去焦点 print()打印 moveBy(x,y)相对移动 moveTo(x,y)绝对移动 resizeBy(x,y) resizeTo(x,y) scrollBy(x,y) scrollTo(x,y)
—
—
setTimeout(表达式,毫秒) 设置定时器 执行一次 setInterval(表达式,毫秒)反复执行
—
—
—
clearTimeout(定时器对象) 清除定时器
—
navigator 浏览器信息对象
—
—
appCodeName :内部代码 appName:浏览器名称 appVersion :版本号 platform:操作系统 onLine:是否在线 cookieEnabled:是否支持Cookie
—
location 地址栏对象
—
—
host :主机名 port:端口号 href :完整的URL信息 pathname:路径地址 protocol:协议 seatch :查询字符串 assign(url):用于页面跳转
—
—
location.replace(location.href)
—
—
—
replace的页面每次都在服务端重新生成。
—
—
location.reload()
—
—
—
重新刷新页面的时候,我们通常使用: location.reload() 或者是 history.go(0) 来做
—
screen屏幕信息对象
—
—
availheight 可用高度 availWidth 可用宽度 colorDepth 颜色质量
—
History 对象
—
—
javascript: ; 这表示不刷新当前页面 配合 return false使用
—
—
history.back()前一个 URL ,history.forward()下一个 URL,history.go(某个具体的页面)
—
document文档对象
—
—
document.getElementById(ID) id属性查找标签对象
—
—
document.getElementsByName(Name) name属性查找标签对象
—
—
document.getElementsByTagName(Name) 标签名查找标签对象
—
—
document.write() //动态向页面写入内容
—
—
lickColor超链接颜色 alinkColor 作用中的 vlinkColor作用后的超链接颜色 fgColor字体颜色
JS面向对象
—
发展史
—
—
面向机器,--->面向过程:将程序的执行分解成若干个步聚。--->面向对象:将程序的执行分解成若干个事物
—
面向对象两个基本概念? 类:代表某类事物,是抽象的。 对象:代表某个事物,是具体的。
—
类的种类
—
—
系统类
—
—
—
string 类--> 字符串类-->隐式创建
—
—
—
—
length:取得字符串的长度 indexOf :取得参数在字符串出现的位置
—
—
—
—
replace(str1,str2):字符串替换 substr(start,length):截取字符串
—
—
—
—
toLowerCase() :转换为小写 toUpperCase() :转换为大写
—
—
—
Date类 -->日期类-->直接实例化
—
—
—
—
getFullYear() :返回年份 (getMonth()+1) :返回月份(0-11) getDay():返回星期数(0-6) getMilliseconds():返回毫秒数
—
—
—
—
getDate():返回每月第几天 getHours() :返回小时数 getMinutes():返回分钟数 getSeconds() :返回秒数
—
—
—
math类 --> 数学类-->类的名称方法即可
—
—
—
—
random(数值):返回随机数 JS中,0---1之间的小数 floor(数值) :返回小于或等于该数的 最大整数 ceil(数值) :返回大于或等于该数的 最小整数 min(数值1,数值2) :返回最小数 max(数值1,数值2) :返回最大数
—
—
—
—
round(数值):四舍五入 sqrt(数值):开平方根 pow(数值1,数值2) :返回数值1的数值2次方
—
—
自定义类
—
—
—
在JS中,没有类的定义语句,只有function,每一个function, 我们可以认为它是同名类的构造函数。
—
—
—
—
Function person-->它是Person类的构造函数,这种函数也叫构造器。
—
—
—
声明对象
—
—
—
—
var 对象=new 类名(); 开辟相应内存空间,在实例化时,直接执行了 类名 的构造函数。
—
—
—
—
对象属性的使用:
—
—
—
—
—
对象.属性;
—
—
—
—
—
对象[‘属性’];
—
—
—
—
在JS中,对象的属性是动态添加的。可以是任何数据类型
—
—
—
—
重点说明:在JS中,一切都是对象
—
—
—
三个常用关键字:
—
—
—
—
constructor: 返回的是对象的构造器--*最复杂---原型对象<--->构造器
—
—
—
—
typeof :返回 数据类型
—
—
—
—
instanceof :判断对象 是否 是 某个类的实例
—
—
—
如果创建第二个 对象,不会拥有第一个对象的属性
—
—
—
—
创建一个对象时,会为这个对象开辟相应的堆空间,然后将这个对象产生的属性以及值 添加到这个对象所指向的 堆空间中,当创建第二个对象时,也会为它开辟对应的空间,但第二个对象所指向的堆空间是 空的,所以第二个对象不会拥有。
—
—
—
如果第一个对象 赋值 第二个对象 则 拥有!
—
—
—
—
将第一个对象 栈中保存的地址赋值给了 第二个对象,所以说,第二个对象也指向了第一个对象所指向的堆内存地址,两个对象指向了同一块堆内存,所以“改变一个对象的属性,会影响到别一个对象”---指的是“堆”中的属性
—
—
—
如果删除了第二个对象,不否会影响到第一个对象
—
—
—
—
p2=null---表示释放怕p2所占的 栈空间,但P1的空间仍然保留,P1仍然指向相应的堆空间,所以删除p2不会影p1对象。
—
—
—
JS中的this使用?
—
—
—
—
this的深入理解:所有的函数都是面向对象调用,普通函数的调用是由window对象调用。
—
—
—
程序中有个对象,我们在对其取值之后,如果不想保留这个对象中的某些属性,可以使用delete将这些属性“清除”-->只能删除自定义对象属性。
—
—
在类中,除了变量外的都是成员方法。
—
—
—
构造方法:对成员变量进行初始化的。是与类同名且没有返回值类型的方法。就是类构造对象时调用的方法,主要用来实例化对象。
—
json对象的使用
—
—
Ajax 返回大批量数据的方法:(1)Xml (2)Json
—
—
什么是json ?
—
—
—
对象是指属性的无序集合, 一个对象是由若干个属性构成的, 这些属性是没有顺序的 。 所谓“集合”是指 名/值(成对出现的) 对 的集合
—
—
—
在JS中,可以使用 {} 来表示这个集合 创建出来的对象就是Json对象
—
—
—
—
{属性名.属性值,属性名.属性值...}
—
—
使用json来创建对象的特点
—
—
—
使用json创建对象省略了构造器的定义 如果程序只需要一个对象---这时使用json来创建对象
—
prototype的使用
—
—
格式:class.prototype.属性----指为类下的“实例”添加的属性 class.属性-----指为类添加的静态属性
—
—
原理:当程序加载Person函数时,会为Person构造器创建Person原型对象,它们是独立存在的。构造器中有一个prototype属性指向了原型对象,原型对象中有一个constructor属性指向构造器,当Person类的实例在 使用一个不存在的属性是,会自动到Person构造器的原型对象中去找!
—
—
—
alert(Person.prototype.constructor.prototype.constructor);
—
—
原型继承
—
—
—
原型是一个对象,它是object对象下的一个实例
—
—
—
—
object是所有类的父类
—
—
原型链
—
—
—
Person原型对象也是对象,当这个对象找不到某个属性时,回到object构造器的原型对象中去找,这个就是原型链。
—
—
通过构造器得到对象的特点
—
—
—
使用构造器可以简化属性的定义 如果程序需要多个相同属性或方法的对象---使用构造器来创建对象
—
函数闭包
—
—
什么是闭包?
—
—
—
所谓“闭包”指的是一个拥有许多变量 和绑定了这些变量的环境 的表达式(通常是一个函数) 因而这些变量也是该表达式的一部分。
—
—
闭包功能
—
—
—
访问局部变量
—
—
—
使变量所占内存不被释放
—
—
—
代码实现
—
私有属性
—
—
在面向对象思想中,对于有些敏感的,不想公开的成员可以定义为私有的,在 javascript中可以模拟这个功能。
—
—
var:私有的 this:公有的 在js中,没有受保护成员!!!
—
call,apply的使用
—
—
call ( [thisOb j [,arg1 [,arg2 [,argN] ] ] ] ) 第一个参数:函数执行时,this指向谁 后面的参数:根据“需要”顺序指定
—
—
apply( [thisObj [,argArray] ] ) 第二个参数:数组,表示参数集合
—
—
在js中,函数有几种调用形式:
—
—
—
Person(); this-->window
—
—
—
var p1=new Person(); this-->p1
—
—
—
per.Person(); this-->per
JS正则表达式
—
什么是正则表达式?
—
—
正则表达式(regular expression)描述了一种字符串匹配的模式,可以用来检查一个串是否含有“某种”子串、将匹配的子串做替换 或者 从某个串中取出符合某个条件的子串等。其本身就是一种语言,在其它语言是通用的
—
正则对象
—
—
要使用正则表达式,必须要在程序创建正则对象
—
—
隐式创建
—
—
—
var 对象=/匹配模式/匹配标志;
—
—
直接实例化
—
—
—
var 对象=new RegExp(“匹配模式”,’匹配标志’);
—
—
—
—
像“\d”这样的字符,需要转义"\\d"
—
—
匹配标志: g:全局匹配 i:忽略大小写 也可以动态获取val()值判断
—
几个重要的概念
—
—
子表达式:在正则匹配模式中,使用一对“括号”括起来的内容是一个子表达式
—
—
捕获:子表达式匹配到的“内容”会被系统捕获至“系统的缓冲区中”
—
—
反向引用:捕获之后,可以在匹配模式中使用:\n(n表示数字)来引用系统的第n号缓冲区内容
编码知识
—
encodeURIComponent() 函数 与 encodeURI() 函数
—
unescape() 函数可对通过 escape() 编码的字符串进行解码。