第7章-JavaScript基础_它的实现包含了三个部分:ecmascript,文档对象模型,浏览器对象模型-优快云博客

本文深入解析JavaScript的基础知识，涵盖其组成、特点、语法、数据类型、变量、运算符、流程控制、函数定义及事件处理等内容，通过实例展示如何在HTML页面中嵌入JavaScript代码。

一、JavaScript简介：

1.组成部分：
完整的JavaScript实现包含3个部分：ECMAScript、文档对象模型(DOM)、浏览器对象模型(BOM)。

a.ECMAScript描述了该语言的语法和基本对象。

b.文档对象模型描述处理网页内容的方法和接口。

c.浏览器对象模型描述与浏览器进行交互的方法和接口。

2.基本特点：

JavaScript脚本语言具有以下特点：

（1）脚本语言。JavaScript是一种解释型的脚本语言，C、C++等语言先编译，后执行，而JavaScript是在程序的运行过程中逐行进行解释的。

（2）基于对象。JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。

（3）简单。JavaScript语言采用的是弱类型的变量类型，对使用的数据类型未做出严格的要求，是基于Java基本语句和控制的脚本语言，其设计简单紧凑。

（4）动态性。JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器，就可以对用户的输入做出响应。访问一个网页时，用户在网页中进行鼠标单击或上下移动、窗口移动等操作，JavaScript都可直接对这些事件给出相应的响应。

（5）跨平台性。JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此，一个JavaScript脚本编写后可以到任意机器上使用，前提是机器上浏览器支持JavaScript脚本语言。

不同于服务器端脚本语言，如PHP与ASP，JavaScript主要被作为客户端脚本语言在用户的浏览器上运行，不需要服务器的支持，但与此同时也带来另一个问题：安全性。

随着服务器的强壮，虽然程序员更喜欢运行于服务端的脚本，以保证安全，但JavaScript仍然以其跨平台、容易上手等优势大行其道。同时，有些特殊功能(如AJAX)必须依赖JavaScript在客户端进行支持。随着引擎(如V8)和框架(如Node.js)的发展，及其事件驱动及异步I/O等特性，JavaScript逐渐被用来编写服务器端程序。

二、在HTML页面中嵌入JavaScript的方法：

1.引入方式：

1）直接嵌入HTML文件中

这是最常用的方法，大部分含有JavaScript代码的页面都采用这种方法，如下面的例子将JavaScript代码直接写在<script></script>标签中。

<script>
    document.write("这是一行JavaScript代码");
</script>

2)引用外部文件

<script type="text/javascript" src="外部js文件url地址"></script>

2.书写位置：

1）写在<head>头部，如：

<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script>
        alert("hello world");
    </script>
</head>
<body></body>
</html>

2）写在<body>中，如：

<body>
    <script type="text/javascript" src="http://comm/jquery.js"></script>
    <p>这里是一段文本</p>
    <script>
        window.onload = function() {
            var script = document.createElement("script");
            script.setAttribute("type", "text/javascript");
            script.src = "http://comm/jquery.js";
            document.getElementByTagName("head")[0].appendChild(script);
        }
    </script>
</body>

3）以事件的形式写在标签上，如：

<p onclick="javascript:alert('是谁点了我?')">点我点我。</p>

三、JavaScript语法规则：

I.语法：

1.JavaScript输出：

JavaScript语句向浏览器发出命令语句的作用是告诉浏览器该做什么。

<script>
    document.write("hello world");
</script>

2.分号：

语句之间的分隔用分号(;)。注：分号是可选的，JavaScript有自动填补分号的机制。

3.执行顺序：

按照编写顺序依次执行。

4.大小写敏感：

JavaScript语言是区分大小写的，不管是命名变量，还是使用关键字的时候。

5.空格：

JavaScript会忽略掉多余的空格。

6.代码换行：

不可以在单词之间换行。

II.标识符：

所谓标识符，是指变量、函数、属性的名字，或者函数的参数。JavaScript标识符的命名遵循以下规则：

1.JavaScript标识符必须以字母、下画线(_)或美元符($)开始。

2.后续的字符可以是字母、数字、下画线或美元符。

3.不能把关键字和保留字作为标识符。

III.注释：

与Java基本一致。单行注释：使用“//”；多行注释：“/* */”。

四、数据类型：

1.JavaScript中支持的数据类型有以下几种：

1)字符串：如"abc"、'hello'

