iT邦幫忙

2021 iThome 鐵人賽

DAY 18
0
Modern Web

33歲轉職者的前端筆記系列 第 18

33歲轉職者的前端筆記-DAY 18 練習寫一個自我介紹產生器

變數基本概念

常數:const

不可重新賦予新值

變數:let

可重新賦予新值

建立常數a並儲存(或設定)“david”
cost a = “david”;

自我介紹產生器

先上範例圖:

https://ithelp.ithome.com.tw/upload/images/20210917/20120789NQFtv5ZNpo.jpg

程式碼:

HTML:

<body> 
  <h1>自我介紹產生器</h1>
  <input type="text" id="nameInput" placeholder="名字...">
  <button id="btn">產生自我介紹</button>
  <script src="/main.js"></script>
</body>

JavaScript:

const nameInput =  document.getElementById("nameInput");
const btn = document.getElementById("btn");
//綁定按鈕的點擊事件
btn.addEventListener("click", function () {
  //btn被點擊後才做的事情
  console.log("Heloo" +  nameInput.value);
})

自我介紹產生器 2 輸入文字就會出現

https://ithelp.ithome.com.tw/upload/images/20210917/20120789LwiCNzaxht.jpg

寫法如下:

HTML:

  <div class="container">
    <h1>自我介紹產生器</h1>
    <input class="form-control" type="text" id="nameInput" placeholder="名字...">
    <br>
    <input class="form-control" type="text" id="ageInput" placeholder="年齡...">
    <br>
    <input class="form-control" type="text" id="titleInput" placeholder="職稱...">
    <button class="btn btn-primary" id="btn">產生自我介紹</button>
    <div id="introBlock"></div>
    <script src="/main.js"></script>
  </div>

JavaScript:

const nameInput =  document.getElementById("nameInput");
const ageInput = document.getElementById("ageInput");
const titleInput = document.getElementById("titleInput");
const btn = document.getElementById("btn");
const introBlock = document.getElementById("introBlock");
//綁定按鈕的點擊事件
btn.addEventListener("click", function () {
  //btn被點擊後才做的事情
  const name =  nameInput.value;
  const age = ageInput.value;
  const title  = titleInput.value;
  introBlock.innerText = "hello 我是" + name + "是一個" + age + "歲的" +  title + "。";
})

可優化寫法

  introBlock.innerText = "hello 我是" + name + "是一個" + age + "歲的" +  title + "。";

改成

introBlock = `Hello 我是${name}是一個${age}歲的${title}`;

這樣程式碼較簡潔也不會那麼長

如果要加上 html 的標籤則改成


introBlock.innerHTML = `<h1>Hello</h1> 
<h2>我是${name}是一個${age}歲的${title}`</h2>;


上一篇
33歲轉職者的前端筆記-DAY 17 Bootstrap 介紹及使用方法
下一篇
33歲轉職者的前端筆記-DAY 19 練習寫一個計算機
系列文
33歲轉職者的前端筆記30

尚未有邦友留言

立即登入留言