<style>
.two-column-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap:20px;
max-width: 100%;
overflow: hidden;
}
/* Media query for mobile devices */
@media (max-width: 768px) {
.two-column-layout {
gap:0;
grid-template-columns: 1fr;
}
}
.markdown-body, .ui-infobar {
max-width: unset !important;
}
.two-column-layout ul,
.two-column-layout ol {
margin: 0;
padding-left: 20px;
}
.two-column-layout strong {
font-weight: bold;
}
.two-column-layout em {
font-style: italic;
}
.two-column-layout h1,
.two-column-layout h2,
.two-column-layout h3,
.two-column-layout h4,
.two-column-layout h5,
.two-column-layout h6 {
margin-top: 0;
}
</style>
# Javascript 白紙
---
## Day1
先講好規則
----
### 宣告變數
| 方法 | 解釋 |
| -------- | -------- |
| var | 宣告全域變數 |
| let | 宣告區域變數 |
| const | 宣告常數 |
反正就是`let`用到底就對了
----
### 輸入輸出
<div class="two-column-layout">
```javascript
const msg = prompt()
```
```javascript
會跳出一個彈跳視窗可以輸入值
```
```javascript
console.log(msg)
```
```javascript
在F12裡印出 msg 的值
```
```javascript
alert(msg)
```
```javascript
出現一個彈跳視窗(包含 msg 裡的值)
```
</div>
----
### 四則運算
| 符號 | 方法 | 範例 |
| -------- | -------- | -------- |
| + | 加法 | `2 + 2` |
| - | 減法 | `3 - 2` |
| * | 乘法 | `3 * 2` |
| ** | 次方 | `2 ** 2` |
| / | 除法 | `4 / 2` |
| % | 取餘數 | `4 % 2` |
----
### 型態
| 名稱 | 範例 |
| -------- | -------- |
| 字串 String | `"Hi"`、`"1"`、`"0"` |
| 數字 Int | `0`、`1`、`2`、`3` |
| 浮點數 float | `1.2`、`1.0` |
| 布林 Boolean | `true`、`false`、`0`、`1` |
| 物件 Object | `{key:value}` |
| 陣列 Array | `['hi',123,['hi'],{'O':'X'}]` |
----
### 邏輯判斷式
| 各種判斷 | 結果 | 解釋
| -------- | -------- | -------- |
| `1 == 1` | true | 1 等於 1 所以 true |
| `1 == 2` | false | 1 不等於 2 所以 false |
| `1 != 2` | true | `!=` 是不等於的意思 |
| `1 == '1'` | true | `==` 是不嚴謹等於 |
| `1 === '1'` | false | `===`是嚴謹等於 |
----
### 如何開始撰寫
```html=
<html>
<body>
<h1>hi</h1>
<p>hello, world!</p>
<script>
// 在這裡撰寫 javascript
console.log('hi')
</script>
</body>
</html>
```
----
### 牛刀小試
1. 輸入`john`，輸出`Hello, john`；
輸入`lucas`，輸出`Hello, lucas`；
2. 輸入數字`2`，輸出除以`2`的**餘數**`0`；
輸入數字`3`，輸出除以`2`的**餘數**`1`；
3. 輸入數字n，如果是`2`的**倍數**
輸出true，不然false
[看答案](https://lucashsu95.github.io/LucasHsu.dev/javascript/Days/Day1#%E7%89%9B%E5%88%80%E5%B0%8F%E8%A9%A6)
---
## Day2
**判斷式 IF...ELSE**
----
### 分別印出了多少?
```javascript=
let a = 1
let b = 2
let c = a + b
console.log(c)
a += 1 // a = a + 1
console.log(c)
b = c
console.log(c)
```
[看答案(點我)]()
----
### 轉型態
使用內建函式
```javascript=
let a = 123
a.toString() // 轉字串
// 轉數字
parseInt('123') // 123
Number('123') // 123
```
----
### 判斷式
----
#### 關於 if...else
```javascript=
if(這裡放布林值){
如果布林值是true就做這裡的事情，不然不會做
}else{
如果布林值是false就做這裡的事情，不然不會做
}
```
----
#### 關於 if...elseif...else
```javascript=
if(這裡放布林值){
如果上面的布林值是true就做這裡的事情，不然不會做
}else if(這裡放布林值){
如果上面的else if裡面的布林值是false就做這裡的事情，不然不會做
}else{
如果上方都不符合就做這裡的事情，不然不會做
}
```
----
#### 看個簡單的實作
```javascript=
let number = prompt('請輸入一個數字')
if (number > 10) {
console.log("這數字大於10")
} else if (number === 10) {
console.log("這數字等於10")
} else {
console.log("這數字小於10")
}
```
----
### 牛刀小試
1. 寫一個程式，可以判斷輸入的數字是偶數還是奇數。
2. 寫一個程式，可以判斷輸入的數字
- 是【3的倍數和5的倍數】還是
- 【3的倍數】或是
- 【5的倍數】或是
- 【不是3的倍數和5的倍數】。
3. 輸出a和b兩個數字，輸出最大公因數。
[看答案](https://lucashsu95.github.io/LucasHsu.dev/javascript/Days/Day2#%E7%89%9B%E5%88%80%E5%B0%8F%E8%A9%A6)
---
## Day3
**迴圈 FOR LOOP**
----
### For
----
#### 簡單範例
```javascript=
for (let i = 0; i < 10; i++) {
if (i % 2 === 0) {
console.log(i + " 是偶數");
} else {
console.log(i + " 是奇數");
}
}
```
----
### While
----
#### 簡單範例
```javascript=
let i = 0;
while (i < 10) {
if (i % 2 === 0) {
console.log(i + " 是偶數");
} else {
console.log(i + " 是奇數");
}
i++;
}
```
----
### 雙層迴圈
----
### 印出一個直角三角型
```javascript=
for (let i = 1; i <= 5; i++) {
let row = '';
for (let j = 1; j <= i; j++) {
row += '*';
}
console.log(row);
}
```
----
### 印出乘法表
```javascript=
for (let i = 1; i <= 9; i++) {
for (let j = 1; j <= 9; j++) {
console.log(`${i} x ${j} = ${i * j}`);
}
}
```
----
### 牛刀小式
1. 印出**正三角型**
2. 印出**倒三角形**
3. 印出**菱形**
[看答案](https://lucashsu95.github.io/LucasHsu.dev/javascript/Days/Day3#%E7%89%9B%E5%88%80%E5%B0%8F%E5%BC%8F)
---
## Day4
HTML + javascript(if..else)
----
### DOM用法
會印出什麼呢?
```htmlembedded=
<div>
<span> todo </span>
<button>123</button>
</div>
```
```javascript
const div = document.querySelector("div");
console.log(div.textContent);
console.log(div.innerHTML);
console.log(div.innerText);
```
----
### DOM抓取
把抓到的值存到變數裡
html
```htmlembedded
<h2 id="title">hi</h2>
<p>hello, world!</p>
<ul class="list"></ul>
```
javascript
```javascript=
const h1 = document.querySelector('#title'); // 抓id 用#
const p = document.querySelector('p'); // 抓標籤
const list = document.querySelector('.list'); // 抓class
console.log(h1,p,list); // 把抓到的值印出來
```
----
### 函式的宣告與使用
```javascript=
function isEvent(number){
if(number % 2 === 0){
return true
}
return false
}
function add(a, b){
return a + b
}
```
```javascript=
let a = 1
let b = 2
let c = add(a, b)
let d = isEvent(c)
console.log(d)
```
----
### 簡易計數器
[實作一個~簡易計數器 - 學習連結](https://lucashsu95.github.io/LucasHsu.dev/javascript/%E7%B6%B2%E9%A0%81%E6%93%8D%E4%BD%9C/%E7%B0%A1%E6%98%93%E8%A8%88%E6%95%B8%E5%99%A8)
{"description":"Multi-columns effect cannot be previewed.Apply the template to display the multi-columns effect.","title":"Javascript 白紙","contributors":"[{\"id\":\"aa5ab57e-8a98-4260-a4dc-58f2db1cc37f\",\"add\":11685,\"del\":5627}]"}