JS讲解（JavaScript）_IT分享知识网

大家好，欢迎来到IT知识分享网。

JS简介

什么是JS

JS
，全称
JavaScript
，是⼀种
直译式
脚本语⾔，是⼀种动态

类型、
弱类型
、基于对象的脚本语⾔，内置⽀持类型。

JS
语⾔和
Java
语⾔对⽐：

JS的作⽤

具体来说，有两部分作⽤：

JS
代码可以操作浏览器
(BOM)
：进⾏⽹址跳转、历史记录切换、浏览器弹窗等等

JS
代码可以操作⽹⻚
(DOM)
：操作
HTML
的标签、标签的属性、样式、⽂本等等

注意：
JS
的是在浏览器内存中运⾏时操作，并不会修改⽹⻚源码，所以刷新⻚⾯后⽹⻚会还原

JS的组成

ECMAScript(
核⼼
)
：是
JS
的基本语法规范

BOM
：
Browser Object Model
，浏览器对象模型，提供了与浏览器进⾏交互的⽅法

DOM
：
Document Object Model
，⽂档对象模型，提供了操作⽹⻚的⽅法

⼩结

JS
的概念
:JS
是⼀⻔运⾏在浏览器的，解释型的、基于对象的脚本语⾔

JS
的作⽤
:
处理⽤户和前端⻚⾯的交互

操作浏览器

操作
HTML
⻚⾯的标签、属性、⽂本、样式等等

JS
的组成部分
:

ECMAScript:
基本语法

BOM:
浏览器对象模型，操作浏览器的代码

DOM:
⽂档对象模型，操作
HTML
⽂档的⽅法

JS引⼊

分析

1.
内部
js(
内嵌式
)

2.
外部
js(
外联式
)

讲解

语法

在
html
⾥增加
<script>
标签，把
js
代码写在标签体⾥

<script> //在这⾥写js代码 </script>

示例

创建
html
⻚⾯，编写
js
代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>js引⼊⽅式-内部js</title>
 <script>
 //操作浏览器弹窗
 alert("hello, world");
 </script>
</head>
<body>
</body>
</html>

打开⻚⾯，浏览器会弹窗

外部JS

语法

把
js
代码写在单独的
js
⽂件中，
js
⽂件后缀名是
.js

在HTML
⾥使⽤
<script>
标签引⼊外部
js
⽂件

<script src="js⽂件的路径"></script>

示例

创建⼀个
my.js
⽂件，编写
js
代码

第1
步：创建
js
⽂件

第2步：设置js⽂件名称

第3步：编写js代码

alert("hello, world! 来⾃my.js");

创建⼀个html，引⼊my.js⽂件

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>js引⼊⽅式-外部js</title>
 <!--引⼊外部的my.js⽂件-->
 <script src="../js/my.js"></script>
</head>
<body>
</body>
</html>

打开⻚⾯，浏览器会弹窗

⼩结

1.
内部脚本

<script> //js代码 </script>

2.
外部脚本

定义⼀个js
⽂件

通过script
标签引⼊

<script src="js⽂件路径"></script>

注意事项

⼀个
script
标签，不能既引⼊外部
js
⽂件，⼜在标签体内写js
代码。

错误演示：

<script src="../js/my.js"> alert("hello"); </script>

正确演示：

<script src="../js/my.js"></script> <script> alert("hello"); </script>

JS⼩功能和JS调试

讲解

⼩功能

alert():
弹出警示框

console.log():
向控制台打印⽇志

document.write(); ⽂档打印. 向⻚⾯输出内容.

调试

1.
按
F12
打开开发者⼯具

2.
找到
Source
窗⼝，在左边找到⻚⾯，如下图

打断点之后，当代码执⾏到断点时，会暂时执⾏

在窗⼝右侧可以查看表达式的值、单步调试、放⾏等等

3.
如果代码执⾏中出现异常信息，会在控制台
Console
窗⼝显示出来

4. 点击可以定位到异常位置

⼩结

弹出警告框

alert();

