上一篇:JavaWeb学习总结03–JS(1)
下一篇:JavaWeb学习总结05–Bootstrap
作为一种嵌入到HTML页面内的解释型程序设计语言,JavaScript脚本语言的基本构成是由语句、函数、对象、属性等来实现的。JavaScript语句是发给浏览器的命令,这些命令是告诉浏览器要做的事情。比如我们之前打印九九乘法表时使用的document.write("…");语句,就是再告诉浏览器向页面输出这样一段文本。和其他编程语言一样,一般情况下我们语句结尾出都会加一个分号来表示语句的结束。
对象与函数
1. Function:函数(方法)对象
一个函数代表一个特定的功能,JavaScript的函数由系统本身提供的内部函数,也有一些系统对象的函数或自定义的函数。
基本语法:
var fun = new Function(形式参数列表,方法体); //不常用
function 方法名称(形式参数列表){
方法体
}
var 方法名 = function(形式参数列表){
方法体
}
function是关键字,一个函数必须由 “function” 关键字开始;函数名用来再调用时使用,命名必须符合有关标识符的命名规定;函数调用只与方法的名称有关,与参数列表无关。函数的括号必须保留,可以用来设置参数,大括号内是函数体,属于函数的语句必须再大括号内。
函数调用: 方法名称(实际参数列表);
2. Array:数组对象
数组对象用来在单独的变量名中存储一系列值,避免同时声明很多变量使程序结构变得复杂,数组一般对同类型的数据通过循环语句逐个进行处理。
定义数组:
定义数组直接初始化数组元素:
var arr = new Array(元素列表);
var arr = [元素列表];
先定义数组,在初始化元素
var arr = new Array(默认长度);
arr[0]="元素";...
JavaScript是弱类型的语言,对数组的长度没有特别的限制,可以根据需要进行添加和减少,同时可以通过length属性获得数组的实际长度。
数组除了提供 了length属性外还提供了,还提供了一些好用的方法 :
- join(参数):将数组中的元素按照指定的分隔符拼接为字符串
- pop():删除并返回数组最后一个元素
- push() 向数组的末尾添加一个或更多元素,并返回新的长度。
- shift()和unshift()在数组的第一个元素之前删除和插入元素
var cn=arr.join('-');//用短横线做分隔符
var cn=arr.pop();//删除并返回数组最后一个元素
var leagth=arr.push("元素");//添加元素并返回长度
3. Date:日期对象
日期对象用来处理和日期时间相关的事情。其定义方式是:var date = new Date();
样例:
var today=new Date(); //自动获取当前时间作为初始值
var birthday=new Date("December 17,1999 08:12:00");//按日期字符串设置对象
birthday=new Date(1999,12,06);//按年、月、日设置对象
birthday=new Date(1999,12,06,3,22,30);//按年、月、日、时、分、秒设置对象
获取日期的方法:
getTime();//获取当前时间,到毫秒
toLocaleString()//字符串格式返回时间
getDate();//返回一个月中的某一天
getDay();//返回一周中的某一天
getMonth();//返回月份
getFullYear();//按四位数字返回年份
getHours();//返回小时
getMinutes();//返回分钟
getSeconds();//返回秒数
getMillisecinds();//返回毫秒
4. Math:数学对象
Math对象提供多种算术常量和函数,执行普通的算术任务,使用Math对象不用创建,可以直接使用( Math.方法名();
)
Math中的常量:E、LN2、LN10、LOG2E、LOG10E、PI、SQRT1_2、SQRT2
Math中的方法:
random():返回 0 ~ 1 之间的随机数,含0不含1
sqrt():返回平方根
max():最大值
min():最小值
ceil(x):对数进行上舍入。
floor(x):对数进行下舍入。
round(x):把数四舍五入为最接近的整数。
exp():返回e的指数
log():返回自然对数
pw():返回x的y次幂
5. Number:数值对象
Number用来表示数值对象,JavaScript会自动在原始数据的对象之间转换。同时Number也不用创建对象,直接使用数值变量名即可var s=x.方法名(参数)
。
Number中的方法:
toString(redix);//按照指定的进制数转化为字符串,默认为十进制
toFixed();//将Number四舍五入为指定小数位数的数字
6. String:字符串对象
字符串是JavaScript中使用不叫普遍的一个类型,我们可以通过var s1="Hello World";
或var s2=new String("Hello World");
两种方式定义字符串。
字符串中常用的属性和方法:
length;//获取字符个数
charAt(n);//获取指定位置的字符
indexOf(search,index);//从指定位置开始,搜索字符串第一次出现的位置
lastIndexOf();//字符串最后出现的位置
split();//将字符串分割成字符串数组
toLowerCase();//把字符串转换为小写
toUpperCase();;//把字符串转换为大写
7. RegExp:正则表达式对象
正则表达式(regular expression)描述了一种字符串匹配的模式(pattern),可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。
定义字符串的组成规则。
* 单个字符:[],如:[a] [ab] [a-zA-Z0-9_]
* 特殊符号代表特殊含义的单个字符:
\d:单个数字字符 [0-9]
\w:单个单词字符[a-zA-Z0-9_]
* 量词符号:
?:表示出现0次或1次
*:表示出现0次或多次
+:出现1次或多次
{m,n}:表示 m<= 数量 <= n
m如果缺省: {,n}:最多n次
n如果缺省:{m,} 最少m次
* 开始结束符号
^:开始 $:结束
创建方式:
var reg = new RegExp("正则表达式");
var reg = /正则表达式/;
方法:
test(参数):验证指定的字符串是否符合正则定义的规范
8. Global:全局对象
Global是全局对象,封装的方法不需要对象就可以直接调用。 方法名();
encodeURI():url编码
decodeURI():url解码
encodeURIComponent():url编码,编码的字符更多
decodeURIComponent():url解码
parseInt():将字符串转为数字,逐一判断每一个字符是否是数字,直到不是数字为止,将前边数字部分转为number
isNaN():判断一个值是否是NaN,NaN自己无法识别自己,NaN参与的==比较全部问false
eval():讲 JavaScript 字符串,并把它作为脚本代码来执行。
URL编码:
传智播客 = %E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
DOM:
DOM(Document Object Model):文档对象模型,用来控制文档的内容,将标记语言文档的各个部分封装为对象,通过使用这些对象对标记语言文档进行操作,使用户和网页之间的交互更加丰富。JavaScript可以通过document对象访问这个模型中的所有页面元素。
W3C DOM 标准被分为 3 个不同的部分:
- 核心 DOM - 针对任何结构化文档的标准模型
Document:文档对象
Element:元素对象
Attribute:属性对象
Text:文本对象
Comment:注释对象
Node:节点对象 - XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型
理解结点:
Node:结点对象,其他5个的父对象,document实际上是该页面上所有页面元素的集合,通过它可以访问页面中所有的元素,DOM中的每一个对象都可以被认定为一个节点,指该页面上的某个元素。<html>
是页面的结点,是所有元素的根,可以通过document.documentElement;
来获得,同时结点还包括:子结点、父结点、兄弟结点,可以通过相关方法来访问:
childNodes;//获取自己的子结点
firstChild;//获取第一个子结点
lastChild;//获取最后一个子结点
parentNode;//获取结点的父结点
previousSibling;//返回结点的前一个结点
nextSibling;//返回结点的后一个结点
CRUD dom树:
appendChild(); //向节点的子节点列表的结尾添加新的子节点
removeChild(); //删除(并返回)当前节点的指定子节点
replaceChild(); //用新节点替换一个子节点
访问页面元素:
获取页面标签(元素)对象:Element
- 通过ID访问页面元素:
document.getElementById("id值");
,可以通过.value
访问标签中的内容 - 通过Name访问页面元素:
getElementsByName();
,返回值是一个数组 - 通过标签名访问页面元素:
getElementsByTagName();
,返回值是一个数组 - 通过Class属性值访问页面元素:
getElementsByClassName();
,返回值是一个数组 - 另外我们还可以通过
document.froms
方法获得页面中的所有from对象
创建其他DOM对象:
- createAttribute(name)
- createComment()
- createElement()
- createTextNode()
修改属性:
- removeAttribute():删除属性
- setAttribute():设置属性
操作Element对象:
上面介绍了获取页面元素的方法,获取元素之后,我们就可以可以通过修改元素的属性值来达到动态修改页面的效果。这里我们提供一个属性值:innerHTML
,这个属性可以用来修改标签提的内容。同时我们也可以直接对元素属性就行修改:
<script type="text/javascript">
function changeColor(){
var newColor =("请输入一个颜色,格式为#ffffff","#87ceeb");
var tb=document.getElementById("table1");
if(tb!=null){
tb.style.backgroundColor=newColor;
}
}
</script>
BOM:
BOM(Browser Object Model) 浏览器对象模型,将浏览器的各个组成部分封装成对象。由Window:窗口对象
、Navigator:浏览器对象
、Screen:显示器屏幕对象
、History:历史记录对象
、Location:地址栏对象
五部分组成。
Window:窗口对象
Window对象是JavaScript层级中的顶级对象,在浏览器的网页中会自动的拥有Window对象,我们可以直接使用。Window中提供了一些重要的属性 方法名();或window.方法名();
,象上面用到的document对象就属于Window对象所有,另外还有:
- history:该对象记录一系列用户访问的网址,可以通过back()、forward()、go()放法重复执行以前的访问,同时可以通过leagth属性返回当前窗口历史列表中的URL数量。
- location:表示当前显示文档的Web地址,可以用它修改显示当前窗口,如果把一个含有URL的字符串赋予location或它的href属性,就可以在当前窗口显示内容
- navigator:有关客户机浏览信息的对象
- screen:存放关于浏览器屏幕的信息
- parent:获取当前窗口的父窗口引用
Window对象中的主要方法:
-
与弹出框有关的方法:
alert():显示带有一段消息和一个确认按钮的警告框。
confirm():显示带有一段消息以及确认按钮和取消按钮的对话框。如果用户点击确定按钮,则方法返回true,如果用户点击取消按钮,则方法返回false;
prompt():显示可提示用户输入的对话框,返回值:获取用户输入的值 -
与打开关闭有关的方法:
close():关闭浏览器窗口。
open():打开一个新的浏览器窗口,返回新的Window对象 -
与定时器有关的方式
setTimeout():在指定的毫秒数后调用函数或计算表达式,参数:js代码或者方法对象或毫秒值,返回值:唯一标识,用于取消定时器
clearTimeout():取消由 setTimeout() 方法设置的 timeout。setInterval():按照指定的周期(以毫秒计)来调用函数或计算表达式。
clearInterval():取消由 setInterval() 设置的 timeout。
事件编程
事件是可以被浏览器监听到的行为,HTML对一些页面元素规定了可以响应的事件。将事件,事件源,监听器结合在一起,当事件源上发生了某个事件,则触发执行某个监听器代码。
监听的概念: 某些组件被执行了某些操作后,触发某些代码的执行。
网页访问中常见的事件:
-
点击事件:
onclick:单击事件
ondblclick:双击事件 -
焦点事件
onblur:失去焦点
onfocus:元素获得焦点。 -
加载事件:
onload:一张页面或一幅图像完成加载。 -
鼠标事件:
onmousedown 鼠标按钮被按下。
onmouseup 鼠标按键被松开。
onmousemove 鼠标被移动。
onmouseover 鼠标移到某元素之上。
onmouseout 鼠标从某元素移开。 -
键盘事件:
onkeydown 某个键盘按键被按下。
onkeyup 某个键盘按键被松开。
onkeypress 某个键盘按键被按下并松开。 -
选择和改变
onchange 域的内容被改变。
onselect 文本被选中。 -
表单事件:
onsubmit 确认按钮被点击。
onreset 重置按钮被点击。
如何绑定事件
直接在html标签上,指定事件的属性(操作),属性值就是js代码,然后通过js获取元素对象,指定事件属性,设置一个函数就完成的事件的绑定:
<body>
<img id="light" src="img/off.gif" onclick="fun();">
<img id="light2" src="img/off.gif">
<script>
function fun(){
alert('我被点了');
alert('我又被点了');
}
function fun2(){
alert('咋老点我?');
}
//1.获取light2对象
var light2 = document.getElementById("light2");
//2.绑定事件
light2.onclick = fun2;
</script>
</body>
- 案例:电灯开关
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电灯开关</title>
</head>
<body>
<img id="light" src="img/off.gif">
<script>
/*分析:
1.获取图片对象
2.绑定单击事件
3.每次点击切换图片
* 规则:
* 如果灯是开的 on,切换图片为 off
* 如果灯是关的 off,切换图片为 on
* 使用标记flag来完成*/
//1.获取图片对象
var light = document.getElementById("light");
var flag = false;//代表灯是灭的。 off图片
//2.绑定单击事件
light.onclick = function(){
if(flag){//判断如果灯是开的,则灭掉
light.src = "img/off.gif";
flag = false;
}else{
//如果灯是灭的,则打开
light.src = "img/on.gif";
flag = true;
}
}
</script>
</body>
</html>