본문 바로가기

👩🏻‍💻Frontend/JavaScript

(4)
javascript를 이용한 D-day 계산기 만들기! (feat.수능) 수업 시간에 배웠던 기념일 계산기를 활용해 수능 D-day 안내 페이지를 만들어 보기로 했다. 일단 결과 화면! 캘린더에 디데이 남은 날이 표시되고 그 아래에 시간까지 카운팅 되도록 제작했다. 코드를 살펴보도록 하자! 변수 선언 const now = new Date(); const test = new Date('2023-11-16') // 2023 수학능력시험 날짜 우선 Data 객체를 생성자로 호출해 현재 날짜와 시험 날짜를 담는 변수를 각각 선언해 준다. ( Date 객체는 1970년 1월 1일 UTC(협정 세계시) 자정과의 시간 차이를 밀리초로 나타내는 정숫값을 담는다) Date - JavaScript | MDN JavaScript Date 객체는 시간의 한 점을 플랫폼에 종속되지 않는 형태로 나타..
[Javascript] 원시타입 변수, String, Number, Boolean, undefined, null, nullish, 단락회로평가 원시타입(Primitive Types)이란? 원시타입의 값은 변경 불가능하며 값을 변수에 저장하거나 전달할 때 값에 의한 전달을 한다. 따라서 원시 값을 다른 변수에 할당할 때는 값의 참조가 저장되는 것이 아닌, 값 자체(가리키고 있는 값을 따라가서 실제 메모리에 저장된 주소)가 복사되어 저장된다. string, number, bigint, boolean, undefined, symbol, null이 원시타입에 속한다. let str1 = 'hello'; let str2 = str1; console.log(str2); // 'hello' str1 = 'world'; console.log(str2); // str2에 할당된 값은 여전히 'hello' // str1의 값이 재할당 되고난 뒤 str2의 값은 ..
[Javascript] HTML 삽입 위치, 브라우저 API console.log()와 console.dir()차이, 변수 선언 방법 1. Javascript 삽입 위치 인라인 스크립트, 내부 크립트, 외부 스크립트로 삽입 가능하다. 클릭해보세요! 인라인 스크립트는 실무에서 극히 제한적으로 사용한다. 내부 스크립트, 외부 스크립트로 삽입할 경우 script 태그의 위치는 body 태그 안 맨 하단에 위치하는 것을 권장한다. --> 문서의 DOM 구조가 완료된 시점에 실행되기 때문에 추가 설정이 필요 없다. 외부 스크립트로 삽입하는데 head 태그 안에 위치한다면, defer 속성을 추가해 마지막에 읽을 수 있게 만들어 준다. 2. 브라우저 API BOM(Browser Object Model)은 브라우저에서 제공하는 API로 자바스크립트를 통해 브라우저에서 제공하는 기능들을 사용할 수 있도록 도와주는 역할을 한다. 더보기 API란? AP..
[JavaScript] 로또 번호 추첨기 만들기 로또 번호 생성 알고리즘을 자바스크립트로 작성해 보자. //로또 추첨기 var lotto = []; while(lotto.length a-b); document.write(lotto); 1. 1~45개의 숫자 중 랜덤으로 1개의 숫자를 뽑는다. Math.random(); // 0보다 크거나 같고, 1보다 작은 실수를 랜덤으로 반환하는 메서드 이다. Math.random() * 45; // 45를 곱해 0보다 크거나 같고, 45보다 작은 실수를 반환할 수 있도록 만들어준다. Math.random(..