ecmascript 已经发展到 6.0 ,JavaScript 变量均为对象
javascript 是 基于对象 和 事件驱动的客户端脚本语言。
严格模式 "use strict" , ie10+,firefox4+,safari5.1+,opera12+,chrome, 目的是为了兼容ES3的一些不确定性的行为及不安全的操作。
变量声明
1)使用var 声明变量,
在函数中 使用 var声明表示局部变量,未经过初始化的变量将保存一个特殊的值 undefined, 如果不使用var来声明,则仅仅是给全局对象创建了一个新属性,但不是变量。
2)变量标识符必须以字母、下划线(_)或美元符($)开始,可以是字母、数字、下划线及美元符的组合。
3)javascript 对字母大小写敏感
4)// 单行注释 /**/ 多行注释
注意:
function test(){
message = "hi";
}
test();
alert(message);
只要调用过一次test()函数,这个变量就有了定义,就可以在函数外部的任何地方被访问到。
5)可以一条语句定义多个变量,用逗号隔开就可以 ,在编写高效代码时建议连写。
6) js的hositing机制,会把使用var声明的变量及声明式函数进行提升(置顶)。
7) 使用var定义的变量,不可以删除,未使用var定义的变量可以删除
var v = ‘test’;
delete v; // 返回false,在严格模式下出错
t = ‘a’;
delete t; // 返回true
数据类型
字符串 (string): 单双引号括起来,不会解析变量,可以互相嵌套,注意转义 , 长度不分编码,直接获取字符长度
数值(Number): 整型 浮点型 NaN型 正无穷(Infinity) 负无穷( -Infinity )
Number(): 只有纯数字字符串、数值原型输出,其他的转换成 NaN,false-》0,true-》1,null-》0
undefined-》NaN
parseInt(): 从第一个字符开始检查,直到遇到非法字符,返回数字。如果第一个字符不是数字字符或者负号,就返回NaN;parseInt(字符串,进制) ,例如 parseInt("0xAF",16);为了避免错误的解析,无论在什么情况下都明确指定基数。如果不指定进制或者进制等于0,则默认为10,进制的范围为2~36,其他的范围将返回NaN
parseFloat() : 从第一个字符开始检查,直到遇到非法字符,返回数字 小数点
parseInt 与 parseFloat的区别: parseFloat中第一个小数点是有效的,parseFloat始终忽略前导0
布尔(boolean): true false
转换为假的情况有: 0 0.0 ‘’ NaN false null undefined,其他均转换为真
数组(Array):下标从 0 开始
对象(Object): var obj={name:'zhouguoqiang',id:456}
空(Null)
未定义(undefined)
任何变量声明后的初始值均为 undefined
typeof 手动检测给定变量的数据类型 undefined、boolean、string、number、object、function
undefined 表示未声明或者未初始化,而null表示的空对象指针 注意 null==undefined 返回true
Boolean值转换
数据类型 转换为true的值 转换为false的值
Boolean true false
String 任何非空字符串 “”
Number 任何非零数字值(包括无穷大) 0 NaN
Object 任何对象 null
Undefined undefined
NaN 任何涉及NaN的操作都返回NaN, NaN与任何值都不相等,包括NaN本身
类型判断函数
isFinite() 检测数值是不是在有穷范围内 即 Math.MIN_VALUE 与 Math.MAX_VALUE 之间
isNaN 检测是否“不是数值”
typeof 操作符 检测变量类型
instanceof 操作符 检测变量的原型链上是否存在指定的类型 或者 是不是指定的类型
流程结构
重点掌握 for in 因为.length 只能获取索引数组的长度,所以使用for无法遍历对象,只能使用for in
ECMAScript不存在块级作用域,因此在循环内部定义的变量也可以在外部访问。
var person={fname:"John",lname:"Doe",age:25};
for (x in person)
{
txt=txt + person[x];
}
with语句的作用是将代码的作用域延长到一个特定的对象中,这是先查找特定对象,再查找作用域链
函数
定义方法有如下几种:
1) 普通方式
function demo(x,y){
return x+y;
}
2) 匿名函数
(function(){
alert("这是一个测试代码");
})()
3) 对象生成
var demo = new Function('x','y','return x+y');
函数对象的属性: length(形参个数) arguments(实参表) this(指向调用当前函数的作用域) prototype(原型)
函数名可以一样,后续的函数替代前面的函数。 记住 函数是对象,函数名是指针。
函数的特征:
1。 函数声明自动提升:执行代码前先读取函数声明
2。 函数表达式,将匿名函数赋值给变量,匿名函数又称拉姆达函数,必须先赋值 后使用
函数声明自动提升,函数内部可以定义函数
实参比形参少,则少的参数为undefined, 多的实参自动忽略。
函数签名: 说白了就是参数,包括参数的类型 和名称, 那js没有必要定义签名[严格模式下不成立],php也可以多传入参数,但不能少传参数,除非函数参数给了默认值,
一个函数返回另一个函数,极为有用。
几个重要的说明:
1) ECMAScript 中的所有参数传递的都是值,对象传递的是地址,但是原始引用保持不变。
2) arguments 参数集
3)arguments.callee 指向拥有这个arguments 对象的函数,在使用递归函数时很重要。 严格模式会出错
this 作用域链,在特定的作用域下调用函数,实际上等于设置函数体内的this对象的值。
改变this的指向 apply,call,bind(ie9+) 注意严格模式下如果this是全局执行环境不会自动转换成window
apply用法:
xw.say.apply(xh,["实验小学","六年级郑州牛皮癣医院"]);
call用法:
xw.say.call(xh,"实验小学","六年级");
bind用法:
xw.say.bind(xh,"实验小学","六年级")();
不同点:
a . apply\call 可以直接执行 bind返回的是一个函数,需要调用
b. apply 传递的参数是数组,call和bind直接传递参数
数组
var arr = new Array();
var arr = []; 数组字面量表示法
通过 修改 length 可以 删除和添加元素
索引数组的下标是连续的,
常用数组函数:
push pop unshift shift slice splice sort reverse join concat
toString
sort 需要调用每个数组项的toString()方法,最终按字符串比较,要实现数值的比较需要这样写:
function compare(value1,value2){
if(value1<value2){
return -1;
} else if(value1 > value2){
return 1;
}else{
return 0;
}
}
var values = [0,1,5,10,15];
values.sort(compare);
alert(values); // 0,1,5,10,15
比较函数接受两个参数,如果第一个参数应该位于第二个之前则返回一个负数,如果两个参数相等返回0,如果第一个参数应该位于第二个之后则返回一个正数。
splice()用途:
删除 splice(起始位置,要删除的项数)
插入 splice(起始位置 ,0,要插入的项)
替换 splice(起始位置,要删除的项数,要插入的任意数量项)
indexOf(): 从数组开头开始向后查找,如 arr.indexOf(4), 返回位置索引,没有找到返回-1;
lastIndexOf():从数组末尾开始向前查找。
迭代方法: 每个方法接受两个参数,一是在每一项上运行的函数,二是运行该函数的作用域对象,传入这些方法中的函数接收3个参数:数组项的值,该项在数组中的位置以及数组对象本身。
every(): 对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true;
some(): 对数组中的每一项运行给定函数,如果该函数对任一项返回true,则返回true;
filter() : 对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组;
map() : 对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组;
forEach() : 对数组中的每一项运行给定函数,这个方法没有返回值。
isArray():确定值是不是数组
字符串对象
1。 连接字符串 + 或者 concat
2。访问字符串中特定字符 charAt() 返回单个字符
3。访问字符串中特定字符的字符编码 charCodeAt 返回字符的编码
4。字符串截取 slice() substr() substring() slice和substring的第二个参数指定的是子字符串最后一个字符后面的位置
substr 第二个参数是长度
substring(-3) == substring(0); 直接将负数转换成0
5。字符串位置 indexOf(要搜索的字符串,开始搜索的位置) lastIndexOf 找到返回索引 没找到返回-1
6。删除前后空格 trim() 返回字符串副本
7。大小转换 toLowerCase(小写) toUpperCase(大写)
8。字符串搜索及字符串替换 search replace
9。字符串分割 split(分隔符,大小)
Global 对象
url编码方法:encodeURI 用于整个url encodeURIComponent
encodeURI 不会对本属于URI的特殊字符进行编码,例如冒号、正斜杠、问号、井号
encodeURIComponent 对发现的任何非标准字符进行编码,更多的对查询参数进行编码
url解码方法:decodeURI decodeURIComponent
eval:将参数当作js执行 严格模式下会抱错
Math 对象
Math.min() 最小值 任意多个参数
Math.max() 最大值
Math.ceil 进一取整
Math.floor 向下取整
Math.round 四舍五入
Math.random 随机数,返回大于等于0小于1的一个随机数
Date 日期对象
var date = new Date(); 获取当前时间对象,获取的是浏览器的时间
var date = new Date(时间戳);
var date = new Date(year,month-1,date,hour,minute,second,millisecond);
需要注意使用第三种方法,月份必须减1,因为月份是从0开始计算的。
获取当前时间的毫秒数: Date.now(); +new Date();
// 获取日期的毫秒数: getTime();
// 获取年: getFullYear();
// 获取月份: getMonth(); 从0开始计算
// 获取日期: getDate();
// 获取小时: getHours();
// 获取分钟: getMinutes();
// 获取秒: getSeconds();
// 获取毫秒: getMilliSeconds();
// 获取星期: getDay(); 0 表示星期天
对象
方式1:
var object = {
username:'zhouguoqiang',
age: 18,
eat: function(){
alert('eat');
}
}
方式2:
object = new Object(); object.username = 'zhouguoqiang';
方式3: [构造函数模式] 构造函数首写字母大写
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = function(){
alert(this.name);
}
使用字面量来定义对象时,属性也可以加引号
prototype 原型对象
每个函数都有一个原型属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。prototype就是通过调用构造函数而创建的那个对象实例的原型对象。
可以通过对象实例访问保存在原型中的值,但却不能通过对象实例重写原型中的值。
prototype原型中 才开始只有一个 constructor 属性,指向构造函数
虽然可以通过修改原生的原型添加方法,但不推荐在产品化的程序中修改原生对象的原型。可能导致命名冲突也可能意外重写原生方法。
json javascript object notation 轻量级传输文本格式
常用的数据传输格式有: text 、 html、xml、json(文件小)
{“employment”:[
"username":"zhouguoqiang",
"age":18
]
}
规定 : 键值对、大括号表示对象,[] 表示数组,数据以逗号隔开
重要函数:
json转换成字符串: JSON.stringify(json)
字符串转换成json:JSON.parse(text)
BOM 对象
window常用属性:
window.screenLeft 表示窗口相对于屏幕左边的位置
window.screenTop 表示窗口相对于屏幕顶部的位置
打开一个新窗口 window.open(URL,windowName,wndStyleOptions,flag) , 返回一个窗口句柄
flag : 新页面是否取代浏览器历史记录中当前加载页面的布尔值
如果给window.open()传递的第二个参数并不是已经存在的窗口或者框架,那么该方法就会根据在第三个参数位置上传入的字符串创建一个新窗口或新标签。如果没有传入第三个参数,那么就会打开一个带有全部默认设置的新浏览器窗口
wndStyleOptions: height width left top location resizable scrollbars status toolbar menubar
window.opener 指针 指向打开新窗口的父窗口
注意: 设置wndStyleOptions 时 如果有width 和 height 是指窗口内容区域的大小,不包含工具条部分,因此打开的是长方形。
关闭一个窗口 window.close()
定时器: setTimeout(Fun,delaytime) 单次计时器,指等待delaytime后执行Fun, 超时调用方法
setInterval(Fun,delaytime) 非间断计时器,每隔delaytime执行一次 间歇调用方法
超时调用的代码都是在全局作用域中执行的,因此函数中this的值在非严格模式下指向window的对象 , 在严格模式下是 undefined
history: history.back() == history.go(-1)
history.forward == history.go(1)
location: location.href 当前地址 location.search="?q=js" // 返回 url 的 查询 字符串
location.assign(url) 打开一个新的文档
location.reload() 重新加载(有可能从缓存中加载)
location.reload(true ): 重新加载(从服务器重新加载 )
location.replace() 不保存历史记录,直接替换方式打开新的网页
screen: 屏幕属性
screen.availWidth 屏幕可用宽度
screen.availHeight 屏幕可用高度
screen.heigth 屏幕高度
screen.width 屏幕宽度
DOM
获取元素:注意返回值(找到返回该元素对象,没找到返回Null)
通过id获取 getElementById (id在页面是唯一的,所以可以通过直接书写id来访问).比如 console.log(box)
通过标签名获取 getElementsByTagName
通过类名获取 getElementsByClassName 【注意兼容性】 getElementByName
ie8+ 使用的方法 querySelector querySelectorAll
事件:
事件处理的方式:
a. html事件处理 直接在元素属性添加 事件处理 <a onclick=fun>
b. DOM0 级事件处理
把一个函数赋值给一个事件处理属性 obj.onclick = function(){}
c. DOM2级事件处理
addEventListener 添加事件
removeEventListener 移除事件
d. ie 事件处理
attachEvent
detachEvent
添加事件 addEventListener(type,listener,useCapture) ie8 及更早版本使用 attachEvent
移除事件 removeEventListener(type,listener,useCapture) ie8 及更早版本使用 detachEvent
触发自定义事件方法 创建事件(createEvent)->初始化事件(initEvent) -》分发事件 dispatchEvent
特点:
a. 一个元素可以添加多个事件句柄,一个元素可以添加多个相同的事件句柄,后添加的同名事件句柄不会覆盖之前的事件句柄
b. 事件传递有 捕获和冒泡两种 , addEventListener 第三个参数 useCapture 默认为false表示采用冒泡传递
冒泡先执行目标对象的事件,在触发外部元素事件;捕获反过来
常用事件:
点击事件: click mousedown-》mouseup-》click 鼠标点击事件的过程
双击事件: dblclick
按下鼠标事件:mousedown
松开鼠标事件:mouseup
鼠标移动到元素上: mouseover
鼠标离开元素: mouseout
鼠标移动事件: mousemove
鼠标滑轮事件: wheel【mousewheel已经废弃】
加载完成事件: load
大小调整事件: resize
文档滚动事件: scroll
退出页面事件: unload
事件event 的一些属性:在触发DOM事件的时候都会产生一个对象
type 获取事件的类型
target 获取事件的目标 srcElement
stopPropagation() 阻止事件冒泡
preventDefault() 阻止事件默认行为
// 阻止冒泡事件兼容代码
var e = ent || event;
e.cancelBubble = true;
当同一个对象使用.onclick的写法触发多个方法的时候,后一个方法会把前一个方法覆盖掉,也就是说,在对象的onclick事件发生时,只会执行最后绑定的方法。而用事件监听则不会有覆盖的现象,每个绑定的事件都会被执行。
兼容性问题 :
事件处理来源 var e = ent || window.event ;
2. 事件目标对象 var obj = event.srcElement || event.target
注意:
阻止原有事件响应采用 event.preventDefault()
阻止事件的默认行为,例如click <a>后的跳转~
• 在W3c中,使用preventDefault()方法;
• 在IE下设置window.event.returnValue = false;
常用DOM操作:节点分为 元素节点 、 文本节点 、属性节点、注释节点 、 文档节点( 根节点 )
节点属性:
nodeName 节点的名称
元素节点的nodeName为标签名,文本节点的nodeName为#text,属性节点的nodeName为属性名相同
nodeValue 节点的值
元素节点的nodeValue为null,文本节点的nodeValue为本身,属性节点的nodeValue为属性值
nodeType 节点属性,只读
元素节点为1 属性节点为2 文本节点为3
元素 属性 文本
=========================================
nodeType 1 2 3
nodeName 对应的大写字母元素名 属性名 #text
nodeValue null 属性值 文本本身
节点指针 : firstChild 第一个孩子节点
lastChild 最后一个孩子节点
childNodes 孩子节点集合 【需要注意此集合包括回车这样的字符,需要进行处理,可以通过判断nodeType 进行过滤】
previousSibling 前一个兄弟节点
nextSibling 后一个兄弟节点
parentNode 父节点
attributes 所有的属性节点
创建节点: createElement 创建成对的元素节点 createTextNode 创建文本节点
追加节点: appendChild insertBefore(添加在前面,在指定存在的节点内部添加新元素到指定的子元素前)
删除节点: removeChild
替换节点: replaceChild(newNode, oldNode)
克隆节点:cloneNode(true) : true表示克隆本身以及所有子元素,false表示只克隆自身标签和自身属性
错误处理
try{ throw “错误”}catch(err){ console.log(err);}
xml 可扩展标记语言
xml用于传输和存储数据,其焦点是数据的内容,而html用于展示数据,其焦点是数据的外观。
xml 从文件中读取:
创建XMLHttpRequest 对象 var xhr = new XMLHttpRequest();
打开操作 xhr.open("GET","test.xml",false); // 打开方式(GET, POST), URL ,async异步否( false 表示同步,true表示异步)
发送请求 xhr.send()
获取响应 var xmlDom = xhr.responseXML;
xml从字符串中读取
1. 获得字符串 var xmlstr="<note><name>周国强</name></note>";
创建XML解析器 var xmlparser = new DOMParser();
解析字符串 var xmlDoc = xmlparser.parseFromString(xmlstr,"text/xml");
xml: <![CDATA[。。。]]> 包裹起来的数据不会被解析器解析
可以使用 getElementsByTagName(note).firstChild.wholeText; 读取<![CDATA[]]>中的数据。
xmlHttpRequest : 所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。
ajax 的实际工具 ajax: async javascript and xml 异步的javascript和xml
使用xhr的好处: 1. 可以不刷新页面就改变DOM, 2, 按需索取,只传输数据
使用xhr进行数据请求的步骤:
创建XMLHttpRequest对象 var xmlHttp = new XMLHttpRequest();
监听请求状态
xmlHttp.onreadystatechange = function(){
console.log(xmlHttp.readyState); // 请求状态
console.log(xmlHttp.status); // 响应状态码
}
发送请求
xmlHttp. open("GET",url,async); 传送方式分为: get post async:true表示启用异步传输,false表示同步。
xmlHttp.send();
如果使用post提交数据,需要设置请求头: xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
处理响应
xmlHttp.responseText; 获取字符串形式的响应数据
xmlHttp.responseXML; 获取XML形式的响应数据
=========================================================
问题1 : 如何确定页面是否处于标准模式 ?
document.compatMode