split & join

배열을 문자로 쪼갤 때는 split을 사용하고, 문자를 배열로 합칠 경우에는 join을 사용한다.

var 숫자배열 = 입력창.value;//2879
String(숫자배열[0])+String(숫자배열[1])+String(숫자배열[2])+String(숫자배열[3]);//String을 붙이지 않으면 숫자 덧셈식이 되기 때문에 String을 붙여준다.
숫자배열.join('');;//위의 줄과 같은 결과가 나온다.

숫자야구를 구현할 때, 대답과 정답의 원소를 각각 비교하여 홈런인지 혹은 스트라이크와 불을 알려줘야하기 때문에 split을 사용하여 각각의 원소를 따진다.

var body = document.body;//document.body를 통해서 화면(document)에 접근할 수 있다

var 숫자후보 = [1,2,3,4,5,6,7,8,9];
var 숫자배열 = [];//숫자야구 정답!

for (var i =0; i <4 ;i += 1) {
    //var 뽑은것 = 숫자후보.pop();뒤에서부터 뽑는다.
    //var 뽑은것 = 숫자후보.splice(5,2);//5번째부터 2개 6,7을 뽑는다.
    var 뽑은것 = 숫자후보.splice(Math.floor(Math.random() * (9-i)),1)[0];//랜덤한 index를 생성하여 그 뒤 2개 6,7을 뽑는다, 한번 숫자를 뽑으면 배열 길이가 1씩 감소하기 때문에 (9-i)로 해준다.
    숫자배열.unshift(뽑은것);//앞에서부터 넣는다. 4 3 2 1 순서대로 넣음.
}
console.log(숫자배열);
var fform = document.createElement('form');
document.body.append(fform);

var 입력창 = document.createElement('input');
입력창.type = 'number';//이렇게 해줘도 입력창.value는 숫자로 되지 않는다.
입력창.maxLength = 4;
fform.append(입력창);//document>body가 아니라 form 하위에 만들어줘야하기 때문에.

var btn = document.createElement('button');
btn.textContent = '입력';//태그 안에 들어가는 글자.
fform.append(btn);

var result = document.createElement('div');
document.body.append();

var trial = 0;//틀린 횟수
fform.addEventListener('submit',function 비동기(e){//엔터를 쳤을 때
    e.preventDefault();
    var answer = 입력창.value;
    //console.log(answer,숫자배열, 답 === 숫자배열.join(''));

    if(answer === 숫자배열.join('')){//답이 맞으면
        result.textContent = '홈런';//입력한 answer와 정답과 일치하면 '홈런'
        입력창.value = '';
        입력창.focus();
        //다음 문제 낸다
        숫자후보 = [1,2,3,4,5,6,7,8,9];
        숫자배열 = [];
        for(var i = 0;i<4;i += 1) {
            var 뽑은것 = splice(Math.floor(Math.random * (9-i)),1)[0];
            숫자배열.push(뽑은것);
        }
        trial = 0;
    } else {//스트라이크와 볼을 알려줘야하기 떄문에 split을 사용하여 각각의 원소를 따진다.
        //9546을 배열로 만들 수 있다.
        //문자.split(구분자)->배열 (문자를 배열로 바꿀 땐 split)
        //배열.join(구분자)->문자 (배열을 문자로 바꿀 땐 join)
        var 답배열 = answer.split('');//입력한 대답을 쪼개서 답배열에 저장한다.
        var strike = 0;
        var ball = 0;
        trial += 1;
        if(trial > 10) {//10번 넘게 틀린 경우
            result.textContent = '10번 넘게 틀려서 실패! 답은' + 숫자배열.join(',')+'였습니다';
            입력창.value = '';
            입력창.focus();
            //문제 새로 낸다.
            숫자후보 = [1,2,3,4,5,6,7,8,9];
            숫자배열 = [];
            for(var i = 0;i<4;i += 1) {
                var 뽑은것 = splice(Math.floor(Math.random * (9-i)),1)[0];
                숫자배열.push(뽑은것);
            }
            trial=0;
        } else {//10번 미만으로 틀린 경우
            console.log('답이 틀리면');//에러원인을 track 하기위해
            for(var i=0; i <4; i++) {//4자리 숫자이기 때문에 4번 반복
                if(Number(답배열[i]) === 숫자배열[i]){//같은 자리, 같은 숫자인지 확인.답배열(입력한 대답)와 숫자배열(숫자야구 정답)의 각각의 원소(i번째 원소)를 비교한다.
                    console.log('같은 자리?',답배열);
                    strike += 1;
                }
                else if (숫자배열.indexOf(Number(답배열[i])) > -1){//같은 자리는 아니지만 숫자가 겹치는지 확인.배열.indexOf(값) : 값의 위치를 알 수 있다. 없으면 -1. 그러므로 -1과 비교하여 -1보다 크면 들어있다.
                    console.log('겹치는 숫자?');
                    ball += 1;
                }
            } 
        }
         
    result.textContent = strike + '스트라이크' + 볼 + '볼입니다.';
    입력창.value = '';
    입력창.focus();
    }    
});