일단 만드는 JS - 로또 추첨기 , 글자수 계산기, 미니 스타크래프트, 기념일 계산기

지현·2022년 9월 21일

멋쟁이사자처럼 FE스쿨 3기

목록 보기

10/18

로또 추첨기

랜덤으로 6자리의 수 뽑고 오름차순 정렬 (1~45)
<body>
    <h1>로또 번호 추첨기</h1>
    <script>
        var lotto = [] ; 
        while(lotto.length < 6 ) {
        var num = parseInt(Math.random() * 45 + 1 )
        if(lotto.indexOf(num) == -1) {
        lotto.push(num)
            }
        }
        lotto.sort((a,b)=> a-b)
        document.write(lotto)
    </script>
</body>
핵심 메서드

반복문 while 은 조건이 만족될 때 까지 실행한다

parseInt : 실수에서 소수점 떼고 정수만 남기기

Math.random() : 1~10 까지의 랜덤한 실수 추출 (로또는 1 ~ 45 숫자이므로 * 45 하고 0이 나오면 안되니까 +1 해준 것

.indexOf() : 배열에 해당 요소가 있는지 (없으면 -1 출력된다는 점을 이용하여 if문의 조건으로 활용하기) 중복숫자 나오기 방지

.push() : 배열 마지막에 요소 추가하기

sort : 오름차순 정렬 but 그냥 sort 만 사용하면 사전순으로 정렬되기 때문에 1 11 2 22 이런식으로 정렬됨. 때문에 찐오름차순으로 정렬하기 위해서는 sort((a,b)=> a-b) 이렇게 해야한다

글자수 계산기

글자수를 세어주고 글자수가 100자가 넘어가면 입력되지 않도록 함

<body class='container'>
    <h1>자기소개</h1>
    <textarea onkeydown="counter()" class="form-control" rows="3" id="jasoseol">
      </textarea>
    <span id="count">(0/100)</span>
    <script>
        function counter(){
            var content = document.getElementById('jasoseol').value
            if(content.length > 100){
            content = content.substring(0,100);
            document.getElementById('jasoseol').value = content;
        }
       document.getElementById('count').innerHTML = "(" + content.length + '/100)'   
        }
        counter(); 
	</script>

핵심 코드

document.getElementById('id').value : html코드 상 id 값 추출
요소.substring(start,end) : start 이상 end 미만 만큼 자른다
onkeydown='이벤트핸들러'() : key를 누를 때 마다 이벤트핸들러 실행

미니스타크래프트 (라고 쓰고 그냥 클릭이벤트 쓰는..)

드론 클릭하면 침 나오고 hp 줄어들면 벙커 사라지는... 제이쿼리...

<body>
 <h1 id='hp'>HP: 3</h1>
 <div class='background'>
     <img id='drone' src="drone.png" alt="drone">
     <img id='spit' src="spit.png" alt="spit">
     <img id='bunker' src="bunker.png" alt="bunker">
 </div>
 <script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
 <script>
     var hp = 3;
     $('#drone').click(function() {
         $('#spit').fadeIn();
         $('#spit').animate({'left': '+=250px'});
         $('#spit').fadeOut(function(){
             hp = hp - 1;
             $('#hp').text('HP: ' + hp);
             if (hp == 0) {
                 $('#bunker').fadeOut();
             }
         });
         $('#spit').css({left: 150});
     });
 </script>
</body>
</html>

의 body 태그만...

핵심 코드

제이쿼리로 아이디값 부르기 $('#id')
$('#id') 뒤에 .click , .fadeIn , .fadeOut , .text , .css , .animate 등 다양한 메서드 사용 가능
익명함수 : 일회성 함수일 경우 제이쿼리 메서드 안에서 함수 선언이 가능하다

$('#spit').fadeOut(function(){
             hp = hp - 1;
             $('#hp').text('HP: ' + hp);
             if (hp == 0) {
                 $('#bunker').fadeOut();
             }
         });

이부분

기념일 계산기

기념일 계산 제이쿼리 사용..

<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>
  <script>
        var now = new Date();
        var start = new Date('2020-06-30');
        //우리 몇 일째?
        var timeDiff = now.getTime() - start.getTime();
        var day = Math.floor(timeDiff / (1000 * 60 * 60 * 24) + 1);
        $('#love').text(day + '일째');
        //기념일까지 남은 날짜는?
        var valentine = new Date('2021-02-14');
        var timeDiff2 = valentine.getTime() - now.getTime();
        var day2 = Math.floor(timeDiff2 / (1000 * 60 * 60 * 24) + 1);
        $('#valentine').text(day2 + '일 남음');
        //천일은 언제인가?
        var thousand = new Date(start.getTime() + 999 * (1000 * 60 * 60 * 24));
        var thousandDate = thousand.getFullYear() + 
            '.' + (thousand.getMonth()+1) + '.' + thousand.getDate();
        $('#thousand-date').text(thousandDate);
        //기념일까지 남은 날짜는?
        var timeDiff3 = thousand.getTime() - now.getTime();
        var day3 = Math.floor(timeDiff3 / (1000 * 60 * 60 * 24) + 1);
        $('#thousand').text(day3 + '일 남음');
    </script>

핵심 코드

let now = new Date(); 현재 날짜의 ms 추출 ()안에 해당 날짜 넣으면 그 날짜까지의 ms 추출하는 새로운 객체 생성
getTime() : 주어진 일시와 1970년 1월 1일 00시 00분 00초 사이의 간격(밀리초 단위)인 타임스탬프를 반환합니다.
var timeDiff = now.getTime() - start.getTime(); var day = Math.floor(timeDiff / (1000 * 60 * 60 * 24) + 1); 해야 시작날짜부터 오늘까지의 일수 구할 수 있다. ms이기 때문에 1000 3600 24 를 해주고 그 값을 나눠줘야 한다

그 외 천일은 언제인지 특정 날짜까지 남은 날짜는 언제인지 등은 원리는 같고 메서드와 계산만 야간 다르게 해주면 된다

date 메서드

// 1. Date 객체 생성
var now = new Date();
// 2. 연도를 가져오는 메소드 .getFullYear()
console.log(now.getFullYear());
// 3. 월 정보를 가져오는 메소드 .getMonth() {0: 1월, 1: 2월, ... 10: 11월, 11: 12월}
console.log(now.getMonth());
// 4. 일 정보를 가져오는 메소드 .getDate()
console.log(now.getDate());
// 5. 1970년 1월 1일 00:00:00을 기준으로 흐른 시간을 밀리초로 표시하는 메서드 .getTime()
console.log(now.getTime());
// 6. 특정일의 Date 객체 생성
var today = new Date('2022-04-15');
console.log(today);
// 7. 특정 ms의 Date 객체 생성
var ms = new Date(1000);
console.log(ms);

후기

진짜 일단 만드는 자바스크립트였던 것 같다. 뭔가 이론을 먼저 배우는 것이 아니라 이걸 하려면 이걸 쓰면 돼~ 하는 식이라서 디립다 하는 느낌이 있지만 그래도 처음 할 때 흥미를 느낄 수 있는 프로젝트 위주로 자바스크립트 기초 문법을 체험할 수 있었다. 그리고 간단하다 간단하다 해도 막상 하려고 하면 좀 머리를 굴렸어야 했을 것 같아서,, 이렇게 정리를 해놓고 나중에 다시 공부해야 겠다.
아 그리고 제이쿼리는 처음 써봤는데 확실히 왜 아직까지 쓰는 라이브러리인지는 알겠다.. 이제 거의 사라지는 추세라고는 하지만 맨날 getElementById로 가져와서 일일이 동작시키는거 귀찮았는데 편하긴 하네... 이걸 먼저 배웠으면 바닐라js 문법 귀찮아서 계속 제이쿼리로 썼을 것 같음,, 일단 알아두면 좋을 것 같으니 기억해두어야지!

지현

이전 포스트

CSS 원근법(perspective)으로 3D 캐러셀 구현하기

다음 포스트

220922 TIL CSS 기술 - input 커스텀 , IR 테크닉 , 이미지 sprite 기법

2개의 댓글

김민승

2022년 9월 26일

지현님 아직 mbti 페이지 안하셨나요?.. 저는 손도 못댔습니다 😅 얼른 복습하고 해야하는데 밀리고 또 밀리네요 ㅜㅜ 특강 고생하셨습니다!

1개의 답글