TIL 2일차
2일차인 오늘은 자바스크립트에 대해서 공부했다.
확실히 HTML/CSS 보다 복잡했고, 구현할 수 있는게 많았다.
HTML/CSS 는 꾸며준다고 생각하고
JS 는 꾸며주기 전 뼈대를 만드는 것 이라고 생각하면 될 것 같다.
가장 큰 장점은.. 가장 많이 쓰는 언어이기 때문에 구글링으로 쉽게 가져올 수 있으며,
당연히 취업하기도 쉽다는 장점이 있다.
오늘은 4가지를 배웠다.
-
로또번호 생성기
-
자소서 글자 수 계산기
-
미니 스타크래프트
-
기념일 계산기
첫 번째, 로또 번호 생성기
var lotto = []; while(lotto.length > 6){ var num = parseInt(Math.random()* 45 + 1); if lotto(lotto.indexOf() == -1){ lotto.push(num); } } lotto.sort(('a,b')=>a-b)
Math.random() 함수를 이용해 난수를 생성하고, 최대 45 까지의 번호를 생성하고
while 문과 if 문을 사용해 6개의 숫자를, 겹치지 않도록 생성했다.
여기에 sort 를 사용해서 내림차순 설정까지.
a,b=>a-b 이 문법에 대한 설명은 복잡하다고 한다. 이건 그냥 외울것.
특히나 이 파트에서 많이 헷갈렸다...
과거 파이썬으로 이걸 만들었던 적이 있는데, JS 는 그보다 더 복잡한 것 같다.
두 번째, 자소서 글자 수 계산기
function counter(){ var content = getElementById("ID").value; document.getElementById("ID").InnerHTML textarea
function 을 이용해서 함수를 counter 라는 함수를 만들어 주었다.
그리고 getElementById 와 value, InnerHTML 두개를 붙여주었는데,
수업을 듣다보니 InnerHTML 의 의미를 몰라 곧바로 구글링.
말 그대로 HTML 요소에 접근할 때 쓰는 것.
여기에 onkeydown 으로 자소서를 쓰면서 키보드를 누를 때 마다 글자 수를 카운트, 업데이트 해준다.
세 번째, 미니 스타크래프트
$('#drone').click(function(){}
$('#spit').fadeIn();
.animate({'left': '+=250px'})
세 번째 파트에서는, 움직이는 애니메이션을 만들었다.
만들면서 결과가 하나씩 보이는 맛에 제일 집중해서 들었던 파트였다.
$('#drone') 와 같은 Jquery 문법을 사용해서 만들어 보았는데,
.fadeIn() .click() 같은 이벤트를 사용하는 방식이 직관적이라서 배우기 쉬웠다.
여기서는 function(){} 으로 들어가는 무언함수를 사용.
네 번째, 기념일 계산기
var now = new Date();
var start = new Date(2022-12-24);
var timeDiff = now.getTime() - start.getTime();
var day = Math.floor(timeDiff / (1000 60 60 * 24) + 1);
$("#love").text(day + "일째");
네 번째 파트에서는 여러 변수를 생성해놓고 하나씩 맞춰가는 퍼즐 느낌이었다.
제일 재미있으면서도, 은근 스트레스 받았던 파트.
Date 변수를 설정하는 것과 ms(밀리세컨) 계산에 대한 개념만 잡으면 금방 풀어낼 수 있었다.
Math.floor 로 소숫점아래 ms 을 다 지워버리고 (1000 60 60 * 24) 날짜로 계산해버리면 된다.
그리고 Jquery 를 이용해 몇일 째인지 설정해주면 끝.