2)数值：包括整数和浮点数

3)布尔值：true/false

4)对象：object是JavaScript的重要组成部分

5)空值：null

6)未定义值：undefined

7)特殊字符：又称转义字符

2.typeof运算符：

typeof是一元运算符，用来返回操作数字类型的字符串。

typeof的返回值如下：

输入操作数	输出字符串
未定义	undefined
布尔值	boolean
字符串	string
数值	number
对象或null	object
函数	function

（1）下面是几个typeof运算的例子：

console.log(typeof 42);//输出"number"

console.log(typeof 'blubber');//输出"string"

console.log(typeof true);//输出"boolean"

console.log(typeof declaredButUndefinedVariable);//输出"undefined"

console.log(typeof 对象、数组、null);//输出"object"

console.log(typeof 函数);//输出"function"

（2）可以使用typeof判断一个变量是否存在：

if(typeof a!="undefined"){}，不要使用if(a)，因为如果a不存在(未声明)，则会出错。

（3）如果typeof的运算数未定义，返回的就是undefined。

（4）typeof语法中的圆括号是可选项。

运算符为对象、数组和null：typeof(x) = "object"。

（5）typeof运算符返回一个用来表达式的数据类型的字符串。

（6）对于Array、Null等特殊对象使用typeof，一律返回object，这正是typeof的局限性。

如果希望获取一个对象是否是数组，或判断某个变量是否是某个对象的实例，则要选择使用instanceof。instanceof用于判断一个变量是否为某个对象的实例，如var a = new Array(); alert(a instanceof Array); 会返回true，同时alert(a instanceof Object)也会返回true；这是因为Array是Object的子类。

3.Undefined类型：

Undefined类型只有一个值，即undefined，表示变量已声明，但未被初始化。需要注意的是，当使用typeof操作符判断数据类型时，未被声明的变量和未初始化的变量返回的值都为undefined。

如：var message; console.log(typeof message);//undefined console.log(typeof age);//undefined

4.Null类型：

Null类型只有一个值，即null，表示一个空对象指针。使用typeof操作符返回的值是object。需要注意的是，undefined值是派生自null值的，因此ECMA-262规定对它们的相等性测试要返回true。

conlole.log(null==undefined);//true

双等号(==)与三等号(===)：

判断一个变量是否是undefined：typeof variable==="undefined"

判断一个变量是否是null：typeof variable==="null"

注：null==undefined --> true

null===undefined --> falue

5.Object类型：

ECMAScript中的对象是可变的键控集合（即一组数据和功能的集合）。它将很多值聚合在一起，可通过名字访问这些值。对象也可被看作是属性的容器，每个属性都是一个名-值对。属性的名字可以是包括空字符串在内的任意字符串。属性值可以是除undefined值之外的任何值。对象最常见的用法是创建(create)、设置(set)、查找(query)、删除(delete)、检测(test)和枚举(emumerate)它的属性。

（1）创建Object实例的方式

a.使用new操作符：

var person = new Object();
person.name = "Nicholas";
person.age = 21;

b.对象字面量表示法：（通过对象字面量定义对象时，实际上不会调用Object构造函数）

var person = {
    name:"Nicholas",
    age:21,
    5:true //数值属性名会自动转化为字符串
}

（2）访问对象属性的方法

a.点表示法

b.方括号表示法

如，访问上例中person属性name，写法如下：

alert(person.name);//"Nicholas"

alert(person["name"]);//"Nicholas"

还可以如下操作，即方括号表示法可以通过变量访问属性。如果属性名中包含空格，或者属性名使用的是关键字或保留字，则使用方括号法。

var propertyName = "name";

alert(person[propertyName]);//"Nicholas"

五、变量：

1.变量声明

在JavaScript中，变量的类型采用弱类型的方式，即声明变量时不需要严格指明变量的数据类型，所有变量的声明均使用var关键字。当为变量赋值时，会根据赋给变量的值类型确定变量的数据类型。

如：var varName = "Hello JavaScript";

上面例子中，变量varName的数据类型就是字符串类型。

2.类型转换

JavaScript中提供了显式地将值从一种数据类型转换为另一种数据类型的转换函数。基本数据类型转换有3种函数。

a.转换为字符串类型：String()，如：String(2012)的结果为字符串"2012"

b.转换为数值类型：Number()，如：Number("2012")的结果为数值2012

