국비 40일차 Javascript (객체 BOM DOM)

2021. 3. 5. 18:35

2021.03.05 국비교육 40일차

[TOC]

객체(Object)

  • 프로퍼티 + 메소드
  • 내장객체
    • 데이터관련 : String, Number, Date, Array, Boolean, Object, Math, RegExp
    • 브라우저 관련 : Window, Screen, Location, History, Navigator
    • HTML 관련 : DOM

string

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">

    //문자열 생성하는 방법
    //가. new생성
    var s = new String("Hello");

    //나. 리터럴 이용
    var s2 = "Hello";
    console.log(s, s2);

    console.log("문자열 길이 : ", s.length); //5
    console.log("특정문자구하기", s.charAt(0)); //H
    var ss = s.concat(" world"); //Hello world
    console.log("문자열 연결", ss);
    var ss2 = s.concat(" aa", "bbb"); //Hello aabbb
    console.log("문자열 연결2", ss2);

    //////////////////////////////////////////////////////

    console.log("특정문자위치", ss.indexOf('e')); //1
    console.log("부분열", s.substring(1,3)); //el substring(start, end)
    console.log("부분열", s.substr(1,3)); //ell substr(start, length)
    console.log("대문자", s.toUpperCase());
    console.log("소문자", s.toLowerCase());

    var xx = "Hello world happy";
    var arr = xx.split(" ");
    for(var i in arr){
        console.log(arr[i]);
    }

    var xx2 = "Hello/World/happy/xxx/yyy";
    var arr2 = xx2.split("/", 3); // 3은 개수
    for(var i in arr2){
        console.log(arr2[i]);
    }

    var kk = "Hello";
    console.log("replace", kk.replace("H", "A"));
    var kk2 = "         world       ";
    console.log(kk2.length, kk2.trim().length);


</script>

</head>

<body>
</body>
</html>

Number

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">

    //수치 데이터 작성 방법
    //1. new
    var n = new Number(10);

    //2. 리터럴
    // valueOf()는 정수값으로 리턴
    // toString()은 문자열로 리털
    var n2 = 10;
    console.log(n.valueOf(), n2, n.toString());

    var x = 5.7354;
    console.log(x.toFixed(2)); // 소수점 2자리
    console.log(x.toFixed()); // 반올림
    console.log(x.toFixed(10)); //

    // NaN
    var xyz = parseInt("aaa");
    console.log(xyz);


</script>

</head>

<body>
</body>
</html>

Date

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
    // 날짜 생성
    var d = new Date();
    console.log(d);
    console.log("1970/1/1~현재", d.valueOf());
    console.log("년도", d.getFullYear()); // getYear() deprecated//2021
    console.log("월", d.getMonth() + 1); // 0~11이라서 1더해줘야함
    console.log("일", d.getDate());
    console.log("시간", d.getHours());
    console.log("분", d.getMinutes());
    console.log("초", d.getSeconds());

    //변경
    d.setFullYear(2020);
    d.setMonth(7);
    d.setDate(20);
    console.log(d);

    //요일 구하기
    var dd = new Date();
    var str;
    console.log(dd.getDay());
    switch (dd.getDay()) { // 0: 일요일
    case 0:
        str = "일요일";
        break;
    case 1:
        str = "월요일";
        break;
    case 2:
        str = "화요일";
        break;
    case 3:
        str = "수요일";
        break;
    case 4:
        str = "목요일";
        break;
    case 5:
        str = "금요일";
        break;
    default:
        str = "주말";
        break;
    break;
}
    console.log( "오늘은 " + str );

    var hours = dd.getHours();
    var minute = dd.getMinutes();
    var sec = dd.getSeconds();
    console.log(hours +"시 \t" + minute +"분 \t" + sec +" 초");

</script>

</head>

<body>
</body>
</html>

Boolean

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
    //boolean 값으로 명시적으로 변경
    var a = new Boolean(1);
    var b = new Boolean("Hello");
    var c = new Boolean(0);
    var d = new Boolean(null);
    console.log(a.valueOf(), a.toString());
    console.log(b.valueOf(), b.toString());
    console.log(c.valueOf(), c.toString());
    console.log(d.valueOf(), d.toString());

