JavaScript的基本知识

一、在html中的使用

1.1 在页面中直接嵌入JavaScript

1
2
3
4
5
6
7
8
9
10
11
<!doctype html>
<html>
<head>
<meta charset="utf-8">

<script language="javascript">
	alert(1)
</script>

</head>
</html>

执行后会直接弹出框。

1.2 script标签常用的属性和说明

属性 说明
language 设置所使用的的脚本语言及版本
src 设置一个外部文件的路径位置
type 设置所使用的脚本语言，此属性已经代替language
defer 此属性表示当html文档加载完毕之后再执行脚本语言

1.3 外部调用

  1. 使用src调用js文件（外部js文件不需要用括起来）
  2. 使用函数调用本文档中的script函数如：
    1
    <input onclick="myjsFun()" />

二、基础

2.1 变量

2.1.1 变量类型

有很多，基本的都有，如果想表达十六进制，则在数据之前加上0x即可。
然而JavaScript是无类型语言，所以，声明变量直接用var即可

2.1.2 未定义值和空值

  • 空值（null）不是0也不是空的字符串
  • 一个值是空值表示已经赋过值，而未定义（undefined）表示没有赋值，两者不一样。

2.2 运算符和表达式

2.2.1 比较运算符

只挑一些讲

运算符 描述 示例
== 等于，只涉及表面值的判断，不涉及数据类型 “17”==17 return true
=== 绝对等于，同时涉及表面值和数据类型的判断 “17”==17 return false

注：这个在php中也适用。而不等于分别是!= 和!==

2.2.2 条件运算符

操作数？结果1：结果2

这个跟C++一样啊？
这里来个九九乘法表练习！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>
<html>
<head>
<meta charset="utf-8">

<script language="javascript">
	document.write("<table>");
	var str = "javascript 9*9";
	document.write("<h1>"+str+"</h1>");
	for(var i = 1;i<10;i++)
	{
		document.write("<tr>");
		for(var j = 1;j<=i;j++)
		{
			document.write(i!=j?"<th>":"<th bgcolor='#FF0000'>");
			document.write(i+"*"+j+"="+i*j);
			document.write("</th>");
		}
		document.write("</tr>");
	}
</script>
</head>
</html>

三、函数

格式如下：

function 自定义函数名（形参1，形参2…）
｛
函数体
｝

函数要在script标签中定义，使用的话，直接在html中调用函数名和参数即可，如onclick=”myFun()”。

几种特殊内置的函数：

函数 说明
eval() 求字符串中表达式的值
isFinite() 判断一个数值是否是无穷大
isNaN() 判断一个数值时都是NaN
parseInt() 将字符型转化为整型
parseFloat() 将字符型转化为浮点型
encodeURI() 将字符串转化为有效的URL
encodeURIComponent() 将字符串转化为有效的URL组件
decodeURI() 对encodeURI()编码的文本进行解码
decodeURIComponent() encodeURIComponent()编码的文本进行解码

四、对象编程

4.1 Window对象

4.1.1 属性

属性 描述
document 对话框中显示的当前文档
location 指定当前文档的url
name 对话框名字
navigator 表示浏览器对象，用于获取与浏览器相关的信息
这个可以直接调用，如document.write()
document.getelementById(‘test’)

4.1.2 方法

方法 描述
prompt 弹出一个提示对话框（有输入框）
alert 弹出一个确认框
open 打开URL路径下的文件
close 关闭被引用的对话框
navigate(URL) 在对话框中显示URL下的文件内容

4.2 对话框

  1. prompt（带输入的）对话框
  2. alert直接提示对话框（仅仅是提示）
  3. confirm（带确认的）对话框

4.3 history

4.3.1 属性

属性 描述
length 历史列表长度
current 当前文档URL（这个在火狐没有！？）
next 列表中下个URL
previous 前一个URL

4.3.2 方法

方法 描述
back 回到上一个URL
forward 去后一个（下一页）URL
go 进入指定页面(go(-1)==back())

4.4 Document文档对象

常用方法及实现：

方法 描述
close 文档的输出流
open 打开一个文档并接收write和writen方法的创建页面内容
write 可以在文档中写入HTML语句或者JavaScript语句
writeln 与write一样，但是以换行符结束
createElement 创建一个HTML标记
getElementById 获取指定id的HTML标记（如果内容多则以元组形式保存，需要用[*]访问）

4.5 DOM（文档对象模型）

4.5.1 DOM分层

如：

1
2
3
4
<tr>
	<th></th>
	<input ... />
<tr>

这里面tr是th和input的parentNode，而返过来，input和th是tr的childNode。
而th和input是兄弟节点。

4.5.2 节点属性如下：

属性 说明
nodeName 节点名称
nodeType 节点的类型
nodeValue 节点的值，通常只应用于文本节点
parentNode 返回当前节点的额父节点
childNodes 子节点列表
firstChild 返回第一个子节点
lastChild 返回最后一个子节点
previousSibling 返回当前节点的前一个兄弟节点
nextSibling …后一个兄弟节点
attributes 元素的属性列表

4.5.3 节点操作

操作 方法
创建 appendChild
插入追加 insertBefore(new,ref) new新节点，ref指定在哪个节点后面添加
拷贝 clone(bool) true深拷贝，false浅拷贝
删除 removeChild
替换 replaceChild

4.5.4 DHTML与相应的DOM

  1. innerText 返回除去标签的文本内容
  2. innerHTML 返回带有HTML标签的文本内容

五、事件处理

注：如同onclick这种事件我就不多讲啦！

5.1 事件流

就是说一个事件触发后该先交给谁处理，然后再给谁，然后怎么返回。

5.2 DOM事件模型

看图：

还可以用以下程序验证：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>事件处理测试</title>
</head>
<body>
<button id='clickMe'>点了我</button>
<script>
 var buttonClick=document.getElementById('clickMe') 
 buttonClick.onclick=function(){
 console.log('我点击了button');}
 document.body.onclick=function(){
 console.log('我点击了body');}
 document.onclick=function(){
 console.log('我点击了document');}
 window.onclick=function(){
 console.log('我点击了window');}
 </script>
 </body>
 </html>

5.3 事件对象

当触发DOM上的某个事件时，会产生一个时间的对象。
如键盘信息，鼠标信息等。
如：

1
2
3
4
5
var buttonClick=document.getElementById('clickMe') 
 buttonClick.onclick=function(event){
 console.log('我点击了button');
 console.log(event);
}

其结果如下：

这里，event是自带的。它返回了很多信息！

总结：这差不多就是全部内容了。