學習夠用的 JavaScript — 0+1

Wildsky
6 min readMar 11, 2018

--

工程師的缺德行為:叫朋友去學 C/C++

Photo by Ash Edmonds on Unsplash

0. 序

最近一直覺得應該可以寫一下這一類的文章。

偶爾會有朋友說想學寫程式,正如上面分享的這篇文章所說,他們應該不是真的想「學寫程式」靠寫程式吃飯,而只是想要「用程式幫助生活」、「稍微理解一些跟程式相關的東西」或是「稍微聽懂工程師在說什麼」。所以我決定要來寫幾篇文章,或長或短,來寫一下最小成本最大效用的「學程式」的方法。

其中心思想應該會是「不用 build 環境,簡單講範例,要用怎麼改」,也會簡單解釋一下用到的東西的意義,以及可能相關的東西,讓想學的初心者不會被各種黑畫面嚇到,通過重重難關之後卻只看到 Terminal 上印出了個白白文字的 Hello World。

我不反對為了學寫程式而去學硬派的 C/C++,但我反對使用成本太高成就感太低的方式,導致想學程式的心被摧殘。

所以我決定要開一個系列,叫做「學習夠用的 JavaScript」,這個系列是希望可以幫助你完成生活中的小任務(通常是重複性高的任務),讓生活更輕鬆美好,或是進入程式領域前的暖身。也許會有一些用詞怪怪的,也可能會有些觀念不完全對,但會盡可能地用好理解的方式讓讀者讀懂我想要傳達的概念。

開發環境

好,序講完了。接下來就講一下我目前打算用的環境,就是你幾乎天天都會花許多時間使用的「瀏覽器」!

我會推薦各位用 Firefox 或是 Chrome,至於 Safari 和 IE ⋯⋯ 他們實在不是我們在開發程式時愛用的瀏覽器。但由於這系列文章的目標是「幫助生活更好」所以我還是會努力提一下,或至少讓你知道要怎麼去看能不能做。看到我沒提卻想知道的話,再麻煩你在下面問了——會不會解答是一回事,不過有問有機會咩。

那首先,Firefox 和 Chrome 要怎麼寫 JavaScript 呢?很簡單,ctrl + alt +k(Mac 上是 command + alt + k),如果開不起來的話,換成 command + alt + i 然後再選上面的主控台,你就會看到頁面上彈出一個看起來很 Geek 的東西(如下圖),這個就是 devtool。其實官方有提供 how-to,網址在這兒:

Firefox 網頁主控台

你可以在那個藍色的 >> 右邊輸入 1 + 1,再 enter,就會看到這樣的結果:

這樣你就完成了第一個程式了!如果你還沒試可以直接在看這篇文章的時候開開看,寫寫看,一起寫程式啊!

1. 第一次寫程式就上手 — 強大的計算機?

什麼?你說只有 1+ 1 很無用很失望,是啦我也覺得很沒用,心算就好了幹嘛寫程式,但 JavaScript 在瀏覽器中還不只這樣,他還有許多跟數學相關的函式,你可以來 這份文件 看看。(你問函式是什麼?在這邊你可以先簡單地當作是「別人寫好的小程式」,之後我們再詳細解釋。)

言歸正傳,剛剛提供給你的文件裡面有非常多的東西,sin, log 這類比較進階一點的東西都有甚至還有實用的 abs(絕對值),換句話說,你也可以做出 這樣的 Code

https://gist.github.com/wildskyf/144fe94040eb9833736ebf0a95212876

咦,你說我上面的圖片怎麼變了嗎?

嘿嘿,因為我要一個一個截圖太累了,讓我偷懶一下,這樣比較輕鬆。不過你應該懂我的意思啦:

只要輸入「Math.abs(11 * 0 + (-321) / 33 + 2 + 6)」,
你就會得到「1.7272727272727266」。

我這邊也列一下個人覺得相較實用的東西(比 sin, cos 實用的東西XD):

不給數字:

  • Math.random() // 會得到一個介於 0 到 1 之間的隨機值

給一個數字給答案的:

  • Math.floor(1.2233445) // 1,小於等於該數的最大整數(所以我猜給 -3.5 會得到 -4,你可以試試看)(類似無條件捨去)
  • Math.round(1.4555555) // 1,取到最接近的整數(類似四捨五入)
  • Math.ceil(1.2233445) // 2,大於等於該數的最大整數(無條件進位的感覺)
  • Math.abs(-1.77245) // 1.77245,取絕對值

給兩個數字做計算:

  • Math.pow(7,2) // 49,2 是平方,3 是立方,你也可以換成別的數,就會是 n 次方

給一堆數字找答案的:

  • Math.max(1,2,3,4,5) // 5,不解釋最大值
  • Math.min(1,4,2,5,-10) // -10,不解釋最小值

拿上面的東西去和加減乘除做排列組合,你的主控台可能就會出現紅紅的警告或是錯誤,不過不用擔心,先忽略這些問題,大概幾篇文章之後就知道要怎麼修正了。你也可以試著計算 1 / 0 看看會發生什麼事~

到這邊,你已經開始寫程式了!也許你會覺得沒什麼,也可能你會覺得很炫,但這只是開始,程式還有更多更厲害的東西等你接觸,等我的下一篇文章啊!

任何問題都歡迎你提出——包含那些我叫你先忽略的問題——或是想要建議補充甚至吐槽也非常歡迎 XD 下一篇應該會教一些跟文字處理有關的方法~敬請期待!

如果你喜歡這篇文章,歡迎你拍 1~5 下手。如果你期待下一篇,輕拍 6~10 下。如果你很嗨,就請拍到你冷靜下來吧!

--

--