web基础：Javascript

来源：互联网发布：淘宝店铺访客突然暴跌编辑：程序博客网时间：2024/05/21 22:13

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" onclick="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 = undefineda = 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为objecta = null;typeof a; //typeof null为objecttypeof b; //未定义的变量，typeof b为undefinedtypeof c; //声明但未初始化的变量，typeof c为undefined
双等与三等：
a==b; //1.b转成a的类型，2.对比a===b; //1.先对比类型，2.再对比值，3.类型与值均相同才返回true
null与undefined：
null == undefined; //为true，undefined类型转为object类型为nullnull === 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为4arr.join(); //返回字符串"1,2,3"arr.join('#'); //返回字符串"1#2#3"arr.reverse(); //返回数组3 2 1arr.pop(); //返回3，arr变为2 1arr.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,50alert('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" onclick="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
克隆某个元素节点。
实例
var div1 = document.getElementById('id_div1');//div1var p2 = document.getElementById('id_p2');//p2var newP = document.createElement('p');//新建<p> newPvar newDiv = document.createElement('div');//新建<div> newDivdiv1.appendChild(newP).setAttribute('id','id_p3');//div1内，追加newP子节点，并设置newP的id属性为id_p3div1.insertBefore(newDiv, newP).setAttribute('id','id_newDiv');//div1内，将newDiv插入在newP前，并设置newDiv的id为id_newDivnewP.appendChild(p2.firstChild.cloneNode());//newP内，追加子节点，该子节点为p2的第一个子节点(文本节点Paragraph 2)的克隆
上例后，document.innerHTML变为：
<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.自定义对象：
由用户根据需求定义的类对象。