바디 태그 밑 바로 위에 작성
why javascript?
-> 동적인 웹페이지 만들기!

Q. 프로그램 언어? 깔아야됨? -> 브라우저 내에 내장됨. 오직 브랑저만 필요함.

할 수 있는 거

1. html 컨텐츠 변경
   document : 문서 전체의 객체
   .getElementById(""): ""의 값을 가진 부분을 가져온다.
   http://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_inner_html

2. html의 Attrtibute값 변경:
   https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb
   이미지의 파일을 js를 이용하여 바꾼 것.

3. css도 바꿀 수 있다.
   "document.getElementById('demo').style.fontSize='35px'
   https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_style

4. html콘텐츠를 사라지게 하거나 보여줄 수도 있다.
   .style.display='none'
.style.display='block'
   https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_hide
   https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_show

JS? Java아니야?

자바는 컴파일 언어고
js는 브라우저가 직접 해석하는 인터프리터 언어야...

JS, 어디에 표현해?

• <script>태그에 저장해. 작성 방식은 css와 동일하게 inline, internal, external 방식이 있어. 역시 유지보수면에서는 external을 권장해.
• function은 event가 발생하였을 때 호출하게 할 수 있어. event는 웹사이트에서 발생하는 사건, 예를 들면 클릭이나 호버 등이지.
• internal방식으로 썼을 때 body부분에도 작성을 할 수가 있어. 통상 마지막 부분에 쓰지.
  https://www.w3schools.com/js/tryit.asp?filename=tryjs_whereto_head
  https://www.w3schools.com/js/tryit.asp?filename=tryjs_whereto_body
• external방식으로 쓸 때에는 <script src="yourJS.js"></script> 형식으로 불러오면 돼.

값의 출력

1. innerHTML : html 태그 컨텐츠쪽에 출력해.
   https://www.w3schools.com/js/tryit.asp?filename=tryjs_output_dom

2. document.write() :
   이벤트가 있을 때, 새로운 화면 추출 -> 모든것이 로딩된 후에 사용하게 되면은 새로운 페이지를 이용해. 따라서 보통은 테스트 확인할 때 확인돼.
   https://www.w3schools.com/js/tryit.asp?filename=tryjs_output_write_over

3. window.alert() : 팝업창이라고 생각하면 될 것 같아.
   https://www.w3schools.com/js/tryit.asp?filename=tryjs_output_alert2

4. console.log() : 디버그 콘솔 창에서 값을 확인할 때 써.
   https://www.w3schools.com/js/tryit.asp?filename=tryjs_output_console

5. window.print() : js에서 프린트는 말 그대로 프린트 창을 보여줘.
   https://www.w3schools.com/js/tryit.asp?filename=tryjs_output_print

JS문법

거의 java와 비슷하다.
다른 부분은 뒤에서 화긴

• literal : 상수
• var : 변수 (가장 맨 앞 숫자x, Camel Case)
• ='string + ''+'stirng' 도 가능
• //, /* */ : 주석

변수선언

같은 변수 선언 후 재선언이 가능한가 ?

1. var : 중복선언o
2. let : 중복선언x
3. const : c의 const. 값 수정 불가.
4. Automatically : 파이썬 st. 함수 내에 있어도 전역 변수로 출력된다.
   (모든 숫자는 number 타입으로 설정)
   값이 할당되긴 전에는 undefined 타이으 가짐.
   그래서 사용하면서 선언해주는게 좋음.
   타입확인 : typeof
   js특성 :일반적인 언어 -> 값이 들어오면 타입의 선언 : js는 타입 선언x

파이썬처럼 콤마로 변수 초기화 같이 가능
https://www.w3schools.com/js/tryit.asp?filename=tryjs_variables_multi

변수 재선언해도 그전 값은 유지.(재선언시 값 초기화 안 했을때)

var x= '5' + 2 + 3 ->모두 str로 인식, 출력은 523이 된다.
https://www.w3schools.com/js/tryit.asp?filename=tryjs_variables_add_numbers

