JavaScript 내용정리

« 2025/02 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

Archives

Recent Posts

02-08 13:57

Today

Total

Link

Recent Comments

관리 메뉴

연의 기록 🪁

JavaScript 내용정리 - 3 본문

WEB/HTML+CSS+JS

JavaScript 내용정리 - 3

kite707 2021. 1. 3. 02:23

https://opentutorials.org/course/3085/18879

조건문 예고 - 생활코딩

조건문 예고 2017-12-02 00:14:09

opentutorials.org

여기서 부터 공부 시작이다.

조건문 기초

조건문은 다른 프로그래밍을 해봤다면 내용이 같아서 실습만 해보고 넘어갔다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1>Conditional statements</h1>
    <h2>Program</h2>
    <script>
      document.write("1<br>")
      document.write("2<br>")
      document.write("3<br>")
      document.write("4<br>")
      </script>
      <h2>If-true</h2>
      <script>
        document.write("1<br>")
        if(true){
            document.write("2<br>")
        }
        else{
            document.write("3<br>")
        }
        document.write("4<br>")
        </script>
        <h2>If-false</h2>
        <script>
          document.write("1<br>")
          if(false){
              document.write("2<br>")
          }
          else{
              document.write("3<br>")
          }
          document.write("4<br>")
          </script>
  </body>
</html>

조건문 활용

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>WEB1 - JavaScript</title>
  </head>
  <body>
    <h1><a href="index.html">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">HTML</a></li>
        <li><a href="2.html">CSS</a></li>
        <li><a href="3.html">JavaScript</a></li>
      </ol>
      <h2>JavaScript</h2>
      <p>
        JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content production. It is used to make webpages interactive and provide online programs, including video games. The majority of websites employ it, and all modern web browsers support it without the need for plug-ins by means of a built-in JavaScript engine. Each of the many JavaScript engines represent a different implementation of JavaScript, all based on the ECMAScript specification, with some engines not supporting the spec fully, and with many engines supporting additional features beyond ECMA.
      </p>
  </body>
</html>

위에서 배운대로 querySelector을 이용해서 값을 가져온 뒤 그 값이 night일때 day일때를 구분하여 코드를 작성해주면 된다.

옆에 값이 변하는 것까지 잘 관찰할 수 있다.

리팩토링 중복의 제거

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>WEB1 - JavaScript</title>
  </head>
  <body>
    <h1><a href="index.html">WEB</a></h1>
    <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">HTML</a></li>
        <li><a href="2.html">CSS</a></li>
        <li><a href="3.html">JavaScript</a></li>
      </ol>
      <h2>JavaScript</h2>
      <p>
        JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content production. It is used to make webpages interactive and provide online programs, including video games. The majority of websites employ it, and all modern web browsers support it without the need for plug-ins by means of a built-in JavaScript engine. Each of the many JavaScript engines represent a different implementation of JavaScript, all based on the ECMAScript specification, with some engines not supporting the spec fully, and with many engines supporting additional features beyond ECMA.
      </p>
  </body>
</html>

시작 코드는 이렇게 시작한다.

이렇게 변수 선언을 하고 표시한 부분을 target으로 바꿀 수 있다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>WEB1 - JavaScript</title>
  </head>
  <body>
    <h1><a href="index.html">WEB</a></h1>
    <input id ="night_day" type="button" value="night" onclick="
    var target=document.querySelector('body');  //변수를 선언하고 코드를 대체한다.
    if(document.querySelector('#night_day').value==='night'){
      target.style.backgroundColor='black';
      target.style.color='white';
      document.querySelector('#night_day').value='day';
    }
    else{
      target.style.backgroundColor='white';
      target.style.color='black';
      document.querySelector('#night_day').value='night';
    }
  ">
      <ol>
        <li><a href="1.html">HTML</a></li>
        <li><a href="2.html">CSS</a></li>
        <li><a href="3.html">JavaScript</a></li>
      </ol>
      <h2>JavaScript</h2>
      <p>
        JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content production. It is used to make webpages interactive and provide online programs, including video games. The majority of websites employ it, and all modern web browsers support it without the need for plug-ins by means of a built-in JavaScript engine. Each of the many JavaScript engines represent a different implementation of JavaScript, all based on the ECMAScript specification, with some engines not supporting the spec fully, and with many engines supporting additional features beyond ECMA.
      </p>
  </body>
</html>

또 아래처럼 this를 이용해서 코드를 간결하게 만들 수 있다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>WEB1 - JavaScript</title>
  </head>
  <body>
    <h1><a href="index.html">WEB</a></h1>
    <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">HTML</a></li>
        <li><a href="2.html">CSS</a></li>
        <li><a href="3.html">JavaScript</a></li>
      </ol>
      <h2>JavaScript</h2>
      <p>
        JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content production. It is used to make webpages interactive and provide online programs, including video games. The majority of websites employ it, and all modern web browsers support it without the need for plug-ins by means of a built-in JavaScript engine. Each of the many JavaScript engines represent a different implementation of JavaScript, all based on the ECMAScript specification, with some engines not supporting the spec fully, and with many engines supporting additional features beyond ECMA.
      </p>
  </body>
