IT (197) 썸네일형 리스트형 [Nomad/바닐라 JS Challenges] 10일차 | Ch07 TO DO LIST 참고자료: 노마드 코더 바닐라 JS로 크롬 앱 만들기 https://nomadcoders.co/javascript-for-beginners/lobby 0-8. Setup & Adding To Dos & Deleting To Dos & Saving To Dos index.html 👉🏻todo를 적을 form과 todo list를 나타낼 ul tag를 추가한다. todo.js const toDoForm = document.getElementById("todo-form"); const toDoInput = document.querySelector("#todo-form input"); const toDoList = document.getElementById("todo-list"); 👉🏻먼저 각 요소들을 변수.. [Nomad/바닐라 JS Challenges] 8일차 | Ch01 QUOTES AND BACKGROUND 참고자료: 노마드 코더 바닐라 JS로 크롬 앱 만들기 https://nomadcoders.co/javascript-for-beginners/lobby 0. Quotes index.html ... 👉🏻명언이 들어갈 자리와 해당 이벤트를 처리할 js를 불러온다. const quotes = [ { quote: "The way to get started is to quit talking and begin doing.", author: "Walt Disney", }, ... ]; const quote = document.querySelector("#quote span:first-child"); const author = document.querySelector("#quote span:last-child"); c.. [Nomad/바닐라 JS Challenges] 8일차 | Ch05 CLOCK 참고자료: 노마드 코더 바닐라 JS로 크롬 앱 만들기 https://nomadcoders.co/javascript-for-beginners/lobby 0. Intervals HTML 00:00 clock.js const clock = document.querySelector("h2#clock"); function sayHello() { console.log("hello"); } setInterval(sayHello, 5000); ✍🏻setInterval: 정해진 시간마다 지정한 함수를 실행한다. 1. Timeouts and Dates clock.js const clock = document.querySelector("h2#clock"); function getClock() { const date = n.. [Nomad/zoom clone coding Challenges] 1일차 | Ch01 CHAT WITH WEBSOCKETS 참고자료: 노마드 코더 줌 클론코딩 https://nomadcoders.co/noom/lobby 1. HTTP vs WebSockets 👉🏻HTTP 서버는 유저에게 먼저 말을 걸 수 없다. client가 요청하면 response 과정 이후 유저가 누구인지 잊어버린다. 👉🏻웹소켓(ws)에서는 서버와 유저가 연결되어 있기 때문에 유저가 요청하면 서버가 답장할 수 있고 먼저 말을 걸 수도 있다. 2. WebSockets in NodeJS server.js const server = http.createServer(app); const wss = new WebSocketServer({ server }); 👉🏻express는 http 프로토콜을 다루는데 우리는 둘 다 다루기 위해 위와 같은 작업을 해분다. ht.. [Nomad/바닐라 JS Challenges] 7일차 | Ch04 LOGIN 참고자료: 노마드 코더 바닐라 JS로 크롬 앱 만들기 https://nomadcoders.co/javascript-for-beginners/lobby 1. Form Submission Log In 👉🏻HTML의 input 속성을 잘 활용하면 JS 없이 유효성 검사 로직을 만들 수 있다. required: 빈 값을 제출하지 못 하게 막는다. maxlength: input값의 최대 길이를 정해준다. 2-3. Events part One-Two const loginForm = document.querySelector("#login-form"); const loginInput = document.querySelector("#login-form input"); const link = document.query.. [Nomad/바닐라 JS Challenges] 5일차 & 6일차 | Ch03 JAVASCRIPT ON THE BROWSER 참고자료: 노마드 코더 바닐라 JS로 크롬 앱 만들기 https://nomadcoders.co/javascript-for-beginners/lobby 6-8. CSS in Javascript part One-Three const h1 = document.querySelector("div.hello:first-child h1"); function handleTitleClick() { h1.classList.toggle("active"); // const clickedClass = "active"; // if(h1.classList.contains(clickedClass)) { // h1.classList.remove(clickedClass); // } else { // h1.classList.add(cl.. [Nomad/바닐라 JS Challenges] 4일차 | Ch03 JAVASCRIPT ON THE BROWSER 참고자료: 노마드 코더 바닐라 JS로 크롬 앱 만들기 https://nomadcoders.co/javascript-for-beginners/lobby 1. HTML in Javascript HTML Grab me! JS const title = document.getElementById('title'); title.innerText = "Got you!" console.log(title.className) 👉🏻id 값으로 html 요소를 찾을 수 있다. 2. Searching For Elements const hellos = document.getElementsByClassName("Hello"); const hello = document.querySelector(".Hello"); title.inne.. [Nomad/바닐라 JS Challenges] 3일차 | Ch02 WELCOME TO JAVASCRIPT 참고자료: 노마드 코더 바닐라 JS로 크롬 앱 만들기 https://nomadcoders.co/javascript-for-beginners/lobby 7-8. Functions part One, Two function sayHello(nameOfPerson, age) { console.log("Hello! My name is " + nameOfPerson + " and I'm " + age); } sayHello("yeram", 24); sayHello("sehyeon", 26); 👉🏻함수는 코드를 캡슐화한다. 👉🏻함수를 호출 할 때 괄호 안에 인자를 넣어 보낸다. 인자는 여러개 보낼 수 있다. 👉🏻인자로 보낸 변수는 해당 함수 내에서만 유효하다. 11. Returns const age = 96; fu.. 이전 1 2 3 4 5 6 ··· 25 다음
