딕셔너리 자료구조

Dictionary Data Structure in JS

//0.1초마다 백그라운드 이미지를 바꿔준다.
var 컴퓨터 = 0;
//자료구조의 일종으로 자바스크립트 객체는 딕셔너리 자료구조 역할을 할 수 있다. 1:1 매칭을 표현한다.
var 딕셔너리 = {
    //1:다를 매칭할 수도 있다. 예를 들어 한국어를 다른 언어들로 표현하고 싶을 때
    //바위 : ['0','바위','rock'],
    // 바위 : { 객체로 만들 수도 있다.
    //     한국어 : '바위',
    //     영어 : 'rock',
    //     값 : '0',
    // }
    바위 : '0',
    가위 : '-142px',
    보 : '-284px',
}
setInterval(function() {
    if(컴퓨터 === 딕셔너리.바위) {
        컴퓨터 = 딕셔너리.가위;
    } else if (컴퓨터 === 딕셔너리.가위) {
        컴퓨터 = 딕셔너리.보;
    } else {
        컴퓨터 = 딕셔너리.바위;
    }
    document.querySelector('#computer').style.background = 'url(https://en.pimg.jp/023/182/267/1/23182267.jpg) ' + 컴퓨터 + ' 0 ';
},100);//0.1초마다 계속 실행한다.
//가위 바위 보 다 선택할 수 있다.querySelectorAll을 유사배열처럼 사용하여 반복문을 사용할 수 있다.
// for(var i = 0; i < document.querySelectorAll('.btn');i += 1) {
//     document.querySelectorAll('.btn')[i].addEventListener('click',function(){
//     console.log(this.textContent);
//     });
// }
//위처럼 반복문을 사용할 수도 있지만 querySelectorAlldms forEach를 지원한다.
document.querySelectorAll('.btn').forEach(function(btn){
    btn.addEventListener('click',function() {
        var 나의선택 = this.textContent;
        console.log(나의선택,컴퓨터);
    });
})