阶段三：JS

蟑螂恶霸不是恶霸

已于 2023-01-12 22:56:04 修改

阅读量355

点赞数 1

于 2021-10-20 23:19:28 首次发布

本文链接：https://blog.csdn.net/whatfuswd/article/details/120724244

版权

关键词由CSDN通过智能技术生成

1.为什么学JS？

JavaScript 是 web 开发人员必须学习的 3 门语言中的一门：

HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 控制了网页的行为

JS全称是 JavaScript ， JavaScript 需要与 HTML 和 CSS 一起工作。
JavaScript 是 Web 的编程语言，是JAVA的一种脚本语言。
所有现代的 HTML 页面都使用 JavaScript。

JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它们根本没有关系，java是强语言几乎无所不能，而javascript是脚本语言，只局限于浏览器。

JavaScript遵循ECMA国际组织颁布的ECMAScript标准。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript 的第六版，简称为ES6。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。很多js相关技术都遵循这个标准，如目前最受欢迎的Vue。

微软出了符合规范类似javascript的称为js，但一般开发者忽略它们的差异，全称就习惯叫javascript，简称就习惯叫js。

JavaScript必须想办法触发才可以执行，常见的触发事件有：单击/双击/鼠标划入/鼠标划出…

JavaScript是一种弱类型语言，同其他语言一样，有它自身的语法，数据类型，表达式，算术运算符等。

JavaScript和java一样,可以创建对象并使用对象并且其运行必须在浏览器里，所以是一门基于对象和事件驱动的脚本语言，通常用来提高网页与用户的交互性。

2.静态网页和动态网页

2.1 动态网页

我们有了html超文本标记语言实现了网站页面展现，展现文字、表格、图片、超链接等，有了css样式表实现了页面的美化，这些技术实现了静态网页。

日常展现是已经足够了，但是如果我们要做个注册功能呢？如论坛，我们注册个论坛来发文章，聊天。这就带来一个问题，信息如何根据不同的使用者，展现不同的内容呢？再如我注册登录和你注册登录，我们在网站上显示的登录名称就不同。这html+css就无能为力了，它们无法实现，那谁能办到呢？这时javascript就派上用场了。它能实现浏览器用户和后台服务器进行交互。注册、登录、添加商品到购物车、下订单对它而言都是小菜一碟。有了javascript的加入，实现页面和后台系统的交互，实现用户信息的注册，实现用户的登录，实现个性化的数据展现，功能强大不老少。业界把这样的网页称为动态网页，把这样的网站称为动态网站。
在这里插入图片描述
简而言之，静态网站只能看，不同浏览者看到内容一致不能变化；动态网站可以读写数据，内容根据不同浏览者展示不同的信息。

那么网页是如何和后端交互的呢？
动态网站的软件架构是怎样的呢？

在这里插入图片描述
用户访问页面，页面触发事件创建XHR对象，进行ajax请求，请求访问服务器端，请求被web中间件拦截并进行处理，由控制层框架springmvc中的controller进行接收，controller请求业务层spring框架的service服务，service请求持久层mybatis框架的mapper映射，mapper访问数据库。操作完数据库，返回结果，mybatis封装成java对象传回service，service把java对象传回controller，controller把java对象又转换为json字符串，然后传回浏览器，浏览器传回给调用者XHR，XHR调用回调方法callback，callback进行json字符串的解析，从中拿到要展现的数据，通过javascript处理，最终回显到页面上。

可以看到这个调用过程是非常复杂的，跨越网络，跨域多个服务器，很多技术应用其中，而这一切的始作俑者是谁呢？谁让这一切成为可能，它就是javascript，它实现了用户的请求和响应，实现了数据的动态展现，使早期静态的网站走向了动态的网站。

2.2 名词解释

基于对象
js不仅可以创建对象,也能使用现有的对象。JS没有类的概念，也没有编译的过程。是一边解释一边执行。
事件驱动
在JS中，大部分情况下都是通过事件触发驱动函数执行的，从而实现特定的功能。（比如点击div将内容替换为时间、当鼠标滑过元素，元素就有翻转的动态。）
脚本语言
在网络前端开发环境下，用于嵌入在客户端浏览器中的一段小程序，运行必须在浏览器里。

2.3 特点和优势

特点：

JS是一门直译式的语言，直接执行的就是源代码.是一边解释一边执行，没有编译的过程（不像Java需要提前编译为class文件再运行）.
JS是一门弱类型的语言,没有严格的数据类型.

优势：

良好的交互性
一定的安全性(JS被强制的要求,不能访问浏览器以外的东西,只能访问浏览器和浏览器内部的资源)
跨平台性(Java语言具有跨平台性,是因为有虚拟机)：只要有浏览器的地方都能执行JS

2.4 入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 JS</title>
		
		<!-- 在网页中添加js代码 -->
		<!-- js出现位置：行内js，内部js，外部js -->
		<script type="text/javascript">
			alert('你路过了div元素')/* 刷新网页立即跳出提示，没有触发条件 */
		</script>
		
	</head>
	<body>
		<!-- 单击div时弹出提示 -->
		<div onclick="alert('你点我干啥')"> 我是div</div> 
		<!--onclick(点击)出现alert(你点我干啥)（提示信息），不点击不出现 
		这就是JS的特性事件触发，有单击，才有提示信息，没有就不提示-->
		
		<!-- 双击a时弹出提示 -->
		<a ondblclick="alert('你点一下还不行,现在点俩下啊')"> 我是a</a>
		
		<!-- 鼠标划入时弹出提示 -->
		<span onmouseenter="alert('你敢扒拉我')"> 我是span1</span>
		<!-- 鼠标划出时弹出提示 -->
		<span onmouseout="alert('你扒拉了我还敢走')"> 我是span2</span>
	</body>
</html>

3.HTML中引入JS

