nomadcoders

[JS]2021-1115 자바스크립트 .createElement() & .appendChild - HTML 요소 추가하기

document.creatElement() document 객체의 메소드로, HTML 요소를 생성할 수 있다. const bgImage = document.createElement("img"); //img태그 생성 부모노드.appendChild() 특정 요소에 자식 요소를 추가할 수 있다. document.body.appendChild(bgImage); //body 내부에 bgImage를 추가 배열 내의 랜덤 이미지 화면에 출력하기 const images = [ "0.jpg", "1.jpg", "2.png" ]; const chosenImage = images[Math.floor(Math.random() * images.length)]; const bgImage = document.createElemen..

[JS]2021-1114 자바스크립트 Math - Random number 랜덤 숫자 생성 /반올림, 올림, 버림

nomadcoders VanilaJS #6.0~2 강의를 정리한 내용입니다. Math.random() 랜덤한 숫자를 만들 수 있는 함수. 0이상 1 미만의 난수(부동소수점)을 랜덤하게 만든다. See the Pen Untitled by hyejj19 (@hyejj19) on CodePen. Math.floor() 소수점 이하를 버림하는 메소드. 참고 : .ceil() 올림 / .round() 반올림. 소수점 이하를 버림으로써, 정수를 만들 수 있다. 난수의 범위를 생각해 Math.random * n을 하면, 원하는 범위의 정수 난수값을 얻을 수 있다. See the Pen random2 by hyejj19 (@hyejj19) on CodePen. 이를 배열에 적용해, 새로고침 시 배열 내의 랜덤한 내용이..

[JS]2021-1114 padStart() - 문자열 시작 채우기(문자열을 채워 원하는 길이로 만들기)/ String() - 숫자를 문자열로 바꾸기

nomadcoders VanilaJS #5.0~3 강의를 정리한 내용입니다. padStart() "1".padStart(4,"0"); // "0001"을 출력 String에서만 사용 가능한 함수로, 특정 문자열을 원하는 길이만큼, 원하는 문자열로 채울 수 있다. 사용 방법은 padStart(원하는 길이, 채우고자 하는 문자열) 자매품으로 padEnd()도 있다. String(number) number를 string으로 변환할 수 있다. string(556); //"556" 을 출력 Date 객체의 현재시간들은 number이기 때문에 padStart() 적용을 위해서 string 으로 변환해야한다. 그리고 .padStart를 적용해 자릿수가 2 미만일 경우 앞에 "0"을 붙여 출력하도록 한다. const ..

[JS]2021-1114 Date - 자바스크립트로 현재 시간 불러오기/ setInterval(),setTimeout() - 타이머 함수

nomadcoders VanilaJS #5.0~3 강의를 정리한 내용입니다. new Date() new Date()를 호출하면, Date 객체를 불러온다. 이 함수를 인수 없이 호출하면 현재 날짜, 시간이 저장된 Date 객체를 반환한다. function getTime() { const date = new Date(); //new Date()는 Date 객체를 불러옴, 이 함수를 인수 없이 호출하면 현재 날짜 및 시간이 저장된 date 객체가 반환된다. clock.innerText =`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`; //Date 객체의 여러 메소드를 활용해, 현재 시간 값을 얻어올 수 있음. 이를 innerText로 화면에 ..