使用JS的形式
內(nèi)嵌JS
<head>
<script type="text/javascript">
document.write("開啟JS之旅");
</script>
</head>
引用外部JS
<head>
<script src="script.js"></script>
</head>
注釋
注釋格式同c語言，有單行“//”和多行"/* */"兩種
變量
var mychar = "javascript";
數(shù)據(jù)類型
基本數(shù)據(jù)類型(值類型）
- Undefined
- Null
- Boolean
- Number
- String
JavaScript不允許直接訪問內(nèi)存中的位置哥艇，也就是說不能直接操作對(duì)象的內(nèi)存空間绝编。
引用類型
對(duì)于引用類型，可以動(dòng)態(tài)添加屬性和方法貌踏，也可以改變和刪除其屬性和方法十饥。
var person = new Object();
person.name = "nicholas";
alert( person.name );
傳遞參數(shù)
所有函數(shù)的參數(shù)都是按照值傳遞的。
- 在向參數(shù)傳遞基本類型的值時(shí)祖乳，被傳遞的值會(huì)被復(fù)制給一個(gè)局部變量逗堵；
- 向參數(shù)傳遞引用類型的值時(shí)，會(huì)把這個(gè)值在內(nèi)存中的地址復(fù)制一個(gè)給局部變量眷昆，因此這個(gè)局部變量的變化會(huì)反應(yīng)在函數(shù)的外部蜒秤。
function setName( obj ) {
obj.name = "nicholas";
}
var person = new Object();
setName( person );
alert( person ); // "Nicholas"
// another sample
function setName( obj ) {
obj.name = "Nicholas";
obj = new Object();
obj.name = "Greg";
}
var person = new Object();
setName( person );
alert( person.name ); // "Nicholas"
檢測(cè)類型
typeof
var s = "Nicholas";
var b = true;
var i = 22;
var u;
var n = null;
var o = new Object();
alert( typeof s ); // string
alert( typeof i ); // number
alert( typeof b ); // boolean
alert( typeof u ); // undefined
alert( typeof n ); // object
alert( typeof o ); // object
instanceof
alert( person instanceof Objecct );
作用域
有全局和局部變量，沒有塊級(jí)作用域
引用類型
對(duì)象屬性的訪問
// 如下兩種訪問方式相同
var name = person[name];
var name = person.name;
// 如果屬性名中包含會(huì)導(dǎo)致語法錯(cuò)誤的字符亚斋，或者包含關(guān)鍵字垦藏，則使用方括號(hào)訪問方式
person["first name"] = "peter";
除非必須使用方括號(hào)的方式，通常建議使用點(diǎn)的方式進(jìn)行訪問伞访。
繼承
使用prototype實(shí)現(xiàn)繼承
function Animal() {
Animal.prototype.species = "動(dòng)物";
}
function extend( Child, Parent ) {
var F = function() {};
F.prototype = Parent.prototype;
Child.prototype = new F();
Child.prototype.constructor = Child;
Child.uber = Parent.prototype;
}
// usage
extend( Cat, Animal );
var cat1 = new Cat( "大毛", "黃色" );
alert( cat1.species );
函數(shù)表達(dá)式
閉包
閉包是指有權(quán)訪問另一個(gè)函數(shù)作用域中的變量的函數(shù)掂骏。
創(chuàng)建閉包的常見方式，就是在一個(gè)函數(shù)內(nèi)部創(chuàng)建另一個(gè)函數(shù)厚掷。
Array
var showTime = [ "12:30", "2:34", "5:00" ];
var arr = new Array();
// Array operation
var colors = new Array();
var count = colors.push( "red", "green" );
colors.pop(); // LIFO
colors.shift(); // FIFO
Date類型
var someDate = new Date( Date.parse( "May 25, 2004" ) );
// 以下的方式也會(huì)在后臺(tái)調(diào)用Date.parse
var someDate = new Date( "May 25, 2004" );
// 2005-05-05 17:55:55
var day = new Date( 2005, 4, 5, 17, 55, 55 );
date.now();
從一個(gè)函數(shù)返回另一個(gè)函數(shù)
function createCompareFunction( propertyName ) {
return function( obj1, obj2 ) {
var value1 = obj1[propertyName];
var value2 = obj2[propertyName];
if( value1 < value2 ) {
return -1;
} else if( value1 > value2 ) {
return 1;
} else {
return 0;
}
}
}
var data = [{name: "Zark", age: 18}, {name: "Richo", age: 29}];
data.sort( createCompareFunction( "name" ) );
data.sort( createCompareFunction( "age" ) );
函數(shù)內(nèi)部屬性
// 使用arguments.callee來做遞歸
function factorial( num ) {
if( num <= 1 ) {
return 1;
} else {
return num * arguments.callee( num - 1 );
}
}
// this
window.color = "red";
var o = { color: "blue" };
function sayColor() {
alert( this.color );
}
sayColor(); // "red"
o.sayColor = sayColor;
o.sayColor(); // "blue"
output
document.write( "I love JavaScript!" );
條件語句
if
var myage = 80;
if( score >= 60 ) {
document.write( "fantasic" );
} else {
document.write( "you need study harder" );
}
switch
switch( chooseCase ) {
case "A":
openCase( "A" );
break;
case "B":
...
break;
}
循環(huán)
for
for( var x = 0; x < 37; x++ ) {
takeStep();
}
while
while( !rockVisible )
takeStep();
button
button click
<head>
<script type="text/javascript">
function rec() {
var mychar = "I Love JavaScript";
alert( mychar );
}
</script>
</head>
<body>
<input name="button" type="button" onClick="rec()" value="Click Me" />
</body>
function
function context() {
alert( "function called" );
}
functions
Timer
// 單次定時(shí)器弟灼，單位是ms
setTimeOut( "alert('Wake up!');", 6000 );
// 間隔定時(shí)器
var timerId = setInterval( "alert('Wake up!' );", 6000 );
// 清除定時(shí)器
clearInterval( timerId );
Interval
var myInterval = setInterval( myFunc, 100000 );
...
clearInterval( myInterval );
根據(jù)屏幕size調(diào)整圖像
function resize() {
document.getElementById( "rockImg" ).style.height = ( document.body.clientHeight - 100 ) * 0.9;
}
判斷瀏覽器是否支援cookie
var cookieSupport = navigator.cookieEnable;
對(duì)話框
alert
confirm
var ret = confirm( "are you male or female?" );
if( ret == true ) {
document.write( "you are male!" );
}
prompt
var score = prompt( "what is your score?", "60" );
if( score >=90 ) {
document.write( "fantasic" );
}
open new window
// window.open( [URL], [window name], [param] );
window.open( "http://www.imooc.com", "_blank", width=600, height=400, top=100, left=0 );
close window
window.close(); //close current window
//close specified window
var mywin = window.open( "http://baidu.com" );
mywin.close();
DOM
通過ID獲取元素
<body>
<div id="con">JavaScript</div>
<script type="text/javascript">
var mychar = document.getElementById( "con" );
document.write( "result: " + mychar );
</script>
</body>
innerHTML屬性
<body>
<h2 id="con">javascript</h2>
<script type="text/script">
var mychar = document.getElementById( "con" );
mychar.innerHTML = "Hello, World!";
</script>
</body>
改變HTML樣式
var mychar = document.getElementById( "con" );
mychar.style.color = 'red';
mychar.style.backgroundColor = '#ccc';
mychar.style.width = '300px';
更改控制類名
<head>
<style type="text/css">
.one {
width: 200px;
background-color: #ccc;
}
.two {
font-size: 18px;
color: #F00;
}
</style>
</head>
<body>
<p id="con" class="one">JavaScript</p>
<input type="button" value="Click Me" onclick="modifyClass()" />
<script type="text/javascript" >
var mychar = document.getElementById( "con" );
function modifyClass() {
mychar.className = "two";
}
</script>
</body>
表單腳本
HTMLFormElement
提交表單
<!-- 通用提交按鈕 -->
<input type="submit" value="Submit Form">
<!-- 自定義提交按鈕 -->
<button type="submit">Submit Form</button>
<!-- 圖像按鈕 -->
<input type="image" src="graphic.gif">