控制台输出

 console.log();

向⻚⾯输出
(
⽀持标签的
)

document.write();

JS基本语法

讲解

更改
idea
中的
js
语⾔的版本

变量

JavaScript
是⼀种
弱类型语⾔
，
javascript
的变量类型由它的值来决定。定义变量需要⽤关键字 ‘var’
或者
let

数据类型

1.
五种原始数据类型

2.typeof
操作符

作⽤：⽤来判断变量是什么类型

写法：
typeof(
变量名
)
或
typeof
变量名

null
与
undefined
的区别：

null:
对象类型，已经知道了数据类型，但对象为空。

undefined
：未定义的类型，并不知道是什么数据类型。

3.
⼩练习

定义不同的变量
,
输出类型
,

代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<script type="text/javascript">
 var i = 5; //整数
 var f = 3.14; //浮点
 var b = true; //布尔
 var c = 'a'; //字符串
 var str = "abc"; //字符串
 var d = new Date(); //⽇期
 var u; //未定义类型
 var n = null; //空
 document.write("整数：" + typeof(i) + "
<br/>");
 document.write("浮点 ：" + typeof(f) + "
<br/>");
 document.write("布尔：" + typeof(b) + "
<br/>");
 document.write("字符：" + typeof(c) + "
<br/>");
 document.write("字符串：" + typeof(str) + "
<br/>");
 document.write("⽇期：" + typeof(d) + "
<br/>");
 document.write("未定义的类型：" + typeof(u) +
"<br/>");
 document.write("null：" + typeof(n) + "
<br/>");
</script>
</body>
</html>

字符串转换成数字类型

全局函数
(
⽅法
)
，就是可以在
JS
中任何的地⽅直接使⽤的函数，不⽤导⼊对象。不属于任何⼀个对象

运算符

关系运算符
:> >= < <=

number
类型和字符串做
-,*,/
的时候
,
字符串⾃动的进⾏类型转换,
前提字符串⾥⾯的数值要满⾜
number
类型

var i = 3; var j = "6"; alert(j-i);//结果是3, "6" ==> 6 alert(j*i);//结果是18, alert(j/i);//结果是2,

除法
,
保留⼩数

var i = 2; var j = 5; alert(j/i);

==
⽐较数值
,
===
⽐较数值和类型

var i = 2; var j = "2"; alert(i==j); // ==⽐较的仅仅是数值, true alert(i===j); // ===⽐较的是数值和类型.false

语句

for
循环

<script> //将数据装到表格中 document.write("<table border='1' cellspacing='0' width='900px'>") for(let j=1;j<=9;j++){ //⼀⾏ document.write("<tr>") for(let i=1;i<=j;i++){ //⼀个单元格 document.write("<td>") //每⼀个乘法表达式就是td中的内容 document.write(j+"x"+i+"="+(j*i)) document.write("</td>") } document.write("</tr>") } document.write("</table>") </script>

if… else

var a = 6; if(a==1) { alert('语⽂'); } else if(a==2) { alert('数学'); } else { alert('不补习'); }

switch

<script> var str = "java"; switch (str){ case "java": alert("java"); break; case "C++": alert("C++"); break; case "Android": alert("Android"); break; } </script>

⼩结

1.
变量通过
var
定义

2.
数据类型

number

boolean

string

object

undefined

3.
运算符

字符串可以和number
类型进⾏
-,*,/
运算的

除法保留⼩数

==
⽐较的是值
, ===
⽐较的是值和类型

4.
语句
:
基本和
java
⼀样

JS函数

讲解

什么是函数

函数：是被设计为执⾏特定任务的代码块，在被调⽤时会执⾏

函数类似于
Java
⾥的⽅法，⽤于封装⼀些可重复使⽤的代码块

普通(有名)函数

语法

定义普通函数

function 函数名(形参列表){ 函数体 [return 返回值;] }

调⽤普通函数

var result = 函数名(实参列表);

示例

计算两个数字之和

<script> //js的函数的作⽤:为了封装代码，在要使⽤这些代码的地 ⽅直接调⽤函数 //js的函数的声明⽅式:1. 普通函数(命名函数) 2.匿 名函数 //普通函数: function 函数名(参数名,参数名...){函 数体}，函数没有返回值类型，没有参数类型 function total(a,b,c) { console.log("arguments数组中的数 据:"+arguments.length) console.log(a+","+b+","+c) return a+b+c } //调⽤函数 //var num = total(1,2,3); //console.log(num) //js的函数还有俩特点:1. 函数声明时候的参数个数和函 数调⽤时候传⼊的参数个数，可以不⼀致;因为函数内部有⼀个 arguments数组，⽤于存放传⼊的参数 //2. js的函数是没有重载的，同名函数后⾯的会覆盖前 ⾯的 function total(a,b) { return a+b } var num = total(1,2,3); console.log(num) </script>

匿名函数

匿名函数，也叫回调函数，类似于Java⾥的函数式接⼝⾥的⽅法

function(形参列表){ 函数体 [return 返回值;] }

⼩结

1.
语法

普通(
有名
)
函数

function 函数名(参数列表){ 函数体 [return ...] }

匿名函数

function(参数列表){ 函数体 [return ...] }

2.
特点

参数列表⾥⾯直接写参数的变量名
,
不写
var

函数没有重载的
,
后⾯的直接把前⾯的覆盖了

JS事件

讲解

事件介绍

HTML
事件是发⽣在
HTML
元素上的
“
事情
”
，是浏览器或⽤户做的某些事情

事件通常与函数配合使⽤，这样就可以通过发⽣的事件来
驱动函数执⾏。

常⻅事件

事件绑定

普通函数⽅式

说⽩了设置标签的属性

<标签 属性="js代码，调⽤函数"></标签>

匿名函数⽅式

<script> 标签对象.事件属性 = function(){ //执⾏⼀段代码 } </script>

事件使⽤

重要的事件

点击事件

需求
:
没点击⼀次按钮弹出
hello…

<input type="button" value="按钮" onclick="fn1()"> <input type="button" value="另⼀个按钮" id="btn"> <script> //当点击的时候要调⽤的函数 function fn1() { alert("我被点击了...") } //给另外⼀个按钮，绑定点击事件: //1.先根据id获取标签 let btn = document.getElementById("btn"); //2. 设置btn的onclick属性(绑定事件) //绑定命名函数 //btn.onclick = fn1 //绑定匿名函数 btn.onclick = function () { console.log("点击了另外⼀个按钮") } </script>

获得焦点
(onfocus)
和失去焦点
(onblur)

需求
:
给输⼊框设置获得和失去焦点

var ipt = document.getElementById("ipt"); //绑定获取焦点事件 ipt.onfocus = function () { console.log("获取焦点了...") } //绑定失去焦点事件 ipt.onblur = function () { console.log("失去焦点了...") }

内容改变
(onchange)

需求
:
给
select
设置内容改变事件

<body> <!--内容改变(onchange)--> <select onchange="changeCity(this)"> <option value="bj">北京</option> <option value="sh">上海</option> <option value="sz">深圳</option> </select> </body> <script> function changeCity(obj) { console.log("城市改变了"+obj.value); } </script>

等
xx
加载完成
(onload)
可以把
script
放在
body
的后⾯
/
下⾯,
就可以不⽤了

window.onload = function () { //浏览器窗体加载完毕之后要执⾏的代码写到这⾥⾯ }

掌握的事件

键盘相关的
,
键盘按下
(onkeydown)
键盘抬起
(onkeyup)

//给输⼊框绑定键盘按键按下和抬起事件 ipt.onkeydown = function () { //当按键按下的时候，数据并没有到达输⼊框 //输出输⼊框⾥⾯的内容 //console.log(ipt.value) } ipt.onkeyup = function () { //输出输⼊框的内容:当键盘按键抬起的时候，数据已经到 达了输⼊框 console.log(ipt.value) }

⿏标相关的
,
⿏标在
xx
之上
(onmouseover ),
⿏标按下 (onmousedown),⿏标离开
(onmouseout)

//给输⼊框绑定⿏标移⼊事件 ipt.onmouseover = function () { console.log("⿏标移⼊了...") } //给输⼊框绑定⿏标移出事件 ipt.onmouseout = function () { console.log("⿏标移出了...") }

⼩结

绑定事件的⽅式
:

通过在标签上设置标签的属性，进⾏绑定，也就是通过命名函数(
普通函数
)
进⾏绑定

通过
js
代码获取到标签，然后设置标签的属性进⾏绑定，也就是通过匿名函数绑定事件

2. JS的常⻅的事件介绍: 1. onclick 2. ondblclick 3. onmouseover 4. onmouseout 5. onfocus 获取焦点 6. onblur 失去焦点

JS的DOM

讲解

什么是dom

DOM
：
D
ocument
O
bject
M
odel
，⽂档对象模型。是
js
提供的，⽤来访问⽹⻚⾥所有内容的(
标签
,
属性
,
标签的内容
)

什么是dom树

当⽹⻚被加载时，浏览器会创建⻚⾯的
DOM
对象。
DOM

对象模型是⼀棵树形结构：⽹⻚⾥所有的标签、属性、⽂

本都会转换成节点对象，按照层级结构组织成⼀棵树形结

构。

整个⽹⻚封装成的对象叫
document

标签封装成的对象叫
Element

属性封装成的对象叫
Attribute

⽂本封装成的对象叫
Text

⼀切皆节点, ⼀切皆对象

⼩结

1. dom:
⽂档对象模型
,
⽤来操作⽹⻚

2. dom
树
: html
通过浏览器加载到内存⾥⾯形成了⼀颗
dom 树,
我们就可以操作
dom
树节点
(
获得点
,
添加节点
,
删除节点)

操作标签

讲解

获取标签

<body> <div id="d1" name="n1">hello div1</div> <div class="c1">hello div2</div> <span class="c1">hello span1</span> <span name="n1">hello span2</span> <script> //⽬标1:获取id为d1的标签 //getElementById(id)通过id获取标签，获取的 是⼀个标签 //var element1 = document.getElementById("d1"); //console.log(element1) //⽬标2: 获取类名为c1的所有标签, 通过类名获取 多个标签，返回值是⼀个数组 /*var elements1 = document.getElementsByClassName("c1"); for (var i = 0; i < elements1.length; i++) { var elements1Element = elements1[i]; console.log(elements1Element) }*/ /*for (let element of elements1) { console.log(element) }*/ //⽬标3: 获取所有的span标签 //getElementsByTagName(标签名),根据标签名 获取多个标签,返回值是⼀个数组 /*var spans = document.getElementsByTagName("span"); for (var i = 0; i < spans.length; i++) { var span = spans[i]; console.log(span) }*/ //⽬标4:获取所有name属性为n1的标签 //getElementsByName(name)，根据name属性获 取标签，返回值是⼀个数组 /*var elements = document.getElementsByName("n1"); for (var i = 0; i < elements.length; i++) { var element = elements[i]; console.log(element) }*/ //扩展:我们其实还可以根据选择器获取标签 //根据选择器获取⼀个标签 /*var element = document.querySelector("#d1"); console.log(element)*/ //根据选择器获取多个标签 //var elements = document.querySelectorAll(".c1"); //var elements = document.querySelectorAll("div"); var elements = document.querySelectorAll("[name='n1']"); for (var i = 0; i < elements.length; i++) { var element = elements[i]; console.log(element) } </script> </body>

操作标签

<body> <ul id="city"> <li>北京</li> <li id="sh">上海</li> <li>深圳</li> <li>⼴州</li> </ul> <input type="button" value="添加" onclick="addCity()"> <input type="button" value="删除" onclick="removeCity()"> <script> //点击添加按钮，往城市列表的最后⾯添加"⻓沙" function addCity() { //1. 创建⼀个li标签 var liElement = document.createElement("li"); //2. 设置li标签体的⽂本内容为"⻓沙" liElement.innerText = "⻓沙" //3. 往id为city的ul中添加⼀个⼦标签 //3.1 获取id为city的ul var city = document.getElementById("city"); //3.2 往city⾥⾯添加⼦标签 city.appendChild(liElement) } //点击删除按钮，删除上海 function removeCity() { //要删除某⼀个标签: 那个标签.remove() document.getElementById("sh").remove() } </script> </body>

⼩结

1.
获得标签

document.getElementById(“id”)
根据
id
获得

document.getElementsByTagName(“
标签名
“) 根据标
签名获得

document.getElementsByClassName(“
类名
“)
根据类名获得

2.
操作节点
(
标签
,
⽂本
)

document.createElement(tagName)
创建标签

Element
对象

document.createTextNode(“
⽂本
“)
创建⽂本节点

parentElement.appendChild(sonElement)
插⼊标签

element.remove()
删除标签

操作标签体

讲解

语法

获取标签体内容：
标签对象
.innerHTML

设置标签体内容：
标签对象
.innerHTML = “
新的
HTML
代码”;

innerHTML
是覆盖式设置，原本的标签体内容会被覆盖掉；

⽀持标签的可以插⼊标签
,
设置的
html
代码会⽣效

示例

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>操作标签体</title>
</head>
<body>
<input type="button" value="获取d1的标签体内容"
onclick="getHtml()">
<input type="button" value="设置d1的标签体内容"
onclick="setHtml()">
<div id="d1">
 java
 <p>java程序员</p>
</div>
<script>
 var d1 = document.getElementById("d1");
 function getHtml() {
 var html = d1.innerHTML;
 alert(html);
 }
 function setHtml() {
 d1.innerHTML = "<h1>深圳
javaJavaEE</h1>";
 }
</script>
</body>
</html>

⼩结

1.
获得标签的内容
(
⼀并获得标签
)

标签对象.innerHTML;

2.
设置标签的内容
(
①会把前⾯的内容覆盖 ②⽀持标签的
)

标签对象,innerHTML = "html字符串";

操作属性

讲解

每个标签Element对象提供了操作属性的⽅法

<body> <input type="password" id="pwd"> <input type="button" value="显示密码" onmousedown="showPassword()" onmouseup="hidePassword()"> <script> //⽬标:按住显示密码按钮的时候，就显示密码框中 的密码; 按键松开的时候，就隐藏密码 //1. 给按钮绑定onmousedown事件 function showPassword() { //让密码框的密码显示: 修改密码框的type属 性为text document.getElementById("pwd").setAttribute("t ype","text") } //2. 给按钮绑定onmouseup事件 function hidePassword() { //就是设置密码框的type为password document.getElementById("pwd").setAttribute("t ype","password") //getAttribute(属性名)，根据属性名获取 属性值 var type = document.getElementById("pwd").getAttribute("ty pe"); console.log(type) } </script> </body>

⼩结

1.
getAttribute(attrName)
获取属性值

2.
setAttribute(attrName, attrValue)
设置属性值

3.
removeAttribute(attrName)
删除属性

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/145194.html

JS讲解（JavaScript）

JS简介

什么是JS

JS的作⽤

JS的组成

⼩结

JS引⼊

分析

讲解

语法

示例

语法

示例

⼩结

JS⼩功能和JS调试

讲解

⼩功能

调试

⼩结

JS基本语法

讲解

变量

数据类型

运算符

语句

⼩结

JS函数

讲解

什么是函数

普通(有名)函数

语法

示例

匿名函数

⼩结

JS事件

讲解

事件介绍

常⻅事件

事件绑定

事件使⽤

掌握的事件

⼩结

JS的DOM

讲解

什么是dom

什么是dom树

⼩结

操作标签

讲解

获取标签

操作标签

⼩结

操作标签体

讲解

语法

示例

⼩结

操作属性

讲解

⼩结

相关推荐

发表回复