whatisthis?

제이쿼리(jQuery) write less, do more 이라는 모토로 만들어진 오픈소스 기반의 자바스크립트 라이브러리. 쉽게 element를 찾고 조작할 수 있고, 브라우저의 호환성이 뛰어나다. 또한 메소드 체이닝 등 짧고, 유지관리가 용이한 코드를 지원한다. 장점 IE8,9를 지원한다. 모든 브라우저에서 호환 가능. 코드가 보기 좋다. (디자인을 위해) 플러그인을 지원한다. (다양한 기능 추가 가능) 애니메이션, AJAX도 간단히 사용 가능. 단점 무겁다. 바닐라 자바스크립트보다 10배~100배정도 느리다. 모듈화가 안되어있다. 예> $(document).ready(function(){ alert("Hello World!"); $("#blackBox").hide(); }); window.onload..

실행 컨텍스트(Execution Context) javaScript. (18) 실행 컨텍스트 실행 컨텍스트 (Execution Context) 실행 컨텍스트(Execution Context)는 scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리이다. var name = 'zero'; // 전역변수.. mywebproject.tistory.com - 지난번에 업로드했던 실행 컨텍스트 포스팅은 var을 기준으로 한 설명이였다. 전역 컨텍스트 하나 생성 후, 함수 호출 시마다 컨텍스트가 생김. 컨텍스트 생성 시 컨텍스트 안에 변수객체(argument, variable) , 스코프체인, this가 생성됨. 컨텍스트 생성 후 함수가 실행되는데..

원칙적으로, 자바스크립트로 CSS를 조작하는것은 지양하는 것이 맞다. 그러나, CSS만으로는 처리할 수 없을 때, (예 - 리액트같은 프레임워크를 쓰거나, 스크롤 문제 해결시) 어쩔 수 없이 js로 CSS를 조작해야 하는 경우가 발생한다. - 태그의 CSS를 변경 document.querySelector('선택자').style.display = 'inline-block'; 여기서 주의할 점은 -가 들어간 속성(예>background-color)은 -를 빼고 뒤의 문자를 대문자로 바꿔준다. (자바스크립트는 캐멀케이스 이므로) +) 처음부터 -가 붙은 CSS속성 (예> -webkit) 또한 -를 제거하고 w를 대문자로 바꿈. - 자바스크립트에서는 '-'가 빼기 연산자로 인식됨. - 태그의 css 속성을 읽어..

함수형 프로그래밍 - 객체지향 프로그래밍(OOP)과는 다르다. - 함수형 프로그래밍은 '함수를 기반'으로 돌아간다. - 자바스크립트는 기본적으로 객체지향이므로, 완벽하게 함수형 프로그래밍을 할 수는 없다. 입출력이 순수한 함수여야 한다. 부작용(부산물)이 없어야 한다. 함수와 데이터를 중점으로 생각한다. (객체랑은 다름) 💡 입출력이 순수하다? (= 순수함수) >> 하나 이상의 인자를 받고, 받은 인자를 처리하여 결과 리턴해야함. - 인자 제외한 다른 변수는 사용해선 X. - 받은 인자만으로 결과 도출해야함. ❕ 자바스크립트에서는 this라는 개념 때문에 순수함수를 사용하기 힘들다. 💡 부작용이 없다? - 프로그래머가 바꾸려는 변수 외에는 바뀌어서는 X. - 원본 Data는 불변. >> 함수형 프로그래밍..

