TIL 9 (2020.07.08)

jeanbaek·2020년 8월 6일
0

TIL (Today I Learned)

목록 보기
9/106
post-thumbnail

<생활코딩 - WEB - WEB2 - JavaScript>

1. 변수와 대입 연산자

   1 단어 소개
        1) 변수(var, variable): 바뀔 수 있는 어떤 값
        2) 대입 연산자(=): “오른쪽 항의 값을 왼쪽의 변수에 대입한다.”
        3) 상수(constant): 항상 변하지 않는 값
   2 변수를 왜 쓰는가
        1) 변수를 사용하는 이유는 엄청 많다. 
        2) 공식과 프로그래밍에서 변수는 아주 중요하게 작용한다. 
   3 변수 예제
        1) var name=“jean”; alert (“~~”+name+”~~”+name+”~~”)
          : 괄호 안의 name 부분을 jean으로 바꾸어 알람을 띄워준다. 
        2) (shift+enter=띄어쓰기 및 실행 유보)
        3) name을 모두 다른 이름으로 변경하고 싶을 땐, “jean”만 다른 이름으로 바꿔주면 된다.

2. 웹브라우저 제어

   1 HTML은 정적인 성격을 갖고 있기 때문에, 한 번 입력된 코드는 계속 그대로 실행된다. 
   2 이 점을 ‘javascript 문법을 이용하여 css의 style 속성을 입히는 방식’으로 동적으로 실행해보자. 
   3 이를 위해서는 javascript를 이용해서 제어하고자 하는 태그를 선택하는 방법을 알아야 한다. 

3. 제어할 태그 선택하기

   1 <input type=“button” value=“밤”>: 웹브라우저에 버튼을 생성되고, value의 큰 따옴표 안의 이름이 버튼 안에 새겨진다. 
   2 이 버튼을 눌렀을 때, body의 style 값이 변경되도록 해보자. 
        1) value 뒤에 onclick=“ ”을 입력한다. 
        2) 큰따옴표 안에 명령을 입력한다. 
        3) 모를 때는 검색!! “javascript select tag by css seletor”
        4) 검색결과: document.querySelector(‘tag’) < tag에 변경을 원하는 태그 = body 를 입력해주면 됨. 
        5) 또 모를 때는 검색!! “javascript element style”
        6) 검색결과: document.getElementById(“myH1”).style;
        7) 또또 모를 때는 검색!! “javascript style background-color”
        8) 검색결과: document.body.style.backgroundColor = “black”;
           - (css에서는 background-color이나, JS에서는 backgroundColor이다. 문법 그대로 입력해야 실행이 된다. )
        9) 짜잔! 웹브라우저의 버튼을 누르니, body 태그의 값이 변하고, 화면 전체가 검은색이 됐다. 
        10) 글을 잘 볼 수 있도록 document.querySelector(‘body’).style.Color=‘white’;도 입력해주자. 
   3 value=“낮”도 똑같이 붙여넣기 해보자.
        1) <input type =“button” value =“낮” onclick="
        2) document.querySelector(‘body’).style.backgroundColor=‘white’;
        3) document.querySelector(‘body’).style.Color=‘black’;">
   4 이로써, 동적으로 사용자와 상호작용하는 듯한 느낌을 주는, 애플리케이션의 핵심이 되는 javascript 문법을 알아봤다. 
   5 그런데 코드를 입력할 때, 작은따옴표와 큰따옴표 내의 코드가 다른 색을 띠고 웹브라우저에서 실행되는 여부도 다른 것을 발견했다.
     ‘’와 “”가 다른 기능을 갖는 것일까, 아니면 특정 조건이 있는데 내가 그 조건에 맞추지 않아서 기능이 다르게 나타난 것일까? 
     좀 더 코드를 입력해보면서 알아봐야겠다. 

