자바스크립트 3.0~3.3

yejin·2021년 3월 12일

[크롬 앱 클론] javascript

목록 보기

4/6

3.0

html과 javascript에서 class이름을 어떻게 쓰는가
같은 이름을 css, javascript에서도 동일하게 쓰고싶을때는 class이름을
"css-clock" "js-clock" 이런식으로 하면 됨!

현재시간 띄우기

html

<!DOCTYPE html>
<html>
  <head>
    <title>Something</title>
    <link rel="stylesheet" href="style.css" />
    <meta charset="UTF-8" />
  </head>

  <body>
    <div class="js-clock">
      <h1>00:00</h1>
    </div>
    <script src="clock.js"></script>
  </body>
</html>

javascript

const clockContainer = document.querySelector(".js-clock"),
  clockTitle = clockContainer.querySelector("h1");

function getTime() {
  const date = new Date();
  const minutes = date.getMinutes();
  const hours = date.getHours();
  const seconds = date.getSeconds();
  clockTitle.innerText = `${hours}:${minutes}:${seconds}`;
}

function init() {
  getTime();
}

init();

결과

이러면 현재 시간이 나타나는데, 문제는 새로고침을 계속 해줘야됨 (시간이 업데이트가 안됨)
우리가 원하는건 이런게 아니야
=> 다음시간에 setlnterval이라는걸 볼거임

3.1

setlnterval() 이 함수가 하는것 : 두 인자값(argument)을 받는데 첫번째 인자는 함수,
두번째 인자는 실행할 시간 간격

const clockContainer = document.querySelector(".js-clock"),
  clockTitle = clockContainer.querySelector("h1");

function getTime() {
  const date = new Date();
  const minutes = date.getMinutes();
  const hours = date.getHours();
  const seconds = date.getSeconds();
  clockTitle.innerText = `${hours}:${minutes}:${seconds}`;
}

function init() {
  getTime();
  setInterval(getTime, 1000);
}

init();

결과

잘 돌아가는 모습.

근데 문제는
영상삽입
초가 01, 02 이렇게 나타나는게 아니라 그냥 1,2,이렇게 나타남. 보기 안좋아

//10초 이하일때 앞 조건에맞으면(?) 0을 포함해서 초를 세고, 아니면(:) 그냥 초를 세라.
clockTitle.innerText = `${hours}:${minutes}:${
    seconds < 10 ? `0${seconds}` : seconds
  }`;

조건문 ? 참일때결과 : 거짓일때 결과

시,분,초 모두 01,02이렇게 되도록 적용시킨거


  clockTitle.innerText = `${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}:${
    seconds < 10 ? `0${seconds}` : seconds
  }`;

결과
영상삽입

local storage : 작은 정보를 나의 유저 컴퓨터에 저장하는 방법

html

<!DOCTYPE html>
<html>
  <head>
    <title>Something</title>
    <link rel="stylesheet" href="style.css" />
    <meta charset="UTF-8" />
  </head>

  <body>
    <div class="js-clock">
      <h1>00:00</h1>
    </div>
    <form class="js-form form">
      <input type="text" placeholder="what is your name?" />
    </form>
    <h4 class="js-greetings gretting"></h4>
    <script src="clock.js"></script>
    <script src="gretting.js"></script>
  </body>
</html>

css

body {
  font-family: sans-serif;
}

.form,
.grettings {
  display: none;
}

.showing {
  display: block;
}

javascript

const form = document.querySelector(".js-form"),
    input = form.querySelector("input"),
    greeting = document.querySelector(".js-greetings");

const USER_LS = "currentUser",
    SHOWING_CN = "showing";

function paintGreeting(text) {
    form.classList.remove(SHOWING_CN);
    greeting.classList.add();
    greeting.innerText = `Hello ${text}`;
}
function loadName(){
    const currentUser = localStorage.getItem(USER_LS);
    if(currentUser === null){
        //유저가 없는 경우

    } else {
        //유저가 있는 경우
        paintGreeting(currentUser);

    }

}


