악어최고의 코딩일기

그 전에 함수 하나를 먼저 보고 가자면 

const todaysQuote = (quotes[Math.floor(Math.random()*quotes.length)]);  // Math.random -> 이 기능으로 내가 나열한 명                                                                                                                             언을 랜덤으로 보여준다.

위에 지정한 명언(두개밖에 안넣은 상태)

인덱스파일에 지정한 span첫번째 두번째 각각 명언과 작가의 이름이 들어갈 부분을 정해주고

Math.fllor 기능은 저 랜덤값이 1.203203 이런식으로 표현되는것을 1로 바꿔주는 기능 내려주는 기능이다. 숫자를 정리해서

length로 내가 지정한 명언의 숫자만큼 랜덤값에 곱해준다. 왜냐면 랜덤값은 0.~1에서 랜덤값이 기본이라 저렇게 해줘야한다.

2. 백그라운드

이미지 파일을 미리 추가해 둔뒤에 이름을 똑같이 해서 지정해 준다.

그리고 document.createEleme 메서드는 지정한 tagName의 HTML 요소를 만들어 반환합니다. 즉 js 기능을 html에 포함시켜 사진이미지가 html 화면에 보이게 해준다.

이미지 소스 정의를 내려주고 아까 정의한 랜덤값 chosenImage

그리고 appendChild() 메소드는 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙입니다

인덱스 바디 밑에 이미지를 임의로 추가해줌으로서 마무리.

오늘은 시계를 만드는 중이다.

const clock = document.querySelector("h2#clock");   // 인덱스파일에서 clock을 찾고

function getClock(){
    const date = new Date();
    clock.innerText = (`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`);
}

//첫 줄 정의한 clock에 시간 분 초 를 불러주는 기능을 쓴다.

getClock();
setInterval(getClock,1000);

-1을 01로 만들어주는 것

"1".PadStart(2,"0")  // 1이란 숫자의 길이를 2만큼 늘리는데 0으로 채운다..,대충 이런뜻 하지만 기능 자체는 (내가 이해하기론) 스트링의 길이를 늘려주는 것이므로 함수를 스트링형식으로 바꿔준다.

                                                                                                                          ↙↙↙↙

시계최종본

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

function getClock(){
    const date = new Date();
    const hours = String(date.getHours()).padStart(2,"0");              // 이런식으로String() 감싸주면 끝.(본래형태에서)    

    const minutes = String(date.getMinutes()).padStart(2,"0");
    const secondes = String(date.getSeconds()).padStart(2,"0");
    clock.innerText = `${hours}:${minutes}:${secondes}`;
}



getClock();
setInterval(getClock,1000); //숫자는 1000이지만 1초마다 계속 보여주는것 = 실시간으로 보게 해주는 기능
                                               - 이 기능이 없다면 한번만 일어나고 만다.

string 합체방법

일반적으로 알고있던

"Hello " + username; 플러스 와 " "를 이용한 방법과

새로운 방법

`백틱을 이용한 방법

`Hello ${username}`;

추출값은 동일하게 나온다.

어떤 방법을 사용해도 좋다고 하는데 난 전자가 이상하게 편하네 파이썬을 처음으로 배워서 그런가.

그래도 새로운 것에 익숙해지도록 노력해야겠다.

반본적인 String 오타를 유의하는 법

js에서 반복적으로 string을 사용하다가보면 오타가 날수도있는데

ex. username,,,,username...usermame  이런식으로? 그럴 때를 대비하여

const USERNAME_KEY = "username" 이런식으로 지정해준다.

오타가 날 경우 js에서 알려주기 때문에.