javascript-(3)

오늘의 주제

Array, Object 문법, 자바스크립트로 html 생성하기, 반복문에 대해서 알아볼 것이다.

Array, Object

웹페이지를 만들다 보면, 한 변수에 보통 하나의 값만 저장하지만 상품 정보처럼 한 변수에 여러 개의 값을 저장하면 편한 경우가 있다. 판매하는 상품의 이름 , id, 가격이 그 대표적인 예시일 것이다. 이렇게 한 변수에 여러 값을 저장하는 방법인 array, object에 대해서 알아보자

var car = ['소나타', 50000, 'white'];
console.log(car[1]);

대괄호에 순서대로 값을 넣어주면 된다. 각 위치에 접근하려면 맨앞 0부터 car[1] 이런식으로 접근해 주면 된다.

이렇게 저장하는 방식을 array, 배열이라고 한다. 다른 프로그래밍 언어에서도 많이사용하는 기능이다.

var car2 = { name : '소나타', price : 50000 };
console.log(car2['name']);
console.log(car2.name);

위 저장 방식은 object이다. array와는 다르게 저장한 값에 접근하려면 값 앞에 있는 key라고 불려지는 값을 통해 접근할 수 있다. 위 경우 말고도 object에 여러개의 name, price로 여러개 값이 저장 될 수 있다. 이런 경우는 다음과 같이 원하는 값에 접근할 수 있다.

var car2 = { name : '소나타', price : [50000, 3000, 4000] } 
console.log(car2.price[1]);

위 경우 처럼 price에 여러 개의 값이 저장된 경우가 있다. 이런 경우에는 변수 이름.key이름[1] 이런식으로 접근해 주면 된다.

var products = [
    { id : 0, price : 70000, title : 'Blossom Dress' },
    { id : 1, price : 50000, title : 'Springfield Shirt' },
    { id : 2, price : 60000, title : 'Black Monastery' }
  ];

이 경우는 여러개의 product 정보가 저장되어 있는 products object이다. 여기서 Blossom Dress에 접근하려면 어떻게 해야할까?

console.log(products[0]).title 

아까는 key 이름 뒤에 인덱싱을 했지만, 이번엔 여러개의 product가 있으므로 변수 뒤에 인덱싱을 해주면 접근 할 수 있다.

자바스크립트로 html 생성하기

그동안 우리는 어떤 내용을 추가하려면, 직접 코드를 작성해서 추가해야 했다. 하지만 자바스크립트를 이용하면 특정 상황이나 버튼을 클릭하면 웹페이지 내용이 추가되거나 업데이트 되게 만들 수 있다. 여러가지 방법이 있는데, 하나씩 소개해 보도록 하겠다.

  var a = document.createElement('p');
  a.innerHTML = '안녕';
  document.querySelector('#test').appendChild(a);

createElement를 이용해서 html 자료를 생성하고, 안녕이라는 글자를 innerHTML을 이용해 바꿔주고 appendChild를 통해 저 내용을 test id를 가진 값을 넣어준다.

이보다 조금 더 간단한 방법도 존재한다.

  var a = '<p>안녕</p>';
  document.querySelector('#test').insertAdjacentHTML('beforeend', a);

insertAdjacentHTML을 통해 html 요소를 추가해 줄 수 있다. beforeend에 들어가는 값을 통해 어디에 넣을 건지도 조정이 가능하다.

반복문

반복문 활용은 코드의 길이를 줄여주고 가독성을 높여줍니다.

var pants = [28, 30, 32];
pants.forEach(function(){
  console.log('안녕')
});

forEach 반복문은 array에 사용할 수 있는 반복문 기능이다. forEach를 사용하게 되면 array의 길이만큼 반복문을 수행한다.

var pants = [28, 30, 32];
pants.forEach(function(a, i){
  console.log(a)
});

콜백함수에 파라미터도 사용이 가능하다. 여기서 a는 반복할 때 마다 array에 있는 값, 28, 30, 32가 들어가고 i는 반복한 횟수가 더해진다.

var obj = { name : 'kim', age : 20 }

for (var key in obj){
  console.log('안녕')
}

이번 반복문은 object에 사용가능한 for in 반복문이다. object의 개수가 두개이므로 두번 반복하게 될 것이다. 만약 console.log(key)를 사용한다면 name, age가 출력될 것이며 console.log(obj[key])를 사용한다면 kim, 20 이런식으로 object의 실제 값에 접근할 수 있다.

마무리

array, object와 html 생성하는 방법, 그리고 반복문에 대해서 알아보았다. 다음에는 서버와 데이터를 주고 받는 방법인 Ajax와 추가적인 기능에 대해서 알아보도록 하겠다.