Coding Story

더보기 참고 자바스크립트의 탄생 1955년, 넷스케이프 커뮤니케이션즈는 웹페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경량 프로그래밍 언어를 도입하기로 결정하고 그래서 탄생한것이 브렌던 아이크(Brendan Eich)가 개발한 자바스크립트다. 자바스크립트의 표준화 1966년 마이크로소프트에서 출시한 자바스크립트의 파생버전인 "JScript"와 자바스크립트는 표준화되지 못하고 적당히 호환되었고, 두 경쟁사가 자사의 시장 점유율을 높이기 위해 브라우저에서만 동작하는 기능을 추가하기 시작했다. ->이로 인해 브라우저에 따라 웹페이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈가 발생 이에 ECMA 인터내셔널에 자바스크립트 표준화를 요청하며 자바스크립트는 ECMAScript 로 명명 된다. ..

더보기 참고 프로그래밍이란? 프로그래밍이란 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션이다. 정확하고 상세하게 요구사항을 기계에게 설명하는 작업이며, 그 결과물이 코드이다. 이 때 문제 해결 능력이 요구되고 이를 위해 필요한 것이 Computational thinking(컴퓨팅 사고)이다. 컴퓨터와 사람은 사고, 인지 방식이 다르기 때문에 컴퓨터의 관점에서 문제를 사고 해야한다. -> 논리적, 수학적 사고 필요 프로그래밍 언어 사람이 약속된 구문으로 구성된 프로그래밍 언어를 사용해 프로그램을 작성한 후, 그것을 컴퓨터가 이해할 수 있는 기계어로 변환하는 번역기(컴파일러 or 인터프리터)를 이용한다. 프로그래밍언어 기계어 사람 ㅡㅡㅡㅡ> 컴파일러 ㅡㅡㅡㅡ> 컴퓨터 프로그래밍 언어란 컴퓨터의 대화(명령)에..

quotes.js const quotes = [ { quote: "quote1", author : "author1", }, { quote:"quote2", author : "author2", }, { quote:"quote3", author : "author3", } ]; const quote = document.querySelector("#quote span:first-child"); const author = document.querySelector("#quote span:last-child"); const todaysQuote = quotes[Math.floor(Math.random()*quotes.length)]; quote.innerText = todaysQuote.quote; author.in..

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는 노드의 첫번째 자식..