본문 바로가기

javascript

(20)

DAY 1 #0.2 ~ #1.2 프론트, 백엔드 준비를 위해 미리 0.0~0.4를 들어야한다... 안들었다가 지금 1시간째 헛탕쳤다... https://ssocoit.tistory.com/188 참고 #0.2 server Setup https://www.npmjs.com/package/ws 먼저 node, ws, express, pug 설치 나는 이미 노드는 설치되어 있으므로 나머지 세개만 추가로 설치함.. npm i ws npm i express npm i pug github에 올린다면 readme 파일도 추가로 생성해줄 수 있다. 터미널에 npm init-y 를 입력하면 뭔가 있어보이는 기본 package.json 파일을 작업해준다. 거기에 추가로 덧붙이고 싶은 내용을 작성하면 된다. nodemon과 babel을 사용할것이니 터미널..

DAY 14 #8.0 Geolocation 우선 날씨를 얻기 위해 미리 index.html에 준비를 해준다. function onGeoOk(position){console.log(position);} function onGeoError(){alert("Can't find you. no Weather for you.");} navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError); 위의 코드로 브라우저에서는 내 위치를 받아온다. 다만 getCurrentPosition()에게는 2개의 argument가 필요한데, 하나는 모든 게 잘 성공했을 때 실행된 함수(onGeoOk), 다른 하나는 에러가 발생했을 때 실행될 함수(onGeoError)이다. 성공했을 시에는 해당 ..

DAY 13 7.6 ~ 7.8 TO DO LIST #7.6 Deleting To Dos part One 저번 코드에서 삭제 기능은 잘 실행됐으나, 문제는 같은 이름의 항목이 있을 때다. 다음과 같이 '나루토 보기'가 두개가 있을 때, 나루토 보기 둘 중 하나를 삭제했을 때 어떤 것을 삭제했는지 모른다. 때문에 array의 각 item에 id를 부여해 고유성을 갖게할 것인데, 이 고유성은 Date.now() 함수로 부여할 것이다. Date.now()는 밀리초(1000/1초)를 주는 함수로, 이를 각 item에게 고유한 아이디 값으로 부여할 것이다. handleToDoSubmit function handleToDoSubmit(event) { event.preventDefault(); const newTodo = toDo..

DAY 12 7.0 ~ 7.5 TO DO LIST (양이 많아 DAY 12에는 7.0~7.5, DAY 13에는 7.6~7.8, DAY 14에는 8.0~8.2로 나눈다.) #7.0 Setup index.html todo-form 내의 input에는 할 일을 입력받고, ul 태그에는 저장한 text가 나열될 수 있게 한다. todo.js const toDoForm = document.getElementById("todo-form"); const toDoInput = document.querySelector("#todo-form input"); // const toDoInput = toDoForm.querySelector("input"); // 이런 식으로 쓸 수도 있다. const toDoList = document.g..

DAY 11 6.0 - 6.2 background.js // img 파일 명을 담은 변수 const images = ["0.jpeg", "1.jpeg", "2.jpeg"]; // 이미지 랜덤 출력 const chosenImage = images[Math.floor(Math.random() * images.length)]; // document에 img 태그를 만드는 변수 생성 const bgImage = document.createElement("img"); // bgImage의 src에 주소를 랜덤으로 대입 bgImage.src = `img/${chosenImage}`; // html에 img 태그를 생성한다. document.body.appendChild(bgImage); img를 배경으로 하고싶다면 body >..

DAY 10 5.0 ~ 5.3 이번 글은 거의 다 썼을 때쯤에 갑자기 컴퓨터가 멈추는바람에... 간략하게 써야지 ㅠ...하 index.html 00:00 app.js const clock = document.querySelector("h2#clock"); function getClock() { const date = new Date(); // date.getHours()등 시간 값은 숫자 값이다. // padStart는 string 값에만 사용할 수 있으므로, 변환해줘야 한다. const hours = String(date.getHours()).padStart(2, "0"); const minutes = String(date.getMinutes()).padStart(2, "0"); const seconds = Str..

DAY 8 #4.4 Getting Username submit 버튼을 클릭했을 때, form 자체를 사라지게 하는 방법이 2개가 있다. ① form 태그 자체를 제거하는 것 ② css에서 display:none; 속성을 추가해주는 것 아래는 form에서 입력값을 받아오면 form은 제거하고, 받아온 입력값을 출력하는 코드다. index.html login-form에서 입력값을 받아오면 form 태그는 아예 사라질 것이고, h1 태그가 보여지게 될 것이다. style.css 에는 다음과 같은 클래스를 만들었다. .hidden{ display:none; } /* 좀 비슷한 속성에는 display:hidden;이 있지만, 이는 그냥 보이지 않게 숨겨주는 것 뿐 해당 요소가 차지하는 공간도 그대로이며 따라서 html에서 ..

DAY 5 #2.13 Conditionals prompt(); 사용자에게 창을 띄워 값을 받아오지만, 값을 받아올 때 까지 코드의 실행을 멈추는 오래된 방식으로 css를 바꿀 수도 없다. typeof 라는 키워드는 variable의 type을 볼수 있는 키워드인데, prompt()에서는 숫자를 입력받고 이를 typeof로 출력해도 string이라고 입력된다. prompt의 type은 string이 default이기 때문이다. parseInt(); 숫자로 구성된 string type을 number type으로 변환시켜준다. console.log(typeof "15", typeof parseInt("15")); // string number const age = parseInt(prompt("Please write y..

이전 1 2 3 다음

티스토리툴바