Front-End: Web/JavaScript (85) 썸네일형 리스트형 객체와 생성자 함수 1. 자바스크립트 객체의 특징 자바스크립트에서 객체는 객체지향 프로그래밍 언어의 객체와 조금 다른 점이 있다. 1.1 prototype 기반의 언어 Java와 C++은 클래스(Class) 기반의 객체지향 언어인 반면, JS는 프로토타입(Prototype) 기반의 객체지향 언어이다. Class 기반의 객체지향 언어는 class라는 껍데기를 정의하고 이를 통해 객체를 생성한다. 하지만 프로토타입 기반의 객체지향 언어는 class 정의없이도 객체를 생성할 수 있다. 물론 생성자 함수를 톻애 class를 따라할 순 있는데, ES6부터는 정식으로 class 문법이 추가되었다. 1.2 캡슐화와 상속 지원 객체지향 프로그래밍에서 중요한 특징 중 하나는 캡슐화와 상속이라는 개념이다. JS는 class가 없어도 클로저를.. [작성중]프로토타입(Prototype) 프로토타입 자바스크립트는 프로토타입 기반 언어 Java와 C++은 클래스 기반의 객체지향 언어인 반면, Javascript는 프로토타입 기반의 객체지향 언어이다. 모든 객체들이 메소드와 속성들을 상속 받기 위해 프로토타입 객체를 가진다. 클래스 기반의 객체지향 언어는 class라는 껍데기를 정의하고 이를 통해 객체를 생성한다. 하지만 프로토타입 기반의 객체지향 언어는 class 정의 없이도 객체를 생성할 수 있다. 물론 생성자 함수를 통해 class를 따라할 순 있지만, ES6부터는 정식으로 자바스크립트에서 class가 추가되었다. 프로토타입 객체는 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수 있는데, 이를 프로토타입 체인(prototype chain)이라 부른다. 다른 객체에 정의된 메소드.. 이벤트의 모든 것: on, addListener, onclick, addEventListener 노드 교과서 4장에서 addEventListener 메서드를 사용하여 클릭 이벤트를 작성하던 중, 예전에 클릭 이벤트 코드를 작성할 때 onclick 혹은 .on('click', listener) 메서드를 사용했던 기억이 떠올랐다. 그러다 이 이벤트들 사이에 어떤 차이가 있는지 궁금해졌고 조사하던 중 항상 헷갈렸던 용어들도 공부하며 이벤트의 모든 것을 정리하기로 했다. 1. 용어 정리 1.1 이벤트 웹 페이지에서 마우스를 움직이거나, 요소를 클릭하거나, 텍스트 박스에 글쓰기 등 특정 동작을 수행하는 것을 이벤트가 발생했다고 한다. 그리고 이벤트가 발생할 때마다 웹 브라우저가 서버에게 그 사실을 알려준다. 1.2 이벤트 처리기 1.2.1 이벤트 처리기란? 이벤트가 발생했을 때 이에 반응하여 수행할 동작이 .. jQuery란 무엇일까? jQuery 대부분 웹사이트가 사용하고 있는 라이브러리. 라이브러리일 뿐, 자바스크립트와 별개의 언어가 아니다! ('제이쿼리를 자바스크립트로 바꿔주세요'와 같은 말은 잘못된 것임). 특징 단점 무겁다. 제이쿼리 없이 순수 자바스크립트로 작성한 코드보다 속도가 10~100배 정도 더 느리다. 모듈화가 되어 있지 않다. 따라서 React, Angular를 사용하는 경우 제이쿼리를 사용하기 어렵다. 장점 코드가 간결해지고 가독성이 높아진다. document.getElementById('id'); 보다 $('#id') 라고 작성하는 게 훨씬 좋으니까! IE와 기타 브라우저에 대한 지원이 좋다. 따라서 하나의 코드로 여러 브라우저에서 다 호환이 된다. 플러그인을 지원하여 원하는 기능을 추가할 수도 있다. 애니메이.. window 객체 & BOM window 객체 브라우저의 요소들과 자바스크립트 엔진, 모든 전역변수를 담고 있는 객체. window 객체 아래, 대표적으로 screen, location, history, document 같은 객체들이 자주 쓰인다. 메소드는 parseInt, isNaN 같은 게 있다. window는 전역객체(글로벌객체)이므로 모든 객체를 다 포함하고 있기 때문에 사용할 때 window를 그냥 생략해도 된다. 하지만 다른 함수와 헷갈릴 수 있기 때문에 window를 붙여주는 것도 괜찮다. 생략하냐 마냐는 각자의 스타일에 맡기면 된다. window.close() 현재 창을 닫는다. window는 생략가능하기 때문에 close(); 라고 작성해도 된다. window.open() 새 창을 연다. 첫 번째 인자: 페이지 주소.. JavaScript Error Javascript와 에러 Error 자바스크립트를 처음부터 다시 공부해보려고 한다. medium.com requirejs [RequireJS] RequireJS 사용 방법 정리 웹 어플리케이션들이 점점 성장해가면서, 형님격인 데스크탑 어플리케이션들로부터 다양한 테크닉과 패턴들을 상속받고 있다. 그것들중에 하나가 종속성 관리이다. 자바스크립트 자체로는 이� programmingsummaries.tistory.com $(document).ready() - DOM 순서 [jQuery] $(document).ready()란? - DOM 순서 [jQuery] document.ready() - DOM 순서 우리가 jquery를 쓸때 제일 처음에 써주는 $(document).ready(function(){}); 이것은 $(function(){}); 이렇게 줄여서 사용할 수 있습니다. 이 그림을 먼저 보시죠 위에서.. docu94.tistory.com 이전 1 ··· 6 7 8 9 10 11 다음
