NomadCoder의 “Creating a Chrome App with Vanilla JS”를 수강하면서 배웠거나 추가로 발견한 내용을 요약한 것입니다.
시계
간격
간격이란 무엇입니까? “매번” 일어나야 하는 일.말한다 (예: 2초마다) 정기적으로 서버를 체크하거나 매시간 거래소 API를 체크할 때 주로 사용합니다. 이러한 기능 제공 setInterval()오전.
setInterval(코드 | func(, 지연))
– 1번째 파라미터: 실행하려는 코드 또는 함수 (단, 보안상의 이유로 코드 사용을 권장하지 않음)
– 2번째 매개변수: 호출된 코드 또는 호출된 함수 사이의 간격을 몇 ms로 설정해야 하는지
타임아웃
타임아웃은 ‘일부 시간 지연 후’ 주어진 코드 실행let it do 주로 연결 후 몇 초 후에 배너를 표시하거나 마우스가 특정 요소 위에 위치했을 때 몇 초 후에 애니메이션을 실행하는 데 사용됩니다. 이러한 기능 제공 setTimeout()오전.
setTimeout(코드 | func(, 지연))
– 1번째 파라미터: 타이머 만료 후 실행할 코드 또는 함수 (단, 보안상의 이유로 코드 사용은 권장하지 않음)
– 2번째 파라미터: 호출된 코드 또는 함수의 지연 시간을 설정하는 ms 수
날짜
Date 객체는 현재 시, 분, 초를 화면에 표시하는 데 사용됩니다. Date 객체는 생성자 함수이자 날짜 및 시간(년, 월, 일, 시, 분, 초, ms) 메서드를 제공하는 객체입니다.
// HTML
<body>
<form class="hidden" id="login-form">
<input type="text" maxlength="15" placeholder="Whai is your name?" required />
<button>Log In</button>
</form>
<h2 id="clock">00:00:00</h2>
<h1 class="hidden" id="greeting"></h1>
<script src="http://oliviakim.m/./js/greetings.js"></script>
<script src="./js/clock.js"></script>
</body>// JavaScript
const clock = document.querySelector('h2#clock');
function getClock() {
const date = new Date();
clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
}
// 1초를 기다려야 시간이 보이므로 웹이 로드되자마자 getClock()을 실행하고, 또 매 초마다 다시 실행되도록 한다.
getClock();
// 매 초 바뀌는 시간을 보여줘야 하므로, 1s(=== 1000ms)마다 주기적으로 함수를 호출한다.
setInterval(getClock, 1000);
PadStart
Date 객체만 출력하면 숫자가 두 자리로 나오지 않고 자릿수만큼 나옵니다. (9시 대신 9시) 시, 분, 초를 같은 두 자리로 설정하려면 padStart사용
String.prototype.padStart(targetLength(, padString))
– targetLength: 대상 문자열의 길이, 현재 문자열의 길이보다 작으면 패딩 없이 반환한다.
– padString: 기본값은 ‘ ‘이며 현재 문자열로 채울 다른 문자열을 씁니다. 단, 문자열이 너무 길어 대상 문자열 길이를 초과하면 왼쪽 부분을 잘라서 붙여 넣습니다.
const clock = document.querySelector('h2#clock');
// 첫번째 매개변수는 String이어야 하므로 Number값을 String으로 형변환한다.
function getClock() {
const date = new Date();
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0')
clock.innerText = `${hours}:${minutes}:${seconds}`;
}
getClock();
setInterval(getClock, 1000);
인용 부호
리스트 딕셔너리 형태로 선언된 오퍼 리스트를 무작위로 표시하기 위해 순서값을 설정한다. 수학.무작위그것을 만들 Math.random에 의해 반환된 10진수 값그것을 제거하는 세 가지 방법이 있습니다.
- Math.round(): 소수점 반올림
- Math.floor(): 내림
- Math.ceil(): 소수점 이하 반올림
// console.log(quotes(Math.floor(Math.random() * 10)));
// 위와 같이 명언의 수를 하드코딩 하지 않고, 아래와 같이 설정해둔다.
// 추후 quotes의 길이가 길어지면 오류가 날 수 있기 때문이다.
console.log(quotes(Math.floor(Math.random() * quotes.length)));
배경
지금까지는 HTML을 먼저 만들고 JS로 요소를 삽입했지만 이번에는 먼저 JS에서 요소를 만들고 HTML에 삽입하십시오. 일하러 가자!
// 이미지 요소 만들기
const btImage = document.createElement('img');
// 이미지 경로 추가
bgImage.src = `../img/${chosenImage}`;
// html body안에 이미지 요소 넣기
document.body.appendChild(bgImage);
개발자 도구에서 JS로 생성된 요소를 보면 다음과 같이 확인할 수 있습니다.
(참고 자료)
https://nomadcoders.co/javascript-for-beginners
Vanilla JS로 Chrome 앱 빌드 – Nomad Coders
초보자를 위한 자바스크립트
nomadcoders.co