본문 바로가기

전체 글540

[JavaScript] Chapter 21. 이벤트 다루기 이벤트 전파 이벤트 발생 시, 다른 곳으로 전파시킴 클릭 결과 : btn -> spanArea -> divArea 순으로 alert 이벤트가 실행된다. 이벤트 전파 중단 이벤트 발생 시, 다른 곳으로 전파를 중단시킴 stopPropagation 이벤트 전파를 막는 함수 크롬, 사파리, 파이어폭스 cancelBubble 이벤트 전파를 막는 함수 IE8 속성 true 클릭 preventDefault 이벤트 동작 중단 함수 링크클릭 결과 : btn -> spanArea -> divArea 순으로 alert 이벤트는 실행되지만, 네이버창으로 연결되는 이벤트는 발생하지 않는다. 이벤트 전파 이벤트 발생 시, 다른 곳으로 전파시킴 캡처링 (위 -> 아래) 버블링 (아래 -> 위. default) 이벤트 캡처링 이벤.. 2022. 12. 19.
[JavaScript] Chapter 20. 이벤트 이벤트 (Event) 시스템에서 일어나는 사건 마우스 이벤트 (mouse event) 설명 click, doubleclick 클릭 / 더블클릭 mousedown 마우스 누를 때 mouseup 눌렀던 마우스 땠을 때 mouseover 요소 위로 마우스 올렸을 때 mouseout 요소 밖으로 마우스 움직였을 때 포커스 이벤트 (focus event) 설명 focus 포커스 얻음 blur 포커스 잃음 기타 이벤트 (etc event) 설명 submit 폼 전송 resize 사이즈 조절 select 텍스트 선택 scroll 스크롤 기능 change 폼 변경 이벤트 핸들러 이벤트를 다룸 이벤트 발생 시, 실행되는 코드 이벤트를 JS에서 인식하여 사용하게 함 = 이벤트 리스너 이벤트 핸들러 표기법 on + 이벤트명.. 2022. 12. 17.
[JavaScript] Chapter 19. 클로저 클로저 (Closure) 함수와 함수가 선언된 어휘적 환경(렉시컬 환경)의 조합 => 내부함수가 외부함수 변수에 접근 가능 렉시컬 스코프 이해 function init() { // name은 init에 의해 생성된 지역 변수 var name = "Mozilla"; // displayName()은 내부 함수이며, 클로저 function displayName() { // 부모 함수에서 선언된 변수를 사용 alert(name); } displayName(); } init(); 은닉화 Information Hiding 외부로부터 데이터를 감추는 것 private로 감춤 내부적으로 사용해야하는 경우 감춤 // ex) IIFE (즉시 실행 함수) (function() { var str = "테스트"; })(); c.. 2022. 12. 17.
[JavaScript] Chapter 18. 비동기 동기 (Synchronous) 자바스크립트 방식 한 번에 하나의 작업 수행 직렬 동기 동작 순서 코드 실행 스택에 실행할 코드 쌓임 쌓인 코드 실행 실행된 코드는 스택에서 제거 비동기 (ASynchronous) 요청 보내면 응답에 상관없이 다음 동작 실행 동기와 반대 의미 병렬젹 Ajax, Fetch, setTimeout 등등 비동기 사용 방법 Callback 함수 Promise Async await document.write("코드 1"); setTimeout(function(){document.write("코드 1");}, 3000); // 3초 뒤 실행 document.write("코드 3"); 콜백함수 (callback function) 함수 실행 시킨 후, 이후 실행되는 함수 다른 함수에 파라미.. 2022. 12. 17.
[JavaScript] Chapter 17. 클래스 클래스 (Class) 객체를 생성하기 위한 틀, 객체X 클래스 안에 데이터가 없다 메모리에 올라가지 않는다. Class Info { // 생성자 constructor({name, age}) { this.name = name; this.age = age; } write() { return this.name + this.age; } } let info = new Info({name:"홍길원", age:31}); console.log(info.write()); Getter 프로퍼티 값을 가져오기 위한 함수 Setter 프로퍼티 값을 설정하기 위한 함수 get 함수명() { return this._변수명; } set 함수명(value) { this._변수명 = value; } 사용은 함수처럼 호출()해서 사용하.. 2022. 12. 16.
[JavaScript] Chapter 16. Prototype(프로토타입) 생성자 (constructor function) 객체 생성하는 함수 함수명 첫글자 대문자 new 키워드 사용하여 호출 this 키워드 이용 변수타입 변수명 = new 생성자함수(); // 생성자 함수 예 var arr = new Array("사과", "수박", "딸기"); var num = new Number(1, 2); var info1 = new Info("홍길원", 30); 생성자 사용 이유 번거로움 해결 구조를 정해놔서 편리 생성자 하나로 여러 객체 생성 가능 메모리 효율 function Info(name, age) { this.name = name; this.age = age; } var info1 = new Info("홍길원", 30); var info2 = new Info("홍길투", 30).. 2022. 12. 16.
[JavaScript] Chapter 15. This this 함수 호출 방법에 따라 값이 결정 => 바인딩 전역 객체 (global Object) 모든 객체의 최상위 객체 자바스크립트에서는 window 객체 전역 객체에 바인딩 되는 경우 this는 전역 객체(window)에 바인딩 전역 함수 내부 함수 콜백 함수 등등.. // 내부 함수 function sFoo() { console.log("sFoo ::: " + this); // sFoo ::: [object Window] } function mFoo() { console.log("sFoo ::: " + this); // mFoo ::: [object Window] sFoo(); } this 바인딩 종류 기본 바인딩 암시적 바인딩 명시적 바인딩 new 바인딩 화살표 함수 기본 바인딩 기본 규칙 전역(g.. 2022. 12. 16.
[JavaScript] Chapter 14. Ajax - XMLHttpRequest, Fetch, JSON XMLHttpRequest Ajax의 핵심 서버와 데이터를 주고 받을 때, 사용 W3C 표준으로 정의 (주요 웹 브라우저에 내장) *IE5, IE6 => ActiveXObject 이용 XMLHttpRequest 사용 방법 IE7 이상, 크롬, 파이어폭스, 사파리, 오페라 var 변수명 = new XMLHttpRequest(); IE5, IE6 var 변수명 = new ActiveXObject("Microsoft.XMLHTTP"); var httpRequest; if (window.XMLHttpRequest) { // 모질라, 사파리, IE7 + ... httpRequest = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE6 이하 httpR.. 2022. 12. 15.
[JavaScript] Chapter 13. Ajax HTTP 통신 Hyper Text Transfer Protocol HTML, 데이터(동영상, 음성, 파일) 등을 주고 받기 위한 규약 *Https Https를 ssl로 암호화한 것 웹 동작원리 사용자에 의한 이벤트 발생 서버의 웹 서버로 요청 데이터베이스에서 데이터 조회 요청 결과 응답생성 웹 페이지 로드 (새로고침이 됨) Ajax Asynchronous JavaScript and XML = 비동기 자바스크립트와 XML을 의미. jQuery 라이브러리 간단히 말하면, 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것을 말한다. JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있다. 강력한 특징은 페이지 전체를 리프레쉬 하지 않고 일부만 로드.. 2022. 12. 15.
[JavaScript] Chapter 12. IIFE IIFE (Immediately Invoked Function Expression) 즉시 실행되는 함수 표현식 약자 표현 내부 변수는 외부로부터 접근 불가 IIFE 변수 할당 시 자체 저장 X 즉시 실행된 함수 결과만 저장 O 즉시 실행하고 없애버리기 때문에 함수명이 굳이 필요하지 않다 IIFE 사용 이유 불필요한 변수 및 함수 생성 X Scope 충돌 X 한 번만 호출하는 코드의 경우 사용 function init() { // 초기 설정 로직 } (function () { // 초기 설정 로직 })() IIFE 표현식 함수 리터럴을 () 감싼 형태 // 함수 리터럴 function sum(num1, num2) { return num1 + num2; } // IIFE (function () { // 로직.. 2022. 12. 14.

티스토리툴바