문자형태의 숫자를 숫자로 캐스팅을 할 때에는 Number("strNum")로 해주면 된다. (숫자값이 아니면 에러를 표현하는 대신, NaN(Not a Number)라는 값을 넘겨준다.)

숫자 연산

비교 연산

equal은 값과 타입을 비교하는 ===을 사용

비교연산에서 주의할게,
"2">"12" 은 아스키코드 기준으로 보기에 이게 true다. 값의 적절한 변환을 취해주자.

조건부 연산자

true면 앞, false면 뒤의 값을 리턴한다.

비트연산

js에서 사용할 일이 있는지 확인

우선순위 연산

https://www.w3schools.com/js/js_precedence.asp

데이터 타입

typeof로 값을 확인 가능하다.

• https://www.w3schools.com/js/tryit.asp?filename=tryjs_datatypes_typeof_string

string : 문자. +연산 가능
number : 모든 숫자. 비교 연산자 가능
Arrays : 배열. []로 선언
Object : 객체 선언 가능

• http://www.w3schools.com/js/tryit.asp?filename=tryjs_datatypes_object

조건문

if-else

https://www.w3schools.com/js/tryit.asp?filename=tryjs_ifthen

swtich

switch문은 '==='처럼 엄격한 비교를 행한다.

https://www.w3schools.com/js/tryit.asp?filename=tryjs_switch
같은 블럭의 경우

case A:
case B:
console.log('ggg');
break;

로 퉁할 수 있따.
https://www.w3schools.com/js/tryit.asp?filename=tryjs_switch3

Loop

for

• for (let i=0; i<30;i++){ :
  • https://www.w3schools.com/js/tryit.asp?filename=tryjs_switch3
• for (let x in list){ : 파이썬, 자바와 다르게 리스트 내의 값을 호출하는 것이 아니라, list의 인덱스(dict의 경우 , key값 출력)를 출력한다.
  • https://www.w3schools.com/js/tryit.asp?filename=tryjs_object_for_in
  • https://www.w3schools.com/js/tryit.asp?filename=tryjs_array_for_in
• for(let x of list){: 리스트의 값을 출력해준다.
  • https://www.w3schools.com/js/tryit.asp?filename=tryjs_object_for_of
• Array.forEach(function(list)) : list의 array, list, value의 값들의 순회를 해주는 iterator 함수라 할 수 있다. 출력의 기능은 하지 않기에 function에서 사용법을 정의해주어야한다.
  • https://www.w3schools.com/js/tryit.asp?filename=tryjs_array_for_in

while

do while

do{
}
while{}

break, continue

break
continue

label

https://www.w3schools.com/js/tryit.asp?filename=tryjs_break_list

결과 : 0 2 3 4

함수

function(para1, para2, ..)로 정의

호출 방식:

1. 이벤트 발생
2. js코드
   3, 가동 (self invoked)

함수 값을 넘길 땐 return 사용.

• http://www.w3schools.com/js/tryit.asp?filename=tryjs_function_return

정의:

예시로

function test(a){
	return a
}

라는 함수가 있다 하자. 이 함수를

<p id='demo'></p>
let t = test(1);
document.getElementById(demo).innerHTML = t;

로 test(1)로 정의 후 출력하면 1이 나오지만 test로 정의하면 함수의 코드를 그대로 동작시킨다.

함수 내의 정의된 변수 -> 지역변수

객체

객체는 많은 변수를 담을 수 있다.
보통믄 name : value 형태로 저장된다.
value 출력시 객체.name 혹은 객체[name]을 이용하면 된다.

http://www.w3schools.com/js/tryit.asp?filename=tryjs_objects_object

이벤트

크게 2가지
브랑저에서 동작 (페이지 로딩 끝)
유저가 집적 발생 (ㅣ보드 마우스 입력 등.)

정의되어 있는 이벤트

onchange : element 내용이 바뀔 때
onclick : 마우스 클릭
onmouseover : 마우스가 호버상태
onmouseout : 마우스가 elment를 벗어날 때
onkeydown :
onload : 브라우저의 로딩이 끝날 때
등등... https://www.w3schools.com/jsref/dom_obj_event.asp

EventHandler