JH 개발 블로그

자바스크립트 클래스 개념 // 클래스를 쓴다. (옛날 방식) function 기계(){ this.q = 'consume'; this.w = 'snowball'; } var nunu = new 기계(); var garen = new 기계(); // 클래스를 쓰지 않고 객체만 생성하였을 때 var nunu = { q: 'consume', w: 'snowball' } var garen = { q: 'strike', w: 'courage' } function 기계(구멍){ this.q = 구멍; this.w = 'snowball'; } var nunu = new 기계('consume'); var garen = new 기계('strike'); nunu 의 출력결과는 기계 {q: "consume", w: "snow..

사이트에 이미지를 넣는 방법은 두 가지가 있다. 하나는 태그를 사용하는 것이고, 다른 하나는 태그에 background-image 속성을 추가하는 것이다. 이 두가지의 방법의 차이점은 뭘까? 그리고 어떤 경우에 사용하는지 알아보자. 이것을 이해하기 위해서는 먼저 시멘틱 웹과 시멘틱 태그에 대한 이해가 있어야 한다. 먼저 Semantic 시멘틱은 '의미의' '의미론의' 라는 뜻을 가지고 있다. 시멘틱 웹에 대해서 좋은 자료가 있어서 가져와 보았다. ↓ 시맨틱 웹은 컴퓨터가 정보 자원의 뜻을 이해하고 논리적 추론까지 하는 차세대 지능형 웹이다. 지금의 웹은 특정 검색어를 치면 불필요한 문서가 모두 나와 일일이 찾아 보아야 하는데 지능형 웹은 다르다. 단어의 유사성과 상관관계 등을 파악해서 원하는 결과물만 찾..

오늘은 위처럼 생긴 검색창을 만들어 볼 것이다. div 태그 안에는 input 태그, img 태그가 들어있다. .search { position: relative; width: 300px; } input { width: 100%; border: 1px solid #bbb; border-radius: 8px; padding: 10px 12px; font-size: 14px; } img { position : absolute; width: 17px; top: 10px; right: 12px; margin: 0; } 부모 태그를 relative 를 하고, input 태그를 width: 100% 를 주어서 부모 공간을 꽉 차게 만든다. 그 후 돋보기 이미지를 부모 태그 안으로 배치하기 위해서는 position:..

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..