4. 프로그램, 프로그래밍, 프로그래머

   1 HTML, JavaScript는 컴퓨터 언어이다. 
     JavaScript는 컴퓨터 프로그래밍 언어이나, 
     HTML은 컴퓨터 프로그래밍 언어는 아니다. 
   2 프로그램은 ‘순서’라는 의미를 갖고 있다. 
     프로그래밍은 순서를 만드는 행위이다. 
     프로그래머는 순서를 만드는 사람이다. 
     이 세 가지 단어는 다양한 분야에서 사용되어 왔고, 
     그것을 소프트웨어가 차용해 사용하고 있다. 
     컴퓨터에서 프로그램의 본질적인 의미는 반복적인 작업을 글로 적어두어서 
     컴퓨터에게 실행을 명령하는 것이다. 
   3 HTML은 웹페이지를 묘사하기 위한 목적의 언어이다. 
     때문에 시간의 순서에 따라 실행할 필요가 없다. 
     반면, JavaScript는 사용자와 상호작용하기 위해 고안된 언어이다. 
     때문에 시간의 순서에 따라 여러 기능이 실행될 필요가 있다. 
   4 나아가, 시간뿐만 아니라 조건에 따른 기능 실행이나 어떤 기능의 반복적인 실행을 원하는 마음이 생겨났다. 
     복잡해진 순서를 단순하게 잘 정리 정돈하는 방법도 고안됐다. 
   5 앞으로의 강의에서는 이런 욕심을 이루기 위해 성취한 업적들을 따라가며 
     조건문, 반복문, 함수 같은 핵심적인 기능을 알아볼 예정이다. 

5. 조건문 예고

   1 앞 강의에서 밤과 낮이라고 하는 버튼 두 개를 만들었다. 
   2 조건문 및 토글(toggle)을 이용하면 이 버튼을 한 개로 구현할 수 있다. 

6. 비교 연산자와 Boolean 데이터 타입

   1 Boolean은 비교 연산자를 통해 만들어지는 새로운 데이터 타입이다. 
     비교 연산자(Comparison operator)와, Boolean, 조건문은 아주 깊은 관련성이 있다. 
   2 script 태그 안에 document.write(1===1);을 써준다. 
        1) ===은 동등 비교 연산자이다. 
        2) 연산자 왼쪽과 오른쪽의 값이 true인지 false인지 계산하는 연산자이다. 
        3) true와 false의 값을 묶어서 Boolean이라고 부른다. 
   3 script 태그 안에 document.write(1<2);을 써준다.
           - 꺽쇠 < 는 less than이라는 의미를 갖고 있는 &li;와 같은 의미이다. (꺽쇠가 문법으로 인식될 때 사용한다.)

7. 조건문

   1 if (true) { } else { } : 첫째 중괄호는 나타나고, 둘째 중괄호는 나타나지 않는다.
   2 if (false) { } else { } : 첫째 중괄호는 나타나지 않고, 둘째 중괄호는 나타난다.

