목록Web/JavaScript (7)
GUMI Dev
호이스팅(hoisting) 자바스크립트에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화한다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않는다. 호이스팅을 설명할 때는 주로 "변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는" 것으로 말하곤 한다. 따라서 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있다. 다만 선언과 초기화를 함께 수행하는 경우, 선언 코드까지 실행해야 변수가 초기화된 상태가 됨을 주의하자. 함수 호이스팅 function 키워드로 선언한 모든 식별자도 호이스팅된다. 먼저 함수가 정..
변수(Variables) 변수는 필요한 정보를 저장한다. 변수는 우리가 사용하는 모든 숫자나 문자열과 같은 값의 컨테이너다. 변수(Variables)는 그러한 값을 저장할 수 있는 컨테이너다. 변수는 변하는 값을 저장할 때 사용한다. 예를 들어 태어난 연도를 입력해서 나이를 계산하는 프로그램을 만든다면, A라는 사람이 입력하는 연도와 B라는 사람이 입력하는 연도는 다를 것이다. 이렇게 상황에 따라 다른 값을 입력받아야 할 때 변수를 사용한다. 나이(변수) = 올해 연도(변수) - 태어난 연도(변수) + 1(상수) 참고로, 위의 1(일반적인 한국 나이를 계산하기 위해 1살을 더함)과 같이 변하지 않는 값은 상수(constant)라고 부른다. 컴퓨터가 구별할 수 있도록 변수에 이름을 붙이는 것을 '변수를 선..
세미콜론 한 줄의 끝에 위치한 세미콜론은 문(statement)의 끝을 나타낸다.한 줄에 있는 여러 문을 분리할 필요가 있을 때에만 반드시 필요하다.하지만, 어떤 사람은 각 문의 끝에 세미콜론을 넣는 것이 좋은 습관이라 믿는다. 언제 세미콜론을 넣고 언제 넣으면 안되는지에 대한 다른 규칙이 있다. 1. 필요: 같은 줄 내에 두 개의 문이 포함되어있을 때 var i = 0; i++ //
innerHTML document.getElementByID(id) HTML의 요소에 접근하기 위해서는, 자바스크립트에서 document.getElementByID(id) 메서드를 사용해야 한다. My First Web Page My First Paragraph id 속성(attribute)은 HTML 요소를 정의한다. * 여기서 속성(attribute)은 html 문서 내에서 정적인 즉, 바뀌지 않는 속성을 말한다. attribute는 html 요소의 추가적인 정보를 전달하고 이름="값" 이렇게 쌍으로 온다. 예를 들어, 를 보면 div 태그가 class 하는 값이 'my-class'인 attribute를 가지고 있다. innerHTML 속성(property)은 HTML 내용을 정의한다. * 여기서 속..
태그 사이에 JavaScript 코드가 삽입된다. 자바스크립트로만 HTML 문서에 글을 작성해보았다. JavaScript 함수 및 이벤트 JavaScript function는 호출될 때 실행할 수 있는 JavaScript 코드 블록이다. 예를 들어 사용자가 버튼을 클릭할 때와 같이 이벤트가 발생할 때 함수를 호출할 수 있다. 자바스크립트 공부하기 완료하기 의 자바스크립트 이번에는 HTML 페이지에서 섹션에 JavaScript function을 배치해보자. 자바스크립트 공부하기 완료하기 외부 자바스크립트 자바스크립트 공부하기 완료하기 /* listCompleted.js */ function toDo() { document.getElementById("list").innerHTML = "자바스크립트 공부 끝..
(Three.js 공식 메뉴얼 을 참고하여 기본 환경을 셋팅해보았다. ) Three.js는 웹 브라우저에서 애니메이션 3차원 컴퓨터 그래픽스를 만들고 표시하기 위해 사용되는 크로스 브라우저 자바스크립트 라이브러리이자 API이다. 웹 브라우저에서 3차원 컴퓨터 그래픽스와 애니메이션을 표현할 수 있는 방법에는 여러가지가 있지만, Three.js가 가장 대표적으로 사용되고 있다. Three.js를 사용하면 웹 페이지 안에 내가 직접 제작한 3d 모델을 로드할 수 있으며, 추가적인 프로그래밍을 통해 그 모델에 각종 인터랙티브한 기능들을 구현할 수 있다. Three.js 라이브러리는 하나의 자바스크립트 파일이다. 아래와 같이 HTML 파일에서 안에 자바스크립트 파일을 포함하여 불러올 수 있다.

three.js 란? three.js 모듈 설치 방법 three.js 라이브러리를 사용하기 위해서는 본격적인 웹 코딩에 앞서 three.js 모듈을 설치해야한다. three.js 공식 문서에서 제안하는 three.js 설치 방법에는 크게 두 가지가 있다. 크게 npm(Node Package Manager)으로 설치하는 방법과 cdn(Contents Delivery Network)으로 설치하는 방법이 있다. 공식 문서에서는 npm으로 설치하는 것이 대부분 경우에 적합하다고 설명한다. 기본적으로 three.js 라이브러리에 포함된 모든 파일은, 구버전이든 최신버전이든 버전이 모두 동일해야 라이브러리가 정상적으로 실행된다. 라이브러리를 npm으로 설치하면 한꺼번에 동일한 버전의 파일들이 일괄적으로 다운로드된다..