Coding Story

JS Casino html Random Number Game Generate a Number between 0 and Guess the number: play! js const form = document.querySelector(".numForm"), range = document.querySelector(".rangeInput"), inputNum = form.querySelector(".inputNum"), maxNum = document.querySelector(".maxNum"), paintChose = document.querySelector(".paintChose"), paintResult = document.querySelector(".paintResult"); function result..

todo.js const toDoForm = document.querySelector(".js-toDoForm"), toDoInput = toDoForm.querySelector("input"), toDoList = document.querySelector(".js-toDoList"); const TODOS_LS='toDos'; let toDos = []; function deleteTodo(event){ const btn = event.target; const li = btn.parentNode; //버튼에 대한 부모 요소 toDoList.removeChild(li); //쟈식 li태그 제거 const cleanToDos = toDos.filter(function(toDo){ return toDo.id..

select에서 option 값 선택하기 html --- Choose Your Country --- Korea Greece Turkey Finland js const select = document.querySelector(".select"); const currentValue = select.options[select.selectedIndex].value; 1. select에 클래스를 만들어 querySelector로 불러온다. 2. option들엔 각각의 인덱스가 있는데, 선택된 인덱스의 option의 value를 currentValue에 저장한다. LocalStorage에 저장하기 localStorage.setItem(key, value) const COUNTRY_LS="Country"; local..

event.preventDefault 보통 이벤트는 root 에서 일어난다. event는 일종의 거품 같은 것이다. 올라가면서 다른 모든것들이 이벤트에 반응하게 된다. form을 제출하는 이벤트가 발생하면 이벤트는 document까지 계속 위로 올라간다. 그 document는 프로그램 되어진대로 다른 곳으로 가고, 페이지는 새로고침 된다. event.preventDefault()는 이런 이벤트의 디폴트 동작을 막는 방법이다. 이경우 엔터를 눌러 submit을 해도 다른곳으로 가지 않는다. local stroage 는 URLs를 기초로 동작한다. 때문에 한 웹사이트가 다른 웹사이트의 local storage에 접근하지 못한다. document.createElement() 무언가를 생성하기를 원할때 사용한다..

setInterval(fn, 1000) 첫번째 인자로 실행할 함수를 받고, 두번째 인자로 그 함수를 실행하고 싶은 시간(실행할 시간 간격)을 받음. (단위는 millisecond) Element 반환하기 querySelector: 첫번째 것을 가져온다. querySelectorAll: 모든걸 가져온다. 클래스명에 따른 모든 엘리먼트들의 배열을 가져옴. getElementByID: Id로 엘리먼트를 가져온다. getElementByTagname: 태그로 엘리먼트를 가져온다(input, body, html, div, section..) local storage 자바스크립트 정보를 유저 컴퓨터에 저장하는 방법! 크롬 Application 창 -> Local Storage localStorage.setItem(..

IF-ELSE 로 이벤트에 반응하는 로직을 짜는 법 const title=document.querySelector("#title"); const BASE_COLOR="rgb(52, 73, 94)"; const OTHER_COLOR="#7F8C8D"; function handleClick(){ const currentColor=title.style.color; if (currentColor==BASE_COLOR){ title.style.color = OTHER_COLOR; }else{ title.style.color=BASE_COLOR; } } function init(){ title.style.color=BASE_COLOR; title.addEventListener("click", handleClick)..

css와 같이 자바스크립트에서도 element를 선택할 수 있다. javascript 에서 id로 무언가 선택할 때는 document.getElementById 라고 쓴다. 1. id 속성을 가진 요소를 찾아 객체 반환하기 const title = document.getElementById("title"); 2. 내용수정 title.innerHTML = "Hi! From JS" 3.색상변경 title.style.color = "red" 4. 타이틀 변경 document.title = 'I own you now' js로 객체화 하는 것을 통해 각종 html 문서를 감지하고 추가하고 변경하는 등의 것들을 할 수 있다. document.queryselector() queryselector는 노드의 첫번째 자식..

What is Javascript? 백엔드로는 python, ruby, asp, java 등등이 있지만 프론트엔드의 경우 자바스크립트가 유일한 프로그램 언어다. 모두 같은 언어로 얘기할 수 있어 분열이 없는 것이 장점이고 단점은 바꾸고 싶을 때 못바꾸거나, 업데이트 못하거나, 할 수 없는게 있을 수 있다는 것이다. 인터넷이 빨리 발전하는 만큼 자바스크립트도 빠르게 발전했고 막강해지고 영향력 커졌다. =>개발자가 할 수 있는 일이 점점 더 늘어남 javascript로 웹, 웹앱, 모바일 어플리케이션, nateve application, 비디오 게임, 데스크톱 앱 등을 만들 수 있다. javascript로 만들어진 데스크톱앱으로는 vsc, atom이 있다. javascript의 versions- es5, e..