자바스크립트(Java Script)/자바스크립트(Java Script) 강의 정리9 제로초 JS 입문 강의 9강 정리 (틱택도 게임) 9 - 1~2 이차원 배열스크립트에서 반복문으로 화면구성을 만들어본다. 9 - 3 구조분해 할당 하기처럼 복잡해질 수 있는 문법을 간결하게 표현할 수 있는 방법이다.구조 분해 할당이 제대로 안되는 애들도 있다. 주의할 것. const arr = [1, 2, 3, 4, 5]; const one = arr[0]; const three = arr[2]; const five = arr[4];=== 같다 === const {one, three, five} = arr; const body = document.body; const head = document.head;=== 같다 === const {body, head} = .. 2024. 8. 23. 제로초 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. 제로초 JS 입문 강의 3강 정리 3 - 1순서도 그리는 이유 3 - 2기본 VS code 사용법 doc 치고 tab : 기본 폼 자동 완성tab : 블록 지정해서 하면 전체 들여 쓰기shift + tab : 전체 앞으로 땡김 들여 쓰기 설정보기 - 명령 팔레트 - indent using space 에서 2칸으로 설정하면 들여쓰기 시 2칸이 된다. 실행F5 alt + 화살표 : 해당 줄 이동 휠 클릭으로 드래그 : 같은 범위 위아래로 한번에 선택 shift + alt + f : 자동 줄 맞춤 shift + alt + 화살표 : 화살표 방향으로 해당 줄 복사 3 - 3대화창 (prompt, alert, confirm)잘 안 쓰긴 함. 3 - 4HTML 태그 선택하기 (querySelector) - 선택자 const $butto.. 2024. 7. 30. 제로초 JS 입문 강의 2강 정리 2 - 1세미콜론 : 문장의 끝에 넣는다.// , /* */ : 주석들여쓰기 : 문단 구분 2 - 2' ," : 문장 쓸 때 사용, 줄 바꿈은 \n 사용` : 문장 쓸 때 사용, 줄 바꿈은 그냥 엔터치면 자동으로 됨위에 있는 애들 자체를 표현하고 싶으면 서로 다른 애들로 감싸면 된다.혹은 \' 이런 식으로 사용. typeof : 뒤에 내용을 쓰고 입력하면 해당 내용의 형식 확인 2 - 3문자열 합치기=> + 로 합친다 끝. 2 - 4숫자 표현은 그냥 숫자를 써도 되고9e42**30x1a10o111 이런 식으로 콘솔에 넣어도 다 알아서 뜬다. NaN : Not a Number (숫자 형식이긴 함) parseInt() : 문자열을 Int로 변환하는 함수 2 - 5연산자 우선순위 소수 계산 시 .. 2024. 7. 29. 제로초 JS 입문 강의 1강 정리 1 - 2한국어 패치 방법=> VS Code 다운 후 왼편에서 사각형 여러 개 있는 메뉴 클릭=> Korean ~ 이라고 치고 설치 1 - 3개발자 모드 => 크롬 설치 후 F12 누르면 개발자 모드 들어감.=> console 이라고 적힌 탭을 프롬프트라고 함=> 거기에 JS 코드를 넣어서 결과를 바로 볼 수 있다.=> shift + 엔터로 누르면 줄바꿈 가=> 에러 메세지 같은 걸 보면 잘 보고 확인할 것=> 이전에 친 걸 확인하려면 화살표키 위아래를 누르면 뜸 1 - 4프로그래밍 사고력 중요 끝. 2024. 7. 29. 이전 1 다음 728x90 반응형
