JavaScript
3. JavaScript
JavaScript包括三大块：
ECMAScript：JS的核心语法（ES规范 / ECMA-262标准）
DOM（Document Object Medel）：文档对象模型，对网页当中的HTML标签节点进行增删改的过程。HTML文档被当作一颗DOM树来看待：var domObj = document.getElementById(“id”);
BOM(Browser Object Medel)：浏览器对象模型，打开一个新的浏览器窗口、前进、后退、浏览器地址栏上的地址等都是BOM编程。
DOM和BOM的区别和联系？
-
BOM的顶级对象是：window
-
DOM的顶级对象是：document
-
实际上BOM是包括DOM的，举例如下
window.onload = function() {
var domObj = window.document.getElementById("id")
//可简写为
var domObj = document.getElementById("id")
}
3.1. 嵌入JS三种方式以及JS的注释
3.1.1. 行内引入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行内引入方式</title>
</head>
<body>
<!--window为JS内置对象，代表浏览器对象，可省略不写-->
<input type="button" value="button" onclick="window.alert('hello,js')">
</body>
</html>
3.1.2. 内部引入方式
内部引入方式也叫javascript脚本块。javascript脚本块可以在一个页面中出现多次，也可以出现在任意位置，按照自上而下的顺序依次执行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内部引入方式</title>
<script type="text/javascript">
alert("hello,js1")
</script>
</head>
<body>
<script type="text/javascript">
alert("hello,js2")
</script>
</body>
</html>
<script type="text/javascript">
alert("hello,js3")
</script>
3.1.3. 外部引入方式
通过外部引入方式引入js文件时，<script scr=”index.js”></script> 不能写成单标签，且标签之间不能写任何内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外部引入方式</title>
</head>
<body>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
3.1.4. JS中的注释
JavaScript一共有两种注释方式，分别为单行注释和多行注释，使用方式和Java一模一样。
<script type="text/javascript">
//单行注释
/*
多行注释
*/
</script>
3.2. 标识符和关键字
这里只介绍声明变量的三种标识符：
- var：使用war声明的变量可被重复声明，会导致值被覆盖问题
<script type="text/javascript">
var num = 10;
var num = 100;
console.log(num); //输出为100
</script>
- let：ES6中的新语法，let声明的变量不可被重复声明
<script type="text/javascript">
let num = 10;
let num = 100; //Uncaught SyntaxError: Identifier 'num' has already been declared
</script>
- const：代表声明的是常量，值不可被修改
<script type="text/javascript">
const num = 10;
num = 100; //Uncaught TypeError: Assignment to constant variable
</script>
3.3. 六大变量数据类型
注：JavaScript和Python一样都属于弱类型语言，在编译时由解释器去识别数据类型，这里就不过多叙述。
JavaScript中数据类型有：原始类型、引用类型
原始类型：undifine、number、string、boolean、null
引用类型：object、object的子类
我们可以使用JS内置函数 typeof 查看变量的数据类型：
<script type="text/javascript">
console.log(typeof undefined);
console.log(typeof 10);
console.log(typeof false);
console.log(typeof "zhangsan");
console.log(typeof new Object());
console.log(typeof null);
</script>
注意：null的数据类型应该为null，但这里打印出来的是object
3.3.1. undifined类型
undifined类型只有一个值，这个值就是undefine。当一个变量没有赋值或赋值为undefined，该变量类型为undifined。
<script type="text/javascript">
var a;
var b = undefined;
console.log(a);
console.log(b);
</script>
3.3.2. number类型
整数、小数、不是数字（NaN）、无穷大（Infinity）都属于number类型。
<script type="text/javascript">
var v1 = 1;
var v2 = 3.14;
var v3 = 10.00;
var v4 = NaN;
var v5 = Infinity;
console.log(typeof v1)
console.log(typeof v2)
console.log(typeof v3)
console.log(typeof v4)
console.log(typeof v5)
</script>
3.3.2.1 isNaN()函数
isNaN()是一个JS内置函数，用于判断传入变量是否为数字。返回结果为true表示不是一个数字，返回false则表示是是一个数字。
<script type="text/javascript">
console.log(isNaN(NaN)) //输出为false
console.log(isNaN(Infinity)) //输出为false
console.log(isNaN(undefined)) //输出为true
</script>
注意：NaN虽然是number类型，但它不是一个数字
3.3.2.2 parseInt()函数
parseInt()函数可以将字符串或小数自动转换成数字，并且取整数位。
<script type="text/javascript">
var str = "3.14";
var num = 3.14;
console.log(parseInt(str)) //输出结果为3
console.log(parseInt(num)) //输出结果为3
</script>
3.3.2.2 parseFloat()函数
parseFloat()函数可以将字符串自动转换成小数。
<script type="text/javascript">
var str = "3.14";
console.log(parseFloat(str)) //输出结果为3.14
</script>
3.3.2.2 Math.ceil()函数
Math数学类是JS的内置类，数学类中有一个函数叫做ceil()，作用是向上取整。
<script type="text/javascript">
var num = 3.14;
console.log(Math.ceil(num)) //输出结果为4
</script>
3.3.3. bollean类型
在单条件if判断中，undefiend、0、””、false、null都表示false，其他表示true
3.3.3.1 Boolean()函数
Boolean()函数的作用是将非布尔类型转换成布尔类型
<script type="text/javascript">
console.log(Boolean(undefined)); //输出为false
console.log(Boolean(0)); //输出为false
console.log(Boolean(null)); //输出为false
</script>
3.3.4. string类型
JavaScript中字符串可以使用单引号，也可以使用双引号
字符串下标从0开始
3.3.4.1. 创建字符串方式一
<script type="text/javascript">
var str = "zhangsan";
console.log(str) //输出为string
</script>
3.3.4.2. 创建字符串方式二
使用JS内置的类String（String的父类是Object）。创建出来的变量类型为object，但是和string类型有共同的属性和函数。
<script type="text/javascript">
var str = new String("zhangsan");
console.log(str) //输出为object
</script>
其实基本类型string并没有属性和函数，而是JS为它创建了一个对应的基本包装类型String，它根据基本类型的值实例化出了一个实例，让这个实例去调用指定方法，最后销毁自己
//我们平常写程序的过程：
var str = "helloworld"; //string基本类型
var len = str.length; //在执行到这一句的时候 后台会自动完成以下动作 ：
//后台偷偷发生的
var _str = new String("helloworld"); //1.创建String类型的一个实例
var len = _str.length; //2.在实例上调用指定的方法，并且返回给len
_str = null; //3.销毁这个实例
3.3.4.3. length属性
获取字符串的长度。
<script type="text/javascript">
var str = "zhangsan";
console.log(str.length) //输出为8
</script>
3.3.4.4. substr()函数
从下标为2开始，往后截取4个字符。
<script type="text/javascript">
var str = "abcdefg";
console.log(str.substr(2,4)); //输出为cdef
</script>
3.3.4.5. substring()函数
截取下标为2，到下标为4且不包含下标为4的字符串。
<script type="text/javascript">
var str = "abcdefg";
console.log(str.substring(2,4)); //输出为cd
</script>
3.3.5. object类型（以及创建自定义类）
object类型是所有类型的父类，自定义的类型默认继承object类。
<script>
//创建自定义类
var Student = function(name,age){
this.name = name;
this.age = age;
this.study = function(){
console.log("我爱学习~");
}
//静态方法，直接使用类名调用
Student.learn = function(){
console.log("学习爱我~");
}
}
var student = new Student("张三",20);
console.log(student);
</script>
访问类中的属性和函数：
<script>
var Student = function(name,age){
this.name = name;
this.age = age;
this.study = function(){
console.log("我爱学习~");
}
//静态方法，直接使用类名调用
Student.learn = function(){
console.log("学习爱我~");
}
}
//Student()，直接这样调用，只是当作一个普通函数去执行，不会在堆中分配空间，也就是不会创建对象
//new Student()，这样去调用，就相当于调用类的构造方法，创建对象，并在堆内存中分配空间
var student = new Student("张三",20);
console.log(student.name);
console.log(student.age);
student.study();
console.log(student["name"]);
console.log(student["age"]);
student["study"]();
//类的静态函数的调用
//需要注意的是，和Java不同，JS中的静态方法只有new对象后，才能通过 "类名.静态方法名()" 的方式调用
Student.learn();
</script>
3.3.5.1 prototype属性
可以通过prototype这个属性给类动态地扩展属性和函数
<script>
var Student = function(name,age){
this.name = name;
this.age = age;
}
//给Student类动态地扩展一个getName()函数
Student.prototype.getName = function(){
return this.name;
}
var student = new Student("张三",20);
console.log(student.getName()); //输出为：张三
</script>
3.3.6. null类型
null类型只有一个值，这个值就是null。只有当一个变量被赋值为null，该变量类型为才为null。
<script type="text/javascript">
var val = null;
</script>
3.3.7. null、NaN、undefined的区别
<script type="text/javascript">
//null NaN undefined数据类型不一样
alert(typeof null); //输出为：object
alert(typeof NaN); //输出为：number
alert(typeof undefined); //输出为：undefined
//null和undefined在值上可以等同
alert(null == NaN); //输出为：false
alert(null == undefined); //输出为：ture
alert(undefined == NaN); //输出为：false
//在JS中有两个比较特殊的运算符
//==（等同运算符，只判断值是否相等）
//===（全等运算符，既判断值是否相等，又判断类型是否相等）
alert(null === NaN); //输出为：false
alert(null === undefined); //输出为：false
alert(undefined === NaN); //输出为：false
</script>
3.4. 函数定义与调用
3.4.1. 函数声明方式一
<script type="text/javascript">
function helloworld(){
console.log("hello,world")
}
</script>
3.4.2. 函数声明方式二
<script type="text/javascript">
var helloworld = function(){
console.log("hello,world")
}
</script>
3.4.2. 函数传参与直接调用
<script type="text/javascript">
var add = function(num1,num2){
if(!isNaN(num1) && !isNaN(num2)) {
return num1 + num2;
}else{
console.log("输入有误");
}
}
var result = add(1,2);
console.log(result); //输出为3
</script>
3.4.2. 函数绑定事件
<div>
<input type="button" value="提交" onclick="submit()" />
</div>
<script type="text/javascript">
var submit = function(){
alert("提交成功")
}
</script>
3.4.3. 构造函数
构造函数的首字母必须大写，用于创建自定义对象。
<script type="text/javascript">
var Student = function(name,age){
this.name = name;
this.age = age;
}
var student = new Student("张三",20);
console.log(student);
</script>
3.4.4. 全局变量和局部变量
【全局变量】：在函数体外部声明的变量属于全局变量。全局变量的生命周期为在浏览器打开时开辟内存空间，浏览器关闭时销毁。在浏览器关闭前全局变量会一直存在浏览器1的内存中，因此尽量少用全局变量。
【局部变量】：在函数体内部声明的变量属于局部变量，包括一个函数的形参。局部变量的生命周期为在函数执行时开辟内存空间，函数执行结束后销毁。
当一个变量声明时没有使用var、let、const关键字，那么无论这个变量是在哪里声明的，都属于全局变量。
3.5. JS中的事件
3.5.1 常用事件
<script type="text/javascript">
/*
JS中的事件：
blur失去焦点
focus获得焦点
click鼠标单击
dblclick鼠标双击
keydown键盘按下
keyup键盘弹起
mousedown鼠标按下
moseover鼠标经过
mosemove鼠标移动
moseout鼠标离开
moseup鼠标弹起
reset表单重置
submit表单提交
load页面加载完毕（整个HTML页面中所有的元素全部加载完毕之后发生）
change下拉列表选中项改变，或文本框内容改变
select文本被选定
*/
</script>
任何一个事件都会对应一个事件句柄，事件句柄是在事件前添加”on”，如”onclick”
“onclick”这个事件句柄出现在一个HTML标签的属性位置上（事件句柄以属性形式存在）
3.5.2. 注册事件的两种方式
3.5.2.1. 直接在标签种使用标签句柄
<!--注册事件的第一种方式，直接在HTML标签中使用事件句柄-->
<!--以下代码含义是：将helloworld()函数注册到按钮上，等待click事件发生后，该函数被浏览器调用，我们称这个函数为回调函数-->
<input type="button" value="提交" onclick="helloworld()"/>
<script type="text/javascript">
//对于当前程序来说，helloworld()函数称为回调函数（callback函数）
//回调函数特点：自己把这个函数代码写出来了，但是这个函数不是自己负责调用，而是事件发生后由浏览器调用
var helloworld = function(){
alert("hello,world")
}
</script>
3.5.2.2. 使用纯JS代码
<!--注册事件的第二种方式，使用纯JS代码完成事件的注册-->
<input type="button" value="提交" id="mybtn"/>
<script type="text/javascript">
var helloworld = function(){
alert("hello,world")
}
// 第一步：先获取这个按钮对象（ducument就代表整个HTML页面）
var btn = document.getElementById("mybtn")
// 第二布：给按钮对象的onclick属性赋值
btn.onclick = helloworld;// 注意：不能加小括号
</script>
<script type="text/javascript">
//使用匿名函数
var btn = document.getElementById("mybtn").onclick = function(){
alert("hello,world");
}
</script>
3.5.3 JS代码的执行顺序
在使用第二种方式注册事件，也就是纯JS代码注册事件时。我们需要注意JS代码和标签出现的顺序，如下<input/>标签在JS代码后出现，执行JS代码时就不能根据id找到input标签，事件自然也就注册失败了。
<script type="text/javascript">
var btn = document.getElementById("mybtn").onclick = function(){
alert("hello,world");
}
</script>
<input type="button" value="提交" id="mybtn"/>
那么该如何解决呢？可以加上”window.onload=函数”代表页面加载完毕后再执行函数中的JS代码。
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById("mybtn");
btn.onclick = function(){
alert("hello,world");
}
}
</script>
<input type="button" value="提交" id="mybtn"/>
一个小案例：
<input type="text" id="mytext"/>
<input type="button" value="将文本框修改为复选框" id="mybtn">
<script type="text/javascript">
window.onload = function() {
document.getElementById("mybtn").onclick = function() {
// 一个标签节点对象中的属性都可以"."出来
document.getElementById("mytext").type = "checkbox";
}
}
</script>
3.5.3. 捕捉回车键
我们平时在网站上登陆时，一般输入密码后会直接按下回车键进行登录，并不需要去鼠标点击登录按钮，这就需要使用JS的”keydown”键盘按下事件完成。
<input type="text" id="password"/>
<script type="text/javascript">
window.onload = function() {
var passwordElm = document.getElementById("password");
//回车键键值：13 ESC键键值：27
//若加上形参event（可随意命名），会接收到浏览器发过来的当前事件的对象
passwordElm.onkeydown = function(event) {
console.log(event);
//获取键值
if(event.keyCode == 13) {
alert("正在进行验证...");
}
}
}
</script>
如图先按下”a”，再按回车键”enter”
分别接收到两次浏览器传入的键盘按下事件的对象
3.5.4. void运算符
正常来说，当我们点击超链接时，页面会发生跳转。要是的保留住超链接的样式同时，用户点击该超链接的时候执行一段JS代码，但页面不进行跳转，就得使用void运算符。
<h1>当前页面</h1>
<a href="https://www.baidu.com" onclick="alert('点击了超链接')">此时点击超链接后执行了JS代码，但会发生页面跳转</a>
<h1>当前页面</h1>
<!--
void运算符的语法：void(表达式)，小括号中必须有表达式，一般写0即可
运算原理：执行表达式，但不返回任何结果
"javascript:"作用是告诉浏览器后面是一端JS代码，不能省略
-->
<a href="javascript:void(0)" onclick="alert('点击了超链接')">即保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码，但页面不跳转</a>
3.5.5. JS的控制语句
<script type="text/javascript">
/*
以下控制语句写法同Java
1. if
2. switch
3. while
4. do...while...
5. for
6. break
7. continue
以下为JavaScript特有语句
8. for...in...（了解）
9. with（了解）
*/
</script>
3.5.5.1. for…in…语句(了解)
<script type="text/javascript">
var arr = [1,2,3,4,5];
var student = {username: "张三",age: 20}
//for...in...
for(var i in arr) {//i是数组的下标
console.log(arr[i]);
}
for(var i in student) {//i是类的属性名
console.log(student[i]);
}
</script>
3.5.5.2. with语句(了解)
<script type="text/javascript">
var student = {username: "张三",age: 20};
with(student) {
console.log(username + "," + age);
}
</script>
3.6. DOM编程
3.6.1. DOM编程：设置和获取文本框的value
获取文本框的值value
<input type="text" id="username"/>
<input type="button" value="获取文本框的value" id="btn"/>
<script type="text/javascript">
window.onload = function() {
var btnElm = document.getElementById("btn");
btnElm.onclick = function() {
var usernameElm = document.getElementById("username");
console.log(usernameElm.value);
}
}
</script>
设置（或修改）文本框的值value
<input type="text" id="username"/>
<input type="button" value="设置（修改）文本框的value" id="btn"/>
<script type="text/javascript">
window.onload = function() {
var btnElm = document.getElementById("btn");
btnElm.onclick = function() {
document.getElementById("username").value = "李四";
}
}
</script>
3.6.2. DOM编程：innerHTML和innerText属性
-
innerHTML会把后面的”字符串”当作一段HTML代码解释并输出
-
innerText即使后面是一段HTML代码，也只是当作普通字符输出
<input type="button" value="设置div中的内容" id="btn"/>
<div id="div1"></div>
<div id="div2"></div>
<script type="text/javascript">
window.onload = function() {
var btnElm = document.getElementById("btn");
btn.onclick = function() {
var div1Elm = document.getElementById("div1");
div1Elm.innerHTML = "<a href='https://www.baidu.com'>点我跳转百度</a>";
var div2Elm = document.getElementById("div2");
div2Elm.innerText = "<a href='https://www.baidu.com'>点我跳转百度</a>";
}
}
</script>
3.6.3. DOM编程：正则表达式
邮箱正则表达式：^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$
JavaScript中两种创建正则表达式对象方法
//第一种创建方式
var regExp = /正则表达式/flags;
//第二种创建方式
var regExp = new RegExp("正则表达式");
邮箱验证实例：
<script type="text/javascript">
window.onload = function() {
document.getElementById("btn").onclick = function() {
var email = document.getElementById("email").value;
var regExp = new RegExp("^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$");
//使用正则表达式对象的test()方法进行验证
if(!regExp.test(email)){
//提示错误信息
document.getElementById("msg").innerText = "邮箱格式错误";
}else{
document.getElementById("msg").innerText = "邮箱格式正确";
}
}
//输入（获得焦点）时不显示提示信息
document.getElementById("email").onfocus = function() {
document.getElementById("msg").innerText = "";
}
}
</script>
3.6.4. DOM编程：字符串的trim函数
<script type="text/javascript">
window.onload = function() {
document.getElementById("btn").onclick = function() {
var username = document.getElementById("username").value;
//去掉字符串前后空白
username = username.trim();
}
}
</script>
3.6.5. DOM编程：复选框的全选与取消全选
<script type="text/javascript">
window.onload = function() {
//获取第一个复选框元素节点
var firstCheckbox = document.getElementById("firstCheckbox");
//根据name获得所有元素
var hobbies = document.getElementsByName("hobbies");
firstCheckbox.onclick = function() {
//获取第一个复选框的选中状况
//checked属性：选中为true，未选中为false
for(var i = 0;i < hobbies.length;i++) {
hobbies[i].checked = this.checked;
}
}
//复选框总数量（不包括第一个）
var all = hobbies.length;
//这个for循环在页面加载完毕时执行
for(var i = 0;i < all;i++) {
//给每个多选框绑定点击事件
hobbies[i].onclick = function() {
var count = 0;
for(var i = 0;i < all;i++) {
if(hobbies[i].checked) {
count++;
}
}
firstCheckbox.checked = (count == all);
}
}
}
</script>
3.6.6. DOM编程：获取下拉列表选中项的value
<select id="option">
<option value="">--请选择省份--</option>
<option value="001">湖南省</option>
<option value="002">湖北省</option>
<option value="003">广东省</option>
<option value="004">广西省</option>
</select>
<script type="text/javascript">
window.onload = function() {
var option = document.getElementById("option");
//根据选项得到option标签的value属性值
//绑定改变事件，当下拉框改变时获取选中项的value属性值
option.onchange = function() {
console.log(this.value);
}
}
</script>
3.7. JS内置对象
3.7.1. Date类
<script type="text/javascript">
/*
JS中内置的类：Date，可以用来获取时间/日期
*/
//获取系统当前时间
var nowTime = new Date();
//输出到网页上
document.write(nowTime);
document.write("<br/><br/>");
document.write(nowTime.toLocaleString());
document.write("<br/><br/>");
//当以上格式不是自己想要的，可以通过日期获取年月日时分秒信息，自定义日期格式
var year = nowTime.getFullYear(); //返回年份
var month = nowTime.getMonth(); //月份是 0-11
var day = nowTime.getDate(); //返回当前是几号
var week = nowTime.getDay(); //获取一周的第几天 0-6
document.write(year + "年" + (month+1) + "月" + day + "日");
document.write("<br/><br/>");
//重点：怎么获取毫秒数？（从1970年1月1日 00:00:00 000到当前系统时间的总毫秒数）
var times = nowTime.getTime(); //一般使用毫秒数当作时间戳
document.write(times);
</script>
实时在网页上显示时间：
<input type="button" value="显示系统时间" onclick="start()"/>
<input type="button" value="停止显示时间" onclick="stop()"/>
<div id="timeDiv"></div>
<script type="text/javascript">
var printTime = function() {
var time = new Date();
document.getElementById("timeDiv").innerHTML = time.toLocaleString();
}
var start = function (){
//从这行代码执行开始，会每隔1000毫秒调用一次printTime()函数
//注意：不加修饰符的变量为全局变量
e = window.setInterval("printTime()",1000);
}
var stop = function (){
window.clearInterval(e);
}
</script>a
3.7.2. Array类
<script type="text/javascript">
//第一种创建数组的方式（常用）
//创建长度为0的数组
var arr = [];
//数据类型随意
var arr2 = [1,2,3,false,"abc"];
//下标会越界吗？
arr2[7] = "test";
for(var i = 0;i < arr2.length;i++) {
//输出arr2到屏幕上，用空格隔开
document.write(arr2[i] + "<span> </span>")
//输出为：1 2 3 false abc undefined undefined test
}
</script>
<script type="text/javascript">
//第二种创建数组的方式（了解）
var arr = new Array(3);
console.log(arr.length); //输出为 3
//数组常用函数
//1.join()函数，使用指定字符连接数组，返回一个字符串
var arr2 = [1,2,3,4];
var str = arr2.join("-"); //得到字符串 "1-2-3-4""
var str2 = arr2.join(""); //得到字符串 "1234""
//2.push()函数,在数组末尾添加一个元素（数组长度+1）
arr2.push(5);
console.log(arr2); //输出为 [1,2,3,4,5];
//2.push()函数,在数组末尾元素弹出（数组长度-1），返回弹出元素值
console.log(arr2.pop()); //输出为 5
console.log(arr2); //输出为 [1,2,3,4];
</script>
3.8. BOM编程（了解）
3.8.1. BOM编程-open和close
<!--
1. BOM编程中，window对象是顶级对象，代表浏览器窗口
2. window有open()和close()函数，可以开启和关闭窗口
-->
<input type="button" value="打开百度（新窗口）" onclick="window.open('https://www.baidu.com');">
<input type="button" value="打开百度（当前窗口）" onclick="window.open('https://www.baidu.com','_self');">
<input type="button" value="打开百度（新窗口）" onclick="window.open('https://www.baidu.com','_blank');">
<input type="button" value="打开百度（父窗口）" onclick="window.open('https://www.baidu.com','_parent');">
<input type="button" value="打开百度（顶级窗口）" onclick="window.open('https://www.baidu.com','_top');">
<input type="button" value="关闭当前窗口" onclick="window.close();">
3.8.2. BOM编程-弹出消息窗和确认窗
<input type="button" value="弹出消息框" onclick="window.alert('这是消息框');">
<input type="button" value="弹出确认框" onclick="del()">
<script type="text/javascript">
var del = function() {
//若选择确定返回true，选择取消返回false
if(window.confirm('确认删除吗？')) {
//TODO...
}else {
//TODO...
}
}
</script>
3.8.3. BOM编程-history和location对象
使用history对象实现页面后退
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>history</title>
</head>
<body>
<a href="new.html">打开新页面</a>
<!--前提是在此窗口打开过新窗口后又回到此窗口-->
<input type="button" value="前进" onclick="window.history.go(1)">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>new</title>
</head>
<body>
<input type="button" value="后退" onclick="window.history.back()">
<input type="button" value="后退" onclick="window.history.go(-1)">
</body>
</html>
使用location对象实现修改URL网址跳转
<!--
总结：有哪些方法可以通过浏览器向服务器发送请求？
1. 提交表单form（重要！！！）
2. a标签超链接
3. window.location.href = "url"
4. window.open("url")
5. 直接在浏览器地址栏上输入URL，然后回车
以上所有请求方式均可携带数据给服务器，只有通过表单提交的数据才是动态的
6.通过AJAX向服务器发送异步请求（学完JS后就会接着学，重要！！！ ）
-->
<input type="button" value="设置浏览器地址栏上的URL" onclick="goBaidu()">
<script type="text/javascript">
var goBaidu = function() {
var locationObj = window.location;
locationObj.href = "https://www.baidu.com";
}
</script>
3.9. JSON
<script type="text/javascript">
/*
1.什么是JSON，有什么用？
JavaScript Object Notation（JavaScript对象标记），简称JSON（数据交换格式）
JSON主要的作用是：一种标准的数据交换格式。（目前非常流行，90%以上的系统，系统A与系统B交换数据的话，都是采用JSON）
2.JSON是一种标准的轻量级的数据交换格式。特点是：体积小、易解析
3.在实际的开发中有两种数据交换格式，使用较多，其一是JSON，另一个是XML
XML体积较大，解析麻烦，优点是语法严谨（通常银行相关系统之间进行数据交换会使用XML）
*/
//创建一个JSON对象（JSON也可以称为无类型对象，轻量级、体积小、易解析）
var student = {
"username": "张三",
"age": 20
}
//访问JSON对象属性
alert(student.username +student.age);
</script>
3.9.1. 创建JSON对象
<script type="text/javascript">
//创建简单的JSON对象
var student = {
"username": "张三",
"age": 20
}
//创建JSON数组
var students = [
{ "username": "张三","age": 20},
{"username": "李四","age": 20}
]
</script>
3.9.2. eval()函数
<script type="text/javascript">
/*
eval()函数的作用是：
将字符串当作一段JS代码解释并执行
*/
window.eval("var i = 100;");
console.log("i = " + i); //输出为"i = 100"
//java连接数据库，查询数据之后，将数据在java程序中拼接成JSON格式的字符串，将JSON格式的字符串响应到浏览器
//也就是说java响应到浏览器上的仅仅是一个JSON格式字符串，还不是一个JSON对象
//可以使用eval函数，将JSON格式的字符串转换成JSON对象
var fromJava = "{\"username\": \"张三\",\"age\":20}";
//将以上JSON格式的字符串转换成JSON对象
window.eval("var jsonObj = " + fromJava);
console.log(jsonObj.username + "," + jsonObj.age);
</script>
3.9.3. JS中[]和{}的区别
在JavaScript中，[]是数组，{}是JSON对象。
3.9.4. 将JSON数据填充到table表格中
<script type="text/javascript">
var data = {
"total": 3,
"employees": [
{ "id":001, "username": "张三","salary": 7000},
{ "id":002, "username": "李四","salary": 7500},
{ "id":003, "username": "王五","salary": 6000}
]
}
window.onload = function() {
document.getElementById("btn").onclick = function() {
var html = "";
for(var i = 0;i < data.total;i++) {
html += "<tr>" + "<td>"+data.employees[i].id+"</td>" +
"<td>"+data.employees[i].username+"</td>" +
"<td>"+data.employees[i].salary+"</td>" + "</tr>";
}
document.getElementById("employees").innerHTML = html;
var count = document.getElementById("count");
count.innerText = data.total;
}
}
</script>
版权声明：本文为桜花落原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。