JavaScript高级程序设计pdf,javascript高级程序设计

大家好,小编来为大家解答以下问题,javascript高级程序设计第五版 pdf,javascript高级程序设计pdf百度云,今天让我们一起来看看吧!

目录

一、Exception

1.异常概述

2.异常捕捉

3.异常抛出

二、JSON

1.JSON概述

2.JSON数据类型

(1)、JSON字符串

(2)、JSON数字

(3)、JSON对象

(4)、JSON数组

(5)、JSON布尔

(6)、JSON null

(7)、JSON字符串转JS对象

(8)、JS对象转JSON字符串

(8)、JSON PHP

三、AJAX

1.AJAX概述

2.XMLHttpRequest对象

3.get和post请求

四、Cookie

1.概述

2.Cookie创建

3.Cookie读取

4.Cookie修改

5.Cookie删除

6.Cookie值设置函数

7.Cookie值获取函数

8.检测 cookie 值的函数

六、WebStorage

1.WebStorage概述

2.WebStorage分类

3.localStorage方法

4.sessionStorage方法

七、Closure

1.闭包概述

2.闭包生命周期

3.闭包应用


一、Exception

1.异常概述

当错误发生时,JavaScript 提供了错误信息的内置 error 对象。

error 对象提供两个有用的属性:name 和 message

属性名描述
name设置或返回错误名
message设置或返回错误消息

name属性的返回值:

返回值描述
EvalError已在 eval() 函数中发生的错误
RangeError已发生超出数字范围的错误
ReferenceError已发生非法引用
SyntaxError已发生语法错误
TypeError已发生类型错误
URIError在 encodeURI() 中已发生的错误

2.异常捕捉

try-catch 方法:

语法格式:

try {
    // 可能发生异常的代码
} catch (error) {
    // 发生错误执行的代码
} finally {
    // 无论是否出错都会执行的代码
}

注:在 try…catch 中,try 中一旦出现错误则其它语句不能执行,如果不出现错误则 catch 中的语句不会执行

3.异常抛出

在检测到一些不合理的情况发生的时候也可以主动抛出错误

 throw 可以主动抛出异常

注:

  • thow后面跟我们要抛出的异常对象
  • 只要有异常对象抛出,不管是浏览器抛出的,还是代码主动抛出,都会让程序停止执行Python中的所有运算符号。如果想让程序继续执行,则有也可以用try…catch来捕获。
  • 每一个错误类型都可以传入一个参数,表示实际的错误信息。
  • 我们可以在适当的时候抛出任何我们想抛出的异常类型。

语法:

throw new SyntaxError("语法错误...");

二、JSON

1.JSON概述

JSON 是一种存储和交换数据的语法。

JSON 是通过 JavaScript 对象标记法书写的文本

数据交换:

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

语法规则:

  • 数据在名称/值对中
  • 数据由逗号分隔
  • 花括号容纳对象
  • 方括号容纳数组

数据:

JSON 数据写为名称/值对

"名称":"值"

注:

  • JSON 名称需要双引号。而 JavaScript 名称不需要。
  • 在 JSON 中,键必须是字符串,由双引号包围
  • 在 JavaScript 中,键可以是字符串、数字或标识符名称

JSON 值:

在 JSON 中,值必须是以下数据类型之一:

  • 字符串
  • 数字
  • 对象(JSON 对象)
  • 数组
  • 布尔
  • null

在 JavaScript 中,以上所列均可为值,外加其他有效的 JavaScript 表达式,包括:

  • 函数
  • 日期
  • undefined

注:JSON值不能为 函数,日期,undefined

通过 JavaScript,您能够创建对象并向其分配数据

var person =  { name : "Bill Gates", age : 62, city : "Seattle" };
// 返回 Bill Gates
person.name;

2.JSON数据类型

(1)、JSON字符串
{"name": "John"} //字符串必须用双引号包围
(2)、JSON数字
{"age": 30} //必须是整数或浮点数

(3)、JSON对象
{
    "employee": {"name": "Bill Gates", "age": 62, "city": "Seattle"}
}
//JSON 中作为值的对象必须遵守与 JSON 对象相同的规则

(4)、JSON数组
{
    "employees": ["Bill", "Steve", "David"]
}

(5)、JSON布尔
{"sale": true}

(6)、JSON null
{"middlename": null}

(7)、JSON字符串转JS对象

JSON.parse()方法:

可以将以JSON字符串转换为JS对象,它需要一个JSON字符串作为参数,会将该字符串转换为JS对象并返回

var obj = JSON.parse(jsonStr);

(8)、JS对象转JSON字符串

JSON.stringify()方法:

可以将一个JS对象转换为JSON字符串,需要一个js对象作为参数,会返回一个JSON字符串

var jsonStr = JSON.stringify(obj);

(8)、JSON PHP

客户端与 PHP 服务器之间交换 JSON 数据

详细请查看:JSON PHP