8. 조건문의 활용

   1 if else를 이용해서 day일 땐 night 키가 활성화되고, night일 땐 day 키가 활성화될 수 있도록 해보자.
   2 if ( ), 소괄호 내의 내용이 true나 false가 되도록 하자.
        1) value 값 알아내기. 
           1 input에 아이디 값 부여하기 > id=“해”
           2 Console에서 id 값이 “해”인 element의 value값을 알아내자.
           3 모를 땐 검색! “javascript element get value”
           4 검색결과: var value = document.getElementById(id).value;
           5 Console에 입력: document.querySelector(‘#해’) > 아래 해당 요소의 내용이 불려 옴
           6 Console에 입력: document.querySelector(‘#해’).value > “night” 나타남
           7 Elements에서 id=“해”의 value값을 day로 변경하면,
           8 Console에 입력: document.querySelector(‘#해’).value > “day”로 나타남
           9 즉, [document.querySelector(‘#해’).value] 코드를 통해 “해” 태그의 value 값을 가져올 수 있음
        2) 동등 비교 연산자를 통해 조건문 완성시키기 1
           1 if (document.querySelector('#해').value === 'night') { 스타일 코드~~ }
           2 웹페이지에서 night 버튼을 누르면 body 태그 전체의 스타일 속성이 변한다. (=전체 화면이 검어진다.)
        3) 동등 비교 연산자를 통해 조건문 완성시키기 2
           1 night 속성의 효과가 나타난 이후, value 값을 day로 변경하자.
           2 night의 style 태그; 다음에 document.querySelector('#해').value = 'day'; 입력
           3 웹페이지에서 night 버튼을 누르면, 전체 화면도 검어지고, 버튼도 day로 바뀐다.
        4) 동등 비교 연산자를 통해 조건문 완성시키기 3
           1 value가 day로 바뀌었으니, 조건문에서 첫째 중괄호는 무시되고, 둘째 중괄호가 실행된다.
           2 else의 style 태그; 다음에 document.querySelector('#해').value = ‘night’; 입력
           3 웹페이지에서 day 버튼을 누르면, 전체 화면도 하얘지고, 버튼도 다시 night로 바뀐다.
        5) 즉, if 절의 === (동등 비교 연산자)의 값이 true냐 false냐에 따라, 한 개의 버튼으로 두 개의 기능을 실행시킬 수 있다. 
  • 여기까지 공부한 후, -

동영상 강의를 보며 함께 코드를 입력해서 실험을 해보았다.
영상에서 나온 코드대로 따라 입력했으니, 당연히 화면이 잘 구현되었다.

그런데 내 머릿속에서는 이게 대체 어떤 원리로 인해 구현되는 것인지 잘 이해가 되지 않아서
흥미도가 낮은 상태였다.

그래도 공부한 것을 기록해두고 싶은 마음에
한 자 한 자 강의 순서를 되뇌이며 글을 써보니
어떤 원리로 인해 이 기능이 실행되었는지 명확하게 이해가 됐다.

그러니 집중도와 흥미도 역시 높아졌다.

수동적으로 강의를 보며 코드를 하는 것보다
실행 순서를 되뇌어보며 직접 코드를 하는 것이
훨씬 중요한 것 같다.

9. 리팩토링 중복의 제거

   1 리팩토링 (refactoring): 개선한다는 의미로 코드 자체를 효율적으로 수정하여 
     가독성은 높이고, 중복도는 낮추고, 유지보수는 편리하도록 개선하는 작업을 이른다. 
     좋은 코드를 만들기 위해서는 틈틈이 리팩토링을 하는 것이 중요하다. 
   2 중복의 제거 1: id 속성
        1) onclick 같은 event 안에서 실행되는 코드들은 자신이 속해있는 
          태그를 가리키는 “this”라는 키워드를 갖고 있다. 
        2) if 절 안의 document.querySelector(‘#해’)를 this로 변경하자.
        3) 인덱스 코드 내의 id=“해” 코드를 삭제하자. (this로 가리키기 때문에, 더 이상 필요 없음)
        4) 기능은 잘 동작하고, 코드는 더 간결해졌다.
   3 중복의 제거 2: body 선택자
        1) onclick 이벤트 안에서 if 절 시작 전에 var target = document.querySelector('body'); 를 입력한다.
        2) if 절 안의 document.querySelector('body')를 target으로 변경한다. 
        3) 효과는 잘 동작하고, 코드는 간결해져 수정이 보다 편리해졌다.
   4 중복의 제거는 아주아주 중요하다. 또한, 변수를 사용하면 코드를 보다 효율적으로 작성할 수 있다. 

10. 반복문 예고

   1 body 전체 화면이 어둡고 밝음에 따라, 
     링크가 걸린 단어의 색도 바뀌도록 할 수 있다. 
   2 이 기능을 실현하기 위해 ‘배열”과 ‘그 배열을 이용해 
     반복적인 작업을 처리하기 위한 반복문 코드’를 배울 예정이다. 

11. 배열

   1 배열(Array)은 집에 있는 물건이 많아짐에 따라 
     책장, 냉장고, 옷장 같은 가구로 물건을 정리하는 것과 비슷하다. 
     비슷한 데이터를 잘 정리 정돈해서 일종의 수납상자에 담아두는 것이다. 
        1) 배열은 대괄호 [ ] 안에 “” 큰따옴표를 사용하여 문자를 입력한다. 
        2) var coworkers = [ ]: coworkers라는 변수에 
          배열이라는 새로운 데이터 타입이 담겨있다는 뜻이다. 
          이는 [ ] 라는 수납상자 안에 데이터 3 개를 넣어놓은 것과 같다. 
          (난 3개의 단어를 입력했다.)
   2 데이터 다루기 1: get
        1) script 태그 사이에 document.write(coworkers[0]); 를 입력하면, 
          제일 앞 순서 단어가 웹페이지에 나타난다. (*첫째 자리 값은 0번째이다.)
        2) document.write(coworkers[1]); 를 입력하면, 
          그다음 순서 단어가 웹페이지에 나타난다. 
   3 데이터 다루기 2: count
        1) 검색: “javascript array count”
        2) 검색결과: “변수이름.length;”
        3) 입력: document.write(coworkers.length);
        4) 웹화면 결과: 3 (*개수는 1부터 센다.)
   4 데이터 다루기 3: add
        1) *count 보다 앞 순서에 입력한다. 
        2) 검색: “javascript array add data”
        3) 검색결과: “변수이름.push(“단어”);” (push는 데이터를 끝에 추가하는 속성이다.)
        4) 입력: coworkers.push("kiwi"); coworkers.push("jinnie");
        5) 웹화면 결과: count가 5가 된다.
   5 수많은 배열 속성은 예를 들어, “javascript array”라고 검색하면 모두 나온다. 

