JS 처음부터 시작: 기본

기존 문서에 JS 추가

상상해 보세요. 방금 HTML, 심지어 CSS를 배웠어요.너는 이 귀여운 정적 문서를 얻었지만, 너는 그것에 행동을 추가하고 싶다.이것이 바로 JS의 용무지이다.
다음 시계를 생성했다고 가정합니다.

<!doctype html>
<html lang=en>
<title>clock example</title>
<meta charset=utf-8>
<style>
:root {
  font-size: 10vw;
  font-family: Verdana, Arial, sans-serif;
}
.clock {
  font-weight: bold;
  color: #ddd;
  display: inline;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 0.5rem;
  white-space: nowrap;
  background: #333;
  padding: 0.25rem;
}
</style>
<span class="clock">
  <span class="hours">19</span>:<span class="minutes">27</span>:<span class="seconds">33</span>
</span>

이것은 우리에게 다음과 같은 것을 주었다.

너무 초라하게 굴지 마라!
네, 그래서 이 일은 매일 한 번만 맞습니다.
몇 가지 JS를 사용하여 동적으로 만듭니다.
이것은 간단한 설명입니다. 우리는 스크립트를 페이지 자체에 추가할 것입니다.
더 복잡한 내용에 대해서는 스크립트를 자신의 파일에 넣는 것이 가장 좋다.
매우 단순하지만 유효한 HTML을 사용하기 때문에 문서 끝에 <script> 태그를 추가할 수 있습니다.<script> 표기에서 우리는 현재 시간이 필요하다.
현재 시간을 얻기 위해 자바스크립트의 Date 대상을 사용할 수 있습니다.

const time = new Date()

획득 시간

다행이다, 지금 우리는 현재의 시간이 있다.
우리가 필요로 하는 시간, 분, 초는 다음과 같다.

const hours = time.getHours()
const minutes = time.getMinutes()
const seconds = time.getSeconds()

Date 객체에 대한 자세한 내용은 doc page for JS's Date object 을 참조하십시오.
지금 우리는 시계를 업데이트하는 데 필요한 모든 것을 가지고 있다.
문서 끝에 있는 <script> 레이블은 다음과 같습니다.

const time = new Date()
const hours = time.getHours()
const minutes = time.getMinutes()
const seconds = time.getSeconds()

업데이트할 HTML 요소 가져오기

이제 시계 HTML을 업데이트할 수 있습니다.
이를 위해서는 업데이트할 HTML 요소를 읽어들여야 합니다.
이것은 다음과 같이 document.querySelector을 통해 실현할 수 있다.

const hoursElement = document.querySelector('.hours')
const minutesElement = document.querySelector('.minutes')
const secondsElement = document.querySelector('.seconds')

이러한 클래스는 본고에서 유일하기 때문에 우리는 클래스 선택기를 통해 요소를 검색할 수 있다.변수 hoursElement, minutesElement 및 secondsElement은 현재 HTML의 세 요소를 참조하므로 스크립트에서 업데이트할 수 있습니다.document.querySelector에 대한 자세한 내용은 doc page for document.querySelector 참조
이제 우리는 시계의 값과 페이지의 시계 요소가 생겼다.
우리의 스크립트는 다음과 같이 해야 한다.

const time = new Date()
const hours = time.getHours()
const minutes = time.getMinutes()
const seconds = time.getSeconds()
const hoursElement = document.querySelector('.hours')
const minutesElement = document.querySelector('.minutes')
const secondsElement = document.querySelector('.seconds')

HTML 요소 업데이트

이제 요소 값을 현재 시간으로 설정할 수 있습니다.다음과 같이 요소의 innerText 속성을 Date 객체 인스턴스에 해당하는 값으로 설정할 수 있습니다.

hoursElement.innerText = hours
minutesElement.innerText = minutes
seconds Element.innerText = seconds

전체 스크립트는 다음과 같습니다.

const time = new Date()
const hours = time.getHours()
const minutes = time.getMinutes()
const seconds = time.getSeconds()
const hoursElement = document.querySelector('.hours')
const minutesElement = document.querySelector('.minutes')
const secondsElement = document.querySelector('.seconds')

hoursElement.innerText = hours
minutesElement.innerText = minutes
secondsElement.innerText = seconds

만약 당신이 이것을 실행한다면, 시계가 더 이상 19:27:33을 표시하지 않는다는 것을 알아차릴 수 있을 것이다.우리 시계 업데이트 중!

업데이트 시간

너는 이런 상황이 단지 한 번만 발생하는 것을 알아차릴 수 있다.이것은 매우 일리가 있다. 왜냐하면 우리는 시계를 한 번 업데이트하는 코드만 작성했기 때문이다.만약 우리가 갱신을 유지하고 싶다면, 우리는 매초에 한 번 갱신해야 한다. 이것은 우리의 시계에서 가장 작은 시간 단위이다.
유사한 코드를 여러 번 실행하기 위해서, 우리는 함수를 만드는 것이 가장 좋다.
너도 알다시피 그중의 하나는

