JavaScript 介绍
JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
- JavaScript 是一种轻量级的编程语言。
- JavaScript 是可插入 HTML 页面的编程代码。
- JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
- JavaScript 很容易学习。
JavaScript 用法
- HTML 中的脚本必须位于
<script>
与</script>
标签之间。 - 脚本可被放置在 HTML 页面的
<body>
和<head>
部分中。
书写位置
- 内嵌式:理论上js可以书写在页面的任意位置。
<script>alert("内嵌式");</script>
- 外链式:首先新建一个文件类型为.js的文件,然后在该文件中写js语句,通过script标签对引入到html页面中。
<script src="js文件路径地址">这里不能写js语句</script>
- 行内式:直接书写在标签身上,是一个简写的事件,所以又称之为事件属性。
<button onclick="alert('啦啦啦~');">点我</button>
JavaScript 输出
- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 console.log() 写入到浏览器的控制台。
JavaScript 关键字
JavaScript 关键字用于标识要执行的操作。
abstract | else | instanceof | super |
boolean | enum | int | switch |
break | export | interface | synchronized |
byte | extends | let | this |
case | false | long | throw |
catch | final | native | throws |
char | finally | new | transient |
class | float | null | true |
const | for | package | try |
continue | function | private | typeof |
debugger | goto | protected | var |
default | if | public | void |
delete | implements | return | volatile |
do | import | short | while |
double | in | static | with |
JavaScript 注释
JavaScript 注释可用于提高代码的可读性。
- 单行注释以 // 开头。
- 多行注释以 /* 开始,以 */ 结尾。
JavaScript 变量
变量是用于存储信息的"容器"。
- 变量必须以字母开头
- 变量也能以 $ 和 _ 符号开头(不推荐这么做)
- 变量名称对大小写敏感(y 和 Y 是不同的变量)
声明变量
在 JavaScript 中创建变量通常称为"声明"变量。
// 使用var关键词来声明变量
var name;
// 赋值
name = "zhangsan";
// 声明且赋值
var age = 25;
// 一条语句,多个变量
var name = "zhangsan", age = 25;
// 也可以这样
var name = "zhangsan",
age = 18;
// 一条语句中声明的多个变量不可以同时赋同一个值
var x,y,z = 1;
// x,y为 undefined,z为1
// 重新声明变量,该变量的值不会丢失
var name = "zhangsan";
var name;
console.log(name); // zhangsan
JavaScript let 和 const
- let 声明的变量只在 let 命令所在的代码块内有效。
- const 声明一个只读的常量,一旦声明,常量的值就不能改变。
JavaScript 数据类型
基本类型:
- 字符串(String)
- 数字(Number)
- 布尔(Boolean)
- 空(Null)
- 未定义(Undefined)
- Symbol
引用数据类型:
- 对象(Object)
- 数组(Array)
- 函数(Function)
JavaScript 动态类型
意味着相同的变量可用作不同的类型
var x; // Undefined
var x = 5; // Number
var x = "Hello"; // String
声明变量类型
使用关键词 “new” 来声明其类型:
var name = new String;
var age = new Number;
var status = new Boolean;
var cars = new Array;
var person = new Object;
JavaScript 字符串
JavaScript 字符串用于存储和处理文本。
- 单引号或双引号都可以
var name = "zhangsan";
var name = 'zhangsan';
- 可以在字符串中使用引号,只要不匹配包围字符串的引号即可
var remarks = "My name is 'zhangsan'";
- 也可以在字符串添加转义字符来使用引号
var remarks = "My name is \"zhangsan\"";
- 可以使用索引位置来访问字符串中的每个字符:
var name = "zhangsan";
console.log(name[3]); // n
- 可以使用内置属性 length 来计算字符串的长度
var name = "zhangsan";
console.log(name.length); // 8
- 反斜杠是一个转义字符。 转义字符将特殊字符转换为字符串字符
\' 单引号
\" 双引号
\\ 反斜杠
\n 换行
\r 回车
\t tab(制表符)
\b 退格符
\f 换页符
- 可以使用 new 关键字将字符串定义为一个对象
var name1 = "ZhangSan";
var name2 = new String("ZhangSan");
console.log(typeof name1); // string
console.log(typeof name2); // object
字符串属性
- constructor 返回创建字符串属性的函数
- length 返回字符串的长度
- prototype 允许您向对象添加属性和方法
字符串方法
- charAt() 返回指定索引位置的字符
- charCodeAt() 返回指定索引位置字符的 Unicode 值
- concat() 连接两个或多个字符串,返回连接后的字符串
- fromCharCode() 将 Unicode 转换为字符串
- indexOf() 返回字符串中检索指定字符第一次出现的位置
- lastIndexOf() 返回字符串中检索指定字符最后一次出现的位置
- localeCompare() 用本地特定的顺序来比较两个字符串
- match() 找到一个或多个正则表达式的匹配
- replace() 替换与正则表达式匹配的子串
- search() 检索与正则表达式相匹配的值
- slice() 提取字符串的片断,并在新的字符串中返回被提取的部分
- split() 把字符串分割为子字符串数组
- substr() 从起始索引号提取字符串中指定数目的字符
- substring() 提取字符串中两个指定的索引号之间的字符
- toLocaleLowerCase() 根据主机的语言环境把字符串转换为小写,只有几种语言(如土耳其语)具有地方特有的大小写映射
- toLocaleUpperCase() 根据主机的语言环境把字符串转换为大写,只有几种语言(如土耳其语)具有地方特有的大小写映射
- toLowerCase() 把字符串转换为小写
- toString() 返回字符串对象值
- toUpperCase() 把字符串转换为大写
- trim() 移除字符串首尾空白
- valueOf() 返回某个字符串对象的原始值
JavaScript 数字
- JavaScript 只有一种数字类型。数字可以带小数点,也可以不带
var x = 3.14;
var y = 34;
- 极大或极小的数字可以通过科学(指数)计数法来书写
var x = 123e5;
var y = 123e-5;
JavaScript 布尔
布尔(逻辑)只能有两个值:true 或 false。
Null
表示一个空对象引用。
Undefined
表示变量不含有值。
Symbol
Symbol 是 ES6 引入了一种新的原始数据类型,表示独一无二的值
JavaScript 对象
JavaScript 对象是属性和方法的容器。
对象定义
- 使用字符来定义和创建JavaScript对象
var person = {name:"zhangsan",sex:"男",age:25};
- 定义JavaScript对象可以跨越多行,空格跟换行不是必须的
var person = {
name:"zhangsan",
sex:"男",
age:25
};
对象属性
- JavaScript 对象是键值对的容器
- 键值对通常写法为 name : value (键与值以冒号分割)
- 键值对在 JavaScript 对象通常称为 对象属性。
访问对象属性
var person = {name:"zhangsan",sex:"男",age:25};
// 1. 对象.属性
console.log(person.name);
// 2. 对象[属性]
console.log(person["name"]);
对象方法
- 对象的方法定义了一个函数,并作为对象的属性存储。
- 对象方法通过添加 () 调用 (作为一个函数)。
访问对象方法
var person = {
name:"zhangsan",
sex:"男",
age:25,
getAge:function(){
return this.age;
}
};
// 加括号,作为对象的一个方法,返回25
console.log(person.getAge());
// 不加括号,作为对象的一个属性,返回函数的定义
console.log(person.getAge);
JavaScript 数组
以下3种方式都可以创建数组
var cars = new Array();
cars[0] = 20;
cars[1] = 14;
cars[2] = 31;
var cars = new Array( 20, 14, 31);
var cars = [ 20, 14, 31];
JavaScript 函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
JavaScript 函数语法
function functionname(){
// 执行代码
}
调用带参数的函数
- 在调用函数时,可以向其传递值,这些值被称为参数。
- 参数可以在函数中使用,可以发送任意多的参数,由逗号(,)分隔
- 变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值,以此类推。
function myFunction(var1,var2){
// 代码
}
带有返回值的函数
function myFunction(){
var x=5;
return x;
}
JavaScript 作用域
作用域为可访问变量,对象,函数的集合。
局部变量
- 变量在函数内声明,变量为局部变量。
- 局部变量:只能在函数内部访问。
- 因为局部变量只作用于函数内,所以不同的函数可以使用相同名称的变量。
- 局部变量在函数开始执行时创建,函数执行完后局部变量会自动销毁。
- 函数参数只在函数内起作用,是局部变量。
全局变量
- 变量在函数外定义,即为全局变量。
- 全局变量有 全局作用域: 网页中所有脚本和函数均可使用。
- 如果变量在函数内没有声明(没有使用 var 关键字),该变量为全局变量。
- 全局变量是 window 对象: 所有数据变量都属于 window 对象。
变量生命周期
- JavaScript 变量生命周期在它声明时初始化。
- 局部变量在函数执行完毕后销毁。
- 全局变量在页面关闭后销毁。
JavaScript 事件
HTML 事件是发生在 HTML 元素上的事情。当在 HTML 页面中使用 JavaScript 时, JavaScript 可以触发这些事件。
常见HTML事件
- onchange:HTML 元素改变
- onclick:用户点击 HTML 元素
- onmouseover:用户在一个HTML元素上移动鼠标
- onmouseout:用户从一个HTML元素上移开鼠标
- onkeydown:用户按下键盘按键
- onload:浏览器已完成页面的加载
JavaScript 运算符
算术运算符
+
加法-
减法*
乘法/
除法%
取模++
自增--
自减
赋值运算符
=
x=y+=
x+=y x=x+y-=
x-=y x=x-y*=
x*=y x=x*y/=
x/=y x=x/y%=
x%=y x=x%y
比较运算符
==
等于===
绝对等于!=
不等于!==
不绝等于>
大于<
小于>=
大于或等于<=
小于或等于
逻辑运算符
&&
and||
or!
not
条件运算符
- age > 18 ? true : false
JavaScript 条件语句
条件语句用于基于不同的条件来执行不同的动作。
if 语句
只有当指定条件为 true 时,使用该语句来执行代码
- 语法
if (condition)
{
当条件为 true 时执行的代码
}
if…else 语句
当条件为 true 时执行代码,当条件为 false 时执行其他代码
- 语法
if (condition)
{
当条件为 true 时执行的代码
}
else
{
当条件不为 true 时执行的代码
}
if…else if…else 语句
使用该语句来选择多个代码块之一来执行
- 语法
if (condition1)
{
当条件 1 为 true 时执行的代码
}
else if (condition2)
{
当条件 2 为 true 时执行的代码
}
else
{
当条件 1 和 条件 2 都不为 true 时执行的代码
}
switch 语句
使用该语句来选择多个代码块之一来执行
- 语法
switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
与 case 1 和 case 2 不同时执行的代码
}
- 工作原理:首先设置表达式 n(通常是一个变量)。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配,则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。
- default 关键词:使用 default 关键词来规定匹配不存在时做的事情:
JavaScript 循环
循环可以将代码块执行指定的次数。
for
循环代码块一定的次数
- 语法
for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}
语句 1 (代码块)开始前执行
语句 2 定义运行循环(代码块)的条件
语句 3 在循环(代码块)已被执行之后执行
for (var i = 0; i < 10; i++){
console.log(i);
}
// 省略语句1,在循环开始前设置值
var i = 2;
for (; i < 10; i++){
console.log(i);
}
// 在语句1中初始化多个值
for (var i = 0,len=arr.length; i < len; i++){
console.log(i);
}
// 省略语句3
for (var i = 0; i < 10;){
console.log(i);
i++;
}
for/in
循环遍历对象的属性
var person = {fname:"Yang",lname:"TwoShuai",age:25};
for (x in person){
console.log(person[x]);
}
while
当指定的条件为true时循环指定的代码块
- 语法
while (条件){
需要执行的代码
}
var i = 0;
while(i < 10) {
console.log(i);
i++;
}
do/while
该循环是 while 循环的变体。会在检查条件是否为真之前执行一次代码块,然后如果条件为真的话,就会重复这个循环
- 语法
do {
需要执行的代码
} while (条件);
var i = 0;
do {
console.log(i);
i++;
} while(i < 10);
JavaScript break和continue语句
- break 语句用于跳出循环。
// 仅会打印:0 1 2,当i=3的时候循环停止执行
for (var i = 0; i < 10; i++){
if (i == 3){
break;
}
console.log(i);
}
- continue 用于跳过循环中的一个迭代。
// 不会打印:3,当i=3的时候会直接执行下次循环
for (var i = 0; i < 10; i++){
if (i == 3){
continue;
}
console.log(i);
}
- JavaScript标签 可以使用break和continue在多层循环的时候控制外层循环
outerloop:
for (var i = 0; i < 10; i++) {
innerloop:
for (var j = 0; j < 10; j++) {
if (j > 3) {
break;
}
if (i == 2) {
break innerloop;
}
if (i == 4) {
break outerloop;
}
console.log("i = " + i + " j = " + j);
}
}
JavaScript typeof
使用 typeof 操作符来检测变量的数据类型。
JavaScript 类型转换
- Number() 转换为数字
- String() 转换为字符串
- Boolean() 转换为布尔值
JavaScript 正则表达式
正则表达式(英语:Regular Expression,在代码中常简写为regex、regexp或RE)使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。
语法
/正则表达式主体/修饰符(可选)
使用字符串方法
- search() 方法 用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,并返回子串的起始位置。
var name = "zhangsan";
console.log(name.search("san"));
console.log(name.search(/San/i));
- replace() 方法 用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。
var str = "zhangsan";
var txt = str.replace(/san/i,"shan");
txt.replace("shan","san");
正则表达式修饰符
i:执行对大小写不敏感的匹配
g:执行全局匹配,查找所有匹配而非在找到第一个匹配后停止
m:执行多行匹配
正则表达式模式
-
方括号用于查找某个范围内的字符
- [ABC] 查找方括号之间的任何字符。
- [0-9] 查找任何从 0 至 9 的数字。
- (X|Y) 查找任何以 | 分隔的选项。
-
元字符是拥有特殊含义的字符
- \d 查找数字。
- \s 查找空白字符。
- \b 匹配单词边界。
- \uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。
-
量词
- n+ 匹配任何包含至少一个 n 的字符串。
- n* 匹配任何包含零个或多个 n 的字符串。
- n? 匹配任何包含零个或一个 n 的字符串。
使用RegExp对象
在 JavaScript 中,RegExp 对象是一个预定义了属性和方法的正则表达式对象。
- 使用 test()
test() 方法用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false。
var patt = /e/;
patt.test("The best things in life are free!");
/e/.test("The best things in life are free!");
- 使用 exec()
exec() 方法用于检索字符串中的正则表达式的匹配。该函数返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。
/e/.exec("The best things in life are free!");
JavaScript 错误
- try 语句测试代码块的错误。
- catch 语句处理错误。
- throw 语句创建自定义错误。
- finally 语句在 try 和 catch 语句之后,无论是否有触发异常,该语句都会执行。
try {
... // 异常的抛出
} catch(e) {
... // 异常的捕获与处理
} finally {
... // 结束处理
}
JavaScript 变量提升
- JavaScript 中,函数及变量的声明都将被提升到函数的最顶部。
- JavaScript 中,变量可以在使用后声明,也就是变量可以先使用再声明。
x = 5;
console.log(x); // 5
var x;
初始化不会提升
JavaScript 只有声明的变量会提升,初始化的不会。
console.log(x); // undefined
var x = 5;
JavaScript 严格模式
JavaScript 严格模式(strict mode)即在严格的条件下运行。
严格模式声明
严格模式通过在脚本或函数的头部添加 “use strict”;表达式来声明。
严格模式的意义
- 消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为;
- 消除代码运行的一些不安全之处,保证代码运行的安全;
- 提高编译器效率,增加运行速度;
- 为未来新版本的Javascript做好铺垫。
严格模式的限制
- 不允许使用未声明的变量
- 不允许删除变量或对象
- 不允许删除函数
- 不允许变量充满
- 不允许使用八进制
- 不允许使用转义字符
- 不允许对只读属性赋值
- 不允许对一个使用getter方法读取的属性进行赋值
- 不允许删除一个不允许删除的属性
- 变量名不能使用"eval"字符串
- 变量名不能使用"arguments"字符串
- 不允许使用以下这种语句:
"use strict";
with (Math){x = cos(2)}; // 报错
- 由于一些安全原因,在作用域 eval() 创建的变量不能被调用:
"use strict";
eval ("var x = 2");
alert (x); // 报错
- 禁止this关键字指向全局对象
保留关键字
为了向将来Javascript的新版本过渡,严格模式新增了一些保留关键字
- implements
- interface
- let
- package
- private
- protected
- public
- static
- yield
JavaScript this
面向对象语言中 this 表示当前对象的一个引用。
但在 JavaScript 中 this 不是固定不变的,它会随着执行环境的改变而改变。
- 在方法中,this 表示该方法所属的对象。
- 如果单独使用,this 表示全局对象。
- 在函数中,this 表示全局对象。
- 在函数中,在严格模式下,this 是未定义的(undefined)。
- 在事件中,this 表示接收事件的元素。
- 类似 call() 和 apply() 方法可以将 this 引用到任何对象。
var person = {
id : 1,
name : "zhangsan",
age : 25,
fullName : function() {
return this.name;
}
};
JavaScript JSON
JSON 是用于存储和传输数据的格式。通常用于服务端向网页传递数据 。
- JSON 英文全称 JavaScript Object Notation(JavaScript 对象表示法)
- JSON 是一种轻量级的数据交换格式。
- JSON 是独立的语言 *
- JSON 易于理解。
{"person" : [
{ "name":"zhangsan" ,"age":25},
{ "name":"lisi" , "age":30 },
{ "name":"wangwu" , "age":41 }
]}
JSON 语法规则
- 数据为 键/值 对。
- 数据由逗号分隔。
- 大括号保存对象
- 方括号保存数组
JSON 对象
JSON 对象保存在大括号内。
{"name":"zhangsan" ,"age":25}
JSON 数组
JSON 数组保存在中括号内。
{ "person" : [
{ "name":"zhangsan" ,"age":25},
{ "name":"lisi" , "age":30 },
{ "name":"wangwu" , "age":41 }
]}
JSON.parse()
JSON.parse() 方法用于将字符串转换为 JavaScript 对象
var text = '{ "person" : [
{ "name":"zhangsan" ,"age":25},
{ "name":"lisi" , "age":30 },
{ "name":"wangwu" , "age":41 }
]}';
var obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.person[1].name + " " + obj.person[1].age;
JSON.stringify()
JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串
var str = {
"name":"zhangsan",
"age":25
}
jsonStr = JSON.stringify(str)
console.log(jsonStr);
JavaScript void
void 是 JavaScript 中非常重要的关键字,该操作符指定要计算一个表达式但是不返回值。
- 语法
void func()
javascript:void func()
或者
void(func())
javascript:void(func())
<a href="javascript:void(0)">单击此处什么也不会发生</a>
href="#"
与href="javascript:void(0)"
的区别
#
包含了一个位置信息,默认的锚是#top
也就是网页的上端。- 而
javascript:void(0)
, 仅仅表示一个死链接。
<a href="javascript:void(0);">点我没有反应的!</a>
<a href="#pos">点我定位到指定位置!</a>
<br>
...
<br>
<p id="pos">尾部定位点</p>
- 在页面很长的时候会使用 # 来定位页面的具体位置,格式为:# + id。
- 如果要定义一个死链接请使用 javascript:void(0) 。
JavaScript 代码规范
所有的 JavaScript 项目适用同一种规范。
变量名
变量名推荐使用驼峰法来命名(camelCase)
var labelPosition = "top";
空格与运算符
通常运算符 ( = + - * / ) 前后需要添加空格
var x = 1 + 1;
代码缩进
通常使用 4 个空格符号来缩进代码块
function add(x,y){
return x + y;
}
语句规则
- 简单语句的通用规则:
- 一条语句通常以分号作为结束符。
var values = [ 21, 24, 31];
- 复杂语句的通用规则:
- 将左花括号放在第一行的结尾。
- 左花括号前添加一空格。
- 将右花括号独立放在一行。
- 不要以分号结束一个复杂的声明。
function add(x,y) {
return x + y;
}
对象规则
- 将左花括号与类名放在同一行。
- 冒号与属性值间有个空格。
- 字符串使用双引号,数字不需要。
- 最后一个属性-值对后面不要添加逗号。
- 将右花括号独立放在一行,并以分号作为结束符号。
var person = {
name: "zhangsan",
age: 25,
eyeColor: "blue"
};
每行代码字符小于 80
- 为了便于阅读每行字符建议小于数 80 个。
- 如果一个 JavaScript 语句超过了 80 个字符,建议在运算符或者逗号后换行。
document.getElementById("demo").innerHTML =
"Hello JavaScript.";
命名规则
- 变量和函数为小驼峰法标识, 即除第一个单词之外,其他单词首字母大写(lowerCamelCase)
- 全局变量为大写(UPPERCASE)
- 常量(如 PI)为大写(UPPERCASE)
HTML 载入外部 JavaScript 文件
使用简洁的格式载入JavaScript文件(type属性不是必须的)
<script src="myscript.js">
文件扩展名
- HTML 文件后缀可以是 .html (或 .htm)。
- CSS 文件后缀是 .css 。
- JavaScript 文件后缀是 .js 。
使用小写文件名
- 大多 Web 服务器 (Apache, Unix) 对大小写敏感: london.jpg 不能通过 London.jpg 访问。
- 其他 Web 服务器 (Microsoft, IIS) 对大小写不敏感: london.jpg 可以通过 London.jpg 或 london.jpg 访问。
- 必须保持统一的风格,建议统一使用小写的文件名。