---
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 
:::

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

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

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

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

小練習II
- 輸入一個名字、輸出一百次「<名字>下次不會再偷吃餅乾x<次數>」
- 輸入：我
- 輸出：

        我下次不會再偷吃餅乾x1
        ...
        我下次不會再偷吃餅乾x100

### 點按鈕後標題變色

<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>

### 點按鈕後顯示輸入框的文字到標題

<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>

---

## 共筆