멀리 보는 연습

생활코딩 - WEB2 Javascript로 복습하기 본문

생활코딩/WEB2

생활코딩 - WEB2 Javascript로 복습하기

푸실리 2022. 1. 24. 08:51

 

학원에서 배운 javascript가 너무 엉망이었기 때문에, 시간이 걸리더라도 기본 개념을 짚고 넘어가야겠다 싶었다. 다시 듣다보니 국비지원의 한계인지 강사를 잘못 만난 탓인지 나는 javascript를 배웠다고 하기도 부끄러운 정도의 지식을 가지고 있었다. 하하~ 

  

 

WEB2 - JavaScript - 생활코딩

수업소개 이 수업은 https://opentutorials.org 를 만들어가면서 JavaScript에 대한 지식과 경험을 동시에 채워드리기 위한 목적으로 만들어진 수업입니다.  수업대상 이 수업은 웹 페이지를 사용자와 상

opentutorials.org

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1>JavaScript</h1>
    <script type="text/javascript">
      document.write(**1+1**);
    </script>
    <h1>html</h1>
    **1+1**
  </body>
</html>

똑같은 1+1을 입력했지만, 자바스크립트는 1+1을 연산한 값을 출력한다.

이벤트

통상 이벤트라고 하는 것은 특정 자바스크립트가 실행되는 것을 말한다.

<input type="button" name="" value="hi" onclick="alert('hi')">
<input type="text" onchange="alert('changed')" name="" value="">
<input type="text" onkeydown="alert('key down!')" name="" value="">

onclick, onchange, onkeydown 등등

콘솔

컴퓨터 계산기를 쓰듯 웹 페이지 콘솔창을 활용해서 자바 스크립트를 입력해볼 수 있다.

ex_ console 창을 열고 alert(’입력할 글자’.length)를 입력하면 입력한 글자수를 alert로 알려준다. 물론 그냥 입력해도 보인다.

 

데이터타입 - 문자열과 숫자

문자열에 대한 공식?을 사전처럼 정리해놓은 사이트

 

String - JavaScript | MDN

String 전역 객체는 문자열(문자의 나열)의 생성자입니다.

developer.mozilla.org

 

변수와 대입 연산자

변수는 variable 상수는 constant

선택자

※ class는 그룹핑하기 위한 것이고, id는 식별하기 위한 것이기 때문에 원칙적으로 id는 중복할 수 없다. 중복하여 선택자를 지정하려면 그룹핑하는데 쓰이는 class를 활용할 것. 따라서 class 선택자가 더 포괄적. 또한 id 선택자가 상위에 있는 것.

다크모드

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

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

  ">

onclick 태그를 활용하여 자바스크립트를 실행할 수 있음. document.querySelector('body') 태그가 중복되니까

var target = document.querySelector('body');
<input type="button" name="" value="night" onclick="
    target.style.backgroundColor = 'black';
    target.style.color = 'white';

  ">
  <input type="button" name="" value="day" onclick="
    target.style.backgroundColor = 'white';
    target.style.color = 'black';

  ">

이렇게 target 변수 선언 후 사용하면 한결 편안..~

 

진화한 다크모드

<!DOCTYPE html>
<html>

<head>
  <title>WEB1 - JavaScript</title>
  <meta charset="utf-8">
  <script>
    function nightDayHandler(self){
      var target = document.querySelector('body');
      if(self.value === 'night'){
        target.style.backgroundColor = 'black';
        target.style.color = 'white';
        self.value = 'day';

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

      } else {
        target.style.backgroundColor = 'white';
        target.style.color = 'black';
        self.value = 'night';

        var alist = document.querySelectorAll('a');
        var i = 0;
        while(i<alist.length){
          alist[i].style.color = 'blue';
          i+=1;
        }
      }
    }
  </script>
</head>
<body>
  <h1><a href="index.html">WEB</a></h1>

  <input type="button" name="" value="night" onclick="nightDayHandler(this)">

  <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>

  <h1><a href="https://github.com/eclipsepeach" target="_blank" title="go to eclipsepeach">HTML 정복</a></h1>
  <p>
    Now Bootstrap is going to say "at the small size, look at classes with -sm- in them and use those. At the medium size, look at classes with -md- in them and use those. At the large size, look at classes with the word -lg- in them and use those.
    The following example will result in a 25%/75% split on small devices, a 50%/50% split on medium devices, and a 33%/66% split on large, xlarge and xxlarge devices. On extra small devices, it will automatically stack
  </p>

	/*onclick에 직접 js를 넣어도 된다.*/
  <input type="button" name="" 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';
    }
  ">

