자바스크립트의 기초

자바스크립트가 HTML과 어떻게 연동이 되는지 알아보았다.

HTML연결. 버튼을 클릭하면 경고창이 뜨게하기!

• 함수 만들기

<script>
    function hey(){
        alert("안녕");
    }
</script>

<button onclick="hey()">영화 기록하기</button>
</div>

HTML 태그인 button에 javascript의 onclick 이벤트를 넣고 function hey() 함수를 실행시키면
작동한다.

• 이벤트의 종류

1)마우스 이벤트

• click 요소에 마우스를 클릭했을 때 이벤트가 발생
• dbclick 요소에 마우스를 더블클릭했을 때 이벤트가 발생
• mouseover 요소에 마우스를 오버했을 때 이벤트가 발생
• mouseout 요소에 마우스를 아웃했을 때 이벤트가 발생
• mousedown 요소에 마우스를 눌렀을 때 이벤트가 발생
• mouseup 요소에 마우스를 떼었을 때 이벤트가 발생
• mousemove 요소에 마우스를 움직였을 때 이벤트가 발생
• contextmenu context menu(마우스 오른쪽 버튼을 눌렀을 때 나오는 메뉴)가 나오기 전에 이벤트 발생

2)키 이벤트

• keydown 키를 눌렀을 때 이벤트가 발생
• keyup 키를 떼었을 때 이벤트가 발생
• keypress 키를 누른 상태에서 이벤트가 발생

3) 폼 이벤트

• focus 요소에 포커스가 이동되었을 때 이벤트 발생
• blur 요소에 포커스가 벗어났을 때 이벤트 발생
• change 요소에 값이 변경 되었을 때 이벤트 발생
• submit submit 버튼을 눌렀을 때 이벤트 발생
• reset reset 버튼을 눌렀을 때 이벤트 발생
• select input이나 textarea 요소 안의 텍스트를 드래그하여 선택했을 때 이벤트 발생

4) 로드 및 기타 이벤트

• load 페이지의 로딩이 완료되었을 때 이벤트 발생
• abort 이미지의 로딩이 중단되었을 때 이벤트 발생
• unload 페이지가 다른 곳으로 이동될 때 이벤트 발생
• resize 요소에 사이즈가 변경되었을 때 이벤트 발생
• scroll 스크롤바를 움직였을 때 이벤트 발생

event는 onclick이 외에도 많은 이벤트가 존재한다!

javascript 기초문법

• 변수, 자료형, 함수, 조건문, 반복문

변수

let a = 2
let b = 3

a+b = 5

let first_name = 'HONG'
let last_nmae = 'GILDONG'

first_name + last_name = 'HONGGILDONG'

자료형

let a_list = ['수박','참외','배']

a_list[1]
'참외'
a_list.push('감') //push 추가
4
a_list
(4) ['수박','참외','배','감']
let b_list['철수','영희']
a_list.push(b_list)
(5)['수박','참외','배',Array(2)]
a_list[4][0]
'철수'
a_list[4][1]
'영희'

딕셔너리

let a_dict = {'name: 'gildong','age':27}
a_dict['name]
* 'bob'
a_dict['height'] = 180
* 180
a_dict
* {name: 'bob', age: 27, height: 180}

split

let myemail = gildong@naver.com'

myemail.split('@')
* (2)['gildong','naver.com']
myemail.split('@')[1]
* naver.com
myemail.split('@')[1].split['.']
* (2)['naver','com']
myemail.split('@')[1].split['.'][0]
* naver

함수

function sum(a,b) {
	alert('계산을 하자')
	return a+b
}
	let result = 5
	alert(result)

조건문

function is_adult(age) {
	if(age > 20){
    alert('성인입니다.')
    }else {
    alert('청소년입니다.')
    }
}

function is_adult(age) {
  if(age > 20) {
  alert('성인입니다.')
  }else if(age > 10) {
  alert('청소년입니다.')
  }else {
  alert('10살 이하')
}

반복문

let people =['철수','영희','민수','형준','기남','동희']

for (let i = 0; i < people.length; i++) {
console.log(people[i])
}

let scores = [
{'name':'철수', 'score':90},
{'name':'영희', 'score':85},
{'name':'민수', 'score':70},
{'name':'형준', 'score':50},
{'name':'기남', 'score':68},
{'name':'동희', 'score':30},
]

for (let i = 0; i < socores.length; i++) {
	console.log(scores[i]);
}

이렇게 하면 딕셔너리 하나씩 출력이 가능하다!

for(let i =0; i< scores.length; i++) {
	if(scores[i]['scores'] < 70) {
    console.log(scores[i]['name']);
    }
}

70점 미만의 사람들 이름만을 출력할 수 있다.