什麼是 JavaScript？

JavaScript 是個跨平台、物件導向(OOP)、函式導向(FP)、輕小型的腳本語言。
他有著半編譯的特性，以及獨特的執行模式，因其的自由度極高，進而延伸出了各種不同的相關技術練，像是撇除最基礎的網頁特效互動操作外，有著像後端與伺服器的Node.js，特化網頁前端操作的框架如React.js以及Angular等等，而本次課程所使用的編輯器VS Code所使用的Electron，而對於手機應用程式而言，除了較舊的jQuery UI所設計的簡易手機應用外，現在也有了原生開發類型的React Native，以及優化Web View處理器的其他架構等等，可說是一個涵蓋量最大的程式語言．

當 HTML 建立了網站的架構，CSS 完善了頁面得樣式之後，就該輪到 JavaScirpt 來添加互動了，基本上在網頁設計中，關於 UI 的複雜操作與資料的串接均離不開 JavaScript，即使在現代的 HTML 與 CSS 的交互協做之下，任何複雜的頁面都得以設計，但始終均僅停留在「畫面」這個概念上，因此若希望網站本身能有真正的功能的話，學習 JavaScript 確實是一條無可厚非的道路。

註解你的 JavaScirpt Code

雖然大部分的人比較不在意註解這件事情，但實際上註解就跟你在程式中的筆記一樣，它可以幫助下一次看到程式時，可以更加明確的知道自己之前做了什麼，並且好的註解在協同作業時，也可以讓其他的開發者有更直觀的參考點．

// 以下宣告變數並且給值
var courseName = '深入淺出 JavaScript' // 課程名稱

/* 
const courseInstructor ='IFFY'
console.log(courseInstructor)
*/


// 單行註解

/* 多行
    註解 */

顯示你的 JavaScirpt Code

在 JavaScript 的設計當中，我們很常使用到 console.log 來對資料進行輸出展示，而除了 console.log 外，也有像是直接在網頁中輸入文字的 write()，以及彈出視窗 alert() 等等，而該使用何種方式來進行程式輸出展示，其實都取決於開發時的作業需求，不過因為 console.log 在程式輸出上，是使用網頁的開發者工具，因此不太會遭遇如 write() 當頁面過長時的找尋問題，以及 alert() 將會導致其餘頁面無法互動的問題，並且可以將開發環境與 DOM 進行分割，以利開發者更好找到問題的所在．

// 在網頁中直接寫入
document.write('標題')

// 在網頁中觸發彈出視窗(注意：彈出視窗將會將網站其他操作完全暫停)
alert('我是被觸發的彈出視窗')

// 在網站開發工具內被顯示
console.log('Hello Console');

定義一個 JavaScript 變數

// 賦值操作
var name = 'IFFY';

// 更改變數內容
name = '你的名字'

變數設計是一個既簡單又複雜的東西，說他簡單是因為他的入手難易度非常低，而且大部分的情況下並不會過於複雜，但也因為他是一切的基本，所以關於他的延展可說是屬之不盡，下面將會列舉大部分會用到的操作與關鍵字，同學們可以當作是一個參考來看就好，不需要去記憶，只要在需要時來查看就好．

JavaScript 許多基本語法借鑒自 Java，C或是C++，但亦受 Awk、Perl 和 Python 的影響。

在 JavaScript 中，變數必須使用字母（letter）、下底線（ _）、錢號（$）作為開頭；後面的字員組成可以包含數字（0-9）。JavaScript 是區分大小寫（case secsitive）的，大寫字母（'A' ~ 'Z'）和小寫字母（'a' ~ 'z'）皆可使用且不相等。

雖然我們有個高彈性的命名規則，但在實務上開發者均習慣使用小駝峰來命名變數
如：const titleName = 'JavaScript 課程'

變數可建立的型別

六種基本型別(純值):undefined、null、boolean、number、string、symbol(ES6 新規範，幾乎沒看到有人使用)

基本語法操作

基本型別操作練習

下方範例可以將 log 出來的值進行 +1 的處理，會因為 JavaScript 自動型別轉換的特性獲得結果(沒有實質定義的類別)，也可以將變數前面加上 !，已將其轉換成布林

var iAmUndefined;
var iAmString = '我是一個字串';
var iAmNumber = 10;
var iAmBoolean = true;
var iAmNull = null;

console.log(iAmUndefined);
console.log(iAmString);
console.log(iAmNumber);
console.log(iAmBoolean);
console.log(iAmNull);

型別確認操作 typeof

他是一個讓我們很好判斷變數型態的一個操作，但要注意的是他對 null 的判斷會以 object 為回傳

var iAmUndefined;
var iAmString = '我是一個字串';
var iAmNumber = 10;
var iAmBoolean = true;
var iAmNull = null;
var iAmFUnction = function () {};

console.log(typeof iAmUndefined); //undefined
console.log(typeof iAmString); // string
console.log(typeof iAmNumber); // number
console.log(typeof iAmBoolean);	//boolean
console.log(typeof iAmNull); // object
console.log(typeof iAmFUnction); // function

物件型別操作練習(函式宣告)

