8주차 정리

8주차 정리

2022. 6. 26. 17:39ㆍ22-1학기/웹 기초(WEB BASIC)

생활코딩 Javascript – 30. 객체 쓰기와 읽 기 ~ 35. 라이브러리와 프레임워크

실습

30. 객체 쓰기와 읽기

정보의 양이 많아졌을 때 서로 연관된 정보를 정리정돈하기 위해 배웠던 도구 : 배열

순서에 따라 정보를 정리 정돈함

배열 : 정보를 담는 그릇 , 정보가 순서대로 저장됨

-> 순서 없이 정보를 저장하는 것 : 객체

->이름이 있는 정리정돈 상자 : 객체

-객체의 문법

Create : 생성하는 법

객체를 만들 때 사용하는 기호 : object literal, 중괄호{}

coworkers.programmer : 여기서 '.'는 object access operator라고 불리며, 객체 coworkers에 접근하는 오퍼레이터이다.

31. 객체와 반복문

객체에 있는 데이터를 가져와야 하는 경우 : for in

  for(var key in coworkers) {

      }

: coworkers라는 변수가 가리키는 객체에 있는 key 값들을 가져오는 반복문임

즉, coworkers에 있는 키를 하나하나 꺼내 중괄호에 있는 코드를 실행해 주는 명령

key : 가져오고 싶은 정보에 도달할 수 있는 열쇠 : bookkeeper, data scientist

coworkers라고 하는 객체에 대괄호 사용

32. 객체프로퍼티와 메소드

coworkers라는 객체에 메소드를 추가하는 방법 : function() {} 함수 사용

함수가 소속된 객체를 가리키는 약속된 기호 : this 사용

-> 변수의 이름이 바뀌어도 이 this는 자기 자신의 가리키기 때문에 영향을 받지 않음

showAll이 coworkers에 소속된 데이터이기 때문에 showAll도 화면에 표시가 됨. 이 문제를 없애기 위해서는 for문 안에 있는 if문으로 showAll을 제외함.

객체에 소속된 함수 : 메소드라고 함

객체에 소속된 변수 : 프로퍼티라고 함

33. 객체의 활용

Body.setBackgroundColor('black')와 같은 식으로 코딩을 하려면

함수의 이름으로 중복되지 않도록 해놨던 코드를 바꿔서 Body라고 하는 변수에 객체를 담는다.

그리고 객체의 프로퍼티(property)로 setColor를 지정한 다음 function 사용하기

우리가 사용해온 document가 객체이고 .querySelector('body')는 함수이면서 객체에 소속되어 있었기 때문에 메소드임

34. 파일로 쪼개서 정리 정돈하기

이전에 배운 정리 정돈의 도구 : 함수, 객체 + 서로 연관된 코드들을 파일로 묶어서 그룹핑하기

그룹핑하기 위해서

여기에 있는 input 태그를 배포해야 함

<input id="night_day" type="button" value="night" onclick="
    nightDayHandler(this);
 ">

그런데 night 버튼을 눌러도 작동을 하지 않는다. 자바스크립트가 따라가지 않았기 때문이다.

따라서 아래의 자바스크립트 코드도 따라가야 한다.

  <script>
  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;
      }
    }
  }
  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.setBackgroundColor('white');
        Body.setColor('black');
        self.value = 'night';

        Links.setColor('blue');
      }
  }
  </script>

색을 한번에 바꾸기 위해서 파일을 쪼개는 법을 사용하기 -> colors.js라는 파일을 만들기

  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;
      }
    }
  }
  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.setBackgroundColor('white');
        Body.setColor('black');
        self.value = 'night';

        Links.setColor('blue');
      }
  }

이렇게 colors.js파일을 만들면 색상을 바꿀 때 전체 파일들을 바꾸는 게 아니라 colors.js 파일만 바꾸면 되므로 훨씬 간편해진다. 또 코드가 가독성이 좋아지고 명확해진다.

35. 라이브러리와 프레임워크

-프레임워크 : 만들고자 하는 것이 있을 때 만들고자 하는 것이 무엇이냐에 따라 달라지는 부분이 있는데 그 중에서 공통적인 부분은 프레임워크라는 것이 만들어놓고 , 만들고자하는 것의 기능에 따라 달라지는 부분만 살짝 수정하는 걸 통해서 만들고자 하는 것을 처음부터 끝까지 만들지 않도록 해주는 반제품과 같은 것임

라이브러리와 프레임워크 모두 다른 사람과 협력하는 모델이다.

자바스크립트의 라이브러리 중 가장 유명한 게 jQuery라고 하는 라이브러리이다. 이 라이브러리를 사용하면 생산성이 훨씬 높아진다.

-또 다른 편리한 방법은 CDN임.

많은 라이브러리들이 CDN이라는 걸 통해서 자신들의 서버에 파일을 보관해놓고 우리는 그것을 통해서 script src를 가져갈 수 있도록 한다.

실습

a.html

<!doctype html>
<html>
<head>
  <title>MENU - 한식</title>
  <meta charset="utf-8">
