JavaScript框架从入门到精通

文章目录

静态网页和动态网页
- 动态网页
- 网页是如何和后端交互的呢？
JS概述
- 什么是JS
- 名词解释
- 特点和优势
- 入门案例
HTML中引入JS
- 通过script标签引入JS代码
- 通过script标签引入外部的JS文件
JS语法
- 注释
- 基本数据类型
- 复杂数据类型
- JS的变量
- JS的运算符
JS语句
- if..else语句
- switch…case语句
- 循环语句
JS数组
- JS数组的声明方式
- 数组需要注意的细节
- 数组的常见操作
JS函数
- 方式一：通过function关键字声明函数
- 方式二：通过函数直接量声明函数
JS对象
- 内置对象
- 自定义对象
DOM树的作用
- 组成
- DOM树结构
- Document对象
- dom.html
- 总结
json
- 概念
- 作用
- 语法
- 转换工具
- 测试
ajax
- 概述
- 原理
- 核心对象XMLHttpRequest
- 测试
console调试网页
- Chrome
- log
- warn
- table

静态网页和动态网页

动态网页

我们有了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 前端开发者必学的三种语言之一：

HTML 定义网页的内容 H5
CSS 规定网页的布局 CSS3
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.

(5) null

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

复杂数据类型

函数、数组、对象（自定义对象、内置对象、DOM对象、BOM对象…）

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

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(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);

数组需要注意的细节

(1)JS数组中可以存放任意的数据类型

(2)JS中的数组长度可以被改变

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

数组的常见操作

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替代

//String对象的功能
let a = 'javascript';
console.log( a.length ); //获取字符串的长度
console.log( a.toUpperCase() ); //全转大写
let b = a.substring(1,5); //截取字符串[1,5)
console.log( b );
console.log( a.concat('hello ~') );  //拼串
//Math对象
console.log( Math.PI );//π的值
console.log( Math.random() ); //随机数0~1
console.log( Math.random() * 10 );
console.log( Math.round(1.9) );//对小数的处理,round四舍五入
console.log( Math.round(1.1) );//对小数的处理,round四舍五入
//Array对象
let c = [3,21,4,5,2];
console.log( c );
console.log( c.toString() );//打印数组里的数据
console.log( c.sort() ); //对数组排序
//window对象--可以省略
window.alert(100);//弹出框
window.prompt(); //输入框
window.confirm() ;//确认框

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树结构

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

Document对象

--获取对象: 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>

总结

获取页面元素的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>

ajax

概述

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

原理

核心对象XMLHttpRequest

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

测试

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

console调试网页

Chrome

专业人用专业的工具，浏览器调试谷歌、火狐最佳，使用F12打开调试窗口。也可以快捷键打开：ctrl+shift+i。

支持自动补全，提示下，按tab键补全
清除日志
Console控制台菜单

log

warn

table

以表格形式展现：