手把手教你JavaScript(6):邏輯運算子

手把手教你JavaScript(6):邏輯運算子
手把手教你JavaScript(6):邏輯運算子

想學JavaScript卻不知從何下手?看完這一系列教學文一定對你的程式之路很有幫助的!!(6)

邏輯運算子

JavaScript 中的邏輯運算子,又稱作「布林運算字(Booleen Operators)」,可用來評估表達式,並且回傳 true 或是 false。

邏輯運算子 敘述
&& and 運算子:若兩個運算元為真,則回傳「ture」
|| or 運算子:若其中一個運算元為真,則回傳「ture」
! not 運算子:若運算元不為真,則回傳「ture」

上表中的JavaScript 運算子,範例如下所示,前兩個分別為「and 運算子」、「or 運算子」連接兩個布林表達式,最後一個為「not 運算子」接一個布林表達式

See the Pen 邏輯運算子|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

條件運算子

也有一種JavaScript教學的邏輯運算子為「條件運算子」,會根據指定的條件而指派一個值給一個變數,寫法如下:

 variable = (什麼樣的條件) ? 第一個值:第二個值

範例如下所示:

See the Pen 條件運算子|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

 

在以上例子中,如果變數 age 的值小於 18 的話,則變數 isAdult 的值將為「未滿18不得入場」,若變數 age 的值為 18 以上的話,則變數 isAdult 的值將為「18歲以上可以入場」。

 

欲知更多JavaScript教學文章,請到本部落格首頁搜尋喔~

 

 

 

其他閱讀

Python控制結構1.布林值Boolean-True or False?

Python控制結構2.if else條件判斷(1)

Python控制結構2.if else條件判斷(2)

Python控制結構3.布林邏輯:and,or,not

Python控制結構4.運算子優先順序(Operator precedence)一覽

Python控制結構5.while 迴圈

Python控制結構7.List串列與其他運算子的應用

Python控制結構8.List-append,insert,index,len函數

Python控制結構9.Range數列生成

Python控制結構10.for迴圈

Python控制結構11.實作簡單的計算機

 

 

 

手把手教你JavaScript(5):賦值運算子

手把手教你JavaScript(5):賦值運算子
手把手教你JavaScript(5):賦值運算子

想學JavaScript卻不知從何下手?看完這一系列教學文一定對你的程式之路很有幫助的!!(5)

賦值運算子

JavaScript 中的賦值運算子,賦值運算符是「=」。第一次接觸程式碼的人可能會以為它是「等於」,其實不是。它實際上意味著把右邊表達式的值賦給左邊的運算數。

JavaScript賦值運算子 敘述 範例
x = y x = y
+= x += y x = x + y
-= x -= y x = x – y
*= x *= y x = x * y
/= x /= y x = x / y
%= x %= y x = x % y

你可以在JavaScript 中的同一行中,使用多種運算子,如在下面例子所示:

<

See the Pen 賦值運算子|Math Operator|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

你也可以運用JavaScript教學中的多種變數,例子如下:

See the Pen Addition-2|Math Operator|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

 

欲知更多JavaScript教學文章,請到本部落格首頁搜尋喔~

 

 

 

其他閱讀

Python控制結構1.布林值Boolean-True or False?

Python控制結構2.if else條件判斷(1)

Python控制結構2.if else條件判斷(2)

Python控制結構3.布林邏輯:and,or,not

Python控制結構4.運算子優先順序(Operator precedence)一覽

Python控制結構5.while 迴圈

Python控制結構7.List串列與其他運算子的應用

Python控制結構8.List-append,insert,index,len函數

Python控制結構9.Range數列生成

Python控制結構10.for迴圈

Python控制結構11.實作簡單的計算機

手把手教你JavaScript(4):數學運算子

手把手教你JavaScript(4):數學運算子
手把手教你JavaScript(4):數學運算子

想學JavaScript卻不知從何下手?看完這一系列教學文一定對你的程式之路很有幫助的!!(4)

數學運算子

JavaScript 中的數學運算子,作用是對數字(文字的形式或是變數的形式)進行函式運算。

