[TIL] 생활코딩 WEB2-JS (21.08.10)

12861 단어 JavaScriptTIL생활코딩JavaScript

WEB2-JS

조건문의 활용

프로그램은 '순서'의 의미를 포함하고 있다.
그런 의미에서 JS는 프로그램언어다.
JS에서 왼쪽과 오른쪽를 비교해서 boolean값을 도출하는 이항연산자는 '==='이다.

    <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';
        }
    ">

리팩토링 중복의 제거

<input 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';
        }
    ">

배열과 반복문

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>Loop & Array</h1>
    <script>
      var coworkers = ['Egoing','leezche','Duru','taeho'];

    </script>

    <h2>Coworkers</h2>
    <ul>
      <script>
        var i = 0
        while(i < 4){
            document.write('<li><a href = "http://a.com/'
            +coworkers[i]+'">'+coworkers[i]+'</a></li>');
            i = i + 1;
        }
      </script>
    </ul>
  </body>
</html>

🤷🏻‍♂️❓ while문 안에 따옴표가 왜 저렇게 쓰이는지, coworkers[i] 양 쪽에 왜 +가 쓰이는지 정확히 이해가 안됐었는데 댓글을 통해 해결 할 수 있었다.

🙆🏻‍♂️❗ 댓글:

document.write('<li><a href = "http://a.com/'
+coworkers[i]+'">'+coworkers[i]+'</a></li>');

write() 명령의 괄호 안에 총 5개의 데이터가 각각 +(플러스)로 연결되어 있는 것으로 보시면 됩니다.

첫번째, 작은 따옴표(')로 묶여져 있는 문자열

<li><a href = "http:a.com/

두번째, 배열의 반환값을 의미하는
coworkers[i]

세번째, 작은 따옴표로 묶여져 있는 문자열
">

네번째, 배열의 반환값을 의미하는
coworkers[i]

마지막, 작은 따옴표로 묶여져 있는 문자열

그래서, 만약 배열의 반환값이 'egoing'이라면, HTML 문서에 write() 명령을 통해 써지게 되는 코드는

<li><a href = "http://a.com/egoing">egoing</a></li>

가 되는 것입니다.

👦🏻 script 태그 안에서 JS언어를 쓰는데 html언어를 쓰기 위해선 html언어를 따옴표로 묶어줘야한다. 또한 a태그 안에서 안에서도 따옴표를 사용해서 링크를 문자열로 처리하는데 이것과 html을 묶는 따옴표랑 헷갈리면 안된다. 그리고 html에 JS언어를 넣고 싶다면 +로 더해주면 된다.

      <input 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';

            var alist = document.querySelectorAll('a');
            var i = 0;
            while(i<alist.length){
                alist[i].style.color = 'powderblue';
                i=i+1;
            }
        } else {
            target.style.backgroundColor = 'white';
            target.style.color = 'black';
            this.value = 'night';
 
            var alist = document.querySelectorAll('a');
            var i = 0;
            while(i<alist.length){
                alist[i].style.color = 'blue';
                i=i+1;
            }
        }
    ">

👨🏻‍🏫 querySelector, querySlectorAll 사용법

querySelector

querySelector는 특정 name,id,class를 제한하지 않고 css선택자를 사용하여 요소를 찾습니다. 같은 id 또는 class일 경우 스크립트의 최상단 요소만 로직에 포함합니다.

  • querySelector(#id) => id 값 id를 가진 요소를 찾습니다.
  • querySelector(.class) => class 값 class를 가진 요소를 찾습니다.

querySelectorAll

querySelector와 사용 방법은 동일하며 선택자를 선택하여 배열과 비숫한 객체인 nodeList를 반환합니다. 반환객체가 nodeList이기에 for문 또는 forEach문을 사용한다.
아래코드와 같이 ","를 사용하면 여러 요소를 한번에 가져올 수 있습니다.

  • querySelectorAll("#id,.class")

[HTML5] 시맨틱 태그(Semantic Tag)에 대하여
[JPA 긴급학습(6)] 엔티티 매니저와 영속성 관리

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage