原始型別、物件型別

JavaScript 主要分為 原始型別、物件型別 兩大類。

原始型別

• Boolean 布林
• Null 空值
• Undefined 未定義
• Number 數值
• String 字串

ES6

• Bight 整體數值
• Symbol

ASI (Automatic Semicolon Insertion)

JavaScript 基本上在語句結尾時都要加上 ;(分號)，當語句沒有加入分號時，就會受到 ASI 的規則影響

ASI規則：當語法併到上一行的時候會出現錯誤時，它會自動加上 ;(分號)。

1
2
3
4
5

function callName(){
  return 
  '叫我小明';
}
console.log(callName()); // undefined

陳述式 (Statement)

陳述式一定會做一些事情，但陳述式不會產生(回傳)數值。所以不能被放在 JS 內預期會產生數值的地方。

什麼意思是不能被放在 JS 內預期會產生數值的地方呢？

1
2
3
4
5

var a = if(){
    var b = 5
    console.log(b)
}
// 回傳 Uncaught SyntaxError: Unexpected token 'if'

因為 if 是陳述式，所以它不會回傳值。

執行緒

JavaScript 是一個單執行緒的程式，

單執行緒是沒有辦法把任務一次全部執行，如上圖所示，它必須先完成 ‘吃早餐’ 接著 ‘打給漂亮阿姨’ 再來才是 ‘洗碗’。

提升(hoisting)

在 JavaScript 當中 var 會有提升的效果出現，也可以說它是在創造階段就先把所有變數先宣告出來，接著再一一的賦予值進去。 舉例如下

1
2
3
4
5
6
7
8
9

var name = 'Cheeto';

//可以拆解成 ↓


// 創造階段
var name;
// 執行階段
name = 'Cheeto';

JavaScript 作用域

JavaScript是採用語法作用域，屬於靜態作用域的，靜態作用域是變數的作用域在語法解析的時候，就已經確定它的作用域了，確定完就無法再改變。

如果作用域裡找不到變數的時候，就會向外查找，找不到的時候就會報錯(not define)。

JavaScript： var、( let , const ) 差異

前言

在ES6之前，JavaScript要宣告變數的時候，會使用到 var 宣告變數，
但是到了ES6之後，建議盡量都用 ( let , const ) 來做宣告，不要再用 var 了。

因為 var 有一個缺點，那就是它很容易汙染到全域變數。 如下

1
2
3
4
5

var a = 15;

console.log(a);  // 15
//用 var 的話會讓 a 直接跑到 window 下面變成全域變數
console.log(window.a);  // 15

CSS：base、新增子模組

CSS：base(基底)

在做一個專案之前，可以觀察設計稿當中究竟有哪些共通的元素，那就可以在開發之前就建立一個基本的樣式，例如說文字的顏色，文字的間距等等…
那在做一個專案之前是不是能夠把這些共通的元素先設定起來？

base 就是這樣的一個概念，base就是建立一個網站的基本樣式，如果今天你的網站標題都是 #555 的顏色，那就可以先把h1~h5都設定#555的字體顏色。

雖然說base這樣的基本樣式沒辦法所有的元素都共用，但只要能滿足80%以上就能夠讓程式碼更加的簡潔了！

變數 Variable

在 scss 裡面可以使用到變數，在你時常會撰寫到的程式碼上面，可以使用到變數的功能。

變數的語法是這樣： $變數名稱: 值; (如下)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

//變數設定語法
$title-color: #666;
$content-color: #888;

//套用變數
.header{
  h2{ 
    color: $title-color;  
  }
  p{  
    color: $content-color;  
  }
}

//編譯結果
.header h2{  
  color: #666; 
}
.header p{  
  color: #888;  
}

CSS：checked 互動技巧

CSS的:checked 表單狀態選取器，這個選取器是能夠選取 checkbox 被勾選的狀態，而這個技巧能夠幫助我們在不需要用到程式的情況之下，也能夠在網頁上做到互動的效果唷！

下面就讓我們試試看吧！！

Demo

首先我們可以先做出像這樣的圖片