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 打開網頁主控台:https://developer.mozilla.org/zh-TW/docs/Tools/Web_Console/Opening_the_Web_Console
- Chrome:https://developer.chrome.com/devtools
- Safari:https://www.technipages.com/macos-enable-web-inspector-in-safari
你可以在那個藍色的 >> 右邊輸入 1 + 1,再 enter,就會看到這樣的結果:
這樣你就完成了第一個程式了!如果你還沒試可以直接在看這篇文章的時候開開看,寫寫看,一起寫程式啊!
1. 第一次寫程式就上手 — 強大的計算機?
什麼?你說只有 1+ 1 很無用很失望,是啦我也覺得很沒用,心算就好了幹嘛寫程式,但 JavaScript 在瀏覽器中還不只這樣,他還有許多跟數學相關的函式,你可以來 這份文件 看看。(你問函式是什麼?在這邊你可以先簡單地當作是「別人寫好的小程式」,之後我們再詳細解釋。)
言歸正傳,剛剛提供給你的文件裡面有非常多的東西,sin, log 這類比較進階一點的東西都有甚至還有實用的 abs(絕對值),換句話說,你也可以做出 這樣的 Code:
咦,你說我上面的圖片怎麼變了嗎?
嘿嘿,因為我要一個一個截圖太累了,讓我偷懶一下,這樣比較輕鬆。不過你應該懂我的意思啦:
只要輸入「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 下。如果你很嗨,就請拍到你冷靜下來吧!