javascript详细介绍

一、JavaScript基础

1.什么是JavaScript?

JavaScript是一种客户端运行的解释性脚本语言。
JavaScript是由网景(Netscape)推出的产品。
Microsoft推出的JScript。
ECMAScript(欧洲计算机制造商协会),

2.JavaScript能做什么?

完成客户端的交互工作(如表单的验证、焦点广告、菜单效果等)。

3.JavaScript的使用方式

3.1 使用外部的JS文件
	JavaScript文件的扩展名.js
	<scrip type="text/javascript" src="JS文档URL"></script>
 3.2 书写于文档的头部
   <scrip type="text/javascript">
	  ...
	  ...
   </script>

4.JS代码规范

A.可选的分号(但一般情况下都需要分号结尾)
B.大小写敏感
C.每行代码尽量不要超过80个字符。

5.标识符

指语言环境下的变量名称、类名称、对象名称等。
A.标识符必须以字母或下划线开头,包含字母、数字及下划线。
B.标识符禁止包含空格、斜线等特殊符号。
C.标识符禁止与系统关键字相同。

6.变量

[var] 变量名称;
[var] 变量名称 = 值;
说明:建议在声明变量时使用var关键字。

二、数据类型

1.字符型(string),必须括在单引号/双引号之间。

  转义符:
  \n,换行
  \r,回车
  \t,水平制表符
  \v,垂直制表符
  \\,反斜线
  \',单引号
  \",双引号

2.数值型(Number),可以存储整数或浮点数,可以带有符号位。

3.布尔型(Boolean),只有true和false。

4.数据类型的自动转换

字符+数字:数字转换成字符
数字+布尔:布尔转换成数字(true=>1,false=>0)
字符+布尔:布尔转换成字符(true=>"true",false=>"false")
布尔+布尔:布尔转换成数字(true=>1,false=>0)

5.数据类型的强制转换

parseInt,转换成整数
parseFloat,转换成浮点型

6.JavaScript的调试工具(补)

Firebug(F12) --> Console(控制台)

7.运算符

字符运算符:+
算术运算符:+(正数)、-(负数)、*、/、%、+、-、
逻辑运算符:!、&&、||
比较运算符:>、>=、==、!=、<>、===(全等)、!==(不全等)、<=、<
全等:值与数据类型完全匹配。
自增/自减运算符:
  i++,i--(后缀形式:先使用,后加减)
  ++i,--i(前缀形式:先加减,后使用)
三目运算符: 表达式? 值:值;

8.流程控制:

if
if...else
if...else if...else
switch
for
while
do...while

三、JavaScript的内置对象

1.String

1).创建String对象
	a.直接量方式
	var object = '值';
	var object = "值";
	b.构造函数方式
	var object  = new String("value");

2).属性:length
	描述:获取字符串的长度
	语法:int object.length

3).方法
	toLowerCase()	描述:转换成小写字母
	语法:string object.toLowerCase()

	toUpperCase()	描述:转换成大写字母
	语法:string object.toUpperCase()

	substr()	描述:截取字符串
	语法:string object.substr(int start[,int length])
	说明:A.字符从0开始编号	B.起始位置为负数,则倒数

	substring()	描述:截取字符串
	语法:string object.substring(start[,end])
	说明:包含起始位置,但不包含结束位置。

	indexOf()	描述:返回一个字符串在另一个字符串第一次出现的位置
	语法:int object.indexOf(string str[,int start])
	说明:如果没有出现则返回-1

	lastIndexOf()	描述:返回一个字符串在另一个字符串最后一次出现的位置
	语法:int object.lastIndexOf(string str[,int start])
	说明:如果没有出现则返回-1

	charAt(int pos) 等价于 substr(int pos,1)

	replace()	描述:字符替换
	语法:string object.replace(object regExp,string replacement)

	split	描述:将字符串拆分成数组
	语法:array object.split(string separator)

2.Math

1).属性
	Math.PI
	Math.SQRT2

2).方法
	Math.ceil()	描述:向上取整
	语法:int Math.ceil(float val)

	Math.floor()	描述:向下取整
	语法:int Math.floor(float val)

	Math.pow()	描述:幂运算
	语法:float Math.pow(float base ,float exp)

	Math.sqrt()	描述:平方
	语法:float Math.sqrt(float val)

	Math.min()	描述:返回最小值
	语法:float Math.min(float val,float val,....)

	Math.max()	描述:返回最大值
	语法:float Math.max(float val,float val,....)

	Math.round()	描述:四舍五入
	语法:float Math.round(float val)
	说明:保留到整数位。

	Math.random()	描述:产生随机数
	语法:float Math.random()