HTNL中引用JS代码根据JS代码位置，可以分为俩种情况：

引用HTML页面中的JS代码
引用HTML页面外部的JS代码

JS代码可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

也可以把JS代码保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件扩展名是 .js。如需使用外部文件，请在 <script> 标签的 “src” 属性中设置该 .js 文件：

3.1 通过 <script> 标签引入内部JS代码

<head>
	<meta charset="utf-8"/>
	<script>/* JS代码 */
		function fn(){
			alert("JS的第1种引入方式");
		}
	</script>
</head>
<body>
	<div id="div1" onclick="fn();">Hello JavaScript</div>
</body>

其使用 <script> 标签包裹JS代码，<script> 和 </script> 会告诉JS代码在何处开始和结束。

3.2 通过 <script> 标签引入外部的JS文件

创建1.js文件
```
function fn(){
	alert("JS的第2种引入方式");
}
```
创建外部JS文件时，不能包含 <script> 标签，直接写入<script> 标签内的代码即可，

在html中引入文件

<head>
	<meta charset="utf-8"/>
	<script src="1.js"> </script>
</head>
<body>
	<div id="div1" onclick="fn();">Hello JavaScript</div>
</body>

注意：不要同时通过一个script标签引入JS代码和JS文件，会导致代码不会执行！比如：

<script src="demo1.js">
	alert("哈哈哈哈。。。");//代码不会执行！！
</script>

4.console调试网页

4.1 Chrome

专业人用专业的工具，浏览器调试使用谷歌、火狐最佳，Chrome 是由 Google 开发的免费网页浏览器，对于前端开发来说（尤其是调试代码）非常方便，所以更简易使用谷歌浏览器。

使用F12打开调试窗口。也可以快捷键打开：ctrl+shift+i。或者可以在网页中右键选择检查打开调试窗口：
在这里插入图片描述

也可以在右上角菜单栏选择 “更多工具”=》“开发者工具” 来开启：
在这里插入图片描述

4.2 Console 窗口

Console 窗口是我们最常使用的窗口，其具有以下功能：

打开开发者工具后，我们可以在 Console 窗口调试 JavaScript代码，如下图，并且其支持自动补全，提示下，按tab键补全

在这里插入图片描述

我们可以点击第一个按钮清空窗口代码，然后在第二个箭头后面输入我们的代码，按回车即可执行。

在这里插入图片描述

4.3 Console 窗口日志log

上一步我们清空的窗口代码是当前我们打开网页的全部log日志，其包含正常执行的日志，警告信息等:
在这里插入图片描述

4.4 Console 窗口warn信息

上一步我们清空的窗口代码是当前我们打开网页的全部log日志，其包含正常执行的日志，警告信息等:
在这里插入图片描述

4.5 Console 窗口对象细腻些

我们获取到的对象的值，也会以表格形式展示在控制台：
在这里插入图片描述

5.JS输出数据

JavaScript 没有任何打印或者输出的函数。但我们可以通过下列的方式在网页或控制台输出内容：

使用 window.alert() 在网页弹出警告框
使用 document.write() 方法将内容写到 HTML 文档中，跟随网页输出
使用 innerHTML 写入到 HTML 元素，跟随网页输出
使用 console.log() 写入到浏览器的控制台

5.1 使用 window.alert()

我们可以向上面的入门案例一样，弹出警告框来显示数据：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>window.alert() 测试</title>
</head>
<body>
	
<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>
<script>
window.alert(5 + 6);
</script>
	
</body>
</html>

在运行网页时，会直接在网页弹出窗口显示输出信息：
在这里插入图片描述

5.2 使用document.write()

如果是出于测试目的，那我们可以将JavaScript直接写在HTML 文档中，但在上线的代码中，不应该出现：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>document.write() 案例</title> 
</head>
<body>
	
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<script>
document.write(Date());
</script>
	
</body>
</html>

在这里插入图片描述

但是要注意，如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>document.write()覆盖页面案例</title> 
</head>
<body>
	
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() 
{
    document.write(Date());
}
</script>
	
</body>
</html>

我们在页面加载后使用函数引入的方式调用此方法，调用后我们可以看到，页面其他内容全部消失，只剩我们使用document.write输出的内容：
在这里插入图片描述

5.3 使用innerHTML

如果需要从 JavaScript 访问某个 HTML 元素，我们可以使用document.getElementById(id) 方法来获取元素，在获取时使用 “id” 属性来标识 HTML 元素，并使用 innerHTML 来获取或插入元素内容：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>innerHTML案例</title> 
</head>
<body>
	
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落。</p>
<script>
 x = document.getElementById("demo")
 x.innerHTML="段落已修改。";
</script>
	
</body>
</html>

在这里插入图片描述

5.4 使用console.log()

我们可以使用 console.log() 方法在浏览器中显示 JavaScript 的值，这在开发中是十分有用的，在开发中进行前后端调试时，如果遇到报错，我们无法确认值是否正确传递，这时我们可以使用此方法来观察前端获取到的值：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>console.log()案例</title> 
</head>
<body>
	
<h1>我的第一个 Web 页面</h1>
<p>
浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。
</p>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
	
</body>
</html>

但是要注意，console.log()不应该出现在正式的代码中，如果用户在控制台发现了你使用console.log()打印出的值，对你的产品安全及开发能力将会产生极大的问题。

6.JS语法

JavaScript 是一个轻量级，但功能强大的弱数据类型的编程语言。接下来我们了解其语法及数据类型。

6.1 注释

单行注释： //注释内容

多行注释： /* 注释内容 */

写注释是一个很好的习惯，也是必须的习惯，方便你二次阅读，维护你的代码。如果后面项目转手，也方便别人来理解你的代码和维护你的代码。

JS中的注释和JAVA一样，可以备注信息，也可以对代码写注释不让其执行。

6.2 基本数据类型

值类型(基本数据类型)包括：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。

