JavaScript 第一讲 笔记：JavaScript基础

一、JS前世今生

1.什么是“解释性语言”

• 计算机不能直接理解任何除机器语言以外的语言，所以必须要把程序员所写的程序语言翻译成机器语言，计算机才能执行程序。将其他语言翻译成机器语言的工具，被称为编译器。
• 编译器翻译的方式有两种：一个是编译，一个是解释。当编译器以解释方式运行的时候，称之为解释器。
• 解释性语言编写的程序不进行预先编译，以文本方式存储程序 代码。
• 常见解释性语言：HTML、XHTML、JavaScript、XML、 CSS、AJAX等。

2、JavaScript是什么

• JavaScript是一种小型的、轻量级的、面向对象的、跨平台的脚本语言，是目前最流行的网页客户端编程语言。JavaScript用于 控制网页内容，实现网页浏览者与网页内容之间的交互，这种交 互的实现直接发生在客户端，并不需要与Web服务器之间进行数据通信，因此将获得极高的响应速度。
• JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。
• JavaScript是一种解释性脚本语言。它不同于一般的程序设计语言，它不需要事先进行编译，而是嵌入在HTML文本中，由客户端浏览器对其进行解释执行。
• JavaScript具有平台无关性：只要客户端的浏览器支持JavaScript，JavaScript程序便能正确运行。而几乎所有主流的浏览器均支持JavaScript。

3、JavaScript历史和发展

• JavaScript语言最初称为LiveScript语言，是由Netscape（网景）公司为Netscape Navigator 2.0开发的脚本语言。希望借助流行的Java使LiveScript流 行起来，因此改名为JavaScript。
• Microsoft在IE3.0中引入了JavaScript。因为Microsoft没有授权使用JavaScript商标，因此将其改名为Jscript。
• 1997年，JavaScript 1.1被提交到ECMA(欧洲计算机制造商协会)。并在1997.6ECMA制定了第一个正式语言规范ECMA－262，并命名ECMAScript。

4、JavaScript能做什么

• 表单数据验证：表单数据验证是JavaScript最基本也是最能体现效率的功能。
• 数据绑定：通过对位于服务器端的数据源文件的访问，便可以将数据源中的数据传送到客户端，并将这些数据保存在客户端。
• 少量数据查找：能够实现在当前网页中进行字符串的查找和替换。
• AJAX核心技术：支持异步请求的技术，使客户端可以使用JavaScript向服务器提出请求并处理响应，但并不影响用户在客户端的浏览。

二、我叫JS

1、常用的两个客户端方法

1.1 document.write(str)

• 该方法在浏览器中输出参数字符串str。
• document是文档对象模型(DOM)中的一个对象，表示当前浏览器中的网页文档。
• document提供了许多访问和控制页面中元素的属性和方法，write()是其中的一个方法
• JS通过“.”运算符调用对象的属性和方法。

1.2 window.alert(str)

• 该方法在浏览器中弹出一个对话框，对话框中显示参数str的内容。
• Window对象同样是浏览器提供的对象，对象提供了许多访问和控制窗口元素的属性和方法，alert()方法是其中一个方法。

2、如何在HTML中加入JavaScript代码

2.1 script 标记对（内嵌式）

• 在一个HTML文件中，可以出现多个<script></script>块，各个块按照他们在HTML中出现的顺序依次被解释与执行。
• 浏览器将忽略其不支持的版本编写的脚本。language属性可以省略 ，因为所有的浏览器默认的language为JavaScript。

2.2 直接加入到HTML的标记中（行内式）

• 如果是多句脚本代码，应用<script></script>.。
• 如果是简单的代码，可以直接将代码加到HTML的标记中。这种方法一般是将JavaScript代码直接指定给事件响应句柄，由事件触发脚本的执行。
• 在HTML标记中直接加代码，需要使用“javascript:”协议。

2.3 使用src属性引用JavaScript脚本（外链式）

• 通过src属性，可以使用外部的js脚本文件。
• 外部javascript文件的扩展名是.js
• 代码重用：不同网页可引用相同的javascript源代码文件
• 安全性：对于怀有恶意的人，可通过代码发现安全漏洞，从而威胁网站安全。如果将JS文件统一放到有访问权限的控制目录，可以避免任何人直接查看。
• 代码维护：将JS文件放在指定目录下，方便代码的管理和维护。

3、JavaScript程序设计基本规则

3.1 语句

• 程序由若干语句组成，语句是组成程序的最基本单位。
• 每条语句是由合法的函数、数据、表达式组成。
• 每条语句以分号“;”结束(不是必须的)。
• 一行中可以放置多条语句，但必须以分号隔开。