</head>
<body>
  <style>
  h2{
    border: 5px solid orange;
    padding:20px;
    margin: 20px;
    display: block;
    width: 100px;
  }
  body {
    margin: 0;
  }
  }
    a {
      color:black;
      text-decoration: none;
    }
    #active {
      color:red;
    }
    .saw {
      color:gray;
    }
    h1 {
      font-size:45px;
      text-align: center;
      border-bottom:1px solid gray;
    }
  </style>

  <h1><a href="home.html">MENU</a></h1>
  <ol>
    <li><a href="a.html">한식</a></li>
    <li><a href="b.html">양식</a></li>
    <li><a href="c.html">중식</a></li>
    <li><a href="d.html">일식</a></li>
  </ol>
  <h2>한식</h2>
  <p><img src="han_1.jpg" width="20%">
    <img src="han_2.jpg" width="20%">
    <img src="han_3.jpg" width="20%">
    <img src="han_4.jpg" width="20%">
    <img src="han_5.jpg" width="20%">
</p>
</body>
</html>

b.html

<!doctype html>
<html>
<head>
  <title>MENU - 양식</title>
  <meta charset="utf-8">
</head>
<body>
  <style>
  h2{
    border: 5px solid orange;
    padding:20px;
    margin: 20px;
    display: block;
    width: 100px;
  }
  body {
    margin: 0;
  }
  }
    a {
      color:black;
      text-decoration: none;
    }
    #active {
      color:red;
    }
    .saw {
      color:gray;
    }
    h1 {
      font-size:45px;
      text-align: center;
      border-bottom:1px solid gray;
    }
  </style>
  <h1><a href="home.html">MENU</a></h1>
  <ol>
    <li><a href="a.html">한식</a></li>
    <li><a href="b.html">양식</a></li>
    <li><a href="c.html">중식</a></li>
    <li><a href="d.html">일식</a></li>
  </ol>

  <h2>양식</h2>
  <p>
    <img src="us_1.jpg" width="20%">
    <img src="us_2.jpg" width="20%">
    <img src="us_3.jpg" width="20%">
    <img src="us_4.jpg" width="20%">
    <img src="us_5.jpg" width="20%">
    <img src="us_6.jpg" width="20%">
    <img src="us_7.jpg" width="20%">
    <img src="us_8.jpg" width="20%">
</p>
</body>
</html>

c.html

<!doctype html>
<html>
<head>
  <title>MENU - 중식</title>
  <meta charset="utf-8">
</head>
<body>
  <style>
  h2{
    border: 5px solid orange;
    padding:20px;
    margin: 20px;
    display: block;
    width: 100px;
  }
  body {
    margin: 0;
  }
  }
    a {
      color:black;
      text-decoration: none;
    }
    #active {
      color:red;
    }
    .saw {
      color:gray;
    }
    h1 {
      font-size:45px;
      text-align: center;
      border-bottom:1px solid gray;
    }
  </style>
  <h1><a href="home.html">MENU</a></h1>
  <ol>
    <li><a href="a.html">한식</a></li>
    <li><a href="b.html">양식</a></li>
    <li><a href="c.html">중식</a></li>
    <li><a href="d.html">일식</a></li>
  </ol>
  <h2>중식</h2>
  <p>
    <img src="ch_1.jpg" width="20%">
    <img src="ch_2.jpg" width="20%">
    <img src="ch_3.jpg" width="20%">
</p>
</body>
</html>

d.html

<!doctype html>
<html>
<head>
  <title>MENU - 일식</title>
  <meta charset="utf-8">
</head>
<body>
  <style>
  h2{
    border: 5px solid orange;
    padding:20px;
    margin: 20px;
    display: block;
    width: 100px;
  }
  body {
    margin: 0;
  }
  }
    a {
      color:black;
      text-decoration: none;
    }
    #active {
      color:red;
    }
    .saw {
      color:gray;
    }
    h1 {
      font-size:45px;
      text-align: center;
      border-bottom:1px solid gray;
    }
  </style>
  <h1><a href="home.html">MENU</a></h1>
  <ol>
    <li><a href="a.html">한식</a></li>
    <li><a href="b.html">양식</a></li>
    <li><a href="c.html">중식</a></li>
    <li><a href="d.html">일식</a></li>
  </ol>
  <h2>일식</h2>
  <p>
    <img src="ja_1.jpg" width="20%">
    <img src="ja_2.jpg" width="20%">
    <img src="ja_3.jpg" width="20%">
    <img src="ja_4.jpg" width="20%">
    <img src="ja_5.jpg" width="20%">
</p>
</body>
</html>

home.html

<!doctype html>
<html>
<head>
  <title>MENU - Welcome</title>
  <meta charset="utf-8">
</head>
<style>
  h1{
    border: 5px solid orange;
    padding:20px;
  }
</style>
<body>
  <h1><a href="home.html">MENU</a></h1>
  <p>메뉴 소개</p>
  <ol>
    <li><a href="a.html">한식</a></li>
    <li><a href="b.html">양식</a></li>
    <li><a href="c.html">중식</a></li>
    <li><a href="d.html">일식</a></li>
  </ol>
</body>
</html>