본문 바로가기
Web Front-end 공부/Java script

생활코딩 Java script

by Hanachoi 2022. 5. 11.

 

  • 정적으로 구현된 html을 동적으로 만들어주고 사용자와 상호작용 할 수 있게 해주는게 자바스크립트
  • 웹브라우저는 화면에 한 번 출력된 이상, 자기자신을 바꿀 수 없음. 하지만 자바스크립트를 넣어주면 바디태그에 css의 스타일 속성을 넣어서 바디태그를 바꿔 줄 수 있음. 

 

# HTML meets JS : script tag 

  • <body>태그안에 <script>태그를 만들어서 코드를 작성하면 걔는 이제부터 자바스크립트의 코드가 되는 것이다.
  • <script>태그 안에 document.write("hello world!");를 작성하면 똑같이 웹페이지에 hello world!가 출력되는걸 볼수 있는데, 그렇다면 html과 java script의 차이가 뭘까?
  • 말했던데로 html은 정적, JS는 동적이라고 할 수 있다. 만약 1+1을 html안에 넣는다면 딱 저대로 1+1이 출력되지만, 자바스크립트 코드 안에 1+1을 넣으면 계산기 기능이 작동해서 2가 출력되는 것을 볼 수 있다. 

#HTML meets JS : Event

  • JS가 사용자와 상호작용을 할 때 핵심적인 역할을 하는 애
  • <body>안에 아래처럼 태그를 작성하면 웹상에서 HI라고 써진 버튼을 만들 수 있고, 클릭하면 hi라는 알림창이 뜨게 된다. 
  <input type="button" value="HI" onclick="alert('hi')">
  • html 문서를 보면, onclick의 속성에는 반드시 JS의 코드가 와야된다고 써져 있음. 
  • onclick 속성은 브라우저가 기억하고 있다가 onclick이 걸린 속성의 태그를 사용자가 클릭했을때, 자바스크립트의 문법에 따라 해석되고 웹이 동작될 거라고 적혀있다. 
  • 이렇게 웹브라우저 위에서 나타나는 일들을 사건, Event라고 함 
  • 웹브라우저에서 일어날 수 있는 event는 뭐가 있을까? 너무 많지만, 무언가를 클릭하던가, 글씨를 입력하거나, 내용이 변했을때 등의 이벤트들이 존재함. 
  • 우리는 검색을 통해 필요한 이벤트들을 알수 있지
  • [javascript keydown event attribute] : 요렇게 검색하면 사용자가 키보드를 눌렀을때 이벤트가 발생하도록 할 수 있지
  <input type="text" onkeydown="alert('key down!')">

 

# console

  • 우리는 파일을 만들어서 자바스크립트를 실행시켜 왔다. 하지만 경우에 따라서는 꼭 파일이 아니더라도 js 코드를 가볍게 실행해봐야 되는 상황도 있지. 이때는 [개발자도구]에서 console을 이용해서 js 코드를 써 볼 수 있다. 
  • 엄청~나게 긴 문장이 있는데 우리가 그 글자수를 알고 싶다면? 문장을' ' 로 감싸고 .length를 붙여주면 글자수를 알 수 있다. 
alert('').length
  • console에서 실행시키는 자바스크립트는 이 웹페이지를 대상으로 실행되는 것. 

 

#Data types - strings and numbers.

  • 한국말로는 자료형
  • boolean, null, undefiend, number, string, bigint, symbol 그리고 객체
  •  number라는 타입에서 가장 중요한건 연산. 덧셈, 뺼셈, 나누기, 곱셈 등이 가능 
  • string 은 " " 안에 들어가게 됨. '작은따옴표'도 사용 가능, 그냥 둘이 매치만 되면 됨 
  • [javascript string] 으로 검색해보면 string과 관련된 많은 옵션을 볼 수 있음 
  • ""안에 들어간 문자냐, 아니면 그냥 숫자냐에 따라서 값이 달라지기때문에 문자인지 숫자인지 항상 잘 구별해야된다. 

 

# variables and Assignment Operators

  • 여기에서 x는 변수(variable), =는 대입연산자라고 함. 오른쪽의 값은 왼쪽의 변수에 대입한다는 뜻. 대입연산자는 좌항과 우항을 결합해 우항의 값을 만들어 낸다는 뜻도 있다.
  • x는 대입을 통해서 값이 변할 수 있는 변수, 그래서 1 = 2; 이런식으로 하면 에러가 뜬다. 1은 항상 1이라 바뀔수 없기 때문, 이건 상수(constant)라고 함. 
  • 그렇다면 변수는 왜 쓰는 걸까? 어떤 글에서 egoing이라고 적힌 이름 1 억개를 leeche라고 바꿔야 한다고 생각해보자. 사람이 일일히 이름을 바꾸게 되면 분명 모든걸 정확히 바꿀 수 없는 실수가 일어 날 수 있다.  이때 내가 변수 name = 'egoing'; 이라고 지정하고 그 글안에 이름을 +name+으로 해두었다면 얼마든지 변수를 통해서 얼마든지 이름을 쉽게 모두 바꿀 수 있을 것.
  • var name = 'leeche' ; 변수를 지정할땐 var를 붙여줄것

 