</script>

</head>

<body>
</body>
</html>

Array

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
    //배열 생성 방법
    var a= new Array("A", "B", "C", 10, true); //0~4
    console.log("배열길이", a.length);
    console.log("요소구하기", a[0], a[1]);

    var b = new Array();
    b[0] = 'AAA';
    b[1] = 'BBB';
    b[2] = 'CCC';
    console.log("요소구하기", b[0], b[1], b[2]);

    var c = new Array();
    c.push(10);
    c.push(20);
    c.push(30);
    c.push(40);

    console.log("요소구하기", c[0], c[1], c[2], c[3]);

    //반복문
    for(var i=0;i<c.length;i++){
        console.log(">>", c[i]);
    }

    for(var i in c){
        console.log(c[i]);
    }
</script>

</head>

<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
    //배열 생성 방법

    var a= [10,20,30]; //[] 사용
    a.push(40);
    for(var i in a){
        console.log(a[i]);
    }
    for(var i of a){ //i = data
        console.log(i);
    }
    ////////////////////////

    var b = [];
    b[0] ='A';
    b.push('B');
    for(var i in b){
        console.log(">>", b[i]);
    }
</script>

</head>

<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
    //배열 생성 방법

    var a= [10,20,30]; //[] 사용
    a.push(40);
    for(var i in a){
        console.log(a[i]);
    }
    for(var i of a){ //i = data
        console.log(i);
    }
    ////////////////////////

    var b = [];
    b[0] ='A';
    b.push('B');
    for(var i in b){
        console.log(">>", b[i]);
    }
</script>

</head>

<body>
</body>
</html>

BOM (Browser Object Model)

  • window객체
  • Navigator객체
  • Screen 객체
  • History객체
  • Location 객체

window

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    var child;
    function yyy(){
        child = window.open("01child.html", "childName", "width=200, height=300");
    }

    function yyy2(){
        child.close();
    }

    function yyy3(){
        window.close();
    }

</script>
</head>
<body>
여기는 부모창입니다.<br>
<button onclick = "yyy()">창생성</button>
<button onclick = "yyy2()">자식창 닫기</button>
<button onclick = "yyy3()">부모창 닫기</button>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    function xxx(){
        window.close();
    }

    function xxx2(){
        opener.close();
    }

</script>
</head>
<body>
자식창 입니다.<br>
<button onclick = "xxx()">창 닫기</button>
<button onclick = "xxx2()">부모창 닫기</button>
</body>
</html>

navigator

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    ////브라우저 정보 출력
    console.log("브라우저 이름", navigator.appName);
    console.log("브라우저 버전", navigator.appVersion);
    console.log("쿠키사용여부", navigator.cookieEnabled);
    console.log("브라우저 언어", navigator.language);
    console.log("브라우저 onLine", navigator.onLine);
    console.log("헤더정보", navigator["userAgent"]);
</script>
</head>
<body>

</body>
</html>

screen

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">

    //화면 정보 출력
    console.log(screen.width, screen.height);
    console.log(screen.availWidth, screen.availHeight); // 태스크바 제외
</script>
</head>
<body>

</body>
</html>

history

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
현재 05history.html 입니다.<br>
<a href = "05history2.html">next</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function back(){
    history.back(); // 이전페이지 이동
}

</script>
</head>
<body>
현재 05history2.html 입니다.<br>
<a href = "javascript:back()">이전으로</a>
<a href = "05history3.html">next</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
document.write(history.length+"<br>"); //브라우저
function back(){
    history.back(); // 이전페이지 이동
}

function home(){
    console.log(history.length);
    history.go(-2);
}

</script>
</head>
<body>
현재 05history3.html 입니다.<br>
<a href = "javascript:back()">이전으로</a>

</body>
</html>

