JS(String, Array, Math객체)

내장객체

• 사전에 객체이름과 함수이름들을 통일해서 구현한 뒤, 브라우저안에 내장시킴.

내장객체 종류(1)

javasctipt 내장객체

내장객체의 종류(2)

이름	설명
Date	시스템의 현재 날짜,시각을 조회하거나 계산하기 위한 기능을 제공한다.
Array	같은 종류의 변수를 하나로 묶기 위한 배열에 관련된 기능을 제공한다.
String	하나의 문자열은 독립된 객체로 생성된다. 문자열안에서 특정글자가 시작하는위치, 문자열안에서 원하는 내용만 추출하는등의 기능을 제공한다.
Math	수학과 관련된 각종 고급함수를 제공한다. (삼각함수,지수,로그등) 일반적으로 잘 사용되지 않는다.

내장객체의 종류(3) - HTML 문서를 제어하기 위한 내장객체

이름	설명
document	문서에 대한 정보, 즉 HTML문서의 각 요소들을 제어하기 위한 기능을 갖는다.
image	<img>태그에 대한 속성을 제어하는 객체이다.
form	입력양식 컴포넌트를 위한 개별 객체들을 포함한다.
frame	웹페이지 안에 다른 웹페이지를 포함하는 Frameset과 iframe을 제어하는 기능을 제공한다.

 

---

String 객체

• 문자열자체가 객체라는 것은 우리가 만든 문자열 변수안에는 메서드(함수)나 프로퍼티(변수)들이 포함되어 있다는 것을 의미.
• 이 메서드들은 주로 문자열에 있는 특정 값을 검사 하거나, 원하는 내용만 추출하는 기능을함.
• 이러한 기능들을 조합하여 문자열을 제어하는 과정을 문자열 파싱(Parssing) 이라고 함.

String 객체가 제공하는 기능

// 기능을 확인하기 위한 문자열의 선언 (대소문자가 섞여있다.)
var url = "http://WWW.ITPAPER.CO.KR/index.php";
document.write("<p>문자열 : " + url + "</p>");
// -> 문자열 : http://WWW.ITPAPER.CO.KR/index.php

// length : 문자열의 글자 수를 리턴.
var len = url.length;
document.write("<p>문자열의 길이 : " + len + "</p>");
// -> 문자열의 길이 : 34

// .charAt() : 파라미터로 설정된 위치의 글자를 리턴.
var str2nd = url.charAt(2);
document.write("<p>두번째 글자 : " + str2nd + "</p>");
// --> 두번째 글자 : t

// .indexOf() : 파라미터로 전달된 글자가 처음 나타나는 위치를 리턴
var position1 = url.indexOf("/");
document.write("<p> '/'가 처음 나타나는 위치 : " + position1 + "</p>");
// --> '/'가 처음 나타나는 위치 : 5

// indexOf에 파라미터가 두 개인 경우,
// 두 번째 숫자 값은 첫 번째 파라미터의 글자를 찾기 시작하는 위치를 의미
var position2 = url.indexOf("/", position1 + 1);
document.write("<p>'/'가 두번째로 나타나는 위치 : " + position2 + "</p>");
// --> '/'가 두번째로 나타나는 위치 : 6

// .lastIndexOf : 파라미터로 전달된 글자가 마지막으로 나타나는 위치를 리턴
// 단, 이 위치를 문자열의 끝에서 부터 세는 것이 아니라,
// 문자열의 처음부터 센다.
var position3 = url.lastIndexOf("/");
document.write("<p>'/'의 마지막 위치 : " + position3 + "</p>");
// --> '/'의 마지막 위치 : 24

// 잘라내기 위한 시작 위치와 끝 위치를 파라미터로 설정
var substring1 = url.substring(0, 5);
document.write("<p>문자열 자르기 : " + substring1 + "</p>");
// --> 문자열 자르기 : http:

// 두 번째 파라미터가 없을 경우 7번째 부터 끝까지 자른다
var substring2 = url.substring(7);
document.write("<p>문자열 자르기 : " + substring2 + "</p>");
// --> 문자열 자르기 : WWW.ITPAPER.CO.KR/index.php

