什么是JavaScript
-
JavaScript是一种基于对象和事件驱动的,并具有安全性能的脚本语言。
-
JavaScript的特点
向HTML页面中添加交互行为
脚本语言,语法和Java类似
解析型语言,边执行边解释
-
JavaScript组成:
ECMAScript
DOM
BOM
网页中引入JS方式
JavaScript变量
1.定义变量
在定义变量时,统一使用"var 变量名"表示,例如:var str;甚至可以省略var这个关键字
2.JavaScript变量的类型如何决定
JavaScript中变量的数据类型是由JS引擎决定的
var name="孤傲苍狼";//name是string类型
var age=24;//age是number类型
var flag=true;//flag是boolean类型
var email;//email只是声明,没有赋值,因此代表的类型是"undefined",也就是无法确定
name=10;//name自动变成了number类型
3.使用typeof关键字查看变量代表的具体数据类型
typeof 运算符有一个参数,即要检查的变量或值。例如:
1 var sTemp = "test string";
2 alert (typeof sTemp); //输出 "string"
3 alert (typeof 86); //输出 "number"
对变量或值调用typeof运算符将返回下列值之一:
- undefined - 如果变量是 Undefined 类型的
- boolean - 如果变量是 Boolean 类型的
- number - 如果变量是 Number 类型的
- string - 如果变量是 String 类型的
- object - 如果变量是一种引用类型或 Null 类型的
<script type="text/javascript">
2 var name="孤傲苍狼";//name是string类型
3 alert("name是"+typeof name+"类型");
4 var age=24;//age是number类型
5 alert("age是"+typeof age+"类型");
6 var flag=true;//flag是boolean类型
7 alert("flag的类型是:"+typeof flag);
8 name=10;//name自动变成了number类型
9 alert("name变量重新赋值后,name的数据类型变成了:"+typeof name);
10
11 var email;//email只是声明,没有赋值,因此代表的类型是"undefined",也就是无法确定
12 alert("email的类型是:"+typeof email );
13 var a=null;
14 /*
15 为什么 typeof 运算符对于 null 值会返回 "Object"。
16 这实际上是 JavaScript 最初实现中的一个错误,然后被 ECMAScript 沿用了。现在,null 被认为是对象的占位符,从而解释了这一矛盾,但从技术上来说,它仍然是原始值。
17 */
18 alert("a是"+typeof a +"类型");
19 </script>
JavaScript数据类型
JavaScript包含两种不同数据类型:基本数据类型和引用数据类型。基本类型指的是简单的数据,引用类型指由多个值构成的对象。当我们把值赋值给一个变量时,解析器首先要做的就是确认这个值是基本类型值还是引用类型值。
1.基本数据类型
常见的五种基本数据类型:
- Boolean
- Number
- String
- Undifined
- Null
这五种基本数据类型可以直接操作保存在变量中的实际值
2.数值类型(Number)和布尔类型(Boolean)
<script type="text/javascript">
2 var a = 10;
3 var b = a;
4 b = 20;
5 alert("a="+a);//打印a=10
6
7 var b1 = true;
8 var b2 = b1;
9 b2 = false;
10 alert("b1="+b1);//打印b1=true
11 </script>
3.字符串类型(String)
<script type="text/javascript">
2 var strA = "这是字符串";
3 var strB = strA;
4 strA = "这是另外一个字符串";
5 alert("strB="+strB);
6 </script>
数组
<script>
//创建数组:new Array()
//数组自动扩容
//join,通过指定的分隔符链接数组元素,返回字符串
//sort(),数组排序,默认升序
//push,向数组元素中添加内容,默认排在最后面
var arr = new Array(5);
arr[0]="shfihf";
arr[1]="shfihf";
arr[2]="shfihf";
arr[3]="shfihf";
arr[4]="shfihf";
arr[5]="shfihf";
arr[6]="shfihf";
document.write(arr[0]+"和"+arr[6])
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>GIDU</title>
<script>
var n = prompt("shuru");
if(n<10){
for(var i=0;i<=n;i++){
document.write(i+"<br/>")
}
}else{
for(var i=0;i<=10;i++){
document.write(i+"<br/>")
}
}
</script>
</head>
<body>
</body>
</html>
常用的系统函数
事件
- onload:一个页面或一幅图像完成加载
- onlick:鼠标单击某个对象
- onmouseover:鼠标指导到某元素上
- onkeydown:某个键盘按键被按下
- onchange:域的内容被改变
BOM模型
window对象既是ECMAScript规范中的Global对象,也是BOM中的顶级对象;
document对象既是BOM顶级对象的一个属性,也是DOM模型中的顶级对象
location对象既是window对象的属性,同时也是document对象的属性。
1 window作为ECMAScript中的Global对象
1_引用window对象的属性和方法时,可以省略window。(就像Globle对象一样)
2_在全局作用域中this和window指向同一个对象,另外,还可以使用self来引用window对象,全等关系即:this=window=self。
3_在全局作用域中定义的变量和函数也会成为window对象的属性和方法,但是和直接在window对象上定义属性还是有区别:
a、全局变量不能使用delete删除(相当于给window定义属性时将属性特性[[Configurable]]赋值为false了),
直接在window对象上定义的属性可以使用delete删除(直接定义window对象时属性特性[[Configurable]]赋值默认为true)。
如果同时定义了全局变量和window对象的属性,则删除window属性时不起作用。
b、尝试访问未定义的全局变量会抛出异常,但是访问未定义的window对象的属性则只是返回undefined。(这里可以很好地利用此特性进行检测兼容性)
var name = 'Games'; //全局作用域中定义的变量和函数会成为window对象的属性和方法,但是不能使用delete删除
function getName(){
return this.name;
}
console.info(window.name); // Games
console.info(window.getName()); // Games
console.info(this == window); // true
console.info(this == self); // true
console.info(window == self); // true
window.name = 'Kobe'; //直接在window对象上定义属性,会同时修改全局变量的值,相反,修改全局变量的值,window对象的属性值也会修改
console.info(name);
delete window.name; //既定义了全局变量,又在window对象上定义了属性,删除时虽然没有报错,但是并没有起作用
console.info(name); //Kobe
console.info(window.name); //Kobe
window.team = 'cavs'; //直接在window对象上定义属性,可以使用delete删除
console.info(window.team);
delete window.color;
console.info(window.color); //undefined
2.window作为BOM中的顶级对象
浏览器整个窗口与框架
没有子框架时:window、self、top和parent都相等,都是指最顶层框架,即浏览器窗口。
有子框架时:window、self 和 top 都为最顶层框架,parent指向当前框架的直接上层框架.
如果页面中包含框架,则每个框架都有自己的window对象,并且保存在父窗口的frames集合中.
可以通过索引(从0开始,从左至右,从上至下)或者框架名称name属性访问相应的window对象。每个window对象都有一个name属性,表示所处框架的名称。
//下面是一个包括框架的页面<html>
<head>
<title>Window</title>
</head>
<frameset rows="160,*">
<frame src="frame.htm" name="topFrame">
<frameset cols="50%,50%">
<frame src="leftrframe.htm" name="leftFrame">
<frame src="rightrframe.htm" name="rightFrame">
</frameset>
</frameset>
</html>
window作为顶层对象的主要方法:
方法名 | 说明 | |
---|---|---|
打开新窗口 | open() | 返回新打开窗口的引用,利用该引用可以继续操作该新窗口 |
窗口移动到的位置 | moveTo(x,y) | x和y表示新位置的x和y坐标值 只适用于最外层window对象 |
窗口移动的尺寸 | moveBy(x,y) | x和y表示在水平和垂直方向上移动的像素数 只适用于最外层window对象 |
窗口宽高尺寸 | resizeTo(x,y) | x和y表示浏览器窗口的新宽度和新高度 只适用于最外层window对象 |
窗口宽高变化尺寸 | resizeBy(x,y) | x和y表示浏览器窗口的宽高变化尺寸 只适用于最外层window对象 |
提示框 | alert() | 提示框-显示时包含传入的字符串和“确定”按钮 |
确认框 | confirm() | 确认框-点击“确认”返回true,点击“取消”返回false |
文本输入框 | prompt() | “确认”按钮(返回文本输入域的内容)、“取消”按钮(返回null)和文本输入域。 |
搜索对话框 | find() | 等同使用浏览器菜单栏的“查找”命令打开对话框 |
打印对话框 | print() | 等同使用浏览器菜单栏的“打印”命令打开对话框 |
定时器只执行一次 | setTimeOut() | 参数为:执行函数或代码、执行代码前需要等待的时间(毫秒) |
取消一次定时器 | clearTimeOut() | 参数为setTimeout()的引用 |
循环执行 | setInterval() | 参数为:执行函数或代码、循环执行代码的间隔时间(毫秒) |
取消循环执行 | clearInterval() | 参数为setInterval()的引用 |
兼容性:表示窗口位置的属性有screenLeft、screenTop、screenX、screenY、表示窗口大小的属性有innerWidth、innerHeight、outerWidth、outerHeight,但是它们的具体含义和不同的浏览器密切相关。在处理浏览器差异性建议使用JS框架。
history对象
history对象保存着从窗口被打开起的历史记录,每个浏览器窗口、标签页、框架都有自己的history对象。
history对象的主要属性和方法有:
属性或方法 | 说明 | 例子 |
---|---|---|
length | 历史记录的数量 | 判断为第一个窗口:if(history.length == 0) |
go() | 0表示刷新页面 | history.go(0); |
负数表示向后跳转 | history.go(-1); | |
正数表示向前跳转 | history.go(1); | |
字符串参数,表示跳转到历史记录中包含该字符串的最近一个位置 (可能前进,也可能后退) | history.go(’ nba '); | |
back() | 后退一页,可模仿浏览器“后退”按钮 | history.back();相当于history.go(-1); |
forward() | 前进一页,可模仿浏览器“前进”按钮 | history.forward();相当于history.go(1); |
cation对象
location对象提供了与当前窗口中加载的文档有关的信息以及一些导航功能;
它既是window对象的属性,同时也是document对象的属性.
主要属性有:
属性 | 例如 | 说明 |
---|---|---|
href | http://www.nba.com | 返回当前完整的URL地址==location.toString() |
host | www.nba.com:80 | 返回服务器名称和端口号 |
hostname | www.nba.com | 返回服务器名称 |
port | 8080 | 返回URL中指定的端口号,如果没有,返回空字符串 |
pathname | /games/2015 | 返回URL中的目录和文件名 |
protocol | http: | 返回页面使用的协议,通常是http:或https: |
主要方法有:
方法 | 例如 | 说明 |
---|---|---|
search | ?username=Games | 返回URL的查询字符串,这个字符串以问号开头 |
assign() | location.assign(url) | 立即打开新URL并在浏览器历史中生成一条记录,相当于直接设置location.href值, 也可以修改location对象的其它属性来重新加载 |
replace() | location.replace(url) | 打开新URL,但是不会生成历史记录,使用replace()之后,用户不能通过“后退”回到前一个页面 |
reload() | location.reload([true]) | 重新加载当前页面,不传递参数时会以最有效方式加载(可能从缓存中加载), 传入true时,则强制从浏览器重新加载 |
Date对象
定时函数
节点属性
- parentNode:返回节点的父节点
- childNodes:返回子节点集合,chaildNodes[i]
- firstChild:返回节点的第一个字节点,最普通的用法是访问该元素的文本节点
- lastChild:返回节点的最后一个字节点
- nextSibling:下一个节点
- previousSibling:上一个节点