하루 하루

3-7 Making a To Do List part Three 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); const cleanToDos = toDos.filter(function(todo){ return todo.id ..

3-6 Making a To Do List part Two www.youtu.be/JEbOaI_0phc const toDoForm = document.querySelector(".js-toDoForm"), toDoInput = toDoForm.querySelector("input"), toDoList = document.querySelector(".js-toDoList"); const TODOS_LS='toDos'; const toDos =[]; function saveToDos(){ localStorage.setItem(TODOS_LS,JSON.stringify(toDos)); } function paintToDo(text){ const li = document.createElement("li"); c..

3-5 Making a To Do List part One www.youtu.be/YD1yDErhMa4 const toDoForm = document.querySelector(".js-toDoForm"), toDoInput = toDoForm.querySelector("input"), toDoList = document.querySelector(".js-toDoList"); const TODOS_LS='toDos'; function paintToDo(text){ console.log(text); const li = document.createElement("li"); /*delete 버튼 생성 */ const delBtn = document.createElement("button"); delBtn.inn..

본 내용은 https://programmers.co.kr/learn/courses/10 강의의 내용들을 한 번에 볼 수 있도록 한 것으로 자세한 내용은 본 강의를 참고하시길 바랍니다. Part5. Extra 1. script 위치에 따른 실행 • 브라우저는 HTML 문서를 읽으면서 script tag를 실행함 - HTML 문서 Element 파싱 보다 스크립트가 먼저 실행되면 접근되지 않음 - 페이지의 상단의 script 에서 이후 파싱될 Element에 접근하고 싶다면 onload 등의 eventhandler로 실행되도록 해야 함 • async, defer 속성을 이용하면 스크립트의 실행과 문서의 로딩을 동시에 진행할 수 있음(비 동기적) 2. Chrome 디버거 활용 [ 프로그램 오류의 종류 ] - ..

본 내용은 https://programmers.co.kr/learn/courses/10 강의의 내용들을 한 번에 볼 수 있도록 한 것으로 자세한 내용은 본 강의를 참고하시길 바랍니다. Part4. Networking 1. AJAX - Request 보내기 [ AJAX : Asynchronous Javascript and XML ] -> 더 나은 사요영험 브라우저에서 페이지를 이동하지 않고 자바스크립트를 통해 HTTP Request를 보내고 받아 JS에서 처리할 수 있음 1. var req = new XMLHttpRequest(); - AJAX를 위한 객체 생성 : HTTP 요청을 만들 수 있는 새로운 객체를 생성하는 명령 2. req.open("GET", "./data.txt"); - 요청의 방식과 UR..

본 내용은 https://programmers.co.kr/learn/courses/10 강의의 내용들을 한 번에 볼 수 있도록 한 것으로 자세한 내용은 본 강의를 참고하시길 바랍니다. Part3. Event + JS 1. Callback function 조건을 등록해 두고 그 조건을 만족한 경우, 나중에 호출되는 함수 [ 시간을 기반으로 콜백함수를 호출하는 명령 ] • setTimeout( function, time ) : time 시간이 지난 경우 function 함수를 콜백하는 함수 ( 1/1000초 단위 / timerId를 반환 ) • clearTimeout( timerId ) : timerId를 인자로 받아 function호출을 취소 ( 이미 호출시 해당 x ) • setInterval( func..

본 내용은 https://programmers.co.kr/learn/courses/10 강의의 내용들을 한 번에 볼 수 있도록 한 것으로 자세한 내용은 본 강의를 참고하시길 바랍니다. Part2. DOM + JS 1. DOM 소개 및 탐색 [ DOM, Document Object Model ] • 컴퓨터가 문서를 잘 처리할 수 있도록 문서의 구조를 약속한 것 ( Tree 형태 ) • document object - javascript에서 document로 접근 가능 - children에는 문서의 최상위 엘리먼트인 html이 존재 [ Element API ] • 자식, 부모 엘리먼트에 접근하는 방법 - .children : 해당 object의 자식 노드에 대한 배열 - .parentNode : 부모 노드 ..

3-1 Making a JS Clock part One www.youtu.be/f0nBj0YMBUI const clockContainer = document.querySelector(".js-clock"), clockTitle = clockContainer.querySelector("h1"); function getTime(){ const date = new Date(); const minutes = date.getMinutes(); const hours = date.getHours(); clockTitle.innerText = `${hours}:${minutes}`; } function init(){ getTime(); } init(); 3-2 Making a JS Clock part Two www.y..

2-4 Events and event handlers www.youtu.be/LnuLDGO5848 * 브라우저 객체 모델(BOM: browser object model ) JS 로 브라우저의 정보에 접근하거나 기능을 제어할 때 사용하는 객체 모델 -> Window 객체 function handleResize () { console.log( " I have been resized"); } window.addEventListener ( "resize" , handleResize ); window 창이 resize 되면 handleResize 함수가 호출된다. 주의할 점은 window.addEventListener ( "resize" , handleResize() ); 와 같이 함수와 같이 ( )를 쓰게 되면..

2-2 JS DOM Functions www.youtu.be/VBmQUMUGznU Document 관련한 추가 정보 사이트 http://tcpschool.com/javascript/js_dom_document 코딩교육 티씨피스쿨 4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등 tcpschool.com 2-3 Modifying the DOM with JS www.youtu.be/JscDdICRvgo

2-1 너의 첫번째 함수! (Your first JS Function) www.youtu.be/Q0S6l_gkpeU 2.1.1 More Function Fun www.youtu.be/mLTUtMARkqc function sayHello (name, age ){ console.log(` Hello ${name} you are ${age} years old`); } sayHello("Nicolas", 14 ) const calculator = { plus: function( a,b){ return a+b; } } const plus = calculator.plus(5,5); console.log(plus); // 5

1-8 Data Types on JS 1-9 Organizing Data with Arrays const dayOfWeek = ["M","T","W","T","F","S","S",45,true]; 1-10 Organizing Data with Objects const nicoInfo = { name:"Nico", age : 33, gender:"Male", favMovie = ["Intern","Oldboy"], favFood = [ { name : "Kimchi", fatty : false; }, { name : "Cheese burger", fatty : true; } ] }; console.log( nicoInfo.gender );

1-6 Your first JS Variable(변수!) 1-7 let, const, var const a = 221; let b = a -5 ; var c = 3; c = 5; b = 5 ; a = 4 ; // error 발생

1-5 Hello World with Javascript 1-5-1 What are we learning

1-4 VanillaJS

1-1 Why JS? : JS for Beginners 1-2 Super Powers of JS 1-3 ES5, ES6 ES....WTF !?!?!

www.youtu.be/wUHncG3VwPw www.youtu.be/wUHncG3VwPw