Javascript

자바스크립트란?

• 웹 사이트에 움직이는 그림을 그릴 때 쓰이는 작고 가벼운 언어
• 이제는 자바스크립트로 앱 만들기도 가능

기초문법

1) 변수

• console.log(변수)는 개발자 콘솔 창에 괄호 안의 값을 개발자가 보기 편하도록 출력해준다.
• 변수 대입의 의미 : 오른쪽에 있는 것을 왼쪽에 넣는 것 ex) a = 2 (2를 a라는 변수에 넣는다.)
• let으로 변수를 선언
• let first_name (snake case) / let firstName (camel case) -> 특수문자 또는 띄어쓰기 불가능
• const로 변수 선언 -> 변경되지 않아야 할 때. 변수 바뀌지 않음.

 

2) 리스트 (배열 Array) & 딕셔너리 (객체)

• 리스트

let a_list = [1,2,'hey',3]
undefined
a_list[2]
'hey'
a_list.push('헤이')   // a_list에 '헤이' 추가
5
a_list
(5) [1, 2, 'hey', 3, '헤이']

• 딕셔너리 

let a_dict = {'name' : 'Bob', 'age' : '21'}
undefined
a_dict['name']   //   a_dict.name 으로도 가능
'Bob'
a_dict['age']
'21'
a_dict['height'] = 180   // a_dict에 'height' '180' 추가
180
a_dict
{name: 'Bob', age: '21', height: 180}

• 순서를 표시할 수 있고 정보를 묶어 깔끔하고 보기 좋게 표시 가능

3) 기본 제공 함수

• 나눗셈의 나머지를 구하고 싶은 경우  a%b
• 모든 알파벳을 대문자로 바꾸고 싶은 경우 .toUpperCase
• 특정 문자로 문자열을 나누고 싶은 경우 .split('특정문자')
• 특정 문자로 합치고 싶은 경우 .join

let a=20
let b=7

a%b
6

let myname = 'spartacodinclub'

myname.toUpperCase()
'SPARTACODINCLUB'

let myemail = 'sparta@gmail.com'
myemail.split('@')
(2) ['sparta', 'gmail.com']
myemail.split('@')[1].split('.')[0]
'gmail'

let txt = '서울시-마포구-망원동'

let names = txt.split('-')
let result = names.join('>');

names
(3) ['서울시', '마포구', '망원동']
result
'서울시>마포구>망원동'

 

4) 함수

• 기본 생김새

//만들기
function 함수이름(필요한 변수들){
	내릴 명령들을 순차적으로 작성
 }
 //사용하기
 함수이름(필요한 변수들);
 
 //예시
function sum(num1, num2){
    console.log('num1: ', num1, ', num2: ', num2);

    return num1 + num2;}

sum(3, 5)
num1:  3 , num2:  5
8
sum(4,-1)
num1:  4 , num2:  -1
3
let result = sum(10,10)
console.log(result)
num1:  10 , num2:  10

//다른 방식
let a = function(){
	console.log("리터럴 방식")
 }
 a()

 

5)조건문

function is_adult(age){
    if(age > 20){         // 첫번째 조건 if
        alert('성인이에요')
    } else if (age > 10) {    // 그 다음 조건부터는 else if
        alert('청소년이에요')
    }
    else {                // 마지막 조건(위의 조건이 아닌 것들)은 else
        alert('10살 이하!')
    }

is_adult(12)   // 청소년이에요!

//AND조건과 OR조건
function is_adult(age, sex){
    if (age > 65 || age < 10) {      // or 은 ||
        alert('탑승하실 수 없습니다')
    } else if(age > 20 && sex == '여'){    // and 는 &&
        alert('성인 여성')
    } else if (afe > 20 && sex == '남'){
        alert('성인 남성')
    } else {
        alert('청소년이에요')
    }
}

is_adult(25,'남')  // 성인 남성

 

6) 반복문

for (1. 시작조건; 2. 반복조건; 3. 더하기) {
	4. 매번실행
}


for (let i = 0; i < 100; i++){
	console.log(i)
}
//0번째 부터 시작해 100미만까지 i를 1씩 증가시킨다(i++ : 후순위 연산자)

//예시
let people = ['철수','영희','민수','형준','기남','동희']

for (let i = 0 ; i < people.length ; i++) {
	console.log(people[i])
}
//i가 1씩 증가하면서 다음 순서인 요소들을 차례로 출력
철수
영희
민수
형준
기남
동희

//예시2
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']);
	}
}
//점수가 70점 미만인 사람들의 이름 출력

형준
기남
동희

7) 합을 구하는 함수 만들기

• 0부터 n-1까지 더하는 함수

function get_sum(n) {
	let sum = 0
    for (let i = 0; i < n; i++) {
    	sum += i;        // sum을 i만큼 증가시켜라. sum = sum + i 와 동일
    }
    return sum
}

let result = get_sum(10);  // return 결과인 sum이 result에 저장
console.log(result)
45

sum += i 의 원리가 이해하기 좀 어려웠는데

처음은 0+1 = 1 / 1+2 = 3 / 3+3 = 6 / 6+7 = 10 / 10+5 = 15 / 15+6 = 21 / 21+7 = 28 / 28+8 = 36 / 36+9 = 45

그래서 결과는 45로 출력되는 원리였다.

 

• 배열에서 특정 원소 갯수 구하기

let fruit_list = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기']

let count = 0;
for (let i = 0; i < fruit_list.length; i++) {
	let fruit = fruit_list[i];   // fruit은 fruit_list[i]라고 선언
	if (fruit == '딸기') {
		count += 1;
	}
}
console.log(count);
2

 

• 미세먼지(IDEX_MVL)의 값이 40 미만인 구 이름(MSRSTE_NM)과 값을 출력하기

for (let i = 0; i < mise_list.length; i++) {
  let mise = mise_list[i];
  if (mise["IDEX_MVL"] < 40) {
    let gu_name = mise["MSRSTE_NM"];
    let gu_mise = mise["IDEX_MVL"];
    console.log("40보다 작은 구: " + gu_name + ", " + gu_mise);
  }
}
// 결과는 40보다 작은 구 :  구이름,  미세먼지지수 이런식으로 출력