# CSS  basics

  • 우리가 html 태그에서 class를 주면 css 파일에서 선택자로 .을 쓰고,  id라면 #으로 불러와야함. 
  • 만약  class와 id값 두 개 모두가 걸려있다면 우선순위는? css는 id값을 먼저 가져감. class는 그룹의 느낌이고 id는 고유한 값으로 한 번 쓰고 재활용이 안되게 되어있다. 그래서  class선택자는 포괄적이고 id선택자는 무언가를 정확하게 타겟팅하는 느낌이다. class는 광범위한 느낌으로 효과를 적용하고, 그안에서 예외적으로 디자인을 입히고 싶으면 id 값을 주면 된다. 
  • 모든 태그에 동일한 효과를 주고 싶다면? . 이나 #을 붙이지 않고 태그를 지칭하면 모든 태그에 동일한 디자인을 입힐 수 있다. 하지만 이럴때도 가장 우선순위는 id값이라서 id가 걸려있는 애는 id의 다자인을 따라간다. 

 

# Selecting a tag to control

  • 우리가 자바스크립트의 문법에 따라서 웹브라우저에게 html에서 body태그를 선택할 수 있도록 해야 동적으로 만들 코드를 작성해서 넣을 수 있을 것이다. 
  • 구글에 [javascript select tag by css selector]라고 치면 이 때 필요한 코드가 [document.querySelctor()]라는 정보를 얻을 수 있다. query는 '질문'이라는 뜻 
  • 이제 우리가 선택을 했으니 어떻게 스타일을 바꿀 수 있을까? [javascript element style]을 검색해보니, [document.querySelector("body").style]로 스타일을 불러올수 있다는걸 알아냈다. 
  • 그리고 전체 배경을 어떻게 바꿀지 알아보기 위해서 [javascript style backgorund color]라고 검색을 해보니 [document.querySelector("body").style.backgroundColor = "black" ; ]로 불러올 수 있는걸 알아냈다. 
  <input type="button" value="Night" onclick="
       document.querySelector('body').style.backgroundColor = 'black';
       document.querySelector('body').style.color = 'white';
    ">
  • 야간모드로 변경되는 버튼을 만드는 코드. 
  •  아래는 day 버튼을 누르면 변경되도록 만들어 둔것. 
    <input type="button" value="Day" onclick="
       document.querySelector('body').style.backgroundColor = 'white';
       document.querySelector('body').style.color = 'black';
    ">

 

#Program, programming and programmers 

  • 자바스크립트는 프로그래밍언어라고 부르지만 html은 프로그램 언어라고 부르지는 않는다. 
  • program 이라는 단어 안에는 기본적으로 '순서'라는 의미가 담겨있다. 이 순서를 만드는 행위를 programming , 만드는 사람을 programmer라고 부른다.
  • 이런 순서는 계속적으로 반복되게 되었고 그 때 마다 반복적인 작업을 하기 버거워지기 시작하면서, 컴퓨터 프로그래밍 언어라는걸 만들게 됨 
  • 시간의 순서에 따라서 실행되어야 될 기능을 프로그래밍 언어 문법에 맞게 실행되도록 쓸 수 있는 글을 만들게 되었고 그걸 컴퓨터에게 보여주면서 '실행해줘!"라고 하면 컴퓨터가 그 일을 시간의 순서에 따라서 실행하게 된다. 바로 이게 programe의 본질적인 의미다!
  • html 은 그런 기능이 없지만, 자바스크립트는 사용자와 상호적으로 반응하는 언어이므로 그 때 상황에 맞게 실행되어야 하는 기능이 필요한 것. 

 

 #Conditional Statements : Preview

  • 조건문은 복잡한 업무까지도 다를 수 있도록 해주는 도구
  • 우리가 이전에 만들었던 night, day버튼을 하나로 합쳐서 사용할때는 toggle이라는 기능을 이용할 수 있음 .

#comparison Operators and boolean data type.

  • 아래 코드를 <script>코드에 적어보면 화면에는 true 라는 값이 출력됨 
document.write(1===1);
  • +라는 이항연산자는 왼쪽과 오른쪽의 값을 더해서 값을 만들어 내는 것임. ===은 왼쪽과 오른쪽의 값을 비교해서 만약에 같다면, 이 값 자체가 true로 나오고 반대로 다르다면 false의 값을 출력하게 하는 것임. 좌항과 우항의 관계에 따라서 하나의 값을 만들어내는 연산자다. 그리고 이 true와 false 의 값을 모아서 boolean이라고 부르는 것. 
  • boolean 형식을 통해서 단순한 반복을 피하게 됨, 무한대의 값을 가진 number, string과는 다르게 boolean은 오직 두 개의 값으로만 이루어진 데이터 형식이다.
  •  1<2 에서 <는 &lt; 로 표현가능
  •  2>1 에서 >는 &gt;로 표현가능 

 

