[Javascript] 생활코딩 javascript 수업소개(1) - 프로그램, 프로그래밍, 프로그래머(13)

생활코딩 javascript 수업소개(1) - 프로그램, 프로그래밍, 프로그래머(13)

---

1. Javascript

- <script> </script>: 안에 javascript 문법이 작성됨을 알리는 태그

- document.write("hello world"); : 이 문서에 hello world를 출력하겠다.

- A = B -> 대입연산자: 오른쪽 항을 왼쪽 항에 대입한다.

- 변수 앞에 var(variable)를 쓰는 것이 좋다

 

2. HTML VS Javascript

언어	Javascript	HTML
코드	document.write(1+1)	1+1
결과	2	1+1
특징	동적	정적

 

3. Event: 사건

- Javascript 사용이 필요함

- 이벤트 핸들러는 이벤트 앞에 on을 붙여준다

- onclick, onchange, onkeydown 등

blur	포커스를 다른 곳으로 옮길 경우
click	링크나 폼의 구성원을 클릭할 때
change	선택 값을 바꿀 경우
focus	포커스가 위치할 경우
mouseover	마우스가 올라올 경우
mouseout	마우스가 떠날 경우
mousedown	마우스를 누를 경우
mousemove	마우스를 움직일 경우
mouseup	마우스를 눌렀다 놓을 경우
select	입력 양식의 하나가 선택될 때
submit	폼을 전송하는 경우
load	페이지, 윈도우가 브라우저로 읽혀질 때
unload	현재의 브라우저, 윈도우를 떠났을 때
error	문서나 이미지에서 에러를 만났을 때
reset	리셋 버튼이 눌렸을 때
dbclick	더블 클릭시
dragdrop	마우스 누르고 움직일 경우
keydown	키 입력시
keypress	키 누를 때
keyup	키를 누르고 놓았을 때
move	윈도우나 프레임을 움직일 때
resize	윈도우나 프레임 사이즈를 움직일 때

ex) <input type="button" value="버튼의 이름" onclick=alert("문구")> -> 버튼을 누르면 경고창에 문구가 표시된다

 

4. 검사

- console: 파일을 만들지 않고도 즉석에서 javascript 실행 가능

- esc를 누르면 html코드와 콘솔창을 함께 볼 수 있다

 

5. Property

length	몇 글자인지 알려줌
toUpperCase	대문자로 바꿔줌
indexOf	문자열에서 해당 문자 or 단어의 위치를 찾음
trim	공백을 없애줌

 

6. Data type

1	NULL
2	Undefined
3	Number	* 산술 연산자: +, -, *, /
4	String	문자열이며 " " 따옴표로 시작하고 끝난다 / ' '을 사용해도 된다
5	Symbol

 

7. Queryselector: 질의한다

- document.queryselector('selector').style: javascript로 html를 꾸밀 수 있음

ex)

    document.queryselector('body').style.color='white';

    document.queryselector('body').style.background='black';

 

8. 의미없는 태그: CSS or Javascript를 사용하기 위해 사용

<div> </div>	화면 전체 사용
<span> </span>	글자의 영역만큼 차지