javascript概述
功能:
1.增加网页交互性
2.表单验证
3.页面特效
4.系统导航
5.操纵html
类型:
解释性语言。
添加方法:
1.外部脚本:
<script type="text/javascript" src="somejs.js"></script>
2.内嵌:
<head> <script type="text/javascript"> ... </script> </head>
3.伪URL:
<input type="button" οnclick="alert('hello');"/> <a href="javascript: alert('hello');">Click me</a>
4.noscript:
<noscript> //当网页不支持脚本时进入 </noscript>
技术体系:
1.核心语言定义
2.本地对象
3.浏览器对象模型BOM(Browser Object Model)
4.文件对象模型DOM(Document Object Model)
5.事件处理模型
基本数据类型
作用域:
不加var关键字的变量默认为全局变量。
var a=0; //局部变量 b=0; //全局变量
弱类型:
变量在定义时不需要声明类型。
var a; //未初始化时,typeof a = undefined a = 100; a = 'hello'; a = true;
bool类型:
变量为0时,作为bool型判断为false,非零时为true。
a = 0; //a为false
typeof运算符:
var c; a = new java.util.Date(); typeof a; //typeof a为object a = null; typeof a; //typeof null为object typeof b; //未定义的变量,typeof b为undefined typeof c; //声明但未初始化的变量,typeof c为undefined
双等与三等:
a==b; //1.b转成a的类型,2.对比 a===b; //1.先对比类型,2.再对比值,3.类型与值均相同才返回true
null与undefined:
null == undefined; //为true,undefined类型转为object类型为null null === undefined; //为false,类型不同
null与false:
null作为判断条件时为false,但null==false为false。
null == false//为false,bool型变量无法转为 if(null){...} //相当于if(false)
类型转换:
a.自动转换
由运算符进行的隐式转换。
例:加法时,有字符串按字符串处理;减法时按Number类型处理。
var m = '10'-2+'2';//m == '82' var n = '10'+2+'2';//n == '1022'
b.转型函数
value.toString(); parseInt(value);/parseFloat(value);
c.构造函数
Boolean(value);/Number(value);/String(value);
对象类型
1.本地对象(native object):
包括Global、Math、Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError等原生类对象。
其中,Global对象及Math对象又称为内置对象(built-in object),其在脚本初始化时就创建,无需进行实例化,可以直接使用其属性及函数。
Global:
Global对象是脚本中所有对象的根对象。
属性:
NaN:
表示非数字类型。
undefined:
表示未定义的变量。
函数:
eval:
执行参数中的JS代码。
eval(code); //将执行code所包含的js代码
isNaN:
判断对象是否为Number。
isNaN(3.5); //true
isFinite:
判断对象是否为有穷数。
isFinite(3.5); //true
parseInt/parseFloat:
转型函数。
parseInt('3'); parseFloat('3.5');
Math:
用于执行数学计算任务,通过Math类名来调用其属性及函数,无需实例化。
属性:
PI/E/LN2/LN10:
圆周率/自然对数底数/2的自然对数/10的自然对数。
Math.PI;
函数:
random:
返回0到1之间的随机数:
Math.random();
round:
四舍五入。
Math.round(3.5); //4
acos/asin/atan/cos/sin/tan:
三角函数。
Math.cos(Math.PI);
sqrt:
求平方根。
Math.sqrt(4); //2
pow:
求多次方。
Math.pow(2,3); //2³
Array:
逐个赋值:
var arr = new Array(); arr[0] = 1; arr[1] = 2; arr[2] = 3; //arr.length为3
函数:
var arr = new Array(4); //arr.length为4 arr.join(); //返回字符串"1,2,3" arr.join('#'); //返回字符串"1#2#3" arr.reverse(); //返回数组3 2 1 arr.pop(); //返回3,arr变为2 1 arr.push(); //返回4,arr变为4 2 1
Date:
例:显示实时时间。
<body> <span id = "time" /> </body>
//第一种实现 function getTime(){ var time = new Date(); var y=time.getYear(); var M=time.getMonth()+1; var d=time.getDate(); var h=time.getHours()>9?time.getHours():"0"+time.getHours(); var m=time.getMinutes()>9?time.getMinutes():"0"+time.getMinutes(); var s=time.getSeconds()>9?time.getSeconds():"0"+time.getSeconds(); var t = y+"年"+M+"月"+d+"日"+h+":"+m+":"+s; document.getElementById("time").innerHTML=t; setTimeout('getTime()',1000); //每秒刷新 }
//第二种实现 function getTime(){ var time = new Date(); document.getElementById("time").innerHTML = time.toLocaleString(); setTimeout('getTime()',1000); }
Number:
上下限:
var a = Number.MAX_VALUE; a = Number.MIN_VALUE;
正负无穷大:
var a = Number.POSITIVE_INFINITY; a = Number.NEGATIVE_INFINITY;
是否有穷大:
var a = new Number(1/0); isFinite(a); //为false,a无穷大
String:
var a = new String("test"); var b = new String('test');
*函数对象:
将某个函数赋给一个对象,当不含有括号时为赋值,含有括号时为调用。function myfunc(){...} var mf = myfunc; //赋值 var mf1 = myfunc(); //直接调用myfunc()函数
instanceof运算符:
返回对象类型。
var str = 'test'; str instanceof String; //true
2.宿主对象:
由浏览器提供的对象,包括BOM、DOM,如window对象、document对象等,具体的内容因浏览器而异。
BOM:
Window对象:
可以进行窗口操作、导航和打开新窗口、系统对话框、状态栏、时间间隔和暂停、历史等。
窗口操作:
moveTo:
页面左上角移动到屏幕指定位置。
window.moveTo(50,50);
moveBy:
页面当前位置移动相对距离。
window.moveTo(50,50); //左上角移动到50,50 alert('moved to 50,50'); window.moveBy(-50,-50); //移动回屏幕左上角 alert('moved back to 0,0');
resizeTo:
页面宽度及高度设置为指定像素。
window.resizeTo(200,300);
resizeBy:
页面宽度及高度增减指定像素。
window.resizeBy(100,-200); //宽度增加100px,高度减少200px
导航和打开新窗口:
open:
打开新窗口。
window.open(URL, {name}, {window_features});
其中name参数可以被<a target="name" />定位,窗口特征常用参数包括:
left / top / width / height:
设置窗口的坐标、宽高。
location / menubar / scrollbar / titlebar / toolbar / status:
设置地址栏、菜单栏、滚动条、标题栏、工具栏、状态栏的可见性。值为yes/no或1/0。
fullscreen / resizable:
设置是否全屏、是否可以改变大小。值为yes/no或1/0。
window.open('about:blank', 'myWindow', 'width=500,height=500,left=200,top=200,menubar=yes,status=yes');
close:
关闭窗口。
myWindow = window.open('about:blank','xxx'); myWindow.close();
系统对话框:
alert:
显示纯文本,单个按钮“确定”。
alert('test String');
confirm:
显示纯文本,按钮“确定”、“取消”,根据点击结果返回true/false。
var r = confirm('Are you sure?'); true == r?alert('You\'re sure.'):alert('You\'re not sure.');
prompt:
显示纯文本及输入框,按钮”确定“、”取消“,返回输入的字符串。
var r = prompt('Your name:'); null!=r&&""!=r?alert('Hello '+r+"!"):alert('You did not enter your name.');
状态栏:
defaultStatus属性:
默认的状态栏文本。
window.defaultStatus = 'new default status text'; alert(window.defaultStatus);
status属性:
窗口的状态栏文本。
window.status = "new status text";
时间间隔和暂停:
setTimeout / clearTimeout:
定时器的启动与停止,这类定时器只会执行一次。
var timeout; function timeBomb(){ ... timeout = window.setTimeout('timeBomb', 1000); } function defuseBomb(){ window.clearTimeout(timeout); }
setInterval / clearInterval:
定时器启动与停止,这类定时器会一直循环,直到clearInterval被调用。
var interval; function dumpTrash(){ ... } function startDump(){ interval = window.setInterval('); } function stopDump(){ window.clearInterval(interval); }
history对象:
操控历史页面,history是window对象的一部分,通过window.history调用。
go:
按浏览历史前进或后退,正数前进,负数后退。
window.history.go(1);
back / forward:
前进/后退一个页面。
window.history.back(); window.history.forward();
location对象:
操控页面URL,location是window对象的一部分,通过window.location调音。
href属性:
进行 页面跳转。
window.location.href = 'http://www.google.com';
reload:
window.location.reload();
navigator对象:
获取浏览器信息,navigator是window对象的一部分,通过window.navigator调用。
appCodeName / appVersion / onLine:
浏览器代码名 / 版本 / 是否在线。
alert(window.navigator.appCodeName + " " + appVersion); alert("Is navigator online: " + window.navigator.onLine);
screen对象:
获取显示屏的信息。screen是window对象的一部分,通过window.screen调用。
availHeight / height / availWidth / width:
显示屏的可用高度 / 全部高度 / 可用宽度 / 全部宽度。可用宽度/高度不计算操作系统的保留宽高(如Windows的任务栏)。
window.screen.availHeight; window.screen.height; window.screen.availWidth; window.screen.width;
DOM:
每个载入浏览器的HTML文档都会变为一个document对象,用于访问HTML文档的全部内容。
*document对象为window对象的一部分,可以通过window.document或document直接访问。
每一个HTML文档都是树形结构,document对象下辖各种DOM节点,如下图所示。
HTML实例:
以下内容基于如下HTML。
<body> <input type="button" οnclick="f()"/> <div name="div1" id="id_div1"> <p name="p1" id="id_p1">paragraph 1</p> </div> <div name="div2" id="id_div2"> <div name="div21" id="id_div21"> <p name="p2" id="id_p2">paragraph 2</p> </div> <div name="div22" id="id_div22"> </div> </div> </body>
节点类型:
1.element:HTML内部除<html>外的元素节点。
2.attribute:元素节点的属性节点或属性集合。
3.text:文本节点。
4.document:HTML文档的节点,即<html>。
5.其他:如注释等节点。
节点属性:
attributes
非属性节点的所有属性集合。
var p1Attrs = document.getElementById('id_p1').attributes; //获取到p1的属性集合{id:'id_p1',name:'p1'}
nodeName
节点的名称。
var p1Attr1Name = p1Attrs[1].nodeName; //第二个属性节点名为name
nodeValue
节点的值。
var p1Attr0Value = p1Attrs[0].nodeName; //第一个属性节点值为id_p1
nodeType
节点的类型。
element节点=1,attribute节点=2,text节点=3,document节点=9
var p1 = document.getElementById('id_p1'); p1.nodeType; //1
firstChild
第一个子节点。
var div21 = document.getElementById('id_div2').firstChild; //div21
lastChild
最后一个子节点。
var div22 = document.getElementById('id_div2').lastChild; //div22
previousSibling
上一个兄弟节点。
var div21 = div22.previousSibling; //div21
nextSibling
下一个兄弟节点。
var div22 = div21.nextSibling; //div22
parentNode
父节点。
var n = document.getElementById('id_div2').firstChild.lastChild.parentNode.parentNode; //div2
innerHTML
内部的HTML代码。
document.getElementById('id_p1').innerHTML = ''; //p1变为内部为空的<p>元素
节点函数:
处理属性节点
getNamedItem
返回单个属性节点,由属性节点:[元素节点.attributes]集合来调用。
var attrs = document.getElementById('id_div1').attributes;//获取到属性集合 var value = attrs.getNamedItem('id').nodeValue;//value为名为id的属性节点的值id_div1
removeNamedItem
移除单个属性节点,由属性节点:[元素节点.attributes]集合来调用。
var attrs = document.getElementById('id_div1').attributes;//获取属性集合 attrs.removeNamedItem('id');//移除名为id的属性节点 var attrNode = attrs.getNamedItem('id');//attrNode为null
getAttribute
获取单个属性节点的值,由元素节点来调用。
var attrValue = document.getElementById('id_div1').getAttribute('name');//attrValue为div1
setAttribute
设置属性节点的值,由元素节点来调用。
document.getElementById('id_div1').setAttribute('name','new_div1');
removeAttribute
移除属性节点,由元素节点来调用,效果类似于removeNamedItem。
document.getElementById('id_div1').removeAttribute('name','new_div1'); var attrValue = document.getElementById('id_div1').getAttribute('name');//attrValue为null
访问指定元素节点
getElementsByTagName
根据元素名获取元素集合。
var elemNode = document.getElementsByTagName('div')[1];//获取第二个<div> var div2Name = elemNode.getAttribute('name');//div2Name为div2
getElementsByName
根据name属性获取元素集合。
var elemNode = document.getElementsByName('div1');//获取name属性为div1的元素节点集合 var div1Len = elemNode.length;//集合中只有一个name为div1的元素,集合长度为1
getElementById
根据id属性获取单一元素。
var elemNode = document.getElementsById('div1');//获取id属性为div1的元素节点
创建、操作节点
createElement
创建新元素节点,由document对象调用。
createTextNode
创建新文本节点,由document对象调用。
appendChild
在元素节点内部追加子节点,由元素节点调用。
insertBefore
在指定的元素节点前插入节点,由元素节点调用。
removeChild
移除元素内部某个子节点,由元素节点调用。
cloneNode
克隆某个元素节点。
实例
上例后,document.innerHTML变为:var div1 = document.getElementById('id_div1');//div1 var p2 = document.getElementById('id_p2');//p2 var newP = document.createElement('p');//新建<p> newP var newDiv = document.createElement('div');//新建<div> newDiv div1.appendChild(newP).setAttribute('id','id_p3');//div1内,追加newP子节点,并设置newP的id属性为id_p3 div1.insertBefore(newDiv, newP).setAttribute('id','id_newDiv');//div1内,将newDiv插入在newP前,并设置newDiv的id为id_newDiv newP.appendChild(p2.firstChild.cloneNode());//newP内,追加子节点,该子节点为p2的第一个子节点(文本节点Paragraph 2)的克隆
<body> <div name="div1" id="id_div1"> <p name="p1" id="id_p1">paragraph 1</p> <div id="id_newDiv"></div> <p id="id_p3">paragraph 2</p> </div> <div name="div2" id="id_div2"> <div name="div21" id="id_div21"> <p name="p2" id="id_p2">paragraph 2</p> </div> <div name="div22" id="id_div22"> </div> </div> </body>
操作文本节点
此类函数均由文本节点调用,不再举例说明。
appendData(String)
追加文本。
deleteData(String, offset, count)
删除由指定偏移开始的指定数目的字符。
insertData(offset, String)
插入文本。
replaceData(offset, count, String)
替换文本。
splitText(offset)
分割文本成两个文本节点。
subStringData(offset, count)
返回文本节点中的子串。
3.自定义对象:
由用户根据需求定义的类对象。