#conditional statements

  • IF문의 ()안에는 boolean 형식 (true or false) 의 형식이 온다. 

#Application of conditional Statements

  • night/day 버튼을 하나로 합치는 버튼을 만들어보자
  • 여기서 if문을 사용해서 지금 이버튼이 night 값이라면 여기에 해당되는 코드가 실행되고 아니라면 반대로 작용하는 코드를 만들거다. 
  • 아래처럼 생각해보는 것. 근데 여기서 우리가 이 새로만드는 버튼의 value값을 알아내는게 중요함! 그래서 이 input태그에 id값을 "night_day"로 주었고 콘솔창에서 이 id 값의 value값을 알아내는 코드를 쳐본다.
  <input id="night_day" type="button" name="" value="night" onclick="
    if(night){
    document.querySelector('body').style.backgroundColor = 'black';
    document.querySelector('body').style.color = 'white';
  }else{
    document.querySelector('body').style.backgroundColor = 'white';
    document.querySelector('body').style.color = 'black';
  }

 

  • [document,querySelector('#night_day').value;]로 검색을 해보면 이 태그의 value를 알 수 있음. 
  • 위의 코드를 통해서 id=night_day의 value값을 가져왔으니 , 이제는 if()안에 조건을 넣어줄 수 있게 된다.
  •   if(document.querySelector('#night_day').value === 'night') 로 작성해준다. 
  <input id="night_day" type="button" name="" value="night" onclick="
    if(document.querySelector('#night_day').vlaue == 'night'){
    document.querySelector('body').style.backgroundColor = 'black';
    document.querySelector('body').style.color = 'white';
  }else{
    document.querySelector('body').style.backgroundColor = 'white';
    document.querySelector('body').style.color = 'black';
  }
  • 이제는 night 모드로 바꼈지만, 다시 버튼을 누르면 day버전으로 바뀌진 않는다. 그럼 야간모드로 바꼈을 때(이코드가 실행되었을때), 이때의 value 값을 day로 다시 바꿔주면 된다. 그리고 day버전이 됐을때도 value값을 다시 night으로 바꿔주면 됨.
    <input id="night_day" type="button" name="" 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'
  }
  • 이런 원리다 : 처음에 화면에서는 day모드여서 하얀 화면이지. 여기서 buttonn을 누르면 value는 night으로 변경된다. 그럼 if(document.querySelector('#night_day').value === 'night') 부분이 true가 되서 아래의 코드가 실행되는것. 이 과정에서 마지막에 value 값을 day로 바꿔줬었지. 근데 비교하는건 우리의 if 부분이잖아? 그럼 여기가 false가 다시 되버리는거다. 그럼 else{}부분의 코드가 실행된다. 근데 else 부분에서도 마지막에 value값을 night으로 바꿔준다. 그러니까 계속적으로 버튼을 누를때마다 변경되는거다. 

 

#Refactoring - Removing duplicates

  • refactoring은 우리가 코딩을 하고나면 비효율적인 부분이 생기기 마련인데, 이 코드의 가독성을 높이고 중독을 없애고 유지보수를 좀 더 편하게 코드를 개선하는 작업을 말한다. 
  • 프로그램이 커짐에 따라 틈틈히 refactoring을 해야 좋은 프로그램을 짤 수 있다.
  • 만약에 위에서 만든 버튼을 스크롤하고 난 아래에도 넣고 싶을 수 있다. 하지만 똑같이 코드를 복사해서 아래에 붙이면 작동이 제대로 안되게 됨. 화면은 바뀌겠지만 버튼도 그대로고, 원래대로 작동하는 건 위쪽에 있는 버튼이 움직이는 것. 이걸 고치기 위해서는 위에 버튼이랑 아래의 버튼을 구별해줄 필요가 있다.
  • id=night_day 를 id=night_day2로 모두 수정해주면 이제부턴 여기서 잘 작동하게 됨 
  • 만약 이런식으로 바꿔야할 코드가 1억개 있다면 너무 불편할것. 그래서 이벤트안에서 발생하는 그 코드들은 그 코드가 속해있는 안에서는 그 태그를 가리킬 수 있는 특수한 약속된 이름이 있음 "this"
    <input id="night_day2" type="button" name="" value="night" onclick="
    if(document.querySelector('#night_day2').value === 'night'){
    document.querySelector('body').style.backgroundColor = 'black';
    document.querySelector('body').style.color = 'white';
    document.querySelector('#night_day2').value = 'day';
  }else{
    document.querySelector('body').style.backgroundColor = 'white';
    document.querySelector('body').style.color = 'black';
    document.querySelector('#night_day2').value = 'night';
  }
 ">
  • document.querySelector('#night_day') 사실 이 부분은 자기 자신을 가리키고 있는 함수라고 할 수 있다. 이 코드들을 모두 this로 바꿔주면 됨
  • 이렇게 this로 바꿔주면 우리는 더이상 id값을 참조하지 않아도 된다. 그래서 지워버려도 됨.
  <input  type="button" name="" 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';
  }
 ">

 

  • 위처럼 코드를 만들면 작동은 그대로 잘 되지만 코드 자체는 한결  단순해졌다.  
  • 또 한가지 수정하면 좋은 점은, document.querySelector('body') 부분이 계속 중복되어 사용되고 있다. 
  • 코딩을 잘하는 방법 중 하나는 중복을 끝까지 쫒아가서 다 없애버리는 것. 여러가지 기술들이 많이 나온 이유 자체가 이런 중복을 없애기 위해서 나온 경우일 가능성이 정말 높다. 
  • 이렇게 계속적으로 중복되고 있는 이 부분을 변수로 설정해주자. 
  • 변수로 설정 한뒤 이제 이 부분을 모두 target으로 바꿔주면 됨.
