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属性来做切换。

参考资料:

  1. Phil, Ballard. JavaScript入门经典(第五版)[M]. 北京:人民邮电出版社, 2013.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏北京马哥教育

Python爬虫库-BeautifulSoup的使用

Beautiful Soup是一个可以从HTML或XML文件中提取数据的Python库,简单来说,它能将HTML的标签文件解析成树形结构,然后方便地获取到指定标...

1010
来自专栏我和PYTHON有个约会

爬虫0040:数据筛选爬虫处理之结构化数据操作

爬虫程序,主要是运行在网络中进行数据采集的一种计算机程序,正常的一个爬虫采集数据的过程大致如下:

2211
来自专栏开发与安全

从零开始学C++之IO流类库(四):输出流格式化(以操纵子方式格式化,以ios类成员函数方式格式化)

一、以操纵子方式格式化 数据输入输出的格式控制使用系统头文件<iomanip>中提供的操纵符。把它们作为插入操作符<<的输出对象即可。如setiosflags、...

2480
来自专栏超然的博客

初学者必知的HTML规范

1092
来自专栏GreenLeaves

Jquery 触发器之treigger()方法简介

trigger是个很神奇的东西,它可以模拟简单的用户输入操作。并触发点击click, mouseover, keydown 等事件. 具体使用方法如下: $("...

1939
来自专栏前端知识分享

第22天:js改变样式效果

1、alert:弹出警示框(用的非常少,用户体验不好) 完整写法:window.alert(“执行语句”); window对象,窗口,一般情况可省略 alert...

1301
来自专栏陈纪庚

vue.js响应式原理解析与实现—实现v-model与{{}}指令

上一节我们已经分析了vue.js是通过Object.defineProperty以及发布订阅模式来进行数据劫持和监听,并且实现了一个简单的demo。今天,我们就...

2252
来自专栏数据结构与算法

2833 奇怪的梦境 未AC

2833 奇怪的梦境 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description Aide...

2835
来自专栏行者常至

02.爬虫基础知识与简易爬虫实现

1020
来自专栏申龙斌的程序人生

零基础学编程031:Python与其它语言最不同的一条语法规则

有C或JAVA其它编程语言基础的人可能对Python中的这条语法规则最不适应:Python中的缩进是有语法含义的,它用来表示一个代码块(code block)。...

2825

扫码关注云+社区

领取腾讯云代金券