三、AJAX

1.AJAX概述

AJAX 是开发者的梦想,因为您能够:

  • 不刷新页面更新网页
  • 在页面加载后从服务器请求数据
  • 在页面加载后从服务器接收数据
  • 在后台向服务器发送数据

AJAX 如何工作:

  • 网页中发生一个事件(页面加载、按钮点击)
  • 由 JavaScript 创建 XMLHttpRequest 对象
  • XMLHttpRequest 对象向 web 服务器发送请求
  • 服务器处理该请求
  • 服务器将响应发送回网页
  • 由 JavaScript 读取响应
  • 由 JavaScript 执行正确的动作(比如更新页面)

2.XMLHttpRequest对象

Ajax 的核心是 XMLHttpRequest 对象

所有现代浏览器(Chrom、IE7+、Firefox、Safari 以及 Opera)都有内建的 XMLHttpRequest 对象。

创建 XMLHttpRequest 的语法是:

variable = new XMLHttpRequest();

老版本的 Internet Explorer(IE5 和 IE6)使用 ActiveX 对象:

variable = new ActiveXObject("Microsoft.XMLHTTP");

XMLHttpRequest 对象方法:

方法描述
new XMLHttpRequest()创建新的 XMLHttpRequest 对象
abort()取消当前请求
getAllResponseHeaders()返回头部信息
getResponseHeader()返回特定的头部信息
open(methodurl, async, user, psw)

规定请求

  • method:请求类型 GET 或 POST
  • url:文件位置
  • async:true(异步)或 false(同步)
  • user:可选的用户名称
  • psw:可选的密码
send()将请求发送到服务器,用于 GET 请求
send(string)将请求发送到服务器,用于 POST 请求
setRequestHeader()向要发送的报头添加标签/值对

XMLHttpRequest对象属性:

属性描述
onreadystatechange定义当 readyState 属性发生变化时被调用的函数
readyState

保存 XMLHttpRequest 的状态。

  • 0:请求未初始化
  • 1:服务器连接已建立
  • 2:请求已收到
  • 3:正在处理请求
  • 4:请求已完成且响应已就绪
responseText以字符串返回响应数据
responseXML以 XML 数据返回响应数据
status

返回请求的状态号

  • 200: "OK"
  • 403: "Forbidden"
  • 404: "Not Found"

如需完整列表请访问 Http 消息参考手册

statusText返回状态文本(比如 “OK” 或 “Not Found”)

3.get和post请求

var Ajax = {
    get: function (url, fn) {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) {
                fn.call(this, xhr.responseText);
            }
        };
        xhr.send();
    },
    post: function (url, data, fn) {
        var xhr = new XMLHttpRequest();
        xhr.open("POST", url, true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
                fn.call(this, xhr.responseText);
            }
        };
        xhr.send(data);
    }
};

// 演示GET请求
Ajax.get("users.json", function (response) {
    console.log(response);
});

// 演示POST请求
Ajax.post("users.json", "", function (response) {
    console.log(response);
});

四、Cookie

1.概述

Cookie 是一些数据, 存储于你电脑上的文本文件中。

当 web 服务器向浏览器发送 web 页面时,在连接关闭后,服务端不会记录用户的信息。

Cookie 的作用就是用于解决 "如何记录客户端的用户信息":

  • 当用户访问 web 页面时,他的名字可以记录在 cookie 中。
  • 在用户下一次访问该页面时,可以在 cookie 中读取用户访问记录。

Cookie 以名/值对形式存储,如下所示:

username=John Doe

注:当浏览器从服务器上请求 web 页面时, 属于该页面的 cookie 会被添加到该请求中。服

       务端通过这种方式来获取用户的信息。 

 JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie

2.Cookie创建

创建 cookie :

document.cookie="username=John Doe";

为 cookie 添加一个过期时间(以 UTC 或 GMT 时间)

document.cookie = "username=zhangsan; expires=Thu, 18 Dec 2043 12:00:00 GMT";

默认情况下,cookie 在浏览器关闭时删除

您可以使用 path 参数告诉浏览器 cookie 的路径。

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

默认情况下,cookie 属于当前页面。 

3.Cookie读取

在 JavaScript 中, 可以使用以下代码来读取 cookie:

var x = document.cookie;

4.Cookie修改

使用 document.cookie 将旧的 cookie 将被覆盖就是修改

document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

5.Cookie删除

删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

6.Cookie值设置函数

/*
 Cookie值设置函数
 cname     cookie名称
 cvalue    cookie值
 exdays    过期天数
 */
function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}

7.Cookie值获取函数

/*
 Cookie值获取函数
 @param cname     cookie名称
 @returns {string}
*/
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i].trim();
        if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
    }
    return "";
}

8.检测 cookie 值的函数

function checkCookie()
{
  var username=getCookie("username");
  if (username!="")
  {
    alert("Welcome again " + username);
  }
  else 
  {
    username = prompt("Please enter your name:","");
    if (username!="" && username!=null)
    {
      setCookie("username",username,365);
    }
  }
}

