前言

程式語言是什麼？

程式是什麼？

電腦是什麼？

...說實在我學這個要幹什麼啊？

在舊的時代裡

你寫的程式語言，其實電腦根本看不懂。

說到底是程式語言，是給程式看得。

不是給機器看得。

程式語言

經過「編譯器」/「直譯器」處理

電腦看得懂的語言

電腦：OK 我來幫你忙

JavaScript （在網頁上的狀況）

經過「直譯器」處理

瀏覽器：好啦（埋頭苦幹）

現在這個時代的程式語言比較複雜，

但是其實就這三種性質需要討論：語法、邏輯、環境

 

 

說說現在有較多人在用的程式語言：

C/C++、C#、JAVA、JavaScript、Python 2/3、Swift、Golang、Ruby、PHP...好多阿...（頭痛）

而且還有方法可以不用語言就能做程式了...頭好痛 RRRRRR

就算你不懂背後原理如何運作、這個語言的特色是什麼，

只要造著別人的 code 邊看邊學，

多多少少能夠做出個 60% 像的作品，

多重複幾次，你就會懂得使用這個語言了。（第一周）

今日正課 Chapter 1

讓我們回到上一周的進度...是什麼來著？

首先安裝 Node.js & Sublime Text 3

希望網路順暢...（祈禱）

console.log("Hello World!!");

var x = 3;

var y = 7;

console.log(x+y);

variable

數值 (Number)、字串 (String)、布林 (Boolean)、陣列 (Array)、物件 (Object)

數值 (Number)

var x = 3;

　　　　字串 (String)

　　　　var x = "Hello World!";

　　　　　　　　　布林 (Boolean)

　　　　　　　　　var x = True;

　　　　　　　　　　　　　陣列 (Array)

　　　　　　　　　　　　　var x = [1,2,4,6,11,19];

　　　　　　　　　　　　　　　　　　物件 (Object)

　　　　　　　　　　　　　　　　　　var x.name = "X";

那 console.log(); 是什麼鬼東西呢？

這東西我們要最後講，他是一個叫做 class 的東西，不會這個的話我們遊戲無從做起。

總之現在就記得他能夠拿來印東西在程式上。

console.log("Hello World!");

不過在那之前來講一下 () . ; "" {} 這些東西

() 小括號 可以說是 JS 的挖空格，就像是你們的習題本一樣，將需要的資訊塞入後，會產生不同的意思（效果），塞錯東西會產生錯誤。

. 點 可以說是 JS 的「的」，用來叫誰底下的什麼什麼東西。

; 分號 可以說是 JS 句號，程式用 ; 來判斷

" " 雙引號 ' ' 單引號 就跟「」是一樣的東西，用來表示一個獨立的句子，在 JS 裡就是字串 (String)。

{} 大括號 是最特別的東西，他框住的地方代表的是一整個獨立的段落（或是章節），在不同地方有不同用途。

之後會不停地提到，不用特別記住，用久就習慣了。

軟體安裝 Node.js

請安裝 v4.4.7 的 LTS 版本

安裝好了之後，

Windows 用戶請點左下角的 Windows 圖案來打開「開始工具列」，
在「所有程式」（Win8 or Win10 可能叫做「應用程式」）
裡面找到 Node.js 的資料夾，點選黑色的 Node.js Command Prompt
（建議對其按右鍵選擇「傳送到」「桌面(建立捷徑)」）。

Mac 用戶請找到你的 Terminal（終端機），由於我手上沒有 Mac，
所以我直接提供網址：http://www.macbookone.com/2010/06/mac-terminal.html​。
簡單來說，你的 Node.js 已經裝進去你的 Terminal 裡面了。

 

某種程度上，Windows 上的 Node.js Command Prompt 也是類似 Terminal 終端機的東西，指令也很類似。

 

軟體安裝 Sublime Text

東西安裝好了沒阿～

安裝好了之後，

Windows 用戶請
點左下角的 Windows 圖案來打開「開始工具列」，
並在「所有程式」裡面找到 Sublime Text 3（不是資料夾喔。
同樣，建議對其按右鍵選擇「傳送到」「桌面(建立捷徑)」）；
如果沒有的話，建議再安裝一次，然後不要選擇 portable 版本的。
（這堂課為了方便，老師選擇用 portable 版本避免了一個步驟，但是還是建議用安裝的之後比較好找。）

Mac 用戶請
將滑鼠往下看看工具列有沒有 Sublime Text 可以用，沒有的話再用找 Terminal 的方式搜尋 Sublime Text：

 

下一頁有安裝要按哪個的例圖

Mac 選 OS X，Windows 就選 Windows，

請無視那個 64 bit。

如何執行程式呢？

 

直接打開 Sublime Text，

點選上面的 File -> New File 來開啟新的文件，

然後直接使用鍵盤 Ctrl + s（Mac 用戶則是 command + s）

來修改檔名為 week2.js 並儲存在你想要的地方。

 

在課堂上的時候，我已經為大家解決了改檔名的問題。
若之後一樣出現改檔名為 xxxxx.js 卻沒有跳出警告，且圖示一樣是文字文件的情形，請回想課堂的解決方法或寄信到 js_summerlesson@googlegroups.com 給我。

