javascript課程-從0開始，用五個專案入手JS

投影片位置：https://goo.gl/HAxzqk

台⼤大⽣生物機電所成⼤大光電⼯工程學系⾃自學程式政⼤大X台科⿊黑客松亞軍-物聯聯鋼琴女⼈人迷⿊黑客松冠軍-智慧法律律app 台⼤大X國泰⾦金金控⿊黑客松冠軍-機器學習信⽤用卡推薦 KAI ⼩小⿊黑

新⼿手學習程式的秘訣快狠準學得快才有成就感,才會想學針對某個特定領域,函式變強狠下⼼心打程式訓練熟練度

APP 桌⾯面應⽤用程式網⾴頁前端後端資料庫 API 開源 Github 爬蟲 NPM
Google KEYWORD TO KNOW

前後端分離前端後端 API 資料庫 APP 桌⾯面應⽤用網⾴頁 JSON Function
外接API

Why Javascript ? 前端後端 APP 桌⾯面應⽤用網⾴頁 React.js Vue.js
Angular.js React Native Weex Ionic Electron.js Node.js Express 最⼤大套件庫 NPM

⼤大家這兩兩天的⽬目標是什什麼？熟悉javascript語法交到⼀一同學習的夥伴能夠從實作中得到成就感學習如何⾃自學熟悉js的邏輯，並有基礎可以學習將來來的前後端和app端了了解寫程式是如何開始，如何架構

環境建置資料處理理流程控制結合畫⾯面實作能⼒力力 Hello World 我的背包中獎檢查猜拳遊戲網⾴頁
簡易易購物⾞車車實作簡單html/css/js結合課程⼤大綱

Hello World #console

環境建置在瀏覽器中執⾏行行（夾帶在html中）在線上編譯器中執⾏行行（JSbin）⽤用Node.js執⾏行行執⾏行行javascript的三種⽅方式

環境建置安裝Node.js https://nodejs.org/zh-cn/download/ https://jeasonstudio.gitbooks.io/vscode-cn-doc/content/md/ %E7%BC%96%E8%BE%91%E5%99%A8/%E5%AE%89%E8%A3%85.html 安裝VScode 開啟整合式終端機重新啟動電腦

成立資料夾，並在vscode中開啟新增檔案 XX.js 打上console.log(“hello world”) 存檔(command+s/ctrl+s) 在終端機上打上node XX.js. (打到⼀一半的檔名，可以按tab會幫你打完剩下的) Hello
World 專案執⾏行行步驟跑出hello world在終端機中就成功了了！！！恭喜你執⾏行行第⼀一隻JS檔！！！

速成JS語法我不害怕曾經練過⼀一萬種踢法的⼈人，但我害怕⼀一種踢法練過⼀一萬次的⼈人 -李⼩小龍 #15個必背熟悉語法 #第⼀一個專案 #第⼆二個專案

我的背包 #第⼀一個專案 #command #變數教學 #矩陣教學 #物件教學 #時間教學

Let’s GO 下載上課程式碼： https://github.com/neversaynever0502/javascript_tutorial_in_5_project/blob/master/ L1%20%E6%88%91%E7%9A%84%E8%83%8C%E5%8C%85/bag-practice.js

中獎檢查 #第⼆二個專案 #控制判斷(if/else switch) #隨機 #迴圈 #定時 #函式教學

Let’s GO 下載上課程式碼： https://github.com/neversaynever0502/javascript_tutorial_in_5_project/blob/master/ L2%20%E4%B8%AD%E7%8D%8E%E6%AA%A2%E6%9F%A5/check-practice.js

HTML/CSS+JS 恭喜！最難的過去囉！

HTML: 骨架 CSS: 衣服 Javascript: 動作 Bootstrap: 假兩兩件的衣服 React.js: 光速俠的動作
api: 神經接⼝口 Node.js: 神經元 Mongodb/ﬁrebase: ⼈人腦記憶庫觀念念建立

環境建置在瀏覽器中執⾏行行（夾帶在html中）在線上編譯器中執⾏行行（JSbin）⽤用Node.js執⾏行行執⾏行行javascript的三種⽅方式

HTML配置 <html> <head> </head> <body> </body> </html> 放入設定網⾴頁內容

如何開啟HTML檔

BUTTON ONCLICK INPUT H1 P A HREF IMG SRC ….
增加元件 Tip:犋胼಑Ӿ෈=> ࣁ<head>膏</head>Ӿے獈 <meta charset="utf-8"> DIV