六、WebStorage

1.WebStorage概述

WebStorage是HTML5中本地存储的解决方案之一,浏览器兼容的本地存储方案只有使用Cookie至于为什么还要引入WebStorage,那就要说一说Cookie的缺陷了:

  • 数据大小:作为存储容器,Cookie的大小限制在4KB左右这是非常坑爹的,尤其对于现在复杂的业务逻辑需求,4KB的容量除了存储一些配置字段还简单单值信息,对于绝大部分开发者来说真的不知指望什么了。
  • 安全性问题:由于在HTTP请求中的Cookie是明文传递的(HTTPS不是),带来的安全性问题还是很大的。
  • 网络负担:我们知道Cookie会被附加在每个HTTP请求中,在HttpRequest和HttpResponse的header中都是要被传输的,所以无形中增加了一些不必要的流量损失。

WebStorage不是为了取代Cookie而制定的标准,Cookie作为HTTP协议的一部分用来处理客户端和服务器通信是不可或缺的,session正是依赖于实现的客户端状态保持。WebStorage的意图在于解决本来不应该Cookie做,却不得不用Cookie的本地存储的应用场景。

WebStorage的目的是为了克服由cookie带来的一些限制,当数据需要被严格控制在客户端上时,无须持续地将数据发回服务器。Web Storage的两个主要目标是:

  • 提供一种在cookie之外存储会话数据的途径。
  • 提供一种存储大量可以跨会话存在的数据的机制。

2.WebStorage分类

  • Web Storage又分为两种: sessionStorage 和localStorage ,即这两个是Storage的一个实例。
  • sessionStorage将数据保存在session中,浏览器关闭也就没了;
  • 而localStorage则一直将数据保存在客户端本地。
  • 不管是sessionStorage,还是localStorage,使用的API都相同。

注:

  • localStorage和sessionStorage只能存储字符串类型,对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理,低版本IE可以使用JSON2.js

3.localStorage方法

localStorage在本地永久性存储数据,除非显式将其删除或清空。

常见方法:

  • 保存单个数据:localStorage.setItem(key,value);
  • 读取单个数据:localStorage.getItem(key);
  • 删除单个数据:localStorage.removeItem(key);
  • 删除所有数据:localStorage.clear();
  • 获取某个索引的key:localStorage.key(index);

4.sessionStorage方法

  • sessionStorage对象存储特定于某个对话的数据,也就是它的生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了。
  • 存储在sessionStorage中的数据可以跨越页面刷新而存在,同时如果浏览器支持,浏览器崩溃并重启之后依然可以使用(注意:Firefox和Weblit都支持,IE则不行)。
  • 因为sessionStorage对象绑定于某个服务器会话,所以当文件在本地运行的时候是不可用的。
  • 存储在sessionStorage中的数据只能由最初给对象存储数据的页面访问到,所以对多页面应用有限制。

注:

  • 不同浏览器写入数据方法略有不同。
  • Firefox和Webkit实现了同步写入,所以添加到存储空间中的数据是立刻被提交的。而IE的实现则是异步写入数据,所以在设置数据和将数据实际写入磁盘之间可能有一些延迟。

常见方法:

  • 保存单个数据:sessionStorage.setItem(key,value);
  • 读取单个数据:sessionStorage.getItem(key);
  • 删除单个数据:sessionStorage.removeItem(key);
  • 删除所有数据:sessionStorage.clear();
  • 获取某个索引的key:sessionStorage.key(index);

七、Closure

1.闭包概述

JavaScript 变量属于本地或全局作用域。

全局变量能够通过闭包实现局部(私有)

  • 如何产生闭包?
  1. 当一个嵌套的内部(子)函数引用了嵌套的外部(父)函数的变量(函数)时,就产生了闭包
  • 什么才是闭包?
  1. 理解一:闭包是嵌套的内部函数(绝大部分人认为)
  2. 理解二:包含被引用变量(函数)的对象(极少部分人认为)
  • 闭包的作用?
  1. 它的最大用处有两个,一个是可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中

2.闭包生命周期

生命周期:

  1. 产生:在嵌套内部函数定义执行完时就产生了(不是在调用)
  2. 死亡:在嵌套的内部函数成为垃圾对象时就死亡了

即:

全局变量活得和您的应用程序(窗口、网页)一样久。

局部变量活得不长。它们在函数调用时创建,在函数完成后被删除

3.闭包应用

闭包应用: 定义JS模块

  • 具有特定功能的js文件
  • 将所有的数据和功能都封装在一个函数内部(私有的)
  • 只向外暴露一个包含n个方法的对象或函数
  • 模块的使用者,只需要通过模块暴露的对象调用方法来实现对应的功能


本文由博主在学习过程中所写,如有错误和问题,望理解。

  • 22
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值