静态网页和动态网页

动态网页

网页是如何和后端交互的呢？

JS概述

什么是JS

名词解释

特点和优势

入门案例

HTML中引入JS

通过script标签引入JS代码

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

JS语法

注释

基本数据类型

JS的变量

JS的运算符

JS语句

if…else语句

switch…case语句

循环语句（for）

JS数组

JS数组的声明方式

数组需要注意的细节

JS函数

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

JS对象

内置对象

自定义对象

DOM树的作用

组成

DOM树结构

Document对象

dom.html

–2,测试

总结

json（数据交换格式）

概念

作用

语法

转换工具

测试

静态网页和动态网页

动态网页

我们有了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，它实现了用户的请求和响应，实现了数据的动态展现，使早期静态的网站走向了动态的网站。

JS概述

什么是JS

JavaScript 是 web 前端开发者必学的三种语言之一：

1.HTML 定义网页的内容 H5
2.CSS 规定网页的布局 CSS3
3.JavaScript 实现网站的交互 ES6

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，是一种弱类型语言，同其他语言一样，有它自身的语法，数据类型，表达式，算术运算符等。

JS是一门基于对象和事件驱动的脚本语言，通常用来提高网页与用户的交互性。

名词解释

基于对象：它不仅可以创建对象,也能使用现有的对象。JS没有类的概念，也没有编译的过程。是一边解释一边执行。

事件驱动：在JS中，大部分情况下都是通过事件触发驱动函数执行的，从而实现特定的功能。（比如点击div将内容替换为时间、当鼠标滑过元素，元素就有翻转的动态。）

脚本语言：在网络前端开发环境下，用于嵌入在客户端浏览器中的一段小程序。

特点和优势

特点：

(1)JS是一门直译式的语言，直接执行的就是源代码.

是一边解释一边执行，没有编译的过程（不像Java需要提前编译为class文件再运行）.

(2)JS是一门弱类型的语言,没有严格的数据类型.

优势：

(1)良好的交互性

(2)一定的安全性(JS被强制的要求,不能访问浏览器以外的东西,只能访问浏览器和浏览器内部的资源)

(3)跨平台性(Java语言具有跨平台性,是因为有虚拟机)

只要有浏览器的地方都能执行JS

入门案例

<head><title>hello</title><meta charset="utf-8"/><script>/* JS代码 */
alert(100);function fn(){alert("111");}</script>
</head>
<body><a href="#" onclick="fn();">鼠标点击事件...</a>
</body>

HTML中引入JS

通过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文件

创建1.js文件

function fn(){alert("JS的第2种引入方式");
}

在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>

JS语法

注释

单行注释： //注释内容

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

基本数据类型

包括:number/string/boolean/null/undefined

(1) 数值类型-number

在JS中，数值类型只有一种，就是浮点型。

在JS中，需要时会自动的进行数据类型的转换，比如：在显示和处理的时候，浮点型和整型会自动的转换。

2.4+3.6=6;Infinity ： 正无穷大-Infinity ： 负无穷大NaN : Not a Number 非数字， 和任何值都不相等，包括它本身

(2) 字符串类型-string

在JS中，字符串是基本数据类型。

在JS中，字符串直接量是通过单引号或者双引号引起来。


var str1 = "Hello…";var str2 = 'CGB2103…';;alert(str1);

(3) 布尔类型-boolean

值为true或者是false；

var s1 = false;console.log(s1);

(4) undefined

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

比如：

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

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

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

a) var num; alert(num);//声明了变量但是没有为变量赋值，该变量的值就是undefined。b) 或者访问一个对象上不存在的属性时，也是undefined。c) 或者访问数组中一个没有的元素的位置时，该位置处的值也是undefined.

(5) null

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

JS的变量

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

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

练习:变量交换

(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);//100function x(){var m = 10;alert("局部变量:"+m);alert("全局变量:"+a);
}
alert("局部变量2:"+m);//局部变量失效,报错

JS的运算符

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

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

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

比较运算符: ==，!=, =，!, > ，< ，>=，<= === (完全等于) !==（全等于取反）

位运算符: & ， |

逻辑运算符: &&，||

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

三元运算符: ? :

