primavera

quote와 비슷하다. 배경 사진을 여러 개 저장해놓고 랜덤으로 선택해서 화면에 보여줄 것이다. 일단 이렇게 사진을 여러 개 저장해둔다. 랜덤으로 화면에 띄울 것이기 때문에 2개 이상 저장해놓자. 그런 다음 quote에서 한 것처럼 랜덤으로 사진을 골라준다. chosenImage 변수에 랜덤 이미지가 저장되어 있다. 지금까지 우리는 html에 만들어져 있는 요소를 js 파일에 가져와서 그 요소를 수정했다. 이제는 js에서 직접 요소를 만들어서 그걸 html에 추가해보려고 한다. document.querySelector()가 아니라 document.createElement()를 사용해서 요소를 만든다! bgImage는 아직은 js에만 존재하는 요소이다. 이걸 html의 body 영역에 추가해보자. back..

quotes.js 파일을 만들고, html에서 import해준다. quotes.js에서는 다음과 같이 명언들을 나열해준다. quotes라는 배열을 만들고 그 안에 요소들을 넣는다. html에서 명언을 표시할 곳을 만들자. quote라는 아이디를 가진 div를 만들고, 그 안에 span을 2개 만들어서 하나는 quote, 다른 하나는 author가 보이도록 만들자. quotes.js에서는 span 하나하나를 quote, author 변수로 저장해준다. randomness(무작위성) 명언이 10개가 있다고 가정했을 때 10개 명언 중 하나를 랜덤으로 가져오도록 만들어야 한다. 배열의 인덱스는 0부터 시작하기 때문에 0부터 9까지의 숫자를 랜덤으로 접근하는 것이 필요하다. Math module를 사용한다. m..

저번에 해결하지 못한 문제1을 해결해보자. 숫자가 깔끔하게 보이지 않는다. 해결해보자! string이 적어도 최소한 2개여야 한다. 1인 경우 01로 바꿔줘야하지만, 11인 경우 그냥 11을 쓴다. padStart 앞의 string이 2개가 아니라면 앞부분에 0을 추가해줘~ 라는 뜻이다. 12의 경우 이미 길이가 2이기 때문에 문자를 추가하지 않는다. padStart는 앞에 문자를 추가하는 것이다. 반대로 뒤에 문자를 추가하는 함수인 padEnd도 있다. padStart는 string에 적용할 수 있는 함수이기 때문에 Date().getHours()를 string으로 바꿔줘야 한다. String으로 덮으면 문자로 바꿀 수 있다. 이렇게 코드를 짜면 const clock = document.querySel..

이제 새로운 js 파일을 만든다 clock.js 코드가 하는 일에 따라서 파일을 나눠서 작성한다. greeting.js는 username을 입력받아서 화면에 표시하는 것이다. 그 일은 모두 끝났고 이제는 clock과 관련된 다른 일을 할 것이기 때문에 새로운 파일을 만들어줬다. 그리고 파일의 경로도 수정했다. js 폴더 안에 자바스크립트 파일을 위치시켰고, css 폴더 안에 css 파일을 위치시켰다. 파일 경로는 다음과 같다. http에서 import하는 파일의 경로도 수정해줘야 한다. 이제 새 파일 clock.js에 코드를 작성해보자! html파일에서 h2를 만들고 거기에 default text로 00:00:00를 표시하게 만들었다. interval과 timeout interval: 정해진 시간마다 특..

local storage에 username이 존재하는지 확인하고, 만약 존재한다면 form을 표시하지 않고 바로 h1 요소가 표시되도록 하자. addEventListener를 하기 전에 localStorage를 확인해야 한다. localStorage에 username라는 key에 해당하는 것이 있을 때 1과 같이 key 값에 해당하는 value를 출력해준다. 그 key, value를 지운 후에 해당 명령어를 다시 실행하면 2와 같이 null을 보여준다. 이 null인지 아닌지를 코드에서 판별해서 null인 경우 우리가 이제껏 했던 걸 계속 하면 되고, null이 아닌 경우(무언가 있는 경우) 바로 h1 요소를 화면에 보여주게 하자. 여기서 잠깐, 'username'이라는 문자도 많이 사용하기 때문에 변수..

저번에 만든 것의 문제는 username을 기억할 수 없다는 것이다. 페이지에 들어올 때마다 로그인해줘야 한다. 이걸 영구적(?)으로 기억하려면 어떻게 해야 할까? 이 작업도 많이 사용되기 때문에 API가 존재한다. : localStorage localStorage가 브라우저에 뭔가를 저장할 수 있게 해준다. 개발자 창에서 localStorage를 확인할 수 있다. 위에 창에서 Application을 선택하면 Local Storage가 보인다. Storage의 아래에 위치하는 다른 것들로도 정보를 저장할 수 있다. 그 중에서 Local Storage가 다루기 가장 쉽기 때문에 이걸 사용해보자. 아직은 Local Storage가 비어있는 상태이다. localStorage는 다양한 함수를 제공한다. setI..

사용자가 username을 입력하고 클릭을 누르면 form 자체가 없어지도록 만들고 싶다. 이걸 구현하기 위한 두 가지 방법이 있다. 1. HTML 요소 자체 없애기. -> 이건 뭔가 단점이 많을 것 같은 느낌이 든다.. 2. CSS로 없애기(없어진 것처럼 보이게 하기) .hidden { display: none; } const loginForm = document.querySelector('#login-form'); const loginInput = document.querySelector('#login-form input'); function onLoginSubmit(event) { event.preventDefault(); //새로고침 막기 const username = loginInput.valu..

링크 href=... 라인을 추가해서 링크를 만들어주자. Go to courses preventDefault 저번 포스팅에서 form의 기본 동작이 submit이라는 걸 알게 되었다. 이걸 preventDafault로 막았다. 링크의 기본 동작은 다른 페이지로 바뀌는 것이다. 이것도 마찬가지로 막아보자. const loginForm = document.querySelector('#login-form'); const loginInput = document.querySelector('#login-form input'); const link = document.querySelector('a'); function onLoginSubmit(event) { event.preventDefault(); //새로고침 막..

우리의 목표: 1. user에게 질문한다(What is your name?) 2. 그 다음 유저에게 정보를 받아서 3. 그 정보를 화면에 표시한다. (콘솔 창에 표시) 우선 1번부터 해보자. input, button 태그를 만들고 그걸 log-form이라는 아이디를 가진 idv 안에다가 넣자. Log In 이 각각의 태그를 자바스크립트에서 접근할 수 있다. const loginInput = document.querySelector('#login-form input'); const loginButton = document.querySelector('#login-form button'); 이제 Log In 버튼이 눌렸을 때 이벤트를 적용해보자. 우리가 하고 싶은 것은 버튼을 눌렀을 때 Input에 입력된 값..

이전에 작성한 코드 중에서 handleh1Click 함수만 남겨놓자. 우리가 하고 싶은 것은 h1을 클릭했을 때 blue로 바뀌는 것에서, 다시 한 번 더 클릭하면 tomato로, 또 클릭하면 blue로 만들고 싶다. blue->tomato->blue->tomato->blue->... 어떻게 해야할까? h1의 color가 blue라면 tomato로 바꾸고, blue가 아니라면 blue로 바꿔주면 된다. 전에 배웠던 if를 사용해서 만들 수 있다. const h1 = document.querySelector('div.hello:first-child h1'); function handleh1Click() { if (h1.style.color === 'blue') { h1.style.color = 'tomat..