Fork me on GitHub

javascript基础 -- 内部分享

frontend/javascript/foundation/banner

javascript不仅仅在前端比较重要(网页三剑客之一),在后端还是占有一席之地。本博文主要是介绍javascript的基础(主打es5标准)。

准备工作

编写javascrip脚本不需要任何特殊的软件或者环境的配置,一个普通的文本编辑器和一个web浏览器就可以了。

相关的可运行的代码示例如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>demo</title>
<script>
javascript goes here ...
</script>
</head>
<body>
mark-up goes here ...
</body>
</html>

语法

Javascript的语法和Java与C++语言的语法非常相似。

语句

在javascript中把各条语句放在不同的行上就可以分隔他们,比如:

1
2
first statement
second statement

如果是想放在同一行上,就必须像下面这样用分号来分隔它们:

1
2

first statement; second statement;

为了养成一个良好的编程习惯,建议每条语句后面都添加一个分号。

注释

注释能够有效得帮助你了解代码流程。在代码中扮演生活中的便条的角色,能够帮助看者弄清楚脚本到底在干什么。注释有多种方式,如下:

1
2
3
4
5
6
7
// 这是单行注释

/*
这是多行注释
*/

<!--这是在html页面中的注释-->

变量

javascript是松散型语言,在es6标准之前,其变量都是以var来进行定义。es6后就支持let,const等,这是后话了,这里主讲es5。当变量没有var定义的时候,浏览器会自动追加,但是,在不赋值的情况下会报错。

1
2
3
4
5
a; # Uncaught ReferenceError: a is not defined

var a ; # output is 'undefined'

a = 100 ; # 100 相当于var a = 100;

数据类型

javascript中数据类型包括基本类型和引用类型。基本类型是指简单的数据段,包括Undefined, Null, Boolean, Number 和 String;引用类型指那些可能由多个值构成的对象。我们可以使用typeof操作符进行检验:

1
2
3
4
5
6
'undefined' # 值未定义
'boolean' # 布尔值
'string' # 字符串
'number' # 数值
'object' # 值是对象或null , null 是历史遗留下来的问题
'function' # 这个值是函数

操作

要用javascript做一些有用的工作,需要能够进行计算和处理数据。也就是完成一些操作。

算术运算符

简单的数字加减乘除就不多说了。数字的自加,自减也省略下。不过+号挺有意思的一个运算符号。它可以简单的数字的相加,也可以用于字符串的拼接,和数字转字符串:

1
2
3
4
10 + 20  # 30
'你好'+'name' # 你好name
10 + '' # 10
10 + '20' # 1020

条件语句

基本的条件语句的语法如下:

1
2
3
if(condition){
statements;
}

运算符

javascript提供了许多在条件语句里面使用的比较操作符,包括大于,小于,等于等等。返回的是一个布尔值。

还有一些逻辑运算符,比如&&和||等。

循环语句

相对于条件语句,循环语句能够多次重复的执行代码。只要给定的条件满足,包含在循环语句里的代码就重复执行下去,一旦给定条件的求值结果不再是true,循环也就到此为止。

while循环

相关的基本语法如下:

1
2
3
4
5
6
7
while(condition){
statements;
}

do{
statements;
} while (condition);

for循环

for循环重复执行一些代码也很方便,它类似于while循环。可以将while循环的代码改写下,称为for循环:

1
2
3
4
5
6
7
8
9
10
11
initialize;
while (condition){
statements;
increment;
}

改写

for(initial condition; test condition; alter condition){
statement;
}

函数

函数就是一组允许在你的代码里随时调用的语句。每个函数实际上就是一个短小的脚本。但是函数声明于函数表达式的调用又有所差别,见下面的代码:

1
2
3
4
console.log(sum(10 , 10)); // 20
function sum(num1 , num2){
return num1 + num2;
}
1
2
3
4
console.log(sum(10 , 10)); //TypeError: sum is not a function
var sum = function(num1 , num2){
return num1 + num2;
}