現在使用我們的終端機，

Windows 用戶是黑色的 Node.js Command Prompt；

Mac 用戶就是 Terminal。

 

現在我使用 Node.js Command Prompt 作為範例，

基本上只是背景顏色看起來有差而已，指令大部分都一樣。

說明在下一張投影片 ↓

現在位置

指令

空格，很重要

Terminal 終端機教學：

1. 在尚未執行程式的時候，每輸入一次指令結束後，都會產生新的一行在最前面顯示現在你的位置在哪。
2. ls（小寫的 LS，不是 1s。）可以顯示目前所在位置有哪些檔案。
   Windows 用戶有可能是使用 dir 而不是 ls。
3. cd 可以移動位置到其他資料夾，cd.. 或是 cd .. 可以移動到上一層，cd 該層的資料夾就會移動到哪，也可以使用 cd 絕對位置來移動。
   絕對位置是課堂上使用的方法，
   Windows 的話是：
   對文件右鍵 -> 內容 -> 一般 -> 將位置那一串資料複製下來，
   然後直接在 Terminal 上按下右鍵貼上（Ctrl + V 沒有用）。
   Mac 的話請見：http://blog.taiker.org/2010/06/maccopy-full-path.html​
   ，可以用滑鼠中鍵（即按滾輪，不是滾滾輪）來貼上。
4. 目標是移動到 week2.js 的資料夾，加油。下一頁有小撇步，讓大家加速。

Terminal 終端機小撇步：

1. 按下方向鍵 ↑ 可以找回之前打過的指令。
2. 鍵盤上的 tab 會幫你自動尋找並完成符合目前所打內容的資料，
   例如打 cd  的時候，每按一次 tab 他都會照順序顯示各種資料夾名稱，
   在有 Desktop 資料夾的那一層打 cd d 的時候按下 tab 他也會自動補上 Desktop（如果那裡有不只一個 d 開頭的資料夾結果就不一樣。）
3. 一次可以開很多個終端機使用。
4. 打錯指令他都會顯示錯誤訊息，學著看以後有幫助

如果你成功移動到了 week2.js 的資料夾：

恭喜。

指令打下 node week2，
就可以執行 week2.js 裡面的程式碼了。

今日正課 Chapter 2 

if(), while(), for(), function

由於這堂課的聽眾是剛要讀國中

我們直接寫寫看會發生什麼事情好了

var x = 3;

var y = 7;

if (x < y){

    console.log("x < y");

}

else if (x == y){

    console.log("x = y");

}

else

    console.log("x > y");

if

for (i = 1;i < 10;i++){

    console.log( "i = ", i);

}

for

var x = 1000;
var y = 53;
while( x % y != 0 ){
    if( x >= y )
        x = x % y;
    else{
        a = x;
        x = y;
        y = a;
    }
    console.log(x,y);
}

while

練習時間

做出個...九九乘法表吧？

然後，再做出個判斷是否為質數的程式。

練習時間

其實光這兩項對初學者來說一個小時就過去了

距離我們到達可以去學寫遊戲還有約 50% 的課程

function 函式

這對你們來說是新的觀念，容我解釋解釋

簡單來說，這是一個獨立的小程式。

function HelloHello() {

    console.log("Hello World!!");

}

function adder( a, b ){

    return a + b;

}

HelloHello();

console.log(adder(3, 7));

看起來好像沒什麼特別的，

但是搭上前面說的 if, for, while 之後呢？

function PrimeCheck ( a ){

//這邊放上你剛剛寫的檢查 a 是否為質數的程式

//如果是質數就 return True;

//否則 return False;

}

y = 100;
for ( i = 0; i <= y; i++ ) {

    if ( PrimeCheck(i) )

        console.log( i, "  " );

}

function likeLoop ( a ){

//function 還可以呼叫自己

    if ( a < 10 )

        console.log(a, "  ");

        a = a + 1;

       likeLoop(a);

}

likeLoop ( 0 );

這種直接或間接地呼叫自己的做法，

我們稱之為遞迴 (Recursion)，跟 for, while 迴圈 (Loop) 相似

 

然而這兩者的功能與效能不太一樣，

幾乎所有的 迴圈 可以由 遞迴 來實作，但反過來就不行。

看似好用，但是遞迴非常的浪費資源。

練習時間

用遞迴的方法實作 輾轉相除法。

如果這個做完了都還沒過十一點那就真的神了，

你們根本是天才。

今日正課 Extra 

陣列、object 與 class

然後結論是我們根本沒上到這邊，所以當作是下周課程預告

a = [1, 2, 3];

for(i = 0; i < 3; i++)

    console.log( a[i] );

//陣列的項次是從 0 開始的

//陣列有許多已經寫好的函式可用

//push, pop, shift, unshift, join, reverse, slice, sort...... 

 

a.push(4);

console.log( a );

a.reverse();

console.log( a );

 

回家作業 

請安裝 Unity3D，自己學著安裝吧！

另外，大家不是都有 FB 所以改用 Google Groups，快接受邀請

回家作業 

有事沒事試試看用今天學的東西寫點東西出來

推薦題目：

質因數分解程式

直角三角形邊長判斷/製造機

費伯納西數列（費式數列）產生器