Category: JavaScript

자바스크립트에서 수학과 관련된 메소드에 대해 알아보자.

1. Math.abs() 메소드

Math.abs() 메소드는 주어진 수의 절대값을 리턴한다.

document.write(Math.abs(-5));    // 5 를 출력한다.
document.write(Math.abs(5));    // 5 를 출력한다.
document.write(Math.abs(0));    // 0 을 출력한다.

2. Math.round() 메소드

Math.round() 메소드는 주어진 수를 반올림하여 리턴한다.

document.write(Math.round(2.49));    // 2 를 출력한다.
document.write(Math.round(2.51));    // 3 을 출력한다.
document.write(Math.round(2.5));    // 3 을 출력한다.

주어진 수가 음수인 경우를 살펴보자.

document.write(Math.round(-2.49));    // -2 를 출력한다.
document.write(Math.round(-2.51));    // -3 을 출력한다.
document.write(Math.round(-2.5));    // -2 를 출력한다.

3. Math.ceil() 메소드

Math.ceil() 메소드는 주어진 수를 올림하여 리턴한다.

document.write(Math.ceil(2.2));    // 3 을 출력한다.
document.write(Math.ceil(2.7));    // 3 을 출력한다.
document.write(Math.ceil(-2.2));    // -2 를 출력한다.
document.write(Math.ceil(-2.7));    // -2 를 출력한다.

4. Math.floor() 메소드

Math.floor() 메소드는 주어진 수를 버림하여 리턴한다.

document.write(Math.floor(2.2));    // 2 를 출력한다.
document.write(Math.floor(2.7));    // 2 를 출력한다.
document.write(Math.floor(-2.2));    // -3 을 출력한다.
document.write(Math.floor(-2.7));    // -3 을 출력한다.

5. Math.random() 메소드

Math.random() 메소드는 0 이상이고 1 미만인 무작위 수를 리턴한다.

document.write(Math.random());    // 0.49081443801638636 를 출력한다. 0 과 1 사이에 있는 무작위 수이다.

Math.random() 메소드를 이용해서 0 과 99 사이의 정수를 출력해 보자.

var randomInt = Math.floor(Math.random() * 100);
document.write(randomInt);    // 57, 33, 25, 71 등을 출력한다. 0 과 99 사이의 무작위 수이다.

자바스크립트에서 배열을 다루는 방법을 알아보자.

1. 배열의 생성

배열은 2가지 방법으로 만들 수 있다. 하나는 배열 리터럴 (literal) 을 이용한 방법이고 다른 하나는 new 키워드를 이용한 방법이다.

배열 리터럴로 배열을 생성한다.

var numberArray = [10, 20, 30, 40, 50];

new 키워드로 배열을 생성한다.

var numberArray = new Array(10, 20, 30, 40, 50);

2. 배열 요소에 접근하는 방법

배열 요소를 지정할 때는 배열 인덱스를 사용한다. 배열 인덱스는 1이 아니라 0부터 시작한다.

document.write(numberArray[0]);    // 10 을 출력한다.
document.write(numberArray[2]);    // 30 을 출력한다.
document.write(numberArray[4]);    // 50 을 출력한다.

3. 배열의 길이 구하기

배열의 길이는 배열 요소의 개수를 의미한다.

length 프로퍼티로 배열의 길이를 구해 보자.

document.write(numberArray.length);    // 5를 출력한다.

4. 배열 요소 추가하기

배열 요소를 추가할 때는 push() 메소드를 쓴다.

var numberArray = [10, 20, 30];
numberArray.push(40, 50);    // 40 과 50 을 추가한다.
ducument.write(numberArray);    // 10,20,30,40,50 을 출력한다.

5. 배열 요소 삭제하기

배열 요소를 삭제할 때는 pop() 메소드를 쓴다.

var numberArray = [10, 20, 30, 40, 50];
var lastElement = numberArray.pop();    // 마지막 배열 요소를 배열에서 삭제하고 변수에 저장한다.
ducument.write(numberArray);    // 10,20,30,40 을 출력한다.
ducument.write(lastElement);    // 50 을 출력한다.

6. 배열 요소 검색하기

배열 요소를 검색하여 인덱스를 구할 때는 indexOf 메소드를 쓴다.

