본문 바로가기

JavaScript36

ToDo - Set up 이번에는 todo 리스트를 만들어보자 일단 todo.js 파일을 생성하여 추가해준 다음, 사용자가 todo를 입력하기 위한 form을 만들어준다. 이제 리스트를 만들건데, JS로 li 를 추가할 것이기 때문에 ul 안에는 아무것도 작성하지 않도록 한다. 그럼 이제 form과 ul을 JS로 가져가보자 이제 우리는 greetings의 form에서 했던 것과 똑같은 것을 반복할건데, 이는 function을 만들어서 form의 기본 동작인 submit을 막을 거라는 말이다. 이제 input창에 무언가를 입력하고 enter를 눌러도 새로고침이 일어나지 않는다. 다음으로는 input의 value를 얻을 것이다. 이때 toDoInput을 전체 document에서 찾을지, toDoForm 안에서만 찾을지를 선택할 수 .. 2022. 3. 5.
Background 이번에는 랜덤으로 바뀌는 배경화면을 만들건데, 먼저 background.js 파일을 만들고 html에 적용해준 다음, 배경으로 지정할 이미지들을 img 폴더 안에 넣어주었다. 우리가 하려는 건 랜덤한 숫자를 얻어서 그에 이미지를 배경화면으로 띄워주는 일이기 때문에, 사실상 background.js와 qoute.js는 거의 비슷하다고 보면 된다. 먼저 첫 번째로, 이미지들로 이루어진 Array를 만든다. 그런 다음 quote.js에서 했던 것 처럼 math 모듈을 이용하여 image Array의 길이만큼의 수(0부터 2까지)를 랜덤으로 가져와서 해당하는 이미지의 이름을 console창에 출력하록 해보자 이렇게 랜덤으로 잘 출력되는 것을 확인했으니 본론으로 들어가서 이 이미지를 html에 실제로 추가하도록 .. 2022. 2. 27.
Quotes 먼저 quotes.js 파일을 만든 다음 array(배열)을 사용하여 명언들을 적고(10개쯤), html에 적용해주었다. 배경화면에서 랜덤 명언을 표시하도록 만들기 위해 우선 html에 div를 생성했다. 이제 id인 quote를 사용하여 quotes.js에서 div랑 span들을 가져오도록 할 건데, 글귀는 첫 번째 span 태그에, 작가명은 두 번째 span 태그에 나오도록 할 것이다. 여기까지 해놓고 이번에는 randomness(무작위성)에 대해 알아보자 먼저 Array 안에 있는 element에 접근하는 방법을 찾기 위해 Array에 있는 첫 번째 명언을 console 창에 출력해 보았다. 이를 통해 Array 안에 있는 모든 명언들을 출력하려면 0부터 9까지의 요소를 출력하는 function이 .. 2022. 2. 27.
PadStart 지금부터는 아래의 두 사진처럼, 3:52:6 이 3:52:06 으로 표시되도록 숫자의 자릿수를 맞춰보도록 하자(즉 string을 문자 두 개로 채우는 작업임) 이를 다르게 얘기해보면, string이 항상 최소 2개의 문자를 가지고 있어야 한다는 것이다. 만약 숫자가 1이라면 01로 바꿔주고 21이라면 그대로 표시하게 만들어야 하는데, 이건 padStart() 라는 function으로 이미 만들어져 있다. padStart()는 string에 쓸 수 있는 function이고 다음과 같이 사용할 수 있다. "1"이라는 string의 길이를 2로 만드는데, 만약 그 string의 길이가 2가 아니라면 앞쪽에 "0"을 추가하도록 한다. 이는 길이가 1인 문자를 길이가 2가 되도록 padStart()라는 funct.. 2022. 2. 26.

티스토리툴바