JavaScript/javascript
-
Javascript Javascript는 웹페이지를 조작하는 프로그래밍 언어이다. Javascript 런타임 : 런타임이란 프로그래밍 언어가 구동되는 환경을 말한다. : Javascript 런타임은 자바스크립트가 구동되는 환경을 말한다. 예) 크롬, 파이어폭스 등 여러 브라우저들과 Nodejs 를 자바스크립트 런타임이라고 한다. Javascript 동기(Synchronous) 동기 방식은 서버에 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행한다. Javascript 비동기(Asynchronous) 비동기 방식은 요청을 보냈을 때 응답과 상관없이 다음 동작을 수행한다. 보통의 웹에선 서버에 요청을 할때 비동기 방식으로 요청을 한다. 동기 방식으로 요청을 했을경우 응답이 올때까지 브라우저는 반응이 없고..
Javascript 를 이해하자Javascript Javascript는 웹페이지를 조작하는 프로그래밍 언어이다. Javascript 런타임 : 런타임이란 프로그래밍 언어가 구동되는 환경을 말한다. : Javascript 런타임은 자바스크립트가 구동되는 환경을 말한다. 예) 크롬, 파이어폭스 등 여러 브라우저들과 Nodejs 를 자바스크립트 런타임이라고 한다. Javascript 동기(Synchronous) 동기 방식은 서버에 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행한다. Javascript 비동기(Asynchronous) 비동기 방식은 요청을 보냈을 때 응답과 상관없이 다음 동작을 수행한다. 보통의 웹에선 서버에 요청을 할때 비동기 방식으로 요청을 한다. 동기 방식으로 요청을 했을경우 응답이 올때까지 브라우저는 반응이 없고..
2021.11.09 -
Window.Open: Window.Open은 지정한 URL을 새로운 창 혹은 현재 창에 불러오고 해당 Window 객체를 반환한다.: Javascript "Window" 객체의 open() 함수를 사용한다. 문법window.open(url, name[, specs][, replace]);* [] 대괄호의 속성은 선택사항 url : 새로운 창에 보여질 URL 주소, 값을 비워두면 빈창(about:blank) name : 새로운 창의 속성을 지정하거나 창의 이름을 지정한다. 기본값은 "_blank"_blank : 새로운 창에 열린다. 기본값이다. _parent : window.open을 호출한 부모창에서 열린다. _self : 현재 페이지를 대체한다._top : 로드된 프레임셋을 대체한다.특정..
Window.Open 과 Window.OpenerWindow.Open: Window.Open은 지정한 URL을 새로운 창 혹은 현재 창에 불러오고 해당 Window 객체를 반환한다.: Javascript "Window" 객체의 open() 함수를 사용한다. 문법window.open(url, name[, specs][, replace]);* [] 대괄호의 속성은 선택사항 url : 새로운 창에 보여질 URL 주소, 값을 비워두면 빈창(about:blank) name : 새로운 창의 속성을 지정하거나 창의 이름을 지정한다. 기본값은 "_blank"_blank : 새로운 창에 열린다. 기본값이다. _parent : window.open을 호출한 부모창에서 열린다. _self : 현재 페이지를 대체한다._top : 로드된 프레임셋을 대체한다.특정..
2021.11.09 -
Blob(Binary Large Object) JavaScrpt에서 Blob(Binary Large Object)은 이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 다룰 때 사용한다. 보통 데이터의 크기(Byte) 및 MIME 타입을 알아내거나, 데이터 송수신을 위한 작은 Blob 객체로 나누는 등의 작업에 사용한다. Blob 생성 const newBlob = new Blob(array, options); * array Blob 생성자의 첫번째 인수로 ArrayBuffer, ArrayBufferView, Blob(file), DomString 객체 또는 이러한 객체가 혼합된 Array를 사용할 수 있습니다. * options 옵션으로는 type 과 endings 를 설정할 수 있다. type ..
Blob(Binary Large Object)Blob(Binary Large Object) JavaScrpt에서 Blob(Binary Large Object)은 이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 다룰 때 사용한다. 보통 데이터의 크기(Byte) 및 MIME 타입을 알아내거나, 데이터 송수신을 위한 작은 Blob 객체로 나누는 등의 작업에 사용한다. Blob 생성 const newBlob = new Blob(array, options); * array Blob 생성자의 첫번째 인수로 ArrayBuffer, ArrayBufferView, Blob(file), DomString 객체 또는 이러한 객체가 혼합된 Array를 사용할 수 있습니다. * options 옵션으로는 type 과 endings 를 설정할 수 있다. type ..
2021.10.27 -
Document(문서) Object(객체) Model(모델) - 문서객체모델 문서객체란 , 와 같은 html 문서의 태그들을 JavaScript가 이해하고 이용할 수 있는 객체(Object)로 만들면 그것을 문서 객체라고 합니다. Model 은 문서 객체를 '인식하는 방식'이라고 해석할수 있다. 쉽게 말해서, DOM은 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식을 의미한다. 더 쉽게 말하면 HTML 문서에 접근하기 위한 일종의 인터페이스이다. 결론은 DOM은 자바스크립트와 HTML을 이어주는 공간으로 내가 작성한 HTML 을 자바스크립트가 이해할 수 있도록 객체(Object)로 변환하는 것이다. 여기서 DOM은 Tree 형태의 노드 구조이다. 위 내용을 보면 HTML 코드로 트리구조를..
DOM(Document Object Model)Document(문서) Object(객체) Model(모델) - 문서객체모델 문서객체란 , 와 같은 html 문서의 태그들을 JavaScript가 이해하고 이용할 수 있는 객체(Object)로 만들면 그것을 문서 객체라고 합니다. Model 은 문서 객체를 '인식하는 방식'이라고 해석할수 있다. 쉽게 말해서, DOM은 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식을 의미한다. 더 쉽게 말하면 HTML 문서에 접근하기 위한 일종의 인터페이스이다. 결론은 DOM은 자바스크립트와 HTML을 이어주는 공간으로 내가 작성한 HTML 을 자바스크립트가 이해할 수 있도록 객체(Object)로 변환하는 것이다. 여기서 DOM은 Tree 형태의 노드 구조이다. 위 내용을 보면 HTML 코드로 트리구조를..
2021.10.27 -
Promise 프로미스는 자바스크립트 비동기 처리에 사용되는 객체 프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용합니다. 일반적으로 웹 어플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 사용 Promise를 사용하지 않고 일반 ajax 코드 function getData(callbackFunc){ $.get('url 주소', function(response){ callbackFunc(response); }) } getData(function(tableData){ console.log(tableData); }); 위 내용을 Promise 로 사용 function getData(callback){ return new Promise(function(resolve, rej..
PromisePromise 프로미스는 자바스크립트 비동기 처리에 사용되는 객체 프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용합니다. 일반적으로 웹 어플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 사용 Promise를 사용하지 않고 일반 ajax 코드 function getData(callbackFunc){ $.get('url 주소', function(response){ callbackFunc(response); }) } getData(function(tableData){ console.log(tableData); }); 위 내용을 Promise 로 사용 function getData(callback){ return new Promise(function(resolve, rej..
2021.10.27 -
1. 화살표 함수 함수 표현식을 화살표 함수로 표현할 수 있다. 화살표 함수가 추가되어 ES5의 함수 표현식보다 간결하고 가독성 및 유지보수성이 올라간다. 함수의 본문에 return만 있을 경우 return 과 {} 를 생략할 수 있다. //일반적인 자바스크립트 함수(ES5) function function_test(a, b) { return a + b; } // 화살표 함수(ES6) (a, b) => { return a + b; } // 화살표 함수(ES6) - return, {} 생략 (a, b) => a + b; 2. 템플릿 리터럴(Template literals) 템플릿 리터럴은 기존 자바스크립트에서 문자열을 표시할 때 사용하는 작은 따옴표(')나 큰 따옴표(') 대신 백틱(')을 사용하는..
자바스크립트 ES6 문법1. 화살표 함수 함수 표현식을 화살표 함수로 표현할 수 있다. 화살표 함수가 추가되어 ES5의 함수 표현식보다 간결하고 가독성 및 유지보수성이 올라간다. 함수의 본문에 return만 있을 경우 return 과 {} 를 생략할 수 있다. //일반적인 자바스크립트 함수(ES5) function function_test(a, b) { return a + b; } // 화살표 함수(ES6) (a, b) => { return a + b; } // 화살표 함수(ES6) - return, {} 생략 (a, b) => a + b; 2. 템플릿 리터럴(Template literals) 템플릿 리터럴은 기존 자바스크립트에서 문자열을 표시할 때 사용하는 작은 따옴표(')나 큰 따옴표(') 대신 백틱(')을 사용하는..
2021.10.27