JS讲解（JavaScript）

最新推荐文章于 2024-07-24 11:09:48 发布

犹豫啊

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量1.7k

点赞数 50

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_73776815/article/details/137043152

版权

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>