常见运算符测试

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);//三个数里的大值

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 js的运算符</title><script>//TODO java的面试题:a=a+1; a+=1的区别???//5,运算符typeof:用来获取数据的类型//alert弹出框//输出结果到控制台,f12找到浏览器里的控制台console.log(100);console.log(typeof 100);//输出100的类型,numberconsole.log(typeof "100");//输出100的类型,stringconsole.log(typeof "100"+100);//输出100的类型拼接100数字,string100//4,三元运算符: 求两个数里的大值var e = 10;var f =5;var g = e > f ? e : f ;//记录大的值alert(g);//3,比较运算符,描述的成立就是true,不成立就是falsealert(1!=="1");//truealert(1==1);//truealert(1=="1");//true,==只比值alert(1==="1");//false,===比类型和值alert(1===1);//true,类型和值都是一样的//2,复合赋值运算符 %=var d = 10;alert(d%=3);//1// d %= 3 相当于: d = d % 3;   //1,算术运算符 / % ++ --alert(5/2);//2.5,js是弱类型的语言alert(5%2);//取余数,1var a=10;var b=10;var c = a+++b;//++优先级高于+,所以先结合的是a++然后再+balert(c);//20 // alert(a++);//10// alert(++b);//11a = a++;//把a++的结果交给a保存alert(a);//10b = ++b;//把++b的结果交给b保存alert(b);//11</script></head><body></body>
</html>

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

JS语句

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

if…else语句

var i = 3;
if(i==4){
alert(“yes”);
}else{
alert(“no”);//no
}
例子: 接收用户输入的成绩，判断成绩所属的等级
80~100(包括80，也包括100)      优秀
60~80(包括60，但不包括80)       中等
0~60(包括0，但不包括60)     不及格
其他值                         输入有误
// prompt函数可以弹框提示用户输入成绩, 并返回用户输入的内容
var score = prompt("请输入您的成绩：");
console.log( score );
if( score >= 80 && score <=100 ){alert("您的成绩属于：优秀！");
}else if( score >= 60 && score < 80 ){alert("您的成绩属于：中等！");
}else if( score >= 0 && score < 60 ){alert("您的成绩属于：不及格！");
}else{alert("您输入的成绩不合法，请重新输入！");
}

switch…case语句

var day = 3;
switch( day ){case 1: alert("今天是星期一");break;case 2: alert("今天是星期二");break;case 3: alert("今天是星期三");break;case 4: alert("今天是星期四");break;case 5: alert("今天是星期五");break;
}

循环语句（for）

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循环

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

JS数组

JS数组用于在单个的变量中存储多个值(其实就是一个容器)。

JS中的数组可以存储例如：数值、字符串、布尔值、undefined、null、对象、函数等

JS数组的声明方式

var arr1 = new Array();//声明一个空数组
var arr2 = new Array("abc", "hello", true);//声明一个具有初始值的数组
alert(arr2.length);//3
var arr4 = [];//声明一个空数组
alert(arr4.length);//0
arr4 = ["abc", "hello", true];//声明一个具有初始值的数组
alert(arr4);

数组需要注意的细节

length属性  --  获取数组的长度，还可以改变数组的长度
var a = [1,2,3];
alert(a.length);  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);
}

JS函数

函数就是一个具有功能的代码块, 可以反复调用

函数就是包裹在花括号中的代码块，前面使用了关键词 function

方式一：通过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);//函数调用

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

声明：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中调用函数时, 传递的参数个数如果与声明的参数个数不相同, 也不会报错。

但是最好按声明的个数来传递, 因为个数不符, 可能会引发一些问题！！！

JS对象

利用function关键字声明对象，用new关键字创建对象。

内置对象

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框架封装

自定义对象

(1)方式一：

声明对象：function Person(){}
创建对象：var p1 = new Person();
设置属性：p1.name = "张飞"; p1.age = 18;
设置方法：p1.run = function(){ alert(this.name+" : "+this.age); }
访问p1对象：

/* 自定义对象*/
function Person(){ } /* 定义对象*/
var p1 = new Person(); /* 创建对象*/
p1.name="张三";
p1.age=20;
console.log(p1);
p1.say = function(){ /* 定义函数*/
console.log("haha");
}
p1.say(); /* 函数调用*/
上面展示了js的强大！js的牛掰之处就在于，它的属性可以边写边创建，非常灵活，而java不行，必须先定义。

