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

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

Kai
July 13, 2018

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

上課用投影片

Kai

July 13, 2018
Tweet

More Decks by Kai

Other Decks in Education

Transcript

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

    Angular.js React Native Weex Ionic Electron.js Node.js Express 最⼤大套件庫 NPM
  2. HTML: 骨架 CSS: 衣服 Javascript: 動作 Bootstrap: 假兩兩件的衣服 React.js: 光速俠的動作

    api: 神經接⼝口 Node.js: 神經元 Mongodb/firebase: ⼈人腦記憶庫 觀念念建立
  3. BUTTON ONCLICK INPUT H1 P A HREF IMG SRC ….

    增加元件 Tip:犋胼಑Ӿ෈=> ࣁ<head>膏</head>Ӿے獈 <meta charset="utf-8"> DIV
  4. 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
  5. 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的元件)
  6. #第三個專案 #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>
  7. #第三個專案 #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>
  8. 思考流程: 能讓玩家出不同拳 讓電腦也能隨機出拳 來來判斷誰贏誰輸 將兩兩邊出的拳顯⽰示在網⾴頁上 將結果顯⽰示在網⾴頁上 來來累加計算玩家和電腦贏的次數 來來判斷誰先贏到10次 來來顯⽰示誰是贏家 9.

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