運算子 敘述 範例
+ 加號 1 + 1 = 2
減號 2 – 1 = 1
* 乘號 2 * 3 = 6
/ 除號 10 / 2 = 5
減去 var a = 10; a–; Now a =9
% 餘數 20 % 3 = 2
++ 遞增 var a = 10; a++; Now a =10
遞減 var a = 10; a–; Now a =9

在下面例子中,加號運算子是用來決定兩個數的和:

See the Pen Addition|Math Operator|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

你也可以運用多種變數,例子如下:

See the Pen Addition-2|Math Operator|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

承第一個例子,假如我們把「var x = 20 + 30」使用字串表示,變成「var x = “20 + 30″」的話,答案就不會是 20 + 30 的和,而是以字串形式呈現如下:

See the Pen Addition-string|Math Operator|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

 

減、乘、除運算子

四則運算中,除了上述介紹的加號運算子外,JavaScript 的減、乘、除運算子範例如下:

See the Pen 減、成、除運算子|Math Operator|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

 

遞增與遞減運算子

JavaScript教學 的遞增運算子「++」把數值加一,至於運算元的前後,意義各異:要是置於運算元的前方,則回傳被遞增的值;要是至於運算元的後方,則回傳原值,然後才遞增運算子。這樣解釋看似模糊,請見範例如下:

把遞增運算子放在運算元「y」前方的例子:

See the Pen 遞增運算子++var|Math Operator|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

把遞增運算子放在運算元「y」後方的例子:

See the Pen 遞增運算子var++|Math Operator|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

 

同理,遞減運算子「–」則是把數值減一,於運算元的前方,則回傳被遞減的值;要是至於運算元的後方,則回傳原值,然後才遞減運算子,範例如下:

把遞減運算子放在運算元「y」前方的例子:

See the Pen 遞減運算子–var|Math Operator|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

 

把遞減運算子放在運算元「y」後方的例子:

See the Pen 遞減運算子var–|Math Operator|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

 

欲知更多JavaScript教學文章,請到本部落格首頁搜尋喔~

 

 

 

其他閱讀

手把手教你JavaScript(3):資料類型

手把手教你JavaScript(3):資料類型
手把手教你JavaScript(3):資料類型

想學JavaScript卻不知從何下手?看完這一系列教學文一定對你的程式之路很有幫助的!!(3)

資料類型

「資料類型(Data Types)」是關於一個可以運行的程式中的值的種類。JavaScript 變數可支援各種資料類型,例如數字(類型)、字串(類型)、陣列(類型)等。

不同於其他的程式語言,JavaScript 不會特別因「不同的數值類型(如整數、數值長短、浮點等)」而賦予不同的定義。

JavaScript 的數值,可以帶小數點的或是整數的形式呈現

See the Pen Data Type-1 by Tedutw (@Tedutw) on CodePen.

浮點數

JavaScript的數字可以有小數點,如下例所示

See the Pen Float|Data Value|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

字串(Strings)

JavaScript「字串(Strings)」被用以承裝、處理文字。

一個字串可以是引號中的任何文字。這對引號可以使用單引號或是雙引號,如下範例:

var name = 'Márquez';
var text = "His name is Marc Márquez";

你可以在引號中,再加入引號。如單引號中加入雙引號、雙引號中放置單引號。只要兩種引號不要一樣就好。

var text = "His name is 'Marc Márquez'";
var text = 'and his opponent's name is "Valentino Rossi"';

承上例,除了使用不同樣式的引號外,我們還可以使用反斜杠(\),如下所示:

var text = "His name is \"Marc Márquez\"";
var text = 'and his opponent's name is \'Valentino Rossi\';

布林值(Booleans)

JavaScript教學「布林值(Booleans)」中,我們可以擁有一到兩個值:不是 true 就是 false。

Booleans 適用於當你需要一個資料類型,而該資料類型又只有兩個值(如「是或不是」、「對或錯」)的場合時。範例如下:

See the Pen Booleans|Data Value|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

 

 

欲知更多JavaScript教學文章,請到本部落格首頁搜尋喔~

 

 

 

其他閱讀

手把手教你JavaScript(2):變數

手把手教你JavaScript(2):變數
手把手教你JavaScript(2):變數

想學JavaScript卻不知從何下手?看完這一系列教學文一定對你的程式之路很有幫助的!!(2)

變數

「變數(Variables)」可說是用來承裝資料數值的容器。在同一程式中,變數的值可以改變。

