JavaScript教學:第一行程式碼,document.write與alert

JavaScript是網頁設計前端的主流程式語言,它可以直接寫在既有的HTML文件,並且很簡單就可以實現動態效果。本文介紹兩大基本語句:document.write顯示文字、alert訊息視窗。

一、簡單網頁範例

延續先前贊贊小屋相關文章,想要設計一個網頁電子書,範例是論語。

JavaScript教學:第一行程式碼,document.write與alert 1

二、JavaScript程式碼

JavaScript作用是在網頁HTML文件內設計程式碼,因此使用的html標籤就是「<script></script>」。告訴瀏覽器在這裡是要執行程式,程式碼為「document.write(“凡十六章”)」,括號中間是想要在網頁上寫入的內容。

這一句的程式碼如下:

<script>document.write(“凡十六章”)</script>

JavaScript教學:第一行程式碼,document.write與alert 3

三、Chrome瀏覽器測試

實際在Google Chrome瀏覽器測試,果然在網頁上出現了那一行文字:「凡十六章」。

JavaScript教學:第一行程式碼,document.write與alert 5

四、網頁原始程式碼

網頁開發者應該都很熟悉用瀏覽器觀看原始程式碼,在這裡既然是測試所設計的網頁,也許會想要檢視原始程式碼,而實際於瀏覽器所看到的結果,基本上就是在Dreamweaver所撰寫的程式。

關於在瀏覽器如何顯示網頁原始程式碼,可以參考贊贊小屋相關文章

JavaScript教學:第一行程式碼,document.write與alert 7

五、type屬性設定值

成功設計第一行JavaScript程式碼之後,接下來進一步設計第二行程式碼。這裡重點是試看看將JavaScript程式語句寫在hHTML標籤裡面,這裡看到的是嵌套在H2標籤裡面,並且在script標籤屬性加了「type=”text/javascript”」等於是告訴瀏覽器這個標籤所對應的是JavaScript程式語言Z。

不過在先前第二步驟已經有測試過,在script標籤內沒有特別寫明是JavaScript也是可行。一方面這是因為JavaScript可說是目前HTML前端最主流的動態程式語言,另一方面同時要補充的是,以程式設計的素養而言。雖然「type=”text/javascript”」這個屬性值可以忽略,但是最好養成習慣寫上這一個標籤值,不同程式語句較合乎一般習慣,同時有效排除了瀏覽器真的無法判斷的情況。

JavaScript教學:第一行程式碼,document.write與alert 9

六、標籤嵌套程式碼

同樣於瀏覽器測試,嵌套在一般元素裡面的JavaScript程式碼同樣可以發揮作用。

一張含有 文字 的圖片

自動產生的描述

七、alert提示視窗

除了document.write是在網頁寫入文字之外,另外一個最基本語句:「alert(“歡迎閱讀!”)」,這句程式碼代表希望跳出一個訊息視窗,顯示歡迎閱讀。

JavaScript教學:第一行程式碼,document.write與alert 12

八、動態訊息視窗

瀏覽器同樣的頁面重新整理,果然跳出預期的文字訊息視窗。

JavaScript教學:第一行程式碼,document.write與alert 14

JavaScript簡單好用

本文介紹JavaScript。兩個最基本的語句,從文章範例的簡單程式可以得知,JavaScript可以簡單直接在HTML設計程式碼,並且很簡單一個語句便能實現跳出訊息視窗的動態效果。以此為基礎,對於JavaScript這個主流的網頁程式語言應該有更多的期待,這個也是贊贊小屋系列文章後續的規劃內容。

每天學習,每天充電:JavaScript文章合輯

JavaScript教學:第一行程式碼,document.write與alert 16
歡迎加入Line社群,口袋裡的VBA小教室!