저번 포스팅에서 DOM에 대해 알아보았고 간단한 JavaScript 코드를 통해 브라우저를 조작하는 것을 해보았다. 이번 포스팅에서는 script 외부연결과 window.onload , window.addEventListener("DOMContentLoaded", listener)에 대해 알아보도록 하자. script 외부연결 window.onload , window.addEventListener("DOMContentLoaded", listener) HTML 문서를 작성할 때 엘리먼트를 사용해 CSS 파일을 외부로부터 가져와서 사용하는 것과 마찬가지로 JavaScript 역시 외부에서 가져와서 사용이 가능하다. script 외부 연결이란 다시말해, HTML 문서의..

이번 포스팅에서는 JavaScript의 DOM에 대해 알아보도록 하겠다. DOM은 문서객체모델(DOM, Document Object Model)을 일컫는 말로 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다. 해당 객체 모델은 문서 내의 모든 요소를 정의하고 각각의 요소에 접근하는 방법을 제공해 준다. 쉽게 말해 이나 같은 html 문서의 엘리먼트들을 JavaScript가 이용할 수 있는 객체로 만든 것을 문서 객체라 하는데 이러한 문서객체를 인식하는 방식이 DOM이라고 할 수 있다. DOM에 대해 조금 더 알아보고자 하는데 그 전에 window 객체에 대해 알아볼 필요가 있다. window 객체는 JavaScript의 최상위객체이자 전역객체이면서 모든 객체가 소속된 객..

이번 포스팅에서는 JavaScript만의 고유한 특징 중의 하나인 얕은복사(Shallow Copy)와 깊은복사(Deep Copy)의 개념에 대해 알아보도록 하겠다. 얕은복사와 깊은복사의 개념을 알아보기에 앞서 아래의 코드를 보면서 JavaScript에서 객체를 어떤식으로 인식하는지 살펴보자. console.log(1===1) console.log({}==={}) // 빈 객체와 빈 객체를 같다고 놓으면 false가 나온다. const a = {} const b = {} console.log(a===b) // false console.log([]===[]) // false (배열도 객체이기 때문이다) console.log( 1===1 )의 결과를 살펴보면 우리가 잘 알고 있는 것처럼 number의 값이 1..

이번 포스팅에서는 JavaScript의 배열과 객체 그리고 속성과 메소드에 대해 조금 더 자세히 정리해보도록 하자. 배열 (array) 속성과 메소드 객체 (object) 배열은 기본적으로 여러개의 데이터를 저장하는 데이터타입이다. 배열을 사용하면 변수 하나에 여러개의 데이터를 집어 넣을 수 있다. 배열에는 인덱스(index) 개념이 존재하는데, 배열 안의 특정 값을 호출하기 위해서는 인덱스가 필요하다. 배열에서 자주 사용하는 속성으로 length가 있고 메소드로는 push( )가 있다. length 속성 : 배열의 길이를 구하고 싶은 경우 사용 // array.length push 메소드 : 배열에서 값을 추가하고 싶은 경우 사용 // array.push( 추가하..

이번 포스팅에서는 앞서 정리한 내용들에 대해 조금 더 자세히 알아보도록 하자. 변수 선언 - 전역변수 & 지역변수 문자열 - 이스케이프 문자 else if문 함수 JavaScript에서 let과 const를 사용해 변수를 선언할 때 어떠한 과정이 일어나는지 조금 자세히 알아보도록 하자. let은 변수를 선언하는 예약어이다. let ingoo;와 같이 변수를 선언하는 순간 우리가 사용하는 컴퓨터의 메모리는 변수를 저장할 수 있는 공간을 확보하게 된다. 그리고 대입연산자를 통해 변수에 값을 할당하게 되면 할당된 값이 메모리의 공간에 들어간다. 재할당을 하는 경우에는 기존에 들어있던 값이 재할당된 값으로 덮어쓰여지는 것이다. 이러한 원리로 다음과 같이 동일한 변수명을..