전체 글297 제로초 JS 입문 강의 8강 정리 (반응 속도 게임) 8 - 1~2 클래스로 태그 선택하기태그 내의 클래스 이름이 길다면아래의 방법으로 태그를 선택할 수 있다. div.classList.contains('클래스');div.classList.contains('for'); // truediv.classList.contains('me'); // false 태그.classList.add('클래스'); // 태그에 클래스 추가태그.classList.replace('기존 클래스 이름', '새로 바꿀 클래스 이름'); // 태그에 클래스 수정태그.classList.remove('클래스'); // 태그에 클래스 제거 8 - 5 reduce 함수 ( 배열 쪽 만능 함수) 배열.reduce(계산 함수 , 초기값);// a는 누적값, c는 계산 시.. 2024. 8. 16. 제로초 JS 입문 강의 7강 정리 (가위바위보 순서도) 7 - 1 이미지 추가 background와 backgroundsize는 세트로 같이 가야 적용된다.반복문 같은 곳에서 따로 쓰면 적용이 제대로 안된다. const IMG_URL = './rsp.png'$com.style.backgound = `url(${IMG_URL}) 0 0`; // 이미지변수 가로위치 세로위치$com.style.backgoundsize = 'auto 200px'; // 가로너비 세로너비6행을 사용하면 여러가지 이미지가 한 이미지로 있다고 하더라도각각 위치 별로 세팅 후 너비 세팅하면 잘린 이미지를 가져올 수 있게 된다. 7 - 2~3 setInterval(함수, ms)함수를 주기적으로 실행한다.0.5초 단위로 가위 바위 보 이미지가 바뀌게 하려면 아래와 같다.안의 코드가 끝.. 2024. 8. 13. 제로초 JS 입문 강의 6강 정리 (로또 추첨기) 6 - 1 입력값 체크trim() 함수문자열의 좌우 공백을 없애는 함수. let str = " test ";let testA = str.trim();test 6 - 2 공 뽑아서 정렬 피셔-예이츠 셔플 알고리즘랜덤 정렬을 위해 고안한 알고리즘.예시는 아래와 같다. const bbopki = Array(45).fill().map((v, i) => i + 1);const shuffle = [];while( bbopki.length > 0){ const random = Math.floor(Math.random() * bbopki.length); const tempArray = bbopki.splice(random, 1); const value = tempArray[0]; s.. 2024. 8. 5. 제로초 JS 입문 강의 5강 정리 (숫자 야구 게임) 5 - 1~30Math.random() 사이의 난수를 만들어 준다. Math.ceil() : 올림Math.floor() : 내림Math.round() : 반올림 5 - 4 form 태그form 태그는 이벤트 리스너를 달 때 submit 사용.=> 새로고침이 기본적으로 된다.=> 그래서 변수 값 저장을 위해서는 기본 동작을 막아줘야 함. => form은 evet 객체가 생성된다. $form.addEventListener('submit', (event) => { event.preventDefault(); $input.value = ''; checkInput(value); }); 5 - 5~6join ('구분자')함수배열을 문자열로 변환하는 함수. ans = [3, 1,.. 2024. 8. 5. 제로초 JS 입문 강의 4강 정리 (계산기 만들기) 4 - 1~6 계산기 만들기 고차 함수(high order function)함수의 반환값을 함수로 지정해야 할 때,하기 구문 처럼함수의 내용을 return에 넣으면서 return 구문을 없애면서 화살표를 연속으로 사용할 수 있게 된다. const onClickNumber = (number) => { return(event) => { if (!operator) { numOne += number; $result.value += number; return; } }}const onClickNumber = (number) => (event) => { if (!operator) { numOne += number; .. 2024. 8. 1. 이전 1 2 3 4 5 ··· 60 다음 728x90 반응형
