##chapter 2: JavaScript 语法
JavaScript嵌入到html中的方式: 3种
JavaScript是弱类型动态语言,运行环境是浏览器,其中内置JavaScript引擎,熟知的像Chrome和NodeJS使用的V8引擎。
语法
语句: 像英语中的句子,只不过受体是浏览器
注释: 受体是开发和维护的人.方式: //, /*...*/
变量: 计算机中的一小块固定的内存区域,变量指向这块内存的地址,内存代表的值就是变量的值.
程序运行过程中,变量的值可以改变.变量的名字区分大小写.
数据类型: 弱类型语言,在声明变量的时候可以不指定具体的数据类型,给予开发者更大的使用自由,但也容易出现运行时错误.
字符串: 单引号,双引号是等价的.内容中的特殊字符可以转义,'this is \'escaping\'.'
数值: 直接使用的是浮点数,整数只是其子集
布尔值: 只有两个值true/false,对应电路的开与关,电流的有无
数组: 用一个变量表示值的集合.同一个数组中元素的类型可以不一致.
var ary = Array(12,'as',true);
对象: 对象也用一个名字表示一组值,对象的值都是其属性,与数组不一样的,属性的名字可以是有意义的字符串.
var obj = {name:'obj',year:'1999',living:false };
操作
算术操作符: + - * /, ++, (),
拼接操作符: + 非数字
比较操作符:
逻辑操作符:
条件语句和循环语句
if
for/while
函数和对象
函数: 一组允许在代码里随时调用的语句.每个函数都是一个短小的脚本
函数体对变量来说是局部作用域
对象: 是可以自定义的非常重要的数据类型.对象里数据的访问形式: 属性和方法
内建对象: JavaScript自定义的对象 数组
宿主对象: 浏览器自定义的对象 document
用户自定义对象:
##chapter 3: DOM Document Object Model 文档对象模型
##chapter 4: JavaScript图片库
DOM提供的API编写JavaScript脚本,使用事件处理函数将脚本与网友连接起来
事件处理函数: 特定的事件发生时调用特定的JavaScript代码.被调用的JavaScript的函数会默认返回一个值,例如true.
如果我们要阻止浏览器执行默认操作,只要认为写入return false;
阻止用户单击图片链接后跳转界面
second
function showPic(e) {
let placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src", e.getAttribute("href"));
if (!e.getAttribute("title")) return;
let imgdesc = document.getElementById("imgdesc");
imgdesc.firstChild.nodeValue = e.getAttribute("title");
}
DOM的属性
childNodes 标准的,它返回指定元素的子元素集合,包括HTML节点,所有属性,文本.
let bodyElement = document.getElementsByTagName("body")[0];
console.log(bodyElement.childNodes.length);
nodeType 判断是哪种类型的节点
**1是元素节点,2是属性节点,3是文本节点**
nodeValue
imgdesc.firstChild.nodeValue = e.getAttribute("title");
firstChild/lastChild
firstChild实际上是bodyElement.childNode[0]
##chapter 5: 标记良好的内容就是一切
平稳退化: 用户在浏览器不支持JavaScript的情况下仍能完成基本的操作.
Stationary degradation
JavaScript伪协议,不推荐
new tab
分离JavaScript,参考CSS: 层叠样式表 渐进增强原则
css: 将web文档的内容结构(标记)和版面设计(样式)分离开来
向后兼容
浏览器嗅探技术
性能考虑
尽量减少访问DOM和尽量减少标记
每次访问DOM标记都会搜索整个DOM树
合并和放置脚本
script标签放到标签之前可以让页面变得更快
压缩文件
去掉空格,注释等
##chapter 6
原则: 行为与表现分离
如果想用JavaScript给某个网页添加一些行为,就不应该让JavaScript代码对这个网页的结构有任何依赖
尽量让JavaScript代码不依赖于没有保证的假设,通过测试和检查实现代码的平稳退化
let placeholder = document.getElementById(“placeholder”);
if (!placeholder || placeholder.nodeName != “IMG”) return false;
placeholder.setAttribute(“src”, e.getAttribute(“href”));
没有使用onkeypress事件处理函数,保证代码的可访问性
if (!links[i].onclick)
links[i].onclick = function () {
return !showPic(this);
};
// if (!links[i].onkeypress)
// links[i].onkeypress = links[i].onclick;
把事件处理函数从html标记文档分离到外部的JavaScript文件,使JavaScript代码不对这个网页的结构有任何依赖
function prepareLinks() {
if (!document.getElementsByTagName) return false; //向后兼容
let links = document.getElementsByTagName(‘a’);
for (let i = 0; i < links.length; i++)
if (links[i].getAttribute(“class”) == “popUp”) {
links[i].onclick = function () {
popUp(this.getAttribute(“href”));
return false;
}
}
}
DOM Core和HTML-DOM
DOM Core: 定义了一个面向事件和树结构的跨平台模型.它规定了一套可以在浏览器,编译器等平台运行的树结构的模型的API.
HTML-DOM: 用JavaScript实现的在浏览器中运行的DOM,为了方便使用,简写一些API.
DOM Core HTML-DOM
element.getAttribute(“src”); element.src;
##chapter 7 动态创建标记
JavaScript通过创建新元素和修改现有元素来改变网页结构
//在window.onload后面追加函数
function addloadEvent(func) {
let oldonLoad = window.onload;
if (typeof window.onload != 'function') {
window.onload = func
} else {
window.onload = function () {
oldonLoad();
func();
}
}
}
//在targetElement后边插入newElement
function insertAfter(newElement, targetElement) {
let parent = targetElement.parentNode;
if (parent.lastChild == targetElement)
parent.appendChild(newElement);
else
parent.insertBefore(newElement, targetElement.nextSibling);
}
//图片展示区域通过JavaScript代码加载
function preparePlaceholder() {
if (!document.createElement || !document.createTextNode) return false;
if (!document.getElementById || !document.getElementById('imagallery')) return false;
//
// choose an image.
let placeholder = document.createElement('img');
placeholder.setAttribute("id", "placeholder");
placeholder.setAttribute("src", "images/first.jpg");
placeholder.setAttribute("alt", "image gallery");
let imgdesc = document.createElement("p");
imgdesc.setAttribute("id", "imgdesc");
let desc = document.createTextNode("choose an image.");
imgdesc.appendChild(desc);
let gallery = document.getElementById("imagallery");
insertAfter(placeholder, gallery);
insertAfter(desc, placeholder);
}
addloadEvent(preparePlaceholder);
Ajax 异步加载页面内容的技术
Ajax可以只更新页面中的一部分,优势就是对页面的请求以异步方式发送到服务器.
核心是XmlHttpRequest对象,充当着浏览器中脚本和服务器中间人的角色
##chapter 8: 充实文档的内容
##chapter 9: CSS-DOM
网页:
结构层: HTML这类的标记语言创建,标签描述网页的语义
this is text desc
##chapter10 JavaScript实现动画
动画: 随时间而改变某个元素在浏览器窗口里的显示位置
元素的位置 position, element.style.top
position: static 默认值,元素将按照在标记里出现的先后顺序出现在浏览器窗口
relative = static + float
absolute 绝对位置, 所处容器的绝对位置
top距离顶端 left距离左端 right bottom,对应的位置属性最好只设置一个
element {
position: absolute;
top: 50px;
left: 100px;
}
setTimeout 设置函数经过一段时间后执行
let sample = setTimeout(“function”,interval);
clearTimeout(sample);
for(let i=0; i<5 ; i++){ setTimeout(‘alert(123)’,2000*i); }
Note: 同时执行两个movement()会产生变量争用,因为js是单线程的,会导致死循环
解决: 介于全局变量和局部变量,作用于正在被移动的元素整个生命周期的的变量,元素的属性
movement(“message”,300,400,100);movement(“message”,100,200,100);
movement = function (eleid, fx, fy, interval){
let ele = document.getElementById(eleid);
if(!ele) return false;
if(ele.move) clearTimeout(ele.move);
let px = parseInt(ele.style.left);
let py = parseInt( ele.style.top);
if(fx == px && fy ==py) return true;
console.log(px +","+ py);
if(fx>px) px++;
if(fxpy) py++;
if(fy
##chapter11 HTML5
HTML5: 网页三层的一个集合,提供了升级的技术并且向后兼容.
使用: 文档声明类型改为****
HTML5 技术 (中文)
1. 结构层 HTML : section,article,header,footer;canvas,audio,video
2. 样式层 CSS : 高级选择器,渐变,变换和动画
3. 行为层 DOM + javascrit API : 新元素有新的API;自定义video以改变其播放方式,form元素支持进度控制
canvas元素可以绘制图形,添加图片及其他对象
4. 新模块 : Geolocation,Storage,Drap-and-Drop,Socket and web worker
canvas 图片交互功能, JavaScript作为画笔的画布
video & audio
不同的浏览器和视频解码算法是主要的阻碍,使用时注意向后兼容
Your browser does not support HTML5 video.
form
为了应对不兼容的浏览器使用特性检测准备另一个方案
Features and WebSites
webstorage
websocket
web workers
drag and drop
HTML Living Standard
W3C HTML5 Eorking Draft
Demos
##chapter12 example