JavaScript学习笔记（三）
第十五章——JavaScript客户端开发技术
JavaScript应用环境组成
运行期环境是由宿主环境通过脚本引擎创建的，实际上是由JavaScript引擎创建的一个代码解析初始化环境。
- 如果不是通过JavaScript脚本生成HTML网页的内容，一般放在HTML的head标签内；
- 当需要使用JavaScript脚本生成HTML网页内容时，如某些JavaScript实现的动态树，就需要把js放在body之间。
使用伪URL地址引入JavaScript脚本代码：
onclick="JavaScript:alert('已经用鼠标点击文本框!')"第十六章——JavaScript服务端开发技术
JavaScript本身是一门脚本语言，脚本语言常用来调用接口和功能。
服务端JavaScript的运行环境是node.js。简单的说，node.js就是运行在服务端的JavaScript， 是一个平台，是一个环境。该环境基于谷歌的V8引擎。
B/S技术：
- 用户只需安装一个浏览器Browser，服务器上安装数据库
- 用户界面完全通过WWW浏览器实现
- 一部分事务逻辑在前端实现
- 主要事务逻辑在服务端实现
- 浏览器通过web服务器同数据库进行交互案例——制作网页版时钟
<!DOCTYPE html>
<html>
<head>
<title>制作网页版时钟</title>
</head>
<body>
<canvas id="canvas" width="200" height="200" style="border:1px solid #000;">您的浏览器不支持Canvas。</canvas>
<script type="text/javascript" language="javascript" charset="utf-8">
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
if (ctx) {
var timerId;
var frameRate = 60;
function canvObject() {
this.x = 0;
this.y = 0;
this.rotation = 0;
this.borderWidth = 2;
this.borderColor = '#000000';
this.fill = false;
this.fillColor = '#ff0000';
this.update = function () {
if (!this.ctx) throw new Error('你没有指定ctx对象。');
var ctx = this.ctx
ctx.save();
ctx.lineWidth = this.borderWidth;
ctx.strokeStyle = this.borderColor;
ctx.fillStyle = this.fillColor;
ctx.translate(this.x, this.y);
if (this.rotation) ctx.rotate(this.rotation * Math.PI / 180);
if (this.draw) this.draw(ctx);
if (this.fill) ctx.fill();
ctx.stroke();
ctx.restore();
}
};
function Line() {};
Line.prototype = new canvObject();
Line.prototype.fill = false;
Line.prototype.start = [0, 0];
Line.prototype.end = [5, 5];
Line.prototype.draw = function (ctx) {
ctx.beginPath();
ctx.moveTo.apply(ctx, this.start);
ctx.lineTo.apply(ctx, this.end);
ctx.closePath();
};
function Circle() {};
Circle.prototype = new canvObject();
Circle.prototype.draw = function (ctx) {
ctx.beginPath();
ctx.arc(0, 0, this.radius, 0, 2 * Math.PI, true);
ctx.closePath();
};
var circle = new Circle();
circle.ctx = ctx;
circle.x = 100;
circle.y = 100;
circle.radius = 90;
circle.fill = true;
circle.borderWidth = 6;
circle.fillColor = '#ffffff';
var hour = new Line();
hour.ctx = ctx;
hour.x = 100;
hour.y = 100;
hour.borderColor = "#000000";
hour.borderWidth = 10;
hour.rotation = 0;
hour.start = [0, 20];
hour.end = [0, -50];
var minute = new Line();
minute.ctx = ctx;
minute.x = 100;
minute.y = 100;
minute.borderColor = "#333333";
minute.borderWidth = 7;
minute.rotation = 0;
minute.start = [0, 20];
minute.end = [0, -70];
var seconds = new Line();
seconds.ctx = ctx;
seconds.x = 100;
seconds.y = 100;
seconds.borderColor = "#ff0000";
seconds.borderWidth = 4;
seconds.rotation = 0;
seconds.start = [0, 20];
seconds.end = [0, -80];
var center = new Circle();
center.ctx = ctx;
center.x = 100;
center.y = 100;
center.radius = 5;
center.fill = true;
center.borderColor = 'green';
for (var i = 0, ls = [], cache; i < 12; i++) {
cache = ls[i] = new Line();
cache.ctx = ctx;
cache.x = 100;
cache.y = 100;
cache.borderColor = "green";
cache.borderWidth = 2;
cache.rotation = i * 30;
cache.start = [0, -70];
cache.end = [0, -80];
}
timerId = setInterval(function () {
// 清除画布
ctx.clearRect(0, 0, 200, 200);
// 填充背景色
ctx.fillStyle = 'green';
ctx.fillRect(0, 0, 200, 200);
// 表盘
circle.update();
// 刻度
for (var i = 0; cache = ls[i++];) cache.update();
// 时针
hour.rotation = (new Date()).getHours() * 30;
hour.update();
// 分针
minute.rotation = (new Date()).getMinutes() * 6;
minute.update();
// 秒针
seconds.rotation = (new Date()).getSeconds() * 6;
seconds.update();
// 中心圆
center.update();
}, (1000 / frameRate) | 0);
} else {
alert('您的浏览器不支持Canvas无法预览时钟！');
}
</script>
</body>
</html>第十七章——JavaScript数据存储技术
Web Storage
1. sessionStorage
在本地存储一个会话session中大的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage并不是一个持久化的数据存储，仅仅是会话级别的数据存储。
2. localStorage
localStorage一存储在本地，数据存储是永久的，特点如下：
- 数据安全，永久保存，即客户端或浏览器中来自同一域名的所有页面都可访问localStorage
- 数据不会随着http请求发送到服务器
- 存储数据的大小，HTML5中要求至少支持4MB方法：
- setItem（键名，键值）
- getItem（键值）
- removeItem（键值）
- clear（），移出本地存储所有数据Indexed Database
简称indexedDB，是web客户端存储结构话数据的规范之一。
IndexedDB不支持SQL查询语句，更接近于NoSQL数据库。
- 键值对存储：采用对象仓存储 Object Store
- 异步性：不会锁死浏览器
- 支持事务：transaction，一步失败，事务回滚
- 同域限制：每一个域名对应一个数据库
- 存储空间大：不少于250MB
- 支持二进制存储- var openRequest = indexedDB.open(“test”, 1) 表示新建一个为test的数据库,版本号为1
- db = e.target.result；
- db.createObjectStore（“firstOS”）：类似与表格的对象仓库
数据库事务：
- var t = db.transaction(["firstOS"], "readwrite") ;
- 可选参数: readonly, writeonly, readwrite操作数据库数据:
- 添加数据：add（数据，键名）
- 读取数据：get（键名）
- 更新数据：put（数据， 键名）
- 删除数据：delete（键名）
- 遍历数据：openCursor（）第十八章——JavaScript错误和异常处理
window.onerror = function() { //处理逻辑 }
try-catch
第十九章——JavaScript的安全策略
安全策略
同源策略： 判断两个URL是否属于同一个源的方法：
- 协议相同
- 端口相同
- 域名相同跨域请求：
- 跨域资源共享（CORS）
var url = "https://wsuo.top";
document.cookie = "version=1";
$.ajax({ url : url })运行这段代码之后，就会返回数据，同时不会被浏览器拦截，同时请求头多了一个字段：Access-Control-Allow-Origin，这个字段就是所谓的资源共享，它的值表示允许任意网站向这个接口请求数据。也可以这样：
response.writeHead(200, {"Access-Conteol-Allow-Origin":"http://wsuo.top"});- JSONP方法
原理是客户端告诉服务器一个回调函数的名称，服务在返回的
<script></script>里面调用这个回调函数，同时传进客户端需要的数据，这样返回的代码就在浏览器中执行了。 - 子域跨父域 子域跨父域是支持的，但是需要将子域的域名改成父域的，例如mail.mysite.com要请求mysite。com的数据，那么在mail.mysite.com脚本中要执行如下代码：
document.domain = "mysite.com";常用的安全策略代码
- 屏蔽部分按键
值 | 描述 |
|---|---|
8 | 退格键 |
13 | 回车键 |
116 | F5 |
46 | 删除键 |
if(event.keyCode == 13) {
event.keyCode = 0;
event.returnValue = false;
alert("当前设置不允许使用回车键");
}- 屏蔽鼠标右键
<script language=javascript>
function click() {
event.returnValue=false;
alert("当前设置不允许使用右键！");
}
document.oncontextmenu=click;
</script>- 禁止网页另存为，使用
<noscript>
<noscript>
<iframe scr="*.htm"></iframe>
</noscript>- 禁止复制网页内容，使用oncopy事件
<body oncopy="alert('进制复制!');return false;"> - JavaScript加密与解密
- 加密：escape( )；
- 解密：unescape( )；
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-02-11 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
对象存储
对象存储（Cloud Object Storage，COS）是由腾讯云推出的无目录层次结构、无数据格式限制，可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限，无需分区管理，适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。