12. 반복문

   1 반복문(Loop)을 입력해보자
        1) ul 태그 내에 script 태그를 입력했다. 
          그 안에 document.write('<li>1</li>'); 를 4번 입력했다. 
        2) while(true) { } 안에 
          document.write('<li>1</li>') 를 입력하고 리로드를 해봤다. 
          (나는 강의에서 새로운 문법이 나오면, 강의를 멈추고 먼저 실험해본다.)
        3) 웹브라우저 새로고침 아이콘이 계속 돌아갔다. 겁이 나서 페이지를 닫았다. 
        4) 다시 강의를 재생해보니, 이 while 문법은 값이 참일 때 무한으로 반복되는 속성을 가졌기 때문에 
          꼭 종료하는 값을 지정해줘야 한다고 한다. 잠깐 놀랐지만, 이 원리는 오래 기억할 것 같다. 
   2 변수 속성을 입력해보자
        1) var i = 0;
        2) while (i < 3) { ~도큐먼트 속성 입력입력~ }
        3) i = i + 1;
        4) 위의 코드가 순서대로 실행되면서 i의 값이 3이 되어 false가 되면, 
          반복문은 더 이상 진행되지 않고, 다음 코드로 넘어간다. 
   3 반복문은 조건문과 함께 프로그램의 실행 순서의 흐름을 제어하는 제어문이다. 
  • 여기까지 공부한 후, -

정리를 한다는 개념이 재밌다.
나는 집 청소를 할 때도, 물건들을 내가 구상한 조건에 맞춰 정리하는 것을 좋아했다.

간단한 수학적 개념도 재미있게 다가온다.
나는 쉬운 수학 문제를 반복해서 푸는 것을 재밌어했다.

내가 코딩과 잘 맞을 거라는 생각을 한 번도 해본 적 없이
막연하게 ‘와,, 코딩은 참 멋있다,,’라는 생각만 했었는데
막상 공부를 시작하니 나와 잘 맞는 부분이 종종 발견돼 신기하다.

13. 배열과 반복문

   1 배열과 반복문을 이용해서 list 만들기
        1) 첫째 script 태그에 var coworkers = ['jean', 
          'jun', 'gon', 'egoing', 'yeoul']; 을 입력한다.
        2) ul 태그 사이에 둘째 script 태그를 열고, 아래를 입력한다. 
        3) var i = 0;
        4) while (i < coworkers.length) {
        5) document.write(‘<li>’+coworkers[i]+’</li>’
        6) i = i + 1; }
   2 의미 알아보기
        1) var coworkers = [~~]는 coworkers라는 변수 상자 안에 
          'jean', 'jun', 'gon', 'egoing', 'yeoul' 가 들어가 있다는 뜻이다. 
        2) var i = 0;은 i가 0이라는 변수임을 알려준다. 
        3) while (i < coworkers.length)은 ‘i가 coworkers 수납상자에 있는 
          단어 개수보다 적을 때까지’라는 제어를 의미한다. 
          (i를 통해 순서를 셀 때는 0부터 세지만, 단어 개수는 1부터 세기 때문에 가능한 조건이다. )
        4) document.write(‘<li>’+coworkers[i]+’</li>’ 의 [i]는 coworkers 대괄호 안의 단어 순서를 뜻한다. 
   3 효과
        1) 위의 배열과 반복문 코드를 통해, 코더는 첫째 script의 대괄호 안의 정보에만 집중할 수 있다. 
        2) 정보 수정이나 유지보수가 편리하고, 가독성이 좋다는 장점이 있다. 
   4 추가기능
        1) document.write(‘<li><a href=“http://~~.com/‘+coworkers[i]+’”>’+coworkers[i]+'</li>'): ‘닷컴/해당닉네임’ 이라는 도메인주소가 링크로 자동 설정된다. 
        2) (예를 들어 i가 0번째인 jean 리스트를 누르면: http://~~.com/jean 으로 이동된다.)
   5 정리
        1) 배열은 순서대로 서로 연관된 데이터를 잘 정리 정돈하는 기능이고, 
          반복문은 순서대로 배열에 담긴 데이터를 하나씩 꺼내서 자동화된 처리를 할 수 있는 문법이기 때문에,
        2) 배열과 반복문을 결합하면 이처럼 폭발적인 효과를 얻을 수 있다. 
profile
💡 Software Engineer - F.E

0개의 댓글