6.2.1 数值类型-number

- 在JS中，数值类型只有一种，就是浮点型。
- 在JS中，需要时会自动的进行数据类型的转换，比如：在显示和处理的时候，浮点型和整型会自动的转换。
- 在JS中，我们可以输入整数或者是小数，甚至是科学计数(e)。

2.4+3.6=6;

Infinity ： 正无穷大

-Infinity ： 负无穷大

NaN : Not a Number 非数字， 和任何值都不相等，包括它本身

123e5：科学计数，实际值为12300000

6.2.2 字符串类型-string

- 在JS中，字符串是基本数据类型。
- 在JS中，字符串直接量是通过单引号或者双引号引起来。


var str1 = "Hello…";

var str2 = 'CGB2103…';;

alert(str1);

6.2.3 布尔类型-boolean

- 值为true或者是false；

var s1 = false;

console.log(s1);

6.2.4 undefined

- 值只有一个就是undefined。表示变量没有初始化值。

比如：

var num; alert(num);//声明了变量但是没有为变量赋值，该变量的值就是undefined。

//或者访问一个对象上不存在的属性时，也是undefined。

//或者访问数组中一个没有的元素的位置时，该位置处的值也是undefined.

6.2.5 null

- 值也只有一个，就是null。表示空值或者不存在的对象。

6.3 引用数据类型

引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。

6.3.1 数组

JS数组用于在单个的变量中存储多个值(其实就是一个容器)。可以存储例如：数值、字符串、布尔值、undefined、null、对象、函数等数据。

JS的数组与java数组的比较：

相同点：
- 可以存储多个数据；
区别：
- java严格区分数据类型,整型数组只能存整数…
- JS里的数组可以存放各种类型的数据(JS弱类型) – 灵活!!!

6.3.1.1 数组的创建

下面的代码创建数组：

var arr1 = new Array();//声明一个空数组
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";

或者方式二:

var arr2 = new Array("abc", "hello", true);//声明一个具有初始值的数组

或者方式三:

var cars=["Saab","Volvo","BMW"];

JS数组中可以存放任意的数据类型，并且数组长度可以被改变。

6.3.1.2 数组的常见操作

length属性  --  获取数组的长度，还可以改变数组的长度
var a = [1,2,3];  
alert(a.length);  //输出值为3

var arrs = [];//声明一个空数组
console.log( arrs.length ); //此时数组长度为 0
arrs.length = 10;
console.log( arrs.length ); //此时数组长度为 10
arrs[99] = "abc";
console.log( arrs.length ); //此时数组长度为 100
arrs.length = 0;
console.log( arrs.length ); //此时数组长度为 0


var arr = [123, "abc", false, new Object() ]
//遍历数组
for( var i=0; i< arr.length; i++ ){
	console.log( arr[i] ); 
}
//for..in
for(var i in a){
	console.log("i:::"+i);
}
//循环接收用户输入，将数据存储在数组中，直至输入‘exit’结束
c();
function c(){
	var a=[];
	for(;;){
		var x=prompt("请输入整数:");
		a[a.length]=x; 
		if(x=="exit"){
			break;
		}
	}
	console.log(a);
}

6.3.2 JavaScript 对象

JavaScript 对象是拥有属性和方法的数据，在 JavaScript中，几乎所有的事物都是对象。

6.3.2.1 对象创建

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

var person={firstname:"John", lastname:"Doe", id:5566};

上面例子中的对象 (person) 有三个属性：firstname、lastname 以及 id。

空格和换行无关紧要。声明对象可横跨多行：

var person={
firstname : "John",
lastname  : "Doe",
id        :  5566
};

6.3.2.2 对象属性

对象属性有两种寻址方式：

name=person.lastname;
name=person["lastname"];

例如我们可以使用下面的实例获取对象的属性：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>对象属性获取案例</title> 
</head>
<body>

<p>
有两种方式可以访问对象属性：
</p>
<p>
你可以使用 .property 或 ["property"].
</p>
<p id="demo"></p>
<script>
var person = {
    firstName : "John",
    lastName : "Doe",
    id : 5566
};
document.getElementById("demo").innerHTML =
	person.firstName + " " + person.lastName;
</script>

</body>
</html>

6.3.2.3 对象方法

你可以使用以下语法创建对象方法：

methodName : function() {
    // 代码 
}

你可以使用以下语法访问对象方法：

objectName.methodName()

例如下面的实例中，我们创建了对象方法并调用了它：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>对象属性案例</title> 
</head>
<body>

<p>创建和使用对象方法。</p>
<p>对象方法作为一个函数定义存储在对象属性中。</p>
<p id="demo"></p>
<script>
var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566,
    fullName : function() 
	{
       return this.firstName + " " + this.lastName;
    }
};
document.getElementById("demo").innerHTML = person.fullName();
</script>
	
</body>
</html>

6.3.2.4 内置对象

String/Array/Number/Math/JSON…
Window对象–代表浏览器中一个打开的窗口,了解一下即可，很多被UI替代

window.onload() 		    在浏览器加载完整个html后立即执行!
window.alert("text") 		提示信息会话框
window.confirm("text") 		确认会话框
window.prompt("text") 		键盘输入会话框
window.event				事件对象
window.document				文档对象

Document对象–代表整个HTML文档，可用来访问页面中的所有元素

document.write()         	      	动态向页面写入内容
document.getElementById(id)  		获得指定id值的元素
document.getElementsByName(name)	获得指定Name值的元素

学会简单使用，后期被jQuery封装，在后期被Vue框架封装

6.4 JS的变量

js是弱类型语言，所有类型的变量都是用var关键字定义。并且参数的类型可以随时转换。

javascript没有类似采用静态语言类型，如java的变量类型是编译期就确定的；而它采用了动态类型，也就是说在编译期类型不确定，运行时会动态根据变量的赋值来决定它的类型，这点比较灵活。这也是双刃剑，编译期就难以检查出其赋值的错误。