var numberArray = [10, 20, 30, 40, 50];
ducument.write(numberArray.indexOf(30));    // 2 를 출력한다.
ducument.write(numberArray.indexOf(10));    // 0 을 출력한다.
ducument.write(numberArray.indexOf(80));    // -1 을 출력한다.

indexOf() 메소드는 배열 요소의 검색에 실패할 때 -1 을 리턴한다.

1. setTimeout() 함수

setTimeout() 함수는 일정한 시간이 경과한 후 함수나 코드를 실행한다. 시간은 밀리 초 단위이다.

테스트를 위한 함수를 작성한다.

function testFunc() {
  alert('testing...');
}

1초 후에 testFunc() 함수가 실행되도록 세팅한다.

setTimeout(testFunc, 1000);

함수에 매개변수가 있는 경우를 살펴 보자.

function add(a, b) {
  sum = a + b;
  alert(a + ' + ' + b + ' = ' + sum);
}

1초 후에 add() 함수가 실행되도록 세팅한다.

setTimeout(add, 1000, 99, 88);

setTimeout() 함수의 세번째 인자와 네번째 인자가 add() 함수에 전달된다.

함수 대신 코드가 실행되도록 해 보자.

setTimeout() 함수의 첫번째 인자로 실행할 코드를 지정한다. 코드의 자료형은 문자열이다.

setTimeout(“alert(‘testing…’)”, 1000);

2. setInterval() 함수

setInterval() 함수는 일정한 시간마다 주기적으로 함수나 코드를 실행한다. 시간은 밀리 초 단위이다.

testFunc() 함수가 3초에 한번씩 반복해서 실행되도록 해 보자.

setInterval(testFunc, 3000);

3. clearTimeout() 함수와 clearInterval() 함수

clearTimeout() 함수는 setTimeout() 함수의 작동을 중단시킨다.

clearInterval() 함수는 setInterval() 함수의 작동을 중단시킨다.

setInterval() 함수의 작동을 중단시켜 보자.

setInterval() 함수를 실행할 때 해당 함수의 ID 를 변수에 저장한다.

var intervalId = setInterval(testFunc, 3000);

30초 후에 setInterval() 함수가 중단되도록 세팅한다.

setTimeout(“clearInterval(intervalId)”, 30000);

clearInverval() 함수의 인자로 intervalId 변수가 사용되었다.

자바스크립트를 이용해서 HTML 엘리먼트에 스타일을 적용하는 방법을 알아보자.

다음과 같이 id 가 example 인 p 엘리먼트가 있다고 하자.

<p id=”example”>자바스크립트 예제</p>

엘리먼트를 선택한다.

var exam = document.getElementById(“example”);

폰트의 색상을 노란색으로 바꾼다.

exam.style.color = “yellow”;

폰트의 크기를 2배로 키운다.

exam.style.fontSize = “2em”;

스타일 속성의 이름이 font-size 가 아니라 fontSize 라는 점에 유의한다.

HTML 엘리먼트 스타일의 속성값을 읽는 방법을 알아보자.

다음과 같은 p 엘리먼트가 있다고 하자.

<p id=”example” style=”color:yellow; font-size:2em;”>자바스크립트 예제</p>

엘리먼트를 선택한다.

var exam = document.getElementById(“example”);

스타일 속성값을 읽어 alert() 메소드로 출력한다.

alert(exam.style.color);    // yellow 를 출력한다.

alert(exam.style.fontSize);    // 2em 을 출력한다.

font-weight 속성의 값도 출력해 보자.

alert(exam.style.fontWeight);    // 아무 것도 출력하지 않는다.

font-weight 속성값이 출력되지 않는 이유는 해당 속성이 명시적으로 지정되지 않았기 때문이다.

엘리먼트의 모든 스타일 속성값을 읽으려면 window.getComputedSytle() 메소드를 사용한다.

엘리먼트의 모든 스타일 정보를 읽어 변수에 저장한다.

var cStyle = window.getComputedStyle(exam);

스타일 정보에서 font-weight 속성값을 읽어 변수에 저장한다.

var pValue = cStyle.getPropertyValue(“font-weight”);

alert() 메소드로 속성값을 출력한다.

alert(pValue);    // 700 을 출력한다.