분류 전체보기 (245) 썸네일형 리스트형 [Javascript] Javascript와 jQuery의 선택자 return 값 차이 바로 알기 여기 우리가 지금부터 접근하려 하는 HTML 요소가 하나 있다. Javascript와 jQuery에서는 DOM에 접근하기 위해 선택자(selector)를 사용한다. 그리고 이 요소에 접근하기 위한 Javascript와 jQuery의 선택자는 각각 아래와 같다.// 순수 Javascript 방식let jsCode = document.getelementById('myDiv');// jQuery 방식let jqCode = $('#myDiv'); 이 둘은 같은 요소에 접근하지만 다른 값을 반환한다. 위 코드를 각각 콘솔창에 출력해 보면, Javascript 선택자는 HTML DOM 객체(element 요소)를 리턴하는 것에 비해, jQuery 선택자는 jQuery 객체를 리턴한다. 따라서 Javascript 선.. [Javascript] 이벤트 추가 바로 알기 이벤트(event)란 웹 페이지에서 발생하는 상호작용을 말한다. 웹 페이지에서 '무언가 일어났다'는 일종의 신호 같은 것이다. 우리가 사용하는 웹 애플리케이션에서는 수많은 이벤트가 발생한다. 사용자가 마우스나 키보드를 이용해 일으킬 수 있는 이벤트도 있고 브라우저 스스로 웹 페이지를 로딩하며 여러 이벤트를 발생하기도 한다. 자바스크립트에서 이벤트를 다룰 땐 이벤트 핸들러를 사용한다. 이벤트 핸들러란 어떤 이벤트가 발생했을 때 실행되는 함수를 말한다. 사용자의 동작으로 인해 어떤 이벤트가 발생했을 때 그로 인해 어떤 일이 일어날 것인지 정의해 주는 것이다. 클릭하세요! 여기 버튼이 하나 있다. 여기에 이벤트를 등록하는 방법에는 세 가지가 있다. 1. 인라인(inline) 방식 가장 고전적이면서.. [Javascript] document 객체 그리고 DOM 바로 알기 자바스크립트로 웹 페이지를 자유롭게 다루기 위해서는 DOM에 대한 이해가 필요하다 DOM(Document Object Model) DOM은 말 그대로 웹 페이지의 모든 콘텐츠들을 객체로 나타내 주는 것이다. 그래서 간단히 생각하면 웹 페이지를 document라 부르고 이러한 document를 자유롭게 다루기 위해 객체화 하고자 구현된 개념이 결국 DOM이라고 생각할 수 있겠다. cf) HTML 태그와 텍스트, 속성 등 document에 담겨 있는 모든 요소 하나하나를 객체화 한 단위를 Node라고 부른다. 결국 DOM은 웹 페이지를 객체화 한 개념이고 이 웹 페이지의 가장 상단 진입점이 document 객체이다. document 객체는 DOM 트리의 최상위 객체. document 객체는 window .. [HTML] Life Cycle(생명 주기) 바로 알기 Life Cycle(생명 주기)이란 생애, 그러니까 HTML의 라이프 사이클은 문서(document)가 브라우저상에 생겨나고 변화하고 사라지는 일련의 과정을 뜻한다. HTML 문서의 생명 주기에는 다음의 세 가지 주요 이벤트가 관여한다. DOMContentLoaded브라우저가 HTML을 전부 읽고 DOM Tree를 완성하는 즉시 발생. 이미지 파일이나 스타일시트 등 기타 자원은 기다리지 않는다. 사용 사례: DOM이 준비된 것을 확인한 후 원하는 DOM 노드를 찾아 핸들러를 등록해 인터페이스를 초기화할 때. loadDOM Tree 생성이 완성되었을 뿐 아니라 이미지, 스타일시트 등 외부 자원도 모두 불러오는 것이 끝났을 때 발생. 사용 사례: 이미지 사이즈를 확인할 때 등. 외부 자원이 로드된 후 발생하.. [WEB] 브라우저 렌더링 과정 바로 알기 브라우저 렌더링의 원리 주소창에 https://www.google.com/을 입력하면 브라우저에서는 무슨 일이 일어날까? 브라우저가 웹 페이지를 불러올 때는 렌더링 엔진이라는 소프트웨어 모듈이 사용된다. 렌더링 엔진은 HTML, CSS, Javascript와 같은 웹 페이지 요소들을 파싱하고 이를 브라우저 화면에 표시하는 역할을 한다. 브라우저 렌더링 동작 과정 렌더링의 기본적인 동작 과정은 다음과 같다. 1. HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다(Parsing)2. 두 Tree를 결합하여 Rendering Tree를 만든다(Style) 3. Rendering Tree에서 각 노드의 위치와 크기를 계산한다(Layout) 4. 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로.. [Javascript] undefined과 null 바로 알기 undefined과 null 여기 두 개의 휴지걸이가 있다. 휴지 자체가 아예 없는 휴지걸이와 휴지심만 있고 휴지는 없는 휴지걸이. 둘 다 '휴지가 없다'고는 말할 만한 상황이긴 하지만 분명 다르다고 할 수 있다. Javascript에도 '없음'을 나타내는 값이 두 개 있다. undefined과 null. 이 둘은 언뜻 비슷한 것 같지만 사실 의미도 목적도 용도도 엄연히 다르다. 결론부터 말하자면 undefined는 변수에 값이 할당되지 않았다는 의미로 자바스크립트 엔진이 자동으로 할당하는 초깃값이며, null은 변수에 값이 명시적으로나 의도적으로 없음을 나타내는 값이다. undefined는 '할당된 값 자체가 없다'는 뜻으로 null과는 차이가 있다. cf) undeclared는 변수 선언조차 된.. [Javascript] Window 객체 바로 알기 현재는 다양한 사용처와 플랫폼을 지원하고 있지만, 자바스크립트는 본래 웹 브라우저에서만 사용하기 위해 만들어진 언어다. 그만큼 웹 분야에서의 자바스크립트란 독보적인 존재라고 할 수 있는데, 자바스크립트로 웹 브라우저를 다루기 위해서는 window 객체와 document 객체, BOM과 DOM에 대한 이해가 필요하다. 인터넷 브라우저를 보면 주소창, 즐겨찾기, 툴바, 탭 등이 보이고 그 다음부터 웹 사이트가 표시된다. 여기서 브라우저 전체를 담당하는 게 window 객체이고 웹 사이트만 담당하는 게 document 객체다(document 객체도 window 객체 안에 들어 있음). window window 객체는 두 가지 역할로 나눠 생각해 볼 수 있는데, 1) 브라우저 안의 모든 요소들이 소속된 최.. [Javascript] nullish 병합 연산자 '??' nullish 병합 연산자 '??'를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 '확정되어 있는' 변수를 찾을 수 있다. a ?? b의 평과 결과는 다음과 같다. 1) a가 null도 아니고 undefined도 아니면 a 2) 그 외의 경우 b ?? 없이 이와 동일한 동작을 코드를 작성하면 아래와 같다.// x = a ?? b x = (a !== null && a !== undefined) ? a : b; 이럴 때 ?? 연산자를 사용하면 값이 정해진 변수를 간편하게 찾아낼 수 있다. ??와 ||의 차이 nullish 병합 연산자는 언뜻 or 연산자 ||와 비슷해 보인다. 그러나 두 연산자 사이에는 중요한 차이점이 있다. 1) ||는 첫 번째 truthy 값을 반환 2) ??는 첫 번째 정의된 값을.. 이전 1 2 3 4 5 6 7 8 ··· 31 다음
