본문 바로가기

바닐라JS6

[TIL] 💡 Day 10 - JavaScript로 TodoList 만들기 ✔ 이 포스팅은 노마드코더 - "바닐라 JS로 크롬 앱 만들기를 들으면서 깃허브에 기록한 필기를 옮긴 내용입니다. 목표 : 📝 JavaScript로 Todo List 만들기 🌱 Todo List 기본 틀 준비 👉 일단 필요한 요소들은 어떤 것이 있는지 알아보자. Form : 사용자가 todo 입력 → 제출하는 형태가 필요하다. List : 입력한 todo를 나열해야 된다. input : 사용자에게 todo를 입력받아야 한다. 예시 코드 const toDoForm = document.getElementById("todo-form"); const toDoInput = document.querySelector("#todo-form input"); const toDoList = document.getElemen.. 2022. 5. 1.

[후기] 노마드코더 바닐라JS 챌린지 1주일 지난 시점 후기 바닐라 JS챌린지란? 👉 "노마드코더" 사이트에서 진행 중인 프로그램으로, 매 기간별로 지원자를 받아서 정해진 기간 동안 미션에 도전하는 일종의 스터디다! 그리고 챌린지는 무료지만, 챌린지에 참여하기 위해 유료 강의를 수강해야 하는 경우가 있는 것 같다. 그중에서 내가 참여한 과정은 바닐라JS챌린지로 아래의 '바닐라 JS로 크롬 앱 만들기' 강의와 같이 진행되는 챌린지이다. 강의도 무료, 챌린지도 무료인데 챌린지를 끝내고 나면 다른 강의를 들을 때 사용할 수 있는 최대 30% 할인쿠폰과 뱃지, 수료증 등을 제공한다고 하니 안 할 이유가 있나?😆 챌린지의 목적? 홈페이지에 나와있는 목적은 위와 같다. 크게 강의를 끊어놓고 완강하기 힘들었던 사람이나, 강의만 듣고 실전에 적용이 어려웠던 사람들이 들으면 좋다.. 2022. 3. 16.

[TIL] 💡 Day 5 - JS를 통해서 CSS를 조작하는 방법들 ✔ 이 포스팅은 노마드코더 - "바닐라 JS로 크롬 앱 만들기를 들으면서 깃허브에 기록한 필기를 옮긴 내용입니다. JS를 통해서 CSS를 조작하는 여러 가지 방법을 배웠다.😊 🌱 CSS in Javascript 1️⃣ 👉 JS안에서 style로 CSS에 접근하여 조작하는 방법 예제 코드 const h1 = document.querySelector("div.hello:first-child h1"); function handleTitleClick() { // getter - 값을 가져옴 console.log(h1.style.color); // setter - 값을 설정함 h1.style.color = "cornflowerblue"; console.log(h1.style.color); } // console결.. 2022. 3. 13.

[TIL] 💡 Day 4 - HTML과 JS 연결, 조작 방법 ✔ 이 포스팅은 노마드코더 - "바닐라 JS로 크롬 앱 만들기를 들으면서 깃허브에 기록한 필기를 옮긴 내용입니다. 📑 본격적으로 HTML과 JS를 연결하는 방법과, JS에서 HTML을 조작하는 방법에 대해서 배웠다.😆 🌱 JS 사용하는 이유 ❓ 👉 HTML과 상호작용 하기 위해서 - JS는 HTML의 element들을 자신의 방식으로 조작 가능하다. - JS로 HTML을 조작하면 원래 HTML 파일에 영향을 주지 않고 독립적으로 조작할 수 있다. 🌱 Document는 Object ❗ 👉 document는 브라우저에 이미 존재하는 Object 콘솔 창에 document를 입력하면 긴 object임을 알 수 있다. html을 JS의 형태로 볼 수 있다. = JS에서 HTML document Object로부터.. 2022. 3. 13.

이전 1 2 다음

티스토리툴바