하루 하루

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

재무제표 = 회사가 작성하는 가계부로, 3가지로 구성된다. 0. 재무제표 구성 1. 손익계산서 2. 대차대조표 3. 현금흐름표 1. 손익계산서 얼마를 벌어서 얼마를 지출했는지 3개월 마다 작성을 한다. -> 매출액을 공이 있는 사람들 사이에서 나눠 가지는 것. 매출액 ( 회사 물건을 얼마나 팔았는지 ) - 매출원가 ( 해당 물건을 만들기 위해 든 재료비 ) ______________________________________________________ = 매출총이익 (매출에서 원재료값을 제외한 금액 ) - 판매비와 관리비 _______________________________________________________ =영업이익 ( 순수하게 영업으로 벌어들인 금액 ) +기타 수익 - 기타 비용 +금융..

통화스와프는 말그대로 국가간의 통화를 바꾸는 것이다. 좀 더 자세하게 이야기하면, 통화스와프 계약 체결 당시의 환율로 일정 기간이 지난 이후에 원금을 재교환하는 것이다. 정부에서는 다음의 목적을 이유로 어느 정도 외환보유액을 유지해야 한다. 1. 긴급사태 발생으로 금융기관 등 경제주체가 해외차입을 못해 대외결제가 어려워지는 상황에 대비 2. 외환시장에 외화가 부족해 환율이 급격하게 상승할 경우 시장안정을 위해 사용 현재 금융·외환시장 위기가 발생할 가능성이 높아지면서 위기 발생시 , 외국인 투자자금이 대거 빠져나가면서 외화가 급박하게 필요해질 상황을 대비할 필요가 생겼다. 따라서, 한국은행은 경제적인 위험으로 외화가 급박하게 필요한 상황일 때를 대비하기 위해 '600억 달러' 규모의 통화 스와프를 미국과..

1) ELS/ DLS ELS ( Equity Linked Securities : 주가연계 증권 ) - 주가 지수나 개별 주식이 정해진 조건을 충족하면 높은 수익을 보장하고, 조건을 충족하지 않으면 원금 손실이 발생할 수 있는 상품 DLS ( Derivative Linked Securities : 파생결합증권 ) - ELS 와 다르게 원유, 금(金), 통화, 금리, 신용위험 등을 기초 자산으로 해 해당 자산이 정해진 조건을 충족하면 높은 수익을 보장하고, 조건을 충족하지 않으면 원금 손실이 발생할 수 있는 상품 DLS와 ELS 는 예측이 잘 들어맞으면 상대적으로 높은 수익률을 기대할 수 있고, 다양한 구조로 상품 설계가 가능하기 때문에 기초자산이나 지급 조건을 바꾸면 변화무쌍한 시장 상황에 유연하게 대처할..