JavaScript教程

 JavaScript教程

1.1 JavaScript的概述

1.1.1 什么是JavaScript

JavaScript是web上一种功能强大的编程语言，用于开发交互式的web页面。它不需要进行编译，而是直接嵌入在HTML页面中，由浏览器执行。

l JavaScript 被设计用来向 HTML 页面添加交互行为。

l JavaScript 是一种脚本语言（脚本语言是一种轻量级的编程语言）。

l JavaScript 由数行可执行计算机代码组成。

l JavaScript 通常被直接嵌入 HTML 页面。

l JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）。

JavaScript的组成：

l ECMAScript：语法，语句.

l BOM:浏览器对象

l DOM:Document Object Model.操作文档中的元素和内容.

1.1.2 JavaScript的作用

使用JavaScript添加页面动画效果，提供用户操作体验。主要应用有：嵌入动态文本于HTML页面、对浏览器事件做出响应、读写HTML元素、验证提交数据、检测访客的浏览器信息等。

1.1.3 JavaScript的引入

在HTML文件中引入JavaScript有两种方式，一种是在HTML文档直接嵌入JavaScript脚本，称为内嵌式，另一种是链接外部JavaScript脚本文件，称为外联式。对他们的具体讲解如下：

1) 内嵌式，在HTML文档中，通过<script>标签引入，如下

<script type="text/javascript">

//此处为JavaScript代码

</script>

2) 外联式，在HTML文档中，通过<script src=””>标签引入.js文件，如下：

<script src="1.js" type="text/javascript" charset="utf-8"></script>

1.2 JavaScript语法及规则

1.2.1 注释

l 单行注释

//

Hbuilder快捷键 ctrl+/

l 多行注释

/* */

Hbuilder快捷键 ctrl+shift+/ 

示例：

1.2.2 变量

1.2.2.1 变量简述

变量：标示内存中的一块空间，用于存储数据，且数据是可变的。

变量的声明：

var 变量名; //变量赋予默认值，默认值为undefined   （未定义的）

变量的声明和赋值：

var 变量名=值;   //变量赋予对应的值

在声明JavaScript变量时，需要遵循以下命名规范：

l 必须以字母或下划线开头，中间可以是数字、字符或下划线

l 变量名不能包含空格等符号

l 不能使用JavaScript关键字作为变量名，如：function、this、class

l JavaScript严格区分大小写。

1.2.2.2 基本数据类型

类似于java中的基本数据类型

l string 字符串类型。””和’’都是字符串。 JavaScript中没有单个字符

l boolean 布尔类型。  固定值为true和false

l number 数字类型。  任意数字

l null 空，一个占位符。

|  undefined 未定义类型，该类型只有一个固定值，即undefined，表示变量声明却未               定义具体的值。

注：因为undefined是从null中派生出来的，所以undefined==null

JavaScript区别于java，是弱类型语言，变量的使用不用严格遵循规范，所以一个变量声明好之后，是可以赋予任意类型的值。

通过typeof运算符可以分辨变量值属于哪种基本数据类型

 

ECMAScript实现之初的一个bug，null属于基本数据类型，typeof(null)--àobject

1.2.2.3 引用数据类型

引用类型通常叫做类（class），但在JavaScript中，因为不存在编译过程，所以没有类的概念，所处理的引用数据类型都是对象。

标准创建方式：

var str = new String();//和java相同

var str = new String;  //js独有的方式

1.2.3 运算符

JavaScript运算符与Java运算符基本一致。

这里我们来寻找不同点进行学习

1.2.3.1 比较运算符

 

== 逻辑等。仅仅对比 值

=== 全等。  对比值并且对比类型。

如果值和类型都相同，则为true；值和类型有一个不同，则为false

练习： var x=8; alert(x==8); alert(x===8); alert(x=="8"); alert(x==="8");

1.2.3.2 逻辑运算符

注：JavaScript逻辑运算符没有 &  |

 

1.2.4 正则对象

1.2.4.1 RegExp对象的创建方式

l var reg = new RegExp("表达式"); （开发中基本不用）

l var reg = /^表达式$/;  直接量（开发中常用）

直接量中存在边界，即^代表开始，$代表结束

直接量方式的正则是对象，不是字符串，别用引号

1.2.4.2 test方法

