Javascript快速入门(上篇)
Javascript的熟练之路，小弟来了。
JavaScript简介：JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。与1995年，由Netscape公司的Brendan Eich设计实现，其相关标准为ECMAScript，当前的版本为ECMAScript 2016。
其组成包括3部分：ECMAScript，描述了该语言的语法和基本对象；文档对象模型（DOM），描述处理网页内容的方法和接口；浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。
Tip:常见BOM对象包括，document, location, history, navigator等。
基本数据类型，如下表所示。
数据类型 | 阐述 |
|---|---|
数值 | 整数: 55; 浮点数: 3.0,2.5e12; isNaN(3.14), NaN非数值; isfinity(21), Infinity无穷大;parseFloat()浮点数, parseInt()整数; |
字符串 | 转义序列: \t制表符, \n新行 concat:连接字符串，返回字符串的一个拷贝 indexOf/lastIndexOf:返回指定值在字符串里出现的第一个位置,最后一个位置 replace:子串替换 split:把字符串分解为一系列子串，保存到数组，返回一个新数组 substr:从指定的开始位置，提取指定数量的字符组成字符串 toLowerCase/toUpperCase:转换为小写/大写字符 |
布尔值 | bool, 可以将如下值作为false: undefined, null, 0, NaN, ""，此外注意!操作符 |
数组 | var myArray = new Array(); var myArray = []; concat:合并多个数组 join:把多个数组元素合并为一个字符串 toString:以字符串形式返回数组 index/lastIndexOf:在数组搜索指定元素 slice:根据指定的索引和长度返回一个新数组 sort:根据字母顺序或提供的函数对数组进行排序 spice:在数组指定索引添加或删除一个元素push,pop:添加和删除元素 |
控制结构：
控制结构 | 阐述 |
|---|---|
条件语句 | if(x==2){} else if(xxx){} else{} 需要注意的是==表示值相等，可能存在隐式转化，不够准确，比如2=='2',结果为true;而===表示值和类型都相等;常见比较符,!=, >, <, >=, <= switch(xxx){case xx: xxx;break; .. default:xxx} |
循环结构 | while(xxx){}, do{}while(xxx), for(;;){}, for(i in days);break, continue |
函数：javascript中的函数形式非常简单，主要注意的是其相关的变量的作用域，当回调函数多了时，会涉及闭包等概念。
<script>
function addTax(subtotal, taxRate) {
var total = subtotal * (1 + (taxRate / 100));
return total;
}
</script>常见BOM对象，如下表所示。
对象 | 阐述 |
|---|---|
window | 提供如下方法 alert(), 消息提示窗（模态） var boolValue = confirm('xxx'), prompt(arg1,arg2)，参数二用于输入默认值 |
document | .getElementById();此外可以通过innerHTML获取和设置<div>中html内容 .getElementsByTagName('div')获取特定的全部标签 .getElementsByClassName('div')返回具有特定的class属性值 |
history | .forward(),.backward()相当于前进和后退，.next()获取下一个页面（向前或向后）， .go(-3)回退页面，.go('aaa.com')获取历史中第一个匹配的URL |
location | .href完整url，.protocol协议名（包括:）, .hash为锚点,如'#list' .host主机名加端口(可以分拆为hostname和port) .pathname为项目完整路径，.search为查询字符串（包括?）, 页面导航的两种方式：location.href='www.xionger.com',location.replace('xx'); 刷新页面：document.reload(true);true表示强制从服务器拉取，默认拉取本地 |
navigator | 包含大量浏览器信息，如appName,appVersion,language,platform,cpuClass等 |
常见内置对象和函数，如下表所示。
对象 | 阐述 |
|---|---|
Date | var mydate = new Date();new Date(milliseconds), new Date(dataString) 获取时间:.getFullYear(),.getMonth(),.getDate(),.getDay(),.getDay() ,.getHours(),.getMinutes(),.getSeconds() 此外，还可以用对应的.setXxx()进行修改 |
Math | .ceil/.floor向上/向下取整;.max(a,b,..)/min(..)最大最小值 .random()随机数;数学常数，如.PI,LN2,LN10,E(自然对数的底,2.718)等 |
关键字with | 类似.NET中的using,可以用于省略前缀对象，不常用 |
Javascript语法相对比较简单，但也需要养成良好的编程习惯，比较有实际意义的建议如下所示。
编程习惯 | 阐述 |
|---|---|
谨慎使用JS | 尽量使用常用的界面元素；样式依靠CSS而不是JS |
编写简单易读的代码 | 合理使用注释,/**xxx*/, //; 命名适当, 常量大写，变量骆驼命名法 尽量复用代码；不要假设，当函数内部运算失败时，返回false |
平稳退化 | 就是当用户的浏览器缺少某些让页面设计充分展示的功能，或关闭该功能时，仍然可以将站点的内容呈现给用户 |
渐进增强 | 首先建立一个大部分用户可以访问的网站，然后添加额外的功能层次，服务更高要求的用户（即开启相关功能的用户） |
妥善的错误处理 | try{xx}catch(err){xx} |
接下，通过一个表格简要介绍javascript有关面向对象编程的相关概念，javascript提供了面向对象3大特性中的两个，封装和继承。
概念 | 示例 |
|---|---|
对象创建 | 方式1,直接创建对象: var obj = new Object(); obj.info = 'I like you'; myNewObject.showInfo=function(){altert(this.info);};//注意这儿为匿名方法 方式2，构造类，然后新建对象: function MyObjectType(info) { this.info = info; this.showInfo = function() { alert(this.info) } this.setInfo = function(newInfo) { this.info = newInfo; } } var obj = new MyObjectType(); |
继承 | 这儿会用到prototype关键字,首先介绍扩展方法，该方式也可以用于扩展js内置对象 MyObjectType.prototype.sayHello = function() { alert('Hello, Xionger'); 继承示例 function Pet() { this.name = ''; this.setName(newName) { this.name = newName; } } function Dog() { this.breed = ''; this.setBreed = function(newBreed) { this.breed = newBreed; } } Dog.prototype = new Pet(); |
扩展 | 对于javascript来说，在构造函数内声明的变量只能在对象内部使用，对于外部是不可见的。如果想从外部访问这些变量和函数，需要在赋值时使用关键字this |
Tip：
可以使用如下方式判断一个javaScript函数是否存在, if(typeof document.getElementById == 'function'){}。此外type(xxx)的返回值还包括，'number'操作数为数值；'string'操作数字符串；'boolean'表示布尔类型；'object'表示对象；undefined/null表示未定义/null。
JSON是JavaScript对象的一种简单紧凑的标签，使用JSON时，对象可以简单的转换为字符串来进行存储和转换。
概念 | 示例 |
|---|---|
将JSON字符串转化为对象 | 方法1: var myObject = eval('(' + jsonObjectString + ')'); 方法2(在浏览器支持时):JSON.parse(xxx); |
将对象序列化为JSON字符串 | var obj = new Object();obj.name = 'xionger';JSON.stringify(obj); |
JSON的数据类型 | 包括数值，字符串，对象等，但比如Date,Function等不属于JSON标准，需要编解码之后才能使用 |
模拟关联数组 | var myArr =[]; myArr[0]='Monday'; myArr[1]='Tuesday'; var myRefer = {'firstDay':'Monday', 'secondDay':'Tuesday'} myRefer['secondDay'] = 'Tuesday' |
使用JSON创建对象 | var user = { 'name':'xionger', 'setName':function(newName){this.name=newName;} },主要注意这种方式只能用于js环境，而不能用于数据交换 |
安全性 | Eval()函数可以执行任何js命令，不过存在潜在风险，推荐使用内置JSON解析器 |
事件及事件响应：对于主要致力于为页面添加交互性的脚本语言来说，事件功能必不可少，常见的事件处理其如下表所示：
事件处理器 | 示例 | 事件处理器 | 示例 |
|---|---|---|---|
onBlur/Focus | 用户离开/进入字段 | onChange | 修改了值，正要离开 |
onClick/DbClick | 点击/双击鼠标 | onKeydown/up/press | 在元素激活时，一个按键被按下/释放或者按下然后释放 |
onLoad | 对象已加载 | onMousedown/up | 鼠标在一个对象上按下/释放 |
onMousemove | 鼠标在其上方移动 | onMouseover/out | 鼠标移动到对象上/离开对象 |
onReset | 用户重置表单 | onSelect | 用户选择了对象的一些内容 |
onSubmit | 提交表单 | onUnload | 关闭浏览器窗口 |
事件相关概念
概念 | 示例 |
|---|---|
添加事件处理器 | document.getElementById('mybutton').onclick =function(){alert('you click button');}; |
删除事件处理器 | document.getElementById('mybutton').onclick=null |
默认操作 | 比如用户点击一个链接时，我们可以通过修改src修改默认跳转的页面 document.getElementById('mybutton').onclick =function(){this.href('www.baidu.com');}; 禁止默认行为 可以通过在事件处理函数中添加return false;来阻止默认操作 |
event对象 | 事件对象，包含事件相关参数。IE：window.event; W3C为事件处理函数的参数e 兼容写法function(e){if(!e) var e = window.event;} 通用属性: type,事件类型;altKey,ctrlKey,shiftKey, alt/ctrl/shift键是否按下; clientX,client, 浏览器窗口事件坐标; screenX,screenY, 相对于屏幕的事件坐标 相异的属性:secElement(IE),target(W3C，接受事件的对象 |
添加事件处理器 | IE方式: element.attachEvent('onclick',myFunction); element.detachEvent('onclick', myFunction); W3C:第三个参数表示事件的处理顺序是捕获还是冒泡, W3C默认为捕获, IE为冒泡 捕获表示处理容器由外到内，而冒泡相反 element.addEventListener('click', myFunction,false); element.removeEventListener('click', myFunction,false); 这部分兼容性问题完全可以通过jQuery库来避免(其内封装了兼容性的代码) |
Cookie:由于Http协议是一种无状态的协议，因此如果需要在会话中共享数据就需要用到cookie，每个域最多保存4KB的cookie。当然在H5标准中还提供LocalStorage和SessionStorage用于增强数据共享能力。
概念 | 示例 |
|---|---|
cookie的组成 | cookieName:cookieValue;domain:example.com;path:/documents; secure:true;expires:UTC时间，如果不设置默认，默认和当前浏览器会话一样长 |
编辑cookie | function createCookie(name, val, days) { if (days) { var date = new Date(); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); var expires = date.toGMTString(); } else var expires = ''; cookieString = name + '=' + escape(val); if (expires) { cookieString += '; expires=' + expires; } document.cookie = cookieString; }}这儿注意escape()和unescape()函数，他们将对字符串进行编码，使得分号、逗号及空白符号等特殊字符可以存储在cookie中，其方式是将任何ASCII字符都转换为相应的2位或位十六进制格式，如空格%20,&转化为%26 |
读取cookie | function getCookie(name) { var nameEquals = name + '='; var crumbs = document.cookie.split(';'); for (crumb in crumbs) { if (crumb.indexOf(nameEquals) == 0) { var str = crumb.substring(nameEquals.length, crumb.length); return unescape(str); } } } |
删除cookie | function deleteCookie(name){createCookie(name, '', -1);} |
多值cookie | var userdata='Xionger|28|SE',通过定界符组合字符串 |
图形与动画：
概念 | 示例 |
|---|---|
预加载图像 | 在用户请求之前加载页面可能需要的图片数据 window.onload = function () { var img1 = new Image(); var img_urls= new Array(); img_urls[0] = 'http://www.xionger.com/image01.jpg'; img_urls[1] = 'http://www.xionger.com/image02.jpg'; for(i=0;i<img_urls.length;i++){ img1.src=img_urls[0]; } } |
页面元素的动画 | 将DOM元素按一定频率移动即可获得动画，在视频领域，这个频率被称为帧速率，单位为帧每秒fps(frame per second) 单次执行为:.setTimeout(action, delay);多次执行:setInterval(action,delay) function hide(elementId) { document.getElementById(elementId).style.display = 'none'; } window.onload = function() { var time1 = setTimeout("hide('id1')", 3000); //clearTimeout(time1);//取消定时器 } |
渐变不透明度 | function setOpacity(opac) { var elem = document.getElementById('id2'); elem.style.opacity = opac / 100; elem.style.filter = 'alpha(opacity=' + opac + ')'; } function fadeIn(opac) { if (opac < 100) { opac++; setOpacity(opac); time2 = window.setTimeout("fadeIn(" + opac + ")", 50); } else { clearTimeout(time2); } } |
DOM移位 | function moveItRight() { var el = document.getElementById('div1'); el.style.left = '50px'; if (parseInt(el.style.left) > (screen.width - 50)) { el.style.left = 0; } el.style.left = parseInt(el.style.left) + 2 + 'px'; time3 = setTimeout(moveItRight, 25); } |
优化性能 | 使用单个定时器；避免为DOM树深层次元素创建动画效果；尽可能使用低的帧速率 |
DOM：文档对象模型是一种父子关系组成的层次树形结构，构成当前Web页面的模型，最顶层的对象为window对象，document为其子对象。在document根结点，包含多种不同类型的结点，结点类型nodeType包含在节点元素的属性中，如下表所示。
nodeType | 描述 | nodeType | 描述 | nodeType | 描述 |
|---|---|---|---|---|---|
1 | 元素 | 2 | 属性 | 3 | 文本(包含空白) |
4 | CDATA区域 | 5 | 实体引用 | 6 | 实体 |
7 | 执行指令 | 8 | HTML注释 | 9 | 文档 |
10 | 文档类型DTD | 11 | 文档片段 | 12 | 标签 |
常见DOM结点的选择和操作如下表所示：
概念 | 示例 |
|---|---|
childNodes,parentNode | if(olElement.childNodes[i].nodeType == 1) count++; rootElement = rootElement.childNodes[0].parentNode; |
first/lastChild | rootElement.firstChild = rootElement.childNodes[0]; rootElement.lastChild = rootElement.childNodes[rootElement.length - 1]; |
previousSibling,nextSibling | 返回前一个/后一个兄弟节点 |
结点名称和节点值 | text = rootElement.nodeValue; xxx = rootElement.nodeName;当节点为元素时，值为元素名称；当节点为属性，值为属性名；当为文本时，值为'#text' |
创建新节点 | var newDiv = document.createElement('div'); var newDiv = document.createTextNode('Xionger is a talent'); var newDiv = newDiv.cloneNode(true);参数表示是否为深拷贝 |
添加节点 | myDiv.appendChild(newDiv); myDiv.insertBefore(newDiv, existDiv); |
编辑节点 | myDiv.replaceChild(newDiv, existDiv); |
删除节点 | myDiv.removeChild(newDiv); |
动态加载javascript | function loadScript() { var scr = document.createElement('script'); scr.setAttribute('src', 'newScript.js'); document.head.appendChild(scr); } window.onload = loadScript;//常用于动态加载目录 |
读取元素属性 | element.getAttribute('name'); |
编辑元素属性 | element.setAttribute('name', 'xionger'); |
常见CSS相关操作如下所示
概念 | 示例 |
|---|---|
内容样式分离 | <link rel='styleSheets' type='text/css' href='style.css'/> <style>p{color:black;}</style> 样式可复用；结构清晰易读；保证整个站点的总体一致性 |
DOM的style属性 | myDiv.style.color='white'; |
使用className来访问类 | myDiv.className='classA'; |
DOM中的styleSheets对象 | 页面上样式表的数量:document.styleSheets.length 启用和禁用样式表(可切换):document.styleSheets[0].disabled = true; document.styleSheets[1].disabled = false;可以使用.styleSheets[0]的title属性来做切换。 |
参考资料：
- Phil, Ballard. JavaScript入门经典（第五版）[M]. 北京:人民邮电出版社, 2013.