1.JavaScript概述
1.1 JavaScript是什么?有什么作用?
HTML:就是用来写网页的。
CSS:就是用来美化网页的。
JavaScript:JavaScript式WEB上强大的脚本语言。
脚本语言:无法独立执行。必须嵌入到其他语言中,结合使用。没有编译过程,直接被浏览器解析执行。
作用:控制页面特效展示。
例如:
- JS可以对HTML元素进行动态控制
- JS可以对表单项进行校验
- JS可以控制CSS的样式;
1.2 JavaScript入门案例
1.3 JavaScript的语言特征及编程注意事项
特征:
- JavaScript无需编译,直接被浏览器解释并执行
- JavaScript无法单独运行,必须嵌入到HTML代码中运行
- JavaScript的执行过程由上到下依次执行
注意:
- JavaScript没有访问系统文件的权限(安全)
- 由于JavaScript无需编译,是由上到下依次解释执行,所以在保证可读性的情况下,允许使用链式编程
- JavaScript和java没有任何直接关系
1.4 JavaScript的组成
- ECMAScript(核心):规定了JS的语法和基本对象。
- DOM 文档对象模型:处理网页内容的方法和接口
- BOM 浏览器对象模型:与浏览器交互的方法和接口
1.5 JavaScript的引入方式
1.5.1 内部脚本
在当前页面内部写script标签,script内部即可书写JavaScript代码
格式:
<script="text/javascript">
JavaScript的代码
</script>
示例:
<script type="text/javascript">
//JavaScript代码
</script>
注:script标签理论上可以书写在HTML文件的任意位置
1.5.2 外部引入
在HTML文档中,通过<script src="">
引入.js文件
格式:
<script type="text/javascript" src="javascript 文件路径"></script>
示例1:
<script type="text/javascript" src="demo.js"></script>
注:外部引用时script标签内不能有script代码,即使卸了也不会执行。
示例2:
<script type="text/javascript" src="demo.js">
//这部分代码不会被执行,因为被引入的demo.js代码覆盖
</script>
1.5.3 script标签规范化的放置位置
开发规范规定,script标签的放置位置为:
Body结束标签之前
优点:
- 保证html展示内容优先加载,最后加载脚本。增强用户体验性
2.JavaScript语法及规则
2.1 注释
- 单行注释
//
Hbulider快捷键 ctrl+/ - 多行注释
/* */
HBuilder快捷键 ctrl+shift+/
2.2 变量
2.2.1 变量简述
变量:标示内存中的一块空间,用于存储数据,且数据是可变的。
变量的声明:
var 变量名; //变量赋予默认值,默认值为undefined(未定义的)
变量的声明和赋值:
var 变量名=值; //变量赋予对应的值
在声明JavaScript变量时,需要遵循以下命名规范:
- 必须以字母或下划线开头,中间可以是数字、字符或下划线
- 变量名不能包含空格等符号
- 不能使用JavaScript关键字作为变量名,如:function
- JavaScript严格区分大小写
2.2.2 基本数据类型
类似于java中的基本数据类型
- string 字符串类型。"" 和’'都是字符串。JavaScript中没有单个字符。
- boolean 布尔类型。
- number 数字类型。任意数字
- null 空,一个占位符
- undefined 未定义类型,该类型只有一个固定值,即undefined,表示变量声明却未定义具体的值
注:因为undefined是从null中派生来的,所以undefined==null
JavaScript区别于java,是弱类型语言,变量的使用不用严格遵循规范,所以一个变量声明好之后,是可以赋予任意类型的值。
通过typeof运算符可以分辨变量值属于哪种基本数据类型
对变量或值调用typeof运算符将返回对应变量或值的类型。
- 如果变量是一种引用类型或Null类型的,会返回object
这是因为ECMAScript实现之初的一个bug,null属于基本数据类型,typeof(null) -> object
2.2.3 引用数据类型
引用类型通常叫做类(class),但在JavaScript中,因为不存在编译过程,所以没有类的概念,所处理的引用数据类型都是对象。
标准创建方式:
var str =new String();
var str = new String;
2.3 运算符
JavaScript运算符和Java运算符基本一致。
这里我们来寻找不同点进行学习
2.3.1 比较运算符
大体与java中比较运算符相同
除了 ==
与 ===
运算符 | 描述 |
---|---|
== | 逻辑等 |
=== | 全等(值和类型) |
==
逻辑等。仅仅对比值
===
全等。对比值并且对比类型
如果值和类型都相同,则为true;值和类型有一个不同,则为false
2.3.2 逻辑运算符
JavaScript逻辑运算符没有 & 及 |
2.4 正则对象
2.4.1 RegExp对象的创建方式
- var reg = RegExp(“表达式”); (开发中基本不用)
- var reg = /^表达式$/; 直接量(开发中常用)
直接量中存在边界,即%代表开始, $代表结束
直接量方式的正则式对象,不是字符串,别用引号
2.4.2 text方法
正则对象.test(string);
用来检验字符串是否匹配正则。
全部字符匹配返回true,由字符不匹配返回false
2.4.3 正则对象使用注意事项
/^表达式$/
只要有无法成立正则的字符存在,即为false。
全部符合为true
检查严格,适用于表单检验
/表达式/
只要有成立正则的字符存在,即为true。
全部不符合为false
检查不严格,适用于字符串查找、替换
2.5 JS数组对象
2.5.1 JS数组的特性
JS数组可以看作Java中的ArrayList集合
- 数组中的每一个成员没有类型限制,可以存放任意类型
- 数组的长度可以自动修改
2.5.2 JS数组的四种创建方式
- var arr = [1,2,3,“a”,true]; 长度5。
- var arr = new Array(); 数组长度默认为0。
- var arr = new Array(4);
数组长度是4,每个元素是undefined。 - var arr = new Array(1,2); 创建了一个数组,长度为2,数组元素是1,2
2.5.3 JS数组的常用方法
length | 设置或返回数组中元素的数目。 |
---|---|
join() | 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 |
pop() | 删除并返回数组的最后一个元素 |
push() | 向数组的末尾添加一个或更多元素,并返回新的长度。 |
reverse() | 颠倒数组中元素的顺序。 |
2.6 全局函数(global)
2.6.1 执行
eval()
计算JavaScript字符串,并把它作为脚本代码来执行。
注:只可以传递原始数据类型string,传递String对象无作用。
2.6.2 编码和解码
URL编码:中文及特殊符号 -> %16进制
URL编码作用:保证数据传递的完整性
encodeURI | 把字符串编码为URI |
---|---|
decodeURI() | 解码某个编码的URI |
2.6.3 URI和URL的区别
URI是统一资源标识符。标识资源详细名称
URL是统一资源定位器。定位资源的网络位置
资源:可以通过浏览器访问的信息统称为资源。(图片、文本、HTML、CSS等等)
URI标识资源的详细名称,包含资源名。
URL定位资源的网络位置。包含http://
例如:
http://www.baidu.com/ 是URL
/a.html 是URI
http://www.baidu.com/a.html 即时URI也是URL
2.6.4 字符串转数字
parseInt() | 解析一个字符串并返回一个整数 |
---|---|
parseFloat() | 解析一个字符串并返回一个浮点数。 |
注:
- 如果字符串的某个字符从字面值上无法转为数字,那么从该字符开始停止转换,仅返回前面正确的转换值(例如:11.5a55,parseInt结果为11,parseFloat结果为11.5)
- 如果字符串的第一个字符就无法从字面值上转为数字,那么停止转换,返回NaN
NaN(Not A Number,一个数字类型的标识,表示不是一个正确的数字)
2.7 自定义函数/自定义方法
2.7.1 函数简述及作用
如果一段代码需要被重复编写使用,那么我们为了方便统一编写使用,可以将其封装进一个函数(方法)中。
作用:增强代码的复用性
2.7.2 函数格式
function 方法名(参数列表){
函数体
}
- JavaScript函数定义必须用小写的function
- JavaScript函数无需定义返回值类型,直接在function后面书写方法名;
- 参数的定义无需使用var关键字,否则报错;
- JavaScript函数体中,return可以不写,也可以return具体值,或者仅仅写return;
2.7.3 函数使用的注意事项
JavaScript函数调用执行完毕一定由返回值,值及类型根据return决定,如果未return具体值,返回值未undefined;
JavaScript函数若同名,则不存在方法重载,只有方法相互覆盖,最后定义的函数覆盖之前的定义;
因为JavaScript不存在函数重载,所以JavaScript仅根据方法名来调用函数,即使实参与函数的形参不匹配,也不会影响正常使用;
如果形参未赋值,就使用默认值undefined
2.8 自定义对象
2.8.1 function构造函数
我们知道,JavaScript中的引用数据类型都是对象,而对象在JavaScript中可以用函数来表示。
相当于java中创建某个class类
- 无形参格式:
function 对象名(){
函数体
} - 带参数格式:
function 对象名(参数列表){
函数体
} - 带属性的:
function 对象名(){
this.属性名1=属性值1;
this.属性名2=属性值2;
……
}
this表示当前对象 - function 对象名(name,age){
this.name = name;
this.age = age;
} - 无需定义,自由为对象赋予属性及值
function Pony(){
}
var p = new Pony();
p.name = “Rarity”;
p.age = 15;
alert(p.name + “—” + p.age);
应用场景:适用于对象构建及代码复用
2.8.2 对象直接量
开发中可以用一种简单的方式直接创建自定义的JavaScript对象,这种方式称为“对象直接量”。
格式:
var 对象名 = {属性名1:"属性值1",属性名2:"属性值2"……};
该方式直接创建出实例对象,无需构建函数,无需再new创建实例对象,直接使用即可
应用场景:适用于快速创建实例对象及数据封装
3.BOM对象
3.1 BOM对象简述
3.1.1 BOM对象是什么?有什么作用?
BOM(Browser Object Model)浏览器对象模型
浏览器:IE、火狐、谷歌等
作用:用来执行浏览器的相关操作。(例如:浏览器的地址、弹出消息等)
一般情况下,window代表了BOM对象
window对象是JavaScript的内置对象,使用window对象调用方法时可以省略window不写。
3.2 消息框
3.2.1 alert()
警告框,用来弹出警告消息
注:不同浏览器显示的组件样式不同,这里我们无需关注组件样式。
3.2.2 confirm()
确认框,用于告知用户并收集用户的选择
有返回值,boolean类型
点击确定–> true
点击取消–> false
示例1:
confirm("确认 或者 取消");
3.3 定时器
3.3.1 循环定时器的设置和取消
3.3.1.1 启动循环定时器-setInterval()
循环定时器,调用一次就会创建并循环执行一个定时器。
返回该循环定时器的id
格式:
setInterval(调用方法,毫秒值);
示例:
function run1(){
alert("我是run1");
}
setInterval("run1()",1000);
可以通过clearInterval(id);
来停止循环
练习:两秒后输出一次 “我是run1”
var id;
function run1(){
alert("我是run1");
clearInterval(id);
}
id = setInterval("run1()",2000);
3.3.2.1 启动一次性定时器-setTimeout()
一次性定时器,调用一次就会创建并执行一个定时器一次。
返回该一次性定时器的id
格式:
set Timeout(调用方法,毫秒值);
示例:
function run1(){
alert("我是run1");
}
setTimeout(run1(),1000);
3.4 location对象
location对象包含浏览器 地址栏 的信息。
常用属性:
href | 设置或返回完整的URL。 |
---|
设置href属性,浏览器就会跳转到对应的路径。
location.href="https://www.baidu.com";
练习:两秒后跳转到www.baidu.com
function run1(){
location.href = "http://www.baidu.com";
}
setTimeout(run1,2000)
4. DOM对象
4.1 DOM对象的简述
4.1.1 DOM对象是什么?有什么作用?
DOM(Document Object Model) 文档对象模型
文档:标记型文档(HTML等)
DOM是将标记型文档中所有内容(标签、文本、属性)都封装成对象,通过操作对象的属性或者方法,来达到操作或者改变HTML展示效果的目的。
4.1.2 DOM树介绍
<html>
<head>
<title>文档标题</title>
</head>
<body>
<a href="">我的链接</a>
<h1>我的标题</h1>
</body>
</html>
上述HTML文档会被浏览器由上到下依次加载并解析。
加载到浏览器的内存
就形成了下面的树
其中:
- 每个标签会被加载成DOM数上的一个元素节点对象
- 每个标签的属性会被加载成DOM树上的一个属性节点对象
- 每个标签的内容体会被加载成DOM树上的一个文本节点对象
- 整个DOM树,是一个文档节点对象,即DOM对象
- 一个HTML文档加载到内存中就会形成一个DOM对象
DOM树的特点:
- 必定会有一个根节点
- 每个节点都是节点对象
- 常见的节点关系:父子节点关系
- 文本节点对象没有子节点—叶子节点
- 每个节点都有一个父节点,零到多个子节点
- 只有根节点没有父节点
4.2 获取元素对象的四种方式
在JavaScript中,我们可以通过DOM对象的4种方式获取对应的元素对象:
- getElementById(); --通过元素ID获取对应元素对象
可以通过ID获取对应的元素对象,如果找不到,则返回null - getElementByName(); --通过元素的name属性获取符合要求的所有元素
可以通过name属性,获取到元素节点对象数组。
如果找不到,返回空数组 - getElementByTagName(); --通过元素的元素名属性获取符合要求的所有元素
- getElementByClassName(); --通过元素的class属性获取符合要求的所有元素
获取元素节点对象,必须保证元素节点对象被先加载到内存中。
4.3 元素对象常见属性
4.3.1 value
元素对象.value,获取元素对象的value属性值
元素对象.value=属性值 设置元素对象的value属性值。
4.3.2 className
元素对象.className,获取元素对象的class属性值
元素对象.className=属性值 设置元素对象的class属性值
修改元素样式
4.3.3 checked
元素对象.checked,获取元素对象的checked属性值。
元素对象.checkde=属性值 设置元素对象的checked属性值。
注:HTML中checked=“checked”,JavaScript中返回true
修改单选/复选的选中与否
4.3.4 innerHTML
元素对象.innerHTML,获取元素对象的内容提
元素对象.innerHTML=值,设置元素对象的内容体
操作元素的内容体
5.JS事件
5.1 JS事件是什么?有什么作用?
通常鼠标或热键的动作我们称之为事件(Event)
点击、表单提交、值发生改变、鼠标移入、鼠标移出
通过JS事件,我们可以完成页面的指定特效。
5.2 JS事件驱动机制简述
页面上的特效,我们可以理解在JS事件驱动机制下进行。
JS事件驱动机制:
- 事件源
- 事件
- 监听器
- 注册/绑定监听器
事件源:专门产生事件的组件。
事件:由事件原所产生的动作或者事情。
监听器:专门处理事件源所产生的事件。
注册/绑定监听器:让监听器时刻监听事件源是否有指定事件产生,如果事件源产生指定事件,则调用监听器处理。
5.3 常见JS事件
5.3.1 点击事件(onclick)
点击事件:由鼠标或热键点击元素组件时触发
示例:
<input type="text" value="点击" onclick="click1()"/>
<script>
function click1(){
alert("点击了");
}
</script>
5.3.2 焦点事件(onblur,onfocus)
5.3.2.1 获取焦点事件(onfocus)
焦点:即整个页面的注意力
默认一个正常页面最多仅有一个焦点。
例如:文本框中闪烁的小竖线。
通常焦点也能反映出用户目前的关注点,或者正在操作的组件。
获取焦点事件:当元素组件获取焦点时触发
5.3.2.2 失去焦点事件(onblur)
5.3.3 域内容改变事件(onchange)
域内容改变事件:元素组件的值发生改变时触发
5.3.4 加载完毕事件(onload)
加载完毕事件:元素组件加载完毕时触发。
5.3.5 表单提交事件(onsubmit)※※※
表单提交事件:表单的提交按钮被点击时触发
主要用于表单校验,如果数据正确即onsubmit取到true,就允许表单提交,如果不正确就阻止表单提交
5.3.6 键位弹起事件(onkeyup)
键位弹起事件:在组件中输入某些内容时,键盘键位弹起时触发该事件
5.3.7 常用鼠标事件
5.3.7.1 鼠标移入事件(onmouseover)
鼠标移入事件:鼠标移入某个元素组件时触发
5.3.7.2 鼠标移出事件(onmouse)
5.4 JS事件的两种绑定方式
5.4.1 元素事件句柄绑定
将事件以元素属性的方式写到标签内部,进而绑定对应函数
事件句柄绑定方式
- 优点
①开发快捷
②传参方便
③ 可以绑定多个函数 - 缺点
JS和HTML代码高度糅合在一起,不利于多部门的项目开发维护
5.4.2 DOM绑定方式
- 优点
使得HTML代码和JS代码完全分离 - 缺点
① 不能传递参数 (已解决:使用匿名函数)
② 一个事件只能绑定一个函数 (已解决:匿名函数内部是可以绑定多个函数)