[程式語言] JavaScript 入門 - 精華區

[程式語言] JavaScript 入門

特種兵

特種兵圖像(預設)

2020-01-29 17:23:59

From:1.161.128.113

自從世界上第一個網頁瀏覽器 Netscape Navigator 出現開始就有了 JavaScript, 當時叫做 LiveScript.
這是一個用來透過網頁與瀏覽器互動進而產生動態內容的客戶端程式語言。
經過25年的變身,如今的 JavaScript 已經成為橫跨客戶端'服務端、行動平台等等無所不在大小通吃的強大的程式語言。
為了聚焦在APP開發,我們將忽略網頁與瀏覽器的相關部份,只說明語言本身的語法,為APP開發打基礎,也為將來的APP後端支援伺服器開發做準備。

還記得前面APP開發課程一開始安裝的 node.js 嗎?我們一直冷落它,如今該請它上場擔任我們的 JavaScript 翻譯關了。

首先請打開命令提示模式,可以按 WINDOWS+R 輸入 cmd 按 ENTER
接著建立一個工作資料夾,執行命令 md mytest
最後進入該資料夾,執行命令 cd mytest

跟其他所有 script 語言一樣,程式碼測試可以有兩種方式,一種是逐行測試,也就是互動模式:

執行命令 node 會出現 > 提示符號。
開始輸入程式碼,例如 3+2 按 ENTER 會立刻出現 5 然後又是 > 提示符號。
要離開 node 就執行 .exit.
執行 .help 會列出所有可用的操控指令。

另一種就是常用的程式模式。
用記事本打好完整的 JavaScript 程式碼,例如

console.log("大家好,我又來了!");

存成立如 test.js 然後執行命令 node test 就會顯示『大家好,我又來了!』。

console.log() 是用來顯示訊息的函數,我們會用他來顯示程式執行的結果。
※最後更新時間:2020-01-12 10:43:43 From:123.193.249.19 By:coscell
※最後更新時間:2020-01-13 14:58:54 From:123.193.249.19 By:coscell
大家好,我又來野人獻曝現學現賣了。

前面的手機APP開發好不容易把大家帶上了階梯到了門口,
眼見只要再邁一步就能跨過門檻進入大廳,無奈這一步就是跨不過去。
原來問題出在我們對於作為核心技術的 JavaScript 並不了解,所以感覺處處碰壁。
經過研究得知這個課程應該要分為三個階段進行:
第一階段作為基礎應該先要了解 JavaScript.
第二階段才是動手開發,了解 NativeScript.
最後還有APP後端支援的伺服器開發,認識 Node.js.

雖然很明顯我只是個半吊子,但是到目前為止也沒有一個高手願意出來帶路,你們也只能跟著我瞎闖。
如果有誰實在看不過去願意出面帶路,我保證利馬跟著你走!
※最後更新時間:2020-01-11 12:55:18 From:123.193.249.19 By:coscell
自從世界上第一個網頁瀏覽器 Netscape Navigator 出現開始就有了 JavaScript, 當時叫做 LiveScript.
這是一個用來透過網頁與瀏覽器互動進而產生動態內容的客戶端程式語言。
經過25年的變身,如今的 JavaScript 已經成為橫跨客戶端'服務端、行動平台等等無所不在大小通吃的強大的程式語言。
為了聚焦在APP開發,我們將忽略網頁與瀏覽器的相關部份,只說明語言本身的語法,為APP開發打基礎,也為將來的APP後端支援伺服器開發做準備。

還記得前面APP開發課程一開始安裝的 node.js 嗎?我們一直冷落它,如今該請它上場擔任我們的 JavaScript 翻譯關了。

首先請打開命令提示模式,可以按 WINDOWS+R 輸入 cmd 按 ENTER
接著建立一個工作資料夾,執行命令 md mytest
最後進入該資料夾,執行命令 cd mytest

跟其他所有 script 語言一樣,程式碼測試可以有兩種方式,一種是逐行測試,也就是互動模式:

執行命令 node 會出現 > 提示符號。
開始輸入程式碼,例如 3+2 按 ENTER 會立刻出現 5 然後又是 > 提示符號。
要離開 node 就執行 .exit.
執行 .help 會列出所有可用的操控指令。

另一種就是常用的程式模式。
用記事本打好完整的 JavaScript 程式碼,例如

console.log("大家好,我又來了!");

存成立如 test.js 然後執行命令 node test 就會顯示『大家好,我又來了!』。

