[JavaScript] 手把手一起入門(一) – 簡介
隨著最近愈來愈想將想法加入這個網站,小獅開始學習 JavaScript 了呦!總之,小獅之後也會盡量將筆記和實驗成果放在這裡,讓大家也可以一起玩喔!(看來之前答應的系列文又要延後了)
簡介
相信大家聽到 JavaScript 這個名子,就會聯想到現今最熱門的物件導向語言之 – Java;但其實 JavaScript 與 Java 之間的關係,是在於 JavaScript 受到 Java 語言的啟發後,採用了類似的概念與撰寫風格,並非以 Java 技術為基礎的語言。
在 1995 年面世的 JavaScript 原先由 布蘭登·艾克(Brendan Eich)於任職 網景(Netscape) 時設計,後來和 Ecma International 一起將它標準化成為 ECMAScript(ECMA-262),之後則以 ECMAScript 實作和擴充的形式存在至今。
擴充的特性為 JavaScript 帶來了更多的可能,但也帶來了相對應的問題,也就是一直存在的部分非標準的特性,也造成了部分使用者的混亂,但相信只要懂得趨吉避凶,一定能做出讓自己滿意的成果!
輕鬆入門
因為 JavaScript 在設計之初就希望讓所有人可以學的會,所以大家不用擔心呦~
這次只需要準備純文字編輯器和瀏覽器就好了,不要再說不會裝了,不然你是怎麼看這篇文章的呢(笑)
首先,打開你的記事本,我們要來建立一個 HTML,來裝載我們的第一個 JavaScript 程式。
接下來,輸入如下的文字,讓瀏覽器在開啟時方便辨認檔案類型(Document Type),雖然它並不是 HTML 標籤的一種,但它對許多瀏覽器有重要的引導效果,建議加上。
<!DOCTYPE html>
因為 DOCTYPE 基本上是不區分大小寫的,所以可以隨意改成其他大小寫形式,但建議將 DOCTYPE 全部大寫,以強調它與 HTML 程式碼部分的區別。
PS. 更多資訊請參考 http://www.w3schools.com/tags/tag_doctype.asp
接下來,我們再加入成對的 <html> 標籤,告訴瀏覽器這裡面是 HTML 文件,而這裡是所有元素的根(root),在這裡可以先用資料夾的概念來想,對比到 Windows 的話就是 C 槽。
<html> </html>
補充:XML 與 HTML
XML設計用來傳送及攜帶資料資訊,不用來表現或展示資料,HTML語言則用來表現資料,所以XML用途的焦點是它說明資料是什麼,以及攜帶資料資訊。- Wikipedia
啟發自 HTML 的 XML,一直和 HTML有著一個相同的特性,階層式的標籤結構(如下),然而,在 HTML 經過一段時間的發展後,有些設計師開始偷懶,沒有被關閉的標籤,錯誤的階層式結構在瀏覽器的縱容之下不斷出現。於是有人提出使用已經發展成熟的 XML 形式,規範出嚴謹的 HTML,即 XHTML,之後便一直與 HTML 並存到了現在。
Ps. 這篇教學中所使用的範例都會盡量滿足 XHTML 的規範,但為了容易理解,並未仔細定義為 XHTML 檔案,還請各位多包涵
<小紙條> <收件人>大元</收件人> <發件人>小張</發件人> <主題>問候</主題> <具體內容>早啊,飯吃了沒? </具體內容> </小紙條>
▲ 完成之後會像這樣!
完成之後請繼續在你的檔案中加入 head 和 body 兩個標籤,區分出 head 元素 和 body 元素。
<head> </head> <body> </body>
- head: 用來概要性的描述這一個 HTML 元素,包含標題(title)等資訊
- body: 用來裝載大部分的元素,也是我們的重點
▲ 像這樣縮排(使用 Tab 鍵)的話,就可以更加輕鬆的區分出階層了呢!
完成之後請將檔案存在任一位置,並試著用瀏覽器打開, 但請記住,檔名必需為 .html。
▲ 開啟之後應該會看見類似的畫面,裡面沒有內容的原因是我們尚未撰寫
小技巧:使用開發者工具
一般來說,目前主流的瀏覽器都有設計給網頁開發者的工具,例如:Firefox、Chrome、IE 等,在選單裡面找找,應該能找到類似 除錯工具、開發者工具 等的敘述,若找不到,可以試試 F12 鍵,它是許多瀏覽器習慣的快速建。以 Firefox 來說,開起之後可以幫助你檢視各個元素,只要將游標懸停於元素上方,就會在畫面中標示出該元素的 位置 / 範圍。
記得剛才在 head 提過的標題(title)嗎?其實它就是我們在觀看網頁時,會出現在網址列上方的那串字,
接下來我們要加入這個東西喔! 只要在,head 元素之中加入 title 標籤就可以了!
<title>HelloWorld</title>
這裡使用單行的方式撰寫是因為 title 基本上只需一行就可以寫完,這樣寫可以讓其他人在閱讀的時候比較不會占去那麼多的 空間 / 行數。
空蕩蕩的網頁也實在不太討喜,所以我們也來多加一點東西進去吧!
首先我們先來介紹標題(heading),標題由大致小分為 h1 到 h6,為了看看效果,我們就把它們全部加入檔案裡吧(喂)
<h1>這是 h1 標題喔</h1> <h2>這是 h2 標題喔</h2> <h3>這是 h3 標題喔</h3> <h4>這是 h4 標題喔</h4> <h5>這是 h5 標題喔</h5> <h6>這是 h6 標題喔</h6>
有了標題,就要有內文,在 HTML 的世界裡,我們稱之為段落(paragraph),使用的是 p 標籤
▲ 完成之後,會像這樣
<!DOCTYPE html> <html> <head> <title>HelloWorld</title> </head> <body> <h1>這是 h1 標題喔</h1> <h2>這是 h2 標題喔</h2> <h3>這是 h3 標題喔</h3> <h4>這是 h4 標題喔</h4> <h5>這是 h5 標題喔</h5> <h6>這是 h6 標題喔</h6> <p>這是一個段落</p> </body> </html>
這邊要注意的一點是,雖然不能將,p 元素 放入 h 元素 之中,但對螢幕閱讀器(Text-to-Sound)和 搜尋引擎 來說,h 元素 後方的 p 元素 會被視為一體,也就是說 段落 中的文字都會視為在該 標題 之下;而較小的 標題,則視為較大的 標題 之中的小標,h2 為 h1 的小標、h3 為 h2 的小標,以此類推。簡單來說,同樣是樹狀的概念,h1 代表最大的標題,囊括整份文件內容(body 元素),底下則分支出多個 h2,並不斷分支,直到 h6,後方接著 p 元素 也就是內文的部分。不過,一般並不會用到 h6 這麼多的階層,所以並未限定一定是 h6 才能與 p 組合,若想像寫作文作文一樣,一個標題(h1)之後就接著多個段落(p)的話也同樣可以被視為一組喔!
對螢幕閱讀器來說,這可能代表著章節的區分,可能會影響句子停頓的時間,或其他如 加重音 等表現方式;對搜尋引擎而言,這樣的結構也可以幫助他判斷一篇文章與關鍵字的關連度,若一篇文章中的 h1 標籤與關鍵字符合,而另一篇僅 h2 符合,搜尋引擎會認為第一篇文章應該優先顯示。
若是遇到亂碼的話,可以參考最後一頁的說明解決。
太神拉!!
暑假沒事就要學新東西!!
也感謝你的觀看喔!