const target = document.querySelector('body');

 


#Arrays

  • 집에 살림살이가 늘어날수록 우리는 수납장을 더 사거나 집을 늘리는 식으로 보관할 장소를 더 들이게 된다. 
  • 프로그래밍에서도 우리는 굉장히 많은 데이터들을 다루고, 제각각 성격도 다름. 그냥 코딩을 하게되면 너무너무 복잡해지고 코딩이 더 힘들어 지는 순간이 온다. 우리가 살림살이들을 수납장 하나에 넣게되면 우리는 이제부터 수납장 하나만 생각하는 식으로 단순하게 일을 처리할 수 있다. 
  • 배열도 이런느낌
  • 데이터가 많아짐에따라 그 데이트를 그냥 둘 수  없기 때문에 데이터들을 담아두는 수납상자가 배열(array)이라고 생각하면 된다. 
  • 배열은 [] 안에 들어가게된다. ex. var coworkers =  ["egoing", "leeche"]; 이런식으로. 이변수에 배열이라는 새로운데이터 타입이 담기게 된것이다.
  • 여기서 내가 첫 번째로 담긴 데이터를 꺼내오고 싶다면? 
  • 컴퓨터는 0부터 센다. 인덱스 0은 항상 첫 번째 배열
document.write(coworkers[0]);
  • 그럼 들어있는 값이 몇 개인지는 어떻게 셀 수 있을까
document.wrtie(coworkers.length);
  • 데이터를 더 추가하고 싶다면?
coworkers.push('teaho');

 

 

#Loop Statements

  • 우리가 리스트같은걸 만드는데 그 안에 1억개의 리스트를 추가적으로 더 넣어야되는 상황이라고 생각해보자. 그럼 이때는 반복문을 사용해서 해결할 수 있다.
  • while 문을 사용할 수 있다.
  • while() 에서 괄호안은 if처럼 boolean형식으로, 이 안이 true이면 {} 안에 들어있는 함수들이 실행된다. 끝까지 돌았을때 다시 위로 올라가 true, false를 판단하고 계속 true면 계속 돌리게 되는 것. 만약 false가 된다면 {}밖에 있는 함수가 실행되게 된다. 
  while (true) {
        document.write('<li>2</li>');
        document.write('<li>3</li>');
      }
      document.write('<li>4</li>');
  • 반복문이 무한하게 실행될수도 있기 때문에 항상 종료시기를 잘 정해주는게 중요
  • 위 코드에서 {}안에 있는 두 줄의 코드가 3번 반복되게 하고 싶다면? 우리는 일단 변수를 정해줘야 한다. 변수는 관습적으로  i를 사용한다. 
  var i = 0;
      while (i<3) {
        document.write('<li>2</li>');
        document.write('<li>3</li>');
        i = i+1;
      }

  • 그럼 위처럼 코드가 3번 반복된 것을 볼 수 있다. 3번까지 23리스트가 발생했고 4가 되면서 while()의 조건이 false처리 되어 {}밖에 있던 코드가 실행되었다. 그래서 4가 출력된걸 볼 수 있다. 

#Arrays and Loop statements

  • 리스트를 작성하는데, 만약에 작성해야 될 리스트 목록이 1억개고, 태그도 <li>처럼 단순한 태그가 아니라면
    ? 그럼 이렇게 글목록을 작성하는게 보통일이 아니겠지. 그럼 연관된 데이터를 담는 방법은 배열이었고, 그 배열에 담긴 데이터를 순차적으로꺼내서 <li>로 만들어 줄 수 있는게 반복문!
  • 각각의 데이터를 배열을 만들어 넣어준다. 각각의 항목은 원소(element)라고 함
