Javacript : 동작
<head> 내에 <script> 안에 내용을 입력 </script>
ex.
<script>
function sum(a,b) {
alert ('계산을 하자')
return a+b
}
let result = sum(2,3)
alert(result)
1. 변수 & 기본 연산
let num = 20
num = 'bob'
let first_name : 'Jinyeol'
// 변수는 값을 저장하는 박스
// 한 번 선언했으면, 다시 선언하지 않고 값을 넣음
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라고 합니다. 회사마다 규칙이 있죠.
과 같이, 쉽게 알아볼 수 있게 쓰는 게 중요합니다.
다른 특수문자 또는 띄워쓰기는 불가능합니다!
2. 리스트 & 딕셔너리
let a_list = [] // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!
// 또는,
let b_list = ['수박','참외','배'] // 로 선언 가능
b_list[1] // '참외'를 출력
b_list[2] // '배'를 출력
// 리스트에 요소 넣기
b_list.push('감')
b_list // ['수박','참외','배','감'] 를 출력
// 리스트의 길이 구하기
b_list.length // 4를 출력
- 딕셔너리: 키(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}을 출력
let myemail = 'uncreative@naver.com'
myemail.split('@') // 값은 ['uncreative','naver.com']
myemail.split('@')[1] // 값은 ['naver.com']
myemail.split('@')[1].split('.') // 값은 ['naver','com']
myemail.split('@')[1].split('.')[0] // 값은 ['naver']
3. 함수
// 만들기
function 함수이름(필요한 변수들) {
내릴 명령들을 순차적으로 작성
}
// 사용하기
함수이름(필요한 변수들);
// 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
function sum(num1, num2) {
console.log('숫자', num1, num2);
return num1 + num2;
}
sum(3, 5); // 8
sum(4, -1); // 3
4. 조건문
- 20 보다 작으면 작다고, 크면 크다고 알려주는 함수
function is_adult(age){
if(age > 20){
alert('성인이에요')
} else {
alert('청소년이에요')
}
}
is_adult(25)
- 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)
5. 반복문
for (let i = 0; i < 100; i++){ console.log(i); } // 반복문은 주로 리스트와 함께 쓰인다 !!
<script>
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'] > 80) {
console.log(scores[i]['name'])
}
}
</script>
6. Javascript 연습하기
- 서울시 미세먼지 값을 불러와서, 미세먼지의 값이 40미만인 구 이름과 값 출력하기
// 서울시 미세먼지 리스트 너무 길어서 일부 삭제!
<script>
let mise_list = [
{
MSRDT: "201912052100",
MSRRGN_NM: "도심권",
MSRSTE_NM: "중구",
PM10: 22,
PM25: 14,
O3: 0.018,
NO2: 0.015,
CO: 0.4,
SO2: 0.002,
IDEX_NM: "좋음",
IDEX_MVL: 31,
ARPLT_MAIN: "O3",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "도심권",
MSRSTE_NM: "종로구",
PM10: 24,
PM25: 18,
O3: 0.013,
NO2: 0.016,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 39,
ARPLT_MAIN: "PM25",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "도심권",
MSRSTE_NM: "용산구",
PM10: 0,
PM25: 15,
O3: 0.012,
NO2: 0.027,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "점검중",
IDEX_MVL: -99,
ARPLT_MAIN: "점검중",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서북권",
MSRSTE_NM: "은평구",
PM10: 36,
PM25: 14,
O3: 0.019,
NO2: 0.018,
CO: 0.5,
SO2: 0.005,
IDEX_NM: "좋음",
IDEX_MVL: 42,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서북권",
MSRSTE_NM: "서대문구",
PM10: 28,
PM25: 9,
O3: 0.018,
NO2: 0.015,
CO: 0.6,
SO2: 0.004,
IDEX_NM: "좋음",
IDEX_MVL: 37,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서북권",
MSRSTE_NM: "마포구",
PM10: 26,
PM25: 8,
O3: 0.012,
NO2: 0.021,
CO: 0.5,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 36,
ARPLT_MAIN: "NO2",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동북권",
MSRSTE_NM: "광진구",
PM10: 17,
PM25: 9,
O3: 0.018,
NO2: 0.016,
CO: 0.6,
SO2: 0.001,
IDEX_NM: "좋음",
IDEX_MVL: 31,
ARPLT_MAIN: "O3",
}
for (let i = 0; i < mise_list.length; i++) {
if (mise_list[i]['IDEX_MVL'] < 40) {
console.log(mise_list[i]['MSRSTE_NM']['IDEX_MVL']);
}
}
</script>