HTML+CSS+JavaScript基礎知識
一、簡介HTML
1、HTML(Hyper Text Mark-up Language超文字標記語言)的縮寫(標記:就是用來描述網頁內容的一些特定符號)。HTML不是程式語言,而是一種描述性的標記語言,用於描述網頁內容的顯示方式,比如文字的顏色、大小,這些都是利用html標記來實現的。
2、HTML文件的建立方式:
- 手工直接編寫(例如記事本)
- 通過圖形化的HTML開發軟體Dreamweaver
- 由web伺服器上的動態網頁程式生成
二、HTML的語法
HTML最基本的語法就是<標記符>內容</標記符>,標記符通常都是承兌使用的,有一個開始標記和一個結束標記。結束標記只是在開始標記的前面加上一個斜槓/當瀏覽器開啟html檔案後,就會理解裡面的標記符,然後把標記符對應的功能表達出來。
HTML標記的型別:單標記與雙標記
1、單標記
- <標記名稱>:單一型,無屬性值。如<br/>
- <標記名稱 屬性="屬性值">:單一型,有屬性值。如<hr width="80%" />
- <標記名稱>...</標記名稱>:沒有屬性值。如<title>...</title>
- <標記名稱 屬性="屬性值">...</標記名稱>:有屬性值。如<body bgcolor="red">...</body>
- 標記與屬性、屬性之間以空格分隔
- 屬性不區分先後順序,且屬性不是必須的
- 雖然在HTML中標記不區分大小寫,但在XHTML中所有的標記都必須小寫,所以建議所有標記都採用小寫
所有的網頁檔案,通常由四對標記來構成文件的骨架,它們是:
<html>:標識網頁檔案的開始和結束,所有的html元素都要放在這對標記中
<head>:標識網頁檔案的頭部資訊,如標題、搜尋關鍵字等
<title>標題</title>:標識檔案的標題
</head>
<body>:標識檔案的主體部分
正文
</body>
</html>
(一)、meta標記用於定義檔案資訊
meta標記用於定義檔案資訊,對網頁檔案進行說明,放置於<head></head>之間
- 設定關鍵字:<meta name="keywords" content="value">,多個關鍵字內容之間可以用逗號分隔。
- 設定描述:<meta name="description" content="value"/>
- 設定作者:<meta name="author" content="value"/>
- 設定字符集:<meta http-equiv="content-type" content="text/html;charset=gb2312"/>
- 設定頁面定時跳轉:<meta http-equiv="Refresh" content="2;http://www.itcast.com"/>
(二)、網頁主體標記body
1、註釋:<!--註釋內容-->
2、body屬性:
<body bgcolor="背景顏色" background="背景圖片" text="文字顏色" link="連結文字顏色" vlink="訪問過的連結文字顏色" alink="啟用的連結文字顏色" leftmargin="zuobianjie" rightmargin="右邊界" topmargin="上邊界" bottommargin="下邊界">
(三)、字型修飾
1、<font>標記:
<font color="文字顏色" size="字號" face=""></font>
2、字元格式
3、段落控制標記
<p align="對齊方式"></p>
屬性名稱:align,屬性值:left(預設)、center、right
4、段落標題
<hx align="對齊方式"></hx>
x取值[1-6]:hx內的文字對自動加粗顯示。
注:hx針對的物件時段落,font針對的物件時任意文字
5、換行:<br/>換行不換段
6、水平直線:<hr/>
(三)、特殊標記
1、定義一個塊引用:使用文字縮排
格式:<blockquote>...</blockquote>
屬性名稱:cite,屬性值:url,說明:被引用的地址
2、居中標記<center>內容</center>(被廢棄的標籤)
3、預格式化:<pre></pre>
4、顯示已經格式化好的文字,不加此標記的話,HTML瀏覽器會忽略所有空格和製表符
(四)、列表標記
1、列表標記的用途:列表標記可以建立一般的無需列表、編號列表,以及定義列表的三種方式。還可以在一種列表中巢狀另一種列表。便於概括顯示一系列相關的內容。
- 無需列表:<ul>...</ul>
- 有序列表:<ol>...</ol>
- 定義列表:<dl>...<dl>
- 語法:<ul type="專案符號型別"> <li type="專案符號型別">內容1</li> <li>內容2</li> </ul>
- 語法:<ol start="列表起點" type="專案符號型別"> <li>內容1</li> <li>內容2</li> </ol>
- 語法:
(五)、圖片
1、web上支援的圖片格式
- GIF(圖形交換格式):GIF格式檔案最多隻能儲存256種顏色。該格式支援透明色,支援動畫效果。
- JPEG(聯合影象專家組):改格式不支援透明色及動畫,顏色可達1670萬種。
- PNG(網格可移植格式):該格式支援透明色,但不支援動畫,顏色從幾十種至1670萬種。
- 絕對路徑:提供目標文件的完整主機名稱、路徑資訊、及文件全稱
- 相對路徑:從當前文件開始的路徑
- 根相對路徑:從站點根目錄開始的路徑,以/開頭
四、表格
(一)、表格結構和屬性
1、因為表格中可以包含任何內容,所以在使用DIV+CSS之前,網頁設計師是使用表格對網頁內容進行排版與佈局的
2、表格基本結構:
- <table>...</table>--------定義表格
- <tr>...</tr>----------定義行
- <td>...</td>-----------定義列(單元格)
- <th>...</th>-----------定義標題欄(文字加粗)
3、表格的屬性<table>
4、<table>標籤下的邊框設定
4、行的屬性<tr>
5、列的屬性<td>
(二)、表格的結構化
1、結構化格式:
- <table>
- <thead>...</thead>---------表頭區
- <thead>...</thead>---------表體區
- ..........
- <tfoot>...</tfoot>----------表尾區
- </table>
3、表格的標題:<table> <caption>...</caption> </table>
五、超連結
一個網站由多個網頁組成的,網頁之間通過連線實現相互關聯。
(一)、連線的概念
實現當前文件到目標文件的一種跳轉。
(二)、連結語法
<a href=連線的目標 title="註釋" target="開啟連結視窗的形式">...</a>
- _blank:在新視窗中開啟
- _self:在自身視窗中開啟(預設)
- _parent:在上一級視窗中開啟
- _top:在本視窗中開啟
- <a href=目標文件位置及全稱>
- <a href=URL>
- <a href=mailto:電子郵件地址>
- 建立錨點:<a name="錨點名稱">...</a>
- 連結錨點:<a href="#錨點名稱">...</a>
5、空連結:就是沒有目標端點的連結
- <a href="#"></a>
A、設為首頁:<a href="#" onClick="this.style.behavior='url(#default#homepage)';this.sethomepage('http://www.sohu.com')">設為首頁</a>
B、新增收藏:<a href="#" onClick="javascript:window.external.addfavorite('http://www.sohu.com','搜狐')">加入收藏夾</a>
6、指令碼連結:是一種特殊的連結,當單機設定指令碼連結的文字或影象時,可以執行相應的JavaScript語句。
例如:
<a href=javascript:window.open(“http://www.163.com”)>新浪</a>
- 關閉視窗:輸入javascript:window.close()
- 開啟視窗:輸入javascript:window.open ('檔名')
六、表單
(一)、表單的功能
1、表單的作用是從訪問您web站點的使用者那裡獲取資訊,訪問者可以使用諸如文字框、列表框、單選框及複選框之類的表單元素輸入資訊,然後單擊某個按鈕提交這些資訊。
2、客戶端和伺服器端進行交流的途徑。
(二)、表單標記
1、form標記用於建立一個表單,定義表單的開始和結束,它是一個容器,用於包含其他表單元素,例如文字框、單選框等。表單元素必須寫在form標記內才有用。
2、格式:
<form action=URL(處理表單資訊的伺服器端應用程式) method=處理表單資料的方法(POST/GET)如果不寫預設為GET name=表單名稱>...</form>
3、表單元素標記:
A、單行文字框:
<input name="文字框名稱" type="text" value="初始值" size="顯示字元數" maxlength="最多容納字元數" readonly="readonly"(設定為只讀) disabled="disabled"(設定為不可操作) />
B、密碼框:
<input name="密碼框名稱" type="password" value="初始值" size="顯示字元數" />
C、多行文字框:
<textarea name="文字框名稱" cols="每行的字元數" rows="顯示的行數"></textarea>
D、單選框:
<input name="單選框名稱" type="radio" value="提交值" checked="checked"(是否被選中)/>
E、複選框:
<input name="複選框名稱" type="checkbox" value="提交值" checked="checked" />
F、標註:
<label for="man">男</label> <input type="radio" name="sex" value="男" id="man">
G、列表框:
- 選單式:
<select name="列表框名稱">
<option selected="selected"(哪個為初始值就新增selected語句) value="提交值">列表1</option>
<option value="提交值">列表2</option>
......
</select>
分組:<optgtoup label="分組名稱"></optgroup>
- 列表式
H、按鈕:
<input type="按鈕型別(reset重置表單、submit提交表單、button普通按鈕)" name="按鈕名稱" value="按鈕顯示文字" />
I、圖片按鈕:
<input name="按鈕名稱" type="image" src="圖片路徑" />
J、隱藏域:
<input name="名稱" type="hidden" value="提交值" />
K、瀏覽框:
<input name="名稱" type="file" size="顯示長度" />
L、表單外框:
<fieldset >...</fieldset>--------定義圍繞表單中元素的邊框
<legend>...</legend>---------legend為fieldset定義標題
七、插入多媒體元素標記
1、Flash動畫的插入
2、插入MP3音樂
3、插入背景音樂
<bgsound src="音樂檔名及路徑" loop="迴圈次數" />(如果loop=-1即為無限迴圈)
4、插入視訊wmv格式
<embed src="tmcq.wmv"></embed>
5、網路流媒體檔案的插入
<embed src="http://player.youku.com/player.php/sid/XMzA1MDE5MDMy/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash">
</embed>
6、滾動字幕
<marquee>滾動的文字</marquee>
- direction="滾動方向"(left、right、up、down)
- behavior="滾動方式"(scroll、slide、alternet)
- loop="迴圈次數"(若未指定則迴圈不止,loop=infinite)
- bgcolor=""
- onMouseOver="this.stop()" onMouseOut="this.start()"
- scrollamount=""
- scrolldelay=""
八、框架--實現網頁之中巢狀網頁
1、框架的功能:
將瀏覽器劃分為不同的區域,每個區域可以包含不同的網頁。以實現多個網頁在一個瀏覽器視窗中顯示的效果。
2、框架的格式:
寫框架時,不需要寫body語句。
<frameset rows="行數及行高" cols="列數及列寬" framespcing="框架間距" frameborder="是否顯示邊框(yes,no/0,1)" border="邊框寬度" bordercolor="邊框顏色">
<frame src="檔案地址及名稱" name="框架名稱" noresize="是否允許改變尺寸(true/false)" scrolling="滾動條顯示(yes/no/auto)">
</frameset>
3、內嵌式框架
<iframe src="被巢狀的網頁地址及名稱" width="寬度" height="高度" frameborder="是否顯示邊框(0,1)" scrolling="滾動條顯示(yes/no/auto)">
</iframe>
九、從html邁向xhtml
1、什麼是XHTML?
XHTML是The Extensible Hyper Text Markup Language的縮寫,xhtml的意思是可擴充套件標識語言。
XHTML是HTML向XML過度的一個橋樑,Xhtml是基於html的,這是更嚴密、程式碼更簡潔的HTML版本。
2、DOCTYPE
DOCTYPE是document type(文件型別)的簡寫,主要用來說明你用的XHTML或HTML是什麼版本。瀏覽器根據DOCTYPE定義的DTD來解釋頁面程式碼,並展現出來。所以,建立符合標準的網頁,DOCTYPE宣告是必不可少的關鍵組成部分。
3、XHTML1.0提供了三種DTD宣告:
- 過度的(Transitional):要求非常寬鬆的DTD,它允許你繼續使用HTML4.0.1的標記(但是要符合xhtml的語法),完整程式碼如下:
- 嚴格的(Strict):要求嚴格的DTD,你不能使用任何表現層的標記和屬性,例如<br>,完整程式碼如下:
- 框架的(Frameset):專門針對框架頁面設計使用的DTD,如果你的頁面中包含有框架,需要採用這種DTD。完整程式碼如下:
4、XHTML與HTML的區別:
- XHTML標籤必須被正確的巢狀;
- XHTML標籤必須被關閉;
- 標籤名必須用小寫字母;
- 屬性名必須用小寫,必有值,值必加引號;
一、Web標準簡介
1、什麼是web標準?
web標準不是某一個標準,而是由W3C和其他標準化組織指定的一系列的標準集合,包含我們熟悉的HTML、XHTML、JavaScript、CSS等。
2、web標準的目的?
在於建立一個統一的用於web表現層的技術標準,以便於通過不同瀏覽器或終端裝置向最終戶展示資訊內容。
3、採用web標準的好處?
- 提高頁面瀏覽速度:使用css方法,比傳統的設計方法至少節約50%以上的檔案尺寸。
- 縮短改版時間,將表現(樣式/外觀)與內容(資訊/資料)相分離:只需要簡單的修改幾個css檔案就可以重新設計一個有成千上萬頁面的站點。
- 降低網站流量的費用:頻寬要求降低(程式碼更簡潔),成本降低。
- 更容易被搜尋引擎搜尋到:提高網站在百度或谷歌上的排名。
- 內容能被更廣泛的裝置訪問:包括螢幕閱讀、手持裝置、搜尋機器人、印表機、電冰箱等等。
- 結構(structure)
- 表現(presentation)
- 行為(behavior)
5、理解表現和結構的分離
基本的概念:內容、結構、表現和行為
- 內容:就是製作者放到頁面內真正想讓訪問者瀏覽的資訊。
- 結構:使內容更加具有邏輯性和易用性(類似於一級二級標題、正文、列表等稱為結構)
- 表現:用於修飾內容外觀的樣式
- 行為:對內容的互動及操作效果,如通過JavaScript判斷表單提交等
二、CSS簡介 (一)、概念 1、CSS是Cascading Style Sheets(層疊樣式表)的簡稱。 2、更多的人把它稱作樣式表,顧名思義,它是一種設計網頁樣式的工具。藉助CSS的強大功能,網頁將在你豐富的想象力下千變萬化。實際上CSS程式碼都是由一些最基本的語句組成的。 3、CSS可以作為HTML、XHTML、XML的樣式控制語言。
(二)、CSS語法結構
1、選擇符{ 屬性:值 }
例如:body{ font-size : 12px; }
引數說明:
- 選擇符(Selector):指明這組樣式所要針對的物件。可以是一個XHTML標籤,如body、h1等;也可以是定義了特定的ID或class的標籤,如#main選擇符表示選擇<div id="main">,即一個被指定了main為id的物件。
- 屬性(Property):選擇符的樣式屬性,如顏色、大小、定位、浮動方式等。
- 值(Value):指屬性的值。
2、CSS長度單位
3、CSS顏色單位
4、CSS控制字型
(三)、CSS在網頁中的應用方式
1、內聯式樣式表:直接寫在現有的標記中,如:
<p style="color:red">...</p>
2、嵌入式樣式表:使用<style></style>標籤嵌入到HTML檔案的頭部<head>標記內,如:
<style type="text/css">...</style>
3、外部連結式:將樣式表寫在一個獨立的css檔案中,然後再頁面head區<head>標記內用<link>標籤呼叫它,如:
<link href="main.css" rel="stylesheet" type="text/css">
4、匯入式樣式表:匯入式樣式表和連結式樣式表的功能基本相同,只是語法和動作方式略有不同,同樣也將匯入式樣程式碼寫在<head>標記內,如:
<style type="text/css">
@import url(basic.css);
</style>
(四)、CSS選擇符型別
1、型別選擇符:就是HTML文件中的元素,如:
p{屬性:值}
2、類選擇符:可以自定義樣式,應用於一個或多個網頁元素,類在網頁中可以出現多次用於定義重複的樣式,類以.開頭,後面的名稱自己定義,類定以後還需要在網頁中加入class=類名稱,加以呼叫。如:
.warning{屬性:值}
<p class="warning">...</p>
3、ID選擇符:與類基本相似,只是以英文#開頭,因為ID具有唯一性,所以在網頁中只能出現一次,用於定義只出現一次的樣式。如:
#main{屬性:值}
<p ID="main">...</p>
(五)、CSS樣式的特點
1、繼承:
- 網頁中子元素將繼承父元素的樣子,例如:要控制段落p中的文字大小,可以直接給body標記家樣式。
2、層疊(覆蓋):
- 網頁中子元素定義了與父元素相同的樣式,則子元素的樣式將覆蓋掉父元素中的樣式
- 定義後面的樣式會覆蓋前面的樣式
(七)、CSS控制文字
(八)、CSS控制連結
三、CSS高階
(一)、CSS選擇符的詳細使用
1、型別選擇符:
- 就是html文件中的元素[作用於html標記]。如:p{屬性:值}
2、類選擇符:
- 可以自己定義樣式,應用於一個或多個網頁元素,類在網頁中可以出現多次,用於定義重複的樣式。類以英文.開頭,後面的名字自己定義,類定以後還需要在網頁中加入"class=類名稱",加以呼叫。如: .waring{屬性:值} <p class="waring">...</p>
3、ID選擇符:
- 與類基本相似,只是以英文#開頭,因為ID具有唯一性,所以在網頁中只能出現一次,用於定義只出現一次的樣式。如: #main{屬性:值} <p ID=main></p>
4、通配選擇符:
- 用於定義所有元素。如:*{屬性:值}
5、包含選擇符:
- 所有被e1包含的e2。如:table td{屬性:值}
- 同時給某個元素應用多個類和ID。如:<p class="a1 a2" id="a6">...</p>
6、選擇符分組:
- 將同樣的樣式定義用於多個選擇符,選擇符之間用逗號隔開。如:body,div,p{屬性:值}
7、標籤指定式選擇符:
如果既想使用id或class,也想使用標籤選擇符,那麼,
- h1#content{}:表示針對所有id為content的h1標籤;
- h1.content{}:表示針對所有class為content的h1標籤;
8、組合選擇符:
將以上選擇符組合使用,那麼,
- h1 .content{}:表示在h1下所有class為content的標籤;
- h1 .content,#content h1{}
(二)、CSS常用屬性
1、CSS控制邊框屬性:
功能 | 語法 |
設定邊框粗細 | border-top-width:12px |
設定邊框樣式 | border-bottom-style:slide(實線)、dashed(虛線) |
設定邊框顏色 | border-right-color:#000000 |
設定某一邊框的屬性 | border-邊框位置:線寬 線型 顏色 |
設定四條邊的屬性 | border:線寬 線型 顏色 |
2、CSS控制背景:
功能 | 語法 |
背景 | background:顏色 圖片 平鋪方式 固定方式 位置 |
背景顏色 | background-color:#ccc |
背景圖片 | background-image:url |
背景圖片的重複方式 | background-repeat:【repeat,no-repeat,repeat-x,repeat-y】 |
背景圖片的依附方式 | background-attachment:【scroll,fixed】 |
背景圖片的位置 | background-position:top【left、center、right】 center【left、center、right】 bottom【left、center、right】,x座標y座標(左上角是0,0,單位是畫素px) |
3、CSS控制列表:
功能 | 語法 |
列表屬性 | list-style:list-stylet-ype list-style-position list-style-image |
列表專案型別 | list-style-type:none,disc,circle,square,decimal,lower-roman,upper-roman,lower-alpha,upper-alpha |
列表專案位置 | list-style-position:inside,outside |
列表專案圖片 | list-style-image:url,none |
4、CSS控制元素的尺寸:
功能 | 語法 |
設定元素的寬度 | width:100px |
設定元素的高度 | height:100px |
設定元素最小寬和高 | min-width:50px,min-height:50px |
設定元素最大寬和高 | max-width:50px,max-height:50px |
設定元素的外邊距 | margin:上 右 下 左 |
設定元素的內邊距 | padding:上 右 下 左 |
四、CSS+DIV佈局
(一)、網頁元素分類
1、div是什麼?
div是一個容器,能放置內容,例如:<div>內容</div>。
說明:XHTML中每一個標籤物件幾乎都可以成為一個容器,例如:<h1>標題</h1>。
div是xhtml中指定的,專門用於佈局設計的容器物件。CSS佈局中,div是這種佈局的核心物件,做一個簡單的佈局只需要兩樣東西div與css,因此也有人稱CSS佈局為div+css佈局。
(二)、盒子模型
1、盒子模型:W3C組織建議把所有網頁中的物件都放到一個盒子中。
- 設計師可以通過建立定義來控制這個盒子的屬性,這些物件包括段落、列表、標題、圖片及層<div>。
2、盒子模型主要定義這四個區域:內容(content)、填充(padding)、邊框(border)、邊界(margin)。
3、整個盒子模型在頁面中所佔的寬度:左邊界+左邊框+左填充+內容+右填充+右邊框+右邊界。
示意圖如下:
3D示意圖如下:
(三)、CSS佈局
1、元素的分類:不同的元素在文件型別定義DTD(Document Type Difinition)內有預設的分類,可以通過css修改分類的定義。
【1】、塊級元素:{display:block}
- 每個塊級元素都從一個新行開始,而且其後的元素也需要另起一行開始,如:div[層]、標題、段落、表格、body等;
- 塊級元素只能作為其他塊級元素的子元素,而且需要一定的條件;
【2】、內聯元素:{display:inline}
- 內聯元素不需要在新行顯示,而且也不強迫後面的元素換行,如:a、em、span等;
- 內斂元素可以作為任何元素的子元素;
【3】、隱藏元素:{display:none}
- 當某個元素被設定為display:none時,瀏覽器會完全忽略這個元素,此元素將不會被顯示;
2、浮動與清除浮動
【1】、浮動(float)
浮動(float)是CSS實現佈局的一種方式,包括div在內的任何元素都可以浮動的方式展示。
值:
- none:不浮動
- left:物件向左浮動,而右側的內容流向物件的右側
- right:物件向右浮動,而左側的物件內容流向物件的左側
【2】、浮動的清理(clear)
清理時浮動的又一個有用的工具,實現拒絕浮動物件對後面物件的影響。
技巧:
- 當浮動了許多元素之後,突然需要另起一行時,可以製作一個空白的div標籤,為其設定clear:both清楚左右的浮動
【3】、溢位(overflow)
設定當前物件的內容超出其指定高度和寬度時,如何管理內容。
- visible:預設值,不剪下內容,也不新增滾動條;
- auto:在必須時,物件內容才會被剪下,或顯示滾動條;
- hidden:不顯示超過尺寸的內容;
- scroll:總是顯示滾動條;
【4】、定位(position)
設定物件的定位方式。
- static:靜態定位,頁面中沒一個物件的預設值;
- absolute:絕對定位,將物件從文件流中分離出來,通過設定left、right、top、bottom四個方向,相對於父級元素進行絕對定位;
- relative:相對定位,物件不從文件流中分離出來,通過設定left、right、top、bottom四個方向,相對於自身位置進行相對定位;
4、CSS佈局方式
- 預設文件流方式:以預設的html元素的結構順序顯示;
- 浮動佈局方式:通過html元素的float屬性顯示;
- 定位佈局方式:通過設定html元素的position屬性顯示;
#box{
width:300px;
height:300px;
position:relative;
}
#first{
width:300px;
height:300px;
position:absolute;top:10px;
right:20px;
}
#second{
width:300px;
height:300px;
position:absolute;top:100px;
left:200px;
<div id="box">
<div id="first">...</div>
<div id="second">...</div>
5、清除浮動的方式
【1】、額外標籤法:w3c推薦,在浮動元素的最後新增一個空標籤
.clear{
clear:both;
}
<div id="box">
<div id="first">...</div>
<div id="second">...</div>
<div class="clear">...</div>
</div>
【2】、overflow方法:
#box{
width:300px;
height:300px;
overflow:hidden;
}
<div id="box">
<div id="first">...</div>
<div id="second">...</div>
</div>
【3】、利用偽物件after方法(網上最流行的清除浮動程式碼)
.clearFix:after{
clear:both;
display:block;
visibility:hidden;
height:0;
line-height:0;
content:"";
}
.clearFix{zoom:1}
第三部分:JavaScript
一、JavaScript簡介
1、JavaScript概述
JavaScript是基於物件和事件的指令碼語言。
特點:
- 安全性(不允許直接訪問硬碟),他可以做的是資訊的動態互動。
- 跨平臺性。(只要是可以解釋執行JS的瀏覽器都可以執行,和平臺無關)
2、JavaScript和Java的不同之處
- JS是Netscape公司的產品,Java是SUN(現在是Oracle)公司的產品。
- JS是基於物件,Java是面向物件。
- JS只需要解釋執行,Java需要先編譯成位元組碼檔案,再執行。
- JS是弱型別,Java是強型別。
3、JavaScript和HTML結合的方式
想要將其他程式碼融入html中,都需要以標籤的形式
- 程式碼放在<script>...</script>標籤中
- 使用script標籤的src屬性引入一個js檔案,方便後期更新,及維護。例如:<script type="javascript" src="test.js"></script>
二、JavaScript語法
1、變數
通過關鍵字var來定義,弱型別即是不用指定具體型別。
例如:var x = 12; x = "hello";
注:JS中特殊的常量undefined,當變數沒有初始化就被使用,該變數的值就是undefined(未定義)。
2、語句
- 判斷結構(if語句)
注:在JS中0就是false,非0就是true(通常用1表示)
- 選擇結構(switch語句)
注:沒有具體型別限制
- 迴圈結構(while語句,do...while語句,for語句)
3、函式
- 一般函式
格式:
function 函式名(形式引數...)
{
執行語句;
renturn 返回值;
}
函式是多條語句的封裝體,只有被呼叫才會被執行。
注意:呼叫有引數的函式,但沒有給其賦值,函式一樣可以執行;或者呼叫沒有引數的函式,給其傳值,也一樣執行。簡單地說,只要寫了函式後面的小括號,函式就可以執行。
其實,在函式中有一個引數陣列物件(arguments),該物件將傳遞的引數都封裝在一個數組中。例如:
function demo(){
alert(arguments.length);
}
demo(123,"hello",true);//呼叫函式,彈出對話方塊的結果為3。
通過for迴圈遍歷該陣列,如:
for(var x=0;x<arguments.length;x++){
alert(arguments[x]);
}
函式在呼叫時的其他寫法:
var show = demo()//show變數接收demo()函式的返回值
var show = demo //這種寫法是可以的,意為show和demo是一個函式,那麼該函式也通過show()的方式執行
- 動態函式
通過JS的內建物件function實現,例如:
var demo = new function("x,y";"alert(x+y)";);
demo(4,6);
和一般函式不同的是,動態函式、引數及函式體都可以通過引數傳遞,動態指定。
- 匿名函式
格式:function(){...},例如:
var demo = function(){...}
demo();
通常在定義事件屬性的行為時,較為常用。
匿名函式就是一種簡寫格式。
4、陣列
方便操作多元素的容器,可以對其中的元素編號。
特點:可以存任意元素,長度是可變的。
格式:
var arr = new Array();
arr[0] = "hello";
arr[1] = 123;
var arr =["hello",123,true,"abc"];
for(var x=0;x<arr.length;x++){
alert(arr[x]);
}
5、物件
JS除了已經提供的內建物件外,也可以自定義物件。
例如:
function Person(){}
var p = new Person();
p.name = "zhangsan"
p.age = 13;
p.function(){
alert("run");
}
或:
funtion Person(){
this.name = name;
this.age = age;
}
var p = new Person("zhangsan",13);
with語句
格式:
with(物件){}
應用:
當呼叫一個物件中多個成員時,為了簡化呼叫,避免"物件. "這種形式的重複書寫,可以寫成:
var p = new Person(“zhangsan”,20);
with(p)
{
alert(name+”,”+age);
}
with語句定義了某個物件的作用域,在該域中可以直接呼叫該物件的成員。 for...in語句
用於遍歷物件屬性。
例:
var p = new Person(“zhangsan”,20);
for(x in p){
alert(x);//結果是兩個對話方塊,一個是name,一個是age。
alert(x+”:”+p[x]);//可以得到屬性與屬性的值。p[x]:p物件就是個陣列,要通 過指定的元素名獲取元素的值。
}
三、window物件
1、navigator物件
- appName屬性:瀏覽器的名稱
- AppVersion屬性:瀏覽器的版本號
2、location物件
- href屬性:獲取或者設定地址
3、screen物件
- height與availHeight屬性:獲取螢幕的高度,是否去除工作列
- width與availWidth屬性:獲取螢幕的寬度,是否去除工作列
4、event物件
- keyCode屬性:獲取鍵盤按鍵
- returnValue屬性:獲取或者設定某個屬性的返回值
- srcElement屬性:獲取某個事件的源物件
5window方法
- confirm:彈出一個確認對話方塊,返回值的值為true或false
- focus:使某個元素獲得焦點,並執行onfocus時間制定的程式碼
- moveBy與moveTo:移動
- open:開啟視窗,可以制定標題、開啟方式、視窗屬性(標題欄、滾動條、可變大小等)
- prompt:顯示一個提示框,有一條訊息和一個輸入框
- setTimeout與clearTimeout:間隔多長時間之後執行
- setInterval與clearInterval:每間隔多長時間執行