코딩이 모래?

일단 간단하게 바닐라JS로 버튼 누른 횟수 보여주는 페이지 만듬 Total clicks: 0 Click me React JS 설치를 위한 Javascript 코드 Url https://unpkg.com/react@17.0.2/umd/react.production.min.js https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js 리액트를 import했기 때문에 createElement function을 가진 리액트 object에 접근 가능 const span 그러나 createElement(“span”) 은 반드시 생성하고자 하는 HTML 태그와 똑같아야함 React JS : 어플리케이션이 아주 인터랙티브하도록 만들어주는 library. 엔..

Javascript 2022. 1. 26. 00:22

유저의 위치 찾기 // Geolocation 8.0 navigator 객체 : 브라우저와 관련된 정보를 컨트롤함, 브라우저에 대한 버전, 정보 종류 등 관련된 정보 제공 function onGeoOk(position) { const lat = position.coords.latitude; // 위도 얻기 const lng = position.coords.longitude; // 경도 얻기 console.log("You live in", lat, lng); } function onGeoError() { alert("Can't find you. No weather for you."); } navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError) // 사용..

Javascript 2022. 1. 17. 00:07

기본 세팅 // Setup 7.0 html js const toDoForm = document.getElementById("todo-form"); const toDoInput = toDoForm.querySelector("input"); const toDoList = document.getElementById("todo-list"); function handleToDoSubmit(e) { e.preventDefault(); // 새로고침 방지 const newTodo = toDoInput.value; toDoInput.value = ""; } toDoForm.addEventListener("submit", handleToDoSubmit) 목록 추가하기 // Adding ToDos 7.1 ✔ toDoInp..

Javascript 2022. 1. 15. 22:32

Math 객체 대표적인 메소드 함수명 설명 min() 인수로 전달받은 값 중 가장 작은 수 반환 max() 인수로 전달받은 값 중 가장 큰 수 반환 random() 무작위 숫자 반환 ( random()*10 = 0~9 ) round() 인수로 전달받은 값을 소수점 첫 번쨰 자리에서 반올림하여 반환 floor() 인수로 전달받은 값과 같거나 작은 수 중에서 가장 큰 정수 반환( floor(11.01) = 11 ) ceil() 인수로 전달받은 값과 같거나 큰 수 중에서 가장 작은 정수 반환( ceil(11.01) = 12 ) sin() 인수로 전달받은 값의 사인(sin)함수 값을 반환 PI 원주율 제공 index.html Log In 00:00:00 quotes.js const quotes = [ { quo..

Javascript 2022. 1. 11. 23:37

setInterval(함수, 시간) : 일정 시간 간격을 두고 함수를 실행하는 방법(밀리세컨드가 단위) setTimeout(함수, 시간) : 일정 시간 간격을 두고 함수를 실행하는 방법 function sayHello () { console.log("hello"); } setInterval(sayHello, 5000) // 5초에 한번씩 콘솔에 hello 출력 setTimeout(sayHello, 5000) // 5초 이후에 콘솔에 hello 출력 (그 이후엔 출력 되지 않음) Date 객체 new Date() 를 호출하면 새로운 Date 객체가 만들어짐. let now = new Date(); console.log(now); // 현재 날짜 및 시간이 보여짐 new Date(year, month, da..

Javascript 2022. 1. 11. 22:55

index.html Log In app.js const loginForm = document.querySelector("#login-form") const loginInput = document.querySelector("#login-form input"); const greeting = document.querySelector("#greeting"); const HIDDEN_CLASSNAME = "hidden"; //일반적으로 string만 포함된 변수는 대문자로 표기 const USERNAME_KEY = "username" function onLoginSubmit(e) { e.preventDefault(); // 브라우저가 기본 동작을 실행하지 못하게 막기 const username = loginIn..

Javascript 2022. 1. 4. 16:13

JS에서 HTML에 접근하는 방법 // The Document Object 3.0 // HTML in Javascript 3.1 // Searching For Elements 3.2 javascript에서 HTML을 불러올 수도 있고, javascript에서 수정도 가능 document.title = "lalala"; // title이 lalala로 바뀜 const something = document.getElementById("id이름"); // 해당 id값을 가진 태그를 가져옴(하나의 값) something.innerText = "HI~~"; // 태그 안에 text가 바뀜 const classNames = document.getElementsByClassName("class이름"); // 해당 c..

Javascript 2022. 1. 2. 21:38

함수 // Functions part One 2.7 // Functions part Two 2.8 // Recap 2.9 2.10 function sayHello(name, age) { console.log("Hello my name is " + name + " and I'm " + age); } sayHello("jui" , 10); // Hello my name is jui and I'm 10 sayHello("nico", 8); // Hello my name is nico and I'm 8 function plus(a,b){ console.log(a+b); } plus(7, 60); // 67 함수의 인자는 여러개가 와도 상관 x 대신 주어진 만큼의 인자를 넘겨주지 않으면 undifined 혹은 오..

Javascript 2021. 12. 28. 17:18