Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Programming - Lesson 1

Web Programming - Lesson 1

Ryan Chung

March 07, 2020
Tweet

More Decks by Ryan Chung

Other Decks in Programming

Transcript

  1. Web Programming – [email protected] 行動開發學院 行動開發學院 Lab Index • Hello

    JavaScript! – 環境安裝、套件安裝、專案基本構成 • 今天晚上吃什麼 – 亂數選擇器 – HTML/CSS/JS、jQuery、亂數 • 自動排課系統 – 表格、陣列、日期時間、函數、迴圈、字串、樣式 • 心理測驗 – 你的愛情是什麼滋味? – 條件判斷、按鈕、資料取得、陣列、字典 • RPG極簡雛形製作 – Canvas、圖型載入、For..in、事件、Switch • Youtube心情點唱機 – Youtube iFrame API、div、id、物件 • 網頁整合 – Bootstrap、超連結、選單、jQuery選擇器 • 網站上線 – GitHub Pages、Git 2
  2. Web Programming – [email protected] 行動開發學院 行動開發學院 安裝擴充套件 • 按下左邊 Extensions圖示

    或 Ctrl + Shift + X –Chinese (Traditional) Language Pack for Visual Studio –HTML Boilerplate –Live Server 4
  3. Web Programming – [email protected] 行動開發學院 行動開發學院 第一個 JS專案 • 在電腦中新增一個資料夾:HelloJavaScript

    • 打開VS Code, 檔案(F) -> 開啟資料夾… • 選擇剛才建立的資料夾 • 關閉「開始使用」分頁 5
  4. Web Programming – [email protected] 行動開發學院 行動開發學院 基本畫面元素 • 如何產生標題? •

    如何決定標題上的文字? • 如何產生按鈕? • 如何決定按鈕上的文字? • 如何產生清單? • 如何撰寫清單上的項目? 15
  5. Web Programming – [email protected] 行動開發學院 行動開發學院 功能拆解 • 如何讓按鈕按下之後有所動作? •

    如何取得清單中的文字? • 如何任意挑選其中一個項目? • 如何改變標題的文字? 17