6.4.1 声明变量

在 JavaScript 中创建变量通常称为"声明"变量，我们使用 var 关键词来声明变量：

var carname;

变量声明之后，该变量是空的（它没有值），如需向变量赋值，请使用等号：

carname="Volvo";

不过，您也可以在声明变量时对其赋值：

var carname="Volvo";

在下面的例子中，我们创建了名为 carname 的变量，并向其赋值 “Volvo”，然后把它放入 id=“demo” 的 HTML 段落中：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>声明变量案例</title> 
</head>
<body>

<p>点击这里来创建变量，并显示结果。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
	var carname="Volvo";
	document.getElementById("demo").innerHTML=carname;
}
</script>

</body>
</html>

好的编程习惯是，在代码开始处，统一对需要的变量进行声明。

您可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可：

var lastname="Doe", age=30, job="carpenter";

声明也可横跨多行：

var lastname="Doe",
age=30,
job="carpenter";

一条语句中声明的多个变量不可以同时赋同一个值:

var x,y,z=1;

x,y 为 undefined， z 为 1。

6.4.2 变量替换

(1) 在JS中是通过 var 关键字来声明一个变量

var a=1; alert(a);

var x=true; alert(x);

var y=10.8; alert(y);

(2) 在JS中声明的变量是不区分类型的，可以指向任意的数据类型。

var a = 1;
a=true;
a=100;
alert(a);//100

function x(){
	var m = 10;
	alert("局部变量:"+m);
	alert("全局变量:"+a);
}
alert("局部变量2:"+m);//局部变量失效,报错

注意向变量赋的值是数值时，不要使用引号。如果使用引号包围数值，该值会被作为文本来处理。

6.5 JS的运算符

JS中的运算符和Java中的运算符大致相同

算术运算符: +，-，*，/，%，++，–

赋值运算符: =，+=，-=，*=，/=，%=

比较运算符: ==，!=, =，!, > ，< ，>=，<=

位运算符: & ， |

逻辑运算符: &&，||

前置逻辑运算符: ! (not)

三目运算符: ? :

6.5.1 常见运算符案例

var a = 3;
var b = 1;
console.log(a+b);//4
a+=4;
console.log(a+b);//8
//a+=4;
console.log(a==b); //true
console.log(a==="3"); //false  如果两边比较的值不是同一种数据类型，===直接返回false，如果是同一种数据类型，==和===没有区别！
console.log("1"=="1"); //true   //由于JS中字符串是基本数据类型，比较字符串相等通过 == 进行！
var a = 1;
alert(a++);//1
alert(++a);//3
alert(++a+a+++a);//4+4+5
alert(a>3?10:8);
var b = 10;
alert(a>b?a:b);//求两个数里的大数
var c = 8;
var d = a>b?(a>c?a:c):(b>c?b:c);
alert(d);//三个数里的大值

6.5.2 typeof运算符:

typeof运算符用于返回变量或者表达式的数据类型

var i = 3;
console.log(typeof i);//number
i=true;
console.log(typeof i);//boolean
i="hello";
console.log(typeof i);//string
console.log(typeof 123+"abc");//numberabc
console.log(typeof (123+"abc"));//string

6.5.3 综合练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title> 测试JS语法 </title>
		<script type="text/javascript">
			//3.js的运算符
			alert(5/2);//2.5 可以自动转换类型
			//自增自减
			var e = 10;
			alert(e++);//10;符号在后，先用后增
			alert(++e);//12;符号在前，先增后用
			//== != !== ===
			alert(1==1);//true;==比较数值
			alert(1===1);//true;===比较类型
			
			alert(1=='1'); //true;==比较数值
			alert(1==='1');//false;===比较类型
			
			alert(1!=1);//false;==比较数值
			alert(1!==1);//false;===比较类型
			
			alert(1!='1');//false;==比较数值
			alert(1!=='1');//true;===比较类型
			
			//2.js变量
			var a = 10; //number
			a = 1.6; //number
			a = true; //boolean
			a = 'hello'; //string
			alert(a); //hello
			//练习交换变量的值
			var b = 1;
			var c = 2;
			var d = b; //将b的值交给d，此时d=b=1；
			b=c;//将c的值交给b，此时b=c=2；
			c=d;//将d的值交给c，此时c=d=1；
			alert(b+','+c)
			
			//1.JS的数据类型：number/string/boolean/null/undefined
			alert(100);
			alert(1.6);
			alert(1.6+3.4)//5,js是弱类型
			alert('hello');
			alert("hello");
			alert(true);
			alert(false);
			alert(null);
		</script>
	</head>
	<body>
	</body>
</html>

7.JavaScript 函数

JS函数就是一个具有功能的代码块, 可以反复调用，包裹在花括号中的代码块，前面使用了关键词 function，主语与对象方法进行区分。

function functionname()
{
    // 执行代码
}

7.1 方式一：通过function关键字声明函数

声明：function 函数名称([参数列表]){ 函数体 }
调用: 函数名称([参数列表]);
案例：

function a(){ //无参函数定义
	var a = [1,2,3,4,5]; //定义数组
	var sum =0; //定义变量
	for (var i = 0; i <a.length; i++) {
		if(a[i]%2==0){
			sum+=a[i];
		}
	}
	alert(sum);
}
a();//函数调用
function b(x,y){//定义含参函数
	alert(x+y);
}
b(1,"2");//函数调用
b(1,2);//函数调用

7.2 方式二：通过函数直接量声明函数

声明：var 函数名称 = function([参数列表]){ 函数体 }
调用: 函数名称([参数列表]);
案例：

// fn2();  //这种方式定义的函数还未加载就调用,会报错.方式1没问题
var fn2 = function(){ //定义无参函数
	alert(100);
}
fn2();  //函数调用

