반응형

See the Pen mdObqGx by hyesse (@hyesse) on CodePen.

 

::setInterval()

setInverval(함수,시간)

슬라이드 만들 때 많이 사용했던 setInterval. setInterval함수로 가위바위보 사진을 0.1초마다 계속 돌아가며 보여지게끔 코딩한다. setTimeout()과 차이점은 몇 초 후에 실행할 것이냐, 몇 초마다 반복할 것이냐의 차이이다.

 

setInverval()은 함수를 정해진 시간마다 반복하는 데에 반하여 setTimeout()은 함수를 몇 초가 지난 뒤에 실행할 것인지를 정의한다.

function 인터벌메이커(){
    인터벌=setInterval(function(){
        if(이미지좌표===가위바위보.바위){
            이미지좌표=가위바위보.가위;
        } else if(이미지좌표===가위바위보.가위){
            이미지좌표=가위바위보.보;
        } else{
            이미지좌표=가위바위보.바위;
        }
    
        document.querySelector('#computer').style.background='url("http://en.pimg.jp/023/182/267/1/23182267.jpg") '+이미지좌표+' 0';
    
},100); //1초마다 사진이 정해놓은 좌표값에 맞게 바뀌어 보여진다.


setTimeout(function(){
	인터벌메이커();
},1000); //1초 뒤에 인터벌메이커()함수를 실행함

 

 

::Object.entries()

객체를 배열로 만들 때 사용함.

설명해주실 때 딕셔너리를 배열로 만든다 라고 하셨는데 나는 딕셔너리가 뭔지 모르므로 걍 객체를 배열로 만들 때라고 외움..ㅎ...

var 가위바위보={ //딕셔너리 자료구조
    가위:'-142px',
    바위:'0',
    보:'-284px'
  //key:value값
};

function 컴퓨터의선택(이미지좌표){
    return Object.entries(가위바위보).find(function(v){
        return v[1]===이미지좌표; //v[1]의 위치:좌표값
    })[0];
}

객체를 만들고 안에 있는 value값이 필요해서 객체를 배열로 만든 뒤 v[1], 즉 value 값을 찾는다.

 

::1차원 배열과 2차원 배열에서 사용하는 indexOf / find / findIndex

단순 배열일 때 1차원 배열이라고 하고 이때는 indexOf를 사용해 위치값을 찾아낼 수 있음.

 

그런데 배열 안에 배열이 들어가있는 2차원 배열의 경우에는 find를 이용해서 위치값을 찾아낼 수 있고, findIndex는 위치값의 순번?을 알아낼 수 있다고 한다.

 

jQuery 쓸 때는 find를 html 태그 안에 있는 어떤 요소를 찾을 때(자식요소) 사용했던 기억이 난다.

$('div').find('p');  //div 안에 자식으로 있는 p

 

::querySelector/querySelectorAll

querySelector는 ('#id이름') 같이 css 작성하듯 사용할 수 있는데, 비슷한 태그들을 다 불러오고 싶을 때는 Id로 하면 안되고 class로 해줘야 한다.

document.querySelectorAll('.btn').forEach(function(btn){
    btn.addEventListener('click',function(){
    
    ...

나는 버튼을 세 개 만든 뒤 가위,바위,보를 각각 버튼에 넣어줬기 때문에 버튼들을 다 불러오려면 class로 btn을 명명한 뒤에 자바스크립트 코드에서는 querySelectorAll('.btn')으로 한번에 불러올 수 있었다.

 

그리고 querySelectorAll은 forEach를 사용해서 반복문을 돌릴 수 있음.

 

::[배열].includes()

if함수로 이겼을 때, 졌을 때, 비겼을 때 메시지를 띄워야 하는데 이 때 if문에 들어가는 구절이 너무 길었다.

if(점수차===0){
            console.log('비김');
            var 결과=document.createElement('h2');
            document.body.append(결과);
            결과.textContent="비김";
            
        }else if([-1,2].includes(점수차)){
            console.log('이김');
            var 결과=document.createElement('h2');
            document.body.append(결과);
            결과.textContent="이김";
        }else{
            console.log('짐');
            var 결과=document.createElement('h2');
            document.body.append(결과);
            결과.textContent="짐";
        }


//점수표[나의선택]-점수표[컴퓨터의선택(이미지좌표)]===-1 || 점수표[나의선택]-점수표[컴퓨터의선택(이미지좌표)]===2
//->배열.includes로 줄일 수 있다.

점수표[나의선택]-점수표[컴퓨터의선택(이미지좌표)]===-1 || 점수표[나의선택]-점수표[컴퓨터의선택(이미지좌표)]===2 //비효율적

이럴 때 같은 부분은 제외하고 다른 부분을 배열로 만든 뒤 뒤에 .includes(중복된 부분)을 넣어주면 된다.

[-1, 2].(점수표[나의선택]-점수표[컴퓨터의선택(이미지좌표)])  //이렇게 단순화 할 수 있다.

반응형
반응형

See the Pen 틱택토 by hyesse (@hyesse) on CodePen.

 

::테이블 짜기

<table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
</table>

가로 세 줄 안에 칸 세 개가 들어있는 테이블을 짰다.

이렇게 짜면 간편하지만 자바스크립트 공부를 위해서 직접 자바스크립트에서 html을 생성해보았다.

var 바디=document.body;
var 테이블=document.createElement('table');
var 줄들=[];
var 칸들=[];


for(var i=1;i<=3;i++){                         // 줄 생성을 위한 for문
    var 줄=document.createElement('tr');        // 줄이라는 변수에 tr이 들어가게 설정, 3번 반복(3줄)
    줄들.push(줄);				// 줄들이라는 배열에 세 줄을 넣음
    칸들.push([]);				// 마찬가지로 칸들이라는 배열에 배열 생성
    for(var j=1;j<=3;j++){			// 칸 생성을 위한 for문
        var 칸=document.createElement('td');    // 칸이라는 변수에 td가 들어가게 설정, 3번 반복(3칸)
        칸.addEventListener('click', 비동기콜백);	 // 칸을 클릭했을 때 발생할 함수
        칸들[i-1].push(칸);
        줄.appendChild(칸);
    }
    테이블.appendChild(줄);
}

바디.append(테이블);

 

 

 

::target

클릭한 칸의 위치를 알기 위해 target을 배웠음. target은 클릭한 그 부분을 알게 해줌.

e.target은 칸을, e.target.parentNode는 칸의 상위요소인 줄의 위치를 알게 해준다.

이때, 좌표값으로 표현하기 위하여 indexOf를 사용하였다.

 

 

::Array.indexOf

array.indexOf(value, start)

value에는 검색할 값을, start에는 시작할 위치를 넣는다.

 

var 몇줄=줄들.indexOf(e.target.parentNode);
var 몇칸=칸들[몇줄].indexOf(e.target);
console.log(몇줄,몇칸);

클릭한 칸의 좌표값이 필요하기 때문에 우선 줄의 인덱스 값을 찾고, 그 다음 칸들의 인덱스 값을 찾는다.

콘솔 돌려보면 [1,0] [2,2] 같이 표시되는 것을 확인할 수 있다.

 

 

::addEventListener('click', 함수명)

addEventListener를 사용할 때 함수를 바깥에서 정의했다면 안에 소괄호를 적지 않는다.

함수명() 이라고 넣으니까 에러났음..

반응형

+ Recent posts