JavaScript教學 中,以「var」來宣告變數。寫法如下所示:

var x = 777;

在上述例子中,數值 777 被指定給變數 x。

JavaScript 對於字體的大小寫是敏感的,大小寫被視為不同的變數,例如變數「Name」與「name」被視為不同的變數。

等號

JavaScript 中,等號 (=) 被稱作「分配」運算子,而不是「等於」運算子。

例如,「x = y」就是「把數值 y 分配給 x」,而不是「y 等於 x」。

使用變數

現在,我們將一個值「777」分配給一個變數「x」,並將其輸出。程式碼與結果如下:

See the Pen var.js by Tedutw (@Tedutw) on CodePen.

為變數命名

JavaScript 的變數名稱,對於字體的大小寫是敏感的,大小寫被視為不同的變數。如下例,我們將 x 由小寫改為大寫,程式碼與結果如下:

var x = 100;
document.write(X);

See the Pen Naming Variables by Tedutw (@Tedutw) on CodePen.

因為大小寫不同的緣故,所以 x 與 X 被判定為不同的變數。因此上面的程式碼並沒有產出任何的結果。

JavaScript 變數命名原則:

  • 命名的第一個字,必須是英文字母、底線(_)或是貨幣符號($)。後續的字可以是英文字母、數字(注意:數字不能作為第一個字)、底線或是貨幣符號($)
  • 變數名稱不能包含一個算數或是邏輯運算子,像是加(+)減(-)乘(*)除(/)的的記號都不能用。注意:連接線(-)會被視為減號,因此命名中也不能含連接線。)
  • 變數名稱不能包含特殊符號,例如「my#num」、「num%」等。
  • 任何的 JavaScript 名稱都不能含有空白字元。
  • 以下圖片為「JavaScript 保留字」一覽表,表中的任何字都不能用於命名變數。

 

 
 

欲知更多JavaScript教學文章,請到本部落格首頁搜尋喔~

 

 

 

其他閱讀

手把手教你JavaScript(1):嵌入JavaScript

手把手教你JavaScript(1):嵌入JavaScript
手把手教你JavaScript(1):嵌入JavaScript

想學JavaScript卻不知從何下手?看完這一系列教學文一定對你的程式之路很有幫助的!!(1)

JavaScript 簡介

JavaScript 是目前最普遍的程式語言之一,常用於網頁前端開發。JavaScript 可為網頁添增互動元素、進行數據處理,還有創建各種應用程式(行動裝置 App、桌上型電腦的應用程式、遊戲等。)JavaScript教學可謂是非常重要呢!!

來寫你的第一個 JavaScript 程式!

首先,讓我們一起來使用 JavaScript 寫出第一支程式:讓瀏覽器上顯示「Hello World!」字樣,程式碼如下:

See the Pen My first JavaScript by Tedutw (@Tedutw) on CodePen.

由以上程式碼可知:函數「document.write()」可寫入字串在 HTML 檔案中。此功能可用於編寫文字檔案以及 HTML 檔。

如何在網頁中寫入 JavaScript 腳本

我們可以在 HTML 檔中,寫入任意數量的腳本(script,JavaScript 的別稱,也可以「.js」稱呼)。通常,腳本標籤「<script>…</script>」會放在 HTML 的 <head> 與 </head> 中間:

<html>
   <head>
     <script>
     </script>
   </head>
   <body>
   </body>
</html>

嵌入外部的 JavaScript

除了上述可直接在 HTML 檔案中寫入 JavaScript 腳本之外,我們還可以嵌入外部現成的 JavaScript 檔案。這類現成的 JavaScript 的檔案類型為 .js 檔。嵌入外部檔的語法為「<script src=”檔案名稱”>…</script>」,可以放在<head>…</head>標籤或是<body>…</body>標籤之內。舉例來說,現在我們要在 HTML 中嵌入外部的 .js 檔「demo.js」,寫法如下。

<html>
   <head>
     <script src="demo.js"> </script>
   </head>
   <body>
   </body>
</html>

至於外部現成的 .js 檔,檔中文字就不能包含<script>…</script>標籤了。承上例,這個外部的 .js 檔「demo.js」內容如下:

alert("Welcome to my page!");

則執行結果如下所示:

從外部置入 .js 檔的好處比在 HTML 檔內寫入 JavaScript 腳本還多,像是:

  1. HTML 原始碼與 JavaScript 分開放置,較好閱讀、維護
  2. 當 JavaScript 檔案被 cache 過後,網頁載入速度就會更快

JavaScript 中加入註解的方法

有時在程式碼中,我們會加入註解,告知該程式碼的作用。在「/ *」和「* /」之間編寫的所有內容,都將被視為註解,可以單行也可以多行。如下所示:

<script>
    /* 這個code
    會製造出一個
    上面寫著
    「Welcome to my page!」
    的訊息對話框 */
       alert("Welcome to my page!");
</script>

 

 

欲知更多JavaScript教學文章,請到本部落格首頁搜尋喔~

 

 

 

其他閱讀

Python控制結構1.布林值Boolean-True or False?

Javascript新手上路(六):邏輯運算子

Javascript新手上路(六):邏輯運算子
Javascript新手上路(六):邏輯運算子

時下最熱門的程式語言之一JavaScript開始學了嗎?正式上課前先看看我們為你準備的文章吧!!(六)

邏輯運算子

JavaScript 中的邏輯運算子,又稱作「布林運算字(Booleen Operators)」,可用來評估表達式,並且回傳 true 或是 false。

邏輯運算子 敘述
&& and 運算子:若兩個運算元為真,則回傳「ture」
|| or 運算子:若其中一個運算元為真,則回傳「ture」
! not 運算子:若運算元不為真,則回傳「ture」

上表中的JavaScript 運算子,範例如下所示,前兩個分別為「and 運算子」、「or 運算子」連接兩個布林表達式,最後一個為「not 運算子」接一個布林表達式

See the Pen 邏輯運算子|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

條件運算子

也有一種JavaScript教學的邏輯運算子為「條件運算子」,會根據指定的條件而指派一個值給一個變數,寫法如下:

 variable = (什麼樣的條件) ? 第一個值:第二個值

範例如下所示:

See the Pen 條件運算子|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

 

在以上例子中,如果變數 age 的值小於 18 的話,則變數 isAdult 的值將為「未滿18不得入場」,若變數 age 的值為 18 以上的話,則變數 isAdult 的值將為「18歲以上可以入場」。

 

欲知更多JavaScript教學文章,請到本部落格首頁搜尋喔~

 

 

 

其他閱讀

Python控制結構1.布林值Boolean-True or False?

Python控制結構2.if else條件判斷(1)

Python控制結構2.if else條件判斷(2)

Python控制結構3.布林邏輯:and,or,not

Python控制結構4.運算子優先順序(Operator precedence)一覽

Python控制結構5.while 迴圈

Python控制結構7.List串列與其他運算子的應用

Python控制結構8.List-append,insert,index,len函數

Python控制結構9.Range數列生成

Python控制結構10.for迴圈

Python控制結構11.實作簡單的計算機

 

 

 

Javascript新手上路(五):賦值運算子

Javascript新手上路(五):賦值運算子
Javascript新手上路(五):賦值運算子

時下最熱門的程式語言之一JavaScript開始學了嗎?正式上課前先看看我們為你準備的文章吧!!(五)

賦值運算子

JavaScript 中的賦值運算子,賦值運算符是「=」。第一次接觸程式碼的人可能會以為它是「等於」,其實不是。它實際上意味著把右邊表達式的值賦給左邊的運算數。

JavaScript賦值運算子 敘述 範例
x = y x = y
+= x += y x = x + y
-= x -= y x = x – y
*= x *= y x = x * y
/= x /= y x = x / y
%= x %= y x = x % y

你可以在JavaScript 中的同一行中,使用多種運算子,如在下面例子所示:

<

See the Pen 賦值運算子|Math Operator|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

你也可以運用JavaScript教學中的多種變數,例子如下:

See the Pen Addition-2|Math Operator|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

 

欲知更多JavaScript教學文章,請到本部落格首頁搜尋喔~

 

 

 

其他閱讀

Javascript新手上路(四):數學運算子

Javascript新手上路(四):數學運算子
Javascript新手上路(四):數學運算子

時下最熱門的程式語言之一JavaScript開始學了嗎?正式上課前先看看我們為你準備的文章吧!!(四)