正则对象.test(string); 用来校验字符串是否匹配正则。

全部字符匹配返回true；有字符不匹配返回false

随堂练习

练习：判断字符串是否为空 var msg=””; var reg = /^\s*$/; alert(reg.test(msg));

1.2.4.3 正则对象使用注意事项

/^表达式$/     只要有无法成立正则的字符存在，即为false。

全部符合为true

（检查严格，眼睛不揉沙子）

适用于表单校验

/表达式/        只要有成立正则的字符存在，即为true。

全部不符合为false

（检查不严格，懒人思想）

适用于字符串查找、替换

1.2.5 JS数组对象

1.2.5.1 JS数组的特性

JS数组可以看做 Java中的ArrayList 集合。

l 数组中的每一个成员没有类型限制，及可以存放任意类型

l 数组的长度可以自动修改 

1.2.5.2 JS数组的四种创建方式

1. var arr = [1,2,3,”a”,true]; //常用的JS数组。 长度5

2. var arr = new Array();创建一个数组对象，数组长度默认为0

3. var arr = new Array(4);

数组长度是4，相当于开辟了长度为4的空间，每个元素是undefined。（仅在显示数组时进行处理，undefined为了方便显示变成了空字符串形式，其值本质仍然是undefined）

4. var arr = new Array(“a”,”b”,true);  //创建了一个数组，长度3, 数组元素是”a”,”b”,true

1.2.5.3 JS数组的常用属性/方法

 

物理翻转：就是把元素下标进行互换

1.2.6 全局函数（global）

1.2.6.1 执行

作用：用于增强程序的扩展性。

注：只可以传递原始数据类型string，传递String对象无作用。

1.2.6.2 编码和解码

URL/URI编码：中文及特殊符号   %16进制

作用：保证数据传递的完整性。

 

 

1.2.6.3 URI和URL的区别

URI是统一资源标识符。  标识资源详细名称。

URL是统一资源定位器。 定位资源的网络位置。

资源：可以通过浏览器访问的信息统统称为资源。（图片、文本、HTML、CSS等等。。。。）

URI标识资源的详细名称，包含资源名。

URL定位资源的网络位置。包含http://

例如：

http://www.tanklo.cn/     是URL

/a.html    是URI

http://www.tanklo.cn/a.html 既是URL，也是URI

1.2.6.4 字符串转数字

parseInt(string); string按照字面值转换为整数类型，小数点后面部分不关注。

parseFloat(string); string按照字面值转换为小数类型。

注：

l 如果字符串的某个字符从字面值上无法转为数字，那么从该字符开始停止转换，仅返回前面正确的转换值。（例如：11.5a55，parseInt结果11，parseFloat结果11.5）

l 如果字符串的第一个字符就无法从字面值上转为数字，那么停止转换，返回NaN

NaN（Not A Number，一个数字类型的标识，表示不是一个正确的数字）

1.2.7 自定义函数/自定义方法

1.2.7.1 函数简述及作用

如果一段代码需要被重复编写使用，那么我们为了方便统一编写使用，可以将其封装进一个函数（方法）中。

作用：增强代码的复用性

1.2.7.2 函数格式

l JavaScript函数定义必须用小写的function；

l JavaScript函数无需定义返回值类型，直接在function后面书写 方法名；

l 参数的定义无需使用var关键字，否则报错；

l JavaScript函数体中，return可以不写，也可以return 具体值，或者仅仅写return；

1.2.7.3 函数使用的注意事项

JavaScript函数调用执行完毕一定有返回值，值及类型根据return决定，如果未return具体值，返回值为undefined；

JavaScript函数若同名，则不存在方法重载，只有方法相互覆盖，最后定义的函数覆盖之前的定义；

因为JavaScript不存在函数重载，所以JavaScript仅根据方法名来调用函数，即使实参与函数的形参不匹配，也不会影响正常调用；

如果形参未赋值，就使用默认值undefined

1.2.8 自定义对象（扩展）

1.2.8.1 function构造函数

我们知道，JavaScript中的引用数据类型都是对象，而对象在JavaScript中可以用函数来表示。

相当于java中创建某个class类

l 无形参格式：

function 对象名(){

函数体

}

示例：

 

效果：

 

l 带参数格式：

function 对象名(参数列表){

函数体

}

示例：

 