var fn3 = function(x,y){  //定义含参函数
	alert(x*y);
}
fn3(0.32,100);//函数调用
fn2("王海涛");参数个数不匹配，王海涛undefined
var e = function(x,y){ //定义有返回值含参函数
	return x-y;
}
alert("函数返回值:::"+ e(1.1,10.9) ); //函数调用

注意: 在JS中调用函数时, 传递的参数个数如果与声明的参数个数不相同, 也不会报错。
但是最好按声明的个数来传递, 因为个数不符, 可能会引发一些问题！！！

7.3 函数中的变量

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是局部的）。我们可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。只要函数运行完毕，本地变量就会被删除。

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

JavaScript 变量的生命期从它们被声明的时间开始，局部变量会在函数运行以后被删除，全局变量会在页面关闭后被删除。

如果您把值赋给尚未声明的变量，该变量将被自动作为 window 的一个属性，例如：

carname="Volvo";

将声明 window 的一个属性 carname。

非严格模式下给未声明变量赋值创建的全局变量，是全局对象的可配置属性，可以删除。

var var1 = 1; // 不可配置全局属性
var2 = 2; // 没有使用 var 声明，可配置全局属性

console.log(this.var1); // 1
console.log(window.var1); // 1
console.log(window.var2); // 2

delete var1; // false 无法删除
console.log(var1); //1

delete var2; 
console.log(delete var2); // true
console.log(var2); // 已经删除 报错变量未定义

7.3 综合案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 js函数</title>
		<script>
			//方式1:
				// 1,定义函数
				function print(){
					console.log("调用成功");
				}
				// 2,调用函数
				print();


			//方式2:
				// 1,定义函数
				var sout = function(){
					console.log("调用成功");
				}
				// 2,调用函数
				sout();
			// 练习1:求1~10的总和
			// function add(){ 定义JS函数的第一种方式
			var add = function(){//定义JS函数的第二种方式
				//1,定义数组
				var a = [1,2,3,4,5,6,7,8,9,10] ;
				//2,遍历数组
				let b = 0;//定义变量,记录和
				for(let i=0;i<a.length;i++){
					b = b + a[i] ;//数组里的数据求和
				}
				console.log(b);
			}
			// add();//调用函数
		</script>
	</head>
	<body>
		<!-- 鼠标划入时,触发函数 -->
		<button onmouseenter="add()">点我,求和</button>
	</body>
</html>

8.JS语句

JS中的语句和Java中的语句用法也大致相同

8.1 if…else语句

if…else条件语句用于基于不同的条件来执行不同的动作。基本和JAVA语言一致，分为if语句，if…else语句，if…else if…else 语句，唯一需要注意的是请使用小写的 if，使用大写字母（IF）会生成 JavaScript 错误！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 js语句</title>
	</head>
	<body>
		<!-- 表明JS代码的开始位置和结束位置 -->
		<script>
			//分支结构: if...else
				if(1==='1'){//false
					alert('ok');
				}else{
					alert('no ok');
				}
				// 例子: 接收用户输入的成绩，判断成绩所属的等级
				// 80~100(包括80，也包括100)		优秀 
				// 60~80(包括60，但不包括80)		中等
				// 0~60(包括0，但不包括60)		不及格
				var a = prompt('请输入分数:');
				if(a>=80 && a<=100){
					alert('优秀');
				}else if(a>=60 && a<80){
					alert('中等');
				}else if(a>=0 && a<60){
					alert('不及格');
				}else{
					alert('数据有误');
				}
				
		</script>
	</body>
</html>

8.2 switch…case语句

switch 语句用于基于不同的条件来执行不同的动作。其使用与JAVA也基本一致。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 js语句</title>
	</head>
	<body>
		<!-- 表明JS代码的开始位置和结束位置 -->
		<script>
			//分支结构: switch...case
				var day = 1;
				switch(day){//java里只支持整数类型的表达式byte short int char String
					case 1:alert('今天是星期一');break;
					case 2:alert('今天是星期二');break;
					case 3:alert('今天是星期三');break;
					case 4:alert('今天是星期四');break;
					case 5:alert('今天是星期五');break;
				}
		</script>
	</body>
</html>

8.3 循环语句

循环语句分为for循环语句，for…in循环语句，while循环语句，除for…in循环语句外，其他俩个也基本与JAVA语法一致。

for(var i=0;i<5;i++){
	alert( i );
console.log(i);
}
var i=0;
while(i<5){
alert(i);
i++;
}
var sum = 0;
for( var i=1; i<=100; i++ ){
	sum += i; //sum = sum+i;
}
console.log(sum );
//没有增强for循环

JavaScript for/in 语句循环遍历对象的属性，类似JAVA中的高效for循环：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>for...in循环案例</title>
</head>
<body>
	
<p>点击下面的按钮，循环遍历对象 "person" 的属性。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x;
	var txt="";
	var person={fname:"Bill",lname:"Gates",age:56}; 
	for (x in person){
		txt=txt + person[x];
	}
	document.getElementById("demo").innerHTML=txt;
}
</script>
	
</body>
</html>

注意： JS中的语句，判断条件可以不是boolean类型，因为JS中会自动进行数据类型的转换。

8.4 break 和 continue

break 语句用于跳出循环，continue 用于跳过循环中的一个迭代。

8.4.1 break

我们已经在本教程之前的章节中见到过 break 语句。它用于跳出 switch() 语句，break 语句可用于跳出循环，跳出循环后，会继续执行该循环之后的代码（如果有的话）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>break案例</title>
</head>
<body>

<p>点击按钮，测试带有 break 语句的循环。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x="",i=0;
	for (i=0;i<10;i++){
		if (i==3){
    			break;
			}
    	x=x + "该数字为 " + i + "<br>";
    }
	document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

由于这个 if 语句只有一行代码，所以可以省略花括号：

