구글링 중 우연히 다른사람들의 개발일지를 보고 부족한 점을 한참 느끼고 어떻게 작성하는지 알게 되었다.
HTML, CSS까지는 눈으로 이해가 됐으나 자바스크립트에 들어가면서 이해가 더딘 부분이 생기면서 이론적인 개념을 정리 할 필요를 느꼇다.
* 자바스크립트 필수 개념 *
1. 변수 ( let, var, const)
- 변수란? 값을 담는 박스이다.
Ex)
let first_name = 'Jacob'
let last_name = 'Choi'
first_name + last_name
'JacobChoi'
2. 자료형 ( 리스트, 딕셔너리)
- 리스트 자료형이란? 순서가 중요한 담는 박스이다. *선언 할 때 꺽쇠[]를 사용한다.
Ex)
let a_list = ['수박', '참외', '배']
a_list[0] (코딩은 숫자 0부터 시작, a_list의 0번은 수박이다.)
"수박"
a_list.push('감') +추가
a_list
(4) ['수박','참외','배','감']
- 딕셔너리 자료형이란? Key : Value (A:B 이다 형태), 리스트와 달리 순서가 중요하지 않다. *선언 할 때 중괄호{}를 사용한다.
Ex)
let a_dict = {'name' : 'bob' , 'age':27}
a_dict['name'] *값을 가져올 때는 꺽쇠[]를 사용
"bob"
A_dict['height'] = 180 *추가 선언시도 꺽쇠를 사용
{name: 'bob', age: 27, height: 180}
- 두 자료형을 응용하여 사용 할 수 있다.
Ex)
let a_dict['fruits'] = a_list
(4) ["수박","참외","배","감"]
a_dict ['fruits'][2]
"배"
3. 함수
- 함수란? 부르면 정해진 동작을 실행한다. (함수선언, 함수 호출)
Ex) Function sum(num1, num2) {
return num1+num2
}
let result = sum(2,3)
result
5
Ex2) function mysum(num1, num2) {
alert('안녕!')
return num1+num2
}
let result2 = mysum(2,3)
(alert 창이 뜬다.)
result2
5
Ex3) function mysum(num1,num2) {
alert('안녕!')
}
mysum(1,2)
-> alert창만 뜬다.
4. 조건문
- 조건문이란? if절의 값이 참이면 실행, 거짓이면 else절이 실행 된다. (else if = if절이 거짓이고 else if 절이 사실일때 실행)
Ex1) let age = 24
if (age > 20) {
console.log('성인입니다')
} else {
console.log('청소년입니다')
}
성인입니다.
Ex2) let sex = '남성'
if (age >20 && sex == '남성') {
console.log('성인남성입니다')
} else {
console.log('청소년입니다.)
}
성인남성입니다.
Ex3 )let age = 24
if (age > 20) {
console.log('성인입니다')
} else if (age > 7 {
console.log('청소년입니다')
} else {
console.log ('아동입니다')
}
4. 반복문
-반복문이란? 말그대로 반복된 작업을 수행할때 쓰는 문법
For 문 : for ( 선언; 조건식; 증감식) {
}
Ex) for (let i = 0; i <10; i ++) {
console.log(i) }123456789
Ex2) 리스트를 응용한 반복문
let people = ['철수','영희','민수','형준','기남','동희']
// 이렇게 하면 리스트의 모든 원소를 한번에 출력할 수 있겠죠?
// i가 1씩 증가하면서, people의 원소를 차례대로 불러올 수 있게 됩니다.
for (let i = 0 ; i < people.length ; i++) {
console.log(people[i])
}
철수 영희 민수 형준 기남 동희
Ex3) 딕셔너리를 응용한 반복문
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 < scores.length ; i++) {
console.log(scores[i]);
}
// 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,
Ex4) If문을 응용한 반복문
for (let i = 0 ; i < scores.length ; i++) {
if (scores[i]['score'] < 70) {
console.log(scores[i]['name']);
}
}
// 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다.