자바스크립트(Java Script)24 제로초 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. 자바스크립트(Java Script) RegExp 객체 RegExp 정규 표현식을 구현한 자바스크립트 표준 내장 객체 정규표현식(Regular Expression)은 문자열에서 특정 내용을 찾거나 대체 또는 발췌하는데 사용 new RegExp(검색패턴[, 플래그]); 검색 패턴을 나타내는 정규 표현식은 따옴표나 슬래시(/)로 감싼다. 기본 검색 설정을 변경할 수 있는 플래그는 필요할 때만 전달 가능. (잘 안 쓸 듯) 객체에서 사용 가능한 Method Method 설명 exec() 인수로 전달된 문자열에서 특정 패턴을 검색하여, 패턴과 일치하는 문자열을 반환함. test() 인수로 전달된 문자열에 특정 패턴과 일치하는 문자열이 있는지를 검색하여, 그 결과를 불리언 값으로 반환함. toString() RegExp 객체의 정규 표현식과 같은 의미를 가지는 정규 .. 2022. 12. 20. 이전 1 2 3 다음 728x90 반응형
