---
# System prepended metadata

title: 2022/10/11 社課共筆
tags: [社課]

---

---
title: 2022/10/11 社課共筆
tags: 社課
---

:::warning
- 社課簡報&資源: 
    - [HTMLxCSS](https://hackmd.io/@Miyago9267/Hkp5LGuGo#/)
    - [Javascript](https://hackmd.io/@Miyago9267/H1LBMQdzs#/)
    - [W3School](https://www.w3schools.com/html/default.asp)
- [slido](https://app.sli.do/event/9SR4d7H129YTut8RatPMqY):
- 回饋表單: https://forms.gle/xThENrvsEwiTMZ6s9
- 表單單QRcode ![](https://i.imgur.com/WwAlKIT.png =100%x)
:::

[repl.it](https://www.replit.com)

[w3school](https://www.w3schools.com/js/tryit.asp?filename=tryjs_myfirst)



```js
console.info("hi!");
console.warn("yellow line");
console.error("red line");
```

小練習I
- 輸入一個名字，顯示「哈囉，<名字>」
- 範例
    - 輸入：Java☕
    - 輸出：哈囉，Java☕
    - 提示：`prompt()`

小練習II
- 輸入一個名字、輸出一百次「<名字>下次不會再偷吃餅乾x<次數>」
    - 輸入：我
    - 輸出：
        ```
        我下次不會再偷吃餅乾x1
        ...
        我下次不會再偷吃餅乾x100
        ```
        
### 點按鈕後標題變色
```jsx
<h1 class="center" id="title">銘傳開源社</h1>
<button id="btn1">1</button>
<script>
    const title = document.querySelector('#title')
    const btn1 =  document.querySelector('#btn1')
    btn1.addEventListener('click', ()=>{
        console.log('test')
        title.style.color = "#ffff00";
    });
</script>
```

### 點按鈕後顯示輸入框的文字到標題
```jsx
<input type="text" id="text">
<button class="btn">owo</button>
<h1 id="h"></h1>
<script>
    const btn = document.querySelector('.btn')
    const h = document.querySelector("#h")
    const input = document.querySelector('#text')
    function changeName(name){
        h.innerHTML = name
    }
    btn.addEventListener('click',()=>{
        changeName(input.value)
    });
</script>
```

---

## 共筆
![](https://i.imgur.com/B4hVTpY.png =100%x )
