我跟 Java 真的沒關係：JavaScript

2017鐵人賽 javascript

huli

2016-12-16 08:46:25

21881 瀏覽

分享至

我跟 Java 真的沒關係：JavaScript

Java 跟 JavaScript 的關係大概就跟周潤發與周星馳的關係一樣。至於是什麼關係，這件事情只有三個人知道，一個是我、一個看過與龍共舞的人，還有一個我不能說。但如果你真的很想知道為什麼要叫 JavaScript，Google 大神永遠歡迎你。

在你學會 HTML 跟 CSS 以後，其實你就已經有能力打造出一個很漂亮的網頁。CSS Zen Garden就是這樣的一個地方，大家都用同一套 HTMl，只更改 CSS，然後你會很驚訝居然換一套 CSS 就差那麼多，感覺是截然不同的兩個網頁。

只是，缺點就是這些網頁都不會「動」，沒有辦法跟使用者互動。（其實你硬要也是可以啦，有些 CSS 可以達成互動的效果，但那個比較進階所以我們在這邊先不提）如果需要互動的話，你就必須在網頁上寫點小程式。那通常提及到在網頁上寫程式的話，就是在指我們今天的主角：JavaScript 了。

之前有講到 CSS 會把它切割成獨立的一個檔案，JavaScript 也會。會用script標籤來引入。

<html>
<head>
  <link rel="stylesheet" type="text/css" href="cool.css">
  <script src="my.js"></script>
</head>
<body>
...
</body>
</html>

我們先來做個簡單的小範例，目標是點下去某個按鈕之後會跳出一個彈出式視窗

document.addEventListener("DOMContentLoaded", function(event) { 
  var btn = document.querySelector('#btn');
  btn.addEventListener('click', function() {
    alert('click!');
  })
});

這個程式碼乍看之下很難懂，但其實也就只有兩個概念你要搞定，第一個叫做callback function，回呼函式。我們來舉一個例子好了。

假設你今天到餐廳點餐，點完餐結帳之後老闆給你一個那種會發光發出聲音的呼叫器，這樣你就可以知道餐點好了然後過來拿。或者是，你去外地搭公車，然後深怕坐過站，所以你會跟司機講說：「到那個召喚峽谷的時候麻煩叫我一下」。

上面兩種情形，你都是針對某一個「事件」有興趣，所以希望當那個事件發生的時候可以通知到你。

在 JavaScript 裡面，也是一樣的概念。剛剛講的目標「點下去某個按鈕之後會跳出一個彈出式視窗」，所以我們必須：

在程式裡面取得按鈕
監聽按鈕的 click 事件
跳出彈出式視窗

第一步的話變成程式碼就是：var btn = document.querySelector('#btn');。這個#btn就跟你用 CSS 選擇器的時候一樣，會指定到 id 是 btn 的這個元素。所以，btn 這個變數就等於是這個按鈕的元素了。（當然，你在 HTML 裡面必須真的要有這個元素）。

第二步的話，我們可以用btn.addEventListener，第一個參數是你想監聽的事件，第二個參數就是我們最重要的callback function，我們可以先把程式碼變複雜一點，看你會不會比較能夠理解。

var btn = document.querySelector('#btn');
btn.addEventListener('click', onClick);

function onClick () {
  alert('click!');
}

btn.addEventListener('click', onClick); 的意思就是：當按鈕被按下去的時候，呼叫onClick這個函式，應該很好懂對吧！那在 JavaScript 裡面，有一種函式沒有名字，叫做匿名函式；有一種函式可以吃，叫做韓式料理；有一種函式有四隻腳，叫做韓式炸雞。（實在是爛透了，辛苦你們了）

匿名函式就是先把名字拿掉，例如說本來的 onClick 名字拿掉以後變成這樣：

function () {
  alert('click!');
}

這樣子是不是就沒有名字了，然後你再把這一段移到原本btn.addEventListener('click', onClick)的onClick的位置：

var btn = document.querySelector('#btn');
btn.addEventListener('click', function() {
  alert('click!');
});

薑薑薑薑～就是這麼一回事，這樣子你一樣可以達成按下按鈕之後呼叫某個函式的的目的，只是你直接把函式寫出來給他，而不是另外新建一個然後用名字去指定，這個函式因為沒有名字，所以就叫匿名函式。然後因為它是發生某個事件之後才會被呼叫到的，所以也叫做callback function。