</html>

배열

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1>Array</h1>
    <h2>Syntax</h2>
    <script>
      var coworkers=["egoing","leezche"];
      </script>
      <h2>get</h2>
      <script>
        document.write(coworkers[0]);
        </script>
  </body>
</html>

push

var fruits=["Banana","Orange","Apple","Mango"];
fruits.push("kiwi");
//fruits =["Banana","Orange","Apple","Mango","Kiwi"]

length

var fruits=["Banana","Orange","Apple","Mango"];
document.write(fruits.length);
//결과 -> 4

아래 링크에서 더 많은 정보를 얻을 수 있다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

Array - JavaScript | MDN

JavaScript Array 전역 객체는 배열을 생성할 때 사용하는 리스트 형태의 고수준 객체입니다.배열은 프로토타입으로 탐색과 변형 작업을 수행하는 메서드를 갖는, 리스트와 비슷한 객체입니다. JavaSc

developer.mozilla.org

반복문

다른 프로그래밍 언어와 문법이 거의 비슷하다. 이제 배열과 반복문을 함께 사용해보도록 하자.

<h1>Loop & Array</h1>
    <script>
      var coworkers = ['egoing','leezche','duru','taeho'];
    </script>
    <h2>Co workers</h2>
    <ul>
      <script>
        var i = 0;
        while(i < coworkers.length){
          document.write('<li>'+coworkers[i]+'</li>');
          i = i + 1;
        }
      </script>
</ul>

이런식으로 배열에 있는 값을 하나씩 꺼내와서 리스트를 만드는데 사용할 수 있다.

배열과 반복문의 활용

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>WEB1 - JavaScript</title>
  </head>
  <body>
    <h1><a href="index.html">WEB</a></h1>
    <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">HTML</a></li>
        <li><a href="2.html">CSS</a></li>
        <li><a href="3.html">JavaScript</a></li>
      </ol>
      <h2>JavaScript</h2>
      <p>
        JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content production. It is used to make webpages interactive and provide online programs, including video games. The majority of websites employ it, and all modern web browsers support it without the need for plug-ins by means of a built-in JavaScript engine. Each of the many JavaScript engines represent a different implementation of JavaScript, all based on the ECMAScript specification, with some engines not supporting the spec fully, and with many engines supporting additional features beyond ECMA.
      </p>
  </body>
</html>

이 코드에서 실습을 시작한다. 우선 마우스 우클릭 -> 검사 -> Esc키 를 눌러 콘솔창을 열도록 하자.

그런다음 <a>태그로 둘러싸인 부분을 가져오는 시도를 한다. queruSelector은 해당 태그로 감싸진 첫번째 태그 내용만을 가져오기 때문에 querySelectorAll을 사용한다. 아래 사진을 보면 결과값이 리스트의 형태로 리턴됨을 알 수 있다.

콘솔창에서 아래와 같이 하면 값을 콘솔창에서 볼 수 있다.

consle.log("출력할내용")

이것과 반복문을 이용해 <a>태그로 감싸진 부분을 모두 출력해보자. 코드는 이렇게 입력하면 된다.

var alist=document.querySelectorAll('a');
var i=0;
while(i<alist.length){
console.log(alist[i]);
i=i+1;
}

이를 이용하여 일괄적으로 값을 바꿔보도록 하자.

var alist=document.querySelectorAll('a');
var i=0;
while(i<alist.length){
console.log(alist[i]);
i=i+1;
}

이를 이용해서 전체 코드를 수정하면 아래와 같다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>WEB1 - JavaScript</title>
  </head>
  <body>
    <h1><a href="index.html">WEB</a></h1>
    <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'; //변경된 부분
      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;
      }
    }
  ">
      <ol>
        <li><a href="1.html">HTML</a></li>
        <li><a href="2.html">CSS</a></li>
        <li><a href="3.html">JavaScript</a></li>
      </ol>
      <h2>JavaScript</h2>
      <p>
        JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content production. It is used to make webpages interactive and provide online programs, including video games. The majority of websites employ it, and all modern web browsers support it without the need for plug-ins by means of a built-in JavaScript engine. Each of the many JavaScript engines represent a different implementation of JavaScript, all based on the ECMAScript specification, with some engines not supporting the spec fully, and with many engines supporting additional features beyond ECMA.
      </p>
  </body>
</html>

잘 작동하는 모습을 볼 수 있다.

'WEB > HTML+CSS+JS' 카테고리의 다른 글

바닐라 스크립트 - part 2 정리 (0)	2021.01.04
JavaScript 내용정리 - 4 (0)	2021.01.04
JavaScript 내용정리 - 2 (0)	2021.01.02
JavaScript 내용정리 - 1 (0)	2021.01.01
CSS 내용정리 - 선택자 (0)	2020.12.31

'WEB/HTML+CSS+JS' Related Articles