1. 什么是javascript
- javascript是一门客户端脚本语言,运行在客户端浏览器中,每一个浏览器都有javascript的解析引擎。
- 脚本语言不需要编译,直接可以被浏览器解析执行。
2. javascript的作用
- 用来增强HTML页面和用户之间的交互,比如表单提交时进行用户名是否为空的判断。也可以用来控制HTML元素,让页面有一些动态效果,增强用户的体验。
3. javascript的发展史
- 1992年,Nombase公司,开发出第一门客户端脚本语言,专门用于表单的校验。命名为 : C-- ,后来更名为:ScriptEase
- 1995年,Netscape(网景)公司,开发了一门客户端脚本语言:LiveScript。后来,请来SUN公司的专家,修改LiveScript,命名为JavaScript
- 1996年,微软抄袭JavaScript开发出JScript语言
- 1997年,ECMA(欧洲计算机制造商协会),制定出客户端脚本语言的标准:ECMAScript,就是统一了所有客户端脚本语言的编码方式,但不同脚本语言都有自己的特性。
- 综上所述,我们要学的JavaScript=ECMAScript + JavaScript自己特有的东西(BOM+DOM)
4. ECMAScript
4.1 基本语法
-
如何将JavaScript引入HTML中
-
内部js:
<script> js代码 </script>
-
外部js:
<script src="xx/xxx.js"></script>//src是相对路径
//定义一个位于xx目录的xxx.js文件 js代码
-
注意:
- 如果引入的是内部js,则不要定义src,在
<script>
标签内写js代码就好。如果引入的是外部js,则定义src,把外部的js代码url赋给src,<script>
内不写东西。 <script>
标签可以定义在HTML的任意位置,包括head内,body内,<!DCOTYPE HTML>
上面等,但为了不影响页面内容的加载,有时会把script代码放在body快结束的位置,来保证先将大体页面加载出来。- script标签可以定义多个。执行时按顺序执行。
- 在定义外部js文件时,不要写
<script>
标签,直接写js代码即可。 - js中的代码每一句都要用
;
结尾
- 如果引入的是内部js,则不要定义src,在
-
-
注释
单行注释:
//注释内容
多行注释:
/*注释内容*/
-
js的变量
- java是强类型语言,javascript是弱类型语言。java在开辟变量存储空间时,定义了空间将来存储的数据的数据类型,只能存储固定类型的数据。JavaScript在开辟变量存储空间时,不定义空间将来的存储数据类型,可以存放任意类型的数据
//定义变量的语法 var s=10; //也可以不用var关键字 用:定义的变量是局部变量 不用:定义的变量是全局变量(不建议使用)
-
基本数据类型
- number :数字。包括整数,小数和NaN(not a number –不是数字的数字类型)
var x=10;
- string:字符串。js中没有字符和字符串的区别,所以单个字符和字符串都用string定义,单引号和双引号都可以用。‘abc’,“abc”,"a’'都是字符串。
var x="hello;"
- boolean:true和false。
var x=true;
- null:表示一个对象不存在。
- undefined:声明了一个变量但没有赋值,默认就会赋值undefined。
var x; x的值为undefined
- number :数字。包括整数,小数和NaN(not a number –不是数字的数字类型)
-
null和undefined的区别与联系https://www.runoob.com/js/js-typeof.html
注意:
-
由于五种基本数据类型都是用var定义的,所以有时我们不能判断出变量的类型,例如123和"123",这时就需要typeof()来获取变量的类型。
-
由于js是弱类型语言,在定义时并不指定变量的类型,所以变量的类型是动态的,给变量什么类型的数据,它就是什么类型的变量,同时类型是动态的,可以改变。
<script> var x=10;//x的类型是number x="hello";//x的类型是string </script>
-
js中,如果运算数不是运算符所要求的类型,则js引擎会进行自动的类型转换。
-
-
基本数据类型的转换
-
其他类型转string
//number转string: var a=10; a.toString();//number10转为字符串10. a.toString(2);//将数字10转为不同进制的数字,再将其转为字符串 a.toString(8); a.toString(16); //boolean转string: var a=true; a.toString();//结果为true,true和false直接转为字符串true和false就好
-
其他类型转number
//string转number:使用parseInt()方法 var x="10"; parseInt(x);//数字10,纯数字的字符串按照字面值转换 var y="10abc"; parseInt(y);//数字10,字符和数字都有的字符串要从第一个字符判断是否是数字,直到不是数字为止,将前边的数字部分转为number,如果第一个字符不是数字,则直接转为NaN类型。 var y1="a10bc"; parseInt(y1);//NaN类型 var z="hello"; parseInt(z);//NaN类型,纯字符转换为NaN,不是数字的数字类型 //boolean转number true转为1,false转为0
-
其他类型转boolean
//number转boolean 0或者NaN转false 其他为true //string转boolean 除了空字符串都是true //null 和undefined 都是false //对象 所有对象都是true
-
-
运算符
-
一元运算符
一元运算符就是只有一个运算数的运算符 i++,i--,++i,--i 具体访问这篇:https://blog.csdn.net/weixin_44226752/article/details/107420878
-
算数运算符
+ - * / %
-
赋值运算符
= , +=, -=, /=, %= x+=y <==>x=x+y
-
比较运算符
>, <, <=, >=, ==, ===(全等于) == :类型相同,直接比较。类型不同,先进行类型转换后再比较。 例如123和"123"比较后返回true === :比较之前先判断类型,如果类型不一样,直接返回false。 注意:在字符串比较时,按照字典顺序比较(即ASCII码大小)。按位逐一比较,直到得出大小为止。
-
逻辑运算符
&&,||,! 与或非 与:全1则1 或:有1则1
-
三元运算符
表达式? 值1:值2: 判断表达式的值为true则取值1,如果为false则取值2 .
-
-
流程控制语句
if...else... switch...case: switch可以接收五种基本类型中任一种 while do...while for
4.2 基本对象
-
Function函数(方法对象)
- 两种定义方法
//两种定义方法 <script> function 方法名称(形式参数列表){ 方法体 } var 方法名称= function(形式参数列表){ 方法体 } </script>
- 注意:
- 在定义方法时,不需要写形参的类型和返回值类型。因为都是var类型。
- 方法是一个对象,定义名称相同的方法会覆盖之前的方法。
- 方法的调用只与方法名有关,和参数列表无关,不会出现java中方法的重载,所以说在js中,每一个可执行的方法都有不同的名字。
- JS中每个方法可接受的参数不受限,可以传入多个,但方法中只会接收已经定义的参数,其他的参数会丢弃。
- 方法中有一个隐藏的内置对象(数组),arguments,封装所有的实际参数。可以通过arguments[0],arguments[1]…来获取传入的第1,2…个参数.
-
Number对象
-
Number对象是基本类型number的包装类,可以用new Number(123);来创建一个number值为123的对象。
-
Number对象的方法:
Number.MIN_VALUE
和Number.MAX_VALUE
:Number对象所能取的最小值最大值。isNaN()
:判断一个值是否是NaN。toFixed(n)
:返回一个保留n位小数的数toExponential()
:返回数字的科学计数法表达valueOf()
:返回一个数字对象的基本类型
-
Number和number类型的区别
var x=new Number(123); var y=123; typeof(x);//结果是object typeof(y);//结果是number
-
-
String对象
-
String是string的包装类,可以用new String(“123”)来创建一个对象
-
String对象的方法:
length()
:返回字符串长度charAt(n)
:返回指定位置字符charCodeAt(n)
:返回指定位置的字符对应的Unicode码x.concat(y)
:将字符串x和y拼接起来- 详细方法访问:https://how2j.cn/k/javascript/javascript-string/439.html
-
String和string的区别
var x='hello'; var y=new String('world'); typeof(x);//string类型 typeof(y);//object类型
-
-
Boolean对象
Boolean是boolean的包装类
-
Array数组对象
-
创建数组对象:
var a=new Array(5);//创建一个长度为5的数组,每个元素都是undifine.
var b=new Array(1,2,3,4,5);//创建一个有元素1,2,3,4,5的数组。
-
方法:
length()
:数组的长度join(参数)
:将数组中的元素按指定的分隔符拼接成字符串push(x)
:向数组的末尾添加一个值为x的元素pop(x)
:在数组的末尾删除一个值为x的元素。- 更多方法:https://how2j.cn/k/javascript/javascript-array/441.html
-
js中,数组的长度可变,数组元素的类型可变。
-
-
Date对象
- 创建日期对象:var d=new Date();//对象d就表示当前日期。
- 方法:
- getFullYear(),getMonth(),getDate()获取年月日
- getTime():获取毫秒值。返回当前date对象对应的时间到1970年1月1日零点的毫秒值差。
- 更多方法:https://how2j.cn/k/javascript/javascript-date/440.html
-
Math对象
- Math对象不用创建对象,直接使用。
- 方法:
- Math.random():生成一个[0,1)的随机数。
- Math.PI:圆周率
- Math.ceil(x):对数x进行上舍入。即大于这个数的最小整数。
- Math.floor():对数进行下舍入。即小于这个数的最大整数。
- Math.round(x):对数四舍五入为最接近的整数。
-
RegExp正则表达式对象
-
正则表达式:定义字符串的组成规则
-
单个字符:[ ]
如 [a] ,[ab] ,[a-zA-Z0-9_],[a]匹配字符a,[ab]匹配字符ab,
[a-zA-Z0-9 _]
匹配字符a-z,A-Z,0-9,_
。特殊单个字符:\d等价于[0-9]
\w等价于[a-zA-Z0-9_]
-
量词符号:
?:表示出现0次或者1次
*
:表示出现0次或者多次+:出现1次或者多次
{m,n}:表示数量在[m,n]范围内。
如果m缺省,{,n}:最多n次
如果n缺省,{m,}:最少m次
-
开始结束符号:
^:开始 $:结束
-
/^\w{6,12}$/
:表示匹配连续的6-12个字符,字符范围是a-z,A-Z,0-9,_
-
-
正则对象:
-
创建:
var reg=new RegExp(“正则表达式”);
var reg=/正则表达式/;
-
方法:
reg.test(要检验的字符串)
:验证指定的字符串是否符合正则表达式的规范。
-
-
-
Global对象
-
特点:全局对象,这个Global中封装的方法不需要对象就可以直接调用。方法名();
-
方法:
encodeURI():url编码
decodeURI():url解码
encodeURIComponent():url编码,编码的字符更多
decodeURIComponent():url解码
eval(参数):计算JavaScript字符串,并把它作为脚本代码来执行。如果参数是一个表达式,eval()函数将执行表达式,如果参数是js代码,则执行js语句。
-
5.BOM
5.1 什么是BOM
- BOM(Browser Object Model)浏览器对象模型,它将浏览器的各个组成部分封装成对象。
5.2 BOM的组成
- 封装的浏览器对象有;Window(窗口对象),Navigator(浏览器对象),Screen(显示屏对象),History(历史记录对象),Location(地址栏对象)
5.3 BOM的作用
- 通过调用BOM封装的对象的方法来间接控制浏览器的一些部件,使js有能力与浏览器对话。
5.4 五种对象的关系图
5.5 Window对象(重要)
-
在页面加载时,会自动创建window对象,无需手动创建。
-
调用方法时,window引用可以省略。
window.方法名()==方法名()
-
window对象可以获取其他BOM对象和DOM对象:
window.history window.location window.Navigator window.Screen window.document
-
window对象与弹出框有关的方法:
alert()//显示带有一段消息和一个确认按钮的警告框 confirm()//显示带有一段消息以及确认按钮和取消按钮的对话框 * 如果用户点击确定按钮,方法返回true * 如果用户点击取消按钮,则方法返回false prompt()//显示可提示用户输入的对话框 * 返回值:获取用户输入的值
-
window对象与打开关闭窗口有关的方法
close() //关闭浏览器的窗口 * 谁调用我,我关谁,想要关闭open()打开的窗口,则要用open返回的window对象来调用close()方法 open()//打开一个新的浏览器窗口 * 返回新的window对象
-
与定时器有关的方法
setTimeout(a,b) 在指定的毫秒数后调用函数或计算表达式。 * 参数1:js代码或者方法对象 * 参数2:毫秒值 * 返回值:唯一标识,用于取消定时器 clearTimeout(id) 取消由setTimeout方法设置的timeout. * id参数是setTimeout()方法的返回参数,即var id=setTimeout() setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式 clearInterval() 取消由setInterval()设置的timeout
-
获取文档显示区域的高度和宽度
window.innerWidth window.innerHeight
-
获取外部窗体的宽度和高度
window.outerWidth window.outerHeight
5.6 Navigator对象
-
浏览器对象,提供浏览器相关的信息
navigator.appName//浏览器产品名称: navigator.appVersion//浏览器版本号: navigator.appCodeName//浏览器内部代码 navigator.platform//操作系统 .......
5.7 Screen对象
-
Screen对象表示用户的屏幕相关信息
-
因为任务栏的存在,可用区域大小会比屏幕高度小一点
screen.height//用户屏幕分辨率 screen.availHeight//可用区域大小
5.8 History对象
-
历史记录对象
history.back()//加载history列表中的前一个url history.forward()//加载history列表中的下一个url history.go(参数)//加载history列表中的某个具体页面。 * 参数:正数:前进几个历史记录。负数:后退几个历史记录。 history.length//返回当前窗口历史列表中的url数量
5.9 Location对象
-
地址栏对象
location.reload()//重新加载当前文档,即刷新当前页面 location.href//返回当前页面的url
6.DOM
6.1 什么是DOM
- DOM即Document Object Model,文档对象模型,它将HTML文档的各个组成部分封装成对象。可以通过操作这些对象来对HTML进行一些crud的操作。
6.2 DOM的分类
- DOM被分为三类,核心DOM,XML DOM以及HTML DOM。
- 核心DOM是针对任何结构化文档的标准模型
- XML DOM:针对XML文档的标准模型,定义了所有XML元素的对象,属性以及访问他们的方法。
- HTML DOM:针对HTML文档的标准模型,定义了所有HTML元素的对象和属性以及访问他们的方法。即关于如何获取,修改,添加或删除HTML元素的标准
6.3 HTML DOM节点
-
在HTML DOM中,HTML文档的所有内容都是节点:
整个文档是是一个文档节点 Document
每个HTML元素是元素节点 Element
HTML元素内的文本是文本节点 Text
每个HTML元素的属性是属性节点 Attribute
注释是注释节点 Comment
-
HTML DOM将HTML文档视作树结构,这种结构称为节点树。
- 节点树中的各节点具有三种关系。父(parent),子(child),同胞(sibling)。上一级的节点是父节点,下一级的节点是子节点,同级的节点是同胞。同胞指的是具有相同的父节点,一个节点可拥有任意数量的子节点。
6.4 节点的属性
-
nodeName:节点的名字
文档的节点名是固定的#document
标签的节点名,是对应的标签名
标签内属性的节点名,是对应的属性名
内容的节点名是固定的#text
-
nodeValue:
文档的节点值是null
标签的节点值是null
标签内属性的节点值是对应的属性值
内容的节点值是#text
-
nodeType:
6.5 节点的关系
- parentNode 父节点
- previousSibling,nextSibling 同胞节点
- childNodes 子节点
- childNodes和children的区别是前者包括文本节点,后者不包括。
6.6 获取节点
- 获取元素节点
<script>
document.getElementById()//通过id获取元素节点
document.getElementsByClassName()//通过类名获取元素节点
document.getElementsByTagName()//通过标签名称获取元素节点。div,p,h1....
document.getElementsByName()//通过表单元素的name获取元素节点
</script>
- 获取元素的属性节点
获取属性节点时要先获取元素节点,然后通过元素节点的attributes获取其下的所有属性节点。由于属性节点有多个,所以以数组形式返回。
<div id="d1" align="center" class="abc">hello htmlDOM</div>
<script>
var div1=document.getElementById("d1");
var as=div1.attributes;//as获取的是div元素的所有属性组,是一个数组的引用
as[i].nodeValue//获取的是数组as中第i个属性的值,下标从0开始
as[i].nodeName//获取的是数组as中第i个属性的名字
as["id"].nodeValue//获取数组中属性名为id的属性的值
</script>
- 获取内容节点
首先通过document.getElementById获取元素节点,然后通过childNodes获取其所有的子节点。 其中第一个子节点,就是其内容节点。
<div id="d1" align="center" class="abc">hello HTML DOM</div>
<script>
var div1 = document.getElementById("d1");
var content = div1.childNodes[0];// 返回内容节点
content.nodeName//#text
content.nodeValue//hello HTML DOM
</script>
6.7 创建节点
-
创建元素/标签节点
var p=document.createElement("p");//创建一个p标签
-
创建文本节点
var p=document.createElement("p"); var text=document.createTextNode("文本内容");//创建一个文本节点,要注意创建文本节点前要先创建元素节点,然后将文本节点加入元素节点 p.appendChild(text);
-
创建属性节点
var a= document.createAttribute("属性名");//创建一个属性 标签.setAttributeNode(a)//将属性加入标签中
-
创建注释节点
createComment()
6.8 删除节点
-
删除元素节点
先获取父节点 通过父节点的removeChild删除该节点
-
删除属性节点
先获取该元素的节点 调用该节点的removeAttribute删除指定属性节点 节点.removeAttribute(属性)
-
删除文本节点
方法一:比较麻烦 通过childNodes[0]获取文本节点 通过removeChild删除该文本节点 方法二:常用 获取文本节点的父节点 调用该节点的innerHTML=" ";方法
6.9 替换节点
1. 获取父节点
2. 创建子节点
3. 获取被替换子节点
4. 通过replaceChild进行替换
注: replaceChild 第一个参数是保留的节点,第二个参数是被替换的节点
6.10 增加节点
-
在最后边插入节点
1. 创建新节点 2. 获取父节点 3. 通过appendChild追加(父节点.appendChild(子节点))
-
在前边的指定位置插入节点
1. 创建新节点 2. 获取父节点 3. 获取需要加入的子节点 4. 通过insertBefore插入 注: insertBefore的第一个参数是新元素,第二个参数是插入位置
6.11 事件监听机制
-
概念:某些组件被执行了某些操作后触发某些代码的执行。
- 事件:某些操作。如:单击,双击,键盘按下了,鼠标移动
- 事件源:组件。如按钮,文本输入框……
- 监听器:代码
- 注册监听:将事件,事件源,监听器结合在一起。当事件源上发生了某个事件,则触发执行某个监听器代码、
-
常见的事件:
-
单击事件
onclick:单击事件 ondblclick:双击事件
-
焦点事件
onblur:失去焦点 onfocus:元素获得焦点
-
加载事件
onload:一张页面或一幅图像完成加载。
-
鼠标事件
onmousedown 鼠标按钮被按下。 onmouseup 鼠标按键被松开。 onmousemove 鼠标被移动。 onmouseover 鼠标移到某元素之 onmouseout 鼠标从某元素移开
-
键盘事件
onkeydown:某个键盘按键被按下 onkeyup:某个键盘按键被松下 onkeypress:某个键盘按键被按下并松开
-
选择和改变
onchange:域的内容被改变 onselect:文本被选中
-
表单事件
onsubmit:确认按钮被点击 onreset:重置按钮被点击
-
绑定事件:
1.直接在html标签上,指定事件的属性(操作),属性值就是js代码 2.通过js获取元素对象,指定事件属性,设置一个函数.(这样做可以降低HTML与js的耦合度) <body> <img id="light" src="img/off.gif" onclick="fun();"> <img id="light2" src="img/off.gif"> <script> function fun(){ alert('我被点了'); alert('我又被点了'); } function fun2(){ alert('咋老点我?'); } //1.获取light2对象 var light2 = document.getElementById("light2"); //2.绑定事件 light2.onclick = fun2; </script> </body>
6.12 DOM 元素样式
-
使用元素的style属性来设置
div1.style.border=“1px solod red”
div1.style.width=“200px”;
div1.style.fontsize=“20px”;
div1.style.backgroundColor=“green”
-
提前定义好类选择器的样式,通过该元素的className属性来设置其class属性值。
6.13 innerHTML方法
- innerHTML方法主要用来替换文本内容的值,
节点.innerHTML="xxx"