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)
浙公网安备 33010602011771号