<style> .slides img{background-color:grey!important} .slides img[title^='"']{filter:invert(100%)} hr, .slides [title^='*']{display:none} summary h1{display:inline;border-bottom:0!important} </style> <!-- .slide: data-background="black" --> ###### [JavaScript 教學/](/@NCHUIT/js) :::spoiler {state=open}<h1>簡介與基礎語法</h1> + <i class="fa fa-book"></i> 網頁 md.nchuit.cc/js + <i class="fa fa-tv"></i> 簡報 md.nchuit.cc/js1 [ToC] ::: > [name=VJ] ---- ## 前言 ### 預期收穫<i class='fa fa-fw fa-level-up'></i> 1. 網頁生成、分析[~~和修改~~](https://law.moj.gov.tw/LawClass/LawParaDeatil.aspx?pcode=C0000001&bp=53) 2. 程式流程控制 3. 邏輯思維 4. 耐心 ----  ---- ### 電腦程式 首先，我們先來了解一下甚麼是程式 >電腦程式（英語：Computer Program）是指一組指示電腦或其他具有訊息處理能力裝置每一步動作的指令，通常用某種程式設計語言編寫，執行於某種目標體系結構上。 >-[Wiki](https://zh.wikipedia.org/zh-tw/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%A8%8B%E5%BA%8F) ---- 在上文中，「某種目標體系結構」指的就是我們的CPU。 想當然，CPU只能依據數位電路(0與1)來執行功能，所以，程式實際上就是一連串位於記憶體由0與1組成的指令。 ---- #### CPU 腳位圖  >看不懂沒差，不影響，只是希望大家對數位電路(0與1)有點印象 ---- ### 程式語言 > 打個比方，一個程式的原始碼就像一個用漢語（程式設計語言）寫下的紅燒肉菜譜（程式原始碼），用於指導懂漢語（編譯器）同時也會烹飪手法（體系結構）的人來做這道菜（程式） > -[Wiki](https://zh.wikipedia.org/zh-tw/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%A8%8B%E5%BA%8F) 人類要只使用二進位碼(0與1)來編寫程式是非常困難的，所以我們需要程式語言的幫助才行 ---- 常見(以前)，的程式語言如下  compile : 編譯 compiler : 編譯器 ---- 簡單來說，就是由人們產出程式碼，再由編譯器編譯成二進位(0與1)的機器碼 ---- ### 程式碼(原始碼) 程式碼，也就是程式在被編譯之前的狀態，會以文字的方式儲存。 >並不是甚麼特別的東西，你可以想成是一篇文法嚴謹、結構有序的文章。~~而且是寫給電腦看，不是寫給人看的~~ ---- ### 單字介紹 code : 泛指程式碼，有時候會叫source code(原始碼) 像是等下會講的HTML你就只能叫它原始碼 program : 程式 syntax error : 語法錯誤，相當於你文法錯了，編譯器看不懂 keyword : 關鍵字，又稱保留字，該字在程式碼中具有規定好之意義 ---- ### [整合開發環境 IDE](https://zh.wikipedia.org/wiki/集成开发环境) > 集成開發環境(Integrated Development/Design/Debugging Environment，簡稱IDE)。是一種輔助程式開發人員開發軟體的應用軟體，在開發工具內部就可以輔助編寫原始碼文本、並編譯打包成為可用的程序，有些甚至可以設計圖形介面。-[wiki](https://zh.wikipedia.org/wiki/集成开发环境) ---- ### [VSCode](https://code.visualstudio.com) [](https://vscode.dev) --- ## Why JavaScript? [](https://store.line.me/stickershop/product/1428520) <div><!-- .element: class="fragment" data-fragment-index="1" --> ### <i class="fa fa-fw fa-stack-overflow"></i>Stack Overflow: 連續九年銷量總冠軍 </div> ---- [](https://insights.stackoverflow.com/survey/2021#most-popular-technologies-language) ---- [](https://insights.stackoverflow.com/survey/2021#section-learning-problem-solving-what-do-you-do-when-you-get-stuck) ---- ## [<i class="fa fa-fw fa-code"></i>JavaScript](https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/First_steps/What_is_JavaScript) JavaScript 是一種高階、直譯程式語言，支援<span><!-- .element: class="fragment highlight-blue" -->物件導向</span>、<span><!-- .element: class="fragment highlight-red" -->指令式編程</span>、及<span><!-- .element: class="fragment highlight-green"-->函式語言程式設計</span>。它的語法可以操控文字、陣列、日期以及正規表示式等，不支援 I/O，比如網路、儲存和圖形等，但這些都可以由它的宿主環境(瀏覽器)提供支援。 -[Wiki](https://zh.wikipedia.org/wiki/JavaScript) * 面市時間: 1995年12月4日(26年前) * 穩定版本: ECMAScript 2019(2年前, 2019/6) * 預覽版本: ECMAScript 2020 ---- ### [與 Java 有何不同？](https://www.java.com/zh-TW/download/help/java_javascript_zh-tw.html)  ---- JavaScript 被世界上的絕大多數網站所使用，也被世界主流瀏覽器支援。 - <i class="fa fa-fw fa-chrome"></i>Chrome - <i class="fa fa-fw fa-internet-explorer"></i>IE/Edge - <i class="fa fa-fw fa-firefox"></i>Firefox + <i class="fa fa-fw fa-safari"></i>Safari + <i class="fa fa-fw fa-opera"></i>Opera ---- 隨著最新的 <i class="fa fa-fw fa-html5"></i>HTML5 和 <i class="fa fa-fw fa-css3"></i>CSS3 語言標準的推行，JavaScript 還可用於遊戲、桌面和行動應用程式的開發和在伺服器端網路環境執行，如 Node.js。  <!-- .slide: data-background="#202124" --> ---- #### <i class="fa fa-fw fa-gamepad"></i>動動手: 主控台~~入侵~~ 試對瀏覽器開發者工具的主控台發送以下指令： ```javascript document.body.innerHTML="Hello" ``` :::info 🕹快捷鍵: 在 <i class="fa fa-fw fa-chrome"></i>Chrome 或 <i class="fa fa-fw fa-internet-explorer"></i>Edge 瀏覽器中按下 <kbd>F12</kbd> 或 <kbd>Ctrl+Shift+I</kbd> 可以打開瀏覽器的開發者工具，請在 `console`(`主控台`) 頁面輸入並發送指令。 ::: ```javascript onbeforeunload=()=>true ``` ###### [簡易社課體驗](/GlnNGFt3QYSqgDbQ5Yp0ug?view) --- ## JavaScript 其實... 已經在你面前執行完了，只是你看不到而已 瀏覽器一打開，JavaScript 就開始跑了 ---- ### [<i class="fa fa-fw fa-html5"></i>HTML](https://zh.wikipedia.org/wiki/HTML) <table><tr><td><b>H</b>yper<b>T</b>ext <b>M</b>arkup <b>L</b>anguage (超文本標記語言)，縮寫：HTML，是一種用於建立網頁的標準<b>標記語言</b>。<br>瀏覽器可以讀取HTML檔案，並將其彩現成<b>視覺化</b>網頁。<br><h6>HTML描述了一個網站的結構語意隨著線索的呈現，使之成為一種標記語言而<em>非程式語言</em>。</h6></td><td><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/HTML.svg/800px-HTML.svg.png' style="display:inline"></td></tr></table> * 最新版本： 5.2/ 5.3（工作草案）; 2017年12月14日，4年前 * 初始版本： 1993年，28年前 ---- ### 樹狀結構 DOM [](https://www.w3schools.com/js/js_htmldom_document.asp) ---- ### `*.html` 基礎框架 ```htmlmixed <html> <head> <title>網頁標題</title> <meta name="description" content="網頁描述"> <link rel="icon" href="https://hackmd.io/favicon.png"> <!--以及更多--> </head> <body> 網頁內容 </body> </html> ``` 你可能注意到了... `<head>`內的元素都不需要用`</*>`關起來 ###### [HTML稍微詳細的介紹: 從HTML到MarkDown(建議閱讀)](/@NCHUIT/mdhtml) ---- ### JavaScript 又在哪呢? HTML 的 [`<script>`元素](https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/script) ```htmlmixed <script> // JavaScript 寫在這裡 </script> ``` :::info 🕹快捷鍵: 在 <i class="fa fa-fw fa-chrome"></i>Chrome 或 <i class="fa fa-fw fa-internet-explorer"></i>Edge 瀏覽器中按下 <kbd>F12</kbd> 或 <kbd>Ctrl + Shift + I</kbd> 可以在 `Elements` 頁面檢視所有 HTML 元素。 ::: ----  ▲ <kbd>Ctrl</kbd>+<kbd>F</kbd> 搜索 `<script>` ---- ## <i class="fa fa-fw fa-gamepad"></i>動動手: 存檔 ### `檔名.html` ```htmlmixed [2] <script> alert('Hello world') </script> ``` ### `純程式碼.js` ```javascript alert('哈囉') ``` 要搭配下面 `啟動器.html` 來打開 <span><!-- .element: class="fragment" data-fragment-index="1" -->[utf-8?](https://zh.wikipedia.org/wiki/%E4%B8%AD%E6%96%87%E4%BA%82%E7%A2%BC)</span> ```htmlembedded <script charset='utf-8' src='純程式碼.js'></script> ``` 或是下載 [Node.js](https://nodejs.org/zh-tw/download/current)，親測要裝蠻久的先放著吧 --- ## 基礎語法 ### 註解 Comments > 程式常常不是只是要跑而已，讓別人看得懂也是很重要的 > 寫程式時，請想像最後維護此程式的人，是個有暴力傾向的精神病患，而且他知道你家住哪裡 ---- 單行註解，寫在兩個（正）斜線「//」之後 ```javascript // 我是註解 ``` 多行註解，寫在 `/*` 和 `*/` 之間的文字 ```javascript /* 我是註解 我也是註解 我還是註解 */ ``` ### 分號 `;` #### 愛加不加，除非你要寫在同一行 ---- ### 宣告 Declare JavaScript 相對其他程式語言算是很自由的了 [](https://store.line.me/stickershop/product/7034336) ###### `0x250F`=`9487`=愛啊 ---- #### [`var`](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/var) 宣告變數, 初始值愛給不給。 ```javascript var 變數; var 變數1 = '我有初始值'; ``` 可以用逗號來分別宣告，也可以連續宣告 ```javascript var a = "A", b = a; // 等同於 var a, b = a = "A"; ``` ---- #### [`let`](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/let) 宣告「只作用在當前區塊的變數」，初始值愛給不給。 通常在進行流程控制時才看得到用處。 ##### 區塊 用處: 將程式區隔開 ```javascript // 區塊外 { // 區塊內 } ``` ---- ##### 巢狀區塊 ```javascript // 區塊外 { // 區塊內 { // 區塊內的區塊內 { // 區塊內的區塊內的區塊內 { //... } } } } ``` ---- ##### [作用域](https://www.w3schools.com/js/js_scope.asp) 作用域確定變量的可訪問性（可見性）。 在 ES6 (2015) 版本之前, JavaScript 只有全域和函式作用域。 JavaScript 現在有 3 種類型的作用域： 1. [區塊](#區塊)作用域 3. 函式作用域 2. 全域 ---- ```javascript= { let 變數let = 'NCHUIT' } // 在這 *不可以* 存取變數let ``` ```javascript= { var 變數var = 'NCHUIT' } // 在這 *可以* 存取變數var ``` ```javascript= // 在這 *不可以* 存取變數flet function 函式() { let 變數flet = 'NCHUIT' // 在這 *可以* 存取變數flet } // 在這 *不可以* 存取變數flet ``` ---- :::spoiler 練習: 試變動下面程式碼使之正常顯示變數🆕 參考答案 ```javascript= { let 變數 = 'NCHUIT' window.變數 = 變數 } alert(變數) ``` ::: ```javascript= {// 提示: 這裡是區塊內 let 變數 = 'NCHUIT' // 在這行加個宣告 }// 提示: 這裡是window alert(變數) ``` 提示: 任何區塊用 `window.x=123` 等同於無區塊用 `x=123` ---- #### 直接宣告 會自動幫你找，目前區塊 > 子區塊 > 父區塊 ```javascript= 變數 = '我是在區塊外宣告的' { console.log('區塊內 宣告前 看變數: '+變數) } ``` ---- #### [`const`](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/const) **常數**(constants)，同 `let` 所宣告的變數，只在宣告的區塊下作用。常數不能重複指定值，也不能重複宣告。 ```javascript const π=3.14 π=8+9 ```  ---- ### [delete](https://www.youtube.com/watch?v=pDP6NoQOtNY&t=63s) ```javascript= 變數='我跳出來啦'; alert(變數) delete 變數;//我又回去啦 alert(變數)//error ``` ---- ### 簡易輸出入 簡易輸出 ```javascript= alert('視窗輸出') console.log('主控台輸出') ``` 簡易輸入語法 ```javascript= 變數 = prompt('輸入提示') ``` [](https://store.line.me/stickershop/product/7034336)