사전캠프 : 웹개발 종합반 2

1.Javascript: 웹 움직임

중요한 5가지! 변수, 자료형, 함수, 조건문, 반복문!

 

console.log: 코딩한 것이 맞게 출력 되었는지를 확인하기 위해 개발자들이 미리 찍어보는 도구

 

(1)변수: 값을 담는 상자

변수 대입( a = 2 )의 의미→ 2를 a라는 변수에 넣는다

let으로 변수를 선언

 

ex)

let a = 2
let b = 3
console.log(a+b) // 5

let c = '대한'
let d = '민국'
console.log(c+d) // 대한민국

 

(2)자료형 리스트: 순서를 지켜서 가지고 있는 형태

컴퓨터는 0부터 센다. 리스트에 들어있는 첫 번째 값은 [0]으로 불러온다.

 

ex)

let a_list = [ ]  // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!

// 또는,

let a = ['사과','수박','딸기','감'] // 로 선언 가능
console.log(a[1]) // 수박
console.log(a[0]) // 사과

//리스트 길이 구하기
console.log(a.length) //4

 

(3)자료형 딕셔너리: 키(Key)-밸류(Value) 값의 묶음

ex)

let a_dict = {}  // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!

// 또는,

let a = {'name':'영수','age':27} // 로 선언 가능
console.log(a['name']) // 영수

 

*리스트와 딕셔너리의 조합

ex)

let a = [
{'name':'영수','age':27},
{'name':'철수','age':15},
{'name':'영희','age':20}
]
console.log(a[0]['name']) //영수
console.log(a[1]['age']) //15

 

(4)반복문

let fruits = ['사과', '수박', '딸기', '감']

 

fruits.forEach((a) => {
console.log(a)
}) 
// fruits의 요소를 하나씩 확인하는데 이름은 a라고 한다.
// a는 b,c,zzz,fruit 어떤 걸로 해도 상관 없다.

 

(5)조건문

let age = 24

if (age > 20) {
console.log('성인입니다')
} else {
console.log('청소년입니다')
}

 

*반복문과 조건문의 조합

let ages = [12,15,20,25,17,37,24]

ages.forEach((a)=> {
if (a > 20) {
console.log('성인입니다')
} else {
console.log('청소년입니다')
}
})

 

2.JQuery: Javascript를 미리 더 쉽게 작성해둔 것. 라이브러리!

Javascript로 길고 복잡하게 써야 하는 것을

document.getElementById('hello').innerHTML = '안녕';

 

jQuery로 보다 직관적으로 쓸 수 있다.

$('#hello').html('안녕');

 

-alert: 경고창을 띄워주는 함수