function() {
  // do stuff
}

현재, 우리는 모든 코드를 하나의 함수에 넣을 수 있지만, 우리는 같은 요소를 업데이트하기만 하면 된다.따라서 다음과 같이 요소 찾기를 함수 외부에 유지할 수 있습니다.

const hoursElement = document.querySelector('.hours')
const minutesElement = document.querySelector('.minutes')
const secondsElement = document.querySelector('.seconds')

function updateClock() {
  const time = new Date()
  const hours = time.getHours()
  const minutes = time.getMinutes()
  const seconds = time.getSeconds()

  hoursElement.innerText = hours
  minutesElement.innerText = minutes
  secondsElement.innerText = seconds
}

JS의 함수 상하문은 함수 외부의 내용에 접근할 수 있기 때문에 함수 외부의 변수에 접근할 수 있기 때문에 우리는 요소를 한 번만 찾으면 된다.
이제 함수가 생겼습니다. 함수를 호출해야 합니다. 아래와 같습니다.

updateClock()

함수에 대한 자세한 내용은 doc page for Function을 참조하십시오.
전체 스크립트는 다음과 같이 해야 합니다.

const hoursElement = document.querySelector('.hours')
const minutesElement = document.querySelector('.minutes')
const secondsElement = document.querySelector('.seconds')

function updateClock() {
  const time = new Date()
  const hours = time.getHours()
  const minutes = time.getMinutes()
  const seconds = time.getSeconds()

  hoursElement.innerText = hours
  minutesElement.innerText = minutes
  secondsElement.innerText = seconds
}

updateClock()

만약 네가 이것을 실행한다면, 시계는 업데이트될 것이다. 그러나 여전히 한 번뿐이다.
우리는 매 초 이 기능에 즐거움을 가져다 주어야 한다.이를 위해 JS의 내장 setInterval 함수를 사용할 수 있습니다.

const timeout = setInterval(updateClock, 1000)

이것은 무제한으로 초당 (1000밀리초) updateClock 함수를 운행할 것이다.무제한은 매우 긴 시간입니다. 따라서 우리는 setInterval 함수의 출력을 가져와 시간을 초과하는 것을 방지하기 위해 참고로 사용합니다.
우리의 전체 스크립트는 지금 이렇게 해야 하며, 우리가 원하는 방식으로 실행해야 한다.

const hoursElement = document.querySelector('.hours')
const minutesElement = document.querySelector('.minutes')
const secondsElement = document.querySelector('.seconds')

function updateClock() {
  const time = new Date()
  const hours = time.getHours()
  const minutes = time.getMinutes()
  const seconds = time.getSeconds()

  hoursElement.innerText = hours
  minutesElement.innerText = minutes
  secondsElement.innerText = seconds
}

const timeout = setInterval(updateClock, 1000)

보상: 용접판 번호 0

지금 우리는 작업 시계가 하나 생겼다. 너는 나처럼 10보다 낮은 숫자가 우리의 시계를 변형시키는 것에 대해 화를 낼 수도 있다.이것은 매우 일리가 있다. 왜냐하면 그것들은 숫자이고 접두사가 없기 때문이다.zeropad 함수를 추가합니다.

function zeropad(number) {
  return number < 10 ? `0${number}` : number
}

이 함수는 숫자를 가져와 10보다 낮은지 확인합니다.만약 그렇다면, 0과 숫자를 포함하는 문자열을 되돌려줍니다.그렇지 않으면 원래 숫자로 돌아갑니다.
이 함수를 스크립트에 추가하고 innerText를 숫자로 설정할 때 호출합니다.모든 일은 보기에 이렇다.

const hoursElement = document.querySelector('.hours')
const minutesElement = document.querySelector('.minutes')
const secondsElement = document.querySelector('.seconds')

function updateClock() {
  const time = new Date()
  const hours = time.getHours()
  const minutes = time.getMinutes()
  const seconds = time.getSeconds()

  hoursElement.innerText = zeropad(hours)
  minutesElement.innerText = zeropad(minutes)
  secondsElement.innerText = zeropad(seconds)
}

function zeropad(number) {
  return number < 10 ? `0${number}` : number
}

const timeout = setInterval(updateClock, 1000)

우리의 시계는 숫자가 10보다 낮을 때 뛰지 않고 정확하게 업데이트되고 있다.
우리는 JS를 기존 HTML 문서에 추가하고, JS 코드에서 문서를 조작하고, 함수 작성과 중복 기능에 대한 기초 지식을 토론했다.
사망 시계의 업데이트를 계속 지켜봐 주십시오. 이것은 발생할 수도 있고, 발생하지 않을 수도 있습니다...

Reference

이 문제에 관하여(JS 처음부터 시작: 기본), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/dkruythoff/js-from-the-ground-up-fundamentals-498n

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)