33일차 - 배열의 길이, 전역변수 window와 document, DOM

배열의 길이

 

배열에도 길이가 있다. 배열이 있는 변수에 .length 메서드를 사용하면 길이를 파악할 수 있는데, 이게 문자열과 좀 다르다.

배열의 길이 파악

문자열로 된 변수에서 길이를 파악하면 해당 문자열의 총 글자 수가 나오는데, 배열의 길이를 파악하면 위 이미지처럼 배열 내 인덱스의 수가 나온다. 그리고 위의 결과를 보다시피 배열 내 요소가 2개면 2라는 결과가 나오는데, 이처럼 인덱스 수는 항상 해당 배열의 인덱스보다 1씩 크다.

 

HTML에 연결하여 쓰는 자바스크립트

 

이 주제는 지난번에도 다뤘지만 오늘 보충설명을 한번 더 해주셔서 적게 되었다. 자바스크립트파일은 CSS 파일처럼 하나의 HTML 파일에 여러 개 연결해서 쓸 수가 있다. 실제 웹사이트를 살펴보면 자바스크립트 파일만 8개~10개 있는 것을 보았다. 미리 실행하느냐, HTML을 분석하고 실행하느냐에 따라 위치가 조금씩 다를 뿐이다. 

 

또, 3개의 js파일이 있다고 했을 때, 1번 js파일에 정의된 변수는 2번, 3번 js파일에서도 사용이 가능하다.

 

오늘 강의에서 나온 퀴즈에서 틀린 것 정리

 

오늘 강의에서는 지금까지 배웠던 자바스크립트에 대한 퀴즈가 출제되었는데, 틀린 것을 여기에 정리해보려고 한다.

• 자바스크립트에서 value(값)이란 연산에서 사용하는 숫자 또는 문자열과 같은 데이터이다.
• 함수 매개변수는 함수에 필요할 수 있는 입력값이며, 함수가 호출될 때 값을 전달해야 한다.
• 변수는 코드를 단순화하기 때문에 매우 자주 사용하지만 기술적으로는 필요하지 않다. 결국 값으로 작업하기 때문이다. 그래서 변수는 데이터작업을 더 쉽게 하도록 해주는 '유틸리티 도구'일 뿐이다.
• 매개변수와 반환 값은 모두 선택사항이며 서로 독립적이기 때문에 함수가 꼭 매개변수를 허용하고 값을 반환해야 할 필요가 없다.

전역변수 window와 document

 

오늘은 전역변수인 window와 document에 대해서 살펴보았다.

💡 지역변수: 특정 함수 내에서만 유효하며, 함수 밖에서는 접근할 수 없다. 지역 변수는 함수 안에서 선언될 때 생성되며, 함수 실행이 종료되면 소멸한다.
💡 전역변수: 어디서든 접근이 가능하며, 프로그램 전체에서 유효하다. 전역 변수는 함수 외부에서 선언될 때 생성되며, 프로그램이 종료될 때까지 유지된다.

 

이 두 변수는 내장된 변수이고 차례로 함수에도 내장되어 있다. 그래서 window는 따로 정의하지 않아도 사용할 수 있다. console.log(window)로 살펴보면 정말 많은 내장된 속성과 메서드들을 확인할 수 있다. 저번에 사용했던 alert() 함수도 그 중의 하나이다.

내장된 수많은 window 속성들

이 window는 속성들을 포함하고 있기에 객체이며, 위 이미지처럼 많은 것을 얻기 위해 사용할 수 있는 많은 유틸리티 정보와 메서드를 제공해준다.

 

예를 들어, 우리가 현재 어떤 페이지에 있는지 알 수 있고, alert()같은 유틸리티 함수에도 접근할 수 있다.

 

document는 다른 객체 안에 있는 객체를 의미하는 중첩 객체이며, 저장된 웹사이트 콘텐츠와 관련된 함수와 정보가 포함되어 있다. 그래서 document를 사용하여 자바스크립트 코드를 만들면 HTML 코드는 브라우저에 분석되서 사용자가 보는 화면에 실제 콘텐츠로 나타나게 된다.

