[생활코딩] WEB2 - Javascript (上)

1. 자바스크립트 수업의 목적

* 자바스크립트란 : html을 제어해서 사용자와 상호작용할 수 있도록 기능을 추가하는 언어

* 웹 페이지는 한 번 페이지를 출력하면 자신을 바꿀 능력이 없다.

 

컴퓨터 언어 vs 프로그래밍 언어

*프로그램 : 순서

*프로그래밍 : 순서를 만드는 것

*프로그래머 : 순서를 만드는 사람

 

2. Javascript와 html의 만남

1) 기본 문법

자바스크립트 코드임을 알려주는 태그 : <script></script>

*마치 css임을 알려주는 코드가 <style>이듯

자바스크립트가 웹 페이지에 글씨 출력할 때 : document.write(    )

 

 

2) 이벤트

html의 속성(attribute) "onclick"의 속성값으로는 : 반드시 자바스크립트가 온다.

속성값을 웹브라우저가 기억하고 있다가, 속성이 적용된 태그를 사용자가 클릭했을 때 자바스크립트 문법에 따라 해석해서 동작. -> 이런 것이 바로 이벤트

 

*이벤트 속성의 예 : onclick (클릭했을 때) onchange (변경되었을 때) onkeydown (자판을 눌렀을 때)

 

3) inspect - console 통한 Javascript의 활용

*콘솔 창에서 자바스크립트 작성해 바로 필요한 기능 사용 가능.

*열려 있는 창의 정보를 바로 활용할 수 있어 편리함.

 

3. 데이터타입(자료형) - 문자열과 숫자

1) 데이터타입 : number(숫자), string(문자열), boolean, null, underfined, symbol 총 6가지가 있음

 

2) 숫자타입 : 산술연산자 + - * / 를 처리할 수 있음

 

3) 문자열 : "" '' 으로 표현됨. 

 (문자열).length : 글자수 세기

 (문자열).toUpperCase : 대문자로 바꾸기

 (문자열).indexOf('a') : a라는 글자가 왼쪽에서부터 몇 번째 칸에서 등장하는지 세 줌 (엑셀의 'right' 함수)

 (문자열).trim : 글자 앞뒤 공백을 잘라내 줌

 

4) 문자열과 숫자열의 차이

  1+1 = 2 (숫자열)

  "1"+"1" = "11" (문자열)

 

4. 변수와 대입연산자

 x = 1 ; 이라는 식이 있을 때

   ->   좌항 x 는 변수(variable, 안에 들어갈 값이 바뀔 수 있음), 우항 1은 상수(constant, 항상 1) = 은 대입연산자.

   ->   대입연산자 = 은 우항의 값을 좌항에 대입하며 / 좌항과 우항의 값을 결합해서 우항의 값을 만들어 냄.

 

css에서 페이지마다 동일하게 들어있는 모든 디테일을 일일히 바꿀 수 없기에 stylesheet를 쓰는 것처럼,

문자열에서 수정사항이 생길 때 손쉽게 수정할 수 있도록

var 이름 = "홍길동" 이라고 설정해 놓고 본문에 심으면 좋다.

 

이 코드에서의 경우 backgroundcolor라는 변수에 black이라는 색깔값이 대입된 것이라고 볼 수 있다.

 

5. 웹브라우저 제어

JS를 이용해 html을 변경하려면, JS에게 '원하는 변화', '원하는 대상'을 지정해 주어야 한다.

 

1) 대상 선택 시 쓰이는 것이  document . querySelector ( 'selectors' )

                                                                                   대상 중  css의 선택자

<div>  ~어쩌구~ </div>

<div id=mefirst> ~저쩌구~ </div>

 

여기서 전체 div 태그 내용을 대상으로 지정하려면 document.querySelector('div')

id 값이 mefirst인 태그(element)를 대상으로 지정하려면 document.querySelector(#mefirst)

 

2) 변화시킬 하위 속성을 뒤에 적고, 값을 대입시킨다

 

* 스타일을 바꾸고 싶다면(css 효과) document.querySelector(selectors).style

여기서 배경색을 바꾸고 싶다면

document.querySelector(selectors).style.backgroundColor = 'black';

*value 값(버튼 이름)을 바꾸고 싶다면 document.querySelector(selectors).value = '이건 버튼이야';

 

---

*문제 발생 / 해결 -> troubleshooting 글로 옮김