JavaScript的概述

JavaScript的概述

1.1 什么是JavaScript

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

• JavaScript 被设计用来向 HTML 页面添加交互行为。
• JavaScript 是一种脚本语言（脚本语言是一种轻量级的编程语言）。
• JavaScript 由数行可执行计算机代码组成。
• JavaScript 通常被直接嵌入 HTML 页面。
• JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）。

1.2 JavaScript的引入

        

• ECMAScript：语法，语句.
• BOM:浏览器对象

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

1.3 JavaScript的作用

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

1.4 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>

2. JavaScript语法及规则

2.1 注释

        单行注释

                   //

                   Hbuilder快捷键 ctrl+/

                  

        多行注释

                   /* */

                   Hbuilder快捷键 ctrl+shift+/

 

         示例：

        

2.2 变量

1. 变量简述

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

变量的声明：

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

变量的声明和赋值：

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

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

1. 必须以字母或下划线开头，中间可以是数字、字符或下划线
2. 变量名不能包含空格等符号
3. 不能使用JavaScript关键字作为变量名，如：function、this、class
4. JavaScript严格区分大小写。

2.3 基本数据类型

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

1. string                 字符串类型。””和’’都是字符串。 JavaScript中没有单个字符
2. boolean             布尔类型。  固定值为true和false
3. number             数字类型。  任意数字
4. null                     空，一个占位符。
5. undefined         未定义类型，该类型只有一个固定值，即undefined，表示变量声明却未               定义具体的值。

 

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

 

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

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

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

 

 

2.4 引用数据类型

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

 

标准创建方式：

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

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

2.5 运算符

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

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

2.5.1 比较运算符

                   ==             逻辑等。仅仅对比 值

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

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

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

 

2.5.2 逻辑运算符

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

 

 

2.6 正则对象

2.6.1 RegExp对象的创建方式

1. var reg = new RegExp("表达式");            （开发中基本不用）
2. var reg = /^表达式$/;                                直接量（开发中常用）

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

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

2.6.2 test方法

正则对象.test(string);        

     用来校验字符串是否匹配正则。

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

 

随堂练习

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

2.6.3 正则对象使用注意事项

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

全部符合为true

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

适用于表单校验

 

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

全部不符合为false

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

 适用于字符串查找、替换

 

 

2.7 JS数组对象

2.7.1JS数组的特性

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

• 数组中的每一个成员没有类型限制，及可以存放任意类型
• 数组的长度可以自动修改

2.7.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

 

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

 

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

 

2.8 全局函数（global）

2.8.1 执行

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

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

2.8.2 编码和解码

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

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

 

 

 

2.8.3 URI和URL的区别

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

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

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

 

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

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

例如：

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

/a.html                                                 是URI

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

 

2.8.4 字符串转数字

 

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

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

注：

• 如果字符串的某个字符从字面值上无法转为数字，那么从该字符开始停止转换，仅返回前面正确的转换值。（例如：11.5a55，parseInt结果11，parseFloat结果11.5）
• 如果字符串的第一个字符就无法从字面值上转为数字，那么停止转换，返回NaN
  NaN（Not A Number，一个数字类型的标识，表示不是一个正确的数字）

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

2.9.1 函数简述及作用

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

        

         作用：增强代码的复用性

2.9.2 函数格式

 

1. JavaScript函数定义必须用小写的function；
2. JavaScript函数无需定义返回值类型，直接在function后面书写 方法名；
3. 参数的定义无需使用var关键字，否则报错；
4. JavaScript函数体中，return可以不写，也可以return 具体值，或者仅仅写return；

        

2.9.3 函数使用的注意事项

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

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

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

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

2.10  自定义对象

function构造函数

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

 

相当于java中创建某个class类

 

无形参格式：

         function 对象名(){

         函数体

}

示例：

效果：

带参数格式：

         function 对象名(参数列表){

         函数体

}

示例：

效果：

有属性格式：

         function 对象名(){

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

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

                   …….

}

this表示当前对象。(这个很重要,前端js分层会用到)

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

效果1：

 

示例2：

效果2：

 

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

效果3：

 

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

2.10.2 对象直接量

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

格式：

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

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

示例1：

 

效果1：

示例2：

效果2：

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