CodingMath-EP1-2 JavaScript

JavaScript前言與基本

1995年,當時在網景公司就職的布蘭登·艾克正為Netscape Navigator 2.0瀏覽器開發的一門名為LiveScript的程式語言,後來網景公司與昇陽電腦公司組成的開發聯盟為了讓這門語言搭上Java這個程式語言「熱詞」,將其臨時改名為「JavaScript」,所以其實JavaScript跟Java是完全不一樣的語言,其目的也大不相同。

發展目的主要有兩個: 第一, 在伺服器端, 附助 Netscape 發展的伺服器程式 LiveWire。 第二, 在客戶端, 加強 HTML 的表達能力, 亦即是提高網頁的互動性。

 

開始之前

前面HTML那篇用記事本很難排版對吧,這邊推薦幾個我個人很喜歡的文字編輯器

  1. Visual Studio Code : 微軟的文字編輯器,目前最好用的一款,幾乎所有語言都支持,還有非常多的擴充功能,有空再來針對VS Code寫一篇文章
  2. Notepad++ :  非常輕量化的文字編輯器,也很好用

 

通常JS都會搭配<script>標籤來置入HTML,並將其放置在head、body中,以下來做個範例

index.html

結果


測試方法跟前一篇HTML一樣,用編輯器修改內容後存成 .html 用瀏覽器執行它,然後你應該會有一樣的結果,按下按鈕後彈出視窗,並顯示Hello World。

 

範例的JS程式碼是寫在HTML中,但是當我們程式越來越多的時候,會不好管理,所以我通常都會用外部呼叫的方式,可以把上面的程式碼分成兩個檔案HTML、JS

如下所示

index.html

main.js

範例的資料夾內容

<script  src  =  “main.js”></script> : src屬性為引用JS檔案,在單獨的文件中創建JavaScript檔案,並以.js為副檔名保存,然後使用<script>標籤中的src屬性引用

使用方式

 


 

再來就是本系列的主角<canvas>標籤

<canvas> 標籤是HTML5的畫布功能,可以在其中繪圖,但標籤本身只是個容器,畫布的內容必須用 javascript 來繪製圖形

 

範例如下

index.html

main.js

結果(滑鼠點擊畫布可刷新)


 

先來看 index.htm

<style> : 為樣式標籤,能夠為HTML中的元素進行排版

這裡的屬性,單純為了好看,跟本文內容沒有太大關係,有興趣可以google : html css

 

id : id在html中名稱不可重複 ,有宣告id的元素可透過JS、CSS來修改屬性,等等會在main.js中用到

width、height : 畫布的大小設定

你的瀏覽器不支援HTML5 Canvas ” : 當這個瀏覽器版本不支援的時候會跳出這個文字,用於檢測是否能支援canvas

 

 

再來看main.js

var : 宣告變數,這裡的範例宣告canvas ,ctx, width, height四個變數

 

document.getElementById() : 取得有宣告id的元素物件,範例中canvas id設定為myCanvas所以當我要取得這個元素的時候就是透過getElementById()這個方法來透過id來取得,並使canvas這個變數等於”myCanvas”這個元素

canvas.getContext(“2d”) : 透過此方法可以取得渲染環境及其繪圖函數,像是後面的fillRect()方法、ctx.fillStyle屬性等等

 

ctx.fillStyle : 為繪圖環境的填色屬性,可以透過rgb來設定各種顏色

ctx.fillRect() : 根據當前fillStyle畫出實心矩形

使用方式:

ctx.strokeRect() : 根據strokStyle畫出空心矩形(沒有填滿顏色)

Math.random() : 回傳隨機0~0.99999….的值

 

再這個程式中,會根據這次亂數的值來再隨機的位置畫出實心或是空心的正方形

 

最後,本次所有範例的Code : Click me