1 Javascript概述
1.1 概念
客户端脚本语言。
- 运行在客户端浏览器中,每个浏览器都有Javascript的解析引擎
- 脚本语言:不需要编译,直接就可以被浏览器解析执行
1.2 功能
可以增强用户和html页面的交互过程,可以来控制html元素,让页面有一些动态的效果,增强用户体验。
JavaScript的作用
- 表单动态校验(密码强度检测) ( JS 产生最初的目的 )
- 网页特效
- 服务端开发(Node.js)
- 桌面程序(Electron)
- App(Cordova)
- 控制硬件-物联网(Ruff)
- 游戏开发(cocos2d-js)
HTML/CSS/JS 的关系
1.3 发展历史
- 1992年,Nombase公司,开发出第一门客户端脚本语言,专门用于表单的校验。命名为 : C-- ,后来更名为:ScriptEase
- 1995年,Netscape(网景)公司,开发了一门客户端脚本语言:LiveScript。后来,请来SUN公司的专家,修改LiveScript,命名为JavaScript
- 1996年,微软抄袭JavaScript开发出JScript语言
- 1997年,ECMA(欧洲计算机制造商协会),制定出客户端脚本语言的标准:ECMAScript,就是统一了所有客户端脚本语言的编码方式。
JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)
1.4 浏览器执行 JS 简介
浏览器分成两部分:渲染引擎和 JS 引擎。
- 渲染引擎:用来解析HTML与CSS,俗称内核。比如 chrome 浏览器的 blink,老版本的 webkit。
- JS引擎:也称为JS解释器。用来读取网页中的JavaScript代码,对其处理后运行,比如 chrome浏览器的 V8
1.5 JS 的组成
-
ECMAScript
ECMAScript 是由ECMA 国际( 原欧洲计算机制造商协会)进行标准化的一门编程语言,这种语言在万维网上应用广泛,它往往被称为 JavaScript或 JScript,但实际上后两者是 ECMAScript 语言的实现和扩展。
ECMAScript:规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准。更多参看MDN: MDN手册
-
DOM——文档对象模型
文档对象模型(DocumentObject Model,简称DOM),是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等) -
BOM——浏览器对象模型
浏览器对象模型(Browser Object Model,简称BOM) 是指浏览器对象模型,它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等。
2 ECMAScript基础语法
ECMAScript:客户端脚本语言的标准。
2.1 与html结合方式
- 内部JS
- 定义
<script>
,标签体内容就是js代码
- 定义
- 外部JS
- 定义
<script>
,通过src
属性引入外部的js文件
- 定义
- 注意
<script>
可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。<script>
可以定义多个。
2.2 注释
- 单行注释:
//注释内容
- 多行注释:
/*注释内容*/
2.3 数据类型
2.3.1 基本数据类型
- number: 数字类型
- 整数
- 小数
- NaN(Not A Number) 一个不是数字的数字类型
- string:字符串。“abc”,“a”,‘ab’
- boolean:
true
和false
- null:一个对象为空的占位符
- undefined:未定义。如果一个变量没有给初始化值,则会被默认赋值为
undefined
2.3.2 引用数据类型
- object:对象
2.4 变量
变量:一段存储数据的内存空间
-
Java语言是强类型语言,而Javascript是弱类型语言。
- 强类型:在开辟变量存储空间时,定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
- 弱类型:在开辟变量存储空间时,不定义空间将来的存储数据类型,可以存放任意类型的数据。
-
语法格式
var 变量名 = 初始化值;
typeof
运算符:获取变量的类型。
注意:
typeof(null)
运算后得到的是object
2.5 运算符
2.5.1 一元运算符
只有一个运算数的运算符
++
、--
:自增、自减++
、--
在前,先自增(自减),再运算++
、--
在后,先运算,再自增(自减)
+
、-
:正负号
注意:在JS中,如果运算数不是运算符所要求的类型,那么js引擎会自动的将运算数进行类型转换
其它类型转number
- string转number:按照字面值转换。如果字面值不是数字,则转为
NaN
(不是数字的数字) - boolean转number:
true
转为1,false
转为0
2.5.2 算术运算符
+
、-
、*
、/
、%
2.5.3 赋值运算符
=
、+=
、-=
、*=
、/=
、%=
、…
2.5.4 比较运算符
>
、<
、>=
、<=
、==
、===
(全等于)
比较方式
- 类型相同:直接比较
字符串:按照字典序比较。按位逐一比较,直到得出大小为止。
- 类型不同:先进行类型转换,在比较
===
:全等于。在比较之前,先判断类型,如果类型不一样,则直接返回false
。
2.5.4 逻辑运算符
&&
、||
、!
其它类型转boolean
- number:
0
或NaN
为假,其他为真 - string:除了空字符串(
""
),其他都是true
null
、undefined
:都是false
- 对象:所有对象都为
true
2.5.5 三元运算符
- 语法格式:
条件表达式? 值1: 值2
判断表达式的值,如果是true则取值1,如果是false则取值2;
- 示例代码
var a = 3;
var b = 4;
var c = a > b ? 1:0; //c的值为0
2.6 流程控制语句
if...else...
switch
- 在java中,switch语句可以接受的数据类型:
byte
、int
、short
、char
、枚举(1.5)、String
(1.7) - 在JS中,switch语句可以接受任意的原始数据类型
- 在java中,switch语句可以接受的数据类型:
while
do...while
for
2.7 JS特殊语法
- 语句以
;
结尾,如果一行只有一条语句则;
可以省略 ,但不建议省略。 - 变量的定义使用
var
关键字,也可以不使用- 使用
var
定义: 定义的变量是局部变量 - 不使用:定义的变量是全局变量
- 使用
2.8 九九乘法表
- 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>99乘法表</title>
<style>
td{
border: 1px solid;
}
</style>
<script>
document.write("<table align='center'>");
//1.完成基本的for循环嵌套,展示乘法表
for (var i = 1; i <= 9 ; i++) {
document.write("<tr>");
for (var j = 1; j <=i ; j++) {
document.write("<td>");
//输出 1 * 1 = 1
document.write(i + " * " + j + " = " + ( i*j) +" ");
document.write("</td>");
}
/*//输出换行
document.write("<br>");*/
document.write("</tr>");
}
//2.完成表格嵌套
document.write("</table>");
</script>
</head>
<body>
</body>
</html>
3 基本对象
3.1 Function
Function:函数(方法)对象
3.1.1 创建
//方式1,了解即可
var fun = new Function(形式参数列表,方法体);
//方式2,常用方式
function 方法名称(形式参数列表){
方法体
}
//方式3
var 方法名 = function(形式参数列表){
方法体
}
3.1.2 属性
length
: 代表形式参数的个数
3.1.3 特点
- 方法定义时,形参的类型不用写,返回值类型也不写。
- 方法是一个对象,如果定义名称相同的方法,会覆盖。
- 在JS中,方法的调用只与方法的名称有关,和参数列表无关。
- 方法声明中有一个隐藏的内置对象(数组),
arguments
,封装所有的实际参数。
3.1.4 调用
方法名称(实际参数列表);
3.2 Array
Array:数组对象
3.2.1 创建
var arr = new Array(元素列表);
var arr = new Array(默认长度);
var arr = [元素列表]; //常用方式
3.2.2 常用方法
方法 | 说明 |
---|---|
join(分隔符) | 将数组中的元素按照指定的分隔符拼接为字符串 |
push(数据) | 向数组的末尾添加一个或更多数据元素,并返回新的长度。 |
3.2.2 属性
length
: 代表数组的长度
3.2.3 特点
- JS中,数组元素的类型可变的。
- JS中,数组长度可变的。
3.3 Date
Date:日期对象
3.3.1 创建
var date = new Date();
3.3.2 常用方法
方法 | 说明 |
---|---|
toLocaleString() | 返回当前date对象对应的时间本地字符串格式 |
getTime() | 获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差。 |
3.4 Math
Math:数学对象
Array:数组对象
3.4.1 创建
Math
对象不用创建,直接使用。
Math.方法名();
3.4.2 常用方法
方法 | 说明 |
---|---|
random() | 返回[0,1) 之间的随机数。 含0不含1 |
ceil(x) | 对x进行上舍入 |
floor(x) | 对x进行下舍入 |
round(x) | 把x进行四舍五入为最接近的整数 |
3.4.2 属性
PI
: 表示圆周率
3.5 RegExp
RegExp:正则表达式对象
3.5.1 正则表达式
正则表达式定义字符串的组成规则。
- 单个字符:
[]
,如: [a] [ab] [a-zA-Z0-9_] - 特殊符号代表特殊含义的单个字符:
\d
:单个数字字符 [0-9]\w
:单个单词字符[a-zA-Z0-9_]
- 量词符号:
?
:表示出现0次或1次*
:表示出现0次或多次+
:出现1次或多次{m,n}
:表示 m ≤ 数 量 ≤ n m\le 数量 \le n m≤数量≤n- m如果缺省, 例如
{,n}
,表示最多n次 - n如果缺省,例如
{m,}
,表示最少m次
- m如果缺省, 例如
- 开始结束符号
^
:开始$
:结束
3.5.2 正则对象
- 创建:
//方式1
var reg = new RegExp("正则表达式");
//方式2,常用方式
var reg = /正则表达式/;
- 方法
方法 | 说明 |
---|---|
test(字符串) | 验证指定的字符串是否符合正则定义的规范 |
- 示例代码
var s1 = "yogeek1_cn";
var s2 = "yogeek1.cn";
var reg1 = /^\w{5,10}$/; //长度5-10、只包含数字、字母和下划线的字符串
//var reg2 = new RegExp("^\\w{5,10}$"); //规则与reg1相同
document.write(reg1.test(s1) + "<br>"); //true
document.write(reg1.test(s2) + "<br>");//false
3.6 Global
Global:全局对象。这个Global中封装的方法不需要对象就可以直接调用。
方法名();
3.6.1 方法
方法 | 说明 |
---|---|
encodeURI(url) | 将指定url编码并返回结果 |
decodeURI(str) | 将指定的str解码 |
encodeURIComponent(url) | 将指定url编码并返回结果,编码的字符更多 |
decodeURIComponent(str) | 将指定的str解码 |
parseInt(str) | 将字符串转为数字 |
isNaN(v) | 判断一个值是否是NaN |
eval(str) | 将字符串作为脚本代码来执行 |
注意
parseInt(str)
:逐一判断每一个字符是否是数字,直到不是数字为止,将前边数字部分转为number。如果无法转换返回NaN。
var s1 = "123abc";
var s2 = "abc123";
document.write(parseInt(s1) + "<br>"); //123
document.write(parseInt(s2) + "<br>"); //NaN
NaN
六亲不认,连自己都不认。NaN
参与的==
比较全部为false
,要判断是否为NaN
,只能用isNaN(v)
。