본문 바로가기

📒 JavaScript29

JavaScript 프로토타입(prototype) 이해 Object (객체) 서로 연관된 변수와 함수를 그룹핑해서 이름을 붙인 것 var memberObject = { tami: 'name', developer: 'java', age:'25', } this 메서드가 자신이 속해있는 객체를 가리키는 키워드 객체가 내부적으로 가지고 있는 값을 참조할 수 있음 var kim = { name: 'kim', first:10, second:20, sum: function(){ return this.first+this.second; } } console.log(kim.sum()); //30 위의 예시의 객체는 수작업으로 만든 객체 객체를 찍어내는 동작을 따로 구현 하여 재사용 가능하게 해야함 Prototype javascript 는 prototype based langu.. 2021. 3. 10.

[JavaScript] Class 와 상속 📌 class 관련 있는 함수와 변수를 묶어놓은 것 상속과 다양성일어날 수 있음 - fields - methods * data class : methods가 없는 fields( data)만 있는 class class object - template 템플릿 - declare once - no data in (데이터는 없고 만들 수 있는 틀) class 를 이용해서 만든 것 = 객체 javascript 의 class javascript 는 객체 지향언어 object가 상호작용하며 돌아가는 application - ECMA Script 6버전에서 추가된 기능 - ES6 에서 생김 - class가 있기 전에는 constructor function을 이용해 template을 만들고 정의하여 사용했었다. - 기존에.. 2021. 3. 10.

[자바스크립트] 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.

Node.JS express로 서버 구성하기 프레임워크를 왜 사용할까? Framework 반복적으로 어디에서나 등장하는 일을 더 적은 코드로 많은 일을 안전하게 처리하기 위한 도구 미리 정성껏 구현해놓은 기능을 사용함 🤔 개발자는 web에서 반복적으로 어디에서나 일어나는 일을 처리하기 위해 아래의 일들을 프레임워크로 수행할 수 있다. - url 파라미터를 통해 전달된 데이터를 받아 처리하는 일 - 정적인 js파일, image파일들을 컴퓨터에서 읽어와 사용자에게 제공 - 로그인 기능 구현 - 보안적인 이슈 해결 express node.js 의 보편적 웹프레임워크중 하나 배우기 어렵지만, 사용하기 좋은 프레임워크 중 하나 Node.js 서버사이드에서 동작하는 자바스크립트 실행환경 서버측의 표준 기능을 구현한 라이브러리등 대거 포함 nvm: 패키지 관리.. 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.

이전 1 2 3 4 다음

티스토리툴바