上面展示了js的强大！js的牛掰之处就在于，它的属性可以边写边创建，非常灵活，而java不行，必须先定义。

(2)方式二:

var p2 = {"pname":"李四","page":100,"psay":function(){/* this使用p2里定义的 */console.log(this.pname+this.page);}}console.log(p2);p2.psay();  /* 函数调用*/

DOM树的作用

组成

ECMAScript描述了javascript语言的语法和基本对象
文档对象模型DOM（Document Object Model）与HTML网页API接口
浏览器对象模型BOM（Browser Object Model），与浏览器进行交互的API接口

核心对象有：window浏览器窗口，navigator浏览器信息，location浏览器当前地址信息，history浏览器历史信息，screen用户屏幕信息。

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

DOM树结构

Document对象

--获取对象（window可以省略）: window.document
--调用方法: getElementById("元素的id的属性的值")--返回1个元素getElementsByName("元素的name属性的值")--返回多个元素(用数组)getElementsByClassName("元素的class属性的值")--返回多个元素(用数组)getElementsByTagName("元素的标签名的值")--返回多个元素(用数组)
write()--向文档写 HTML 表达式 或 JavaScript 代码
title--返回网页的标题
id--设置或返回元素的id
innerHTML--设置或返回元素的内容

dom.html

<!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);//NodeListy[0].innerHTML="hello js...";/* 按class属性值获取,返回多个*/var z = document.getElementsByClassName("span1");console.log(z);//HTMLCollectionz[0].innerText="<p>我变了</p>"/* 按照标签名获取,返回多个 */var m = document.getElementsByTagName("div");console.log(m);//HTMLCollectionm[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>

–2,测试

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 DOM</title><!-- DOM就是用一套API来快速的通过js代码获取元素 --><script>function get(){//1,获取id="a"的元素的内容//获取document对象//按照id获取元素getElementById("id属性的值")var x = document.getElementById("a");console.log(x);var y = x.innerHTML;//获取元素的内容console.log(y);//2,获取id="b"的元素的内容 并修改????var z = document.getElementById("b").innerHTML;console.log(z);z='我变了...';console.log(z);//3,修改id="a"的元素的内容document.getElementById("a").innerHTML="我也变了";//4,获取我是span1--按照class的值获取var a = document.getElementsByClassName("c");console.log(a);//按照class获取到了数组var b = a[0].innerHTML;//按照下标操作元素console.log(b);//5,获取我是span1--按照标签名的值获取//  按照标签名span获取到一个数组       下标  获取内容var c = document.getElementsByTagName("span")[0].innerHTML;console.log(c);//6,修改我是span2的内容//了解:innerHTML和innerText的区别?前者可以解析HTML代码,后者不能
document.getElementsByClassName("c")[1].innerHTML="<h1>我是渣渣辉</h1>";// document.getElementsByClassName("c")[1].innerText="<h1>我是渣渣辉</h1>";}</script></head><body><button onclick="get()">按钮</button><div id="a">我是div1</div><div id="b">我是div2</div><span class="c">我是span1</span><span class="c">我是span2</span></body>
</html>

总结

获取页面元素的4种方式:

getElementsByTagName 标签名称，得到数组

getElementsByName name属性，得到数组

getElementsByClassName class属性，得到数组

getElementById id属性，单个值

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

json（数据交换格式）

概念

是一种轻量级的数据交换格式,本质就是一个字符串.
用来规定浏览器和服务器之间数据交换的一个格式.

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

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

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

作用

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

语法

JSON数据:

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

JSON 对象:

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

JSON 数组:

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

转换工具

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

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

测试

<!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>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 json</title><script>//1,创建json字符串var a ='"name":"jack"';//注意语法!!console.log(a);console.log(a.length);//求长度console.log(a.concat(100));//拼接//2,创建json对象--为了方便的操作字符串var b = '{"name":"jack","age":"20"}';console.log(b);console.log(b.length);//获取字符串的长度//js对象--为了方便的解析对象的属性var b2 = {name:"jack",age:20};console.log(b2.name);//获取属性的值//3,创建json数组var c = '[{"name":"jack","age":"20"},{"name":"rose","age":"18"}]';console.log(c.length);console.log(c.concat(100));//TODO 需求:解析c里面每个属性的值//解决方案:把json字符串转成js对象,否则就只能一点一点截取字符串啦!//利用js的内置对象JSON,完成json字符串和js对象的互转//parse(): json字符串->js对象:为了方便的调用对象的属性var obj = JSON.parse(c);console.log(obj);console.log(obj[0].name);//jackconsole.log(obj[0].age);//20console.log(obj[1].name);//roseconsole.log(obj[1].age);//18//stringify(): js对象->json字符串:为了方便的操作字符串//定义JS对象var person={name:"jack",age:20};//利用工具变成json字符串var str = JSON.stringify(person);console.log(str);console.log(str.length);var y = str.substring(9,13);console.log(y);//jack</script></head><body></body>
</html>

前端动态网页技术JS（JavaScript)相关推荐

