본문 바로가기
JavaScript

Objects

by 메씨 2023. 4. 14.
728x90
반응형

object는 property를 가진 데이터를 저장해주며, { } 를 사용한다.

const player = {

const player = {
name : "tomato",
color : "red",
food : true
};

console.log(player);

property를 불러오는 방법은 2가지가 있다.

  1. console.log(player.name); => tomato
  2. console.log(player["name"]); => tomato

또한 property를 바꾸는 것은 가능하지만 선언된 object를 바꾸는 것은 불가능하다.

const player = {
name : "tomato",
color : "red",
food : true,
};
console.log(player);
player.color = "blue";
console.log(player.color);  //-> blue

그리고 property를 추가 할 수도 있다.

player.koreanName = "토마토";
//{name: "tomato", color: "blue", food: true, koreaName: "토마토"}

player.koreanName = "토마토";

  • ->

두개의 변수

const title = document.querySelector("#title");//id title을 title이라고 js 변수 설정

const BASE_COLOR = "#000000"; //상수 설정
const OTHER_COLR = "#7f8c8d";  //상수 설정

function handleClick() {  //handleClick 기능을 실행한다
                          //(handleClick은 title에 click 실행을 하면 일어남)

const currentColor = title.style.color;  // 변수 currentColor = title의 색깔은 
console.log(currentColor); //currentColor 출력(현재 title의 색깔 출력됨)

if (currentColor === BASE_COLOR) {  //currentColor(현재 title의 색깔)이
                                    // BASE_COLOR(#000000)라면

title.style.color = OTHER_COLOR;    //title은 OTHER_COLOR(#7f8c8d)로 출력
}

else {                              //BASE_COLOR(#000000)가 아니라면        
                                   // BASE_COLOR(#000000)로  title 출력
title.style.color = BASE_COLOR;
}
}

function init() {    //초기화
title.style.color = BASE_COLOR;  
title.addEventListener("click",handleClick);  //handleClick은 title에 click 실행을 하면일어남
}

init();

728x90
반응형

'JavaScript' 카테고리의 다른 글

축약연산자  (0) 2023.04.23
date, setInterval, localStorage  (0) 2023.04.14
toggle  (0) 2023.04.14
Array  (0) 2023.04.14
addEventListener 활용하여 크기별로 글자 와 배경이 변하는 윈도우 창 만들기  (0) 2023.04.13

댓글