3.Array

1).创建数组
	 直接量方式
	 var object = [值,....]
	 构建函数方式
	 var object  = new Array(值,...)

2).属性:length
	 描述:返回数组成员的数量
	 语法:int object.length

 3).访问数组成员
	数组名称[下标]
	说明:数组的下标从0开始。  

	for...in语句	作用:遍历数组/对象
	语法:
	for(变量名称 in 数组/对象){
		...
	}

    4).方法
	join()	描述:将数组成员连接成字符串
	语法:string object.join([string separator])

	push()	描述:在数组的未尾添加一个或多个成员
	语法:int object.push(val,...)

	unshift()	描述:在数组的开头添加一个或多个成员
	语法:int object.unshift(val,...)

	pop()	描述:删除数组的最后一个成员，并且返回该成员
	语法:val object.pop()

	shift()	描述:删除数组的第一个成员，并且返回该成员
	语法:val object.shift()

	slice()	描述:截取数组
	语法:array object.slice(start[,end])

	reverse()  	描述:数组反转
	语法:array object.reverse()

4.Date

1).创建Date对象
	var object = new Date()

2).方法
	getYear()	描述:获取年份
	语法:int object.getYear()

	getFullYear()	描述:获取年份
	语法:int object.getFullYear()

	getMonth()	描述:获取月份(取值范围为0~11)
	语法:int object.getMonth()

	getDate()	描述:获取日期(多少号)
	语法:int object.getDate()

	getDay()	描述:获取星期的第几天(0为星期日,依次类推)
	语法:int object.getDay()

	getHours()	描述:获取小时
	语法:int object.getHours()

	getMinutes()	描述:获取分钟
	语法:int object.getMinutes()

	getSeconds()	描述:获取秒
	语法:int object.getSeconds()

	getTime()	描述:获取毫秒
	语法:int object.getTime()

四、自定义函数

1.什么是自定义函数
	完成某种功能的代码段。
2.创建自定义函数
	function 函数名称([参数[,...]]){
		...
		...
		[return 返回值]
	}
3.调用自定义函数
	[var 变量名称=] 函数名称([值[,...]])
4.变量作用域
	4.1 JS编译和执行过程
		A.编译,只负责变量的声明和函数的定义。
		   而且所有变量的初始值为undefined.
		B.执行,自上而下,
	4.2 变量作用域
		全局变量
		局部变量
5.arguments对象
	arguments对象指由函数的参数所组成的对象。
	length属性
6.匿名函数
	没有名称的函数称为匿名函数。
7.全局函数
	parseInt()
	parseFloat()
	isNaN()
	eval()

	encodeURI	描述:对于URL地址中的信息进行编码
	语法:string encodeURI(string str)

	decodeURI	描述:对于URL地址中的信息进行解码
	语法:string decodeURI(string str)
	其中空格将转换成%2

五、DOM编程

1.什么是DOM?
	DOM[Document Object Model],文档对象模型。
	DOM提供处理XML/HTML文档的API。
	DOM的主要操作:节点的获取、节点的动态的创建、创建的删除及节点的替换。
	节点(Node),在DOM树中所存在的任何一个元素(如HTML元素，文本、属性等)。
节点的类型
	Node.ELEMENT_NODE,1(元素类型)
	Node.ATTRIBUTE_NODE,2(属性类型)
	Node.TEXT_NODE,3(文本类型)
	Node.COMMENT_NODE,8(注释类型)
	Node.DOCUMENT_NODE,9(文档类型)

2.document对象
	属性：bgColor,fgColor,title

	方法
		getElementById()	描述:根据ID获取对象
		语法:Element document.getElementById(string id)

		createElement()	描述:创建元素节点
		语法:Element document.createElement(string tagName)

		createTextNode	描述:创建文本节点
		语法:textNode document.createTextNode(string value)

		createComment	描述:创建注释节点
		语法:commentNode document.createComment(string value)

		createAttribute	描述:创建属性节点
		语法:attrNode document.createAttribute(string name)

