그 땐 Front했지 (46) 썸네일형 리스트형 [Nomad/Typescript Challenges] 2일차 | Ch02 OVERVIEW OF TYPESCRIPT 참고자료: 노마드 코더 Typescript로 블록체인 만들기 https://nomadcoders.co/typescript-for-beginners/lobby 1. Implicit Types vs Explicit Types 👉🏻변수를 정할 때 타입을 매우 명확하게, 명시적으로(Explicit) 정해주어야 한다. 하지만 타입스크립트도 타입을 유추할 수 있기 때문에 필수는 아니다. 2-4. Types of TS part One-Three type Player = { readonly name: string, age?: number } 👉🏻?를 쓰면 필수적으로 값을 지정하지 않아도 된다. 👉🏻readonly 속성을 지정하면 값을 변경할 수 없다. 📌any: 어떤 타입이든지 가능할 때 any 타입을 쓴다. any.. [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/바닐라 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] 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.. [Nomad/바닐라 JS Challenges] 2일차 | Ch02 WELCOME TO JAVASCRIPT 참고자료: 노마드 코더 바닐라 JS로 크롬 앱 만들기 https://nomadcoders.co/javascript-for-beginners/lobby 1. Basic Data Types // Integer 1, 2, 3 // String, 따옴표로 감싼다. "Hello" 2. Variables const a = 5; const b = 2; const myName = "yeram"; console.log(a + b); console.log(a * b); console.log(a / b); console.log("Hello" + myName); 👉🏻변수를 선언해 게으른 개발자가 되어보자! 코드의 재사용성을 높인다. 👉🏻JS에서는 변수를 카멜표기법으로 쓴다. 3. const and let let a = 5;.. [Nomad/바닐라 JS Challenges] 1일차 | Ch01 INTRODUCTION 참고자료: 노마드 코더 바닐라 JS로 크롬 앱 만들기 https://nomadcoders.co/javascript-for-beginners/lobby 🐰 노마드 자바스크립트 챌린지를 시작했다! 자바스크립트를 몰라서! 라기보다 쓰기는 쓰지만 개발하면서 항상 디테일한 부분을 놓치는 기분이 들어 그 부분을 채우고 싶어 챌린지에 참여하게 되었다! 앞으로 잘 들어봐야징 1. Why JS? 👉🏻첫날이라 그런지 JS를 왜 배워야하는지 JS의 장점을 위주로 한 강의였다! 👉🏻JS는 동적인 웹을 만들기 위해 배워야하기도 하지만 프론트엔드의 유일한 프로그래밍 언어이므로 배워야 한다ㅎㅎ 이전 1 2 3 4 ··· 6 다음