for (i=0;i<10;i++)
{
    if (i==3) break;
    x=x + "The number is " + i + "<br>";
}

8.4.2 continue

continue 语句中断当前的循环中的迭代，然后继续循环下一个迭代。以下例子在值为 3 时，直接跳过：

for 实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>continue案例-for循环</title>
</head>
<body>

<p>点击下面的按钮来执行循环，该循环会跳过 i=3 的数字。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x="",i=0;
	for (i=0;i<10;i++){
  		if (i==3){
    		continue;
    	}
		x=x + "该数字为 " + i + "<br>";
  	}
	document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

while 实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>continue案例while循环</title>
</head>
<body>
	<p id= "demo">点击下面的按钮来执行循环，该循环会跳过 i=3 的数字。</p>
	<button onclick="myFunction()">点击这里</button>

	<script>
		function myFunction(){
			var x= "", i= 0;
			while (i < 10){
				if (i == 3){
					i++;    //加入i++不会进入死循环
					continue;
				}
				x= x + "该数字为 " + i + "<br>";
				i++;

			}
			document.getElementById("demo").innerHTML= x;
		}
	</script>
</body>
</html>

8.5 综合案例一

<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8">
		<title>测试 js语句</title>
	</head>
	<body>
		<!-- 表明JS代码的开始位置和结束位置 -->
		<script>
			//2.分支结构: switch...case
				var day = 1;
				switch(day){//java里只支持整数类型的表达式byte short int char String
					case 1:alert('今天是星期一');break;
					case 2:alert('今天是星期二');break;
					case 3:alert('今天是星期三');break;
					case 4:alert('今天是星期四');break;
					case 5:alert('今天是星期五');break;
				}
			
			//1.分支结构: if...else
				if(1==='1'){//false
					alert('ok');
				}else{
					alert('no ok');
				}
				// 例子: 接收用户输入的成绩，判断成绩所属的等级
				// 80~100(包括80，也包括100)		优秀 
				// 60~80(包括60，但不包括80)		中等
				// 0~60(包括0，但不包括60)		不及格
				var a = prompt('请输入分数:');
				if(a>=80 && a<=100){
					alert('优秀');
				}else if(a>=60 && a<80){
					alert('中等');
				}else if(a>=0 && a<60){
					alert('不及格');
				}else{
					alert('数据有误');
				}
				
		</script>
	</body>
</html>

8.6 综合案例二

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 js语句</title>
		<script>
			// 2.js的循环语句
				//练习3:假设你有1个亿,每天花500w,能花多少天
				var days = 0; //记录天
				var money = 100000000 ;//记录钱
				while(money>0){
					money -= 5000000 ;//花钱
					days++;//天数++
				}
				console.log(days);
				
				//练习2:统计1~100的偶数和
				var sum = 0;//记录和
				for(let i=1;i<=100;i++){
					if(i % 2 == 0){ //过滤偶数
						sum = sum + i;//修改变量
						// sum += i;
					}
				}
				console.log(sum);
				//练习1:打印1~100
				for(let i=1;i<=100;i++){
					console.log(i);
				}
			// 1.js的变量和常量
				var a = 2; //变量
				a = 'hello';
				console.log(a);//hello
				
				const b = 10; //常量,值不能再改
				// b = 20;
				console.log(b);
				
				let c = 10;//变量,有作用域
				c = 20;
				console.log(c);
				
				var x = 10;
				{
					let x = 20;  //只在{}内有效,出去就无效了
					console.log("x="+x);//20
				}
				console.log("x="+x);//10
		</script>
	</head>
	<body>
	</body>
</html>

9.HTML DOM

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

9.1 组成

ECMAScript描述了javascript语言的语法和基本对象

文档对象模型DOM（Document Object Model）与HTML网页API接口
浏览器对象模型BOM（Browser Object Model），与浏览器进行交互的API接口
核心对象有：window浏览器窗口，navigator浏览器信息，location浏览器当前地址信息，history浏览器历史信息，screen用户屏幕信息。

在这里插入图片描述
DOM非常重要，实际开发更多通过js操作DOM对象实现对html页面的操作，BOM也用，比较少用。所以学习重点放在DOM上。

9.2 DOM树结构

DOM 是一项 W3C (World Wide Web Consortium) 标准，DOM（Document Object Model）文档对象模型为JS操作html文档所提供的一套API，通过这套API可以很方便的对html元素进行访问及增删改查操作。
在这里插入图片描述

9.3 DOM对象

9.3.1 DOM获取对象的方法

我们通过 window.document 获取对象，通过对象调用其方法：

getElementById(“元素id的属性的值”)：通过id属性的值获取元素(只能获取到一个)，返回1个元素
getElementsByName(“元素name属性的值”)：返回多个元素(获取到多个,存入数组)
getElementsByClassName(“元素class属性的值”)：返回多个元素(获取到多个,存入数组)
getElementsByTagName(“元素标签名的值”)：返回多个元素(获取到多个,存入数组)

注：dom树在描述标签时除id方式，其它都是以数组形式体现，哪怕是一个元素。

9.3.2 DOM 事件

获取DOM对象后，常用的方法有4种:

write()：向文档写 HTML 表达式或 JavaScript 代码
title：返回网页的标题
id：设置或返回元素的id
innerHTML：设置或返回元素的内容
innerText：获取元素的内容

9.3.3 DOM - 改变CSS

我们可以使用下面的语法改变 HTML 元素的样式：

document.getElementById(id).style.property=新样式

甚至在下面的案例中，我们可以显示或隐藏文本：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>显示或隐藏文本案例</title>
</head>
<body>

<p id="p1">这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。</p>
<input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" />
<input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'" />

</body>
</html>

9.3.4 DOM 事件

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。之前的案例中，我们已经使用过DOM事件。

9.3.4.1 点击事件

我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。如需在用户点击某个元素时执行代码，向一个 HTML 事件属性添加 JavaScript 代码的语法为：