3.Node接口
	属性
		firstChild
		lastChild
		nextSibling
		previousSibling
		parentNode
		childNodes
		nodeName
		nodeType
		nodeValue

	方法
		appendChild()	描述:追加子节点
		语法:object.appendChild(node)

		insertBefore()	描述:插入子节点
		语法:object.insertBefore(newNode[,refNode])

		removeChild()	描述:删除节点
		语法:object.removeChild(node)

		replaceChild()	描述:节点的替换
		语法:object.replaceChild(newNode,oldNode)

六、HTMLDOM元素

1.什么是HTMLDOM?

	HTMLDOM提供处理HTML文档的API。

2.W3CDOM与HTMLDOM的区别

	W3CDOM可以处理HTML/XML文档;
	HTMLDOM仅能处理HTML文档。

3.获取对象

	HTMLElement document.getElementById(string id)

4.访问HTML对象的属性

	object.属性名称 = 值
	[var 变量名称 = ] object.属性名称
	说明:
		A.HTML标记的属性即HTMLDOM节点的属性。
		B.如果HTML标记的属性为合成词,在HTMLDOM中应采用"驼峰标记法"命名。
		C.HTML标记的class属性,在HTMLDOM中应使用className取代。(因为class是ECMAScript预保留的关键字)
		D.HTML标记的style属性,在HTMLDOM中将返回CSSStyleDecleration(或CSS2Properties)对象。

5.CSSStyleDecleration对象

	访问CSS样式
	CSSStyleDeclaration.属性名称 = 值
	[var 变量名称 = ] CSSStyleDeclaration.属性名称 = 值
	说明:
	A.如果CSS样式为单个单词，则在CSSStyleDeclaration对象中直接书写。
	B.如果CSS样式带有短横线,则在CSSStyleDeclaration对象中去掉短横线，然后再使用"驼峰标记法"命名。
	C.CSS样式中的float属性在CSSStyleDeclaration对象中,如果浏览器为Chrome、Firefox等，则使用cssFloat取代;
		如果浏览器为IE则使用styleFloat取代。

6.访问HTML对象的文本

	所有文本都认为纯文本(HTML不能被解析)	object.innerText
	HTML可以被解析	object.innerHTML

7.添加节点

	A.全部HTMLDOM节点的创建都可以通过W3CDOM的方法实现
	B.有几个特殊的HTMLDOM节点，它们拥有自己的创建、删除方法。

	7.1 图像
	通过构造函数方式
	[var 变量名称 = ] new Image(width,height)

	7.2 列表框
	A.列表框
	add()	方法描述:添加Option对象
	语法:object.add(optionElement)

	remove()	方法描述:删除Option对象
	语法:object.remove(index)

	options	属性描述:返回列表框中所有列表项的集合
	语法:object.options

	value	描述:返回列表框中被选定选项的值
	语法:string object.value

	B.列表选项
		创建列表选项对象(Option对象) -- 构造函数方式
		[var 变量名称 = ] new Option(text[,value[,defaultSelected[,selected]]])
		text,指列表项显示文本
		value,指列表项的提交值,如果省略value,则提交值与显示文本相同。
		defaultSelected,指是否为默认选项(boolean)
		selected,指是否被选定(boolean)

七、总结

一、HTMLDOM

1.单选框/复选框/列表框
说明:
A.单选框/复选框在HTML中默认被选定，需
要使用checked="checked"属性;在HTMLDOM编程时需要使有object.checked = boolean语句。

B.所有表单控件(如单行文本框、密码框等)都存
在disabled="disabled"属性(禁用);在HTMLDOM编程时使用object.disabled = boolean语句。

二、选取对象的方法(总结)

A.document.getElementById(string id)
B.Element.getElementsByTagName(string tagName)
	返回由标记名称所组成的集合(NodeList)。
C.document.getElementsByName(string name)
	返回具有相同name属性的对象所组成的集合(主要用于复选框)

三、window对象

setTimeout()	描述:设置一次性定时器
语法:int window.setTimeout(string code,int time)

setInterval()	描述:设置周期性定时器
语法:int window.setInterval(string code,int time)

clearTimeout()	描述:清理由setTimeout()方法设置的定时器
语法:window.clearTimeout(int timeId)

clearInterval()	描述:清理由setInterval()方法设置的定时器
语法:window.clearInterval(int timeId)

open()	描述:打开浏览器窗口
语法:window.open(url)