Javascript - 화면, 웹페이지, 요소의 위치

서론 Javascript로 웹 페이지를 다루다 보면 화면, 웹페이지, 요소들의 위치 값을 구해야 하는 경우가 많이 발생합니다. 본문에서 각각에 대한 위치정보를 어떻게 알아볼 수 있는지 확인해 봅시다. 화면의 폭과 높이 우선 화면 즉, 표시되는 출력장치의 폭과 높이를 알아보도록 하겠습니다. PC로 보고 있다면 보고 있는 여러분의 모니터가 됩니다. console.log(window.screen.height); // 화면의 높이 console.log(window.screen.width); // 화면의 폭 웹 브라우저의 폭과 높이 사용자들은 웹브라우저가 출력되는 화면은 자유롭게 조정할 수 있습니다. 전체 화면 모드를 사용하던가, 창을 최대화를 하거나 사용자 지정의 크기로 사용하는 등 말입니다. 심지어 스크롤바 ..

2022.05.17

컴퓨터/Javascript

Commnet

Javascript - document 와 window

서론 웹 브라우저는 Javascript에 객체의 형태로 BOM과 DOM을 제공해 주고 개발자는 이 객체를 이용해서 웹브라우저의 상태를 변화시킬 수 있습니다. 그렇다면 BOM과 DOM은 무엇일까? 그리고 Javascript에서 window와 document의 차이는 무엇일까? 본문에서는 웹브라우저에서 Javascript를 통해서 어떤 데이터들이 객체의 형태로 전달되는지 그 객체들을 이용해서 무엇을 할 수 있는지 알아보도록 합시다. BOM(Browser Object Model)? BOM은 웹 브라우저와 소통하기 위해 만들어진 객체모델입니다. 웹 브라우저의 창의 크기가 변경되거나, 스크롤이 움직이거나 이런 다양한 동작과 상태에 대한 정보를 표현하는 모델로서, 웹 브라우저에서 웹 페이지를 구동하기 위한 환경적 ..

2022.05.16

컴퓨터/Javascript

Commnet

Javascript - 변수의 범위와 호이스팅(Variable scope and hoisting)

서론 지난 포스트에서 Javascript에서 변수를 선언하는 var, let, const 3가지의 특징과 사용 방법을 알아보았습니다. 이제 변수를 언제 선언할 것이며, 변수를 사용할 범위를 정확하게 지정해야만 효율적인 프로그램이 가능해집니다. 본문에서는 이런 내용들을 알아보도록 하겠습니다. 변수의 범위 - Variable Scope C 나 Java와 같이 JavaScript에서도 변수를 사용하는 범위를 지정할 수 있게 됩니다. 프로그래밍을 하는 과정에서 모든 데이터가 계속해서 변수의 형태로 메모리를 차지하고 있는다면, 매우 비효율적이기 때문입니다. 다른 말로는 변수의 생명주기(Variable of lifecycle)이라고도 불립니다. 즉, 변수가 존재하는 영역을 지정할 수 있다는 것입니다. Javascr..

2022.05.12

컴퓨터/Javascript

Commnet

Javascript - 변수(variable) var,let,const?

서론 다른 프로그래밍 언어와 마찬가지로 Javascript 또한 '변수'의 개념을 사용할 수 있습니다. Javascript에서 변수를 선언하고 사용하는 방식에 대해서 배우고 효과적으로 사용하기 위해 각각의 특징들에 대해서 알아보겠습니다. 본문에서는 각각의 변수형들에 대해서 간단하게 설명하고 그 특징과 차이점을 알아보겠습니다. 변수(Variable)? 컴퓨터에서 데이터는 메모리 공간에 담깁니다. 예를 들어 10이라는 데이터를 메모리의 특정한 공간에 담았다면, 그 공간에 접근을 해야지만 데이터를 확인할 수 있을 것입니다. 이런 메모리 공간의 할당하고, 그 메모리공간의 별칭이 바로 변수의 개념입니다. 대부분의 언어에서는 이렇게 Variable을 이용하여 메모리와 데이터를 다루게 됩니다. Javascript 또..

2022.05.11

컴퓨터/Javascript

Commnet

WEB - DOM(Document Object Model)?

서론 웹을 공부하다 보면 필연적으로 DOM이라는 말을 많이 듣게 됩니다. 프로그래밍 언어로 DOM을 접근하고 다루는 것이 필수적인 Web 개발자의 소양 중 하나입니다. 본문에서는 DOM에 대한 기본 지식을 알아보도록 하겠습니다. Whis is DOM? DOM(Document Object Model) 직역하자면 문서 객체 모델입니다. HTML , XML로 작성한 문서를 어떠한 기준에 의해 구조화된 모델로 표현한 데이터를 DOM이라고 합니다. 이게 뭔 말이야? HTML이나 XML은 문자들로 이루어진 문서입니다. 예를 들어 아래와 같은 HTML 문서가 있다고 합시다. DOM이 뭔데요 HTML 형식의 문서입니다. 단순히 문자들로만 이루어져 있습니다. 웹 브라우저를 통해 웹페이지를 랜더링 하는 과정은 HTML형식..

2022.05.11

컴퓨터/WEB

Commnet