函式是構成javascript的基本要素之一。一個函式本身就是一段JavaScript程序—包含用於執行某一個任務或計算的語法。要呼叫某一個函式之前，你必需先在這個函式欲執行的scope中定義它。

一個函式的定義由一系列的函式關鍵詞組成, 依次為：

• 函式的名稱。
• 包圍在括號()中，並由逗號區隔(,)的一個函式參數列表。
• 包圍在大括號{}中，用於定義函式功能的一些JavaScript語句。

宣告一個簡單的函數

// 宣告函式名稱為 addNumber
// 在 () 設定兩個(x 與 y)可供該函式操作的參數，此處可任意改變數量與變更名稱
// 在大括號{}中撰寫該函式的功能，此處將會回傳兩個參數的相加
function addNumber (x, y) {
  return x + y;
};

console.log(addNumber(1, 2)); // 3

讓函式複雜化並加上判斷式

function numberFunction(x, y) {
  if (x === 0) {
    return 'x 不可以是 0';
  }
  return x + y / 2 + 3;
}

console.log(numberFunction(0, 5)); // x 不可以是 0
console.log(numberFunction(2, 5)); // 7.5

將函式串連起來進行操作

// 執行順序將由內向外 addNumber -> numberFunction -> console.log
console.log(numberFunction(0, addNumber(3, 4))); //x 不可以是 0
console.log(numberFunction(2, addNumber(3, 4))); //8.5

百用不膩 BMI 範例

function getBMI(weight, height) {
  var bmi = weight / ((height / 100) * (height / 100));
  return bmi;
}

console.log(getBMI(87, 175));

基礎練習項目

  // 1、賦予變數資料使用 "=" ，同時因為 JavaScript 特性，將會自動轉為被賦予型態
  var str = 'hello';

  // 2、算式運算符包括 +(加法) -(減法) *(乘法) /(除法) %(取餘數)
  var number = 10;
  // console.log(number + 3);
  // console.log(number - 3);
  // console.log(number * 3);
  // console.log(number / 3);
  // console.log(number % 3);

  // 3、對變數進行單獨加法操作
  var i = 3;
  // i = i + 1;
  // i++;
  // ++i;
  // alert(i);

  // 4、對變數進行單獨減法操作
  var i = 3;
  // i--;
  // --i;
  // alert(i);

  // 5、將運算式放置於前後的差別，在於賦值的的順序問題
  // console.log(i--);
  // console.log(--i);

  // <額外提示>先賦予 a=10,再執行加法操作 => b=16，最後才是a=11 ，此處可更改 ++ 前後改變結果
  var a = 10;
  var b = a++ + 6;
  // console.log(a);
  // console.log(b);

  // 6、常用關系運算符簡略 (< <= > >= == != ===)
  var num1 = 3;
  var num2 = 4;
  var str3 = '3';

  // <範例說明>相對等於範例 ==
  // if (num1 == num2) {
  // 	console.log("相等");
  // } else {
  // 	console.log("不相等");;
  // }

  // <改良寫法>改為條件 (三元) 運算子
  // num1 == num2 ? console.log("相等") : console.log("不相等")

  // <改良寫法>設計包覆函式
  var equal = function () {
    console.log('相等');
  };
  var notEqual = function () {
    console.log('不相等');
  };

  // num1 == str3 ? equal() : notEqual();

  // <範例說明>絕對等於範例 === ，此處判斷將判別型別

  // num1 === str3 ? equal() : notEqual()
  // num1 === str3++ ? equal() : notEqual()
  // num1 === --num2 ? equal() : notEqual()

  // <範例說明>不等於 !=

  // num1 != --num2 ? equal() : notEqual()

  // 7、常用邏輯運算式 並且(&&) 或者(||) 相反(!)

  var person = {
    name: 'Alex',
    age: '22',
    sex: 'man',
  };

  // person.age > 30 && person.sex == 'man' ? equal() : notEqual()

  // <範例說明>大於25 並且 小於三十
  // person.age > 25 && person.age < 30 ? equal() : notEqual()
  // <範例說明>大於25 或者 小於三十
  // person.age > 25 || person.age < 30 ? equal() : notEqual()

  // <範例說明> !將會反轉資料的布林值，同樣使用兩個將會再次反轉
  // console.log(!true);
  // console.log(!!true);
  // console.log(!!person);

  // <額外補充>藉由型別轉換實現簡易條件判斷
  var shopCart = [];
  // console.log(shopCart.length);
  // shopCart.length ? console.log('有內容') : console.log('無內容');

  // shopCart.push('apple')
  // console.log(shopCart.length);
  // shopCart.length ? console.log('有內容') : console.log('無內容');

短路求值(小技巧)

上方的操作有一個小技巧叫做短路求值，他是藉由 || 與 && 的回傳特性而實現的操作，簡單的說就是一個簡易的邏輯判斷式

let a = 1 && 2
let b = 0 && 2 && 3 // 0 等於是 false 將會直接回傳
let c = true && false
let d = true || 'test'
let e = false || 'test'

console.log(a); // 2
console.log(b); // 0
console.log(c); // false
console.log(d); // true
console.log(e); // test