// .toUpperCase() : 모든 글자를 대문자로 변환
var up = url.toUpperCase();
document.write("<p>모든 글자의 대문자 변환 : " + up + "</p>");
// --> 모든 글자의 대문자 변환 : HTTP://WWW.ITPAPER.CO.KR/INDEX.PHP

// .toLowerCase() : 모든 글자를 소문자로 변환
var low = url.toLowerCase();
document.write("<p>모든 글자의 소문자 변환 : " + low + "</p>");
// --> 모든 글자의 소문자 변환 : http://www.itpaper.co.kr/index.php

 

---

Array(배열) 객체

• 변수를 그룹으로 묶은 형태의 한 종류로, 사물함 같은 형태를 갖고있음.
• 대부분의 프로그래밍 언어에서는 한 배열안에는 같은 데이터타입만 저장할 수 있지만
• 'Javascript' 에서는 데이터타입에 구애받지 않는다.
• 다른 프로그래밍 언어와 마찬가지로 배열안의 값들은 0부터 시작하는 인덱스번호를 부여 받는다.

배열 만드는 방법

var exam = new array (a, b, c, ~~~, z);
var exam = [a, b, c, ~~~, z];

// 두번째 방법을 권장.

Array 객체 사용법

// 배열의 생성
var myarray = new Array("펭수", "ebs", "캐릭터");
// var myarray = ["펭수", "ebs", "캐릭터"]; <= 이 방법도 가능.

// 배열에 저장된 값들 읽기
document.write("<h1>" + myarray[0] + "</h1>");    // 펭수
document.write("<h1>" + myarray[1] + "</h1>");    // ebs
document.write("<h1>" + myarray[2] + "</h1>");    // 캐릭터

// 배열에 저장된 값 변경(할당)
myarray[0] = "신논현";
myarray[1] = "컴퓨터";
myarray[2] = "자바스크립트";

document.write("<h1>" + myarray[0] + "</h1>");    // 신논현
document.write("<h1>" + myarray[1] + "</h1>");    // 컴퓨터
document.write("<h1>" + myarray[2] + "</h1>");    // 자바스크립트

빈 배열 만들기

다른 프로그래밍과는 달리 javascript에서는 한번 결정된 배열의 크기를 늘리거나 줄일 수 있다.

// 방법 1
var exam = new exam();

// 방법 2
var exam = [];

 

---

Math 객체

• Math 객체는 최대값, 최소값, 지수, 로그 등 수학의 고급함수들에 대한 연산 기능 제공

Math 객체가 제공하는 함수

// Math.max(x,y) : 두 수 중에서 최대값
var max = Math.max(100, 123);
document.write("<h1>" + max + "</h1>");
// -> 123

// Math.min(x,y) : 두 수 중에서 최소값
var min = Math.min(100, 123);
document.write("<h1>" + min + "</h1>");
// -> 100

// Math.PI :  원주율(3.141592...)
document.write("<h1>" + Math.PI + "</h1>");
// -> 3.1415926535...

// Math.round(x) : 소수점 반올림
var num1 = 3.6813;
document.write("<h1>" + Math.round(num1) + "</h1>");
// -> 4

// Math.ceil(x) / .floor(x) : 소수점 올림 /  내림
document.write("<h1>" + Math.ceil(num1) + "</h1>");	// -> 4
document.write("<h1>" + Math.floor(num1) + "</h1>");	// -> 3

// Math.abs(x) : 절대값으로 변환
var num2 = -321;
document.write("<h1>" + Math.abs(num2) + "</h1>");
// -> 321

// Math.random(x,y) :  x ~ y사이의 값 중 난수 생성(random 값), 값 지정 안하면 0 ~ 1 사이 값 중 랜덤
document.write("<h1>" + Math.random() + "</h1>");

Math 객체활용 : 인증번호 생성

function random(n1, n2) {
    return parseInt(Math.random() * (n2 - n1 + 1)) + n1;
}
// 함수의 결과 확인
var num = random(0, 9);
document.write("<h1>0~9 사이의 난수: " + num + "</h1>");

// 함수의 응용 -> 5자리 인증번호 생성
  var auth = "";
for (var i = 0; i < 5; i++) {
    auth += random(0, 9);
}
document.write("<h1>인증번호 : " + auth + "</h1>");