안녕하세요 미니빅 입니다!
이전 파트에 js에 대해서 적용하는 방법은 간단히 보여드리고 끝냈습니다.
그래서 js문법에 대해서 정리를 하는 시간을 가지도록 할게요
우선, js는 웹브라우저 개발자도구를 통해서 실행합니다.
현재 열려있는 chrome 창에서 F12를 누르시면
이런 식으로 창이 뜹니다!
그러면 여기에 쓰면 되요
console.log("Hello World!");위의 코드를 개발자 도구에 치면
로그가 나옵니다.
js 언어는 다른 간결한 축에 속합니다.
자 그럼 변수 선언과 대입, 연산에 대해서 설명할게요
- 변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!" (2를 a라는 변수에 넣는다)
- let으로 변수를 선언합니다.
let num = 20 // let 이라는 명령어를 선언할 때 넣어줘야 합니다.
num = 'Bob'
// 변수는 값을 저장하는 박스예요.
// 한 번 선언했으면, 다시 선언하지 않고 값을 넣습니다.- 사칙연산, 그리고 문자열 더하기가 기본적으로 가능합니다.
let a = 1
let b = 2
a+b // 3
a/b // 0.5
let first = 'Bob'
let last = 'Lee'
first+last // 'BobLee'
first+' '+last // 'Bob Lee'
first+a // Bob1 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.- 리스트: 순서를 지켜서 가지고 있는 형태입니다.
let a_list = [] // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!
// 또는,
let b_list = [1,2,'hey',3] // 로 선언 가능
b_list[1] // 2 를 출력
b_list[2] // 'hey'를 출력
// 리스트에 요소 넣기
b_list.push('헤이')
b_list // [1, 2, "hey", 3, "헤이"] 를 출력
// 리스트의 길이 구하기
b_list.length // 5를 출력- 딕셔너리: 키(key)-밸류(value) 값의 묶음
let a_dict = {} // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!
// 또는,
let b_dict = {'name':'Bob','age':21} // 로 선언 가능
b_dict['name'] // 'Bob'을 출력
b_dict['age'] // 21을 출력
b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기
b_dict // {name: "Bob", age: 21, height: 180}을 출력- 리스트와 딕셔너리의 조합
names = [{'name':'bob','age':20},{'name':'carry','age':38}]
// names[0]['name']의 값은? 'bob'
// names[1]['name']의 값은? 'carry'
new_name = {'name':'john','age':7}
names.push(new_name)
// names의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
// names[2]['name']의 값은? 'john'- 기본적으로 제공하는 여러 함수들이 존재합니다.
// 예를 들면, '나눗셈의나머지'를 구하고 싶은 경우
let a = 20
let b = 7
a % b = 6
// 또, 특정 문자로 문자열을 나누고 싶은 경우
let myemail = 'sparta@gmail.com'
let result = myemail.split('@') // ['sparta','gmail.com']
result[0] // sparta
result[1] // gmail.com
let result2 = result[1].split('.') // ['gmail','com']
result2[0] // gmail -> 우리가 알고 싶었던 것!
result2[1] // com
myemail.split('@')[1].split('.')[0] // gmail -> 간단하게 쓸 수도 있다!모든 함수와 명령어를 다 외울 수는 없어요. 필요하다면 또 구글링하면 되죠
(저도 다 외우지 않고, 그 때마다 찾을 때 많습니다.)
본격적인 문법을 들어갑니다.
- 함수
// 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
// 선언
function sum(num1, num2) {
console.log('숫자', num1, num2);
return num1 + num2;
}
// 실사용
sum(3, 5); // 8
sum(4, -1); // 3- 조건문(if, else if, else)
function is_adult(age){
if(age > 20){
alert('성인이에요')
} else if (age > 10) {
alert('청소년이에요')
} else {
alert('10살 이하!')
}
}
is_adult(12)- 반복문(for)
//예를 들어 0부터 99까지 출력해야 하는 상황이라면!
console.log(0)
console.log(1)
console.log(2)
console.log(3)
console.log(4)
console.log(5)
...
console.log(99)
// 이렇게 쓰기엔 무리가 있겠죠? 그래서, 반복문이라는 것이 존재합니다!그래서 for 문을 사용해서
for (let i = 0; i < 100; i++) {
console.log(i);
}줄일 수가 있습니다.
이 정도까지 해서 javascript 문법 정리는 마치도록 할게요!
안녕!