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.
出 处:http://www.cnblogs.com/xiong2ge/
版权声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接。