iT邦幫忙

2021 iThome 鐵人賽

DAY 25
0
Modern Web

Learn & Play JavaScript -- Entry-Level Front-End Web Development系列 第 25

#25 JS: HTML DOM Events - Part 3(Start Over Version)

Since the knowledge I learned yesterday was over my head, I decided to try another tutorial video by Bruce, and start over again!

Two frequently used global variables

  1. window.alert(“”): for controlling the whole browser and its function, e.g. popup message display.
  2. document: for looking for tags or id of html file, inserting CSS.

Learning step by step

First of all, in <body></body>, write down <p> and <button> tags, and add id to them, so that we can get the tag id when coding in JavaScript.

    <p id="title">Round 1 of HTML DOM</p> 
    <button id="btn">Button</button>

Secondly, let me explain by tags in the <script></script>.
1. tag <p>
Add an event listener--load--for this window to monitor this web page, so that when the page is fully loaded, the listener will call back(回呼) the function.
After we get the tag, we can revise the context easily.
For example: let’s revise the title by innerText property.
*Intro of "innerText": https://www.w3schools.com/jsref/prop_node_innertext.asp

<script type="text/javascript">
        window.addEventListener('load', function() { 
            const p1 = document.getElementById('title')
            console.log(p1)
            p1.innerText="Round 2 of HTML DOM"

2. tag <button>
Add an event listener to monitor the behavior--click, so that when the button is clicked, the listener will call back the function and display clicking in the console of dev tool.

            const b1 = document.getElementById('btn')
            b1.addEventListener('click',function() {
            console.log('Clicking')
            })
        })

https://ithelp.ithome.com.tw/upload/images/20210925/20130362UbPPVWKnjb.png

Music of Today: Paper Throne by Phum Viphurit


Like/Share/Follow

Feel free to comment and share your ideas below to learn together!
If you guys find this article helpful, please kindly do the writer a favor — LIKE this article./images/emoticon/emoticon12.gif


上一篇
#24 JS: HTML DOM Events - Part 2
下一篇
#26 JS: HTML DOM Events - Part 4(Start Over Version)
系列文
Learn & Play JavaScript -- Entry-Level Front-End Web Development30

尚未有邦友留言

立即登入留言