計算機概論  附錄 JavaScript 程式設計.

Presentation on theme: "計算機概論  附錄 JavaScript 程式設計."— Presentation transcript:

1 計算機概論  附錄 JavaScript 程式設計

2 學習目標 網頁所使用的 JavaScript 語言有著使用領域廣、容易做出「看得到」的程式，以及開發環境設定簡單的各種優勢。
做為一個初踏入程式寫作的學生來說，可作為程式學習的敲門磚，而且程式設計的概念大致相同，因此日後想再學習其他的程式語言，也可以快速上手。

3 開發環境 瀏覽器就是一種 JavaScript 直譯器，按下 F12 就會開啟開發人員工具。

4 開發環境 網頁是以明碼方式存在，透過開發人員工具就可看到網頁的原始碼。

5 開發環境 撰寫 JavaScript 最簡單的工具就是「瀏覽器」加「記事本」。

6 語法說明 各種程式語言都有其特定的語法，JavaScript 也有其特定的語法。

7 在網頁添加 JavaScript 必須要有關鍵字告訴瀏覽器以下的語法為 JavaScript 語法而不是 html 語法。
網頁中嵌入 JavaScript 的元素為<script></script>。 其運用方法有兩種，一種是直接在網頁檔中添加；另一種是在網頁檔中添加一個外部檔案引用。

8 在網頁添加 JavaScript 採用直接引用與外部引用的嵌入方式

9 在網頁添加 JavaScript 當所撰寫的 JavaScript 功能複雜後，採用外部引用的方式將可便於維護與載入，也可以在一些開放社群上，找到共享的 JavaScript 函式庫資源，也都是採用外部引用的方式來進行使用。 <script> 標籤除了 src 屬性外還具有其他屬性。

10 在網頁添加 JavaScript <script> 標籤的屬性列表

11 語言特性 JavaScript 中變數或是函數的大小寫是有區別的，例如 bgcolor、bgColor、BgColor 和 BGCOLOR 是代表不同的東西。

12 變數使用 在 JavaScript 中，變數採用寬鬆型態的宣告方式。
可以在 JavaScript 中使用關鍵字「var」宣告一個變數，不須指定這個變數所需存放的資料型態，就可任意的去存放字串或是數值的資料到這個變數中。

13 變數使用 變數的使用 圖中宣告了一個 ptr 的變數，該變數在不經過任何轉換的情況下，在不同的程式位置分別填入了 與" 我是字串" 這兩種型態的內容。

14 函數使用 前面的例子中所使用到的 alert( )，就是一個標準的JavaScript 函數，目的是在瀏覽器上跳出一個警告視窗，視窗的內容則由輸入的資料決定。 函數是使用關鍵字「function」來宣告一個特定的名稱為函數，並將函數中所要執行的動作用{} 包起來

15 函數使用 函數的使用 圖中定義了一個 myAlert 函數，會將函數所傳入的兩個變數串接，並輸入至alert 中。

16 函數使用 程式執行後的結果

17 HTML 與 JavaScript 溝通的橋樑
DOM(Document Object Model) 提供 JavaScript 存取 html 的方法，當網頁載入完成後， 瀏覽器會將該網頁建立成一個 Document 物件，透過這個物件所提供的方法，JavaScript 可以操控 html 上的元素。

18 HTML 與 JavaScript 溝通的橋樑
Document Object Model 範例程式 當按下按鈕時透過 onclick="showText();" 去呼叫 JavaScript 中的 showText() 函數。 該函數的動作為利用 document 物件的 getElementById 方法取得 html 上 id 為 show 的物件，經由 Element 所提供的方法 innerHTML，將" 這是 JavaScript 所產生的文字" 填入<span id="show"></span> 中。

19 HTML 與 JavaScript 溝通的橋樑
Document Object Model 範例程式的執行結果 透過瀏覽器的除錯功能，可以看到在按下按鈕後，<span id="show"></span> 轉變為<span id="show"> 這是JavaScript 所產生的文字</span>。

