Javascript復習

36786 ワード
テキストリンク

📌 html動的制御

<body>
    <ul class="list">
        <li id="one">1</li>
        <li id="two">2</li>
        <li id="three">3</li>
    </ul>
    
    <script>
        var one = document.querySelector('#one')
        var list = document.querySelector('.list')

        list.innerHTML = '<h1>안녕</h1>'

    </script>
  • はこのように隠されています.
    • 追加しますか?

    🔥 createElement, AppendChild

    var listAdd = document.createElement('li')
listAdd.innerHTML="안녕"
list.appendChild(listAdd)

    🔥 getAttribute

    <body>
    <ul class="list">
        <li id="one">1</li>
        <li id="two">2</li>
        <li id="three">3</li>

        <a id="google" href="https://google.com">google</a>
    </ul>
    
    <script>
        var one = document.querySelector('#one')
        var list = document.querySelector('.list')

        var google = document.querySelector('#google')
        console.log(google.getAttribute('href'))

    </script>

    📌 Event


    🔥 addEventListener

    <body>
    
    <div id="title">임얼쑤</div>
    <button class="btn">click</button>

    <script>
        var btn = document.querySelector('.btn')
        var mainTitle = document.querySelector('#title')

        function btnClicklHandler(){
            mainTitle.style.color='dodgerblue'
        }

        btn.addEventListener('click',btnClicklHandler)

    </script>
</body>
  • 直接追加イベント

    • 🔥 青->オレンジに変更

    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        body{font-size : 3rem;}
        .btn{font-size : 10rem}
        .menu-link{
            background: dodgerblue;
        }
        .menu-active{
            background: orange;
        }
    </style>

</head>
<body>
    
    <nav class="menu">
    <a href="#" class="menu-link">menu 1</a>
    <a href="#" class="menu-link">menu 2</a>
    <a href="#" class="menu-link">menu 3</a>

    </nav>

    <script>
        function clickMenuHandler(){
            this.classList.add('menu-active')
        }

        var menuLinks = document.querySelectorAll('.menu-link')
        for(i in menuLinks){
            menuLinks[i].addEventListener('click',clickMenuHandler)
        }
    </script>
</body>

    🔥 e.target / e.currentTarget

    <body>
    
    <nav class="menu">
    <a href="#" class="menu-link">menu 1</a>
    <a href="#" class="menu-link">menu 2</a>
    <a href="#" class="menu-link">menu 3</a>

    </nav>

    <script>
        var menu = document.querySelector('.menu')

        function click(e){
            console.log(e.target)
            console.log(e.currentTarget)
        }

        menu.addEventListener('click',click)
    </script>
</body>

    💰 e.target=現在クリック
    💰 e.currentTarget = this

    🔥 コード#コード#

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        body{font-size : 3rem;}
        .btn{font-size : 10rem}
        .menu-link{
            background: dodgerblue;
        }
        .menu-active{
            background: orange;
        }
    </style>

</head>
<body>
    
    <nav class="menu">
    <a href="#" class="menu-link">menu 1</a>
    <a href="#" class="menu-link">menu 2</a>
    <a href="#" class="menu-link">menu 3</a>

    </nav>

    <script>
        var menu = document.querySelector('.menu')
        var currentMenu;

        function active(item){
            item.classList.add('menu-active')
            currentMenu = item;
        }
        function inActive(item){
            item.classList.remove('menu-active')
        }

        function handler(e){
            if(currentMenu){
                inActive(currentMenu)
            }
            active(e.target)
        }

        menu.addEventListener('click',handler)
    </script>
</body>
</html>
    Docker Remove Image: How to Delete Docker image didn't use on Synology
    [大邱AI学校]開発ログ14日目210715