웹페이지의 모든 게 있는 document 객체

그래서 document 객체는 특정 HTML 요소에 접근할 수 있는 많은 기능을 제공해준다.

 

DOM에 대해서

 

DOM은 Document Object Model의 약자로, 웹개발의 개념으로 작성된 HTML 코드를 분석해서 데이터와 브라우저의 내부를 표현하는 것을 설명해 주는 역할을 한다.

 

이 분석과정에서 브라우저는 개발자가 작성한 HTML 코드를 자바스크립트 객체 묶음으로 해석해준다. 이 객체들은 HTML 구조를 나타내기 위해 서로 중첩된다.

💡 HTML 코드가 자바스크립트 객체로 해석된 것을 직접 보려면 console.dir을 사용하면 위 이미지처럼 볼 수 있다.

HTML도 중첩구조이듯이 자바스크립트도 중첩구조로 변환된다.

이렇게 되면 자바스크립트 코드는 DOM과 상호작용할 수 있게 된다. 그래서 그 브라우저 HTML 코드의 내부 표현도 가능해지고 거기서 데이터도 뽑을 수 있게 된다.

 

우리가 HTML 코드를 작성하다보면 위 이미지처럼 중첩으로 이뤄진 코드를 자주 접하게 된다. 이는 자바스크립트에도 적용되는데, DOM은 자바스크립트 객체의 중첩된 나무라고 할 수 있다.

수많은 가지로 이뤄진 나무

이런 특징의 DOM에서 안에 있는 요소를 찾아내려면 두 가지 방법이 있다.

 

첫 번째로, 요소를 파헤치는 방법이 있는데 이 방법을 사용하려면 항상 코드의 정확한 구조를 알고 있어야 한다.

요소를 파헤치는 방법 예시

위 이미지는 중첩된 곳의 제일 안쪽에 자리잡은 앵커태그를 찾아 children으로 명명되는 자식태그들을 지나 앵커태그를 만나고, 해당 링크를 구글에 연결한 코드를 적은 것이다. 찾는 것도 일이지만 코드를 보는 사람도 복잡해진다.

 

두 번째로, 브라우저가 사용자에게 제공하는 일부 유틸리티 함수로 특정 명령을 사용해서 해당 요소를 쿼리하는 방법이다.

💡 쿼리(Query): 웹서버에 특정 정보를 보여달라고 하는 웹 클라이언트 요청에 의한 처리

 

쿼리를 하는 방법은 정확한 구조를 알지 못할 때 사용하는데, 사실 알 필요가 없는 방법이다. 이 방법을 이용할 때는 HTML의 해당 태그나 요소의 ID나 CLASS 또는 CSS 선택자를 사용하게 된다.

 

그래서 파헤치는 방법보다 훨씬 편하게 HTML과 자바스크립트를 연결할 수 있다.

 

script 태그의 위치 선정

 

자바스크립트에서 점(.)을 사용해서 이미 존재하는 객체의 속성을 만든다면 변수에서 했던 것처럼 등호(=)를 이용하여 값을 할당해야 한다. 위 이미지가 그 예시 중의 하나이다.

 

그런데 이렇게 올바르게 했는데 오류가 뜰 수 있다. 이는 HTML 코드보다 해당 자바스크립트 코드가 먼저 실행되었기 때문이다. 

 

이럴 경우에 script 태그의 위치 선정이 문제가 되는데, 만약 head 안에 넣어주게 되면 해당 문제가 발생하게 된다.

 

그러나 대부분의 경우 body의 제일 마지막부분에 script 태그를 위치시킴으로써 이 문제를 해결하게 된다.

제일 끝부분에 위치한 script 태그

만약 위치를 바꾸지 않고 head 내부에서 사용하고 싶다면 태그 내에 defer 속성을 사용할 수도 있다. 이는 전체 문서가 분석이 될 때까지 스크립트 실행이 지연되어야 한다고 브라우저에게 알려주는 것이다.

defer 속성의 사용