onclick=JavaScript

DOM 事件常用的例子有：

当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时

点击事件可以直接在onclick里边定义，也可以使用函数定义：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>点击函数案例</title>
</head>
<head>
<script>
function changetext(id){
	id.innerHTML="Ooops!";
}
</script>
</head>
<body>

<!-- 点击文本执行输出 -->
<h1 onclick="changetext(this)">点击文本!</h1>	

<!-- 点击文本执行输出 -->
<h2 onclick="this.innerHTML='Ooops!'">点击文本!</h2>

<!-- 点击按钮执行函数 -->
<button onclick="displayDate()">点这里</button>
<script>
function displayDate(){
	document.getElementById("demo").innerHTML=Date();
}
</body>
</html>

9.3.4.2 页面事件

其中 onload 和 onunload 事件会在用户进入或离开页面时被触发。onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。onload 和 onunload 事件可用于处理 cookie。

例如下方的案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>触发cookie案例</title>
</head>
<body onload="checkCookies()">

<script>
function checkCookies(){
	if (navigator.cookieEnabled==true){
		alert("Cookies 可用")
	}
	else{
		alert("Cookies 不可用")
	}
}
</script>
<p>弹窗-提示浏览器 cookie 是否可用。</p>
	
</body>
</html>

9.3.4.3 输入事件

而onchange 事件常结合对输入字段的验证来使用。下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>onchange 事件案例</title>
</head>
<head>
<script>
function myFunction(){
	var x=document.getElementById("fname");
	x.value=x.value.toUpperCase();
}
</script>
</head>
<body>

输入你的名字: <input type="text" id="fname" onchange="myFunction()">
<p>当你离开输入框后，函数将被触发，将小写字母转为大写字母。</p>

</body>
</html>

9.3.4.4 鼠标事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标事件案例</title>
</head>
<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
	obj.innerHTML="Thank You"
}
function mOut(obj){
	obj.innerHTML="Mouse Over Me"
}
</script>

</body>
</html>

9.3.4.5 综合事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>综合事件案例</title>
</head>
<body>

<div onmousedown="mOver(this)" onmouseup="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>

<script>
function mOver(obj){
	obj.innerHTML="Thank You"
}
function mOut(obj){
	obj.innerHTML="Mouse Over Me"
}
</script>

</body>
</html>

9.4DOM方法的综合案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM方法的案例</title>

		<!-- js -->
		<script>
			function a(){
				/* 按id获取,返回1个 */
				var x = document.getElementById("div1");
				x.innerHTML="<h1>你好div</h1>";
				
				/* 按name属性值获取,返回多个*/
				var y = document.getElementsByName("div2"); 
				console.log(y);//NodeList
				y[0].innerHTML="hello js...";
				
				/* 按class属性值获取,返回多个*/
				var z = document.getElementsByClassName("span1");
				console.log(z);//HTMLCollection
				z[0].innerText="<p>我变了</p>"
				
				/* 按照标签名获取,返回多个 */
				var m = document.getElementsByTagName("div");
				console.log(m);//HTMLCollection
				m[1].style.fontSize=30+"px";
			}
		</script>
	</head>
	<body>
		<div id="div1" onclick="a();">我是div1</div>
		<div name="div2"  onclick="a();">我是div2</div>
		<span class="span1">我是span1</span>
		<span class="span1">我是span2</span>
		<a name="div2" id="a1">我是a</a>

		<!-- js事件: -->
<a href="#" onclick="method();">单击触发js</a>
		<a href="#" ondblclick="method2();">双击触发js</a>
		<a href="#" onmouseenter="method3();">滑过触发js</a>
		<a href="#" onmouseleave="method4();">滑走触发js</a>
<button onkeydown="alert(1);">点我</button>
	</body>
</html>

9.5 综合练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 dom技术</title>
		<script>
			//1.创建函数
			function fun (){
				//练习1.选中id="d",获取内容
				//先获取Document对象，再调用对象的API
				var a = window.document.getElementById('d');
				console.log(a);//获取元素
				console.log(a.innerHTML);//获取内容
				
				//练习2.选中我是p2元素，并获取内容
				var x = document.getElementsByName("b");
				console.log(x);
				console.log(x[2]);//获取下标为2的元素
				console.log(x[2].innerHTML);//获取下标为2的元素的内容
				
				//练习3.选中我是p2元素，并修改内容
				document.getElementsByName("b")[2].innerHTML="<h1>看我变成这个了</h1>";
				
				//练习4.选中我是div3元素，并修改内容
				document.getElementsByClassName('a')[1].innerHTML="我也变了";
				
				
				//练习5.选中我是div3元素，并修改样式
				//document.getElementsByClassName('a')[1].style.color="blue";//按照class获取后修改颜色
				//document.getElementsByTagName('div')[2].style.fontFamily="黑体";//按照div获取后改变字体
				document.getElementsByTagName('div')[2].style.fontSize='60px';//按照div获取后改变字号
				
			}
		</script>
	</head>
	<body>
		<div id="d" onclick="fun()">我是div1</div>
		<div class="a">我是div2</div>
		<div class="a">我是div3</div>
		<div name="b">我是div4</div>
		
		<p name="b">我是p1</p>
		<p name="b">我是p2</p>
		<p name="b">我是p3</p>
		<p name="a">我是p4</p>
	</body>
</html>

10 json

10.1 概念

ajax往往要完整应用还会配合一个技术：JSON，那什么是JSON呢？

JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）

