这篇博客详细介绍了JavaScript的基础知识，包括JavaScript的定义、快速入门、开发环境搭建、基本语法、DOM操作、事件处理、面向对象编程以及内置对象的使用。通过实例展示了JavaScript如何增强用户与HTML页面的交互，提供了内部和外部引入JS的方式，强调了VSCode作为开发工具的优势。此外，还讲解了JavaScript的变量、运算符、流程控制、数组、函数、DOM操作和事件处理等核心概念，最后介绍了JavaScript的内置对象，如Number、Math、Date等，以及BOM对象。
JavaScript介绍:
JavaScript 是一种客户端脚本语言。运行在客户端浏览器中，每一个浏览器都具备解析 JavaScript 的引擎。
脚本语言：不需要编译，就可以被浏览器直接解析执行了。
核心功能就是增强用户和 HTML 页面的交互过程，让页面有一些动态效果。以此来增强用户的体验！
我们举个例子，我们提供了一个表格，上面还有一个输入的表单项，比如说我们在表单项里输入了相关的信息，我们点击添加的按钮，就会把我们刚才在表单项里的信息添加到我们的表格当中，我们还可以点击表格中的删除按钮，那么该数据就会从我们的表格中删除掉，所以我们表格中的数据是不是随着我们数据的变化而变化啊，所以说叫他动态的表格，那么像这样一个动态的效果，我们就可以通过JS来实现
我们的JS除了遵循ECMAScript标准之外，我们的JS还有一些它特有的内容，就是BOM以及DOM
快速入门：
我们创建一个普通的按钮，
我们点击这个按钮没有任何的效果，那么我们希望我们点击这个按钮，它会给我们一个提示的框框，那这样的话是不是也是一个对应的动态效果啊，那么这个功能就可以通过我们的JS来实现，
这个就是我们给我们的按钮标签加了一个id属性，然后我们在script标签中获取了这个按钮的标签，我们的onclick给这个按钮添加了一个单击的事件，也就是说我们一单击这个按钮，它会给我们实现哪些功能，这个function里面就代表它要实现的功能了，
我们单击之后，弹出一个框框，这就是一个动态效果，
引入js的方式一：内部方式
就是说我们把这个JS的相关代码是不是直接编写在我们的HTML页面当中啊，这就是内部方式引入JS
除此之外，我们还可以把这个JS的相关代码做一个抽取，抽取到一个外部的配置文件里边，然后我们在HTML文件里面，再把这个内容给他引入进来
引入js的方式二：外部方式
对于注意一解释：因为即使你写了其他的JS代码，这里也不可能运行，它只会运行外部JS文件里的JS代码
对于注意二解释：因为这样可能会导致，script标签之间相互套用，导致出现问题
Src代表，指定外部JS文件
注意：js文件写的就是js代码，不用再写script标签
我们对比一下这两种JS的引入方式：内部方式：是不是就仅局限于我们当前这个页面可以使用JS啊，而外部方式，只要我们把这个文件引入进来，那么是不是我们在所有的页面中都可以进行使用啊，所以外部方式更加灵活一些
开发环境搭建
-
Node.js:JavaScript 运行环境
-
VSCode：编写前端技术的开发工具
我们说下这个VScode工具的使用，如果使用idea进行前端的开发，我们做了修改之后，我们的浏览器显示并不会实时的去帮你刷新，必须手动刷新浏览器页面它才会给你更新，而VScode它就会实时的给你进行显示，但是VSCode它并不会像idea一样给你去保存代码，所以我们编写的时候，要注意我们的Ctrl+s进行随时保存
我们保存的时候，要注意文件格式的选择，我们不能是txt格式的，我们要选择HTML文件形式，
对于我们的VScode前端开发工具，里面并没有我们的HTML的基本组成部分，可以看到是空的，即创建文件的时候，是不会为我们自动提供的，
我们需要在代码区域输入一个英文的！，然后敲回车 ，这样我们的基本格式就出来了
代码编写完，我们怎么通过浏览器访问我们制作的页面呢？我们鼠标右键，选择倒数第二项就可以了
另外注意：我们这个工具最大的优点就是我们在修改了代码之后，我们并不需要重新打开这个浏览器，或者去刷新，因为他是实时的为我们显示修改后的内容，前提是你得CtrlS保存你的代码
JavaScript基本语法
注释
-
单行注释
// 注释的内容
-
多行注释
/* 注释的内容 */
输入输出语句：
在JS当中常见的输入输出语句有以下几种：
那么什么叫控制台输出啊，就是在我们这个浏览器的控制台上来进行显示的，
注意：我们的页面内容输出，是在一行上进行显示的， 
可以看到是不是没有一个换行的效果啊 
那么怎么样才能让他实现一个换行的效果呢? 
即我们的页面内容输出语句，还可以去写我们HTML中的相关的标签 
变量和常量：
JavaScript 属于弱类型的语言，定义变量时不区分具体的数据类型，只有你给它赋值了，它才有数据类型了，即这个值是有数据类型的。 
可以看到是不是没有任何的显示，那有人说不对啊，即使你这个l1显示不出来，那这个l2肯定会显示出来啊，要注意，这个l1是一个局部变量，它出了这个大括号就用不了了，用不了我们还强行进行使用，那么它就会报错 
这个错误，我们是在开发者工具中才能查看的到的， 
原始数据类型和typeof方法
之前在学习定义变量的时候，我们说过由于JS是一种弱类型的语言，在定义变量的时候不需要区分具体的数据类型，但是呢，我们是在定义的时候不需要区分，但是它还是有具体的数据类型的，那下面我们就看下在JS当中有哪些原始的数据类型。
注意：undefined就代表，定义好变量之后，没给他去赋值
运算符
-
算数运算符
赋值运算符 
比较运算符 
逻辑运算符 
三元运算符
-
三元运算符格式
(比较表达式) ? 表达式1 : 表达式2;
-
执行流程
如果比较表达式为true，则取表达式1
如果比较表达式为false，则取表达式2
注意：字符串类型数字进行运算，会自动转换类型，除了+号，因为+号都是做的一个字符串拼接的操作
注意：对于比较运算符来说，添加换行的时候必须将比较关系用小括号括起来，不然就会变成num==num+ "<br‘>"，即num与num+ "<br‘>"的比较
流程控制和循环语句：
if 语句
//if语句
let month = 3;
if(month >= 3 && month <= 5) {
document.write("春季");
}else if(month >= 6 && month <= 8) {
document.write("夏季");
}else if(month >= 9 && month <= 11) {
document.write("秋季");
}else if(month == 12 || month == 1 || month == 2) {
document.write("冬季");
}else {
document.write("月份有误");
}
document.write("<br>");switch 语句
//switch语句
switch(month){
case 3:
case 4:
case 5:
document.write("春季");
break;
case 6:
case 7:
case 8:
document.write("夏季");
break;
case 9:
case 10:
case 11:
document.write("秋季");
break;
case 12:
case 1:
case 2:
document.write("冬季");
break;
default:
document.write("月份有误");
break;
}
document.write("<br>");**for 循环**for循环
//for循环
for(let i = 1; i <= 5; i++) {
document.write(i + "<br>");
}while 循环
//while循环
let n = 6;
while(n <= 10) {
document.write(n + "<br>");
n++;
}数组（是JS中的对象）
-
数组的使用和 java 中的数组基本一致，但是在 JavaScript 中的数组更加灵活，数据类型和长度都没有限制。
-
定义格式
-
let 数组名 = [元素1,元素2,…];
-
let 数组名 = [长度];
-
-
索引范围
-
从 0 开始，最大到数组长度-1
-
-
数组长度
-
数组名.length
-
-
数组高级运算符 …
-
数组复制
-
合并数组
-
字符串转数组
-
注意：因为数组作为JS对象，所以可以调用方法，这里用数组名.push（元素），也可以添加元素，添加到这个数组的末位
函数：
-
函数类似于 java 中的方法，可以将一些代码进行抽取，达到复用的效果
-
定义格式
function 方法名(参数列表) { 方法体; return 返回值; } -
可变参数 就是当我们这个方法的参数的个数，是不确定的情况下，就可以使用可变参数的函数了
function 方法名(…参数名) { 方法体; return 返回值; } -
匿名函数
function(参数列表) { 方法体; }
注意：JS函数里没有重载的概念，只有覆盖
JavaScript DOM
DOM介绍
-
DOM(Document Object Model)：文档对象模型。
-
将 HTML 文档的各个组成部分，封装为对象。借助这些对象，可以对 HTML 文档进行增删改查的动态操作。
我们的DOM指的就是说：当我们在加载这个文档的时候，它会在内存当中给我们形成一个DOM树，树形结构就如上图，首先文档，就代表我们的这个html文件，可以看到我们的所有标签都是元素对象，标签中的属性都是属性对象，标签内部的文本内容就是我们的文本对象
注意：document对象，是JS默认给我们提供的对象
Element元素对象的获取操作
如果想要获取标签对象的话，是需要document对象的，而document对象不需要我们自行去创建，它是JS默认给我们提供的对象，供我们使用
具体方法 ：
代码实现 ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素的获取</title>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div class="cls">div3</div>
<div class="cls">div4</div>
<input type="text" name="username"/>
</body>
<script>
//1. getElementById() 根据id属性值获取元素对象
let div1 = document.getElementById("div1");
//alert(div1);
//2. getElementsByTagName() 根据元素名称获取元素对象们，返回数组
let divs = document.getElementsByTagName("div");
//alert(divs.length);
//3. getElementsByClassName() 根据class属性值获取元素对象们，返回数组
let cls = document.getElementsByClassName("cls");
//alert(cls.length);
//4. getElementsByName() 根据name属性值获取元素对象们，返回数组
let username = document.getElementsByName("username");
//alert(username.length);
//5. 子元素对象.parentElement属性 获取当前元素的父元素
let body = div1.parentElement;
alert(body);
</script>
</html>
Element元素对象的增删改操作
具体方法
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素的增删改</title>
</head>
<body>
<select id="s">
<option>---请选择---</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
</select>
</body>
<script>
//1. createElement() 创建新的元素
let option = document.createElement("option");
//为option添加文本内容
option.innerText = "深圳";
//2. appendChild() 将子元素添加到父元素中
let select = document.getElementById("s");
select.appendChild(option);
//3. removeChild() 通过父元素删除子元素
//select.removeChild(option);
//4. replaceChild() 用新元素替换老元素
let option2 = document.createElement("option");
option2.innerText = "杭州";
select.replaceChild(option2,option);
</script>
</html>
Attribute属性的操作：
具体方法 ：
代码实现 ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性的操作</title>
<style>
.aColor{
color: blue;
}
</style>
</head>
<body>
<a>点我呀</a>
</body>
<script>
//1. setAttribute() 添加属性
let a = document.getElementsByTagName("a")[0];
a.setAttribute("href","https://www.baidu.com");
//2. getAttribute() 获取属性
let value = a.getAttribute("href");
//alert(value);
//3. removeAttribute() 删除属性
//a.removeAttribute("href");
//4. style属性 添加样式
//a.style.color = "red";
//5. className属性 添加指定样式
a.className = "aColor";
</script>
</html>即，因为JS中class相当于关键字，所以JS将class属性名变为classname，所以操作classname属性，本质上就是在操作HTML中的class属性
Text文本的操作：
具体方法：
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本的操作</title>
</head>
<body>
<div id="div"></div>
</body>
<script>
//1. innerText 添加文本内容，不解析标签
let div = document.getElementById("div");
div.innerText = "我是div";
//div.innerText = "<b>我是div</b>"; 这里仅仅将标签添加为文本内容了，标题标签没有起到效果
//2. innerHTML 添加文本内容，解析标签
div.innerHTML = "<b>我是div</b>";
</script>
</html> 
JavaScript 事件
事件介绍
事件指的就是当某些组件执行了某些操作后，会触发某些代码的执行。
常用的事件：
了解的事件：
事件操作
绑定事件
方式一
通过标签中的事件属性进行绑定。
<button id="btn" onclick="执行的功能"></button>方式二
通过 DOM 元素属性绑定。
document.getElementById("btn").onclick = 执行的功能 
JavaScript面向对象：
JS中类的定义及使用：
constructor关键字是用来声明构造方法的
对于这种JS定义类和使用类的方式我们不是很常用
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类的定义和使用</title>
</head>
<body>
</body>
<script>
//定义Person类
class Person{
//构造方法
constructor(name,age){
this.name = name;
this.age = age;
}
//show方法
show(){
document.write(this.name + "," + this.age + "<br>");
}
//eat方法
eat(){
document.write("吃饭...");
}
}
//使用Person类
let p = new Person("张三",23);
p.show();
p.eat();
</script>
</html>字面量类的定义和使用（在JS当中类的定义和使用常用的方式）
这种方式是我们在定义类的同时，也把它的对象给创建出来了
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字面量定义类和使用</title>
</head>
<body>
</body>
<script>
//定义person
let person = {
name : "张三",
age : 23,
hobby : ["听课","学习"],
eat : function() {
document.write("吃饭...");
}
};
//使用person
document.write(person.name + "," + person.age + "," + person.hobby[0] + "," + person.hobby[1] + "<br>");
person.eat();
</script>
</html>继承：
-
继承：让类与类产生子父类的关系，子类可以使用父类有权限的成员。
-
继承关键字：extends
-
顶级父类：Object
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>继承</title>
</head>
<body>
</body>
<script>
//定义Person类
class Person{
//构造方法
constructor(name,age){
this.name = name;
this.age = age;
}
//eat方法
eat(){
document.write("吃饭...");
}
}
//定义Worker类继承Person
class Worker extends Person{
constructor(name,age,salary){
super(name,age);
this.salary = salary;
}
show(){
document.write(this.name + "," + this.age + "," + this.salary + "<br>");
}
}
//使用Worker
let w = new Worker("张三",23,10000);
w.show();
w.eat();
</script>
</html>在子类构造器中的super（），意思就是把获取到的name值和age值传递给父类，由父类来为name和age进行赋值
JavaScript内置对象
因为除了我们自己可以去定义一些类以外，在JS当中还为我们提供了一些内置对象来进行使用，这些内置对象就相当于一些工具类，在工具类里面给我们提供了一些不同的方法可以完成不同的功能，
1.内置对象---------Number
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Number</title>
</head>
<body>
</body>
<script>
//1. parseFloat() 将传入的字符串浮点数转为浮点数
document.write(Number.parseFloat("3.14") + "<br>");
//2. parseInt() 将传入的字符串整数转为整数
document.write(Number.parseInt("100") + "<br>");
document.write(Number.parseInt("200abc") + "<br>"); // 从数字开始转换，直到不是数字为止
</script>
</html> 
注意事项：比如我们传一个200abc，那么这样一个字符串数字，如果我们是在java里面通过integer这个包装类来进行转换的话，他是不是就直接报错了呀，因为出现了非数字类型的，所以它就转换不成功，但是要注意，在我们的JS里面它是可以进行转换的，那么这个转换的结果是什么？可以看到还是200，
2.内置对象---------Math
方法介绍
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Math</title>
</head>
<body>
</body>
<script>
//1. ceil(x) 向上取整
document.write(Math.ceil(4.4) + "<br>"); // 5
//2. floor(x) 向下取整
document.write(Math.floor(4.4) + "<br>"); // 4
//3. round(x) 把数四舍五入为最接近的整数
document.write(Math.round(4.1) + "<br>"); // 4
document.write(Math.round(4.6) + "<br>"); // 5
//4. random() 随机数,返回的是0.0-1.0之间范围(含头不含尾)
document.write(Math.random() + "<br>"); // 随机数
//5. pow(x,y) 幂运算 x的y次方
document.write(Math.pow(2,3) + "<br>"); // 8
</script>
</html> 
3.内置对象---------Date
方法说明
构造方法：
Date是一个普通的对象，不是静态的所以需要我们手动的去创建对象，创建对象就需要我们的构造方法了
成员方法
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Date</title>
</head>
<body>
</body>
<script>
//构造方法
//1. Date() 根据当前时间创建对象
let d1 = new Date();
document.write(d1 + "<br>");
//2. Date(value) 根据指定毫秒值创建对象
let d2 = new Date(10000);
document.write(d2 + "<br>");
//3. Date(year,month,[day,hours,minutes,seconds,milliseconds]) 根据指定字段创建对象(月份是0~11) //这里中括号代表可选
let d3 = new Date(2222,2,2,20,20,20); // 对于这里的2月，其实代表3月
document.write(d3 + "<br>");
//成员方法
//1. getFullYear() 获取年份
document.write(d3.getFullYear() + "<br>");
//2. getMonth() 获取月份
document.write(d3.getMonth() + "<br>");
//3. getDate() 获取天数
document.write(d3.getDate() + "<br>");
//4. toLocaleString() 返回本地日期格式的字符串
document.write(d3.toLocaleString());
</script>
</html>
4.内置对象---------String
方法说明
-
构造方法
成员方法
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>String</title>
</head>
<body>
</body>
<script>
//1. 构造方法创建字符串对象
let s1 = new String("hello");
document.write(s1 + "<br>");
//2. 直接赋值
let s2 = "hello";
document.write(s2 + "<br>");
//属性
//1. length 获取字符串的长度
document.write(s2.length + "<br>");
//成员方法
//1. charAt(index) 获取指定索引处的字符
document.write(s2.charAt(1) + "<br>");
//2. indexOf(value) 获取指定字符串出现的索引位置
document.write(s2.indexOf("l") + "<br>");
//3. substring(start,end) 根据指定索引范围截取字符串(含头不含尾)
document.write(s2.substring(2,4) + "<br>");
//4. split(value) 根据指定规则切割字符串，返回数组
let s3 = "张三,23,男";
let arr = s3.split(",");
for(let i = 0; i < arr.length; i++) {
document.write(arr[i] + "<br>");
}
//5. replace(old,new) 使用新字符串替换老字符串
let s4 = "你会不会跳伞啊？让我落地成盒。你妹的。";
let s5 = s4.replace("你妹的","***");
document.write(s5 + "<br>");
</script>
</html>
返回的是第一次出现这个字符串索引的位置
5.内置对象---------RegExp
正则表达式：是一种对字符串进行匹配的规则。
它是一个正则表达式对象，比如说我们会在页面中填写一些数据，那么我们要对这些数据做一些条件判断，就是说我们所填写的数据是否符合我们之前定义的那些规则，比如说这个用户名，我们想对这个用户名进行一个匹配，说这个用户名必须是4到16位才可以，那么说我们没有去满足这个条件的话，那么这个地方就会给我们提示，那么这么一个匹配的规则我们就可以通过正则表达式来实现
方法说明
-
构造方法&成员方法
-
规则
-
这些规则是我们常用的一些规则，至于我们其他的一些规则，在我们的这块笔记的资料里有，我们可以去查看
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RegExp</title>
</head>
<body>
</body>
<script>
//1.验证手机号
//规则：第一位1，第二位358，第三到十一位必须是数字。总长度11
let reg1 = /^[1][358][0-9]{9}$/;
document.write(reg1.test("18688888888") + "<br>");
//2.验证用户名
//规则：字母、数字、下划线组成。总长度4~16
let reg2 = /^[a-zA-Z_0-9]{4,16}$/;
document.write(reg2.test("zhang_san123"));
</script>
</html> 
6.内置对象---------Array
成员方法
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Array</title>
</head>
<body>
</body>
<script>
let arr = [1,2,3,4,5];
//1. push(元素) 添加元素到数组的末尾
arr.push(6);
document.write(arr + "<br>");
//2. pop() 删除数组末尾的元素
arr.pop();
document.write(arr + "<br>");
//3. shift() 删除数组最前面的元素
arr.shift();
document.write(arr + "<br>");
//4. includes(元素) 判断数组中是否包含指定的元素
document.write(arr.includes(2) + "<br>");
//5. reverse() 反转数组元素
arr.reverse();
document.write(arr + "<br>");
//6. sort() 对数组元素排序
arr.sort();
document.write(arr + "<br>");
</script>
</html>
7.内置对象---------Set
JavaScript 中的 Set 集合，元素唯一，存取顺序一致。
方法说明
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Set</title>
</head>
<body>
</body>
<script>
// Set() 创建集合对象
let s = new Set();
// add(元素) 添加元素
s.add("a");
s.add("b");
s.add("c");
s.add("c");
// size属性 获取集合的长度
document.write(s.size + "<br>"); // 3
// keys() 获取迭代器对象
let st = s.keys();
for(let i = 0; i < s.size; i++){
document.write(st.next().value + "<br>");
}
// delete(元素) 删除指定元素
document.write(s.delete("c") + "<br>");
let st2 = s.keys();
for(let i = 0; i < s.size; i++){
document.write(st2.next().value + "<br>");
}
</script>
</html>
8.内置对象---------Map
JavaScript 中的 Map 集合，key 唯一，存取顺序一致。
方法说明
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Map</title>
</head>
<body>
</body>
<script>
// Map() 创建Map集合对象
let map = new Map();
// set(key,value) 添加元素
map.set("张三",23);
map.set("李四",24);
map.set("李四",25);
// size属性 获取集合的长度
document.write(map.size + "<br>");
// get(key) 根据key获取value
document.write(map.get("李四") + "<br>");
// entries() 获取迭代器对象
let et = map.entries();
for(let i = 0; i < map.size; i++){
document.write(et.next().value + "<br>");
}
// delete(key) 根据key删除键值对
document.write(map.delete("李四") + "<br>");
let et2 = map.entries();
for(let i = 0; i < map.size; i++){
document.write(et2.next().value + "<br>");
}
</script>
</html>9.内置对象---------Jason
JSON(JavaScript Object Notation)：是一种轻量级的数据交换格式。说白了它就是一个特殊格式的字符串，
-
它是基于 ECMAScript 规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
-
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于计算机解析和 生成，并有效的提升网络传输效率。
也就是说我们的这些数据如果想在网络之间进行传输的话，那么我们就可以采用特殊格式的字符串，因为字符串在传输起来，效率还是很高的
那具体是什么意思呢？我们接下来举个例子，比如说我现在想做一个查询天气的这样一个功能的网站，那么这个网站里可能显示各种各样的信息，那么这个网站做起来可能很简单，难的是什么呢？是这些数据，比如你这温度，湿度怎么获取啊，难道说我们为了做这样一个功能性的网站，难道说还得去购买哪些昂贵的设备，比如说再去请一些专业的人员，再去帮我们进行一些测算吗？那这个成本就太大了，那怎么办呢？其实关于天气的这些数据，有一些机构已经帮我们测算出来了，比如说气象局，那这个机构是不是专门测算天气的数据的呀，那如果说我们想做一些查询天气的网站的话，那么就会找到气象局，它呢，就会把这些数据传递给我们，而这个数据是怎么进行传递的呢？就是采用特殊格式的字符串，而这种特殊格式的字符串其实就是我们的json字符串，那如果说气象局给我们提供了这样一个字符串以后，我们就可以借助于json，来把这个字符串转换成一个js当中的对象，有了对象以后，我们就可以获取一些它里面的属性值，那反过来说，我们还可以借助json，再把我们自己的一个js对象，再给他转换成这样一个格式的字符串，
方法说明
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON</title>
</head>
<body>
</body>
<script>
//定义天气对象
let weather = {
city : "北京",
date : "2088-08-08",
wendu : "10° ~ 23°",
shidu : "22%"
};
//1.将天气对象转换为JSON格式的字符串
let str = JSON.stringify(weather);
document.write(str + "<br>");
//2.将JSON格式字符串解析成JS对象
let weather2 = JSON.parse(str);
document.write("城市：" + weather2.city + "<br>");
document.write("日期：" + weather2.date + "<br>");
document.write("温度：" + weather2.wendu + "<br>");
document.write("湿度：" + weather2.shidu + "<br>");
</script>
</html>
JavaScript BOM
-
BOM(Browser Object Model)：浏览器对象模型。
-
将浏览器的各个组成部分封装成不同的对象，方便我们进行操作。 也就是说它是帮助我们操作浏览器功能的
那么这个浏览器分成那些组成部分呢？我们看下图
1.Windows窗口对象
-
定时器
-
唯一标识 setTimeout(功能，毫秒值)：设置一次性定时器。
-
clearTimeout(标识)：取消一次性定时器。
-
唯一标识 setInterval(功能，毫秒值)：设置循环定时器。
-
clearInterval(标识)：取消循环定时器。
-
-
加载事件
-
window.onload：在页面加载完毕后触发此事件的功能。
-
-
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>window窗口对象</title>
<script>
//一、定时器
function fun(){
alert("该起床了！");
}
//设置一次性定时器
//let d1 = setTimeout("fun()",3000);
//取消一次性定时器
//clearTimeout(d1);
//设置循环定时器
//let d2 = setInterval("fun()",3000);
//取消循环定时器
//clearInterval(d2);
//加载事件
window.onload = function(){
let div = document.getElementById("div");
alert(div);
}
</script>
</head>
<body>
<div id="div">dddd</div>
</body>
<!-- <script>
//一、定时器
function fun(){
alert("该起床了！");
}
//设置一次性定时器
//let d1 = setTimeout("fun()",3000);
//取消一次性定时器
//clearTimeout(d1);
//设置循环定时器
//let d2 = setInterval("fun()",3000);
//取消循环定时器
//clearInterval(d2);
//加载事件
let div = document.getElementById("div");
alert(div);
</script> -->
</html>
2.Location地址栏对象
href 属性
就是浏览器的地址栏。我们可以通过为该属性设置新的 URL，使浏览器读取并显示新的 URL 的内容。
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>location地址栏对象</title>
<style>
p{
text-align: center;
}
span{
color: red;
}
</style>
</head>
<body>
<p>
注册成功！<span id="time">5</span>秒之后自动跳转到首页...
</p>
</body>
<script>
//1.定义方法。改变秒数，跳转页面
let num = 5;
function showTime() {
num--;
if(num <= 0) {
//跳转首页
location.href = "index.html";
}
let span = document.getElementById("time");
span.innerHTML = num;
}
//2.设置循环定时器，每1秒钟执行showTime方法
setInterval("showTime()",1000);
</script>
</html>
扫一扫
2221
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
