二十分鐘學(xué)會Javascript初級語法，圖片來自網(wǎng)絡(luò)
Javascript基本用法
-
Javascript代碼寫在
<script>標(biāo)簽內(nèi)<script> //Javascript代碼寫在這里 </script> -
Javascript代碼可以寫在
body標(biāo)簽內(nèi)<body> <script> //Javascript代碼寫在這里 </script> </body> -
Javascript代碼可以寫在
<head>標(biāo)簽內(nèi)<head> <script> //Javascript代碼寫在這里 </script> </head> -
Javascript代碼可以寫在外部的獨(dú)立js文件內(nèi)
<head> <script src="xxx.js"></script> </head>
在
<body>和<head>標(biāo)簽內(nèi)的Javascript代碼是不同的，在<head>標(biāo)簽內(nèi)的JS代碼在頁面加載的時(shí)候就會運(yùn)行，而在<body>內(nèi)的JS代碼只有在需要的時(shí)候才會執(zhí)行。一般會把多個(gè)頁面都是用到的JS代碼放到獨(dú)立的js文件中。
Javascript顯示數(shù)據(jù)的方法
- 使用彈出框
window.alert()或者alert()方法。其中，window是Javascript的一個(gè)內(nèi)置對象，可省略不寫。 - 使用
document.write()方法直接寫入html源碼。 - 使用
console.log()方法將調(diào)試信息打印到瀏覽器控制臺。
Javascript字面量
//數(shù)字字面量（Number）
var a = 3.14; //浮點(diǎn)數(shù)
var b = 1; //整數(shù)
var c = 13e5; //科學(xué)計(jì)數(shù)法
//字符串字面量（String）
var d = 'string'; //字符串
var e = "string"; //字符串
//數(shù)組和對象字面量（Array & Object）
var f = [1,2,3]; //數(shù)組
var g = {a:"a",b:"b"} //對象
//函數(shù)字面量（Function）
var h = function(){}; //函數(shù)
Javascript變量
<script>
var a = 1; //這是一個(gè)全局變量
b = 2; //這是一個(gè)全局變量
function f(){
var c = 3; //這是一個(gè)局部變量
d = 4; //這是一個(gè)全局變量
}
</script>
注意，沒有使用
var關(guān)鍵字標(biāo)識的字段都是全局變量，使用了var關(guān)鍵字標(biāo)識的變量如果在方法內(nèi)聲明，則為局部變量，否則也為全局變量，主要觀測其所在的作用域。
Javascript語句標(biāo)識符
在Javascript中，也有類似于Java和C#等高級面向?qū)ο笳Z法的語句標(biāo)識符，主要有break/try...catch/continue/do...while/for/for..in/function/if...else/return/switch/throw/while/var
Javascript代碼折行
使用\\可以對JS代碼進(jìn)行折行處理:
document.write('hello \
world');
Javascript注釋語法
- 使用
//進(jìn)行單行注釋 - 使用
/* ... */進(jìn)行多行注釋
Javascript數(shù)據(jù)類型
- 字符串（String）類型
- 數(shù)字（Number）類型
- 布爾（Boolean）類型
- 數(shù)組（Array）類型
- 對象（Object）類型
- 空（Null）類型
- 未定義（Undefined）類型
Javascript對象
var obj = { //創(chuàng)建對象
a:"a",
b:"b",
c:2,
method:function(){}
}
var d = obj.a; //訪問對象屬性
var e = obj.b;
var f = obj.method; //訪問對象方法
Javascript函數(shù)
function a(){ //無返回值函數(shù)
//...
}
function b(){ //有返回值的函數(shù)
return 1;
}
var c = b(); //調(diào)用函數(shù)
Javascript作用域
- 在Javascript中，對象和函數(shù)也是一種變量。
- 作用域是可訪問變量、對象和函數(shù)的集合。
- 函數(shù)作用域：作用域在函數(shù)內(nèi)修改。
- 變量在函數(shù)內(nèi)聲明，則其作用域?yàn)榫植孔饔糜颉?/li>
- 全局變量有全局作用域，網(wǎng)頁中所有的腳本和網(wǎng)頁都可以使用。
Javascript事件
<some-HTML-element some-event='some JavaScript'>
<some-HTML-element some-event="some JavaScript">
常用的HTML事件有：onchange/onclick/onmouseover/onmouseout/onkeydown/onload
絕對等于和絕對不等于
-
===表示絕對等于（值和類型都相等） -
!==表示絕對不等于(值或類型不相等)
遍歷對象的屬性
var person = {name:"Anderson",age:25}
for(x in person){
txt = txt + person[x];
}
Javascript typeof操作符
typeof "Anderson" //返回string
typeof 3.14 //返回number
typeof false //返回boolean
typeof [1,2,3,4] //返回object
var a;
typeof a //返回undefined
a = null;
typeof a //返回null
typeof undefined // undefined
typeof null // object
Javascript 構(gòu)造器屬性
"John".constructor // 返回函數(shù) String() { [native code] }
(3.14).constructor // 返回函數(shù) Number() { [native code] }
false.constructor // 返回函數(shù) Boolean() { [native code] }
[1,2,3,4].constructor // 返回函數(shù) Array() { [native code] }
{name:'John', age:34}.constructor // 返回函數(shù) Object() { [native code] }
new Date().constructor // 返回函數(shù) Date() { [native code] }
function () {}.constructor // 返回函數(shù) Function(){ [native code] }
function isArray(myArray) {
return myArray.constructor.toString().indexOf("Array") > -1;
function isDate(myDate) {
return myDate.constructor.toString().indexOf("Date") > -1;
}
}
JavaScript 變量提升
- JavaScript 中，函數(shù)及變量的聲明都將被提升到函數(shù)的最頂部。變量可以在使用后聲明，也就是變量可以先使用再聲明
- JavaScript 初始化不會提升
函數(shù)提升（Hoisting）
- 提升（Hoisting）是 JavaScript 默認(rèn)將當(dāng)前作用域提升到前面去的的行為。
- 提升（Hoisting）應(yīng)用在變量的聲明與函數(shù)的聲明。
JavaScript 嚴(yán)格模式(use strict)
- "use strict" 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增
- 它不是一條語句，但是是一個(gè)字面量表達(dá)式，在 JavaScript 舊版本中會被忽略
- "use strict" 的目的是指定代碼在嚴(yán)格條件下執(zhí)行。嚴(yán)格模式下你不能使用未聲明的變量。
href="#"與href="javascript:void(0)"的區(qū)別
-
#包含了一個(gè)位置信息，默認(rèn)的錨是#top也就是網(wǎng)頁的上端。 - 而
javascript:void(0), 僅僅表示一個(gè)死鏈接。 - 在頁面很長的時(shí)候會使用
#來定位頁面的具體位置，格式為：# + id。 - 如果你要定義一個(gè)死鏈接請使用
javascript:void(0)。
附錄 文章更新日志
2016-06-03 初稿
2016-06-06 修正文章中的錯(cuò)別字
2016-06-22 修正文章中的一處筆誤