loaction

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    console.log(location.origin);
    console.log(location.pathname);
    console.log(location.hostname);
    console.log(location.host);
    console.log(location.protocol);
    console.log(location.port);
    /////////////////////////////////////
    function xxx(){
        location.reload();
    }

    function yyy(){
        location.href="http://www.google.com"
    }

</script>
</head>
<body>
<button onclick = "xxx()">reload</button>  <!-- 새로고침 -->
<a href = "javascript:yyy()">구글</a> 
</body>
</html>

DOM (Document Object Model)

  • 웹페이지의 HTML 문서구조를 객체로 표현하기 위한 계층 구조
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- DOM 접근을 위해 바디 아래부분에 포함하기도 함-->
<script type="text/javascript">
    function login(){

        //body로 직접 접근 가능
        var body = document.body;
        console.log(body);
        var classes = document.getElementsByClassName("kkk"); //class 이름을 사용 - 이름만 기재
        console.log("classes", classes); // 여러개 선택결과가 배열로 관리됨

        //input 태그명을 접근
        var inputs = document.getElementsByTagName("input"); // 태그명 input
        console.log(inputs); //여러개 배열로 관리
        var id = inputs[0]; // input - id
        console.log(id);
        console.log(id.value); 
        var pw = inputs[1]; //input - pw
        console.log(pw.value);

        // 태그 name 속성명 이용
        var xx =document.getElementsByName("userid");
        console.log(xx);

        // id 속성으로 접근 - 가장 자주 사용
        var id2 = document.getElementById("xxx"); // # 사용안함
        console.log(id2); //<input type = "text" id = "xxx" name = "userid" class ="kkk" value ="zzz">
        var pw2 = document.getElementById("yyy");
        console.log(id2.value, pw2.value); //<input type = "password" id = "yyy" name = "passwd" class = "kkk" value ="xx">
        console.log(document.getElementById("xxx").value);
        document.getElementById("xxx").value = "~~~";
    }


</script>
</head>

<body>
아이디<input type = "text" id = "xxx" name = "userid" class ="kkk" value ="zzz"><br>
비밀번호<input type = "password" id = "yyy" name = "passwd" class = "kkk" value ="xx"><br>

<button onclick="login()">로그인</button>



</body>
</html>

계산기 예제

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

    값1
    <input type="text" name="val1" id="v1">
    <br>
    <!-- name : 서버쪽에서 데이터 받을때 key값으로 사용 -->
    값2
    <input type="text" name="val2" id="v2">
    <br>

    <button onclick="plus()">+</button>
    <button onclick="minus()">-</button>
    <button onclick="multiply()">*</button>
    <button onclick="divide()">/</button>
    <br> 결과값
    <input type="text" name="result" id="result">

    <script type="text/javascript">

        function plus() {
            var v1 = document.getElementById("v1").value;
            var v2 = document.getElementById("v2").value;
            var result = document.getElementById("result");

            result.value= parseInt(v1) + parseInt(v2);
        }

        function minus() {
            var v1 = document.getElementById("v1").value;
            var v2 = document.getElementById("v2").value;
            var result = document.getElementById("result");

            result.value = parseInt(v1) - parseInt(v2);
        }

        function multiply() {
            var v1 = document.getElementById("v1").value;
            var v2 = document.getElementById("v2").value;
            var result = document.getElementById("result");

            result.value = parseInt(v1) * parseInt(v2);
        }

        function divide() {
            var v1 = document.getElementById("v1").value;
            var v2 = document.getElementById("v2").value;
            var result = document.getElementById("result");

            result.value = parseInt(v1) / parseInt(v2);
        }
    </script>

</body>
</html>

'ETC > 국비교육' 카테고리의 다른 글

국비 42일차 Javascript DOM level 0, DOM level 2 이벤트 처리  (0) 2021.03.09
국비 41일차 Javascript ( onload, onclick, onchange, onkeyup 활용)  (0) 2021.03.08
국비 39일차 Javascript 함수 + 응용  (0) 2021.03.04
국비 38일차 Javascript operator  (0) 2021.03.03
국비 37일차 CSS(position, overflow, float) + javascript 기초  (0) 2021.03.02

+ Recent posts

티스토리툴바