Javascript新手筆記

Debug

用console.log把偵錯訊息顯示在主控台上，在瀏覽器chrome和firefox上只要按下F12，就可以在裡面找到主控台選項，網頁運行時的log訊息可以在這裡觀察。

接下來看看console.log可以將資料用哪些方式顯示在主控台：

1. 布林值(true or false)

用console.log()印大於小於之類的比較算式，就會顯示布林值。

var x = 123;

console.log(x > 2);

顯示結果：

true

2. 變數

var x = 123;

console.log(x);

顯示結果：

123

let 可以宣告只能在目前區塊、階段或表達式中作用的變數。而 var 則是定義了一個全域變數，或是在整個 function 而不管該區塊範圍。

function varTest() {
  var x = 1;
  {
    var x = 2;  // 這裡的 x 與 function 區塊內部的 x 是一樣的，因此會影響 function 區塊內所有的 x
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

function letTest() {
  let x = 1; 
  {
    let x = 2;  // 這裡的 x 與 function 區塊內部的 x 是不同的，只會作用在這層 block 區塊中
    console.log(x);  // 2
  }
  console.log(x);  // 1
}
 

3. 字串

var x = "123";

console.log(x);

console.log("456");

顯示結果：

123

456

4. 字串+變數

方法一：使用逗號(,)，實際上會顯示字串、半型空格和變數。

var x = "123";

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

顯示結果：

x = 123

方法二：使用加號(+)，實際上會顯示字串和變數，這之中沒有空格。

var x = "123";

console.log("x = "+x);

顯示結果：

x = 123

以上兩種方式除了印出字串+變數外，也可以連續印出變數。

注意！使用加號要非常注意，若是將字串和變數相加的話，就會自動轉換型別成全部都字串。

var x = "123";

var y = 456;

console.log(x+y);

因為型別不同，自動轉型成字串，結果是"123456"，而不是將兩個數字相加的結果579。

方法三：使用反引號(``)和${}，可以將變數包在整句字串內。

var x = "123";

console.log(`x = ${x}`);

顯示結果：

x = 123

5. 數字

直接在console.log上使用數字，就能印出數字

console.log(123)

顯示結果：

123

超連結使用POST方法傳遞資料

<form id="form1" action="你要傳送的目的地網頁.html" method="post">

    <a href="javascript:;" onclick="document.getElementById('form1').submit();">超連結要顯示的文字</a>

    <input type="hidden" name="mess" value=要傳送的內容>/>

</form>

要傳多少參數就加多少個input，把它hidden隱藏起來。getElementById內的參數用form的id。

Reference

函數

一般函數寫法

function myFunction() {

  alert('hello');

}

函數可以不要名字，叫匿名函數

function() {

  alert('hello');

}

匿名函數可以直接指定給事件

myButton.onclick = function() {

  alert('hello');

}

匿名函數可以直接指定給多個變數

var myGreeting = function() {

  alert('hello');

}

var abc = function() {

  alert('hello');

}

然後函數可以被這個變數這樣引用

myGreeting();

abc();

箭頭函數

這真是狗屁，什麼鬼東西，只有縮減程式碼大小可以說服我用這麼怪的東西。

var elements = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

// 這段函式會輸出[8, 6, 7, 9]這個陣列
elements.map(function(element) { 
  return element.length; 
}); 

// 上方這種一般的函式，可以被改寫成下方的箭頭函式
elements.map((element) => {
  return element.length;
}); // [8, 6, 7, 9]

// 如果輸入的參數只有一個，我們可以移除掉外面的括號
elements.map(element => {
  return element.length;
}); // [8, 6, 7, 9]

// 當箭頭函式裡的內容只有'return'的時候，我們可以拿掉return和外面的大括號
elements.map(element => element.length); // [8, 6, 7, 9]

// 在這個範例中，因為我們只需要length這個屬性，所以也可以使用解構賦值：
// 下方的'length'對應到我們想取得的屬性，而'lengthFooBArX'只是很普通的變數名稱,
// 可以被任意修改成你想要的名字
elements.map(({ length: lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9]

// 上面這種解構賦值之後的參數也可以被改寫為下面這樣。但要注意的是，在這個範例中，
// 我們不是要指定'length'這個值給一個虛構的屬性，而是這個變數的名稱'length'本身就是
// 用來當成我們想從物件上取得的屬性
elements.map(({ length }) => length); // [8, 6, 7, 9]

REF

JavaScript - call，apply，bind

https://eyesofkids.gitbooks.io/javascript-start-from-es6/content/part3/var_const_naming.html?q=

https://ithelp.ithome.com.tw/users/20040221/articles?page=3

https://ithelp.ithome.com.tw/users/20120114/ironman/2307