掰惹味，相傳匿名函式其實不是沒有名字，而只是忘記了自己的名字，真是可憐。咦？好像跟某個動畫很像，那我知道了，會不會匿名函式的真名其實叫做：塔矢亮函式。（我開玩笑的）

（其實我不是很確定上面這個 listener 的模式能不能被叫做callbak function，但我們就暫時理解成這樣好了，還盼望其他大大指正。）

既然這一段你懂了之後，我們再來看一次最初的範例：

document.addEventListener("DOMContentLoaded", function(event) { 
  var btn = document.querySelector('#btn');
  btn.addEventListener('click', function() {
    alert('click!');
  })
});

你可以發現這就只是把剛剛的招數重複運用兩次而已，我先聽DOMContentLoaded，這個事件觸發之後做事，做什麼事呢？就是我們剛剛上面寫的，幫按鈕加上click事件。會需要在最外層包上DOMContentLoaded是因為如果沒有這樣做，你會抓不到按鈕。因為在 JavaScript 剛執行的時候，網頁的這些元素根本還沒有被載入，所以你哪來的 button 可以操控？

因此，要等到DOMContentLoaded之後，你才能利用 JavaScript 去取得那些元素。

總之呢，最後我們終於成功達成了這個小小的目標。接下來我們再看第二個範例，希望可以有一個按鈕，按下去之後可以把第一篇文章隱藏；然後再按一次可以顯示。

我們可以直接先看成果：http://codepen.io/aszx87410/pen/mOXmYV

Imgur

HTML 的部分就只是多了一個<button id="toggle">hide</button>，JavaScript 則是如下：

document.addEventListener("DOMContentLoaded", function(event) { 
  
  var toggle = document.getElementById('toggle');
  var isVisible = true;
  toggle.addEventListener('click', function() {
    isVisible = !isVisible;
    var post = document.getElementsByClassName('post')[0];
    console.log(post);
    post.style.display = isVisible ? 'block' : 'none';
    toggle.innerHTML = isVisible ? 'hide' : 'show';
  })
});

仔細看你會發現，用到了兩個新的 function，getElementById跟getElementsByClassName，這兩個函式我覺得你看名字就應該要知道它在做什麼了。其實跟querySelector滿類似的啦，所以這幾種都會看到有人用。我在這個範例特別用這個，只是想讓你知道有這個函式的存在，不然你去面試的時候被問這個，然後說一句：「我沒聽過」，就 GG 了。

另外的兩個重點就是取到元素之後可以用.style去改變 CSS，用.innerHTML去改變文字。如果你有一點程式基礎的話，上面這段程式碼應該不難，很容易就可以看懂。

如果你沒有程式基礎，強烈建議你趕快去補齊這一塊，隨便上網 Google：javascript 入門，或是 javascript 教學。通常排名排在前面的應該都還不錯啦，你也千萬不要來問我推薦什麼，你問我的話我也只會 Google 然後貼前幾名的結果給你。入門的教學都差不多，講來講去還不是都那些，與其一直想要找「最好的教學」，不如趕快從一份「堪用的教學」開始學起，之後再慢慢磨練自己的技能，這樣還比較實在。

因為 JavaScript 其實都是程式的部分，而我這一份系列教學的重點又不在程式基礎概念，所以我目前暫時沒想到還有什麼需要提醒大家的。總之呢，新手來學 JavaScript 第一個碰到最困擾的絕對就是匿名函式跟 callback function，不懂怎麼可以寫成這個樣子。但因為我上面講解過了，所以相信這部分對大家來說已經變成一塊巧克力蛋糕，上面還放一顆草莓的那種。

如果你想找一個快速又省錢的好方法來幫助你快速習得 JavaScript 這項技能，建議你可以參考這一堂課：JavaScript 程式設計新手村。也是課程內容豐富又划算，買了不會後悔。這不是我自己的課，所以沒有什麼利益關係，純粹推薦給大家我心目中覺得好的課程而已。

倘若你真的不想花任何錢，千萬不要來問我有沒有推薦什麼教學，沒有！你自己去 Google 找，通常排前幾名的都會是還不錯的教學，你就挑自己看得懂得看就好，看不懂的就直接關掉不要理它了。

在你透過自學看懂下面的 JavaScript 程式碼以後，你就差不多可以前往下一章了：

var str = 'abcde';
function reverse (str) {
  var ret = '';
  for(var i=str.length-1; i>=0; i--) {
    ret+=str[i];
  }
  return ret;
}

function reverse2 (str) {
  return str.split('').reverse().join('');
}

console.log(reverse(str) === reverse2(str));