解析器会率先读取函数声明,并使其执行任何代码之前可用(可以访问);至于函数表达式,则必须等到解析器执行到它所在的代码行,才会真正被解析。函数中有一个闭包的概念,感兴趣的可戳这里

DOM

DOM,文档对象模型。

文档:DOM中的D当创建了一个网页并把它加载到web浏览器中时,DOM就在幕后悄然而生了。浏览器会将你编写的网页文档转换成为一个文档对象。

对象:DOM中的O与某个特定对象相关联的变量被称为这个对象的属性。只能通过某个特定的对象去调用的函数被称为这个对象的方法。document对象的主要功能就是处理网页内容。

模型:DOM中的MDOM中的M代表了Model(模型),但是说它代表着Map(地图)也未尝不可。模型也好,地图也罢,它们的含义都是某种事物的表现形式。就像一个模型火车代表一列真正的火者。DOM代表着加载到浏览器窗口的当前网页。浏览器提供了网页的地图(或者说模型),而我们可以通过javascript去读取这张地图。

节点

在DOM里面有很多的节点,这里介绍三种:元素节点、文本节点和属性节点。

元素节点:DOM的原子就是元素节点。比如

元素。

文本节点:比如

content

种标签包含的content。

属性节点:属性节点用来对元素作出更具体的描述。比如:

mike

中的title="name"就是属性节点了。

获取元素

有三种DOM方法可以获取元素节点,分别是通过元素ID、通过标签名字和通过类名字来获取。

getElementById 这个方法返回一个与那个有着给定id属性值的元素节点对应的对象。如document.getElementById('home')

getElmentsByTagName 这个方法返回一个对象数组,每个对象分别对应文档里有着给定标签的一个元素。如document.getElementsByTagName('li')

getElementsByClassName 这个方法能让我们通过class属性来访问元素。如document.getElementsByClassName('item')

当然我们还是可以通过querySelector,querySelectorAll来获取元素的,比如querySelector(‘.item’),它返回与该匹配模式的第一个元素,即类名是item的元素;querySelectorAll(‘.item’),返回的是一个NodeList实例。

获取和设置属性

在获取到元素后,我们就可以设法获取它的属性。getAttribute方法就是用来做这件事的。相应的,setAttribute方法则可以更改属性节点的值。

getAttribute用法是object.getAttribute(attribute),如下例子:

1
2
3
4
var paras = document.getElementsByTagName('p');
for(var i = 0; i < paras.length; i++){
console.log(paras[i].getAttribute('title'));
}

setAttribute用法是object.setAttribute(attribute,value)。它允许我们对属性节点的值作出修改。与getAttribute一样,setAttribute也只能用于元素节点。例子有:

1
2
var shopping = document.getElementById('purchases');
shopping.setAttribute('title','a list of goods');

BOM

BOM,浏览器对象模型。

关于BOM具体指的是什么,可以参考DOM的解析。

window对象

BOM的核心对象是window,它表示浏览器的一个实例。在浏览器中,window有双重的角色,它既是通过javascript访问浏览器窗口的一个接口,又是规定的全局(Global)对象。这就意味着在网页中定义的任何一个对象,变量和函数,都是以window作为Global对象,因此有权访问parseInt()等方法。

窗口位置

用来确定和修改window对象位置的属性和方法很多。IE、Safari、Opera和Chrome(也可以说Trident内核、Webkit内核、Presto内核->目前废弃,改Blink内核、Blink内核)都提供了screenLeft和screenTop属性,分别表示用于窗口相对屏幕左边和上边的位置。Firefox(可以说是Gecko内核)则在screenX和screenY属性中提供相同的窗口信息,Safari和Chrome也同时支持这两个属性。Opera虽然也是支持screenX和screenY属性,但与screenLeft和screenTop属性并不对应。附上内核的说明链接。使用下列代码可以兼容到不同的浏览器:

1
2
3
var leftPos = (typeof window.screenLeft == 'number') ? window.screenLeft : window.screenX;

var topPos = (typeof window.screenTop == 'number') ? window.screenTop : wnidow.screenY;

窗口大小

跨浏览器确定窗口大小不是一件容易的事情。虽然五大浏览器(上面窗口位置提到的浏览器就是了)都提供了innerWidth、innerHeight、outerWidth和outerHeight四个属性,但是不同浏览器和不同版本的相同浏览器的解析又是不一样。在 IE9+、Safari 和 Firefox 中,outerWidth 和 outerHeight 返回浏览器窗口本身的尺寸(无论是从最外层的 window 对象还是从 某个框架访问)。在 Opera 中,这两个属性的值表示页面视图容器1的大小。而 innerWidth 和 innerHeight 则表示该容器中页面视图区的大小(减去边框宽度)。在 Chrome 中,outerWidth、outerHeight 与 innerWidth、innerHeight 返回相同的值,即视口(viewport)大小而非浏览器窗口大小。

IE8 及更早版本没有提供取得当前浏览器窗口尺寸的属性;不过,它通过 DOM 提供了页面可见区域 的相关信息

虽然确定不了浏览器的大小,但是我们可以确定页面视口的大小。五大浏览器中,document.documentElement.clientWidth和document.documentElement.clientHeight上保存了页面视口的信息。在IE6中,这些属性必须在 标准模式下才有效;如果是混杂模式,就必须通过 document.body.clientWidth 和 document.body. clientHeight 取得相同信息。整个的兼容的代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
var pageWidth = window.innerWidth,
pageHeight = window.innerHeight;

if(typeof pageWidth != "number"){ // 针对IE8及以下版本
if(document.compatMode == 'CSS1Compat'){ // 标准模式下的低版本ie
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
}else{ // 混杂模式下的IE,Chrome
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}

导航和打开窗口

window.open()方法既可以导航到一个特定的URL,也可以打开一个新的浏览器窗口。

1
2
3
4
window.open("http://www.wrox.com/","_blank","height=400,width=400,top=10,left=10,resizable=yes");
# 参数一是url
# 窗口名称
# 窗口样式设置

更多内容感兴趣自己了解啦。

间歇调用和超时调用

1
2
3
4
5
6
7
8
9
# 间歇调用
setInterval(function(){
alert('hello')
},1000);

# 超时调用
setTimeout(function(){
alert('hello')
},1000);

系统对话框

浏览器通过alert(),confirm()和prompt()方法调用系统对话框向用户显示信息。在浏览器的控制台上面走一遍就知道了。

location对象

location对象是一个很特别的对象,因为它既是window对象的属性,也是document对象的属性;换句话说,window.location和document.location引用的是同一个对象。location对象的用处不只表现在它保存当前文档的信息,还表现在它将URL解析为独立的片段,让开发人员可以通过不同的属性访问这些片段。比如,hash,host,hostname,href,pathname,port,protocol,search。

navigator对象提供了与浏览器有关的信息。到底提供了哪些新秀,很大程度上取决于用户的浏览器;不过,也有一些公共的属性(如userAgent)存在于所有浏览器中。更多的属性请戳这里

history对象

history 对象保存着用户上网的历史记录,从窗口被打开的那一刻算起。因为 history 是 window 对象的属性,因此每个浏览器窗口、每个标签页乃至每个框架,都有自己的 history 对象与特定的 window 对象关联。

使用go()方法可以在用户的历史浏览记录中任意跳转。比如:

1
2
3
4
5
6
7
8
# 后退一页
history.go(-1); # 可以写成history.back()

# 前进一页
history.go(1); # 可以写成history.forward()

# 前进两页
history.go(2)

后话

内部分享就到这里为止吧!自己之前有整理过一个《javascript高级程序设计》的内容,感兴趣请戳这里

<-- 本文已结束  感谢您阅读 -->
客官,且步,赏一个呗 (@ ~ @)