function init(){
    loadName();
}

init();

결과

3.3

<!DOCTYPE html>
<html>
  <head>
    <title>Something</title>
    <link rel="stylesheet" href="style.css" />
    <meta charset="UTF-8" />
  </head>

  <body>
    <div class="js-clock">
      <h1>00:00</h1>
    </div>
    <form class="js-form form">
      <input type="text" placeholder="what is your name?" />
    </form>
    <h4 class="js-greetings gretting"></h4>
    <script src="clock.js"></script>
    <script src="gretting.js"></script>
  </body>
</html>

저 상태인데 나는 값 입력 후, 엔터 누르면 처음화면으로 돌아가게 되는걸 막고싶어

const form = document.querySelector(".js-form"),
    input = form.querySelector("input"),
    greeting = document.querySelector(".js-greetings");

const USER_LS = "currentUser",
    SHOWING_CN = "showing";


//입력하고 엔터누르면 새로고침(입력값 저장x)되는거 막아주기
function handleSubmit(event){
    event.preventDefault();
}

function askForName(){
    form.classList.add(SHOWING_CN);
    form.addEventListener("submit",handleSubmit);
}

function paintGreeting(text) {
    form.classList.remove(SHOWING_CN);
    greeting.classList.add();
    greeting.innerText = `Hello ${text}`;
}
function loadName(){
    const currentUser = localStorage.getItem(USER_LS);
    if(currentUser === null){
        //유저가 없는 경우
        askForName();

    } else {
        //유저가 있는 경우
        paintGreeting(currentUser);

    }

}


function init(){
    loadName();
}

init();

결과
엔터 누르는중인데도 계속 값이 보여지는 모습.

function handleSubmit(event){
    event.preventDefault();
    const currentValue = input.value;
    paintGreeting(currentValue);
}

문제는 새로고침하면 날 기억 못해. (hello 입력내용)이 사라짐. 왜냐면 저장한게 아니니까
이름을 불러오도록 프로그래밍 된거지 저장하라고 코딩짜준적은 없음.

function saveName(text){
    localStorage.setItem(USER_LS, text);
}


//입력하고 엔터누르면 새로고침(입력값 저장x)되는거 막아주기
function handleSubmit(event){
    event.preventDefault();
    const currentValue = input.value;
    paintGreeting(currentValue);
    saveName(currentValue);
}

결과

최종 javascript

const form = document.querySelector(".js-form"),
    input = form.querySelector("input"),
    greeting = document.querySelector(".js-greetings");

const USER_LS = "currentUser",
    SHOWING_CN = "showing";

function saveName(text){
    localStorage.setItem(USER_LS, text);
}


//입력하고 엔터누르면 새로고침(입력값 저장x)되는거 막아주기
function handleSubmit(event){
    event.preventDefault();
    const currentValue = input.value;
    paintGreeting(currentValue);
    saveName(currentValue);
}

function askForName(){
    form.classList.add(SHOWING_CN);
    form.addEventListener("submit",handleSubmit);
}

function paintGreeting(text) {
    form.classList.remove(SHOWING_CN);
    greeting.classList.add();
    greeting.innerText = `Hello ${text}`;
}
function loadName(){
    const currentUser = localStorage.getItem(USER_LS);
    if(currentUser === null){
        //유저가 없는 경우
        askForName();

    } else {
        //유저가 있는 경우
        paintGreeting(currentUser);

    }

}


function init(){
    loadName();
}

init();

yejin

♪(๑ᴖ◡ᴖ๑)♪ 기회는 도전에서부터 시작되는 것

이전 포스트

자바스크립트 2.5~2.7

다음 포스트

자바스크립트 3.0~3.3

[크롬 앱 클론] javascript

자바스크립트 2.5~2.7

자바스크립트 3.4~

0개의 댓글