자바스크립트 기본문법 이해하기 1( 객체, 메서드, 매개변수, 프로퍼티, 반환, 변수, 반복, 함수, 배열, while문, for문, for~in문)

 

자바스크립트의 동작 순서 

입력 ➡가공➡출력

 

 

 

자바스크립트 기본 문법

 

객체, 메서드, 매개변수

 

'🟠🟠가 🔺🔺을 🟧🟧해라'

 

🟠🟠: (영어의 주어) 객체 Object

🔺🔺: (영어의 목적어) 매개변수 Parameter

🟧🟧: (영어의 술어) 메서드 Method

 

console.log('test');

console은 log 해라 test를

console : 객체

log : 메서드

'test' : 매개변수

 

* 메서드는 ()가 꼭 필요하다.

매개변수는 메서드 지시에 필요한 추가정보.

 

 

프로퍼티

 

🟠🟠객체의 ❇❇은 🧡🧡이다

🟠🟠객체의 ❇❇을 🧡🧡로 한다.

 

❇❇: 프로퍼티, 객체의 상태를 나타낸다

🧡🧡:프로퍼티 값

 

document.getElimentById('choice').textContent = new Date();
console.log(document.getElimentById('choice').textContent);

#choice의 textContest를 newDate()로 한다

 

 

 

정리: 객체는 고유의 메서드(🟧🟧하라고 지시), 프로퍼티(객체의 상태)를 가진다.

메서드는 반드시 ()를 붙일 것.

 

 

 

 

반환

값을 반환한다 = 메서드의 실행 결과를 알려준다

 

confirm 메서드의 경우, 사용자가 버튼을 클릭하면 메서드의 역할은 거기서 끝이 난다.

이때 그 처리 결과로  true 혹은 false라는 값을 반환한다. (= 실행결과를 알려준다)

이 반환 값을 판단해서 이후 처리를 결정할 때 사용하는 것이 if문, 조건식이다.

false일 때 실행할 처리가 없다면 else 생략 가능

 

 

 

변수

사용법

1. 변수를 정의한다
2. 변수에 데이터를 대입한다
3. 변수에서 데이터를 읽는다
4. 변수의 데이터를 변경한다

var answer='yes';
console.log(answer); //결과: yes
answer='no';
console.log(answer); //결과: no

 

변수만 정의하기

var number;

데이터를 바로 대입하지않고 변수만 정의한다

변수에 초깃값이 없는 경우나 if문 등으로 대입 데이터가 달라지는 경우에 사용.

 

var num=Math.floor(Math.random()*6);
var answer=parseInt(window.prompt('input any number between 0 to 5'));
var message;
if(answer===number){
	message='correct!';
} else if(answer<number){
	message='much bigger!';
} else if(answer>number){
	message='much smaller!';
} else {
	message='input any number between 0 to 5';
}
window.alert(message);

 

 

 

 

반복

for문

for ( ①초깃값 ; ②반복 조건 ; ③실행 후 처리 ) { ④실행내용 }

for(var i=1; i<=10; i++){
	console.log(i);
}

 

1. 반복할지 여부를 ②의 조건식으로 판단한다
2. ②의 조건이 true이면 ④가 실행된다
3. ④의 처리가 끝나면 ③이 실행된다

반복처리에서는 변수 i 사용 ( 중복되는 경우 j, k 등 )

 

 

while문

while(조건식){
	//반복 실행할 문장
}

조건식이 true인 동안 {~} 안의 처리를 계속 반복 실행한다.

 

var enemy=100;
var attack;
var count=0;

window.alert('대전 시작!');
while(enemy>0){
	attack=Math.floor(Math.random()*30);
    console.log('몬스터에게 '+attack+'의 피해를 입혔다!');
    enemy-=attack; // enemy=enemy-attack; 과 같은 의미
    count++;
}
console.log(count+'회 만에 몬스터를 물리쳤다!');

 

for문과 while문의 차이

'반복 횟수가 처음부터 정해져 있는가'

for문은 반복 횟수가 분명한 경우, while문은 반복 횟수가 사전에 정해지지 않은 경우에 사용이 용이함

 

 

 

 

 

 

함수

 

function 함수명(매개변수){
	 처리 내용
}

 

1. 매개변수 받기
2. 지정한 처리(가공)을 함
3. 결과를 호출한 곳으로 반환

수학의 함수

y=f(x)

(x라는 입력 값을 f라는 함수에 놓으면 y라는 결과가 나온다)

 

프로그래밍에 대입하면

x : 매개변수(입력)

f : 함수(가공)

y : 결과(출력)

f(x) : 함수 호출

 

이름 없는 함수를 작성해서 변수에 대입하기

var 함수명=function(매개변수){
	처리 내용
};

 

var total=function(price){
	var tax=0.1;
    return price+price*tax;
}

console.log('1번 상품의 가격은 '+total(8000)+'원(부가세 포함)입니다.');
console.log('2번 상품의 가격은 '+total(2000)+'원(부가세 포함)입니다.');

 

 

 

 

 

 

배열

 

var todo=['샘플 만들기','데이터 정리','스터디 신청','장보기'];
for(i=0;i<todo.length;i++){
 console.log(todo[i]);
}

 

배열의 모든 데이터 읽어오기

for (i = 0; i < todo.length; i++) {
            console.log(todo[i]);
        }

 

 

 

배열의 메서드

 

.pop()	마지막 데이터 삭제
.push(data)	마지막에 data 추가
.shift()	첫번째 데이터 삭제
.unshift(data1, data2)	앞에 data1, data2 추가

 

항목을 html에 출력할때

            var li=document.createElement('li');
            li.textContent=todo[i];
            document.getElementById('list').appendChild(li);

 

위의 내용을 데이터의 모든 내용을 읽어오는 for문안에 삽입

 

 

 

 

 

 

객체

객체(object) : 여러 프로퍼티를 가지고 있는 데이터의 집합

각 프로퍼티에는 데이터가 저장되어있다.

 

객체 작성 방법

var 변수명={프로퍼티}

 

프로퍼티 형식

프로퍼티명:데이터

 

⇛ 즉, var 변수명={프로퍼티명:데이터} 가 된다.

 

프로퍼티의 데이터에 함수를 대입하면 해당 프로퍼티는 '메서드'가 된다.

 

 

 

객체의 모든 데이터 읽어오기

 

for(var p in jsbook){
    console.log(p+'='+jsbook[p])
}

 

배열은 순서에 엄격하지만 객체는 대충대충이다.

 

 

 

 

 

 

 

배열과 객체는 언제 사용하면 좋을까?

 

배열 : 각 행마다 하나의 데이터만 목록으로 나열하는 경우 ex) 세로형 목록 - 물건 목록, 할일 목록, 학생 명단

var pref=['강원도','경기도',...'충청도']

객체 : 특정 데이터에 여러개의 데이터가 연결되는 경우 ex)가로형 목록 - 제품 사양, 상품 가격과 재고, 인적사항

var score={user:'haru',score:9999,nation:'KR'}

 

 

 

 

 

 

 

 

※ 상기 내용은 '처음 만나는 Javascript (제이펍)' 내용을 정리한 것입니다.