반응형 자바스크립트7 [자바스크립트] fetch() API 함수로 호출하기 AJAX 웹브라우저에서 javascript를 이용해 웹서버에 접속, 정보를 가져오기 페에지 내의 정보들을 부분적으로 변경하고 가져올 수 있는 기술 필요한 정보만을 부분적으로 정교하게 가져오는 기술 필요한 부분만 부분적으로 웹페이지를 로딩할 수 있어 자원 절약 가능 그중 최신인, fetch API 단계별로 배워보기 step by step🧦 fetch('javascript') 클라이언트 -> 서버 웹브라우저! 'javascript'라는 파일을 서버에게 응답해줘 fuunction callbackme(){ } fetch('html').then(callbackme); 서버가 응답할 때 까지 다른 일을 할 수 있도록 then을 사용 'html' 파일을 서버에게 응답해주고 응답이 끝나면 callbackme라는 함수를.. 2021. 2. 26. 자바스크립트의 Promise()로 callback지옥 벗어나기 동기적 실행 : 코드가 순서에 맞춰서 자동적으로 실행됨 hoisting : var변수, function declaration( 함수선언)들이자동적으로 제일 위에 선언됨 callback 함수 : 내가 전달해 준 함수를 나중에 실행해줘 * setTimeout( hadler , timeout) - handler : callback 함수 - timeout: 지정된 시간 ms 단위 (1초 1000) 비동기 실행 (실습) js엔진은 코드를 제일 위에서부터 아래로 실행 console.log('1'); setTimeout(function(){ console.log(2); },1000) console.log('3'); //화살표 함수로 표현 가능 console.log('1'); setTimeout(()=> console.. 2021. 2. 25. Javascript JSON.parse(), JSON.stringify() 사용하는법 HTTP 웹사이트에서 사용되느 링크, 문서, 이미지 client -서버 서버에서 데이터를 request (요청), response (응답)하는 통신 규약 AJAX (Asynchronous JS and XML) 웹페이지에서 데이터를 동적으로 서버에게 데이터를 주고받을 수 있는 기술 XHR (XML HTTP Request) : 브라우저에서 제공하는 object - XML markup 언어중 하나로 html과 마찬가지로 데이터를 표현할 수 있는 방법 -> 불필요한 태그들 많이 들어가 가독성이 떨어짐 - fetch() API JSON (JS object Notation) Object{ key:value} : 브라우저, 모바일에서 서버와 통신할 때 , (통신 아니어도)object를 파일시스템에 저장할 때 - 데이.. 2021. 2. 23. 자바스크립트의 객체 prototype 은 생성된 객체들이 여러개 잇어도 동일한 메모리 공간에서 효율적으로 재사용됨 객체들이 같은 공간을 share하는 것 prototype ❖ this 로 function 정의 했을 경우 const Health = function(name, healthTime) { this.name = name; this.healthTime = healthTime; this.showHealth = function() { return this.name + this.lastTime + "운동완료"; } } const h1 = new Health("tami", "12:12"); const h2 = new Health("recoder", "02:12"); h1.showHealth === h2.showHealth /.. 2021. 2. 22. 이벤트 버블링, 이벤트 캡쳐링 - DOM의 이벤트 핸들링 div, body,html 에 모두 click 이벤트가 있을 때 ❖ currentTarget & target currentTarget 이벤트의 진짜 주인 target 이 이벤트가 누구떄문에 실행이 됐는가 👉 이벤트는 순차적으로 연좌제로 실행됨 따라서 이벤트는 event-flow 를 가짐 ❖ CapturePhase & BubblePhase capture phase porpoagate-up 브라우저에서 가장 가까운것부터 실행 html > body > div Target pahse porpoagate-down 당사자 실행 Bubble phase propogate-down 다시 내려가며 실행 쓸 데 없는 중복 이벤트가 실행되게 됨 html > body > div> body > html 📌 ex) 예시로 공부하기.. 2021. 2. 22. [JavaScript ] 이벤트핸들링 event handler = event listner = event 콜백함수 : 이벤트가 일어났을때 수행할 함수들 ❖ addEventListner() '이벤트 타입' , 함수 , option ({}, true,,,) inputElm.addEventListner('click', funcition(){ alert('누름') }); inputElm에 click 이벤트가 실행되면 alert 함수 실행 😉 자주 사용하는 event 종류 load 파일 로드가 끝났을 떄 scroll user 스크롤 했을 때 resize 화면 사이즈 줄이고 키울때 blur 어떤 요소 focus했다 다른 요소 선택할 때 focus 어떤 요소 focus상태일때 change ipnut, text 등의 값이 바꼈을 떄 submit submi.. 2021. 2. 16. [JavaScript] DOM이란 무엇인가? 웹페이지 html, css : 보여지는 것 javascript: 보여지는것 컨트롤 하기 위함 html child1 child2 child3 javascript const child1 ={ nonType:1, nodeName: 'div' childNode=[], arrtibutes:[] } const parent = docuemnt.querySelector('parend') parent.firstchild // #text parent.childNodes // [div] prenth.firstElementHild; // child1 html은 javascript 에게 그저 문자일 뿐! -> ❖ DOM ( Document Object Model ) html을 javascript 가 이해할 수 있는 object.. 2021. 2. 16. 이전 1 다음 반응형
