JavaScript
简介:
动态类型(不需服务器可直接对用户的输入做出相应)、弱类型(采用弱类型的变量类型)、解释型(不需要编译,在运行过程中逐行进行解释)的脚本语言。
语法:
1)代码一般嵌入到网页中的<script></script>标签之内,或保存在一个单独的js文件中,语句结尾都要加分号表示结束。
2)区分大小写,注释可以是“//”或者“/*”开头“*/”结尾。
3)定义变量关键字var可将变量初始化任意的值,int、float、string、Boolean、object(对象类型)、null(空类型)、undefined(未定义类型)。
4)默认类型为undefined,null是人为赋予的空字符。
5)const声明常量
6)比较陌生的循环: for(变量 in 对象) {
被执行的代码块
}
7)函数:function 函数名([参数1,参数2,……]) {
代码块;
[return 返回值;]
}
函数的参数不需要指定参数的类型,因为变量类型默认是自动识别的。
函数有一个内置的对象argument,该对象包含了函数调用的参数数组。
匿名函数:函数存储在变量中,不需要函数名称,通常通过变量名来调用。
例:var x = function(a,b) {
代码块;
};
var z = x(4,3);
8)Javascript 代码中,相同名称的方法如果重复定义,将会用新定义的方法覆盖已有的同名方法,因此,同一名字不同参数的方法只需创建一次,且不需要为该方法定制参数(通过其内置对象argument)。
对象:
1)Javascript语言是基于对象的程序设计语言,采用对象、事件驱动的编程机制。
2)对象是一种复合值,将很多原始值或者其他对象聚合在一起(变量/键值对的容器),通过名字访问这些值。
语法格式:var 对象名 = {
//属性列表
属性名:值,
……
//方法列表
函数名:function() {
函数体;
},
……
}
3)访问属性:person.lastName/person["lastName"]
内置对象:
JavaScript脚本语言提供了一些内置对象。
创建对象实例的一般语法格式:var 实例名 = new 对象名();
1)Date对象:主要用于日期和时间的处理。
| 属性/方法 | 说明 |
|---|---|
| getDate() | 获取当前日期 |
| getYear() | 获取当前年份 |
| getFullYear() | 获取当前年份(和上略有不同) |
| getMonth() | 获取当前月份 |
| getDay() | 获取当前星期几 |
| getHours() | 获取当前小时 |
| getMinutes() | 获取当前分钟 |
| getSeconds() | 获取当前秒 |
| setDate() | …… |
| setYear() | …… |
| setMonth() | …… |
| setHours() | …… |
| setMinutes() | …… |
| setSeconds() | …… |
| setTime() | 设置当前时间(单位:毫秒) |
| toLocaleString() | 以本地时区格式显示,字符串表示 |
2)String对象
| 属性/方法 | 说明 |
|---|---|
| length | 求字符串的长度 |
| charAt(下标) | 字符对象指定位置的字符 |
| indexOF(目标字符串) | 目标字符串在字串对象中首次出现位置 |
| lastIndexOF(目标字符串) | 目标字符串在字串对象中最后一次出现位置 |
| substr(开始位置[,长度]) | 截取子串 |
| substring(索引值i,索引值j) | 截取从索引值i到j-1的字串 |
| split(分隔符) | 把字符串按分隔符拆成字符串数组 |
| replace(被代替的字符串,新字符串) | 用新的字符串代替旧的字符串 |
| toLowerCase() | 变为小写字母 |
| toUpperCase() | 变为大写字母 |
| toString() | 获取String对象的字符串值 |
3)Math对象
| 属性/方法 | 说明 |
| abs(x) | 返回x的绝对值 |
| max(x,y) | 返回两数较大的那个 |
| exp(x) | 返回x的e次方 |
| log(x) | 返回以e为底的对数值 |
| pow(x,y) | 返回x的y次方 |
| sqrt(x) | 返回x的平方根 |
| random() | 返回0和1之间的一个随机数 |
| round(x) | 返回x四舍五入后的整数 |
| sin(x)、cos(x)、tan(x) | 三角函数 |
| asin(x)、acos(x)、atan(x) | 反三角函数 |
4)Array对象
| 属性/方法 | 说明 |
| push(元素1……) | 添加元素,返回数组的长度 |
| reverse() | 倒序数组 |
例:var tempArray = new Array();
array.push("apple","banana","orange");
var updownArray = tempArray.reverse();
浏览器对象:
浏览器对象也称为浏览器内置对象(BOM,Browser Object Model),是浏览器自身已定义好的,可直接使用。
1)window对象
window对象表示一个浏览器窗口或框架,在对象结构图中,窗口对象window是所有对象中的最高层对象(我的理解:对象的嵌套,其他对象都写在window对象里),window对象会在<body>或<frameset>出现时自动创建。
window对象是一个全局对象,在同一个窗口访问其他对象时(我的理解:对象的嵌套,其他对象都写在window对象里)可以省略“window”,跨窗口访问则必须加上窗口名。
| windows对象常用属性 | 描述 |
| document | 提供窗口的文档对象只读引用 |
| location | 包含有关当前URL的信息 |
| navigator | 提供窗口的浏览器对象引用 |
| history | 提供窗口的历史对象只读引用 |
| defaultStatus | 设置状态栏的默认信息 |
| status | 设置状态栏的临时信息 |
| screen | 提供窗口的屏幕对象引用 |
| frames | 提供窗口的框架对象引用 |
| name | 设置或返回存放窗口的名称 |
| event | 提供窗口的事件对象引用 |
| self | 返回对当前窗口的引用 |
| top | 返回最顶层的先辈窗口 |
| parent | 返回父窗口 |
| window对象常用的方法 | 描述 |
| alert(信息字串) | 显示带消息和确认按钮的对话框 |
| confirm(确认信息字串) | 确认按钮返回true,取消返回false |
| prompt(提示字串,[默认值]) | 提示输入信息对话框,返回用户输入信息 |
| open(URL,窗口名称[,窗口规格]) | 打开新窗口 |
| scroll(x坐标,y坐标) | 窗口滚动到指定位置 |
| setTimeout(函数,毫秒) | 指定时间后调用函数,返回一个定时器对象 |
| setInterval(函数,毫秒) | 每隔指定时间后调用函数,返回一个定时器对象 |
| clearTimeout(定时器对象) | 清除以setTimeout定义的时间程序 |
| clearInterval(定时器对象) | 清除以setInterval定义的时间程序 |
| close() | 关闭浏览器窗口 |
| stop() | 停止加载网页 |
| moveTo(x坐标,y坐标) | 将窗口移动到设置的位置 |
上表前三个则是常用的提示框。
文档对象模型:
Document Object Model,即DOM,中立于平台和语言的接口,允许程序和脚本动态地访问、更新文档的内容、结构和样式(我的理解:JavaScript通过DOM可以对页面进行任何修改)。
DOM模型被结构化为对象树:<html>为根节点,其下两个子节点<head>、<body>。
访问DOM方法:
| DOM方法 | 描述 |
| getElementById() | 返回带有指定ID的节点(元素) |
| getElementsByTagName() | 返回包含带有指定标签名称的所有元素的节点列表(结合/节点数组) |
| getElementsByClassName() | 返回包含带有指定类名的所有元素的节点列表 |
| querySlectorAll() | 返回符合该CSS选择器的所有元素的节点列表 |
| appendChild() | 把新的子节点(元素)添加到指定节点(元素) |
| removeChild() | 删除子节点(元素) |
| replaceChild() | 替换子节点(元素) |
| insertBefore() | 在指定的子节点前面插入新的子节点 |
| createAttribute() | 创建属性节点 |
| createElement() | 创建元素节点 |
| createTextNode() | 创建文本节点 |
| getAttribute() | 返回指定的属性值 |
| setAttribute() | 把指定属性设置或修改为指定的值 |
在DOM中访问节点方法:上表前三个。找到则返回该元素对象,否则返回undefined。
write("……")//可以利用实现文本输出功能(可以执行html代码)----------------疑问:这个和appendChild()功能是不是冲突了???
getElementsByName() //通过标签的name选择
访问属性:
| DOM公共属性 | 描述 |
| innerHTML | 获取或替换HTML元素的内容 |
| nodeName |
表示节点的标签名称,返回一个文本值 注:文档节点的nodeName为#document,文本节点的为#text |
| nodeValue |
表示节点的值,返回一个文本值。 注:元素节点的nodeValue是undefine或null, 文本节点的是文本本身,属性节点是其属性值 |
| nodeType |
表示节点类型,返回一个整型值(具体类型的具体 返回值自己查,我感觉没用) |
修改元素样式:
通过DOM,访问HTML元素的样式对象,实现动态修改(主要通过元素的style属性完成)。
格式:obj.style.样式名
参数说明:1)obj为要访问或修改的对象名称(可通过DOM方法访问)。
2)样式名为要访问或修改的CSS样式名称。
例:document.getElementById("p1").style.color="blue";//修改id为p1的节点的颜色为蓝色。
Javascript事件
一般都作为HTML标签的一个属性出现(特殊情况特殊说明)。
1)onclick事件:元素被鼠标单击时触发(非按钮则在该元素区域内即可触发)。
2)ondblclick事件:双击。
3)onload事件:一般语法:window.onload=function(){……}------当网页完全加载后可执行该函数。
注:建议js代码除了函数都写在这,防止因为网页代码的顺序执行导致一些js代码失效。
4)onunload事件:一般用于清除引用,避免内存泄漏(具体用法有些复杂,需要再说)。
5)onchange事件:当某个元素的值发生变化时触发(通常为文本输入框或下拉框,且是在失去焦点后触发,也就是再输入文字的时候不会触发)。
6)onmouseover和onmouseout事件:鼠标移入/移出某元素时触发。
7)

浙公网安备 33010602011771号