c.转换为布尔类型：Boolean()，如：Boolean(false)的结果为布尔值false

另外，在ECMAScript v3和JavaScript1.5中，增加了3种将数字转换成字符串的方法。

I.toFixed()：把数字转换成字符串，并显示小数点后指定的位数。

II.toExponential()：用指数计数法把数字转换成字符串，该字符串中的小数点前有一位数字，小数点后有指定位数的数字。

III.toPrecision()：用指定位数的有效数字显示数字，如果有效数字的位数不足以显示数字的整数部分，它将采用指数计数法显示数字。

JavaScript也提供了更灵活的字符串到数值的转换函数。

A.parseInt()：将字符串转换为整数，并忽略其后所有非数字后缀。

B.parseFloat()：将字符串转换为浮点数，并忽略其后所有非数字后缀。

注：如果parseInt()和parseFloat()不能将指定的字符串转换成数字时，将返回NaN。

六、运算符：

JavaScript中支持的运算符主要有以下5种：

1.算术运算符：+ - * / % ++ --

2.比较运算符：< > <= >= == != === !==

3.逻辑运算符：&& || !

4.赋值运算符：= += -= *= /= %= &= |= ^= <<= >>= >>>=

5.条件选择符：条件表达式?A:B

七、流程控制语句：

1.条件分支语句

if...else、switch

2.循环语句

for、while、do...while、break、continue

八、JavaScript函数：

1.JavaScript函数定义

1）函数定义

function 函数名(参数1,参数2,...,参数N) {
    函数体(语句集)
}

a.参数可以是常量也可以是变量，在函数内部可以通过arguments对象访问所有参数。

b.函数在定义时，其中的代码并不会被执行。只有当函数被调用时，其中的代码才会真正被执行。

2）函数参数

参数的传递是以传值的方式进行的。如：hello("jason"); var user="jason"; hello(user);

也可以在定义函数时不指定使用的参数，JavaScript会在每次调用该函数时自动生成arguments数组，并建立与参数列表有关的属性。

Functionname.arguments是一个数组，每一个参数对应其中的一个元素，可以使用该数组访问调用时传送的参数。

Functionname.arguments.length是一个整型变量，表示传递参数的个数。

可以使用这两个属性产生参数个数可变的函数。

九、事件和事件处理：

JavaScript常用事件

用JavaScript中，事件是指Web页面在浏览器处于活动状态时发生的各种事情，也就是用户与Web页面交互时产生的各种操作，如浏览器加载、卸载一个页面，用户单击鼠标、移动鼠标，以及按下键盘中的某个键。

浏览器为了响应某个事件而进行的处理过程叫作事件处理，这个处理程序叫作事件处理函数。对事件的处理，一般都是通过调用相应的事件处理函数完成的。

事件调用函数的格式通常为：on 事件名 = 事件处理函数

需要注意的是，onMouseEnter事件类似于onMouseOver事件，唯一的区别是onMouseEnter事件不支持冒泡，也就是说，当鼠标指针进入某元素时，会触发onMouseOver事件和onMouseEnter事件，并且在这个元素的所有子元素上也会触发onMouseOver事件，但不会触发子元素的onMouseEnter事件。onMouseLeave和onMouseOut事件的区别和上面的情况类似，这里不再赘述。

项目实战：敏感的兔子

<html>
	<head>
		<style>
			#main{margin: 0 auto; width: 400px; height: 400px; position: relative;}
			.box{width: 180px; height: 180px; opacity: 0.2; background: #99FF00; position: absolute;}
			#box1{left: 60px; top: 30px;}
			#box2{left: 250px; top: 30px;}
			#box3{left: 60px; top: 220px;}
			#box4{left: 250px; top: 220px;}
		</style>
		<script>
			function fun(e){
				alert(e.keyCode);
			}
		</script>
	</head>
	<body onKeyPress="fun(event)">
		<div id="main">
			<img src="IMG_2755.JPG" border="0" alt=""/>
			<div id="box1" class="box" onMouseEnter="alert('离我远点儿')">鼠标进入</div>
			<div id="box2" class="box" onMouseOver="alert('不要摸我!')">鼠标悬浮</div>
			<div id="box3" class="box" onClick="alert('谁打我?')">鼠标点击</div>
			<div id="box4" class="box" onDbClick="alert('谁打我两下?')">鼠标双击</div>
		</div>
	</body>
</html>