3.2 区分大小写

• Javascript中代码是区分大小写的。
• 所有关键字是小写的。

3.3 注释

• 单行注释：//或#开始
• 多行注释：/* 注释内容 */

3.4 空白和缩进

• 运算符与关键字之间出现的空格将被忽略。
• 适当使用缩进和空白有助于改善程序的可读性。
• 空白包括空行或者空格。

4、第一个JavaScript程序

<script>
	var age = 25; //定义变量
	var city = '北京';
	if(age > 18) {
		alert('你已成年， 可以做任何你想做的事！');
		if(city == '北京') {
			alert('你好， 北京土著！');
		} else {
			alert('你好， 北漂一族！');
		}
	} else {
		alert('小同学你好， 小心被拐卖了哦！');
	}
</script>

三、JS变量

1、什么是变量

• 现实世界中会有各种数据：姓名、性别、年龄、学历等。
• 在编程语言中，是用一种叫做“变量”的符号来描述现实世界中的数据的。

2、变量的声明方式

• 变量使用关键字 var 进行定义，例如：var username;
• 同时声明多个变量，多个变量间用逗号分开，
  例如：var username,password;
• JS为弱数据类型语言，在定义变量时不需要指定变量类
  型，JS会根据对变量所赋的值自动确定变量的类型。
• JS变量的数据类型在程序中可以变化。

3、变量的命名规则

• 变量名称必须以一个字母或下划线 “_” 开始，后面的字符可以是数字 0-9 ，字母 A-Z 或 a-z。
• 不能使用JavaScript 关键字或者保留字作为变量名。JS变量名称区分大小写。

4、变量的命名方式

• 当变量名包含多个单词时，一般采用“驼峰”式的命名方
  式，即第一个单词的字母全部小写，其它单词首字母大
  写，其余小母小写，例如 getUserName。
• 另一种常用的命名方法是“下划线”命名方式，使用 “_” 符号分隔多个单词，而各单词字母均小写，例如 get_user_name。

5、如何给变量赋值

• 给变量赋值，使用赋值符号”=”。”=”不表示相等，而是将”=”号右边的值赋予左边的变量。”=”符号右边可以是值、变量或表达式。
• 在JS中，重复定义相同名称的变量是合法的，但是后面定义的变量将覆盖前面定义的同名变量。但在JAVA等程序语言中，同一作用域内不允许重复定义相同名称的变量。

6、PS：

6.1 JS的关键字和保留字

6.2 当全局变量与局部变量同名时

• 当函数中定义的局部变量与全局变量同名时，局部变量将覆盖全局变量，就是说，在函数中使用函数中定义的局部变量，而不使用函数之外定义的全局变量，也不会影响函数之外的全局变量。

四、JS数据类型

1、什么是数据类型

程序是算法与数据的结合。算法是完成某项任务采用方法的详细步骤，数据是程序处理的对象，目的是对数据进行加工处理，以得到期望的结果。数据根据其特性进行分类，不同的数据类型有不同的处理方法。

2、JS有哪些数据类型

JavaScript支持5种基本数据类型：
• number(数值)
• string(字符串)
• boolean(布尔型)
• undefined(未定义)和null(空)
• 复合数据类型（类、接口、数组）

2.1 数值型number

• 数值型包括整数和浮点数。在JS中，所有数值均被作为浮点数处理，负值通过在数值前加 “-”号表示。
• 整数可以用十六进制和八进制形式表示。十六进制数值以 0x 或0X开始，例如”0X23AC”；八进制以 0 开始，后面跟0~7的数字。最终显示结果都为十进制。注意：一些浏览器并不支持八进制。
• 十进制数值用科学计数法表示，例3.45e12(相当于3.45乘以10的12次方)、3.45e-12(相当于3.45乘以10的－12次方)，最 终显示结果为十进制。
• 关于数值类型，有一个特殊的数据NaN(Not a Number)，该值表示“不是数字”。在某些情况下，将返回该值。例如强制将纯字符串转换为数值时将返回NaN。

2.2 字符串型(string)

• 字符串是指由单引号或双引号括起来的一串字符。例如：”welcome”，”你好”，”1203-003”。
• 字符串长度不受限制，可以是一个字符，多个字符，或者是空字符。
• 字符串内容本身包含引号时，可以使用与外层引号不同的方式。
• 当需要在双引号字符串中包含双引号时，或在单引号字符串包含单引号时，必须使用反斜线”\”进行转义。

ps：
1、什么是转义字符
在这里，反斜线”\”被称为转义字符。当需要表示一些特殊的字符，如回车符，需要使用转义符”\”进行转义。当JavaScript遇到转义符时，将转义符后出现的字符进行特殊解释。
2、常用的转义字符