效果：

 

l 有属性格式：

function 对象名(){

this.属性名1=属性值1;

this.属性名2=属性值2;

…….

}

this表示当前对象。

示例1：（this表示的是Person对象）

 

效果1：

 

示例2：

效果2：

 

示例3：（无需定义，自由为对象赋予属性及值）

 

效果3：

 

应用场景：适用于对象构建及代码复用。

1.2.8.2 对象直接量

开发中可以用一种简单的方式直接创建自定义的JavaScript对象，这种方式称为“对象直接量”。

格式：

var 对象名 = {属性名1:”属性值1”, 属性名2:”属性值2”, 属性名3:”属性值3”……};

注：该方式直接创建出实例对象，无需构建函数，无需再new创建实例对象，直接使用即可

示例1：

 

效果1：

 

示例2：

 

效果2：

 

应用场景：适用于快速创建实例对象及数据封装。

1.3 BOM对象

1.3.1 BOM对象简述

1.3.1.1 BOM对象是什么？有什么用？

BOM（Browser Object Model）浏览器对象模型

浏览器：IE、火狐、谷歌等

作用：用来执行浏览器的相关操作。（例如：浏览器的地址、弹出消息等）

  window对象是JavaScript的内置对象，使用window对象调用方法时可以省略window不写。

1.3.2 BOM ：Window对象（掌握）

1.3.2.1 方法：定时器

函数名	描述
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式
clearInterval()	取消由 setInterval() 设置的 timeout。
setTimeout()	在指定的毫秒数后调用函数或计算表达式。
clearTimeout()	取消由 setTimeout() 方法设置的 timeout

1.3.2.2 定时器的案例

l 循环定时器的启动和取消

n 启动循环定时器-setInterval()

循环定时器，调用一次就会创建并循环执行一个定时器。

格式：

setInterval(调用方法,毫秒值);

//毫秒值：  循环周期

示例：

 

效果：（每隔一秒就会弹出一次对话框）

 

n 停止循环定时器-clearInterval()

setInterval方法在创建一个定时器的同时，还会返回一个的定时器的ID，该ID就代表这个定时器。

此定时器ID在当前页面是不重复的。

我们可以通过clearInterval方法，指定某个循环定时器 停止

格式：

clearInterval(定时器ID);

示例：

 

效果：

因为定时器设定后立即取消了，所以没有任何效果。

l 一次性定时器的设置和取消

n 启动一次性定时器-setTimeout()

一次性定时器，调用一次就会创建并执行一个定时器一次。

格式：

setTimeout(调用方法,毫秒值);

示例：

 

效果：

因为定时器设定后立即取消了，所以没有任何效果。

| 停止一次性定时器clearTimeout()

setTimeout方法在创建一个定时器的同时，还会返回一个的定时器的ID，该ID就代表这个定时器。

此定时器ID在当前页面是不重复的。

我们可以通过clearTimeout方法，指定某个一次性定时器 停止

格式：

clearTimeout (定时器ID);

示例：

 

效果：

因为定时器设定后立即取消了，所以没有任何效果。

1.3.2.3 方法：消息框

函数名	描述
alert()	显示带有一段消息和一个确认按钮的警告框。
confirm()	显示带有一段消息以及确认按钮和取消按钮的确认框。   确认框：   确定返回true   取消返回false
prompt()	显示可提示用户输入的提示框。   点击确定获得用户输入数据

1.3.2.4 消息框的案例

l 警告框，用来弹出警告消息。

示例：

 

效果：

 

注：不同浏览器显示的组件样式不同，这里我们无需关注组件样式。

l 确认框，用于告知用户信息并收集用户的选择

示例1：

效果2：

该方法有返回值，用户通过选择“确定”或者“取消”，方法结束会返回boolean类型的值。

l “确定”返回true；

l “取消”返回false；

示例2：

 

效果2：

 

1.3.3 BOM ：Location对象

l href属性：设置或返回完整的 URL。

 

<script type="text/javascript">
function change(){
location.href = "http://www.tanklo.com";
}
</script>
<input type="button" value="点我" onclick="change()"/> 

1.3.4 BOM ：History对象（了解）

l go() 方法：跳转到指定页面

a) go(-1) 加载前一个连接，等效back()

b) go(1)  加载后一个链接，等效forward()