天天看點

前端html JavaScript快速入門指南 與

一 html快速入門

1 基本架構

(1) 與 之間的文本描述網頁

與 之間的文本是可見的頁面内容

之間的文本被顯示為标題

之間的文本被顯示為段落

2 HTML 連結

HTML 連結是通過 标簽進行定義的

程序排程算法 連結到一個html網頁檔案

This is a link 連結跳轉到對應網頁

在 href 屬性中指定連結的位址

3 添加其他腳本語言

(1) HTML 中的腳本必須位于 标簽之間。

腳本可被放置在 HTML 頁面的 和 部分中。

通常的做法是把函數放入 部分中,或者放在頁面底部。這樣就可以把它們安置到同一處位置,不會幹擾頁面的内容。

(2) 也可以把腳本儲存到外部檔案中。外部檔案通常包含被多個網頁使用的代碼。

外部 JavaScript 檔案的檔案擴充名是 .js。

如需使用外部檔案,請在

在 或 中引用腳本檔案都是可以的。實際運作效果與您在

二 JavaScript快速入門

1(1) 對事件做出反應

點選這裡

(2)改變html内容

html:

JavaScript 能改變 HTML 元素的内容。

//這一段的id是demo

JavaScript:

(3)如需從 JavaScript 通路某個 HTML 元素,您可以使用 document.getElementById(id) 方法。

請使用 “id” 屬性來辨別 HTML 元素

2 變量資料類型

變量可用于存放值,表達式,字元串

(1)var隻有一種數值類型,無論整數小數

布爾類型:var isOk = true

(2)數組建立

var cars=new Array();

cars[0]=“Audi”;

cars[1]=“BMW”;

cars[2]=“Volvo”;

var cars=new Array(“Audi”,“BMW”,“Volvo”);

var cars=[“Audi”,“BMW”,“Volvo”];

(3)對象

對象由花括号分隔。在括号内部,對象的屬性以名稱和值對的形式 (name : value) 來定義。屬性由逗号分隔:

var person={firstname:“Bill”, lastname:“Gates”, id:5566};

對象屬性

name=person.lastname;

Undefined 這個值表示變量不含有值

聲明變量類型

var carname=new String;

var x= new Number;

var y= new Boolean;

var cars= new Array;

var person= new Object;

建立對象并添加屬性

person=new Object();

person.firstname=“Bill”;

person.lastname=“Gates”;

person.age=56;

person.eyecolor=“blue”;

三 HTML DOM文檔對象模型

當網頁被加載時,浏覽器會建立頁面的文檔對象模型

前端html JavaScript快速入門指南 與

(1)通過可程式設計的對象模型,JavaScript 獲得了足夠的能力來建立動态的 HTML。

JavaScript 能夠改變頁面中的所有 HTML 元素

JavaScript 能夠改變頁面中的所有 HTML 屬性

JavaScript 能夠改變頁面中的所有 CSS 樣式

JavaScript 能夠對頁面中的所有事件做出反應

(2)通過 JavaScript操作 HTML 元素。

通過 id 找到 HTML 元素:  		查找 id="intro" 元素:var x=document.getElementById("intro");
	
	通過标簽名找到 HTML 元素:查找 id="main" 的元素,然後查找 "main" 中的所有 <p> 元素:
													var x=document.getElementById("main");
													var y=x.getElementsByTagName("p");
	通過類名找到 HTML 元素
           

四 對象

1建立對象

(1)直接建立:

person=new Object();

person.firstname=“Bill”;

person.lastname=“Gates”;

person.age=56;

person.eyecolor=“blue”;

等于=== person={firstname:“Bill”,lastname:“gates”,age:56,eyecolor:“blue”}

(2)使用對象構造器(用函數來構造):

function person(firstname,lastname,age,eyecolor)

{

this.firstname=firstname;

this.lastname=lastname;

this.age=age;

this.eyecolor=eyecolor;

}

可以反複使用此函數進行構造新的對象

注意:JavaScript 是面向對象的語言,但 JavaScript 不使用類。在 JavaScript 中,不會建立類,也不會通過類來建立對象

JavaScript for…in 語句循環周遊對象的屬性

for (對象中的變量)

{

要執行的代碼

}

for…in 循環中的代碼塊将針對每個屬性執行一次。

2 JavaScript Array 數組

(1)建立

var cidao = new Array()

(2)循環輸出

for (x in mycars)

{

document.write(mycars[x] + “

”) //"

"換行控制符

}

(3)