2.3 布尔型(boolean)

• 布尔型又称为逻辑型，就是指真或假，是或否。布尔型只有两个可取值：true和false（全小写）。
• 布尔型一般用于流程控制语句中，例如 if 语句中。
• 可以直接为变量指定布尔值，也可以通过比较产生布尔值。

2.4 undefined

• 当一个对象属性不存在或者变量定义后从未赋值时，返回undefined。
• 数据类型undefined只有一个值“undefined” 。

2.5 null

• 当一个变量没有保存有效的数据时或对象不存在时，都将返回null。
• 数据类型null只有一个值“null”。
• 可以通过给一个变量赋 null 值来清除变量的内容。

3、复合数据类型

3.1 什么是数组

• 数组的概念：数组是一组数据有序排列的集合。
• 数组元素：组成数组的每一个数据称为数组的一个数组元素。
• 数组索引：每一个数组元素对应一个整数值，称为数组元素索引，或者数组元素下标。元素索引为非负整数，由0开始依次增加，即第一个元素索引为0，依次为1，2等。JS中数组索引是自动生成的，是由0开始的非负整数，不能指定为其他索引。
• 数组元素的访问：对数组中各个元素，使用数组名加上方括号”[ ]”括起来的元素索引进行访问。元素索引为元素在数组中的位置序号。
• 数组的长度：数组元素的个数称为数组的长度

3.2 通过 Array() 函数定义数组

创建指定长度数组：指定整数为参数
• 例如：var name = new Array(3);

创建未知长度的数组：不带参数
• 例如：var name = new Array();

将数组元素作为参数。
• 例如：var name = new Array(元素1，元素2，……);

• 说明：这种方式直接将数组元素作为参数传递给Array()，各元素之间用逗号分开。

3.3 通过直接赋值法定义数组

• 语法：var name = [元素1，元素2，元素3，……];
• 说明：将各元素以逗号隔开，放在方括号内，赋予数组。
• 例如：var arr = [“星期一”,”星期二”,”星期三”];
• 注意：直接赋值法的功能是创建并初始化一个数组，在使用该方法时，总是会创建一个新的数组。要想修改已创建的元素值，需要对各元素进行一一修改。

3.4 创建多维数组

• JavaScript中只支持一维数组，而不支持多维数组，但支持数组嵌套，即数组元素可以是数组。
• 对于数组嵌套，数组中的嵌套元素通过多个连续的[ ]符号结合索引进行访问。第1个[ ]符号中表示第1层元素的索引值，第2个[ ]符号表示第2层元素的索引值，依次类推。例如：arr[0][0]。

3.5 获取数组对象的元素个数

• JavaScript中，数组又被作为对象处理，数组对象有一个重要的属性 length ，该属性表示数组元素的个数，或者称为数组长度。

4、基本数据类型与复合（引用）数据类型

4.1 区别

• 基本数据类型变量直接存储值，而复合数据类型变量存储实际值的地址。
• 存储方式的不同，导致两种不同类型在使用时会产生不同的结果。
• 使用基本数据类型对变量进行赋值时，传递给目标变量的是值。而使用复合数据类型对变量进行赋值时，传递给目标变量的是对值的引用，而不是实际值，因此，目标变量将始终与原变量相同，修改任何一个都将影响另一个。

4.2 赋值传值示意图

传递给目标变量的是值。

4.3 引用传值示意图

将一个变量的值拷贝一份赋给另一个变量。

五、数据类型转换

1、为什么要转换数据类型

• JS为弱数据类型，对变量数据类型没有严格要求。定义变量时不需要指定变量的数据类型，当对变量赋值时，根据值的类型确定变量的数据类型。另外，变量的数据类型可以在程序中发生变化，在JAVA中是不允许的。

2、自动数据类型转换

在使用不同类型的变量进行表达式运算时，JS将根据需要自动尝试进行必要的数据类型转换。

2.1 其它类型转换成布尔型

2.2 其它类型转换成字符串

2.3 其它类型自动转换为数值

3、强制数据类型转换

3.1 从字符串中提取数值

• 全局函数parseInt()和parseFloat()。函数parseInt()用于在字符串中由左至右提取一个整数数值，当遇到非数值字符时停止提取；而 parseFloat()用于在字符串中由左至右提取一个浮点数，即提取整数和小数点，当遇到非数字字符时停止提取。
• 当字符串中的第一个字符为非数字字符时，parseInt()和parseFloat()函数返回NaN(表示不是数)，表示字符串中不包含整数或浮点数。