Notice
Recent Posts
Recent Comments
Link
«   2024/10   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

프로그래밍 삽질 중

Let's Get IT 자바스크립트 프로그래밍 - 끝말잇기, 쿵쿵따 만들기(개념 추가) 본문

과거 프로그래밍 자료들/Javascript&typescript

Let's Get IT 자바스크립트 프로그래밍 - 끝말잇기, 쿵쿵따 만들기(개념 추가)

평부 2022. 7. 6. 18:47

 

* 출처 

https://thebook.io/080270/part02/ch03/01-03/

 

Let's Get IT 자바스크립트 프로그래밍: 3.1 순서도 그리기 - 3

 

thebook.io

 

끝말잇기

- 참가자 수 결정

- 참가자가 말하는 말의 마지막 글자로 이어서 연결

- 참가자 수 반복 (예를 들어 3명일 경우 3 -> 2 -> 1 -> 3 -> 2로 반복)

 

끝말잇기 순서도

 

순서도1 - 참가자에 기준됨
순서도 2 - 참가자가 몇 번인지, 입력한 단어가 올바른지?
순서도 3 - 제시어를 저장할 변수 생성
순서도 4 - 입력할 단어를 저장할 변수를 만듦
순서도 5 - 현재 순서를 파악함
순서도 6 - 중복된 부분 제거(제시어가 비었거나 올바른 단어가 입력됬는지?)

 

* 콜백함수

- 특정 작업이 실행되고 난 뒤 추가로 실행되는 함수 

- EX) 버튼이 클릭되고 실행되는 함수 -> onClickButton, onInput 같은 함수

 

* onInput 함수 내 매개변수로 event 존재 

- event.target (이벤트가 처음 발생한 대상 (출처 : https://developer.mozilla.org/ko/docs/Web/API/Event ))

 

 

 

 

 

 

코드

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>끝말잇기 복습</title>
</head>

<body>
    <div><span id="order">1</span>번째 참가자</div>
    <div>제시어 : <span id="word"></span></div>
    <input type="text">
    <button class="target">입력</button>
    <script>
        const people = Number(prompt("참가자는 총 몇 명인가요?"));
        const $input = document.querySelector('input');
        const $button = document.querySelector('button');
        const $word = document.querySelector('#word');
        const $order = document.querySelector('#order');

        let word; //제시어
        let newWord; //현재 단어

        const onClickButton = () => {
            if (!word || word[word.length - 1] === newWord[0]) { //제시어가 비어있는가? 올바른 단어가 입력되었는가?
                word = newWord;
                $word.textContent = word; //화면에 바뀐 것 표시
                const order = Number($order.textContent);
                if (order + 1 > people) {
                    $order.textContent = 1;
                } else {
                    $order.textContent = order + 1;
                }
                $input.value = '';
                $input.focus();
            } else {//올바르지 않다.
                alert('올바르지 않다.')
                $input.value = '';
                $input.focus();
            }
        }

        const onInput = (event) => {
            newWord = event.target.value; //입력한 단어를 현재 단어로
        }

        $button.addEventListener("click", onClickButton);
        $input.addEventListener('input', onInput);

    </script>
</body>

</html>

 

* 결과

 

 

쿵쿵따

- 참가자 수 결정

- 참가자가 말하는 말의 마지막 글자로 이어서 연결

- 참가자 수 반복 (예를 들어 3명일 경우 3 -> 2 -> 1 -> 3 -> 2로 반복)

 

[추가]

- 글자수는 3글자만 가능

- prompt로 나오는 부분(참가자 몇 명인지 묻는 것) 취소 버튼 누를 경우 아예 입력 안 되게 할 것

 

 

코드

 

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>끝말잇기 복습</title>
</head>

<body>
    <div><span id="order">1</span>번째 참가자</div>
    <div>제시어 : <span id="word"></span></div>
    <input type="text">
    <button class="target">입력</button>
    <script>
        const people = Number(prompt("참가자는 총 몇 명인가요?"));

        if (people) {
            const $input = document.querySelector('input');
            const $button = document.querySelector('button');
            const $word = document.querySelector('#word');
            const $order = document.querySelector('#order');

            let word; //제시어
            let newWord; //현재 단어

            const onClickButton = () => {
                if (newWord.length === 3 && (!word || word[word.length - 1] === newWord[0])) { //제시어가 비어있는가? 올바른 단어가 입력 되었는가?
                    word = newWord;
                    $word.textContent = word; //화면에 바뀐 것 표시
                    const order = Number($order.textContent);
                    if (order + 1 > people) {
                        $order.textContent = 1;
                    } else {
                        $order.textContent = order + 1;
                    }
                    $input.value = '';
                    $input.focus();
                } else {//올바르지 않다.
                    alert('올바르지 않다.')
                    $input.value = '';
                    $input.focus();
                }
            }

            const onInput = (event) => {
                newWord = event.target.value; //입력한 단어를 현재 단어로
            }

            $button.addEventListener("click", onClickButton);
            $input.addEventListener('input', onInput);
        }
    </script>
</body>

</html>

 

* 결과

 

 

저작자표시 비영리 변경금지

'과거 프로그래밍 자료들 > Javascript&typescript' 카테고리의 다른 글

Let's Get IT 자바스크립트 프로그래밍 - 반응속도 테스트, 상위 5개만 보여주기  (0) 2022.07.14
Let's Get IT 자바스크립트 프로그래밍 - 계산기 만들기, 연속 계산 추가  (0) 2022.07.07
Let's Get IT 자바스크립트 프로그래밍 - 변수, 배열  (0) 2022.07.05
모던 자바스크립트 핵심 가이드 06 디스트럭처링(destucturing)  (0) 2022.05.16
모던 자바스크립트 핵심 가이드 05 문자열 메서드  (0) 2022.05.16
'과거 프로그래밍 자료들/Javascript&typescript' Related Articles more