var coworkers = ['egoing','hana','haramm','monmon'];
    •  아래처럼 코드를 작성하면 <li>의 점들이 생기게 된다. 
    <script>
         var i = 0;
        while(i<4){
          document.write('<li></li>');
          i=i+1;
        }
     var i = 0;
        while(i<4){
          document.write('<li>'+coworkers[i]+'</li>');
          i=i+1;
        }
        
        //<li>안에 또 ''넣어서 감싸주는거 잊지말기//
  • 아까 만든 배열을 불러올 때는 ++ 안에 배열 이름을 써주고 [i] 변수를 넣어준다. 
  • 하지만 이 코드도 완벽하다고 말 할순 없음. 배열에 한명을 더 추가하거나 삭제시키면 그대로 작동하지 않는다. 
  • 데이터가 바뀌면 바뀐 데이터에 따라서 잘 바뀌는게 좋은 코딩
  • 만약 while( i < 4)안에 있는 저 변수가 배열의 길이만큼 알아서 움직인다면 우리가 일일히 이 숫자를 바꾸지 않아도 되겠지. 이때 쓸 수 있는 코드가 .length
   var i = 0;
        while(i<coworkers.length){
          document.write('<li>'+coworkers[i]+'</li>');
          i=i+1;
        }
  • 이제 우리는 코드를 일일히 바꾸지 않아도 된다. 예를들어, 만약에 저 <li>에 링크를 모두 걸고 싶다면?
  • 아래처럼 <a>를 걸어주면 일일히 바꾸지 않아도 모든 요소에 링크가 걸리게 된다. 
   var i = 0;
        while(i<coworkers.length){
          document.write('<li><a href="https://a.com/"> '+coworkers[i]+'</a></li>');
          i=i+1;
        }

 

#Application of Arrays and Loop statements

  • 야간모드일때는 링크들을 밝게, 주간모드에서는 링크들을 어둡게 만드는 설정을 해보자.
  • 일단 웹페이지에 있는 모든 <a>태그를 가져와보자. 여기서 [document.querySelector('a');]를 콘솔창에 치면 맨 위에 나오는 첫번째 <a>만 가져오게 된다. 그럼 전부다 가져오고 싶으면 어떻게 하면될까? 검색해보자
  • [javascript get element by css selector multiple]로 검색하면 querySelectorAll을 사용해야된다는걸 알 수 있다. 이거에 대해 모르겠다면 이 부분만 따로 검색해서 어떻게 사용하는지에 대한 설명을 참조해보자.
document.querySelectorAll('a')
//값으로 nodeList를 가져오고 [a,a,a,a]를 불러온다//
  • 그럼 얘 자체를 변수처리해서 console.log하면 ()안에 있는 결과가 콘솔창에 출력된다.
var alist = document.querySelectorAll('a');
console.log(alist[0]);
  • 그리고 얘는 배열이니까 length로 치면 값을 알아올 수 있다.
var alist = document.querySelectorAll('a');
console.log(alist.length);
  • 그럼 우리는 이제 뭘 할 수 있을까? 반복문을 이용해서 alist라는 저 변수에 담겨있는 태그들을 하나하나꺼내서 그것을 스타일 속성을 지정할 수 있지 않을까? 
  • alist라는 변수를 지정해 리스트를 담아주고, while문을 돌린다. i=0부터 시작한다는 변수를 설정하고 while()안 괄호에는 alist의 길이보다 작을때가지 반복된다는 설정을 담아준다. i는 1씩 증가한다는 코드와 alist의 변수가 console창에 찍히도록 console.log를 실행한다. 그러면 이 웹페이지에 가지고 있는 모든 <a> 태그의 링크를 받아볼 수 있다.
var alist = document.querySelectorAll('a');
var i = 0; 
while(i<alist.length){
    console.log(alist[i]);
    i=i+1;
  • alist[i]는 반복문이 진행될때마다 그 원소에 들어있는 <a>태그를 가리킨다. 
  • alist의 모든 원소인 <a>태그가 powder blue 색상으로 변하도록 코드를 작성해준다. 
var alist = document.querySelectorAll('a');
var i = 0; 
while(i<alist.length){
    alist[i].style.color = 'powderblue';
    i=i+1;
  • 그럼 다시 이 코드를 가져와서 우리가 만들어놨던 night/day button에 적용시켜준다. 
  • night모드일때는 파우더블루, day모드일때는 그냥 블루로 출력되도록 설정함. 
    <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 = 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;
      }
  }

★진짜 주의하자. 코드가 실행안되는경우가 너무 많고 그 대부분의 이유가 괄호, 콤마. 세미콜론등 사소하지만 정말 중요한 이 문자들 때문이다. 체크체크 또 체크★

 

