[前端程式設計基礎]JavaScript基本語法

2017/3/5

1. 作業問題：
1. 請問有人知道為什麼在VS Code中，安裝擴充功能Settings Sync，執行"Sync: Download Settings"時，會出現"Error Logged In Console (Help menu > Toggle Developer Tools). You may open an issue using 'Sync : Open Issue' from advance setting command."的錯誤訊息嗎？
1. 進到個人目錄 把.vscode整個資料夾刪除試試看
2. nvm可同時安裝不同版本的Node，方便測試
3. 變更 Visual Studio 的色彩佈景主題與配色設定
1. 色彩佈景主題是 Visual Studio 2012 出現的功能，可以改變整個 Visual Studio 的配色。
2. 開啟 [工具] > [選項]，在左側點選 [環境]，選一個順眼的 [色彩佈景主題]。
   
4. 新增JS280-Lecture02-Examples
1. 新增檔案index.html、main.js
   
2. 寫html，在head中引用js
   
3. 設定檔seting.json，只能改右邊，左邊是預設值不能修改．
4. 可協助偵錯
   
5. 若少了一個雙引號，偵錯主控台會出現提示訊息．
   
   
5. 程式語言重要在於資料結構、函式
6. JavaScript整個是事件驅動的程式語言．有  ，可預先處理幾乎可以達到C#的速度
7. 下載Pokemon
1. http://pokemondb.net
2. 表格http://pokemondb.net/pokedex/bulbasaur
   
3. 若把上段表格貼在main.js上，無法執行．要換個js能夠解讀的格式．
   
4. 濾掉後的格式，文字加上雙引號，標題加冒號，有逗號的東西加上中括號，段落最後加逗點，外面加大括號．
   成為json的格式，為javascript的物件表示法．
   
5. 參考lanch.json的格式
   
1. 欄位也可以加雙引號，裡面是空白的．

6. 設定變數var pockemon
   
1. 中括號裡是陣列，可以放任何東西，但這樣效能不高．
2. 沒有雙引號的東西是文字
3. 大括號裡面的是物件
4. json的物件表示法
5. 單頁面應用程式 Single Page Applications
1. 單頁式的應用程式，明明只有一個網頁，但可以切換程式．由JavaScript來產生程式．
2. html只有一點點，其他用js、jQuery、CSS來寫．
   
3. 單頁式的網站架構是經由點選功能項目後，進行類似傳統網站錨點的功能，讓畫面移動到該功能處，但經由Javascript的包裝，也可用jQuery的 mousewheel插件模擬出滑鼠滾動的效果，目前的架構大多是一個誇張的頁首，以及一個聯絡我們的頁尾，靜態有「個人簡介」或是「關於我們」，動態的 則是一些「工作案例」、「產品」等，經由jQuery 的 Carousel 的插件，可以進行左右的瀏覽。
4. 參考http://ngarmchannel.blogspot.tw/2012/02/locationhash.html
7. 以後先下載模組，打包成一個bundle裏頭，以後就不用在head中寫一大堆東西．Node.js的功能．別人無法打開偷看．
8. 
   



8. 基礎語法
1. 將js加到網頁中

   <script type="text/javascript" src="路徑與檔名"></script>

2. 放在</body> 之前
3. 一段程式碼等於一個動作，結尾請用分號

var number = 5;

宣告一個變數叫做number

指定值為5

分號代表指令結束

4. JS檔中不是指令，用於說明的部分稱為註解

HTML：<!-- 多行註解 →

CSS：/* 多行註解 */

Javascript：/* 多行 */ 與 // 單行

5. 註解也有格式，免得將來看不懂．有API生成器，可以把註解抓出來生成文件．

9. 資料的使用 (變數的宣告與呼叫)
1. 什麼是宣告變數?
1. var name = "Stephen Curry";
   
2. 如何使用變數
1. 在需要的地方寫下 變數名稱
2. 指定變數的值，使用等號
   
3. 瀏覽器主控台，列印出名字

console.log(name);
寫下name 就是人稱的呼叫name

4. 網頁中列印出名字

document.write(name);

5. 進階練習，請心裡想一個數字，把心裡的數字 +1 放回你的心裡

var number= 1;

number = number + 1;

10. 定義函數
1. 函數是物件
2. function 其實就是一大堆有關連的程式碼
3. 可以想成可怕的數學函數，數學函數算完會給我一個資料
   
4. 也可以想成一個需要執行的動作，僅僅執行 但不會給我什麼資料
   
5. 呼叫函數，寫下函數名稱 並給定它需要的輸入

moveForward(100);

6. 執行很多動作，就是呼叫各種各樣的function
7. 寫函式，設定妙蛙種子的物件，裡面有資料
1. 
   
2. 執行後
   
3. 設定鍵盤快速鍵
   
4. 寫函式，設定妙蛙種子可以攻擊小火龍
   http://pokemondb.net/pokedex/charmander
   
5. 重複寫很麻煩，故用function定義類別．寫資料的模板（樣板），pokemon是個類別．
   改寫成this(這個傢伙的)

var pokemon(nationalNo, hp, type, species, height, weight, abilities, local, japanese) = {

    this.nationalNo: 1,

    this.hp: hp,

    this.type: type,

    this.species: species,

    this.height: height,

    this.weight: weight,

    this.abilities: abilities,

    this.local:local,

    this.japanese: japanese,

    this.attack: function(other) {

        other.HP -= 20;

    };

};

6. 妙蛙種子改寫成

var Fushigidane = new Pokemon(

    1,

    1200

    ,

    ["GRASS", "POISON"],

    "Seed Pokémon",

    0.71,

    6.9,

    "Overgrow",

    [1, 226, 231, 80],

    "Fushigidane"

);

7. 輸入資料時會提示
   
8. 小火龍，

var Hitokage = new Pokemon(

    4,

    2000,

    ["FIRE"],

    "Lizard Pokémon",

    0.61,

    8.5,

    ["Blaze"],

    [4, 229, 234, 83],

    "Hitokage"

);

9. 讓兩者互相攻擊
   

console.log("妙蛙種子hp:" + Fushigidane.hp);

console.log("小火龍hp:" + Hitokage.hp);

console.log("小火龍發動攻擊");

Hitokage.attack(Fushigidane);

console.log("妙蛙種子hp:" + Fushigidane.hp);

console.log("小火龍hp:" + Hitokage.hp);

console.log("妙蛙種子發動攻擊");

Fushigidane.attack(Hitokage);

console.log("妙蛙種子hp:" + Fushigidane.hp);

console.log("小火龍hp:" + Hitokage.hp);

10. 執行畫面
    
11. 如何秀在網頁上，安裝套件管理器 sudo npm install –g bower
    
12. 上傳git https://github.com/lommings/JS280-Lecture02-Examples.git
    
13. 下載圖片，點畫面，就會扣血
10. 切到檔案路徑，安裝jquery，會產生bower_components資料夾   
1. $bower install jquery
   
2. .gitinore中寫bower_components/，以後不會上傳．
3. bower_components中有jquery，引用<script src="../JS280-Lecture02-Examples/bower_components/jquery/dist/jquery.js"></script>
   
4. html寫
5. 瀏覽器結果