一、JavaScript概述
JavaScript是什么?有什么作用?
HTML:就是用来写网页的。 人的身体
CSS: 就是用来美化页面的。 人的衣服
JavaScript:前端大脑、灵魂。 人的大脑、灵魂
JavaScript是WEB上强大的脚本语言。
脚本语言:
无法独立执行。必须嵌入到其他语言中,结合使用。
直接被浏览器解析执行。
Java编程语言:
独立写程序,独立运行。 编译---执行
作用:控制页面特效展示。
例如:
a.JS可以对HTML元素进行动态控制
b.JS可以对表单项进行校验
c.JS可以控制CSS的样式;
2、JavaScript的语言特征及编程注意事项
特征:
a.JavaScript无需编译,直接被浏览器解释并执行
b.JavaScript无法单独运行,必须嵌入到HTML代码中运行
c.JavaScript的执行过程由上到下依次执行
注意:
a.JavaScript没有访问系统文件的权限(安全)
b.由于JavaScript无需编译,是由上到下依次解释执行,所以在保证可读性的情况下,允许使用链式编程
c.JavaScript和java没有任何直接关系
3、JavaScript的组成
a.ECMAScript (核心):规定了JS的语法和基本对象。
b.DOM 文档对象模型:处理网页内容的方法和接口标记型文档。HTML
c.BOM 浏览器对象模型:与浏览器交互的方法和接口
4、内部脚本
在当前页面内部写script标签,script内部即可书写JavaScript代码
格式:
<script type=”text/javascript”>
JavaScript的代码
</script>
注:script标签理论上可以书写在HTML文件的任意位置
外部引入
在HTML文档中,通过<script src=””>标签引入.js文件
格式:
<script type=”text/javascript” src=”javascript文件路径” ></script>
注:外部引用时script标签内不能有script代码,即使写了也不会执行。
5、script标签规范化的放置位置(了解)
开发规范规定,script标签的放置位置为:Body结束标签前。
优点:
保证html展示内容优先加载,最后加载脚本。 增强用户体验性
二、JavaScript语法及规则
1、注释
单行注释
//
Hbuilder快捷键 ctrl+/
多行注释
/* */
Hbuilder快捷键 ctrl+shift+/
2、变量
a、变量简述
变量:标示内存中的一块空间,用于存储数据,且数据是可变的。
变量的声明:
var 变量名; //变量赋予默认值,默认值为undefined (未定义的)
变量的声明和赋值:
var 变量名=值; //变量赋予对应的值
在声明JavaScript变量时,需要遵循以下命名规范:
1.必须以字母或下划线开头,中间可以是数字、字符或下划线
2.变量名不能包含空格等符号
3.不能使用JavaScript关键字作为变量名,如:function、this、class
5.JavaScript严格区分大小写。
3、基本数据类型
类似于java中的基本数据类型
a.string 字符串类型。””和’’都是字符串。 JavaScript中没有单个字符
b.boolean 布尔类型。 固定值为true和false
c.number 数字类型。 任意数字
d.null 空,一个占位符。
e.undefined 未定义类型,该类型只有一个固定值,即undefined,表示变量声明却未 定义具体的值。
注:因为undefined是从null中派生出来的,所以undefined==null
JavaScript区别于java,是弱类型语言,变量的使用不用严格遵循规范,所以一个变量声明好之后,是可以赋予任意类型的值。
通过typeof运算符可以分辨变量值属于哪种基本数据类型
ECMAScript实现之初的一个bug,null属于基本数据类型,typeof(null)--object
4、引用数据类型
引用类型通常叫做类(class),但在JavaScript中,因为不存在编译过程,所以没有类的概念,所处理的引用数据类型都是对象。
标准创建方式:
var str = new String();//和java相同
var str = new String; //js独有的方式
5、运算符
JavaScript运算符与Java运算符基本一致。
这里我们来寻找不同点进行学习
a.比较运算符
== 逻辑等。仅仅对比 值
=== 全等。 对比值并且对比类型。
如果值和类型都相同,则为true;值和类型有一个不同,则为false
6、逻辑运算符
注:JavaScript逻辑运算符没有 & |
7、正则对象
a.RegExp对象的创建方式
a.var reg = new RegExp("表达式");(开发中基本不用)
b.var reg = /^表达式$/; 直接量(开发中常用)
直接量中存在边界,即^代表开始,$代表结束
直接量方式的正则是对象,不是字符串,别用引号
b.test方法
正则对象.test(string);用来校验字符串是否匹配正则。
全部字符匹配返回true;有字符不匹配返回false
c.正则对象使用注意事项
/^表达式$/
只要有无法成立正则的字符存在,即为false。
全部符合为true(检查严格,眼睛不揉沙子)适用于校验
/表达式/
只要有成立正则的字符存在,即为true。全部不符false
(检查不严格,懒人思想)适用于字符串查找、替换
8、JS数组对象
1、JS数组的特性
JS数组可以看做 Java中的ArrayList 集合。
a.数组中的每一个成员没有类型限制,及可以存放任意类型
b.数组的长度可以自动修改
2、JS数组的四种创建方式
a.var arr = [1,2,3,”a”,true]; //常用的JS数组。 长度5
b.var arr = new Array();创建一个数组对象,数组长度默认为0
3.var arr = new Array(4);
数组长度是4,相当于开辟了长度为4的空间,每个元素是undefined。
(仅在显示数组时进行处理,undefined为了方便显示变成了空字符串形式,其值本质仍然是undefined)
4.var arr = new Array(“a”,”b”,true); //创建了一个数组,长度3, 数组元素是”a”,”b”,true
9、JS数组的常用属性/方法
a.length 设置或返回数组中元素的数目
b.join() 把数组的所有元素放入一个字符串,元素通过指定的分隔符进行分割
c.pop() 删除并返回数组的最后一个元素
d.push() 向数组的末尾添加一个或更多元素,并返回新的长度
e.reverse() 颠倒数组中元素的顺序 物理翻转:就是把元素下标进行互换
10、全局函数(global)
1、执行
作用:用于增强程序的扩展性。
注:只可以传递原始数据类型string,传递String对象无作用。
2、编码和解码
URL/URI编码:中文及特殊符号 %16进制
作用:保证数据传递的完整性。
3、URI和URL的区别
URI是统一资源标识符。 标识资源详细名称。
URL是统一资源定位器。 定位资源的网络位置。
资源:可以通过浏览器访问的信息统统称为资源。(图片、文本、HTML、CSS等等。。。。)
URI标识资源的详细名称,包含资源名。
URL定位资源的网络位置。包含http://
4、字符串转数字
parseInt(string); string按照字面值转换为整数类型,小数点后面部分不关注。
parseFloat(string); string按照字面值转换为小数类型。
注:
a.如果字符串的某个字符从字面值上无法转为数字,那么从该字符开始停止转换,仅返回前面正确的转换值。
(例如:11.5a55,parseInt结果11,parseFloat结果11.5)
b.如果字符串的第一个字符就无法从字面值上转为数字,那么停止转换,返回NaNNaN
(Not A Number,一个数字类型的标识,表示不是一个正确的数字)
三、自定义函数/自定义方法
1、函数简述及作用
如果一段代码需要被重复编写使用,那么我们为了方便统一编写使用,可以将其封装进一个函数(方法)中。
作用:增强代码的复用性
2、函数格式
a.JavaScript函数定义必须用小写的function;
b.JavaScript函数无需定义返回值类型,直接在function后面书写 方法名;
c.参数的定义无需使用var关键字,否则报错;
d.JavaScript函数体中,return可以不写,也可以return 具体值,或者仅仅写return;
3、函数使用的注意事项
JavaScript函数调用执行完毕一定有返回值,值及类型根据return决定,如果未return具体值,返回值为undefined;
JavaScript函数若同名,则不存在方法重载,只有方法相互覆盖,最后定义的函数覆盖之前的定义;
因为JavaScript不存在函数重载,所以JavaScript仅根据方法名来调用函数,即使实参与函数的形参不匹配,也不会影响正常调用;
如果形参未赋值,就使用默认值undefined
4、自定义对象
a.function构造函数
我们知道,JavaScript中的引用数据类型都是对象,而对象在JavaScript中可以用函数来表示。
相当于java中创建某个class类
b.无形参格式:
function 对象名(){
函数体
}
c.带参数格式:
function 对象名(参数列表){
函数体
}
d.有属性格式:
function 对象名(){
this.属性名1=属性值1;
this.属性名2=属性值2;
…….
}
this表示当前对象。
5、对象直接量
开发中可以用一种简单的方式直接创建自定义的JavaScript对象,这种方式称为“对象直接量”。
格式:
var 对象名 = {属性名1:”属性值1”, 属性名2:”属性值2”, 属性名3:”属性值3”……};
注:该方式直接创建出实例对象,无需构建函数,无需再new创建实例对象,直接使用即可
四、BOM对象
1、BOM对象简述
a.BOM对象是什么?有什么用?
BOM(Browser Object Model)浏览器对象模型
浏览器:IE、火狐、谷歌等
作用:用来执行浏览器的相关操作。(例如:浏览器的地址、弹出消息等)
一般情况下,window代表了BOM对象。
window对象是JavaScript的内置对象,使用window对象调用方法时可以省略window不写。
2、消息框
a、alert()警告框,用来弹出警告消息。
注:不同浏览器显示的组件样式不同,这里我们无需关注组件样式。
b、confirm()
确认框,用于告知用户信息并收集用户的选择
3、定时器
a、循环定时器的设置和取消
b、启动循环定时器-setInterval()
循环定时器,调用一次就会创建并循环执行一个定时器。
格式:
setInterval(调用方法,毫秒值);
//毫秒值: 循环周期
c、停止循环定时器-clearInterval()
setInterval方法在创建一个定时器的同时,还会返回一个的定时器的ID,该ID就代表这个定时器。此定时器ID在当前页面是不重复的。
我们可以通过clearInterval方法,指定某个循环定时器 停止
格式:
clearInterval(定时器ID);
4、一次性定时器的设置和取消
a、启动一次性定时器-setTimeout()
一次性定时器,调用一次就会创建并执行一个定时器一次。
格式:
setTimeout(调用方法,毫秒值);
b、停止一次性定时器clearTimeout()
setTimeout方法在创建一个定时器的同时,还会返回一个的定时器的ID,该ID就代表这个定时器。
此定时器ID在当前页面是不重复的。
我们可以通过clearTimeout方法,指定某个一次性定时器 停止
格式:
clearTimeout (定时器ID);
5、location对象
location 对象包含浏览器 地址栏 的信息。
常用属性:href 设置或返回完整的URL
设置href属性,浏览器就会跳转到对应的路径
五、DOM对象
1、DOM对象的简述
a、DOM对象是什么?有什么作用?
DOM(Document Object Model) 文档对象模型
文档:标记型文档(HTML等)
DOM是将标记型文档中所有内容(标签、文本、属性)都封装成对象,
通过操作对象的属性或者方法,来达到操作或者改变HTML展示效果的目的。
2、DOM树介绍
HTML文档会被浏览器 由上到下依次 加载并解析。加载到浏览器的内存
加载并解析到内存中,会生成一张DOM树
其中:
a.每个标签会被加载成 DOM树上的一个元素节点对象。
b.每个标签的属性会被加载成DOM树上的一个属性节点对象
c.每个标签的内容体会被加载成DOM树上的一个文本节点对象
d.整个DOM树,是一个文档节点对象,即DOM对象。
e.一个HTML文档加载到内存中就会形成一个DOM对象
DOM树的特点:
a.必定会有一个根节点
b.每个节点都是节点对象
c.常见的节点关系:父子节点关系
d.文本节点对象没有子节点---叶子节点
e.每个节点都有一个父节点,零到多个子节点
f.只有根节点没有父节点
3、获取元素对象的四种方式
在JavaScript中,我们可以通过DOM对象的4种方式获取对应的元素对象:
a.getElementById(); ---通过元素ID获取对应元素对象
可以通过ID获取对应的元素对象,如果找不到,返回null
b.getElementsByName(); ---通过元素的name属性获取符合要求的所有元素
c.getElementsByTagName(); ---通过元素的元素名属性获取符合要求的所有元素
d.getElementsByClassName(); ---通过元素的class属性获取符合要求的所有元素
可以获取到元素节点对象 数组;如果找不到,返回 空数组
注:获取某个/某些元素节点对象,必须保证元素节点对象被先加载到内存中
4、元素对象常见属性
a、value
元素对象.value, 获取元素对象的value属性值。
元素对象.value=属性值 设置元素对象的value属性值。修改元素的值
b、className
元素对象.className, 获取元素对象的class属性值。
元素对象. className =属性值 设置元素对象的class属性值。修改元素样式
5、checked
元素对象.checked, 获取元素对象的checked属性值。
元素对象. checked =属性值 设置元素对象的checked属性值。
注:HTML中checked=”checked”,JavaScript中返回true,false
修改单选/复选的 选中与否
6、innerHTML
元素对象.innerHTML, 获取元素对象的内容体
元素对象.innerHTML=值 设置元素对象的内容体 操作元素的内容体
六、JS事件
1、JS事件是什么?有什么作用?
通常鼠标或热键的动作我们称之为事件(Event)
事件包括:点击、表单提交、值发生改变、鼠标移入、鼠标移出等等
通过JS事件,我们可以完成页面的指定特效。
2、JS事件驱动机制简述
页面上的特效,我们可以理解在JS事件驱动机制下进行。
JS事件驱动机制:
警察抓小偷
事件源 小偷
事件 偷东西
监听器 警察
注册/绑定监听器 让警察时刻盯着小偷
事件源:专门产生事件的组件。
事件:由事件源所产生的动作或者事情。
监听器:专门处理 事件源 所产生的事件。
注册/绑定监听器:让监听器时刻监听事件源是否有指定事件产生,如果事件源产生指定事件,则调用监听器处理。
3、常见的JS事件
a、点击事件(onclick)
点击事件:由鼠标或热键点击元素组件时触发
b、焦点事件(onblur、onfoucs)
4、获取焦点事件(onfocus)
焦点:即整个页面的注意力。
默认一个正常页面最多仅有一个焦点。
例如:文本框中闪烁的小竖线。
通常焦点也能反映出用户目前的关注点,或者正在操作的组件。
获取焦点事件:当元素组件获取焦点时触发
5、失去焦点事件(onblur)
失去焦点事件:元素组件失去焦点时触发
6、域内容改变事件(onchange)
域内容改变事件: 元素组件的值发生改变时触发
7、加载完毕事件(onload)
加载完毕事件:元素组件加载完毕时触发。
8、表单提交事件(onsubmit)
表单提交事件:表单的提交按钮被点击时触发
注意:该事件需要返回boolean类型的值来执行 提交/阻止 表单数据的操作。
a.事件得到true,提交表单数据
b.事件得到false,阻止表单数据提交
9、键位弹起事件(onkeyup)
键位弹起事件:在组件中输入某些内容时,键盘键位弹起时触发该事件
10、常用鼠标事件
a、鼠标移入事件(onmouseover)
鼠标移入事件:鼠标移入某个元素组件时触发
b、鼠标移出事件(onmouseout)
鼠标移出事件:鼠标移出某元素时触发
11、JS事件的两种绑定方式
a、元素事件句柄绑定
将事件以元素属性的方式写到标签内部,进而绑定对应函数。
事件句柄绑定方式-
优点:①开发快捷
②传参方便
③可以绑定多个函数
缺点:JS和HTML代码高度糅合在一起,不利于多部门的项目开发维护
12、DOM绑定方式
使用DOM的属性方式绑定事件
DOM绑定方式-
优点:使得HTML代码和JS代码完全分离
缺点:①不能传递参数。 解决:匿名函数是可以的
②一个事件只能绑定一个函数 解决:匿名函数内部是可以绑定多个函数。