#function  : preview

  • 우리가 위에서 만들었던 코드는 <input>안에 onclick에 붙어있는 함수다. 만약에 우리가 이런 버튼 1억개를 만들어야 한다면? 그리고 그 함수안에 있는 powderblue 색상을 다른색으로 일일히 바꿔야 한다면? 그리고 이 모든 것들이 정확하게 똑같은 구성으로 이루어져있는지 알고싶다면?(사실 이만큼도 충분히 길어서 눈으로 정확히 같은지 일일히 체크하기에는 무리가 있을 수도 있다.) 이런 상황에서 우리가 필요한게 바로 함수다.
  • <script></script>태그안에 우리가 여태까지 만들었던 코드를 넣어준다. 그리고 function이란 기능과 nightDayhandler라 설정하고 괄호안에 넣어준다.
  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;
        }
    }
  }

 

  • 원래 기존에 this.라고 붙어있던 부분은 self라고 모두 수정해주면 이 함수가 완성된다. 이 함수를 다시 원래 자리였던 onclick에 붙여준다. 그럼 그대로 실행은 잘 되지만 유지보수는 훨~~~씬 간편해진다. 만약 이 powderblue색상을 바꾸고 싶다면? 딱 이 함수로 돌아와 그색만 변경해주면 되니까 
  • 그리고 이 함수에 이름을 잘 붙여놨기 때문에 우리는 이 함수의 역할에 대해 정확히 알 수 있게 된다.

 

#function

  • 아래의 이미지처럼 우리는 리스트를 갖고 있다. 근데 만약 이 리스트 안에서 또 2-1, 2-2가 반복되는 형식이라면 우리는 반복문을 사용하고 싶을것이다. 하지만 만약에 저 리스트가 연속적인 반복이 아니라면?  그럼 반복문을 사용하는게 불가능해질 수도 있음.  그때 필요해지는게 함수.

  • 이때 우리는 저 반복되는 두가지 코드를 빼와서 함수를 만들어준다. 그리고 함수를 넣어주면,  함수를 만들어 준 뒤에도 웹은 똑같은 기능을 만들어내지만 유지보수적 측면에서 훨씬 더 효율적으로 바뀐다.
      <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>

 

  • 우리가 함수 이름 뒤에 ()를 붙이면 함수는 '이건 이 함수를 실행하고싶구나'라고 알게된다. 그리고 그 함수를 실행하게 된다. 

 

#Functions : Parameters and Arguments

  • 자판기를 생각해보자. 자판기 버튼을 누르는건 '입력', 그에 대한 제품을 받는건 '출력'이라고 할 수 있다. 이 세상 모든건 출력과 입력으로 이루어져 있다고 생각한다. 바로 이게 수학적으로는 함수!
  • 예를 들어 [document.write(1+1):] 이라는 함수가 있고 이게 엄청나게 어려운 내용의 코드라고 가정해보자. 이 때 이 코드르 1억번 돌려야 한다면 우리는 좌절하게 될것. 그래서 만들 수 있는게 바로 함수다. 
  • 그런데 (1+1)이라는 함수는 언제나 똑같이 실행되는 함수. 우리가 만약 입력값에 따라 다른 값이 출력되게 할 수 있다면 너무 좋겠지!

  • 위의 이미지처럼 sum 함수값에서 2+3 = 5, 3+4=7 처럼 값이 나오게 한다면 너무 좋겠지. 그래서 우리는 함수를 만들거다 
  • 그런데 ()안에 숫자가 2,3이 있는것처럼 우리가 만드는 function sum()의 괄호안에도 변수를 넣어줄 수 있다. 2의 자리를 left, 3의 자리를 right 라고 지정해준다. 바로 이게 매개변수(parameter)라고 부른다 
function sum(left,right){
	document.write(left+right+'<br>')	//br 은 왜 ''안에?  html의 태그는 그냥 단순한 문자열로 처리한다고 생각하자//
}
  • left의 값은 2 , right 의 값은 3이 들어올거라고 약속되어 있는 상태 
  • sum(2,3) 여기에서 우리가 함수로 전달하는 2와 3은 인자(argument)라고하고, 이 값들을 받아서 함수안으로 넣어주는건 매개변수(parameter)라고 부른다.

