作用:控制页面特效展示。
例如:
- JS可以对HTML元素进行动态控制
- JS可以对表单项进行校验
- JS可以控制CSS的样式
- ECMAScript(核心):规定了JS的语法和基本对象。
- DOM 文档对象模型:处理网页内容的方法和接口
- BOM 浏览器对象模型:与浏览器交互的方法和接口
内部脚本
在当前页面内部写script标签,script内部即可书写JavaScript代码v
格式:
< script type="text/javascript">
JavaScript 的代码
< /script>
外部引入
在HTML文档中,通过< script src=“”>标签引入.js文件。
格式:
< script type="text/javascript" src="javascript.文件路径"></ script>
注:外部引用时script标签内不能有script 代码,即使写了也不会执行。
开发规范规定,script标签的放置位置为:
Body结束标签前。
变量
变量:标示内存中的一块空间,用于存储数据,且数据是可变的。
变量的声明:
var变量名;//变量赋予默认值,默认值为undefined
变量的声明和赋值:
var变量名=值;//变量赋予对应的值。
在声明JavaScript 变量时,需要遵循以下命名规范:
必须以字母或下划线开头,中间可以是数字、字符或下划线
变量名不能包含空格等符号。
不能使用JavaScript关键字作为变量名,如: function
JavaScript严格区分大小写。
基本数据类型
类似于java中的基本数据类型,
string字符串类型。""和"都是字符串。JavaScript中没有单个字符
boolean布尔类型。固定值为true 和 false
number数字类型。任意数字
null空,一个占位符。
undefined未定义类型,该类型只有一个固定值,即undefined,表示变量声明却未定义具体的值。v
注:因为undefined是从null中派生出来的,所以undefined==null
JavaScript区别于java,是弱类型语言,变量的使用不用严格遵循规范,所以一个变量声明好之后,是可以赋予任意类型的值。
通过typeof运算符可以分辨变量值属哪种基本数据类型
引用数据类型
引用类型通常叫做类(class),但在JavaScript中,因为不存在编译过程,所以没有类的概念,所处理的引用数据类型都是对象。
标准创建方式:。
var str= new String();
var str= new String;
运算符
比较运算符
== 逻辑等。仅仅对比值
=== 全等。对比值并且对比类型。
如果值和类型都相同,则为true;值和类型有一个不同,则为false
逻辑运算符
也没有 |
正则对象
RegExp对象的创建方式
var reg = new RegExp(“表达式”);(开发中基本不用),
varreg=/^表达式$ /;直接量(开发中常用)
直接量中存在边界,即^代表开始,$代表结束
直接量方式的正则是对象,不是字符串,别用引号。
<script>
var reg=/^\s*$/;//0```多个空格
</script>
test方法
用来校验字符患是煮匹配正则。
全部字符匹配返回true;有字符不匹配返回false
<script>
var reg=/^\s*$/;//0```多个空格
var flag=reg.test(" ");
alert(flag);
</script>
使用事项
/^表达式$ /
只要有无法成立正则的字符存在,即为false。w全部符合为true
(检查严格,眼睛不揉沙子)适用于表单校验
’
/表达式/
只要有成立正则的字符存在,即为true。全部不符合为false
(检查不严格,懒人思想)。适用于字符串查找、替换
JS数组对象
JS数组可以看做Java中的 ArrayList集合。
数组中的每一个成员没有类型限制,及可以存放任意类型。
数组的长度可以自动修改
数组创建方式
1.var arr=[1,2,3];
2.var arr=new Array();
3.var arr=new Array(4);
数组长度是4,相当于开辟了长度为4的空间,每个元素是undefined。(仅在显示数组时进行处理, undefined为了方便显示变成了空字符串形式,其值本质仍然是undefined)
4.var arr=new Array(1,2);数组元素是1,2
JS数组对象常用方法
全局函数
eval
把传入字符串的作为代码执行
编码和解码
字符转数据
自定义函数
函数格式
function 方法名(参数列表){
函数体
}
- JavaScript函数定义必须用小写的function;
- JavaScript函数无需定义返回值类型,直接在function后面书写方法名;
- 参数的定义无需使用var关键字,否则报错;
- JavaScript函数体中, return可以不写,也可以return具体值,或者仅仅写return;
JavaScript函数调用执行完毕一定有返回值,值及类型根据return决定,如果未return具体值,返回值为undefined;
JavaScript函数若同名,则不存在方法重载,只有方法相互覆盖,最后定义的函数覆盖之前的定义;
因为JavaScript不存在函数重载,所以JavaScript仅根据方法名来调用函数,即使实参与函数的形参不匹配,也不会影响正常调用;
如臬形参未赋值,就使用默认值undefined-
自定义对象
我们知道, JavaScript中的引用数据类型都是对象,而对象在JavaScript中可以用函数来表示。
相当于java中创建某个class 类
无形参格式
function 对象名(){
函数体
}
<script>
l属性定义方式
//1、 this关键字,在对象声明定义阶段,定义一个属性
//2、创建对象后,使用对象.属性方式动态定义属性
function Person (n, a){
this. name=n;
this.age=a;
)
//创建了一个Person对象,p
var p =new Person(小主“,"20") ;
P.sex=”男";
//为Person对象―声明并赋值成功
</script>
对象直接量
开发中可以用一种简单的方式直接创建自定义的JavaScript对象,这种方式称为“对象直接量”。
格式:
var对象名={属性名1"属性值1",属性名2:“属性值2”,属性名3:"属性值 3.….}
注:该方式直接创建出实例对象,无需构建函数,无需再new创建实例对象,直接使用即可。
BOM对象
BOM(Browser Object Model)浏览器对象模型浏览器:IE、火狐、谷歌等
作用:用来执行浏览器的相关操作。(例如:浏览器的地址、弹出消息等)
一般情况下,window 代表了BOM对象。
window对象是JavaScript的内置对象,使用window对象调用方法时可以省略window不写。
消息框
alert()
警告框,用来弹出警告消息。
confirm()
确认框,用于告知用户信息并收集用户选择。
会返回对应的Boolean值。
定时器
启动循环定时器–setInterval()
循环定时器,调用一次就会创建并循环执行一个定时器。
setInterval(调用方法,毫秒值);
//毫秒值:循环周期
一次性定时器
启动一次性定时器–setTimeout()
一次性定时器,调用一次就会创建并执行一个定时器一次。
格式:
setTimeout(遍用方法,毫秒值);
用clearTimeout()清除一次性定时器。
location对象
location对象包含浏览器地址栏的信息。
设置href属性,浏览器就会跳转到对应的路径
通过一次性定时器实现跳转网页。
DOM对象
DOM (Document Object Model)文档对象模型。文档:标记型文档(HTML等),
DOM是将标记型文档中所有内容(标签、文本、属性)都封装成对象,
通过操作对象的属性或者方法,来达到操作或者改变HTML展示效果的目的。
DOM树
- 每个标签会被加载成DOM树上的一个元素节点对象。
- 每个标签的属性会被加载成DOM树上的一个属性节点对象
- 每个标签的内容体会被加载成DOM树上的一个文本节点对象整个DOM树,是一个文档节点对象,即 DOM对象。
- 一个HTML文档加载到内存中就会形成一个DOM对象
DOM树特点:
- 必定会有一个根节点
- 每个节点都是节点对象
- 常见的节点关系:父子节点关系
- 文本节点对象没有子节点—叶子节点
- 每个节点都有一个父节点,零到多个子节点.
- 只有根节点没有父节点
获取元素的四种方式
在JavaScript中,我们可以通过DOM对象的4种方式获取对应的元素对象:
-
getElementByld(); —通过元素ID获取对应元素对象。可以通过ID获取对应的元素对象,如果找不到,返回null
-
getElementsByName(); —通过元素的name属性获取符合要求的所有元素。如果找不到,返回空数组
-
getElements.BylagName();—通过元素的元素名属性获取符合要求的所有元素。
-
·getElementsByClassName(); —通过元素的class属性获取符合要求的所有元素。
元素对象常见属性
value
元素对象.value,获取元素对象的value属性值。
元素对象.value=属性值, 设置元素对象的value属性值。
className
元素对象.className,获取元素对象的class属性值。
元素对象.className=属性值, 设置元素对象的class属性值。
checked
元素对象.checked,获取元素对象的checked属性值。
元素对象.checked=属性值,设置元素对象的checked 属性值。
注:HTML中checked=“checked”,JavaScript中返回true
innerHTML
元素对象.innerHTML,获取元素对象的内容体,
元素对象.innerHTML=值,设置元素对象的内容体
JS事件
通常鼠标或热键的动作我们称之为事件(Event)
通过JS事件,我们可以完成页面的指定特效。
页面上的特效,我们可以理解在JS事件驱动机制下进行。
JS 事件驱动机制:
警察抓小偷
- 事件源, 小偷
- 事件, 警察抓小偷
- 监听器,警察
- 注册/绑定监听器, 让警察时刻盯着小偷
事件源:专门产生事件的组件。
事件:由事件源所产生的动作或者事情。
监听器:专门处理事件源所产生的事件。
注册/绑定监听器:让监听器时刻监听事件源是否有指定事件产生,如果事件源产生指定事件,则调用监听器处理。
点击事件(onclick)
获取焦点事件(onfocus)
焦点:即整个页面的注意力。
默认一个正常页面最多仅有一个焦点。
例如:文本框中闪烁的小竖线。
通常焦点也能反映出用户目前的关注点,或者正在操作的组件。。
获取焦点事件:当元素组件获取焦点时触发·
失去焦点事件(onblur)
例子:用于输入用户名后失去焦点可以在后台执行校验是否重复。
域内容改变事件
域内容改变事件:元素组件的值发生改变时触发
加载完毕事件(onload)
表单提交事件(submit)
表单提交事件:表单的提交按钮被点击时触发
可以用于表单校验
注意:该事件需要返回boolean,类型的值来执行提交/阻止表单数据的操作。
事件得到true,提交表单数据
事件得到 false,阻止表单数据提交
键位弹起事件(onkeyup)
鼠标移入事件(onmouseover)
鼠标移出事件(onmouseout)
JS事件的两种绑定方式
元素事件句柄绑定方式
示例二:有参
事件句柄绑定方式:
优点:
①开发快捷
②传参方便
③可以绑定多个函数
缺点:JS和HTML代码高度糅合在一起,不利于多部门的项目开发维护
DOM绑定方式![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/effc9864fb2ffdde2b6224a64f331ab1.png)
DOM绑定方式:
优点:使得HTML代码和JS代码完全分离
缺点:
①不能传递参数。解决:匿名函数是可以的
②一个事件只能绑定一个函数 。解决:匿名函数内部是可以绑定多个函数。·