</body>
</html>

 

배열

input type="button" name="" 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+=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+=1;
      }**
    }
  ">

 

배열 문법

 

Array - JavaScript | MDN

JavaScript Array 클래스는 리스트 형태의 고수준 객체인 배열을 생성할 때 사용하는 전역 객체입니다.

developer.mozilla.org

다 외울 필요는 없고, 검색해봐도 무방~

length, push, pop, shift...

함수

함수란 쉽게 말해서 function, 작업을 수행하거나 값을 계산하는 문장 집합 같은 자바스크립트 절차이다.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1>function</h1>
    <h2>Basic</h2>
    <ul>
      <script>
        **function** two(){
          document.write('<li>2-1</li>');
          document.write('<li>2-1</li>');
        }

        document.write('<li>1</li>');
        two();
        document.write('<li>3</li>');
        two();

      </script>
    </ul>

    <h2>Parameter & arguments</h2>
    <script>
      **function** onePlusOne() {
        document.write(1+1+'<br>');
      }
      onePlusOne();

      **function** sum(left,right){
        document.write(left+right+'<br>');
      }
      sum(2,3);
      sum(3,4);
    </script>

    <h2>Return</h2>
    <script>
      **function** sum2(left, right){
        return left+right;
      }
      document.write(sum2(2,3)+'<br>');
      document.write('<div style="color:red;">'+sum2(2,3)+'</div>');
      document.write('<div style="font-size:3rem;">'+sum2(2,3)+'</div>');

    </script>

  </body>
</html>

🌟함수 리펙토링

<!DOCTYPE html>
<html>

<head>
  <title>WEB1 - JavaScript</title>
  <meta charset="utf-8">
  <script>
    var Links = {
      SetColor:function(color){
        var alist = document.querySelectorAll('a');
        var i = 0;
        while(i<alist.length){
          alist[i].style.color = color;
          i+=1;
        }
      }
    }
    var body = {
      SetColor:function(color){
        document.querySelector('body').style.color = color;
      } ,
      SetBackgroundColor:function(color){
        document.querySelector('body').style.backgroundColor = color;
      }
    }

    function nightDayHandler(self){
      var target = document.querySelector('body');
      if(self.value === 'night'){
        body.SetBackgroundColor('black');
        body.SetColor('white');
        self.value = 'day';

        Links.SetColor('powderblue');


      } else {
        body.SetColor('black');
        body.SetBackgroundColor('white');
        self.value = 'night';

        Links.SetColor('blue');

      }
    }
  </script>
</head>
<body>
  <h1><a href="index.html">WEB</a></h1>

  <input type="button" name="" value="night" onclick="nightDayHandler(this)">

  <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>

  <h1><a href="https://github.com/eclipsepeach" target="_blank" title="go to eclipsepeach">HTML 정복</a></h1>
  <p>
    Now Bootstrap is going to say "at the small size, look at classes with -sm- in them and use those. At the medium size, look at classes with -md- in them and use those. At the large size, look at classes with the word -lg- in them and use those.
    The following example will result in a 25%/75% split on small devices, a 50%/50% split on medium devices, and a 33%/66% split on large, xlarge and xxlarge devices. On extra small devices, it will automatically stack
  </p>

  <input type="button" name="" 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';
    }
  ">

</body>
</html>

 

 

 

핵심 : 비슷한 함수는 배열로 묶어서 보기 편하게 관리할 수 있다.

var body = {
      SetColor:function(color){
        document.querySelector('body').style.color = color;
      } ,
      SetBackgroundColor:function(color){
        document.querySelector('body').style.backgroundColor = color;
      }
    }

body라는 변수 안에 SetColor라는 함수와 SetBackgroundColor라는 함수를 배열 형태로 넣었고,

꺼내서 쓸때는

body.SetColor('black');
body.SetBackgroundColor('white');

이렇게 꺼내면 된다. 

 

 

요새 노션을 계속 쓰다보니 블로그에 소홀해지게 된다. 주기적으로 옮겨 적어야겠다. 복습할겸~

저작자표시

'생활코딩 > WEB2' 카테고리의 다른 글

생활코딩 - WEB2 Node.js 1편  (0) 2022.02.06
'생활코딩/WEB2' Related Articles more
Comments