js简介
首先介绍了js是一种专门与网页交互而设计的脚本语言。主要由ECMAScript 文档对象模型(DOM) 浏览器对象模型(BOM)三部分组成。分别用来提供核心语言,提供访问和操作网页内容的方法和接口,提供与浏览器交互的方法和接口。
在HTML中使用js
介绍了<script>元素的使用和属性。defer属性--延迟脚本。async属性--异步脚本。
js引用建议全部放在<body>元素中内容的后面。这样,在解析包含js代码之前,页面的内容将完全呈现在浏览器上。而用户也会因为浏览为窗口显示空白页面的时间缩短而感到打开页面的速度加快了。
建议尽可能使用外部文件来包含js代码。优点为可维护性,可缓存(如果页面都使用同一个文件,那么这个文件只需要下载一次就可以了)。 适应未来。
基本概念
区分大小写
标识符:第一个字符必须是一个字母、下划线(_)、或者一个美元符号。其他字符可以使字母、下划线、美元符号和数字。惯例是采用驼峰大小写的格式,也就是第一个字母小写,剩下的每一个有意义的单词首字母大写。
注释:
//单行注释
/*
* 多行注释
*/
变量:省略var操作符可以定义一个全局变量,但这不是推荐的做法,因为在局部作用于定义的全局变量很难维护。
可以用一条语句定义多个变量 var message="hi" , found=false , age=29;
数据类型:
5中基本数据类型:underfined,null,boolean,number,string 1中复杂数据类型:object
typeof操作符 typeof(message) 、typeof message 、typeof 95
"undefined"--如果这个值未定义 "boolean"--如果这个值是布尔值 "string"--如果这个值是字符串 "number"--如果这个值是数值
"object"--如果这个值是对象或null "function"--如果这个值是函数
Undefined类型:在使用变量,但是未对其加以初始化时,这个变量的值就是undefined。
Null类型:Null类型是第二个只有一个值得数据类型,这个特殊的值是null。从逻辑角度上看,null值标识一个空对象指针,这也正是使用tyoepf操作符检测null值会返回‘object’的原因。
Number类型
String类型
Object类型 var o=new Object();
break和continue语句 break语句会立即退出循环,continue语句会退出当前循环,进入下一次循环
判断函数function内传入的参数
变量、作用域和内存问题
基本类型和引用类型的值 5中基本数据类型 undefined、null、boolean、number、string 这5中数据类型是按值访问的,因为可以操作保存在变量中实际的值。引用类型是指保存在内存中的对象,与其他语言不同。js无法直接访问内存中的位置,也就是无法直接操作对象的内存空间。实际操作的是引用而不是实际的对象。为此,引用类型的值是按引用访问的。
访问变量有按值和按引用两种方式,但是参数只能按值访问。
在检测基本数据类型时typeof是非常得力的助手,但是检测引用类型的时候一般会用到 instanceof
执行环境和作用域
全局执行环境被认为是window对象,所以所有的全局环境的变量和方法被作为window的属性和方法创建的。
可以延长作用域链
没有块级作用域 if for 等大括号内定义的变量可以在外部可以访问到。
垃圾收集 标记清除 和 引用计数
引用类型
引用类型:
Object类型:大多数的引用类型都是object类型,创建object类型有两种方式:一种是使用new操作符,一种是使用对象字面量表示法
var person=new Object(); person.name='Ni';person.age=29;
var person={name:'Ni',age:29}; //推荐
var person={} 于 var person=new Object();相同
Array类型:创建Array类型有三种方式:
1,var colors=new Array() var colors=new Array(5) var colors=new Array("red","blue")
2,var colors=Array() var colors=Array(5) var colors=Array("red","blue")
3,var colors=[] var colors=["red","blue"]
检测数组:Array.isArray(value){ }
增:push ("值")返回数组长度 unshift("值")//数组前端添加并返回数组长度
splice()方法,最强大的数组方法。主要用途是向数组的中部插入项。
删:shift()//删除出第一项并返回该项 pop() //删除最后一项并返回该项
复:concat()
检: reverse()反序查询 sort() 正序
截:slice() 方法 不影响原数组。
位置方法:indexOf()和lastIndexOf()
Data类型:
Function类型:函数内部有两个特殊的对象:arguments(类数组对象)和this
最耐人寻味的是prototype属性:保存所有实例方法的真正所在,toString()和valueOf都保存在prototype里面。实现继承时极为重要。
String类型:length属性,
字符方法:charAt()和charCodeAt()
创建新字符串并不会改变原始字符串的方法:slice() substr() substring() 接受一或两个参数:第一个参数是开始位置,第二个表示字符串到哪里结束。其中substr第二个参数是指返回字符的个数。另两个是指结束的位置。
位置方法:indexOf() lastIndexOf()
删除前置和后置的空格:trim()方法
字符串大小写:转大写toLocaleLowerCase() 转小写toLocaleUpperCase()
eval()方法:最强大的一个方法 eval("alert('hi')") 等价于 alert('hi')
Math对象
面向对象
面向对象:
原型模型:每一个函数都有一个prototype属性,这个属性是一个指针,指向一个对象。而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。 理解原型对象:只要创建一个函数对象,在默认情况下,所有原型对象都会获得一个constructor属性,这个属性包含一个指向prototype属性所在函数的指针。
hasOwnProperty()方法可以检测一个属性是否存在实例里,只有属性存在于对象实例里中,才会返回true。
继承:实现继承主要是依靠原型链来实现的。原型链的基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。
让原型对象等于另一个类型的实例
寄生组合式继承:最理想的继承方式(待研究)
函数
BOM
window对象
Bom的核心对象是window,它表示浏览器的一个实例。在浏览器中,扮演着双重角色,既是用户访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象。location和navigator都是window对象的属性。
窗口关系及框架
窗口位置:screenLeft 和 screenTop属性分别用于表示窗口相对于屏幕左边和上边的位置。
窗口大小:window.resizeTo(300,300)窗口大小调整到300*300
导航和打开窗口:
opener属性保存着打开本窗口的对象。
间歇调用和超时调用
在使用间歇调用的时候 var id=setInterval(function(){alert("hello world")},500) 一定要记得clearInterval(id) 不然的话会一直调用。
超时调用 setTimeout(function(){alert("hello world")},500) 没必要跟踪超时调用的id,因为每次执行代码之后,如果不再设置另一次超时调用,调用就会停止,一般最佳的模式是使用超时调用来模拟间歇调用。原因是最后一次间隔调用有可能在上一次调用结束之前就会启动。而超时调用会很好的回避这一点。
系统对话框 alert() confirm() prompt()
location对象 location是最有用的Bom对象之一,它提供了当前窗口中加载文档的有关信息,还提供了一些导航的功能。即是window的对象也是document的对象。window.location 和document.location引用的是同一对象。location保存了当前文档的信息和还将URL解析为独立的片段
通过location获取传的参数
位置操作
location.assign("http://www.baidu.com");--历史记录中生成一条记录,可返回 location.replace("http://www.baidu.com") --历史记录不生成记录,不可返回
location.reload();--加载本页面可能从缓存中加载。location.reload(true) 直接从服务器中重新加载数据。
navigator对象关于插件
screen对象 window.resizeTo(screen.availWidth,screen.availHeight)
客户端检测
能力检测:这是广泛接受的客户端检测形式。目标不是识别特定浏览器而是识别浏览器的能力
怪癖检测
用户代理检测:此检测是客户端检测的最后一个选择。只要可能,应该优先使用能力检测和怪癖检测。下面是用户代理检测全部代码
DOM
Dom描述了一个描绘了一个节点数,允许开发人员进行添加、移除和修改页面的某一部分。
if(someNode.nodeType==1){ alert( this node is a element )}
节点关系:每个节点都有一个childNodes属性,其中保存着一个NodeList对象。NodeList是一个类数组的对象,保存一组有序的节点,可以通过位置访问这些节点。
var firstChild=someNode.childNodes[0];
var secondChild=someNode.childNodes.item[1];
var count=someNode.childNodes.length;
每个节点都有一个parentNode属性,
hasChildNodes()是一个非常有用的方法,存在一个或者多子节点就会返回true。比判断someNode.childNodes.length是否为0要方便的多
操作节点: appendChild(),向childNodes列表的末尾添加一个节点,返回新增的节点。
insertBefore()方法
replaceChild()方法替换节点接受两个参数是:要插入的节点和要替换的节点。返回已删除的节点。
removeChild()方法删除节点:接受参数为要删除的节点。
Document类型:是window对象的一个属性。因此可以作为全局对象来访问。可以表示HTML页面或者其他基于xml的文档。不过,最常见的引用还是作为HTMLDocument实例的document对象。
重要的方法:getElementById() (不存在返回Null) getElementByTagName() 返回一个或多个集合的NodeList
文档写入:write()、writeln()、open()、close()
Element类型:
tagName和nodeName返回始终大写
HEML元素:所有HTML元素都是通过HTMLElement类型的子元素表示出来的。HTMLElement类型直接继承自Element并添加了一些属性。
创建元素:1---var Newdiv=document.createElement("div"); document.body.appendChild(Newdiv)
2---var div=document.createElement("<div id="myNewDiv" class="box"></div>")
子节点:
Text类型:var text=document.createTextNode("hello world") element.appendChild(text);
Dom操作技术
操作表格:下面贴出为<table>元素添加的属性和方法如下:
理解Nod
eList:理解nodelist和“近亲”NamedNodeMap与HTMLCollection,是从整体上理解DOM的关键所在。三个对象都是动态的。每当文档发生改变,都会实时更新。所以三个对象所存信息十分准确。
焦点管理:
var button=document.getElementById('myButton');
button.focus();
alert(document.activeElement===button); //true
alert(document.hasFocus());//true
innerText属性:通过该属性读值得时候,会按照由浅到深将所有节点的文本拼接起来。在通过该属性写入值得时候,会将删除元素的所有子节点,插入包含相应文本值的文本节点。火狐浏览器不支持此属性,对应的属性是textContent。
outerText在读值的时候和innerTest属性作用是一样的,在赋值的时候不仅会删除该元素的子节点,会整个替代该元素(不要使用)
document.body.clientWidth document.body.clientHeight
滚动: