JavaScript
- 概念:一门客户端脚本语言
- 运行在客户端浏览器中的。每一个浏览器都有]avascript的解析引擎*脚本语言:不需要编译,直接就可以被浏览器解析执行了
- 功能︰
- 可以来增强用户和html页面的交互过程,可以来控制html元素,让页面有一些动态的效果,增强用户的体验
- 发展史
- 1992年,Nombase公司,开发出第一门客户端脚本语言,专门用于表单的校验。命名为∶C–,后来更名为:scriptEase
- 1995年,Netscape(网景)公司,开发了一门客户端脚本语言:LiveScript。后来,请来SUN公司的专家,修改LiveScript,命名为Javascript
- 1996年,微软抄袭Javascript开发出Jscript语言
- 1997年,ECMA(欧洲计算机制造商协会),ECNAScript,就是所有客户端脚本语言的标准。
- javascript = ECMAScript + Javascript自己特有的东西(BOM+DOM)
基本语法
-
与
html
结合方式- 内部 JS:
- 定义
<script>
标签,标签内代码就是js
执行代码
- 定义
- 外部JS:
<script src="">
通过 src 引入外部js
脚本文件
- 注意:
<script>
标签可以定义在 html 页面任意位置,但是定义的位置会影响执行顺序<script>
标签可以定义多个
- 内部 JS:
-
注释
- // 单行注释
- /* 多行注释 */
-
数据类型
- 原始数据类型(基本数据类型)
- number:数字, 整数 / 小数 / NaN
- string:字符串, ‘a’, “abc”, ‘abc’
- boolean:true 和 false
- null:一个对象为空的占位符
- 注意:
typeof(null) == object
- 注意:
- undefined:未定义。如果一个变量没有初始化值,就默认赋值为 undefined
- 引用数据类型(对象)
- 原始数据类型(基本数据类型)
-
变量: 小块存储数据的内存空间
- java 语言是强类型语言,而 Javascript 是弱类型语言。
- 强类型∶在开辟变量存储空间时,定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
- 弱类型∶在开辟变量存储空间时,不定义空间将来的存储数据类型,可以存放任意类型的数据。
- 语法︰
var变量名=初始化值;
- java 语言是强类型语言,而 Javascript 是弱类型语言。
-
运算符
-
基本同 java
-
==
比较规则:- 如果一个运算数是 Boolean 值,在检查相等性之前,把它转换成数字值。false 转换成 0,true 为 1。
- 如果一个运算数是字符串,另一个是数字,在检查相等性之前,要尝试把字符串转换成数字。
- 如果一个运算数是对象,另一个是字符串,在检查相等性之前,要尝试把对象转换成字符串。
- 如果一个运算数是对象,另一个是数字,在检查相等性之前,要尝试把对象转换成数字。
在比较时,该运算符还遵守下列规则:
- 值 null 和 undefined 相等。
- 在检查相等性时,不能把 null 和 undefined 转换成其他值。
- 如果某个运算数是 NaN,等号将返回 false,非等号将返回 true。
- 如果两个运算数都是对象,那么比较的是它们的引用值。如果两个运算数指向同一对象,那么等号返回 true,否则两个运算数不等。
-
示例:
null == undefined true "NaN" == NaN false 5 == NaN false NaN == NaN false NaN != NaN true false == 0 true true == 1 true true == 2 false undefined == 0 false null == 0 false "5" == 5 true
-
全等号
===
和非全等号!==
-
等号和非等号的同类运算符是全等号和非全等号。这两个运算符所做的与等号和非等号相同,只是它们在检查相等性前,不执行类型转换。
全等号由三个等号表示(===),只有在无需类型转换运算数就相等的情况下,才返回 true。
var sNum = "66"; var iNum = 66; alert(sNum == iNum); //输出 "true" alert(sNum === iNum); //输出 "false"
-
-
比较运算符:
-
字符串比较按照字典序比较
-
如果将字符串与数字进行比较,那么在做比较时 JavaScript 会把字符串转换为数值。空字符串将被转换为 0。非数值字符串将被转换为始终为 false 的 NaN。
2 < 12 true 2 < "12" true 2 < "Bill" false 2 > "Bill" false 2 == "Bill" false "2" < "12" false "2" > "12" true "2" == "12" false
-
-
转 boolean 规则
Undefined false Null false Boolean 结果等于输入的参数(不转换) Number 如果参数为 +0, -0 或 NaN,则结果为 false;否则为 true。 String 如果参数为空字符串,则结果为 false;否则为 true。 Object true
-
-
流程控制
switch
:可以接受任意类型变量- 其他和
java
一样
特殊语法
-
一行只有一条语句时,行末分号可以省略(不建议使用)
-
定义变量可以用
var
关键字,也可以不用- 用: 定义的是局部变量
- 不用:定义的是全局变量(不建议使用)
基本对象
Function
-
创建
var fun = new Function("形参列表", "方法体");
不用function 方法名(形参列表) { 方法体 }
var fun = function(形参列表) { 方法体 }
-
属性:
length
: 形参的个数
-
特点
-
方法定义时,形参类型名可以不写,返回值类型不写
-
方法是一个对象,定义名称相同的方法时,后一个方法会覆盖前一个方法
function fun1(a, b) { alert(a + b);}function fun1(a, b) { alert(a - b);}fun1(3, 4); // -1
-
方法调用只与方法名有关,参数列表可以不匹配
function fun4(a, b) { document.write(a + " " + b + "<br>");}fun4(3); // 3 undefinedfun4(3, 4); // 3 4 fun4(3, 4, 5); // 3 4
-
方法中有一个
arguments
对象,是一个数组,储存了所有传进来的参数// 求任意个数的和function add() { var sum = 0; for (var i = 0; i < arguments.length; i++) { sum += arguments[i]; } return sum;}
-
Array
-
创建
var arr = new Array(元素列表);
var arr = new Array(元素列表);
var arr = [元素列表];
- 可跨行,但不要在最后一个元素后加逗号
- 执行效率更高
-
方法
join(String type)
: 将数组中元素按照传入的字符串作为分隔符,拼接成字符串,默认是一个逗号push()
: 向数组尾部加入一个元素,并返回新的长度- 参考手册
-
属性
length()
数组的长度
-
特点
- 数组中元素类型可变
- 数组长度可变
Date
- 创建
var date = new Date()
- 方法
toLocaleString()
: 根据本地时间格式,把 Date 对象转换为字符串。getTime()
: 返回 1970 年 1 月 1 日至今的毫秒数。- 参考手册
Math
- 创建
- 不用创建,
Math.方法()
直接调用
- 不用创建,
- 方法
Math.random()
: 产生 [0, 1) 之间的随机数Math.cell()
:上取整Math.floor()
:下取整Math.round()
:四舍五入- 参考手册
RegExp
- 正则表达式
-
对象
- 创建
var reg = new RegExp("正则表达式")
注意: 字符串中,\\
才是一个\
var reg = /正则表达式/
- 建议:
- 正则表达式以
^
开始,$
结尾。 如:^正则表达式$
- 一般用第二种方式创建正则表达式
- 正则表达式以
- 方法
reg.test(string s)
: 验证 s 是否符合正则表达式,返回 Boolean
- 创建
Global
-
特点:全局对象,其中封装的方法不需要对象名就可以直接调用,即
方法名()
-
方法:
-
decodeURI()
解码 URI。
decodeURIComponent()
解码 URI 组件。 编码的字符更多 -
encodeURI()
对 URI 进行编码。
encodeURIComponent()
对 URI 组件进行编码。 编码的字符更多 -
parseInt()
: 将字符串转为数字- 逐一判断每个字符是否是数字,直到不是数字为止,将前面是数字的部分返回
- 如果不能转成数字,返回
NaN
-
isNaN()
: 判读是否是NaN
- 注意: 因为
NaN == NaN
会返回false
- 注意: 因为
-
eval(string s)
: 将字符串解析成js
代码来执行var js = "alert(123);"; eval(js);
-
DOM
-
概念:
- Document object Model 文档对象模型。将标记语言文档的各个组成部分,封装为对象。可以使用这些对象,对标记语言文档进行 CRUD 的动态操作
-
W3C DOM标准分为 3 个部分
- 核心DOM -针对任何结构化文档的标准模型
- Document :文档对象
- Element :元素对象
- Attribute :属性对象
- Text :文本对象
- comment:注释对象
- Node :节点对象,其他5个的父对象
- XML DOM: 针对XML文档的标准模型
- HTML DOM:针对HTML文档的标准模型
- 核心DOM -针对任何结构化文档的标准模型
-
功能:控制
html
文档的内容
Document
- 创建:
- document.
- 方法:
- 获取 Element 对象:
document.getElementById(String id)
: 通过元素 id 获取元素对象,id一般唯一getElementsByTagName()
:根据元秦名称获取元秦对象们。返回值是一个数组getElementsByclassName()
:根据class属性值获取元秦对象们。返回值是一个数组getElementsByName()
:根据name属性值获取元素对象们。返回值是一个数组
- 创建其他 DOM 对象:
- createAttribute(name)
- createComment()
- createElement()
- createTextNode()
- XML DOM 参考手册
- HTML DOM 参考手册
- 获取 Element 对象:
Element
-
修改属性值
- 明确获取的对象 (by id)
- 查看API文档, 找其中有哪些属性值可以设置
-
修改标签体内容
-
innerHTML
<h1 id="title"> 悔创阿里杰克马 </h1>var title = document.getElementById("title");alert("change title");title.innerHTML = "不识妻美刘强东";
-
修改属性
<a> 点我 </a><script> var btn_del = document.getElementById("btn_del"); btn_del.onclick = function () { var ele_a = document.getElementsByTagName("a")[0]; ele_a.removeAttribute("href"); }</script>
-
Node
- 特点:所有 DOM 对象都可以被认为是一个节点
- 方法:
- CURD DOM树:
- appendChild() 向节点的子节点列表的结尾添加新的子节点。
- removeChild() 删除(并返回)当前节点的指定子节点。
- replaceChild() 用新节点替换一个子节点。
- CURD DOM树:
HTML DOM
-
标签体的设置和获取: innerHTML
-
使用html元秦对象的属性
-
控制元秦样式
-
使用元素的style属性来设置
div1.style.border = "1px solid red";div1.style.width = "200px";
-
提前定义好类选择器,通过设置元素的
className
设置 class 属性值.d1 { border: 1px solid red; width: 100px; height: 100px;}div2.className = "d1";
-
事件
-
事件:一个操作:如 点击,鼠标悬浮等
-
事件源:组件 如:按钮 ,输入框等
-
监听:代码
-
注册监听:将事件,事件源,监听器绑定,事件源上发生对应事件后,触发代码执行
-
功能:某些组件被执行了某个操作后,触发了一段代码的执行
-
如何绑定事件:
-
直接在
html
标签上指定事件属性,属性值就是js
代码<img id="light" src="imgs/light_off.png" onclick="alert('单击')"/>
-
通过
js
获取对象,指定事件属性,绑定一个函数function fun2() { alert("click");}var light2 = document.getElementById("light2");light2.onclick = fun2; // 函数没有括号!
-
-
事件分类
BOM
- Browser Object Model 浏览器对象模型
- 将浏览器各个组份封装成对象
- 组成:
- Window: 窗口对象
- Navigator :浏览器对象
- Screen:显示器屏幕对象
- History:历史记录对象
- Location:地址栏对象
window
-
属性:
- 获取其他 BOM 属性
- history
- Navigator
- Screen
- location
- 获取 DOM 属性
- document.getElementById
- 获取其他 BOM 属性
-
方法:
-
与弹出窗口有关:
-
alert()
显示带有一段消息和一个确认按钮的警告框。 -
confirm()
显示带有一段消息以及确认按钮和取消按钮的对话框。- 用户点击确定,则方法返回 true
- 用户点击取消,则方法返回 false
-
prompt()
显示可提示用户输入的对话框。- 返回用户输入的值
-
-
与打开关闭有关
open()
打开一个新的浏览器窗口或查找一个已命名的窗口。- 返回一个新窗口的
window
对象
- 返回一个新窗口的
close()
关闭调用者浏览器窗口。
-
与定时器有关
setInterval()
按照指定的周期(以毫秒计)来调用函数或计算表达式。- 参数一:
js
代码段或函数方法 - 参数二:时间毫秒值
- 返回一个对象
- 参数一:
clearInterval()
取消由 setInterval() 设置的 timeout。- 可以传入一个对象,指定要取消的周期定时器
setTimeout()
在指定的毫秒数后调用函数或计算表达式。- 参数一:
js
代码段或函数方法 - 参数二:时间毫秒值
- 返回一个对象
- 参数一:
clearTimeout()
取消由 setTimeout() 方法设置的 timeout。- 可以传入一个对象,指定要取消的定时器
-
-
特点:
- 可以直接用方法名调用方法
- 可以用
window.方法名()
调用方法
Location
- 地址栏对象
- 创建
window.location
location
- 方法:
reload()
刷新
- 属性
href
History
- 创建
- history
- 方法
- back() 加载 history 列表中的前一个 URL。
- forward() 加载 history 列表中的下一个 URL。
- go() 加载 history 列表中的某个具体页面。
- 参数:
- 正数:前进几个历史页面
- 负数:后退几个历史页面
- 参数:
- 属性
- length 返回当前窗口历史列表中的 URL 数量。
- [参考手册](