Javascript 기초 문법 배우기 (1)
Javascript는 script 안에 코드를 입력해준다.
script는 브라우저 개발자툴(f12)에 Console탭과 똑같은 것이다.
script를 Console탭에 이어서 코드를 입력하여 실행되는 것을 확인 할 수 있고 Console탭에서 코드를 따로 입력하여 실행되는 것을 테스트할 수 있다.
프로그래밍을 배울 때 함수, 변수, 자료형, 조건문, 반복문 이 다섯 개를 꼭 기억하면 된다.
함수
<head> ~ </head> 안에 <script> ~ </script> 로 공간을 만들어 작성한다.
</style>
<script>
function hey() {
alert('안녕!');
}
</script>
<button>영화 기록하기</button><button onclick="hey()">영화 기록하기</button>영화 기록하기 버튼을 클릭 하였을 때 안녕!이라는 팝업창을 뜨도록 하는 것이다.
function sum(a,b) {
alert(a+b)
}sum 이라는 거는 우리가 그냥 지어준 이름이고 aaabbb 다 상관이 없다.
sum(a,b)는 alert()을 하는데 a+b를 alert()한다.
예를 들어 sum(2,3)이면 alert(5)가 된다.
함수라는 것은 정해진 동작을 그냥 하는 것이다.
콘솔 창에 sum(2,3)을 입력하고 브라우저를 확인하면 팝업창에 5라는 값이 뜬다.
함수가 정해진 값을 주는 것도 있다.
function sum(a,b) {
alert('계산을 하자')
return a+b
}
let result = sum(2,3)
alert(result) function sum(a,b) {
alert('계산을 하자')
return a+b
} 이것은 정의를 해논 것!
let result = sum(2,3)은 sum(a,b) 불러오고 alert('계산을 하자') 먼저 들어가 있기 때문에 계산을 하자가 먼저 뜨고 return a+b 5라는 값이 뜬다.
head에 코드를 입력했기때문에 body 부분을 읽기 전이라 브라우저에서 하얀 배경에서 팝업이 뜨고 확인을 누르면 팝업창이 사라지면서 인덱스 페이지가 열린다.
alert 대신에 console.log를 사용할 수 있으며 console.log를 사용하면 console 창에 찍어 줘라 이런 뜻이다.
변수(console.log)
console.log(변수) 는, Console 창에 괄호 안의 값을 출력해준다.
개발자가 결과값을 보기 편하도록!
console.log(변수1,변수2) 로 여러 변수를 한번에 출력할 수도 있다.
변수 대입
변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!"
(2를 a라는 변수에 넣는다)
let으로 변수를 선언한다.
사칙연산, 그리고 문자열 더하기
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 first_name = 'bob' // snake case
let firstName = 'bob' // camel case
위와 같이, 규칙을 정해서 쉽게 알아볼 수 있게 쓰는 것이 중요하다.
자료형
리스트: 순서를 지켜서 가지고 있는 형태.
딕셔너리: 키(key)-밸류(value) 값의 묶음.
리스트와 딕셔너리의 조합.
보기에도 깔끔해지고, 다루기도 쉬워지고, .push 함수를 이용해 간단하게 대응할 수 있다.
리스트
let a_list = ['수박','참외','배'] 이 코드에 a_list [1]은 참외이다.
['수박','참외','배'] 0부터 시작하기 때문에 수박은 0 참외 1 배 2가 된다.
a_list에 추가를 할 경우 a_list.push('감')을 입력하면 된다.
딕셔너리
let a_dict = {'name':'bob','age':27} 이 코드에 a_dict['name'] 은 bob이다.
이름은 ...다 나이는 ...다 이렇게 이해를 하면 되고 name은 key이고 bob은 value이다.
딕셔너리에 추가할때에는 a_dict['height'] = 180 입력하면 된다.
조건문
if() 이렇다면 저렇고, else() 그게 아니라면 이렇게 된다.
20 보다 작으면 작다고, 크면 크다고 알려주는 함수
function is_adult(age) {
if (age < 20) {
alert('성인입니다')
}else{
alert('청소년입니다')
}
}콘솔 창에 is_adult(20)이라 치면 브라우저 팝업창에 청소년입니다가 뜬다.
is_adult(21)이상 입력하면 (age < 20)이므로 성인이 뜬다.
if, else if, else if, else if else
function is_adult(age){
if(age > 20){
alert('성인이에요')
} else if (age > 10) {
alert('청소년이에요')
} else {
alert('10살 이하!')
}
}
is_adult(12)반복문
100개의 데이터가 있다고 가정했을 때 100개의 데이터를 하나씩 let을 이용해 사용할 수 없으니 데이터를 한번에 모아서 정렬하는 방법이 필요하므로 계속 반복하자.
예를 들어 0부터 99까지 출력해야 하는 상황이라면!
console.log(0)
console.log(1)
console.log(2)
console.log(3)
console.log(4)
console.log(5)
...
console.log(99)
이렇게 쓰기엔 무리가 있다. 그래서, 반복문이라는 것이 존재한다!
반복문을 이용하면 아래와 같이 단 세줄로, 출력할 수 있다.
for (let i = 0; i < 100; i++) {
console.log(i);
}반복문 연습
let a_list = ['사과','배','감','딸기']
for (let i = 0; i < a_list.length; i++) {
console.log(a_list[i])
}
i = 0; 하나씩 커지면서 console.log(a_list[i] 내용물을 실행시키는 것이다.
언제까지 a_list.length 길이까지 리스트 내용은 4개 이니까 a_list.length(4) 그래서 사과, 배, 감, 딸기가 나온 것이다.
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])
}콘솔 창에 리스트가 전부 출력된다.
list하고 같이 노는 게 반복문이다.
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++) {
if (scores[i]['score'] > 70) {
console.log(scores[i]['name'])
}
}(scores[i]['score'] > 70)은 70보다 높은 console.log(scores[i]['name']은 score에 i번째의 name을 찍어줘라.
