WEB/HTML+CSS+JS

JavaScript 내용정리 - 4

kite707 2021. 1. 4.

함수

다른 언어와 활용이 유사해서 실습만 해보고 넘어가도록 하겠다.

<!DOCTYPE html>
<html>
<h1>Function</h1>
    <h2>Basic</h2>
    <ul>
      <script>
        function two(){
          document.write('<li>2-1</li>');
          document.write('<li>2-2</li>');
        }
        document.write('<li>1</li>');
        two();
        document.write('<li>3</li>');
        two();
      </script>
    </ul>
    <h2>Parameter & Argument</h2>
    <script>
      function onePlusOne(){
        document.write(1+1+'<br>');
      }
      onePlusOne();
      function sum(left, right){
        document.write(left+right+'<br>');
      }
      sum(2,3); // 5
      sum(3,4); // 7
    </script>
    <h2>Return</h2>
      </body>
</html>

함수 정의 방법

function(매개변수1, 매개변수2 ......){
 	함수 내용;
    }

함수의 리턴형에 대해 살펴보자.

<!DOCTYPE html>
<html>
<h1>Function</h1>
<h2>Basic</h2>
<ul>
  <script>
    function two(){
      document.write('<li>2-1</li>');
      document.write('<li>2-2</li>');
    }
    document.write('<li>1</li>');
    two();
    document.write('<li>3</li>');
    two();
  </script>
</ul>
<h2>Parameter & Argument</h2>
<script>
  function onePlusOne(){
    document.write(1+1+'<br>');
  }
  onePlusOne();
  function sum(left, right){
    document.write(left+right+'<br>');
  }
  function sumColorRed(left, right){
    // document.write('<div style="color:red">'+(left+right)+'</div><br>');
    document.write('<div style="color:red">'+left+right+'</div><br>');
  }
  sum(2,3); // 5
  sumColorRed(2,3); // 23  //자바스크립트는 문자와 숫자를 더하면 숫자를 문자로 간주하기 때문에
  //+를 덧셈이 아닌 문자결합연산자로 사용한다. 따라서 23이 나온다.
  sum(3,4); // 7
</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>

이 코드에서는 주석처리한 부분만 눈여겨 보면 될 듯 하다. 자바 스크립트는 문자와 숫자를 더하면 숫자를 숫자를 문자로 간주하기 때문에 +를 덧셈이 아닌 문자결합연산자로 사용한다.

객체

이번에는 객체를 생성하고, 데이터를 저장하고, 또 그 데이터에 접근해 볼 것이다.

객체를 생성하는 방법 + 데이터를 저장하는 방법

  var coworkers={
        "programmer":"egoing",
        "designer":"leezche"
      };

데이터는 이런식으로 추가할 수 도 있다.

      coworkers.bookkeeper="duru"; //coworkers는 객체 이름
      coworkers["data scientist"]="taeho"; //띄어쓰기가 있을 때

데이터에 접근하는 방법

      document.write("bookkeeper : "+coworkers.bookkeeper+"<br>");
      document.write("data scientist : "+coworkers["data scientist"]+"<br>");

즉 전체 코드와 실행내용은 아래와 같이 된다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1>Object</h1>
    <h2>Create</h2>
    <script>
      var coworkers={
        "programmer":"egoing",
        "designer":"leezche"
      };
      document.write("programmer : "+coworkers.programmer+"<br>");
      document.write("designer : "+coworkers.designer+"<br>");
      coworkers.bookkeeper="duru";
      coworkers["data scientist"]="taeho";
      document.write("bookkeeper : "+coworkers.bookkeeper+"<br>");
      document.write("data scientist : "+coworkers["data scientist"]+"<br>");
    </script>
  </body>
</html>

이제 객체와 반복문을 함께 사용해보자. 사용법은 파이썬과 상당히 유사하다. 우선 객체를 선언했던 부분을 보면

key : value 형식으로 데이터를 선언한다.

var 변수이름{
	key1 : value1
	key2 : value2
}

이러한 key value를 이용하여 반복문을 작성해보자.

      for(var key in coworkers){
        document.write(key+"<br>");
      }

이렇게 하면 key값만을 불러올 수 있다.

