나의 발자취

[JS] 기본문법, 리팩토링: this., var target 변수설정으로 중복 제거 본문

앱 개발/etc

[JS] 기본문법, 리팩토링: this., var target 변수설정으로 중복 제거

달모드 2020. 11. 12. 17:02

1.비교연산자 등호: ===

2. 개행문자 엔터: <br>

<!doctype html>
<html>
<head>
    <title>WEBpage front</title>
    <meta charset="utf-8">
    <style>
        a{
            text-decoration: none;
        }


    </style>


</head>



<body>

    <h1><a href="index.html" text-transform:none >WEB</a></h1>
    <input type = "button" value = "night" onclick="
    document.querySelector('body').style.backgroundColor='black';
    document.querySelector('body').style.color='white';">

    <input type = "button" value = "day" onclick="
    document.querySelector('body').style.backgroundColor='white';
    document.querySelector('body').style.color='black';">
 

    <input id = "night_day" type = 'button' value="night" onclick="
        if (document.querySelector('#night_day').value === 'night'){
            document.querySelector('body').style.backgroundColor = 'black';
            document.querySelector('body').style.color='white';
            document.querySelector('#night_day').value = 'day';
        } else {
            document.querySelector('body').style.backgroundColor = 'white';
            document.querySelector('body').style.color='black';
            document.querySelector('#night_day').value = 'night';
        }
        ">

    <ol>
      <li><a href="1.html" id="text-shadow">HTML</a></li>
      <li><a href="2.html">CSS</a></li>
      <li><a href="3.html">JavaScript</a></li>
    </ol>
    <!--
    <h1><a href="index.html"><font color="red">WEB</font></a></h1>
    <ol>
      <li><a href="1.html"><font color="red">HTML</font></a></li>
      <li><a href="2.html"><font color="red">CSS</font></a></li>
      <li><a href="3.html"><font color="red">JavaScript</font></a></li>
    </ol>
-->


        <p>
            <div>
                <!--
                <img src = "photo.jpeg" width = "600px"  >
                -->
                
                <iframe width="600" height="340" src="https://www.youtube.com/embed/cbuZfY2S2UQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
            <h6>link for <a href = "https://opentutorials.org/course/3086" target = "_blank" title="naver website">reference</a></h1>
        
        </p>


</body>
</html>

 

 

this, var target 적용 후 (중복 제거 후)

<!doctype html>
<html>
<head>
    <title>WEBpage front</title>
    <meta charset="utf-8">
    <style>
        a{
            text-decoration: none;
        }


    </style>


</head>



<body>

    <h1><a href="index.html" text-transform:none >WEB</a></h1>
    <input type = "button" value = "night" onclick="
    document.querySelector('body').style.backgroundColor='black';
    document.querySelector('body').style.color='white';">

    <input type = "button" value = "day" onclick="
    document.querySelector('body').style.backgroundColor='white';
    document.querySelector('body').style.color='black';">
 

    <input id = "night_day" type = 'button' value="night" onclick="
        var target = document.querySelector('body');
        if (this.value === 'night'){
            target.style.backgroundColor = 'black';
            target.style.color='white';
            this.value = 'day';
        } else {
            target.style.backgroundColor = 'white';
            target.style.color='black';
            this.value = 'night';
        }
        ">

    <ol>
      <li><a href="1.html" id="text-shadow">HTML</a></li>
      <li><a href="2.html">CSS</a></li>
      <li><a href="3.html">JavaScript</a></li>
    </ol>
    <!--
    <h1><a href="index.html"><font color="red">WEB</font></a></h1>
    <ol>
      <li><a href="1.html"><font color="red">HTML</font></a></li>
      <li><a href="2.html"><font color="red">CSS</font></a></li>
      <li><a href="3.html"><font color="red">JavaScript</font></a></li>
    </ol>
-->


        <p>
            <div>
                <!--
                <img src = "photo.jpeg" width = "600px"  >
                -->
                
                <iframe width="600" height="340" src="https://www.youtube.com/embed/cbuZfY2S2UQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
            <h6>link for <a href = "https://opentutorials.org/course/3086" target = "_blank" title="naver website">reference</a></h1>
        
        </p>


</body>
</html>

'앱 개발 > etc' 카테고리의 다른 글

[fetch API]  (0) 2020.11.19
[JS] 함수 기능 사용, 객체 넘겨받기  (0) 2020.11.12
[JS] 반복문을 이용해 태그의 색상 일괄 변경  (0) 2020.11.12
[JS] event 속성 / document.write() 은 print()와 같음  (0) 2020.11.12
'앱 개발/etc' Related Articles more
Comments