數學運算子

JavaScript 中的數學運算子,作用是對數字(文字的形式或是變數的形式)進行函式運算。

運算子 敘述 範例
+ 加號 1 + 1 = 2
減號 2 – 1 = 1
* 乘號 2 * 3 = 6
/ 除號 10 / 2 = 5
減去 var a = 10; a–; Now a =9
% 餘數 20 % 3 = 2
++ 遞增 var a = 10; a++; Now a =10
遞減 var a = 10; a–; Now a =9

在下面例子中,加號運算子是用來決定兩個數的和:

See the Pen Addition|Math Operator|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

你也可以運用多種變數,例子如下:

See the Pen Addition-2|Math Operator|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

承第一個例子,假如我們把「var x = 20 + 30」使用字串表示,變成「var x = “20 + 30″」的話,答案就不會是 20 + 30 的和,而是以字串形式呈現如下:

See the Pen Addition-string|Math Operator|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

 

減、乘、除運算子

四則運算中,除了上述介紹的加號運算子外,JavaScript 的減、乘、除運算子範例如下:

See the Pen 減、成、除運算子|Math Operator|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

 

遞增與遞減運算子

JavaScript教學 的遞增運算子「++」把數值加一,至於運算元的前後,意義各異:要是置於運算元的前方,則回傳被遞增的值;要是至於運算元的後方,則回傳原值,然後才遞增運算子。這樣解釋看似模糊,請見範例如下:

把遞增運算子放在運算元「y」前方的例子:

See the Pen 遞增運算子++var|Math Operator|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

把遞增運算子放在運算元「y」後方的例子:

See the Pen 遞增運算子var++|Math Operator|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

 

同理,遞減運算子「–」則是把數值減一,於運算元的前方,則回傳被遞減的值;要是至於運算元的後方,則回傳原值,然後才遞減運算子,範例如下:

把遞減運算子放在運算元「y」前方的例子:

See the Pen 遞減運算子–var|Math Operator|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

 

把遞減運算子放在運算元「y」後方的例子:

See the Pen 遞減運算子var–|Math Operator|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

 

欲知更多JavaScript教學文章,請到本部落格首頁搜尋喔~

 

 

 

其他閱讀

Javascript新手上路(三):資料類型

Javascript新手上路(三):資料類型
Javascript新手上路(三):資料類型

時下最熱門的程式語言之一JavaScript開始學了嗎?正式上課前先看看我們為你準備的文章吧!!(三)

資料類型

「資料類型(Data Types)」是關於一個可以運行的程式中的值的種類。JavaScript 變數可支援各種資料類型,例如數字(類型)、字串(類型)、陣列(類型)等。

不同於其他的程式語言,JavaScript 不會特別因「不同的數值類型(如整數、數值長短、浮點等)」而賦予不同的定義。

JavaScript 的數值,可以帶小數點的或是整數的形式呈現

See the Pen Data Type-1 by Tedutw (@Tedutw) on CodePen.

浮點數

JavaScript的數字可以有小數點,如下例所示

See the Pen Float|Data Value|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

字串(Strings)

JavaScript「字串(Strings)」被用以承裝、處理文字。

一個字串可以是引號中的任何文字。這對引號可以使用單引號或是雙引號,如下範例:

var name = 'Márquez';
var text = "His name is Marc Márquez";

你可以在引號中,再加入引號。如單引號中加入雙引號、雙引號中放置單引號。只要兩種引號不要一樣就好。

var text = "His name is 'Marc Márquez'";
var text = 'and his opponent's name is "Valentino Rossi"';

承上例,除了使用不同樣式的引號外,我們還可以使用反斜杠(\),如下所示:

var text = "His name is \"Marc Márquez\"";
var text = 'and his opponent's name is \'Valentino Rossi\';

布林值(Booleans)

JavaScript教學「布林值(Booleans)」中,我們可以擁有一到兩個值:不是 true 就是 false。

Booleans 適用於當你需要一個資料類型,而該資料類型又只有兩個值(如「是或不是」、「對或錯」)的場合時。範例如下:

See the Pen Booleans|Data Value|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

 

 

欲知更多JavaScript教學文章,請到本部落格首頁搜尋喔~

 

 

 

其他閱讀