#Functions : Return 출력

  • 표현식이란(expression)? 1+1 은 숫자 2에 대한 표현식. 1===1이라면 true니까 true에 대한 표현식이 된다. 우리가 저번에 했던 것처럼 sum(2,3)을 실행하면 5라는 값을 얻고싶다. 그럼 얘를 5가 되는 표현식으로 만들고 싶다. 그럼 우리는 return 이라는 걸 알아야된다. 
  • 우리가 위에서 만든 코드를 보면 편리한 걸 알수 있다. 그냥 sum함수를 실행시키면 화면에다가 document.write해서 써주기까지 하니까. 좌항과 우항을 더하고 줄바꿈을하고 화면에 써주기까지 하니까. 얘만 필요한게 확실하면 이걸로 충분하다. 하지만 우리가 여기에 무언가를 더하는 작업이 매우 복잡하고 힘든 일이고 그렇게 더해진 결과를 다양한 방법으로 사용해야된다면 어떻게 할까? 일일히 복사를 해서 다른 효과를 적용시킨 다른 함수를 만들 수도 있다.
  • 하지만 그렇게 하기엔 우리가 상당히 많은 함수를 일일히 만들어야 될 수도 있다. 이때 우리는 return을 사용할 수 있다. 

 

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

    </script>
  • 우리는 sum2라는 함수가 계산이라는 기능만을 구현하게 만듬으로써, 저 원자화된 기능을 다양한 맥락에서 활용할수 있는 자유도가 생기는 것이다.
  • sum2는 함수라는걸 알수 있고 left, right라는 매개변수를 통해서 들어간 값을 return을 통해서 출력함으로써 다양한 용도로 함수를 활용할 수 있게 된다. 그래서 우리는 밑에서 색깔이나 크기를 조정하면서 코드를 짤 수 있게 된것이다. 

 

#Application of Functions.

  • 코드를 효율적으로 만드는 refactiroing에서 가장 중요한건 함수!
  • 위에서 day/night 버튼을 ngithDayHandler라는 함수로 만들고 그 함수를 <input onclick>태그에 붙여줬었다. 하지만 이 함수안에 this라고 값을 줬었던게 있었지? 이 this는 원래 이 이벤트가 소속되어있는 input 태그를 가르키도록 약속되어 있는데 우리가 독립된 함수를 만들게 되면 이 this는 더이상 input태그가 아니라 전역개체를 가리키게 됨. 웹브라우저에서는 윈도우를 가르킴. 그래서 이 this라는 값을 nightDayHandler라는 함수가 실행될때 input 태그를 가리키도록 this를 넣어줌
    <input type="button" name="" value="night" onclick="
    nightDayHandler(this);
  • 그리고 nightDayHandler함수로 돌아가서 this값이었던 매개변수를 self라고 칭해준다. 
  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;
        }
    }
  }
  • 이렇게 되면 이 버튼들이 일 억개 있다고해도 각각의 버튼은 알아서 잘 움직이는 애들이 된다. 

 

#object : preview 객체

  • 굉장히 중요하지만 굉장히 어려움 ㅠㅠ 함수라는 기반 위에서 객체라는것이 존재함. 여태까지 배운 내용이 심화된다고 생각하면 됨. 
  • 객체는 정리정돈의 수단중 하나.  프로그래밍을 하다보면 코드가 많아지고 잘 정리정돈하기 위해서 함수를 썼었지. 근데 또 함수가 많아지고 또 그것과 연관되어 있는 변수들이 많아지면 복잡도의 한계에 도달하게 된다. 연관된 함수와 변수를 같은 이름으로 그루핑에서 잘 정리정돈하기 위한 도구가 바로 객체다.
  • 위에서 만든 nightDayHandler를 보면 var alist 부분이 중복되는걸 볼 수 있다. 우리는 중복되는걸 보면 함수를 만들고 싶지. 
  • 그래서 아래와 같은 함수를 만들어서 그 코드를 넣어줬다. 근데 이 함수에서는 매개변수를 color로 받고 원래 'powderblue'라는 색이 있던 부분은 color 라는 매개변수를 넣어준다. 
    function setColor(color){
      var alist = document.querySelectorAll('a');
        var i = 0;
        while(i < alist.length){
          alist[i].style.color = color;
          i = i+1;
        }

    }
  • 그리고 원래 alist가 있던 부분에 아래처럼 함수를 넣어주고 그 안에 'powderblue' , Day 버전에는 'blue'로 설정해준다. 
