3. 1주차 - JavaScript

---

 

 

JavaScript(자바스크립트)

 

자바스크립트(JavaScript)는 객체(object) 기반의 스크립트 언어이다.

HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하며,

자바스크립트로는 웹의 동작을 구현할 수 있다.

 

 

간단한 연결 해보기!

 

결과

영화 기록하기 버튼을 클릭하면 "안녕!" 이 나타난다.

 

 

 

JavaScript 기초문법 배우기(1)

 

[크롬 개발자도구]를 열어, console 탭에 작성한다.

👉 "마우스 오른쪽 클릭" → 검사  → console 

 

크롬 개발자도구 콘솔창이란?

> 띄워놓은 페이지에서 빠르게 자바스크립트를 테스트해볼 수 있다.

개발자들을 위해 만들어둔 도구. 단, 새로고침 하면 사라진다. 

 

 

> console.log(변수)

 

콘솔 창에 괄호 안의 값을 출력해준다.

console.log(변수1,변수2...) 로 여러 변수를 한 번에 출력할 수 있다.

 

 

> 변수 & 기본연산

 

- 변수 대입(a=2)의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!"

(2를 a라는 변수에 넣는다)

 

- 변수

'let' 키워드로 변수를 선언한다.

let num = 20
num = 'Bob'
//변수는 값을 저장하는 박스
//한 번 선언했으면, 다시 선언하지 않고 값을 넣는다.

사칙연산도 가능하며 문자끼리 더할 경우 두 문자가 합쳐진다.

 

 

 

JavaScript 기초 문법 배우기(2)

 

> 리스트 & 딕셔너리

 

리스트 : 순서를 지켜서 가지고 있는 형태

let a_list = [] //리스트를 선언. 변수 이름은 역시 아무렇게나 가능!

//또는,

let b_list = [1,2,'hey',3] //로 선언 가능

b_list[1] // 2를 출력
b_lsit[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}]
				0							1
//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':10},{'name':'john','age':7}]
//names[2]['name']의 값은? 'john'

 

 

 

JavaScript 기초 문법 배우기(3)

 

함수

//만들기
function 함수이름(필요한 변수들) {
	내릴 명령들을 순차적으로 작성
}

//사용하기
함수이름(필요한 변수들);

예시

// 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
function sum(num1, num2) {
	console.log('숫자', num1, num2);
	return num1 + num2;
}

sum(3, 5); // 8
sum(4, -1); // 3

 

 

조건문

//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('아가입니다!')
    }
}

is_adult(12) //'청소년입니다!'

 

 

 

JavaScript 기초 문법 배우기(4)

 

반복문

 

사용법

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

// 1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
// -> 2체크하고 -> (괜찮으면) -> 4 -> 3
// -> 2체크하고 -> (괜찮으면) -> 4 -> 3
// -> 2체크하고 -> (괜찮으면) -> 4 -> 3

//와 같은 순서로 실행됩니다.
//i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.

 

해보기

//0부터 99까지 출력하기

for(let i = 0; i < 100; i++) {
	console.log(i);
}

 

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점 미만인 사람들의 이름만 출력하기

//결과 : 형준 기남 동희

 

 

 

 

 

 

 

 

 

위에 글 내용은 오류 사항이 존재할 수 있습니다!

수정 사항이 있을 시 알려주시면 감사하겠습니다.

​