22-09-21-TIL

오늘은 온라인 테킷 동영상 강의를 보고 정리한 내용입니다.

로또 번호 추첨기

1 ~ 45 공 중 6개 뽑기
js 작성 위치는 보통 body 태그가 끝나는 바로 윗 지점에 작성하며 스크립트 태그로 감싸기

임의의 숫자 만들기 Math.random();

0이상 1미만의 실수

1~ 45 번호를 랜덤을 뽑아주기 위해
Math.random()*45+1 -> 실수가 되므로 정수로 변환해주기
var num = parseInt(Math.random()*45+1);

배열 자료구조를 사용

배열을 사용하여 하나의 변수 안에 여러 개의 값들을 넣는다.

배열
var lotto = [1,2,3,4,5,6];

배열은 인덱스 0부터 시작해서 인덱스 위치로 값을 꺼내온다.

배열 마지막에 값 추가하기 .push();
lotto.push(7);

배열에서 값이 있는지 없는지 확인하기 -> .indexOf(값)
이미 있다면 인덱스 번호, 없으면 -1 출력

로또 코드짜기

반복문을 사용하여 1 ~ 45 까지의 수 중복 없는 수 6개를 뽑기

var lotto = [];
while (lotto.length<6) {
	var num = parseInt(Math.random()*45+1);
  	if (lotto.indexOf(num) == -1) {
    	lotto.push(num);
    }
} document.write(lotto.sort((a,b)=>a-b));

자소서 글자수 계산기

getElementById를 통해 html의 특정 아이디를 불러옴
.value, .innerHTML를 통해 태그 안의 값만 따로 가져옴

가져온 값의 글자 수 세어주기 -> .length
var content = document.getElementById('id').value;
console.log(content.length);

count 아이디를 가진 (0/200) 부분에 글자 수를 계산해서 변경해주기
document.getElementById('count').innerHTML = 
'(' + content.length + '/200)';

글자 쓸 때마다 자동으로 세어주기

html에 이벤트 헨들링 사용해주기
onkeydown='counter()'; 추가 // counter(); 함수

200자를 넘으면 안써지게 -> 조건문
200자 이후는 버리기 -> .substring();

function counter() {
	var content = document.getElementById('id').value;
  
  if (content.length>200) {
  	content = content.substring(0,200);
    document.getElementById('id').value = content;
  }
  document.getElementById('id').innerHTML = '('+content.length+'/200)';
};
counter();

jQuery를 이용한 스타크래프트 게임

jQuery의 장점
1. 간결한 문법
2. 편리한 API
3. 크로스 브라우징

$(선택자).행위;

익명함수를 통해 정의하는 과정 없이 바로 사용이 가능

var hp = 3;
$('#drone').click(function(){
	// fadeIn([지속],[완료됐을 때 뭘 할지])
  $('#spit').fadeIn();
  
  // 목표물까지 이동시키기 .animate()
  $('#spit').animate({left: '+=250'});
  
  // 벙커에 닿으면 없어지는 코드 .fateOut();
  $('#spit').fadeOut(function(){
  	hp -=1;
    $('#hp').text('HP :' + hp);
    
    if(hp==0) {
    	$('#bunker').fadeOut();
    }
  });
  // 드론 앞으로 다시 옮기기 .css();
  $('#spit').css({left: '150px'});
});

오늘은 살짝 맛보기 느낌으로 자바 스크립트 강의를 들어봤는데 아직 낯설지만 다음주에 다가올 자바 스크립트 시간이 기대된다.ㅎㅎㅎ🤭