setColor('powderblue');

 

 

  • 우리가 nightDayhandler안에서  [target.style.color = 'white';] 부분을 한번 보자. 물론 지금 여기에서는 상당히 간단한 코드여서 굳이 함수로 만들지 않아도 된다. 한줄이라도 의미가 불명확하거나 시간이 지나면 원래 무슨뜻이었는지 파악하기 어려울때는 함수를 통해서 그 로직에 이름을 부여하는 것도 좋은 전략 중 하나이다. 
  • 그래서 저 코드가 만약에 아주 긴 코드라고 생각해보자. 그럼 함수를 만들어서 정리를 해줘야겠지. 애도 색을 정하는 코드니까 function setColor라고 해준다고 하면, 우리는 위에서 이미 동일한 이름의 함수를 만들었기 때문에 또 이 이름으로 함수를 만들면 위에 있는 함수는 지워져버리는 일이 발생한다. 
  • 만약에 우리가 같은이름의 함수가 있다는걸 인지하지못하고 그냥 함수를 만들어버리게 된다면, 앞에있던 정말 중요했던 함수가 지워지거나 오류가 발생하는 문제가 생길수도 있겠지.
  • 그럼 이름이 충돌되지 않도록 이름을 잘 설정해주는게 필요하다. 
  • 위에서 만든 setColor함수는 링크의 색을 바꿔주는 애니까 linksSetColor라고 이름을 칭하고. 이제 새로 만들 함수는는 body의 색을 변경해주는 컬러니까 bodySetColor라고 이름을 설정해준다. 
    function bodySetcolor(color){
        document.querySelector('body').style.color = color;
        /*원래 target이었던 애는 nightDayhandler안에서 지정한 변수니까 그대로 두면 작동을 안한다.
        별로 안긴 코드니까 그냥 그대로 다시 때와서 target 대신해서 붙여준다*/
  function nightDayHandler(self){
      var target = document.querySelector('body');
      if(self.value === 'night'){
      bodySetBackgroundColor('black');
      bodySetcolor('white');
      self.value = 'day';

      linksSetColor('powderblue');

    }else{
      bodySetBackgroundColor('white');
      bodySetcolor('black');
      self.value = 'night';

      linksSetColor('blue');
    }
  }
  • 객체는 서로연관된 함수와 변수들을 정리정돈하기 위한 수납상자로서 존재하는 것.
  • 우리가 객체를 도입하면 어떻게 될까? 예를들어, 우리가 위해서 만든 bodySetBackgroundColor에서 body뒤에 .을 찍어보자. [body.setbackgroundColor('black');]이 된다. 마찬가지로 linksSetcolor에서 [links.setColor]처럼 links뒤에 점을 찍는다. 우리가 이렇게 점을 찍은건 body라는, links라는 객체를 만든게된다.
  • 우리의 저장장치에 디렉토리가없다고하면 수천개의 파일들이 중복되지않도록 일일히 이름을 길게길게 적어줘야 할 것이다. 하지만 이걸 정리정돈하라고 우리에게 디렉토리,폴더라는 도구를 사용하지.
  • 바로 이런 객체가 이런 폴더라는 관점으로 봐도 무방하다. 
  • 그럼 이제 알겠지? document.querySelector('body')에서 document도 객체다!  그리고 querySelector('body')는 document라는 객체안에 속해있는 함수라는걸 알 수 있지. 
  • 객체안에 들어있는 함수는 그냥 함수라고 부르지 않고  메소드라고 함. 

 

#object : reading and writing 

  • 정보의 양이 많아졌을때 서로 연관된 정보를 정리하기위해서 사용했던게 배열이었다. 배열은 순서에따라서 정보를 정리정돈함. 
  • 즉 배열은 정보를 담는 그릇이면서 동시에 정보가 순서대로 저장된다는 특징을 가지고 있다. 
  • 순서대로 정보가 저장될게 있다면 순서없이 정리될 수 있는게 있지 않을까? 그게 바로 객체다!
  • 어떤 물건을 수납상자에 넣으면서 그 물건이나 사물을 이름과 함께 다시 꺼낼 수 있게 되는게 바로 객체
  • 객체를 만들때는 {} 중괄호, 배열을 만들때는 []대괄호 를 사용한다. 
  • var coworkers = {}; 는 지금 비어있는 객체를 만든 상태
  • 이 객체 안에 정보를 넣을때는 정보에 대한 이름과 정보를 함께 넣어줘야 한다. 
  var coworkers = {
          "programmer" : "egoing",
          "designer" : "leezche"
        };
  • 이제 이 객체를 실행시키고 싶을때 아래처럼 코드를 써줄 수 있다 .
  document.write("progammer : " + coworkers.programmer + "<br>");
  document.write("designer : " + coworkers.designer + "<br>");
  • coworkers.programmer에서 가운데 점은 object access operater라고 부른다. coworker라는 object에 접근하는 operator!
  • 여기서 객체안에 새로운 애들을 넣고 싶다면? coworkers라는 객체안에 bookkeeper를 추가해주면 넣어줄 수 있다.
coworkers.bookkeeper = "duru" ;
document.write("bookkeeper : " + coworkers.bookkeeper + "<br>");
  • 문법적으로 띄어쓰기는 넣을수가 없다. 그럼 이렇게 해주면 됨 
  coworkers["data scientist"] = "duru";
        document.write("data scientist : " +coworkers["data scientist"] + "<br>");

 

 

 

 

'Web Front-end 공부 > Java script' 카테고리의 다른 글

Js 상수(const)와 var  (0) 2022.05.20
Js 변수  (0) 2022.05.20
Js 기본적인 내용  (0) 2022.05.19
공부하기전 알아두면 좋은 것  (0) 2022.05.19
생활코딩 Java script 2  (0) 2022.05.17

관련글

댓글

티스토리툴바