JS ES6 강의 정리 0

강의를 듣기 전에 자바스크립트 기본문법 총정리 라는 것을 했다.

 

 

1. html 태그의 내용 바꾸기

선택자.innerHTML = '바꿀 내용';

document.getElementById('hello').innerHTML = '바보';

 

1-1. 버튼 클릭하면 html 태그 내용 바꾸기

addEventListener('click', function(){}) 의 안에 위의 내용을 넣으면 된다.

document.getElementById('button').addEventListener('click',function(){
	document.getElementById('hello').innerHTML = '멍청이';
})

 

2. 변수 : 내용을 잠시 저장하는 가방

var let const 뭐 이렇게 3가지 정도 있다.

문자는 '' 안에 넣고, 숫자는 그냥 쓰면 된다.

var name = 'kim';
var age = 20;

 

3. 코드 긴 거 짧게 축약하려면 함수를 만들어서 쓰기

함수를 쓸 땐 함수이름 뒤에 () 를 붙여줘야 한다. 작명; 이 아니라 작명();

//함수 이름이 한글로 지어져도 작동이 된다 신기
function 작명(){
	document.getElementById('hello').innerHTML = '똥개';
}

//그래서 작명 함수를 어떻게 쓰는데요
document.getElementById('hello').addEventListener('click',function(){
	작명();
});

 

4. 함수를 다양하게 쓰려면 파라미터로 업그레이드 시키기

함수 이름 뒤에 들어가는 () 안에 들어있는 게 파라미터다.

함수를 쓸 땐 함수이름(); 를 써야하니까 () 안에 파라미터를 넣으면 된다.

function 작명(파라미터){//(파라미터1, 파라미터2, 파라미터3) 이렇게 여러개도 쓸 수 있음
	document.getElementById('hello').innerHTML = 파라미터;
}

//이걸 어떻게 사용하느냐
document.getElementById('button').addEventListener('click',function(){
    작명('말미잘'); //''에 말미잘 안 넣고 쓰면 작동 안 됨
});

//작명의 파라미터는 #hello의 innerHTML 이 되니까
//작명(말미잘); 은 #hello의 innerHTML을 '말미잘'로 바꾼다.

 

5. 자료를 한 번에 여러개 저장하려면 array/object

[ ]는 array

array는 [] 안에 자료들을 우다다 넣을 때 쓰는 거

쓰는 방법 : name[0]; ➡ []안에 숫자를 넣기 때문에 인덱싱이라고 한다.

 

{ }는 object

object는 자료들에 이름(네임태그)을 붙이고 우다다 넣을 때 쓰는 거

쓰는 방법 : name.이름; 또는 name['이름'];

 

var name = ['kim', 20]; //얘가 array
name[0]; //이걸 '인덱싱'이라고 함
var name = {name : 'kim', age : 20}; //얘가 object  변수 왼쪽에 네임태그: 무조건 써줘야 함
name.age; //또는 name['age'] 로 인덱싱 숫자를 넣는 게 아니라 age같은 이름을 넣어줘야 함