ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [JAVASCRIPT] 객체(내장 객체)
    JAVASCRIPT 2021. 7. 21. 11:29

    공부날짜 : 2021.07.19

    참조 : Do it! 자바스크립트 + 제이쿼리 입문

     

    자바스크립트에서 기능들을 메소드(method)라고 하며 객체들은 속성(property)을 가지고 있다.

     

    *객체의 종류

    내장 객체 자바스크립트 엔진에 내장되어 있어서 필요한 경우에 생성하여 사용
    (Date, String, Math 등)
    브라우저 객체 모델(BOM) 브라우저에 계층구조로 내장되어 있는 객체
    (window, location, history 등)
    * 자바스크립트의 최상위 계층 : window
    문서 객체 모델(DOM) HTML 문서 구조

     

     

    1. 내장 객체

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <script>
            var tv=new Object();
            tv.color="white";
            tv.price=300000;
            tv.info=function(){
                document.write("tv 색상 : "+this.color,"<br>");
                document.write("tv 가격 : "+this.price,"<br>");
            }
    
            var car={
                color:"black",
                price:5000000,
                info:function(){
                    document.write("car 색상 : "+this.color,"<br>");
                    document.write("car 가격 : "+this.price,"<br>");
                }
            };
    
            document.write("<h1>tv객체 메서드 호출</h1>");
            tv.info();
            document.write("<h1>car객체 메서드 호출</h1>");
            car.info();
    
        </script>
    </body>
    </html>

    하나씩 속성을 지정해줄 때는 객체명.속성명=값 을 사용하고, 

    Object 안에서 속성을 지정해줄 때는 {속성명: 값} 을 사용한다.

     

    변수를 var로 선언하면 지역변수,

    var로 선언하지 않으면 전역변수로 사용된다.

     

     

     

    2. 배열 객체

     

    javascript에서 배열 객체는 [ ]로 묶고, Object는 { }로 묶는다.

    java에서는 배열 객체를 { }로 묶는다.

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <script>
            var arr=[30, "따르릉", true];
    
            document.write("<h3>배열값 가져오기-1</h3>");
            document.write(arr[0],"<br>");
            document.write(arr[1],"<br>");
            document.write(arr[2],"<br>");
    
            document.write("<h3>배열값 가져오기-2</h3>");
            for(var i=0;i<arr.length;i++){
                document.write(arr[i],"<br>");
            }
    
            document.write("<h3>배열값 가져오기-3</h3>");
            for(i in arr){
                document.write(arr[i],"<br>");
            }
    
    </script>
    </body>
    </html>

     

     

    3. String 객체

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <script>
            var userEmail=prompt("당신의 이메일 주소는?","");
            var arrUrl=[".co.kr",".com",".net",".or.kr",".go.kr"];
    
            var check1=false;
            var check2=false;
    
            if(userEmail.indexOf("@")>0){check1=true;}
    
            for(var i=0;i<arrUrl.length;i++){
                if(userEmail.indexOf(arrUrl[i])>0){
                    check2=true;
                }
            }
    
    if(check1&&check2){
        document.write(userEmail);
    }else{
        alert("이메일 형식이 잘못되었습니다.")
    }
    
        </script>
    </body>
    </html>

    해당 형식이 맞지 않으면 경고 창이 뜨게 된다!

     

    'JAVASCRIPT' 카테고리의 다른 글

    [JAVASCRIPT] 객체(브라우저 객체 모델)  (0) 2021.07.21
    [JAVASCRIPT] 자바스크립트 기초 문법  (0) 2021.07.18
Designed by Tistory.