들어가는 말
-
Web browser 위에서 일어나는 일들 = 사건, 이벤트
-
HTML을 기본으로 알아야 JavaScript를 이해할 수 있다.
-
?? " 사용자와 상호작용 하는 웹 페이지를 만들고 싶다!!"
-
HTML은 정적이다. 한번 적용되면 바꿀 수 있는 능력이 없다 / JavaScript는 사용자의 지정에 따라 바꿀 수 있다
ex) day mode-흰색 , night mode-검은색 지정
-
사용자의 조작에 반응하여 프로그램이 움직이는 것들 ex) 게임, day/night mode
-
동적인 JavaScript / 정적인 HTML (1+1의 출력 결과 비교)
HTML을 이용해 웹 페이지를 만든 후, JavaScipt를 이용해 사용자와 상호작용 할 수 있도록 기능을 추가한다!
HTML의 정보, JavaScript의 기능을 모두 갖춘 시스템으로 level up!
JavsScript사용법
- HTML의 코드로 JavaScript가 시작됨을 알리기
<Script> ~ </Script>- console 사용하기
(웹 페이지 -> 검사 -> console 텝 사용)
1. HTML의 코드로 JavaScript가 시작됨을 알리기
Web browser에서 일어날 수 있는 Event 종류 (몇가지)
주로 10~20개 정도 많이 사용된다.
onclick
알림창으로 hi가 뜨는 hi버튼 만들기
코드 살펴보기<body> <input type="button" value="hi" onclick="alert('hi')"> </body>[html 사용설명서]
- onclick이라는 속성의 속성값으로는 반드시 JavaScript가 와야 한다.
- onclick속성의 속성값은 web browser가 기억하고 있다가 onclick 속성이 위치하고 있는 tag는 사용자가 활성화 (위 코드에서는 '버튼을 클릭')했을 때 기억하고 있었던 JS의 code를 JS의 문법에 따라 해석하여 web browser가 동작하게 한다.
onchange
텍스트 입력 시 알림창 뜨게 하기
코드 살펴보기<input type="button" value="hi" onclick="alert('hi')"> <input type="text" onchange="alert('changed')">
- onclick 위에서 설명 했음
- type="text" 텍스트 입력하는 창 생성
- onchagne 변화가 생겼을때 반응
(abc를 입력하고 Enter키를 누르거나, 마우스를 text창 밖에 활성화 시키면 알림창(alert)이 뜬다. / abc입력후 알림창 확인 -> abcd입력 후 d 다시 지우기 (최종 다시 abc) 의 경우엔 최종적으로 변화된게 없으므로 알림창이 뜨지 않는다.)
onkeydown / onkeypress / onkeyup
onkeydown
키를 누르면 알림창 뜨게 하기
코드 살펴보기<input type="text" onkeydown="alert('key down!')">
- text 입력창에 아무 키나 누르면 (keydown) 알림창 뜸! 알림창을 없애고 나면 눌렀던 키가 입력되어 있음.
(ㄱ 입력 -> 알림창 뜸 -> 알림창 끄고나면 text창에 ㄱ 입력되어 있음)
onkeyup onkeydown과 같은 효과 but 누른 키가 먼저 입력되고 알림창 뜸
onkeypress onkeydown과 같은 순서로 효과 발생
<onkeyup/down 과 onkeypress의 차이점>
- onKeyDown, onKeyUp은 Keycode값이고, onKeyPress는 ASCII 값이다.
- onKeyPress는 ASCII값이기 때문에 shift, ctrl, backspace, tab, 한/영 등의 키를 인식하지 못한다.
(출처: https://ggmouse.tistory.com/179 [초보개발자꽁쥐])
실습 예제 #1
코드 살펴보기 (아직 완벽한 문법은 이해하지 못했음!!! document.querySelector 이부분 모름!)
<input type="button" value="day" onclick="document.querySelector('body').style.backgroundColor='lightpink'; document.querySelector('body').style.color='lightblue'; "> <input type="button" value="night" onclick="document.querySelector('body').style.backgroundColor='lightblue'; document.querySelector('body').style.color='lightpink'; ">
- 아무 버튼도 누르지 않은 상태 = 기본값인 하얀색의 웹 페이지, 검은색의 글씨
- day라고 적힌 button을 눌렀을 때 = body의 색은 lightpink, 글씨의 색은 lightblue로 전환
- night라고 적힌 button을 눌렀을 때 = body의 색은 lightblue, 글씨의 색은 Lightpinkfh 전환
- 현재 상태에서 웹 페이지를 다시 하얀색으로 바꿀 순 없음! 분홍 <-> 하늘
2. Console창 이용하기
Fn + F12 누르면 바로 켜지기도 함. (콘솔에서 실행시키는 자바스크립트는 열었던 페이지에 안에 삽입되어있는 것처럼 구성이 되어있다. -> 그 웹 페이지를 대상으로 실행된다.)
JavaScript Data type
(console창 이용해서 공부)
출처 : MDN web docs (mozilla 재단 운영)
- 6개의 data type
- Boolean
- Null
- Undefined
- Number (숫자)
- String (문자열)
- Symbol (new in ECMAScript6)
- Object (객체 지향)
숫자와 문자열
숫자
이항 연산자
산술 연산자
- 덧셈 (+)
- 뺄셈 (-)
- 곱셈(*)
- 나눗셈(/)
- ...
문자열
작은 따옴표 (' ') 혹은 큰 따옴표(" ")를 사용해준다.
->출력은 둘 다 큰 따옴표(" ")로 출력이 된다.
> '1' + "1"
< "11"문자를 처리할때 사용하는 명령어들 예시 (대/소문자 구분 확실하게 해야함)
검색 활용! 'Javascript string'
출처 : MDN web docs (mozilla 재단 운영)
.length 문자 갯수 세기 (length 라는 property 사용)
> 'Hello world'.length
< 11.toUpperCase() 문자를 대문자로 변환
> 'Hello world'.toUpperCase()
< "HELLO WORLD".indexOf() 괄호안의 문자가 몇번째에 처음 위치하는지 숫자로 알려줌 (숫자는 0부터 시작/띄어쓰기도 포함됨)
> 'Hello world'.indexOf('o')
< 4
>'Hello world'.indexOf('world')
< 6.trim() 공백 제거 (문자사이는 공백이 아님)
> ' Hello world '.trim()
< "Hello world"변수와 대입 연산자
변수를 사용할 때에는 되도록 앞에 var 태그 (variable)를 사용해 주기! (아래의 예시에서는 사용 안했었음
var tag 사용 예)
var name= 'penguins';예시 1 (변수 + 대입연산자)
대입연산자 '=' / 변수 x
-> 오른쪽 항의 것을 왼쪽 항에 대입한다. (다음의 예시는 변수 x에 대입연산자를 사용한다.)
> x = 1;
< 1
> y = 2;
< 2
> x+y;
> 3
> x=1000
< 1000
> x+y;
< 1002예시 2
name 변산자를 사용해 특정 문자 설정하기
Wikipedia - penguin 설명글에서 penguins를 name이라는 변수로 지정해주기.
penguins에서 dog로 바뀌어도 문단 내 모든 penguins 를 바꾸는 것이 아닌 name = 'dog'; 라고만 설정해 주면 끝!
