032 javascript (2) 함수, 객체

Top

Daily Study/Web Dev

2021. 3. 25.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
  <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 = 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 = i + 1;
      }
    }
    }
  </script>
</head>
<body>
	<h1><a href="index.html">WEB</a></h1>
    <input type="button" 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>
  <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>
  <input type="button" value="night" onclick="
    if(this.value === 'night') {
      document.querySelector('body').style.backgroundColor = 'black';
      document.querySelector('body').style.color = 'white';
      this.value = 'day';
    }
      else {document.querySelector('body').style.backgroundColor = 'white';
      document.querySelector('body').style.color = 'black';
      this.value = 'night';
    }
    ">
</body>
</html>

함수는 여러 번 반복되는 코드같은게 있을 때

불필요하게 찾아다니면서 바꿀 필요 없이 쓸 수 있게 해준다.

function sum(left, right) { document.write(left+right)}

sum(2,3)

라고 하면

함수에서 left, right가 매개변수 parameter,

lef, right에 들어가는 값이 인자 argument가 된다.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
  <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>
</head>
<body>
	<h1><a href="index.html">WEB</a></h1>
    <input type="button" 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>
  <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>
  <input type="button" value="night" onclick="
    if(this.value === 'night') {
      document.querySelector('body').style.backgroundColor = 'black';
      document.querySelector('body').style.color = 'white';
      this.value = 'day';
    }
      else {document.querySelector('body').style.backgroundColor = 'white';
      document.querySelector('body').style.color = 'black';
      this.value = 'night';
    }
    ">
</body>
</html>

객체 object는 함수에 있어서 앞에서 나왔던 배열 같은 거였다.

계속 함수 이름이

setColor ( )

setBackgroundColor ( )

setBodyColor ( )

하면서 나가면 겹치기도 쉽고 구분하기가 힘드니까...

Body.setColor ( )

Body.setBackgroundColor ( )

하는 식으로 함수에도 디렉토리를 주는 것이다.

앞에서부터 계속 자연스럽게 나오던

document.querySelector ( ) 같은 것들도 객체였고

결국엔 그냥 결과물만 나오는게 아니라

그 결과물을 나중에 유지/보수 하기 얼마나 수월하게 할지

누가 봐도 논리가 이해되게 할지가

코딩을 잘하고 못하고 나뉘는 부분이었다.

객체지향 프로그래밍이란게 그 얘기였다.

똑같은걸 계속 반복되고 헷갈리게 비슷한 함수들을 계속 추가하는게 아니라

객체를 활용해서 정리하고 규칙을 부여하고

누가 봐도 알기 쉽게 짜는 것

아직은 내가 저런 부분까지 신경 쓸 실력은 아니지만

계속 생각은 해야될 것 같다.

디자인도 한동안은 그냥 툴 다루는데에만 급급해서

어떻게 되든 결과물에만 집착했었는데

결국엔 디자인이란 것의 근본으로 돌아가보면

문제해결과 실용성 이라는 점에서

코딩은 그냥 디자인 그 자체다.

그냥 어떤 도구를 사용하냐 차이일 뿐.

여담이지만 서브라임텍스트 컬러 테마를 바꿨는데

아직 익숙하지가 않아서 눈에는 잘 안 띄는데

색조합 자체는 맘에 굉장히 맘에 든다ㅋㅋㅋㅋㅋ

저작자표시

'Daily Study > Web Dev' 카테고리의 다른 글

033 css 연습 웬디 솔로 웹페이지 예제 만들기 (0)	2021.03.30
031 javascript 공부 (1) 비교연산자, boolean, 배열, 반복문 등 (0)	2021.03.23
030 html css 연습 (0)	2021.03.23
029 웹페이지 예제 실습 (3) script 적용 및 호스팅 (0)	2021.03.18
028 웹사이트 예제 실습 (2) css 적용 (0)	2021.03.18