[교육] {코드캠프} 프리캠프 8기 - 3일차 (싸이월드 게임 부분 완성, 자바스크립트 for, if문 + @)

2021. 10. 20. 23:54

🚀

건대에서 독감주사 맞고 오늘도 강의실 30분 일찍 도착! 날씨가 좀 추워져서 간만에 코트를 입었다. 감기 기운이 좀 있었는데 강의들을 때랑 집 가는 길엔 비염이 심해져서 좀 힘들었다 ^^;;

📖 배운 내용

1. for문

for문 처음 배울 때가 생각났다....

2. if문

이 정도야 뭐...

3. 이메일 split 하기

includes(), split(), push(), length() 유용하게 쓸 수 있을 것 같다.

=> 사이트에서 회원 아이디 조회할 때 "abc***@gmail.com" 이런 식으로 표시되는 걸 구현한 것

4. DOM

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>DOM(Document Object Model) 조작하기(HTML과 JavaScript 연결)</title>
    <script>
        function aaa(){
          
            document.getElementById("qqq").innerText = "반갑습니다"
        }

        function counter(){
            const tmp = Number(document.getElementById("num").innerText)+1
            document.getElementById("num").innerText = tmp
        }
    </script>
</head>
<body>
    <div id ="qqq">안녕하세요</div>
    <button onclick="aaa()">클릭하기</button>

    <div id="num">0</div>
    <button onclick="counter()">+1</button>
</body>
</html>

onclick() 이벤트, 자바스크립트 함수, getElementById로 요소에 접근해서 innerText 바꾸기 등등....

5. 싸이월드 홈피 게임 탭 꾸미기

로또번호 추첨기 이며, 버튼에 onclick() 이벤트를 넣어 클릭할 때마다 새로운 6자리가 추첨되도록 하였다.

간단하게 random난수 돌리고 나온 숫자 체크하고 이미 체크되어있는 숫자 나오면 중복되지 않을 때까지 난수 돌려서 뽑는 식으로 구현하였다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>게임</title>
    <link rel="stylesheet" href="styles/game.css">
    <script>

        function lotto(){

            let result=""
            let nums = []
            let check = []
            for(let i = 1; i <= 45; i++) check[i] = false;

            while(nums.length < 6){
                let num = Math.floor(Math.random()*45)+1
                if(!check[num]){
                    nums.push(num)
                    check[num] = true;
                }
            }

            nums.sort((a,b)=>{
                return a-b;
            });

            for(let i = 0; i < 6; i++){
                result += nums[i]+" ";
            }

            document.getElementById("lottoNum").innerText = result;
        }

    </script>
</head>
<body>
    <div class="wrapper">
        <div class="wrapper__header">
            <div class="wrapper__title">
                <div class="title">GAME</div>
                <div class="subtitle">TODAY choice</div>
            </div>
            <div class="divideLine"></div>
        </div>
        <div class="wrapper__word">
            <div class="wrapper__word__header">
                <img src="images/word.png" alt="">
                <div class="title">
                    끝말잇기
                </div>
                <div class="word__title">
                    제시어: 코드캠프
                </div>
            </div>
            <div class="wrapper__word__body">
                <input type="text" placeholder="단어를 입력해주세요.">
                <button>검색</button>
            </div>
            <div class="wrapper__word__footer">
                결과!
            </div>
        </div>
        <div class="wrapper__lotto">
            <div class="wrapper__lotto__header">
                <img src="images/lotto.png" alt="">
                <div class="title">
                    LOTTO
                </div>
                <div class="lotto__title">
                   버튼을 누르세요.
                </div>
            </div>
            <div class="wrapper__lotto__body">
                <div id="lottoNum"></div>
            </div>
            <div class="wrapper__lotto__footer">
                <button onclick="lotto()">Button</button>
            </div>
        </div>
    </div>
</body>
</html>

(CSS 코드는 생략!)

💡 새롭게 배운 사실

1. 인증번호 알고리즘 => 수학 객체, String.padStart()

인증번호 문자가 날라올 때 보통 6자리를 입력하라고 하는데 난수로 6자리를 쉽게 만들 수 있다.

Math.floor(Math.random()*1000000)

그러나 중간중간에 6자리가 아닌 5자리 숫자가 나오는 경우도 있다.
(왜냐하면 061795인데 숫자로 표시되어 앞부분의 '0'이 날라 갔기 때문...)

따라서 이때 필요한 것이 padStart() 함수인데
padStart() 메서드는 현재 문자열의 시작을 다른 문자열로 채워,
주어진 길이를 만족하는 새로운 문자열을 반환해주는 함수입니다.

즉, padStart(6, '0')의 의미는 6자리가 안될 시 앞에서부터 '0'을 채워준다는 의미입니다.

이러한 함수 사용으로 항상 6자리가 반환되는 인증번호 토큰을 만들 수 있게 됩니다.

String(Math.floor(Math.random()*1000000)).padStart(6,'0')

저작자표시 비영리

'💻IT' 카테고리의 다른 글

[교육] {코드캠프} 프리캠프 8기 - 5일차(마지막날) (자바스크립트 + 싸이월드 주크박스 탭 부분 완성 + final과제 + git & github) (0)	2021.10.22
[교육] {코드캠프} 프리캠프 8기 - 4일차 (자바스크립트 + DOM 요소 조작) (0)	2021.10.21
json 데이터 정렬해주는 사이트 (0)	2021.10.20
[교육] {코드캠프} 프리캠프 8기 - 2일차 (싸이월드 홈 부분 완성, 자바스크립트 교육) (0)	2021.10.20
[교육] {코드캠프} 프리캠프 8기 - 1일차 (개발환경 세팅, HTML & CSS기초) (4)	2021.10.19

코딩 공부 일지