코딩하는 마멋

HTML 00:00:00 자바스크립트에 10개의 명언 배열 만들기 const quotes = [ { quote: "꿈을 계속 간직하고 있으면 반드시 실현할 때가 온다.", author: "괴테", }, { quote: "닫혀있기만 한 책은 블록일 뿐이다.", author: "토마스 풀러", }, { quote: "오늘이라는 날은 두 번 다시 오지 않는다는 것을 잊지 말라.", author: "단테", }, { quote: "고난이 지나면 반드시 기쁨이 스며든다.", author: "괴테", }, { quote: "그대의 하루하루를 그대의 마지막 날이라고 생각하라.", author: "호라티우스", }, { quote: "변명 중에서도 가장 어리석고 못난 변명은 시간이 없어서라는 변명이다.", author..

Math - 기본 문법 : Math.function_name - 5개의 배열에서 마지막 item은 4번째이기 때문에 필요한 숫자는 4 .random() - 기본 : 0부터 1사이의 랜덤한 숫자 제공 - 10을 곱하면 0에서 10사이의 숫자를 랜덤으로 호출 콘솔 활용 ⟩ Math.random() * 10 < 9.232144131 - 뒤에 소수점까지 출력되기 때문에 숫자만 출력되게 해야함 소수점을 없애는 함수 .round() - 반올림 해주는 함수 - 1.4 ➝ 1, 1.5 ➝ 2 ⟩ Math.round(0.1) < 0 .ceil() - 숫자를 천장(ceil)까지 높여주는 함수 - 1.1 ➝ 2, 1.9 ➝ 2 - 1.0만이 1이 될 수 있다 ⟩ Math.ceil(1.1)

HTML 00:00:00 강의 듣기 전 내가 해본 것 const clock = document.querySelector("h2#clock"); const date = new Date(); function getClock() { console.log(date.getHours()); console.log(date.getMinutes()); console.log(date.getSeconds()); } setInterval(getClock, 1000); 문제점 : - 현재 시간이 계속 업데이트 되는게 아닌 호출 당시 고정된 시간만 1초 간격으로 출력 - 시계 형태가 아니라 세로로 출력됨 강의에서 한 것 const clock = document.querySelector("h2#clock"); function ge..

- 문자열에 사용하는 함수 - 명령어 : padStart - padEnd : padStart의 반대, 문자열 뒤에 추가 숫자 사용 예시 "1".padStart(2, "0") // '01' "1" 이라는 문자열의 길이를 2로 만드는데, 만약 2가 아니라면 앞에 0을 추가 "12".padStart(2, "0") // 변화 없음 "12"는 이미 문자열의 길이가 2이기 때문에 변화 없음 문자 사용 예시 "hello".padStart(20. "x") // 'xxxxxxxxxxxxxxxhello' 숫자 ➝ 문자열 변환 new Date().getHours() // 19 string(new Date().getHours()) // "19" string()으로 감싸주면 문자열로 변환 가능

- 콘솔에 new Date() 입력 시 호출 당시 현재 날짜, 시간 확인 가능 - 매 초마다 date안에 있는 함수들을 호출해서 시계 만들기 가능 예시(크롬 콘솔 사용) ⟩ const date = new Date(); ⟩ date.getDate() < 16 ⟩ date.getDay() < 0 (일요일은 0) ⟩ date.getFullYear() < 2023 ⟩ date.getHours() < 12 ⟩ date.getMinutes() < 18 ⟩ date.getSeconds() < 35

Intervals - 매번 일어나야 하는 무언가를 지정 - 예시 : 매 3초마다 무슨 일이 일어나게 하고 싶을 때 사용 명령어 : setInterval setInterval(function_name, ms) 첫번째 인자 : 호출하고자 하는 함수 이름 두번째 인자 : 호출 간격, ms(milliseconds)로 표기 사용 예시 function sayHello() { console.log("hello"); } setInterval(sayHello, 5000); 결과 : 콘솔에 5초마다 hello 출력 Timeout - 함수를 일정 시간이 흐른 뒤 한 번만 호출 - 명령어 : setTimeout setTimeout(function_name, ms) 사용 예시 function sayHello() { consol..

HTML class = "hidden"인 form, h1 CSS .hidden { display: none; } class = "hidden"인 것들을 보이지 않게 한다. HTML const loginForm = document.querySelector("#login-form"); const loginInput = document.querySelector("#login-form input"); const greeting = document.querySelector("#greeting"); const HIDDEN_CLASSNAME = "hidden"; const USERNAME_KEY = "username"; function onLoginSubmit(event) { event.preventDefault()..

local storage - 브라우저에 뭔가를 저장할 수 있게 해주고 나중에 가져다 쓸 수 있음 - "localStorage"로 사용 setItem - local storage 정보 저장 localStorage.setItem("username", "marmot") 결과 : Key : username Value : marmot 크롬 기준 : 검사 ➝ Application localStorage에서 확인 getItem - local storage에 저장한 값 가져옴 localStorage.getItem("username") // 'marmot' removeItem - local storage에 저장한 값 삭제 localStorage.removeItem("username")