20 實用技巧一：即時跑馬燈 程式第18 行就是用來串接當前文字以進行文字位移，並透過 19 行marqueeField.innerHTML 將串接的文字輸出至瀏覽器上。 第 20 行在透過計時器，每隔一秒鐘重新呼叫 marquee() 再次進行文字的位移。 跑馬燈範例程式 網頁載入後會透過 27 行的 onload = “bodyInit()” 執行 bodyInit ( ) 函數， bodyInit 中會呼叫 marquee() 函數開始執行跑馬燈程式。 程式的主要運作原理是透過字串的串接，以及計時器的運用來產生文字跑馬燈效果。

21 實用技巧一：即時跑馬燈 跑馬燈執行結果

22 實用技巧二：設定權限防止圖片被盜 一般使用者開啟網頁後，如想複製網站上的圖片或文字，大多都是透過滑鼠右鍵，或是滑鼠圈選後使用鍵盤 Ctrl+C 進行複製。 可以透過 JavaScript 控制 Document 物件的方式，來禁止滑鼠右鍵的使用，或是抓取鍵盤按鍵的事件及按鍵機碼，以達到禁止複製的目的。

23 實用技巧二：設定權限防止圖片被盜 程式碼的第 10 行，DisableKeys() 中只要偵測到按下的按鍵為 ctrlKey、shiftKey、alt 就禁止該按鍵的回報。第 11 行則是用來禁止畫面物件的拖動，第 12 行禁止右鍵選單使用，第 13 行禁止圈選畫面。

24 實用技巧二：設定權限防止圖片被盜 設定權限防止圖片被盜程式碼執行結果

25 實用技巧三：自動更新日期 自動更新日期也是透過 innerHTML 與計時器來完成。
在 bodyInit 中呼叫 showTime() 函數來更新畫面上的時間。 於程式碼第 36 行 var NowDate = new Date()，取得時間物件 後，就可以用其中的方法來取得系統時間，並將時間串接 成一段文字，於程式碼第37 ∼ 44 行。 接著使用document. getElementById (‘time’).innerHTML 將時 間字串更新到瀏覽器上，最後呼叫計時器每隔 1 秒鐘執行 一次 showTime() 重複更新畫面上的時間。

26 實用技巧三：自動更新日期

27 實用技巧三：自動更新日期 自動更新日期執行結果

28 實用技巧四：網頁雪花效果 網頁雪花效果範例程式 載入網路共享 的 JavaScript 程式碼美化自 己的網站。
透過程式碼第10 行snow Storm.snowColor=‘#FF00FF' 將雪花改為粉紅色。 第 11 行 snowStorm.flakes MaxActive = 3000 修改雪花的數量。

29 實用技巧四：網頁雪花效果 網頁雪花效果執行結果

30 實用技巧五：為網站加入 LINE 自動連結 ICON 增加會員數
當我們辛苦完成自己的網站後， 總想要增加曝光度，透過社群軟體，如 LINE、Facebook 或WeChat 來傳送網站資訊就是一個不錯的方法。 接下來將介紹如何於自己設計的網頁中，增加一個 LINE 的發佈連結。

31 實用技巧五：為網站加入 LINE 自動連結 ICON 增加會員數
步驟一： 登入 LINE官 方網頁 首先選擇所想要的按鈕樣式。 然後，輸入想要發佈的網頁位址，這個網址必須是公開的可以在網際網路找到的位址。 接下來，將官網所提供的程式碼複製後嵌入所設計的 html 中。

32 實用技巧五：為網站加入 LINE 自動連結 ICON 增加會員數
步驟二： 在網頁中添加 原始碼 第 64 ∼ 65 行將 LINE 所產生的原始碼嵌入所設計的html 中，可以看到加入的程式碼是一個外部載入的 JavaScript loader.min.js。

33 實用技巧五：為網站加入 LINE 自動連結 ICON 增加會員數
步驟三： 上傳至網路 空間 按下 LINE 按鈕後跳出發布訊息視窗

34 實用技巧五：為網站加入 LINE 自動連結 ICON 增加會員數
Facebook 開發者網頁

35 實用技巧五：為網站加入 LINE 自動連結 ICON 增加會員數
WeChat 開發者網頁

36 THE END