반응형
해당 글은 'JavaScript - The Definitive Guide 6/E(자바스크립트 완벽가이드)' 라는 책을 읽으며
나름의 정리를 하는 글입니다.
2019-12-10
* 이전 내용에 이어서 진행.
아래에 나오는 코드 및 설명들은
이 후 책에서 나오는 예제나 설명들이 어떻게 나오고
대략적으로 배워야 할 것에 대한 설명이 있음
자바스크립트 프로그램 구조를 제어하는 구문 중
조건문과 루프는 다른 언어에서 흔히 볼 수 있는 문법을 사용하고 있음.
// 절대값을 계산하는 함수 정의.
function abs(x) {
if(x <= 0) { // 조건이 참인 경우
return x;
} else { // 조건이 거짓인 경우
return -x;
}
}
// 팩터리얼을 계한하는 함수 정의.
function factorial(n) {
var product = 1;
while(n > 1) { // 조건이 참인 경우
product *= n;
n--;
}
return product;
}
factorial(4) // => 24 : 1 * 4 * 3 * 2
// 루프를 사용한 패터리얼 함수 정의.
function factorial2(n) {
var product = 1;
for(i = 2; i <= n; i++) {
product *= i;
}
return product;
}
factorial2(5) // => 120 : 1* 2 * 3 * 4 * 5
자바스크립트는 객체 지향 언어지만,
기존의 객체 지향 언어와 비교하면 문법과 표현 양식면에서 형태가 전혀 다름.
아래는 2차원 좌표계를 표현하는 방법을 통한 클래스 정의 방법에 대한 예제.
// 객체를 초기화하기 위해 생성자 함수를 정의.
// 일반적으로 생성자 이름의 첫 글자는 대문자로 시작.
// this 키워드는 새로 생성된 객체를 가리킴.
// 생성자로 전달된 인자는 객체의 프로퍼티로 저장.
function Point(x, y) {
this.x = x;
this.y = y;
}
// new 키워드로 객체를 생성할 때 앞에서 정의한 생성자 함수를 사용.
var p = new Point(1, 1);
// 생성자 함수 Point의 prototype 객체에 함수를 정의함으로서
// Point 객체에 메서드를 정의.
Point.prototype.r = function() {
// this는 이 메서드가 호출된 Point 객체를 가리킴.
return Math.sqrt(this.x * this.x + this.y * this.y);
}
// Point의 객체 p(뿐만 아니라 모든 Point 객체)는 메서드 r()을 상속 받음
p.r() // => 1.414...
클라이언트 측 자바스크립트 프로그래밍 기법의 기초 중
HTML 파일에 <script> 태그를 통해 자바스크립트 코드를 내장 할 수 있음.
<html>
<head>
<!-- 자바스크립트로 작성된 라이브러리를 포함 -->
<script src = "library.js"/>
</head>
<body>
<p>
p 태그는 HTML에서 문단을 뜻함.
</p>
<script>
이 부분은 HTML 파일 안에 내장한 클라이언트 측 자바스크립트의 일부.
</script>
<p>
그 밖에 다른 HTML 태그가 올 수 있음.
</p>
</body>
</html>
HTML 문서에 포함된 특정 엘리먼트를 찾거나,
찾은 HTML 엘리먼트의 속성을 다루는 방법
혹은 엘리먼트에 표현된 콘텐츠 내용을 바꾸거나
문서에 새로운 엘리먼츠를 추가하는 방법을 설명.
아래 예제를 통해 기초적인 문서 탐색과 수정 기법을 확인.
// 문서의 디버깅 영역에 메시지를 출력.
// 만약 디버깅 영역이 존재하지 않으면 생성.
function debug() {
// id 속성을 사용하여 문서에서 디버깅을 위한 영역을 찾음
var log = document.getElementById("debug");
// 만약 id 속성이 "debuglog"인 앨리먼트가 없으면 임의로 생성.
if(!log) {
log = document.createElement("div"); // <div> 앨리먼트 생성
log.id = "debuglog" // 앨리먼트의 id 값을 "debuglog"로 설정
log.innerHTML = "<h1>Debug Log</h1>"; // 처음 보여줄 엘리먼트의 내용 정의
document.body.appendChild(log); // 문서의 끝에 엘리먼트를 추가
}
// 메시지를 <pre> 엘리먼트의 텍스트 노드로 설정한 후
// 디버깅 영역에 출력.
var pre = document.createElement("pre"); // <pre> 엘리먼트 생성
var text = document.createTextNode(msg); // 텍스트 노드 생성 후 초기 값을 msg로 설정
pre.appendChild(text); // 텍스트 노드를 <pre>에 추가
log.appendChild(pre); // <pre> 엘리먼트를 디버깅 영역에 추가
}반응형
'웹 > 공부' 카테고리의 다른 글
| YOU DON`T KNOW JS(타입과 문법, 스코프와 클로저) : 2 (0) | 2022.04.19 |
|---|---|
| YOU DON`T KNOW JS(타입과 문법, 스코프와 클로저) : 1 (0) | 2022.04.18 |
| JavaScript - The Definitive Guide 6/E(자바스크립트 완벽 가이드) : 4 (0) | 2019.10.30 |
| JavaScript - The Definitive Guide 6/E(자바스크립트 완벽 가이드) : 3 (0) | 2019.10.29 |
| JavaScript - The Definitive Guide 6/E(자바스크립트 완벽 가이드) : 2 (0) | 2019.10.11 |