因為我想要教我的女友 JavaScript 所以我就開了這個 Gist 用來放檔案慢慢教她 JavaScript 。
會有這種教學方式是我想起當初在看王國榮老師的 VB6 教學時，他有用一些圖片加上程式碼來指導、教學，在練習的部分也是有這樣的東西，所以打算用同樣的方式來訓練我女朋友關於 JavaScript 的開發。
Last active
August 29, 2015 14:04
-
-
Save hechien/ea2ff3e88d3acdf29899 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <title></title> | |
| <link rel="stylesheet" href=""> | |
| </head> | |
| <body> | |
| <!-- 請在這邊加上界面 --> | |
| <h1>設定變數</h1> | |
| <hr /> | |
| <input type="text" id="text-1" /><input type="text" id="text-2" /> | |
| <button id="run">執行</button> | |
| <p id="result"></p> | |
| <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> | |
| <script> | |
| // 請忽略下面這段程式碼 | |
| function setMessage(message, target) { | |
| target.text(message); | |
| } | |
| // 請忽略上面這段程式碼 | |
| jQuery(function($){ | |
| // 請忽略下面這段程式碼 | |
| var target = $("#result"); | |
| // 請忽略上面這段程式碼 | |
| var run = function (){ | |
| // 請把要執行的程式碼寫在這裡 | |
| // 在 JavaScript 中可以用這樣的語法來設定變數 => var 變數名稱 = 資料; | |
| // 在變數名稱右邊的等於我們通常稱為「指派」或者「設定」，而不直接稱為「等於」，所以如果遇到這樣的變數設定： var name = "HeChien"; 我們會說「把字串 HeChien 設定到變數 name 裡面去」 | |
| // | |
| var text_1 = $("#text-1").val(); | |
| var text_2 = $("#text-2").val(); | |
| var message = "文字框 1 的變數內容是" + text_1 + "，然後文字框 2 的變數內容是" + text_2; | |
| // 請忽略下面這段程式碼 | |
| setMessage(message, target); | |
| // 請忽略上面這段程式碼 | |
| } | |
| // 請忽略下面這段程式碼 | |
| $(document).on("click", "#run", run); | |
| // 請忽略上面這段程式碼 | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <title></title> | |
| <link rel="stylesheet" href=""> | |
| </head> | |
| <body> | |
| <!-- 請在這邊加上界面 --> | |
| <h1>教學標題</h1> | |
| <hr /> | |
| <button id="run">執行</button> | |
| <p id="result"></p> | |
| <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> | |
| <script> | |
| // 請忽略下面這段程式碼 | |
| function setMessage(message, target) { | |
| target.text(message); | |
| } | |
| // 請忽略上面這段程式碼 | |
| jQuery(function($){ | |
| // 請忽略下面這段程式碼 | |
| var target = $("#result"); | |
| // 請忽略上面這段程式碼 | |
| var run = function (){ | |
| // 請把要執行的程式碼寫在這裡 | |
| var message = ""; | |
| // 請忽略下面這段程式碼 | |
| setMessage(message, target); | |
| // 請忽略上面這段程式碼 | |
| } | |
| // 請忽略下面這段程式碼 | |
| $(document).on("click", "#run", run); | |
| // 請忽略上面這段程式碼 | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment