一、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(表示不是数),表示字符串中不包含整数或浮点数。