JSON(JavaScript Object Notation，JS 对象简谱) 起名不咋地，非常拗口，我们就记住它是一种轻量级的数据交换格式即可。它基于 ECMAScript (js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。是xml的终结者，成为主流开发方式（ajax异步请求，json返回）。

10.2 作用

JSON 是存储和交换文本信息的语法。当数据在浏览器与服务器之间进行交换时，这些数据只能是文本。JSON 属于文本，并且我们能够把任何 JavaScript 对象转换为 JSON，然后将 JSON 发送到服务器。我们也能把从服务器接收到的任何 JSON 转换为 JavaScript 对象。以这样的方式，我们能够把数据作为 JavaScript 对象来处理，无需复杂的解析和转译。

10.3 语法

JSON数据:

var a =' "firstName" : "John" '

JSON 对象:

var a = '{ "firstName":"John" , "lastName":"Doe" }'

JSON 数组:

var a = '[{ "firstName":"Bill" , "lastName":"Gates" },{ "firstName":"George" , "lastName":"Bush" }]';

10.4 转换工具

使用JS里的内置对象JSON.用来把以 JSON 格式写的字符串和原生 JavaScript 对象互转.

给服务器发送数据: 将JS对象转成JSON字符串 	JSON.stringify(Js对象)
接受服务器的数据: JSON字符串转成JS对象		JSON.parse("json字符串")

10.5 测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>json</title>
		<script>
			//json用来在浏览器和服务器之间做数据传输,轻量级,格式简单明了.
			//JSON是js的内置对象,用来把json类型的字符串和js对象互转
			//json类型的字符串---{ "k1":"v1", "k2":"v2", "k3":"v3" }
			function jschuan(){
				var jsonchuan = '{ "k1":"v1", "k2":"v2", "k3":"v3" }';
				document.getElementById("h").innerHTML=jsonchuan;
			}
			function chuan2js(){
				var text='{ "k1":"v1", "k2":"v2", "k3":"v3" }';
				console.log(text);
		//从服务器收到的数据都是字符串,转成js对象,用js语法解析属性/方法
	var jsobj = JSON.parse(text);//串转js对象,就可以写js代码解析数据
				console.log(jsobj);
				document.getElementById("d").innerHTML=jsobj.k2;
			}
			function js2chuan(){
				var obj = {"k1":"v1", "k2":"v2", "k3":"v3"};
				console.log(obj);
				//把浏览器的数据发给服务器,服务器只要json串
				var text = JSON.stringify(obj);//js对象转成串
				document.getElementById("p1").innerHTML=text;
				console.log(text);
				console.log(text.length);
			}
		</script>
	</head>
	<body>
		<p id="p1" onclick="js2chuan();">我是p</p>
		<div id="d" onclick="chuan2js();">我是div</div>
		<h1 id="h" onclick="jschuan();">我是h1哦</h1>
	</body>
</html>

10.6 综合练习

创建js文件,存放js代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 json</title>
	</head>
	<script>
		//1.定义json字符串--发送给服务器
		var a = '"firstName" : "john"'//json字符串
		var b = '{"firstName":"davi","lastName":"dufu"}'//json对象
		var c = '[{"firstNmae":"yige","lastName":"yidi"},{"firstName":"erge","lastName":"erdi"}]'//json数组
		
			console.log(a.length);//求长度
			console.log(b.concat('123'));//拼接字符串
			//练习1:获取c里的数据 rose 10
			var jsobj = JSON.parse(c);//把JSON串变成js对象
			console.log(jsobj);
			console.log(jsobj[0]);
			console.log(jsobj[0].name);//rose
			console.log(jsobj[1].age);//10
					
			//---把两种数据互转,利用JSON工具类---
			//2.JSON的parse():json字符串->js对象,好处是:方便的解析对象的属性
			var obj = JSON.parse(b);
			console.log(obj);
			console.log(obj.name);//对象的属性
			console.log(obj.age);//对象的属性
					
			//3,JSON的stringify():js对象->json字符串,好处是:方便的对字符串操作,还可以发送给服务器
			var car = {name:"BMW",price:9.9} ;
			var str = JSON.stringify(car);
			console.log(str);
			console.log(str.length);//求字符串的长度
					
			//TODO json串和js对象的区别?语法不同+数据的解析方式不同
			var d = { name:"tony" , age:20 }//js对象
			console.log(d.name);//获取了d对象的name属性的值
	</script>
	<body>
	</body>
</html>

创建html网页文件,引入js代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 json</title>
		
		<!-- 引入外部的js文件 -->
		<script src="1.js"></script>
	</head>
	<body>
	</body>
</html>

11 ajax

11.1 概述

AJAX = Asynchronous JavaScript And XML. AJAX 并非编程语言。
Ajax 允许通过与场景后面的 Web 服务器交换数据来异步更新网页。这意味着可以更新网页的部分，而不需要重新加载整个页面。

11.2 原理

在这里插入图片描述

11.3 核心对象XMLHttpRequest

所有现代浏览器都支持 XMLHttpRequest 对象。
XMLHttpRequest 对象用于同幕后服务器交换数据。这意味着可以更新网页的部分，而不需要重新加载整个页面。
在这里插入图片描述

11.4 测试

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ajax-js版</title>
		<script>
			function change(){
				// 1. 创建xhr对象,用于同幕后服务器交换数据
				var xhr = new XMLHttpRequest();
				// 2. 定义当 readyState 属性发生变化时被调用的函数
				xhr.onreadystatechange=function(){
					//3. status是200表示请求成功,readyState是4表示请求已完成且响应已就绪
					if(this.status==200 && this.readyState==4){
						// document.getElementById("d1").innerHTML="hi ajax";
						//5.以字符串返回响应数据,并展示
						document.getElementById("d1").innerHTML=this.responseText;
					}
				}
				//3.规定请求的类型(请求方式,文件位置,异步)
				xhr.open('get','1.json',true);
				//xhr.open('get','http://localhost:8080/car/get',true);
				//4.xhr将请求发送到服务器
				xhr.send();
			}
		</script>
	</head>
	<body>
		<!-- 点击时,使用ajax修改文字 -->
		<div id='d1' onclick="change()">你好</div>
	</body>
</html>