动态网页技术的发展历史
诞生的历史背景最初在浏览器中主要展现的是静态的文本或图像信息,GIF图片则第一次为HTML页面引入了动态元素.不过人们已经不仅仅满足于访问放在Web服务器上的静态文件,1993年CGI(Common ...
ASP PHP和JSP三大动态网页技术
ASP.PHP.JSP三者都是面向Web服务器的技术,客户端浏览器不需要任何附加的软件支持.程序代码的执行结果被重新嵌入到HTML代码中,然后一起发送给浏览器.在ASP.PHP.JSP环境下,HTML ...
计算机二级web题目（6）--动态网页技术概述
1 [单选题] 下列不属于动态网页格式的是(D). A. ASP B. JSP C. ASPX D. VBS 2 [单选题]相对比较早出现的服务器端动态网页技术是(B). A. ASP B. CGI ...
动态网页技术--JSP（7）
动态网页技术--JSP(7) 一.Ajax 同步传输:一问一答的样式,有发送的请求就返回响应异步传输:多问多答的样式,不需要刷新整个页面,就可以完成局部数据访问开发步骤: 1.事件驱动函数 2.如 ...
JSP动态网页技术基本知识点总结
今天学习了JSP动态网页技术的基本用法 1. 动态页面技术( jsp ) what is jsp? java server page java服务器页面技术. jsp包括了 ...
常用的4种动态网页技术
1. 常用的4种动态网页技术 1.1. CGI CGI(Common Gateway Interface,公用网关接口)是较早用来建立动态网页的技术.当客户端向Web服务器上指定的CGI程序发出请 ...
动态网页技术的发展走向
其实这类知识点,大家知道即可.这样当自己去面试时,让面试官觉得你的课外知识比较丰富,懂得的不只是关于编写代码的技能,同时还具有该行业内相关知识.常见的动态网页技术有如下: 1.CGI(common g ...
美化网页、ASP动态网页技术
CSS技术多媒体技术 ↑ ↑ 美化网页.ASP动态网页技术一.CSS技术 CSS就是Cascading Style Sheet中文翻译为"层叠样式表"它是一种制作网页的新技术, ...
Web应用工作原理、动态网页技术
我们知道应用程序有两种模式,C/S模式和B/S模式.C/S模式是客户端/服务器模式,这类应用程序一般独立的运行.B/S模式是浏览器/服务器模型,需要借助浏览器来运行. web应用程序一般就是B/S模 ...

前端动态网页技术JS（JavaScript)

静态网页和动态网页

动态网页

网页是如何和后端交互的呢？

JS概述

什么是JS

名词解释

特点和优势

入门案例

HTML中引入JS

通过script标签引入JS代码

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

JS语法

注释

基本数据类型

JS的变量

JS的运算符

JS语句

if…else语句

switch…case语句

循环语句（for）

JS数组

JS数组的声明方式

数组需要注意的细节

JS函数

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

JS对象

内置对象

自定义对象

DOM树的作用

组成

DOM树结构

Document对象

dom.html

–2,测试

总结

json（数据交换格式）

概念

作用

语法

转换工具

测试

前端动态网页技术JS（JavaScript)相关推荐

最新文章

热门文章