221019 Javascript #5

김혜진·2022년 10월 19일

JavaScript 객체 배열 함수

Javascript

목록 보기

4/9

객체

웹에서의 객체

웹 문서에서 다룰 수 있는 모든 대상들
예를 들면 배열 기능의 Array, 날짜 기능의 Date 등을 객체라고 한다.

Date 객체의 사용형태

Date 객체의 생성은 new 연산자를 통해서 해주어야 한다.

Date 객체에서 지원하는 메소드

 <script>
        var cdate = new Date();

        document.write('오늘의 날짜는');
        document.write((cdate.getYear() + 1900) + "년") ;
        document.write((cdate.getMonth() + 1) + "월") ;
        document.write(cdate.getDate() + "일 <br/>") ;

        document.write('현재 시간은');
        document.write((cdate.getHours()) + "시") ;
        document.write((cdate.getMinutes() + 1)  + "분") ;
        document.write((cdate.getSeconds()) + "초 <br/>") ;
    </script>

String 객체

String 객체의 사용 형태

문자열을 객체화시켜 사용한다.
var str1 = new String("javascript")
var str2 = "javascript"
new 연산자를 사용하여 인스턴스를 생성하기도 하지만, new 연산자 없이 바로 "" 안에 문자열을 대입해도 똑같은 결과를 가져온다.

        // ──────── String 객체 ────────
        var str1 = "사람이";
        var str2 = "아니므니다";
        var result = str1 + str2;
        alert(result)

String 객체에서 지원하는 메소드

String 객체 위치 검색 관련 메소드
문자열의 위치는 전체 문자열의 맨 앞을 0으로 시작하여 인덱스가 증가한다.
charAt() 메소드 - 문자열의 해당 인덱스 위치의 문자 반환
문자열.charAt(인덱스)

        // ──────── charAt() ────────
        var str = '하늘과 바람과 별과 시';
        var retVal = str.charAt(4);
        alert(retVal);

String 객체 추출 관련 메소드

전체 문자열에서 필요에 따라 일부 문자열만 추출할 수 있다.
slice() / substring() 메소드

       // ──────── slice() ────────
        var str = '하늘과 바람과 별과 시';
        var retslice = str.slice(4, 7);
        alert(retslice);

        // ──────── substring() ────────
        var str = '하늘과 바람과 별과 시';
        var retsubstring = str.substring(4, 7);
        alert(retsubstring);

substr() 메소드 - 시작 인덱스와 추출 문자열의 길이를 입력받는다.

      // ──────── substr() ────────
        var str = '하늘과 바람과 별과 시';
        var retsub = str.substr(4, 6);
        alert(retsub)

String 객체 폰트 관련 메소드

        var str = '하늘과 바람과 별과 시';
        var name = '윤동주';
        var mystr = str.fontcolor('blue');
        mystr = mystr.italics();
        mystr = mystr.fontsize(6);
        mystr = mystr.bold();
        mystr = mystr  + '' + name.sub();
        document.write(mystr);

Array 객체

Array 객체의 사용 형태

new 연산자를 사용하여 인스턴스 생성
인스턴스 = new Array()
인스턴스 = new Array(배열의 크기)
배열 고려하지 않고 변수 선언
var january;
var february
...
var December;
배열로 변수 선언
var month = new Array();
var month = new Array(12);

        var month = new Array(1,2,3,4,5,6,7,8,9,10,11,12);

        alert(month[0]);
        alert(month[9]);

        month.push(13);
        alert(month[12]);

Array 객체의 지원 속성 및 메소드

Array 객체의 메소드
concat() 메소드 - 두 개의 배열을 하나로 합치는 경우

        // ──────── concat() ────────
        var major = new Array("컴퓨터 공학", "전자공학", "제어계측");
        var minor = new Array("국문학", "영문학", "경영학");
        var total = major.concat(minor);

        document.write('전공/부전공 리스트 : ' + total + '<p>');
        document.write('전공/부전공 역순 : ' + total.reverse());

        // ──────── concat() ────────
        var month = new Array(1,2,3,4,5,6,7,8,9,10,11,12);
        var major = new Array("컴퓨터 공학", "전자공학", "제어계측");
        var minor = new Array("국문학", "영문학", "경영학");
        var total = major.concat(minor);

        document.write('전공/부전공 리스트 : ' + total + '<p>');
        document.write('전공/부전공 역순 : ' + total.reverse() + '<p>');

        var retrevere = month.reverse();
        document.write('월별 리스트 : ' + retrevere + '<p>');

        var sortNum = retrevere.sort(function(left, right) {
            return left - right; // 오름차순
        }) 
        document.write('월별 리스트 정렬 : ' + sortNum + '<p>')

Function 객체

함수를 객체처럼 사용할 수 있다는 의미

Function 객체의 사용 형태

new 연산자를 사용하여 Function 객체의 인스턴스를 생성
Function 객체에 여러 개의 전달 인자를 대입하기도 하고, 계산식을 대입하기도 한다.

        // ──────── Function() 객체 ────────    
        var myAdd = new Function('x, y' , 'return(x + y)');
        alert('두 수의 합 : ' + myAdd(10, 20));