자바스크립트 디자인 패턴 - 자바스크립트 앱을 만들 때 자주 사용되는 패턴 1) 모듈 패턴 (=IIFE) - 비공개 변수를 만드는 것. (원래 js에는 없는 기능임) javaScript. IIFE(즉시 호출 함수 표현식) IIFE 즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)은 선언하자마자 즉시 실행되는 Javascript Function 를 말한다. 다른 말로 모듈 패턴(Module Pattern)이라고도 함. SYNTAX (function (.. mywebproject.tistory.com 즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)은 선언하자마자 즉시 실행(=호출)되는 Javasc..

자바스크립트에서는 일반 String / Number / Boolean 값을 다음과 같이 복사(copy)할 수 있다. const string = 'hello'; const copy = string; copy; // 'hello' function sayHello() { console.log('hello'); } const copyFunc = sayHello; 자바스크립트에서는 null과 undefined 를 제외한 모든 타입이 객체이므로 '객체' = 함수, 배열, 일반 객체도 복사할 수 있다. ❕ 단, 복사된 값을 조작할 때 차이가 있다. let string = 'hello'; let copy = string; copy = 'bye'; // 복사본의 값을 바꿔줌 string; // 'hello' ㅡ 원본은 ..

지난 강의에서는 숫자 / 배열 / 문자열에 대한 메서드를 배웠었다. (예> Number.toFixed() / Array.join() / String.split() 등) javaScript. (9) 배열(Array) 배열에 관한 Method 1) 배열.length let array= [1, 2, 3, 4]; array.length; // 4 배열의 길이를 알려준다. 배열의 요소가 추가/제거 될 때 마다 자동으로 바뀐다. let array = [1, 2, 3, 4, 5]; array.length; /.. mywebproject.tistory.com javaScript. (8) 숫자와 Math 객체 숫자(Number) - 숫자 또한 원시 래퍼 객체 (new Number()) 가 존재하고, 메소드를 가질 수 있..

javaScript. (20) Event Listener / Callback 📌 Event Listener - 해당 이벤트에 대해 대기중인 것. (상시 Listening 중) - 이벤트가 발생했을때 등록했던 이벤트 리스너가 실행됨. window.onload = function () { alert('I\'m loaded'); }; - 대표적인 이벤.. mywebproject.tistory.com 지난 포스팅에서 Callback에 대한 이해가 잘 안되는 것 같아 추가로 Callback에 대해 포스팅해보겠다. 콜백에 대해 설명하기에 앞서, 비동기 처리가 무엇인지에 대해 먼저 알아보자. 비동기는 동기식에 반대되는 개념으로, 둘을 비교해보면 다음과 같다. Syncronous (동기식) 요청을 보낸 후 해당 요청의..

📌 Event Listener - 해당 이벤트에 대해 대기중인 것. (상시 Listening 중) - 이벤트가 발생했을때 등록했던 이벤트 리스너가 실행됨. window.onload = function () { alert('I\'m loaded'); }; - 대표적인 이벤트리스너 코드임. - window가 load 될때 function 부분이 실행되는 것. 이벤트리스너는 항상 on + '이벤트명'으로 명명된다. 예> onclick ** 자주 쓰이는 이벤트 목록 onchange 객체 내용이 바뀌고 / 포커스를 잃을 때 onclick 객체를 클릭할 때 ondblclick 객체를 더블클릭할 때 onerror 에러가 발생했을 때 onfocus 객체에 포커스되었을 때 onblur 객체가 포커스를 잃을 때 onkey..

1) 마우스 이벤트 click 요소에 마우스를 클릭했을 때 dbclick 요소에 마우스를 더블클릭했을 때 mouseover 요소에 마우스를 오버했을 때 (올려놓았을 때) mouseout 요소에 마우스를 아웃했을 때 (바깥으로) mousedown 요소에 마우스를 눌렀을 때 mouseup 요소에 마우스를 떼었을 때 mousemove 요소에 마우스를 움직였을 때 contextmenu context menu(마우스 우클릭시 나오는 메뉴)가 나오기 전 wheel 휠이 회전되었을 때 mouseleave 커서가 요소 밖으로 멀리 이동할 때 2) 키 이벤트 keydown 키를 눌렀을 때 keyup 키를 떼었을 때 keypress 키를 누른 상태일 때 3) 폼 이벤트 focus 요소에 포커스가 이동되었을 때 blur 요..