이제 이것을 이용해 위와 같은 코드를 작성해보면 아래와 같다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1>Object</h1>
    <h2>Create</h2>
    <script>
      var coworkers={
        "programmer":"egoing",
        "designer":"leezche"
      };
      document.write("programmer : "+coworkers.programmer+"<br>");
      document.write("designer : "+coworkers.designer+"<br>");
      coworkers.bookkeeper="duru";
      coworkers["data scientist"]="taeho";
      document.write("bookkeeper : "+coworkers.bookkeeper+"<br>");
      document.write("data scientist : "+coworkers["data scientist"]+"<br>");
    </script>
    <h1>Iterate</h1>
    <script>
      for(var key in coworkers){
        document.write(key+" : "+coworkers[key]+"<br>");
      }
    </script>
  </body>
</html>

실행 화면도 원래 작성했던 코드와 같은 결과를 보임을 알 수 있다.

이제 이것을 함수로 만들어사용하면 코드는 아래와 같다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1>Object</h1>
    <h2>Create</h2>
    <script>
      var coworkers={
        "programmer":"egoing",
        "designer":"leezche"
      };
      document.write("programmer : "+coworkers.programmer+"<br>");
      document.write("designer : "+coworkers.designer+"<br>");
      coworkers.bookkeeper="duru";
      coworkers["data scientist"]="taeho";
      document.write("bookkeeper : "+coworkers.bookkeeper+"<br>");
      document.write("data scientist : "+coworkers["data scientist"]+"<br>");
    </script>
    <h1>Iterate</h1>
    <script>
      for(var key in coworkers){
        document.write(key+" : "+coworkers[key]+"<br>");
      }
    </script>
    <h2>Property & Method</h2>
    <script>
      coworkers.showAll = function(){
        for(var key in this){
          document.write(key+' : '+this[key]+'<br>');
        }
      }
      coworkers.showAll();
    </script>
  </body>
</html>

이 코드에서 this는 함수가 포함된 객체를 의미한다. 다만 이렇게 코드를 작성하면

이렇게 맨 밑줄 부분도 화면에 나오는데 이것은 if문을 이용해서 지울 수 있다고 한다.

배운 객체를 이용해 앞서 만들었던 코드를 정리하면 아래와 같다.

<!doctype html>
<html>
<head>
  <title>WEB1 - JavaScript</title>
  <meta charset="utf-8">
  <body>
  <script>
  function LinksSetColor(color){
    var alist = document.querySelectorAll('a');
    var i = 0;
    while(i < alist.length){
      alist[i].style.color = color;
      i = i + 1;
    }
  }
  var Links = {
    setColor:function(color){
      var alist = document.querySelectorAll('a');
      var i = 0;
      while(i < alist.length){
        alist[i].style.color = color;
        i = i + 1;
      }
    }
  }
  function BodySetColor(color){
    document.querySelector('body').style.color = color;
  }
  function BodySetBackgroundColor(color){
    document.querySelector('body').style.backgroundColor = color;
  }
  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');
  }
  </script>
<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>

또 이곳에서 script부분만을 복사해서 파일명.js파일로 저장한 뒤

<script src="파일명.js"></script>

이렇게 하면 위의 <script></script>로 묶인 부분을 대체할 수 있다. 이렇게 하면 파일의 유지보수에 보다 편해진다.

라이브러리와 프레임워크

https://webclub.tistory.com/458

프레임워크와 라이브러리의 차이점

Framework Vs Library 프레임워크와 라이브러리의 정확한 차이점은 무엇일까요? 대중 알것 같지만 정확히 어떠한 차이점이 있는지 모르고 있는 경우가 많을지도 모릅니다. 프레임워크는 단지 미리 만

webclub.tistory.com

UI vs API

https://velog.io/@rimu/UI-API-%EC%97%90-%EB%8C%80%ED%95%9C-%EC%A0%95%EB%A6%AC

[웹 기초] UI & API 에 대한 정리

링크생활코딩 javascript 강의 중 ui & api 에 대한 강의를 듣고 그 내용을 정리해봤습니다. UI는 기본적으로 애플리케이션(이하 앱)을 사용하는 사용자(user) 가 시스템을 제어할 수 있게 만들어주는

velog.io

해당 부분들은 위 글들에 자세한 설명이 나와있다.

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

바닐라 스크립트 - part 3정리 (0)	2021.01.04
바닐라 스크립트 - part 2 정리 (0)	2021.01.04
JavaScript 내용정리 - 3 (0)	2021.01.03
JavaScript 내용정리 - 2 (0)	2021.01.02
JavaScript 내용정리 - 1 (0)	2021.01.01

JavaScript 내용정리 - 4

함수

객체

라이브러리와 프레임워크

UI vs API

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

댓글

티스토리툴바