Javascript - document 와 window

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

2022.05.16

컴퓨터/Javascript

Commnet

Javascript - Web과 Javascript(사용 셋팅하기)

서론 Web개발에서 Javascript는 필수적으로 공부가 필요한 항목 중 하나입니다. 사용자가 웹브라우저를 통해 특정 URL에 접근하면 서버로부터 데이터를 받아 DOM(Document Object Model)을 생성하고, 이 DOM을 기반으로 사용자에게 보여주기 위한 Web페이지를 랜더링 합니다. 다시 말하자면, DOM을 수정하거나 변경한다면, 사용자가 보이는 Web페이지를 변화시킬 수 있다는 말이 됩니다. 오늘날 거의 모든 웹브라우저들은 Javascript를 지원합니다. 그리고 Javascript언어를 사용한 웹브라우저에서 생성된 DOM을 접근하고 제어할 수 있는 API를 제공해줍니다. 물론 다른 언어들을 통해서 DOM에 접근하고 제어하는 것 또한 가능하지만, 웹브라우저에서 제공하는가 와는 엄청난 차..

2022.05.16

컴퓨터/Javascript

Commnet

Javascript - 함수(Function)의 다양한 정의방법

서론 Javascript에서는 다양한 방법으로 함수를 정의하고 사용할 수 있습니다. Javascript문법에 익숙하지 않다면, 워낙 다양한 방법으로 함수를 정의할 수 있기 때문에 혼동되는 부분이 많습니다. 본문에서는 이런 다양한 함수를 정의하는 방법에 대해서 구분하고 알아보도록 하겠습니다. 함수(Function)란 무엇인가? 프로그래밍을 배우면 함수, 메서드 등의 다양한 이름으로 이 함수라는 녀석을 듣고, 사용하게 됩니다. 그렇다면 이 함수는 무엇일까? 함수의 개념을 간단히 정의하자면, 특별한 기능을 제공하는 하나의 묶음입니다. 이 함수의 개념이 Javascript안에 적용되면서 Javascript의 함수는 아래와 같은 기능과 특징을 가지게 됩니다. 블록단위의 개념이 적용되어, 특정 기능을 수행한다. 특..

2022.05.13

컴퓨터/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