JH 개발 블로그

let 아이디 = setInterval(함수, 밀리초); clearInterval(아이디); setInterval 함수는 사실 반환값이 있다. 반환값은 타이머에 대한 아이디(숫자)로, 나중에 이 값을 사용해 타이머를 제거할 수 있다. 이와 마찬가지로 setTimeout 함수도 clearTimeout 함수로 취소할 수 있다. /* 타이머 멈췄다가 다시 실행하기 */ let intervalid = setInterval(computerHandImg, 50); const clickButton = () => { clearInterval(intervalid); // 점수 계산 및 화면 표시 setTimeout(() => { intervalid = setInterval(computerHandImg, 50); }, 1..

이번 장은 타이머 사용하기가 핵심 -> 정해진 시간 뒤에 특정 코드가 동작 저번 시간 map 메서드에 대한 복습 ① 1 - 45까지의 숫자를 준비한다. ② 숫자를 섞는다. ③ 공 7개를 뽑는다. 마지막 공은 보너스 공이 된다. ④ 1초마다 공을 하나씩 화면에 표시한다. ⑤ 끝 따라서 첫번째 순서는 배웠던 map 메서드를 통해 공 45개를 만든다. const candidate = Array(45).fill().map((v,i)=> i+1); // 1 - 45 나는 아래처럼 작성했는데 결괏값이 ... const candidate = Array(45).fill().map((v, i) => i + 1); let answer = []; while (candidate.length > 0) { const index ..

중복X , 무작위로 숫자를 뽑기 - (로또 추첨기와 비슷한 원리) 먼저 Math.random 메서드 이용한다. 0 "3, 1, 3, 6" [3, 1, 3, 6] . join('') -> "3136" [3, 1, 3, 6] . join(':') ->"3 : 1 : 3 : 6" '3136'. split() -> ["3136"] '3136'. split('') -> (4) ['3', '1', '4', '6'] '3136'. split('1') ->['3', '36'] 내가 생각한 숫자야구 코드 let ball = 0; let strike = 0; for(i=0; i { } ) forEach 메서드는 인수 자리에 함수를 넣어주어야 한다. answer.forEach ( (element, index ) => { }..

▤ input 태그의 readonly 속성 결과화면 : 읽기만 가능할 뿐 값 변경은 불가능. ▤ input 태그의 disabled 속성. 결과화면 : 읽기만 가능할 뿐 값 변경은 불가능. ▤ readonly 와 disabled 의 차이 form 으로 값을 보낼때 disabled의 값은 전송되지 않는다. 출처: https://heojju.tistory.com/75 => 사용자들은 글자를 쓸 수 없지만 자바스크립트로는 글자를 쓸 수 있다. 고차 함수로 중복 제거하기 // 0의 경우만 보였다. 0-9까지 이런 식 document.querySelector('#num-0').addEventListener('click', () => { if (!operator) { numOne += '0' } else { numT..

내가 작성한 코드 /* 1. 3을 입력했다면 먼저 3이하의 수가 되어야 한다 2. 현재 순서 파악 -> 3미만이면 증가 -> 3이면 1로 다시 돌아가기 */ function personOrder() { let personNumber = parseInt($order.innerText); if (personNumber number) { $order.textContent = 1; // string 형식으로 입력됨 } else { $order.textContent = order + 1 ; } } 순서도를 더 최적화할 수 있다. 새로 배운 점 - 1 function onClickButton(e) { if (!word) { // (첫번째 참가자다 == 제시어가 없다) word = newWord; personOrde..

유효성 검사 회원가입 양식을 작성할 때, 필수요소를 빼먹거나, 비밀번호나 전화번호 등이 정보를 잘못 입력했을 경우, 유효성 검사를 통하여 사용자가 회원가입 정보를 잘못 입력하는 경우를 사전에 방지해주고, 비밀번호 재확인을 통하여 사용자로 하여금 본인이 입력한 데이터를 보다 정확하게 인지 시켜줍니다. 최근에 개인정보를 입력하는 사용자와 개인정보 데이터를 보관, 관리하는 개발자 입장에서 최대한 오류를 줄이기 위하여 좀 더 쉽게 정보를 입력하고, 관리하는 방법으로 폼들이 변화되고 있습니다. 출처: https://goddino.tistory.com/52 input 의 유효성 검사()를 작동시키기 위해서는 input 이 form 안에 있어야 한다. ↓ Log in 버튼을 클릭하면 페이지가 새로고침 되는데 그 이유..

className 으로 html 문서의 어떤 class 명을 변경하는 것은 바람직하지 않다. 기존의 클래스명이 사라질 수 있기 때문이다. classList : class 들의 목록으로 작업할 수 있게끔 허용해준다. className : 이전에 class 들을 상관없이 모든걸 교체해버린다. 해결방법: classList function handleTitleClick() { const clickedClass = 'clicked'; if (hello.classList.contains(clickedClass)) hello.classList.remove(clickedClass); else { hello.classList.add(clickedClass); } } 기존의 클래스명을 간직한다. 해결방법: toggle f..

const title = document.getElementById("title"); console.log(title); html 의 id 인 title 을 가져오는 방법이다. console.dir(title); 목록을 출력 const title = document.getElementById("title"); title.innerText = 'Hello'; title.className = 'hello'; console.dir(title); 이렇게 html 문서를 수정해 줄수도 있다. Grab Me! console.log(title.id); console.log(title.className); id 와 class 를 출력해준다. querySelector 란 element 를 css 방식으로 검색하는 것을 ..

> let change = '바꿔 봐'; change = '바꿨다'; < "바꿨다" "바꿨다"에서 결괏값이 있는 이유는? let으로 변수를 선언할 때는 콘솔의 결괏값이 undefined 이지만, 변수의 값을 바꿀 때는 결과로 바꾼 값이 나온다. 이는 let 의 역할 때문이다. let이 없을 때는 코드가 식이라서 대입한 값이 결괏값으로 출력되지만, let이 앞에 붙는 순간 선언문이 된다. 다음 if 문을 switch 문과 조건부 연산자로 바꿔 보세요. switch (cond) { case true: value='참'; break; case false: value='거짓'; break; 조건부 연산자 ? value = cond ? '참' : '거짓' ; 구구단을 출력하되, 결과에 짝..

문자열 기본 자바스크립트는 작은 따옴표, 큰 따옴표, 백틱( ` ) 다 사용 가능하다. 짝을 맞추지 않으면 에러가 난다. 하지만 백틱은 짝을 안맞추면 결과가 에러 나지 않고 빈 칸 나온다. 백틱의 특성은 줄바꿈을 할 수 있다는 것! typeof '문자열' -> 'string' typeof `문자열 ` -> 'string' typeof '' -> 'string' "'" '"' `"` 'how're you?' , ""정말" 그랬니?"(강조표현) 를 사용할 수 있는 방법은... '"정말" 그랬니?' 와 같이 따옴표를 반대되는 것끼리 써주는 것이거나, 역슬래시를 사용하는 방법이다. ex. 'how\'re you?' 역슬래시를 두 개 사용하면 역슬래시 한 개를 사용할 수 있다. (쉬프트 + 엔터를 누르면 엔터를 ..