console.log() 是用來顯示訊息的函數,我們會用他來顯示程式執行的結果。
※最後更新時間:2020-01-12 10:43:43 From:123.193.249.19 By:coscell
※最後更新時間:2020-01-13 14:58:54 From:123.193.249.19 By:coscell
所有程式語言處理的對象都是資料,所以我們要先來了解 JavaScript 的資料類型。
對使用者而言,撰寫 JavaScript 並不需要關心資料類型,因為它會自動判斷並做轉換。
不過我們還是需要知道資料的表達方式,免得雞同鴨講,看到錯誤訊息也才不會傻眼不知所措。
JavaScript 處理的資料類型列表如下:

資料類型 意義 表達實例
number 數字 0, 100, 3.52, 5.1E3, 025, 0x9F, NaN
string 字串 '7-Eleven', "便利商店",
boolean 真假 true, false
object 物件 console, [1,2,3], null
function 函數 console.log
undefined 未定義 undefined
Infinity 無效數 除數為0
  1. JavaScript 的語法都有分大小寫,例如上表的 NaN 不能打成 NAN 或 nan.
  2. 上表的資料都可以用 typeof 這個運算來取得他的資料類型。

下面的程式碼請用戶動模式逐行測試,看看結果是否如您預期。
有任何疑問、心得或想法都歡迎在下面留言。

typeof 3
typeof 3+5
typeof (3+5)
typeof 3*5
typeof (3*5)

程式語言處理的資料有其複雜性和可變性,為了方便處理和記憶,我們可以為他取個名稱,這就是變數。
變數命名需要透過宣告來達成,宣告的關鍵自有三個:const, var 和 let.
這三個宣告方式作用有所差別,最明顯的市 const, 用來指定那些不會變或不可被改變的資料,一般稱為常數。
至於 var 與 let 的差別在於作用範圍,由於差別細微卻瑣碎複雜,寫出來又臭又長又不容易理解和記憶,
反正一般情況下兩者通用,您可以選著用,真正碰到問題再對調就好。
宣告變數可以同時為他指定資料內容,這就是初值設定,用 = 號指定。
關於變數名稱,以下規則必須嚴格遵守:

  1. 只能用單一詞彙,如果是多字組合中間不能有空格。
  2. 有分大小寫,例如 A 跟 a 是兩個不同的變數。
  3. 只能用字母, _, $ 和數字這四種符號組合,其他符號一概不許使用。
  4. 開頭第一個符號不准用數字。
  5. 不能用關鍵字和保留字。

關鍵字是指那些有特定用途的詞彙,例如上面的 const, var, let 等等。
保留字則是保留給未來版本使用,為了相容性考量所以不要使用。
以下列出所有關鍵字和保留字:

break
case	catch	class	const	continue
debugger	default	delete	do
else	export	extends
finally	for	function
if	import	in	instanceof
new
return
super	switch
this	throw	try	typeof
var	void
while	with
yield

下面的規則是建議,自己決定是否遵守:

  1. 名稱盡量要有意義以方便記憶和除錯。
  2. 多字組合的名稱需要考慮方便閱讀,例如 mynewcar 最好改為 my_new_car 或 MyNewCar.

最後的範例程式請用程式模式執行測試,結束後還請依據所學加上自己的理解和創意另做一個版本。

const print = console.log;
var myName = "coscell";
let myAge = 18;

print("大家好!我是", myName);
print(`今年 ${myAge} 歲`);
print('歡迎多多交流!');

※最後更新時間:2020-01-14 11:04:10 From:123.193.249.19 By:coscell
JavaScript 提供的算術運算符號列表如下:

符號 意義 運算式 結果
+ 3 + 4 7
+ 字串連接 "12" + "34" '1234'
+ 轉為數字 +"56" 56
++ 加 1 let i = 10; ++i 11
- 8 - 3 5
- 副數 -3 -3
- 轉為數字 -"3" -3
-- 減 1 let i = 5; --i 4
* 3 * 5 15
** 乘方 3 ** 3 27
/ 10 / 5 2
% 取餘數 11 % 5 1
  1. 運算規則比照四則運算,也就是先乘除後加減,括弧最優先。
  2. ++ 和 -- 可以放在變數之後但結果不同,請用戶動模式檢驗看看。
  3. 運算符號兩邊的資料類型如果不同會自動轉換,也請檢驗看看。
    程式的進行經常需要靠判斷來決定下一步。
    判斷的依據其實就是比較。
    比較的結果不是真就是假。
    JavaScript 的比較符號如下表:
符號 意義 範例 結果
== 等於 3 == 3 true
!= 不等於 3 != 1+2 false
> 大於 1+2 > 3 false
>= 大於或等於 var a=2+3; a >= 5 true
< 小於 'A' < 'a' true
<= 小於或等於 'A' <= 'a' true
=== 全等於 7 === +"7" true

上表的 === 必須資料內容和資料類型都相同才能得到 true.
例如空字串 "" == 0 是 true, 但是 "" === 0 就 false 了。


來源文章


最後更新:2020-01-29 17:23:59

From: 1.161.128.113

By: 特種兵