程式語言的基本概念

--- slideOptions: transition: slide --- <style> blockquote {text-align: left; font-size: 25px} #u_try{color: #7FFF00; text-align: left; font-size: 30px} #pl{color: #FFFFFF; text-align: left; font-size: 28px} </style>  # 程式語言的基本概念 ###### tags: `JavaScript` `中學資訊教育` ---- 大家應該都了解電腦所懂的語言只有0和1 但…為何？ ---- ![](https://i.imgur.com/uiiSDnR.png) 電壓影響了矽的導電與否，造就了0 和 1 0:不導電 1:導電 ---- 那為何我們不是用01語言與電腦溝通？ ---- 難以撰寫、維護、理解 ---- 高階程式語言 ⇩ ![](https://i.imgur.com/XlDGPk6.png =200x200) ⇩ 01程式語言(低階程式語言) ---- * 高階程式語言種類： * <span>JavaScript</span>、Java、C、C++、Python、… <br><br> * 為何選擇JavaScript * 操控瀏覽器的能力 * 開放性 * 最多人使用的程式語言 * 未來就業機會廣大 > 缺點：用法太過自由，有時會造成危險 ---- 開發環境：chrome --- ## 輸出 ---- ### 印出字串 ```javascript= // 印出南港許光漢是我！ console.log("南港許光漢是我！"); // 印出天龍林依晨是我！ console.log("天龍林依晨是我！"); ``` > ✍️ " " 雙引號內的內容我們稱作字串 > ✍️ `console.log();` 就是輸出的基本結構 ---- <p id=u_try>【換你試試看】</p> <p id=pl>請試著印出：</p> > 菸一支一支一支的點酒一杯一杯一杯的乾 > 請你要體諒我我酒量不好賣給我衝康 (。´艸`。) ---- ### 印出數字 ```javascript= # 6 console.log(3+3); # 0 console.log(3-3); # 9 console.log(3*3); # 1.5 console.log(3/2); # 0 console.log(3%3); # 27 console.log(3**3); ``` > ✍️ 數字不需要用 " " 刮起來 ---- <p id=u_try>【換你試試看】</p> <p id=pl>請試著印出：</p> 1. 試著比較下列三行程式碼 `console.log(3+3);` `console.log('3'+'3');` `console.log('3+3');` 2. 試著比較下列兩行程式碼 `console.log('3'*3);` `console.log(3*3);` 3. `console.log(Math.ceil(1/4));` `console.log(Math.floor(1/4));` `(8 + 7) × 3 ÷ 4 - 3` --- ## 變數 ---- 什麼是變數？ ---- 相信之前如果有學過一點點程式設計的大家都已經對「變數」這名稱不陌生了，我們可以簡單地把變數想像成為一個盒子，這個盒子可以一次裝一筆資料進去，但當我們再放新的一筆資料進盒子中時，前一筆資料就會被迫消失囉! > ✍️ 變數其實就是個記憶體空間 ---- 為何需要變數？ ---- 電腦畢竟是人類所開發出的產品，因此思維模式肯定與人類相去不遠，人類不論從眼、耳、鼻、舌、手等感知器官所偵測到的訊息都會存放在腦中，因此，電腦也同樣需要一個空間儲存所得到的訊息，那就利用變數吧! ---- ![](https://i.imgur.com/IuUIPw5.png) ⇦ ![](https://i.imgur.com/IEODUpb.png) ![](https://i.imgur.com/8PFsa4N.png) ⇦ ![](https://i.imgur.com/I0oNVm1.png) ---- ![](https://i.imgur.com/vWGz9VF.png) ---- ```htmlmixed= <!DOCTYPE html> <html> <head> <title>Page Title</title> <style> body { background-color: black; text-align: center; color: white; } </style> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <img src="https://i.imgur.com/8PFsa4N.png" alt="Avatar" style="width:200px"> </body> </html> ``` ---- ```javascript= # box變數指定為100 var box = 100; # box變數指定為300 var box = 300; # 印出box變數內的值 console.log(box); var ss = 20; var ff = 50; # 同時印出多個變數中的值 print(num, ss, ff); ``` > ✍️ 等號在程式碼中是「指定」的意思 > ✍️ 變數放等號左邊，等號右邊的值用來指定到左邊變數中 ---- <p id=u_try>【換你試試看】</p> <p id=pl>創造三個變數(n1, n2, n3)分別指定為：16, "歲", "我的年紀是"</p> <p id=pl>利用一個print( )程式碼想辦法印出下列結果：</p> 我的年紀是 16 歲 ---- ### 變數間的相互指定與操作 ```python= n1 = 1000 n2 = 5 # 沒有實質改到(整形) n1 + n2 print(n1) # 實質改變的方法一 n1 = n1 + n2 print(n1) # 實質改變的方法二 n1 += n2 print(n1) # 換個四則運算符號試試看 n1 /= n2 print(n1) ``` ---- <p id=u_try>【換你試試看】</p> <p id=pl>請讓 n1 的值變成 n2 的 n3 次方</p> ```python= n1, n2, n3 = 10, 5, 3 # implement your code here print(n1) ``` ---- <p id=u_try>【挑戰看看】</p> <p id=pl>想辦法讓 box1 box2 中的值交換</p> ```python= # 指定box1的值為100 box1 = 100 # 指定box2的值為-2 box2 = -2 # implement your code here # 印出box1和box2的值 print(box1, box2)# -2 100 ``` ----

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.