TIL 8 (2020.07.07)

jeanbaek·2020년 8월 6일
0

TIL (Today I Learned)

목록 보기
8/106
post-thumbnail

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

1. 수업소개

   1 사람들은 웹페이지도 동적으로 사용자와 상호작용할 수 있기를 원했다. 
   2 그래서 HTML을 통해 만들어진 웹페이지에 자바스크립트를 이용해 
     사용자와 상호작용할 수 있도록 하는 기능을 추가했다. 
   3 즉, 자바스크립트는 웹사이트가 프로그램처럼 사용자와 상호작용하면서도, 
     검색엔진을 통해 검색될 수 있도록 하는 마법 같은 특성을 가진 언어이다. 

2. 수업의 목적

   1 이 수업은 하나의 기능을 구현하는 과정에서, 그 구현에 필요한 문법을 배워가는 수업이다. 
     (즉, 실습이 중심이 되어 문법 익히기가 부가적으로 따라오는 수업이다.)
   2 "night", "day" 버튼 소개
        1) 웹페이지 상에 있는 이 버튼을 누르면, 자동으로 body 값이 바뀐다. 
        2) body 안에는 <input type=“button” value=“night” onclick=“(style  코드코드)”> 라는 태그가 2개 있다. 
        3) 웹페이지에 있는 “night” 혹은 “day” 버튼을 누르면, 
          body에 해당 코드가 불러와져서 body 전체에 해당 스타일 값이 적용된다.
   3 교훈
        1) 자바스크립트는 사용자와 상호작용을 하는 언어이다. 
        2) 웹브라우저 및 body 태그는 언제나 같은 정보를 갖고 있다.
        3) 그러나, 자바스크립트를 통해 body 태그의 디자인 등을 변경해줄 수 있다. 
        4) 즉, JavaScript는 HTML을 제어하는 언어이다. 

3. HTML과 JS의 만남: Script 태그

   1 <script>: 태그 안쪽에 자바스크립트가 오도록 약속되어있는 태그. 웹브라우저는 이 태그 내의 코드를 자바스크립트로 해석한다. 
   2 웹페이지에 글씨를 출력하고 싶으면, <script> 태그 안에 document.write ( ); 라고 써준다. 
        1) 괄호 안에 작은따옴표를 써주면, 언어가 그대로 나타나고 
        2) 따옴표 없이 예를 들어 숫자를 쓰면, 계산기처럼 알아서 계산이 되어 화면에 나타난다. 

4. HTML과 JS의 만남: 이벤트

   1 버튼을 입력하고 싶을 때 <input type=“button” value=“hi”>을 입력한다. 
        - value: 그 버튼의 이름을 지정하는 코드이다. 
   2 “이벤트” 코드
        1) 웹브라우저 위에서 버튼을 클릭했을 때 화면이 변하게끔 하는 코드이다. 
        2) onclick=“alert(‘hi’)”: 버튼을 클릭하면 “hi”라는 알람이 뜬다. 
        3) type=“text” onchange=“alert(‘changed’)”: 텍스트를 입력할 수 있는 창이 뜨고, 
          입력하면 “changed”라는 알람이 뜬다. 
        4) (속성을 더 알고 싶을 때는 “javscript keydown event attribute”라고 검색한다.)
        5) type=“text” onkeydown=“alert(‘key down!’)”
          : 웹브라우저에서 텍스트 입력창에 어떤 키를 입력하면, “key down!”이라는 알람이 뜬다. 
  • 여기까지 공부한 후, -

와 자바스크립트!!!!!!!
기대를 많이 하고 시작했는데도 불구하고
너무너무 너무 재밌다

각종 이벤트에 따라 내 웹페이지가 네이버 메인화면처럼 바뀌는 것도 신기하고,
나는 date라는 이벤트만 입력했을 뿐인데, 알아서 달력을 가져와 구현해주는 것도 신기하다.

꼭 내 말을 잘 이해하면서 일도 잘하는 비서 여러 명을 내가 창조하고 있는 기분이다.

5. HTML과 JS의 만남 (콘솔)

   1 우클릭-검사-콘솔
        1) 글자수 확인: 내용 앞뒤로 작은따옴표, .length 입력 > 하단에 글자수 나옴
        2) 글자수 알람 팝업: 내용 앞에 [alert(‘], 뒤에 [‘.length] 입력 > 알람에서 글자수 나옴
   2 어떤 웹페이지에서 이던 콘솔을 통해 명령을 하고, 결과값을 얻을 수 있다. 
   3 나의 필요에 따라 자바스크립트를 이용해서 실생활적이고 현실적인 문제를 해결할 수 있다. 
   4 그러니, 거창한 계획을 세우기보다는 현실의 문제를 가볍게 해결하는 방향으로 
     자바스크립트를 이용해서 재미를 잘 붙여보자.

6. 데이터타입 - 문자열과 숫자

   1 컴퓨터는 데이터를 잘 처리하는 것을 아주 중요하게 여긴다. 
     그래서 종류별로 데이터를 구분해서 파악한다. 

   2 자바스크립트에 존재하는 데이터 타입 알아보기.
        1) 검색 “javascript data type”
        2) Mozilla 재단에서 운영하는 문서 확인
        3) 자바스크립트에는 6개의 데이터 타입이 있음 
          : “Boolean, Null, Undefined, Number, String, 
          Symbol” and “Object”(객체)

   3 콘솔에서 숫자열(number) 계산이 가능하다. 
        1) 사칙연산 + - * /
   4 콘솔에서 문자열(string) 계산이 가능하다. 
        1) 문자열 앞뒤로 “ ”, ‘ ’ 를 붙여줌
        2) “ ”.length: 따옴표 내 글자수 알려줌
        3) (더 많은 문자열 계산 문법을 알고 싶을 땐 
          “javascript string”을 검색해서 모질라 웹페이지를 확인하자)
        4) “ ”.toUpperCase(): 문자를 대문자로 나타나게 함
        5) “ ”.indexOf(‘ ‘): 작은따옴표 안의 글씨가 큰따옴표 글자 중 몇 번째에 있는지 알려줌 
          (* 순서는 0부터 시작함. 예를 들어 Hello에서 o의 순서는 4번째임)
        6) “    문자문자   “.trim(): 공백 없애줌

   5 숫자열과 문자열은 당연히 구분되어 계산된다.
        1) 예를 들어, 1+1의 값은 2로 나타나지만, “1”+”1”의 값은 11로 나타남.
   6 이처럼 지금 경험적으로 알게 된 내용은 나중에 이론을 통해 압축해서 정리할 때가 있을 것이다.
profile
💡 Software Engineer - F.E

0개의 댓글