[자바스크립트] 정리5

1. setInterval(function, time)

- Javascript 기본 내장 함수 

- time(ms) 1초 = 1000ms

- 매 time마다 function을 계속해서 호출해준다. 

 

2. setTimeout(function, time)

- 최초 실행시 time을 기다린후 함수 1회 호출 

function sayHello(){
    console.log("Hello!");
}

function sayHi(){
    console.log("Hi");
}

setInterval(sayHello, 1000); // 1초마다 sayHello 실행
setTimeout(sayHi, 5000); // 5초뒤에 sayHi 실행

 

3. Date 

- Javascript 가 제공하는 Object

- new keword로 생성? 을 해줘야 한다.

- getHours(), GetDays() ... 등

 

4. PadStart(길이, 문자), PadEnd(길이, 문자)

- 문자열 길이를 맞출 때 사용

 

시계 만들기 

const clock = document.querySelector("h2#clock");

function getClock(){
    const date = new Date();
    const hours = String(date.getHours()).padStart(2,"0"); // "1" -> "01"
    const miniutes = String(date.getMinutes()).padStart(2,"0");
    const seconds = String(date.getSeconds()).padStart(2,"0");
    clock.innerText = `${hours}:${miniutes}:${seconds}`;
}

getClock(); // 바로 출력
setInterval(getClock, 1000); // 1초마다 출력.

 

5. Math (파이썬과 동일)

- Math.random(): 0~1 사이의 랜덤한 수 

- Math.ceil(), Math.floor(), Math.round()

- 배열에서 랜덤하게 원소 불러오기 -> array[Math.floor(Math.random()*array.length)] 

  * 더 찾아보니 따로 함수는 없고 이렇게 하는게 관습인듯? 

랜덤하게 명언 띄우기

const quotes = [
    {
        quote:"I am happy",
        author: "H"
    },
    {
        quote:"I like Coke",
        author:"C"
    },
    {
        quote:"Oh my God",
        author:"G"
    },
    {
        quote:"Shit",
        author:"S"
    },
    {
        quote:"I Love you",
        author:"L"
    },
    {
        quote:"Bitch",
        author:"B"
    },
    {
        quote:"LaLaLa",
        author:"L"
    }
]

const quote = document.querySelector("#quote span:first-child");
const author = document.querySelector("#quote span:last-child");

const todaysQuote = quotes[Math.floor(Math.random()*quotes.length)];

quote.innerText = todaysQuote.quote;
author.innerText = todaysQuote.author;

 

6. 랜덤하게 이미지 띄우기

 

(1) js 파일안에 불러올 이미지들의 이름을 원소로 갖는 리스트를 만든다. 

*일일이 이미지 이름을 치기 귀찮으니 아래를 참고하자. 

cmd로 폴더 내 파일명 리스트 추출하기 : 네이버 블로그 (naver.com)

cmd로 폴더 내 파일명 리스트 추출하기

 

(2) document.creatElement()와 document.body.appendChild()를 사용하여 자바스크립트에서 동적으로 HTML element를 추가해준다. 

*append는 가장 뒤에 prepend는 가장 위에 element를 붙여준다

const images = [
    "ScreenShot2021_0602_162110276.jpg", // 반드시 불러올 이미지와 같은 이름이어야 한다. 
    "ScreenShot2021_0608_001059665.jpg",
    "ScreenShot2021_0609_074249162.jpg",
    "ScreenShot2021_0610_013714875.jpg",
];
const chosenImages = images[Math.floor(Math.random()*images.length)];
const image = document.createElement("img"); 
image.src=`img/${chosenImages}`;
document.body.appendChild(image);