Pro Yearly is on sale from $80 to $50! »

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

20f30bdcf25da2ec997c358377d31634?s=47 Kai
July 13, 2018

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

上課用投影片

20f30bdcf25da2ec997c358377d31634?s=128

Kai

July 13, 2018
Tweet

Transcript

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

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

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

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

    Google KEYWORD TO KNOW
  5. 前後端分離 前端 後端 API 資料庫 APP 桌⾯面應⽤用 網⾴頁 JSON Function

    外接API
  6. Why Javascript ? 前端 後端 APP 桌⾯面應⽤用 網⾴頁 React.js Vue.js

    Angular.js React Native Weex Ionic Electron.js Node.js Express 最⼤大套件庫 NPM
  7. ⼤大家這兩兩天的⽬目標是什什麼? 熟悉javascript語法 交到⼀一同學習的夥伴 能夠從實作中得到成就感 學習如何⾃自學 熟悉js的邏輯,並有基礎可以學習將來來的前後端和app端 了了解寫程式是如何開始,如何架構

  8. 環境建置 資料處理理 流程控制 結合畫⾯面 實作能⼒力力 Hello World 我的背包 中獎檢查 猜拳遊戲網⾴頁

    簡易易購物⾞車車實作 簡單html/css/js結合 課程⼤大綱
  9. Hello World #console

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

  11. 環境建置 安裝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 開啟整合式終端機 重新啟動電腦

  12. 成立資料夾,並在vscode中開啟 新增檔案 XX.js 打上console.log(“hello world”) 存檔(command+s/ctrl+s) 在終端機上打上node XX.js. (打到⼀一半的檔名,可以按tab會幫你打完剩下的) Hello

    World 專案執⾏行行步驟 跑出hello world在終端機中就成功了了!!!恭喜你執⾏行行第⼀一隻JS檔!!!
  13. 速成JS語法 我不害怕曾經練過⼀一萬種踢法的⼈人,但我害怕⼀一種踢法練過⼀一萬次的⼈人 -李⼩小龍 #15個必背熟悉語法 #第⼀一個專案 #第⼆二個專案

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

  15. 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

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

  17. 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

  18. HTML/CSS+JS 恭喜!最難的過去囉!

  19. HTML: 骨架 CSS: 衣服 Javascript: 動作 Bootstrap: 假兩兩件的衣服 React.js: 光速俠的動作

    api: 神經接⼝口 Node.js: 神經元 Mongodb/firebase: ⼈人腦記憶庫 觀念念建立
  20. 環境建置 在瀏覽器中執⾏行行(夾帶在html中) 在線上編譯器中執⾏行行(JSbin) ⽤用Node.js執⾏行行 執⾏行行javascript的三種⽅方式

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

  22. 如何開啟HTML檔

  23. BUTTON ONCLICK INPUT H1 P A HREF IMG SRC ….

    增加元件 Tip:犋胼಑Ӿ෈=> ࣁ<head>膏</head>Ӿے獈 <meta charset="utf-8"> DIV
  24. 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
  25. HTML/JS 如何溝通︖ 法⼀一: 將JS放在<script> 和 </script>之間,放在body的底部 法⼆二: 將<script src=“myscripts.js"></script>放在body的底部 記得把此JS檔放在同個資料夾下

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

  27. HTML DOM Method教學

  28. 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的元件)
  29. Button 觸發 function

  30. #第三個專案 #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>
  31. #第三個專案 #HTML+CSS+JS統整⼩小練習 <body> <br> <div> <br><br> <img src="http://www.fotor.com/images2/features/photo_effects/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>
  32. 恭喜你將HTML/css/js結合起來來了了

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

  34. 思考流程: 能讓玩家出不同拳 讓電腦也能隨機出拳 來來判斷誰贏誰輸 將兩兩邊出的拳顯⽰示在網⾴頁上 將結果顯⽰示在網⾴頁上 來來累加計算玩家和電腦贏的次數 來來判斷誰先贏到10次 來來顯⽰示誰是贏家 9.

    將變數歸零, 1. 建立三個按鈕, 2. 利利⽤用random⽅方法, 3. 利利⽤用innerHTML, 4. 利利⽤用if else, 5. 利利⽤用innerHTML, 6. 設定新變數, 7. 利利⽤用if, 8. 遊戲結束,利利⽤用alert(), 當遊戲結束時。
  35. 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

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

  37. 簡易易購物⾞車車實作 #第五個專案

  38. 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

  39. 恭喜你完成了了!

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