자바스크립트 (11) 썸네일형 리스트형 자바스크립트(JavaScript)/웹(Web) - AJAX 글에 오류가 있을 수 있으니 있다면 알려주시기 바랍니다.! AJAX ajax는 Asynchronous JavaScript and XML약자이며 비동기적으로 자바스크립트를 이용하여 서버와 통신하는 기술입니다. 예전에는 XML을 많이 사용했지만 요즘은 더 좋은 JSON을 사용하여 데이터를 통신합니다. 서버와 통신하면서 페이지 내용을 가져와 바뀌어야 하면 페이지가 새로 고침 되어야 했습니다. 하지만 ajax를 이용하면 비동기로 서버와 통신하여 DOM을 이용해 페이지를 그대로 사용하면서 일부를 실시간으로 변경합니다. 메서드 알아보기 open 메서드는 요청을 초기화하는 데 사용됩니다. 첫 번째 인수는 서버에 요청하는 요청 메서드입니다. GET, POST, PUT, DELETE 등이 있습니다. 두 번째 인수는 서버.. 자바스크립트(JavaScript) - Promise 글에 오류가 있을 수 있으니 있다면 알려주시기 바랍니다! 비동기 작업을 할 때 콜백을 사용합니다. 실행 순서가 보장받아야 할 때는 콜백을 중첩하여 사용하기도 합니다. 콜백을 중첩해서 사용할때 보기가 힘들고 이해가 어려울 때가 있습니다. 이 문제를 해결할 수 있는 방법이 Promise입니다. Promise는 비동기 작업에서의 콜백을 좀 더 간결하게 작성할 수 있게 해 주며 실행 순서를 보장받을 수 있도록 할 수도 있습니다. 프로미스(Promise) Promise는 peding, fulfilled, rejected 3개의 상태로 구분됩니다. peding 상태는 아직 Promise 작업이 끝나지 않은 상태 fulfilled 상태는 Promise 작업이 끝낸 상태 rejected 상태는 Promise 작업 중 .. 자바스크립트(JavaScript)/웹(Web) - 이벤트 글에 오류가 있을 수 있으니 있다면 알려주시기 바랍니다.! html 요소에 자바스크립트를 이용하여 이벤트를 처리하는 법을 간단히 알아보겠습니다. 이벤트는 특정 상황에대한 행동을 뜻합니다. 자바스크립트에서 특정 상황이 되었을 때 지정한 콜백 함수를 호출합니다. 이벤트 처리 방법 이벤트를 처리하는 방법은 여러개가 있습니다. onclick 속성을 이용해 이벤트 처리 DOM 객체로 요소를 가져와 onclick 프로퍼티로 이벤트 처리 addEventListener() 메서드를 이용해 이벤트 처리 클릭! 클릭2! 클릭3! html 요소에서 onclick 속성을 이용해서 이벤트를 처리하면 html와 자바스크립트가 섞여있어서 유지보수성이 떨어집니다. 또한 이벤트 처리를 위해 함수를 지정할 때 여러 개가 아닌 하나만 된.. 자바스크립트(JavaScript) - 유사 배열 글에 오류가 있을 수 있으니 있다면 알려주시기 바랍니다! 자바스크립트에는 유사 배열이라는 것이 존재합니다. 배열이 아니지만 배열을 흉내 내는 것이죠. 객체를 유사 배열로 이용하여 반복 처리를 가능캐 할 수 있는 유사 배열을 간단히 알아보겠습니다. 유사 배열 유사 배열과 배열의 차이점은 객체에 length 프로퍼티와 프로퍼티 이름이 숫자 0으로 시작하는 프로퍼티가 있다면 유사 배열입니다. Argument 객체와 DOM에서 요소를 가져올 때 NodeList의 경우도 유사 배열 객체입니다. let a = ["a", "b", "c"]; let b = { 0: "a", 1: "b", 2: "c", length: 3 }; 이 유사 배열 객체는 Array의 프로토타입에 있는 메서드들을 사용하지 못하지만 for문, f.. 자바스크립트(JavaScript) - 상속 상속은 기존에 있던 프로퍼티와 메소드를 자식이 되는 객체에게 물려주는 것입니다. 자바스크립트에서 객체에 상속을 해야 한다면 프로토타입을 사용해서 프로퍼티와 메소드를 상속하기도 합니다. 프로토타입을 이용해서 상속을 하는 것이 아닌 객체 상속을 알아보도록 하겠습니다. 객체 상속 객체에 있는 프로퍼티와 메소드를 다른 객체에 상속시키려면 call(), apply() 메소드를 사용하여 상속을 시킬 수 있습니다. function a(name, list) { this.name = name; this.show = function() { console.log(name); }; } a.prototype.ab = function () { console.log(this.name); }; function b() { a.call.. 자바스크립트(JavaScript) - 프로토타입(Prototype) 글에 오류가 있을 수도 있으니 알려주시면 감사하겠습니다. 프로토타입(prototype) 객체 자바스크립트에서 프로토타입 객체는 중요한 객체라고 할 수 있습니다. 자바스크립트는 프로토타입 기반 언어이기 때문입니다. 프로토타입 객체를 통해 메소드와 속성을 상속받을 수 있습니다. ES6에서는 좀 더 쉽게 상속을 할 수 있는 클래스가 있습니다. 자바스크립트의 프로토타입 객체는 다른 객체에 프로퍼티를 공유하는 객체입니다. 함수 객체에는 prototype 프로퍼티와 [[Prototype]] 프로퍼티를 가지고 있습니다. 일반 객체에는 [[Prototype]] 프로퍼티만 가지고 있습니다. [[Prototype]]은 자바스크립트의 내부 슬릇이라는 내부 프로퍼티이며 직접적으로 접근이 불가능합니다. 하지만 요즘 브라우저에서.. 자바스크립트(JavaScript) - Execution Context(실행 문맥)과 코드 실행 및 내부 동작 원리 ECMAScript2015(ES6)을 중점으로 다루고 있습니다. 참고하시기 바랍니다. 글에 오류가 있을 수도 있으니 알려주시면 감사하겠습니다. 실행 문맥(Execution Context) 실행 문맥은 실행이 가능한 코드들이 평가 또는 실행되고 관리되는 영역이며 코드에 대한 정보들이 저장되어있다. 여기서 평가는 코드가 전역 변수인지 지역 변수인지 변수의 값이 무엇인지 범위는 어디까지인지 코드를 상황에 맞게 파악하는 것이라고 보면 될 것 같다. Execution Context(실행 문맥)가 가지고 있는 구성요소(ES5.1) 렉시컬 환경(LexicalEnvironment) 변수 환경(VariableEnvironment) 디스 바인딩(ThisBinding) LexicalEnvironment은 자바스크립트 코드를.. 자바스크립트(JavaScript) - 템플릿 리터럴(Template literals) ES6에서 새로 생긴 문자열 표현 방법입니다. 기존 문자열 표현에서 여러 줄을 표현하려면 이스케이프 시퀀스를 쓰고 문자열에 변수에 있는 값을 사용하려면 변수를 사용하고 + 를 사용해 문자열을 연결해주어야 했습니다. 새로 생긴 템플릿 리터럴을 사용하면 간편하게 표현할 수 있습니다. var bear = "bear"; var text = `곰은 ${bear} 이다.`; console.log(text); // -> 곰은 bear 이다. 이제는 + 를 쓰지 않고 ${ }를 통해서 변수나 함수를 호출하여 값을 받을 수 있습니다. ${ }를 플레이스 홀더라고 부릅니다. 템플릿 리터럴을 사용하려면 ` `(백틱) 물결표 키를 누르면 나타나는 백틱을 사용해야 합니다. 기존에는 여러 줄을 표현할 때 사용했던 \n를 쓰지 않.. 이전 1 2 다음