HTML/CSS <head> <style type="text/css"> div { font-size: 10px; color:
#FFFFFF; } </style> </head> 法⼀一：將css放在<style type=“text/css"> 和 </style>之間法⼆二： <head> <link rel="stylesheet" type="text/css" href="index.css" /> </head> 記得把此css檔放在同個資料夾下 Class: . Id: # EX: HTML: <p id=“new”></p> CSS: #new{ Font-size:50px; } 法三： <p style=“font-size:50px”></p> 直接在元素夾帶style

HTML/JS 如何溝通︖ 法⼀一：將JS放在<script> 和 </script>之間，放在body的底部法⼆二：將<script src=“myscripts.js"></script>放在body的底部記得把此JS檔放在同個資料夾下

在瀏覽器中如何看JS的console.log Console 檢查 MAC: command+shift+I WINDOWS: ctrl+shift+I

HTML DOM Method教學

document.getElementById(“XXXX”) 讀取節點值寫入節點值 .innerHTML .value <html> <body> <p id="demo"></p> <script>
document.getElementById("demo").innerHTML = "Hello World!"; </script> </body> </html> Hello World! 基本Method教學（抓出某個Id的元件）

Button 觸發 function

#第三個專案 #HTML+CSS+JS統整⼩小練習 <head> <meta charset="utf-8"> <style type="text/css"> button{ color:black; background-color:transparent;
border:none; padding: 15px 32px; border: 2px solid black; } button:hover{ color:white; background-color: black; border:none; padding: 15px 32px; } div{ text-align: center; } body{ background-image:url("http://photo.kids21.cn/tpzk/201305/W020130506586817535301.jpg"); background-size:cover; } </style> </head>

#第三個專案 #HTML+CSS+JS統整⼩小練習 <body> <br> <div> <br><br> <img src="http://www.fotor.com/images2/features/photo_eﬀects/e_bw.jpg" alt="Mountain View"
style="width:304px;height:228px;"> <br> <h2>Welcome to the game</h2> 輸入姓名<input id="name"></input><br><br> <button onclick="outPutName()">ClickMe</button> <h1 id="showName"></h1> </div> <script> function outPutName(){ let inputName = document.getElementById('name').value; let randomNumber = Math.random() if(randomNumber<0.5){ document.getElementById("showName").innerHTML = inputName + "是⼤大正妹！"; }else{ document.getElementById("showName").innerHTML = inputName + “不是⼤大正妹！”; } } </script> </body>

恭喜你將HTML/css/js結合起來來了了

猜拳遊戲網⾴頁版 #第四個專案 #HTML #CSS #HTML DOM #Browser對象

思考流程：能讓玩家出不同拳讓電腦也能隨機出拳來來判斷誰贏誰輸將兩兩邊出的拳顯⽰示在網⾴頁上將結果顯⽰示在網⾴頁上來來累加計算玩家和電腦贏的次數來來判斷誰先贏到10次來來顯⽰示誰是贏家 9.
將變數歸零， 1. 建立三個按鈕， 2. 利利⽤用random⽅方法， 3. 利利⽤用innerHTML， 4. 利利⽤用if else， 5. 利利⽤用innerHTML， 6. 設定新變數， 7. 利利⽤用if， 8. 遊戲結束，利利⽤用alert()，當遊戲結束時。

Let’s GO 完整程式碼網址： https://github.com/neversaynever0502/javascript_tutorial_in_5_project/blob/master/ L4%20%E7%8C%9C%E6%8B%B3%E9%81%8A%E6%88%B2/index.html

辛苦了了！恭喜你完成了了猜拳遊戲網⾴頁版！你現在對JS已經完全不陌⽣生了了，甚⾄至是熟練了了！

簡易易購物⾞車車實作 #第五個專案

Let’s GO 完整程式碼網址： https://github.com/neversaynever0502/javascript_tutorial_in_5_project/blob/master/ L5%20%E7%B0%A1%E6%98%93%E8%B3%BC%E7%89%A9%E8%BB%8A%E5%AF %A6%E4%BD%9C/index.html

恭喜你完成了了！

Q&A ⼀一同討論&會後交流全部完整程式碼網址： https://github.com/neversaynever0502/javascript_tutorial_in_5_project

javascript課程-從0開始，用五個專案入手JS

javascript課程-從0開始，用五個專案入手JS

More Decks by Kai

Other Decks in Education

Featured

Transcript