<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>
<!-- .slide: data-background="#000000" -->
# 程式語言的基本概念
###### tags: `JavaScript` `中學資訊教育`
----
大家應該都了解電腦所懂的語言只有0和1
但…為何？
----
電壓影響了矽的導電與否，造就了0 和 1
0:不導電 1:導電
----
那為何我們不是用01語言與電腦溝通？
----
難以撰寫、維護、理解
----
高階程式語言
⇩
⇩
01程式語言(低階程式語言)
----
* 高階程式語言種類：
* <span><!-- .element: class="fragment highlight-red" data-fragment-index="1"-->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`
---
## 變數
----
什麼是變數？
----
相信之前如果有學過一點點程式設計的大家都已經對「變數」這名稱不陌生了，我們可以簡單地把變數想像成為一個盒子，這個盒子可以一次裝一筆資料進去，但當我們再放新的一筆資料進盒子中時，前一筆資料就會被迫消失囉!
> ✍️ 變數其實就是個記憶體空間
----
為何需要變數？
----
電腦畢竟是人類所開發出的產品，因此思維模式肯定與人類相去不遠，人類不論從眼、耳、鼻、舌、手等感知器官所偵測到的訊息都會存放在腦中，因此，電腦也同樣需要一個空間儲存所得到的訊息，那就利用變數吧!
----
 ⇦ 
 ⇦ 
----
----
```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
```
----
{"metaMigratedAt":"2023-06-15T12:35:37.031Z","metaMigratedFrom":"YAML","title":"程式語言的基本概念","breaks":true,"slideOptions":"{\"transition\":\"slide\"}","contributors":"[{\"id\":\"82586838-6b25-424c-87e2-bd47d9cdac2b\",\"add\":4150,\"del\":823}]"}