iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 3
1
Modern Web

JS 學習歷程系列 第 3

與 JS 確認過眼神 - 宣告變數、把 JS 加入你頁面 (二)

上一篇提到變數的宣告,本篇單欄就要試著把 JS 加進頁面中囉,在開始正式寫 JS 前,我們先來寫個簡易 HTML 及 CSS:

  1. HTML 語法請加在<body></body>之間,語法如下:
    <div class="all">
        <p class="result_p">8乘7結果看這邊↓↓↓↓</p>
        <div class="result"></div>
    </div>
  1. 當然不能忘記把 JS 渲染到你的 HTML 中囉,記得在 </body> 最上方加入 <script src="js/all.js"></script> (請參考:梁靜茹給的勇氣),最後 HTML & 網頁長相如下:
    https://ithelp.ithome.com.tw/upload/images/20190902/201199229rDoguducz.png

https://ithelp.ithome.com.tw/upload/images/20190902/20119922tbyRhKFwju.png

  1. 樓上的頁面真是不忍直視,我們來加個 CSS 吧:
.all{
    margin-top:100px;
    margin-left:100px;
}
.result_p{  
    padding-bottom:20px;
    font-size: 30px;
}

.result{
    width: 300px;
    height:60px;
    border:1px solid green;
    font-size: 40px;
}

https://ithelp.ithome.com.tw/upload/images/20190902/20119922S399uY2mI9.png

  1. JS 當然才是重頭戲啦,上篇己經有介紹變數怎麼宣告,所以我們就不客氣的在 JS 上宣告下去了:
var firstNum = 8;
var secondNum = 7;
var total = firstNum * secondNum

如同之前介紹過的,我們先宣告一個變數值為 8;一個變數值為7;再宣告一個變數儲存 8乘7 的值; JS 長相如下:
https://ithelp.ithome.com.tw/upload/images/20190902/20119922hMQzjzNOMq.png

  1. 最後本篇的重點,單欄就是把結果呈現在 HTML 上面,我們使用的語法是:document.querySelector('.result').textContent = total; JS 長相:
    https://ithelp.ithome.com.tw/upload/images/20190902/20119922UcMx86Ove0.png

  2. 登愣~HTML也長出來了,是不是真的很好玩呢?
    https://ithelp.ithome.com.tw/upload/images/20190902/20119922EesP8kmzpo.png


上一篇
與 JS 確認過眼神 - 宣告變數、把 JS 加入你頁面 (一)
下一篇
讓專業的來 - 想在蟹老闆底下摸魚,你就必需懂 function (一)
系列文
JS 學習歷程30

1 則留言

1
紅茶小公主
iT邦新手 5 級 ‧ 2019-09-04 11:40:09

好容易懂喲~~~/images/emoticon/emoticon42.gif

Chita iT邦新手 5 級 ‧ 2019-09-04 17:09:16 檢舉

謝謝支持

我要留言

立即登入留言