220921_JavaScript_국비_내장함수/ 객체/ Array

<예시_1>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>javascript function</title>
    <style>
        body {
            font-family: consolas;
        }
    </style>
</head>

<body>
    <script>
        var a = '111';
        var b = '222';
        var k = 'AAA';
        var c = a + b;
        var d = Number(a) + Number(b);
        var k1 = a + b + k;
        var k2 = Number(a) + Number(b) + Number(k);
        document.write('<h1>c : ' + c + '</h1>');
        document.write('<h1>d : ' + d + '</h1>');
        document.write('<h1>k1 : ' + k1 + '</h1>');
        document.write('<h1>k2 : ' + k2 + '</h1>');
    </script>
</body>

</html>

↓결과

<예시_2>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>javascript function</title>
    <style>
        body {
            font-family: consolas;
        }
    </style>
</head>

<body>
    <script>
        var a = 111;
        var b = 222;
        var c = a + b;
        var d = String(a) + String(b); //숫자를 문자로 변환
        document.write('<h1>c : ' + c + '</h1>');
        document.write('<h1>d : ' + d + '</h1>');
    </script>
</body>

</html>

↓결과

<예시_3>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript 내장함수</title>
</head>
<body>
    <script>
        function evalParseIntIsNaN(){
            var res = eval("2*3+4*6");
            document.write("eval(\"2*3+4*6\") : "+res+"<br><br>");

            var m = parseInt("32");
            document.write("parseInt(\"32\") : "+m+"<br><br>");
            
            var n = 0x32;
            document.write("parseInt(\"0x32\"): "+n+"<br><br>");
            
            //var n2 = parseInt("032");
            var n2 = 032;
            document.write("parseInt(\"032\") : "+n2+"<br><br>");

            //"hello"는 정수로 변환 할 수 없으므로 parseInt("hello")는 NaN 리턴
            n = parseInt("hello");

            if(isNaN(n)){ //ture
                document.write("hello는 숫자가 아닙니다");
            }
        }
    </script>
</body>
    <h3>eval(), parseInt(), isNaN() 함수 사용</h3>
    <hr>
    <script>
        evalParseIntIsNaN(); //함수호출
    </script>
</html>

↓결과

<예시_4>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>함수 만들기</title>
    <script>
        function gugudan(nn, mm){
            var bb = parseInt(nn);
            var dd = parseInt(mm);
	
    		 // 숫자가 아니거나 1보다 작거나 9보다 클때 조건
            if(isNaN(bb) || bb<1 || bb>9 || isNaN(dd) || dd<1 || dd>9){
                alert("잘못입력했습니다");
                return;
            }
            if(bb>dd){
                var temp = bb;
                bb = dd;
                dd = temp;
            }
            for(var j = bb; j<=dd; j++){
                for(var i = 2; i<=9; i++){
                    document.write(j+" x "+i+" = "+(j*i)+"<br>");
                }
                document.write("<br>");
            }
        }

    </script>
</head>
<body>
    <h3>구구단 출력 함수</h3>
    <hr>
    <script>
        var nn = prompt("첫 단을 입력하세요","");
        var mm = prompt("두번째단을 입력하세요","");

        gugudan(nn,mm);
    </script>
</body>
</html>

alert() : 사용자가 확인버튼을 누를때까지 메시지를 보여줌
확인버튼을 누르기전까지 나머지 부분과 상호작용 불가(모달 창 바깥에 있는 다른 행동(클릭) 불가)

↓결과

<예시_5>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript 입력 및 대화 생성</title>

</head>
<body>
    <h3>javascript 사용자 입력 및 대화</h3>
    <hr size="5" color="green">
    <div id="result"></div>

    <script>
         var result = document.getElementById("result");
        //var result = document.querySelector("#result");
        // document.getElementById()메서드는 주어진 문자열과 일치하는 id속성을 찾고
        // 이를 나타내는 Element객체를 반환
        // id는 문서내에 유일하기 때문에 특정 요소를 빠르게 찾을때 유용
        //document.querySelector : CSS선택자를 사용해 요소를 찾음
        // id인 경우 #을 붙이고 class인 경우 .을 붙여서 사용
        // 같은 id, class인 경우 스크립트 최상단 요소만 로직에 표현

        function promptEX(){
            var ret = prompt("이름을 입력하세요","lee");
            if(ret == null){
                //취소버튼이나 다이얼로그를 닫은 경우
                result_1.innerHTML="취소를 눌렀거나 이름이 입력되지 않았습니다";
                //innerHTML : element 내에 포함된 HTML또는 XML마크업을 가져오거나 설정
                
            }else{
                //ret에 사용자가 입력한 문자열 아무값도 입력하지 않으면, ret=""
                result.innerHTML=ret;
            }
        }
        function confirmEX(){
            var ret = confirm("전송할까요?");
            if(ret == true){
                // 사용자가 "확인"버튼을 누른 경우
                result.innerHTML="확인완료";
            }else{
                //취소를 했거나 다이얼로그를 닫은 경우
                result_1.innerHTML="취소 또는 닫힘"
            }
        }
        function alertEX(){
            alert("클릭");
        }
    </script>
    <hr size="5" color="red">
    <button onclick="promptEX()">프롬프트 다이얼로그</button>
    <button onclick="confirmEX()">확인 다이얼로그</button>
    <button onclick="alertEX()">경고 다이얼로그</button>

    <hr size="5" color="pink">
    <div id="result_1"></div>
</body>
</html>

↓결과

첫화면 / 프롬프트 다이얼로그 버튼을 눌렀을때 / 이름을 입력 후 확인버튼을 눌렀을때 / 취소버튼을 눌렀을 때

<예시_6>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>innerHTML</title>
    <script>
        function testInnerHTML(){
            var str="";
            str += "<table bgcolor ='#cccc66'>";
            str += "<tr>";
            str += "<td>";
            str += "HTML태그를 삽입 할 수 있습니다";
            str += "</td>";
            str += "</tr>";
            str += "</table>";
            
            document.querySelector('#inHere1').innerHTML = str;
            }
        function testInnerHTML2(){
            var str="";
            str += "<table bgcolor ='#33cc66'>";
            str += "<tr>";
            str += "<td>";
            str += "HTML태그를 삽입 할 수 있습니다_2";
            str += "</td>";
            str += "</tr>";
            str += "</table>";

            document.querySelector('#inHere2').innerHTML = str;
            }
        
    </script>
</head>
<body>
    <table width ="100%" border="0">
        <tr>
            <td width="100%">
                <input type="button" name="btn1" value="클릭 시 innerHTML 출력"
                onclick="javascript:testInnerHTML();">
            </td>
        </tr>
        <tr>
            <td>
                <div id="inHere1"></div>
            </td>
        </tr>
        <tr>
            <td width="100%">
                <input type="button" name="btn2" value="클릭 시 innerHTML2 출력"
                onclick="testInnerHTML2();">
            </td>
        </tr>
        <tr>
            <td>
                <div id="inHere2"></div>
            </td>
        </tr>
    </table>
</body>
</html>

↓결과

<예시_7>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>숫자 맞추기 게임</title>
    <script>
        var computerNumber = 53; // 정답
        var nGuesses = 0; //추측 획수

        function guess(){
            var result=""; //결과 메시지

            //사용자가 입력한 값을 받아서 변수 number저장
            var number = parseInt(document.querySelector("#user").value);
            nGuesses++; //추측횟수 증가

            if(number== computerNumber) result = "성공";
            else if( number >computerNumber) result = "입력한 숫자보다 작은 숫자입니다"
            else result = "입력한 숫자보다 높은 숫자입니다"

            document.querySelector("#result").value = result;
            document.querySelector("#guesses").value = nGuesses;
            return true;
        }
    </script>
</head>
<body>
    <h2>숫자 맞추기 게임</h2>
    이 게임은 숫자 맞추기 게임입니다. <br>
    1~100사이의 숫자입니다
    <hr size="5" color="green">
    <form>
        숫자 : 
        <input type="text" id="user" size="7">&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="button" value="확인" onclick="guess();"><br>

        시도횟수 : 
        <input type="text" id="guesses" size="7"><br>
        힌트 : 
        <input type="text" id="result" size="20">
    </form>
</body>
</html>

↓결과

JavaScript 객체 & 배열

객체

property(객체의 고유한 속성)와 쌍을 이룸
method(함수) : 다른 객체나 코드로 부터 호출, 주로 객체 내부 프로퍼티 값을 조작하거나 연산을 수행하고 결과 리턴
객체 접근
객체가 생성되면 객체 내부에 프로퍼티와 메소드가 존재, 이들은 '.' 연산자를 이용해 접근
예시) obj.프로퍼티 = 값; → 객체 obj의 프로퍼티 값 변경
변수 = obj.프로퍼티 → 객체 obj의 프로퍼티 값 확인, 변수에 대입
obj.메소드(매개변수) → 객체 obj 메소드 호출
객체유형

유형	의미
코어객체	기본 객체로써 Array, Data, String, Math타입 등이 있음 웹 페이지나, 웹 서버 응용프로그램 어디서나 사용 가능
HTML DOM(Document Object Model) 객체	HTML태그들을 브라우저가 하나씩 객체화한(DOM) 것들로 HTML 페이지의 내용과 모양을 제어하기 위해 사용되는 객체
브라우저 관련 객체(BOM)	브라우저 종료나 스크린 크기 정보를 제공하거나 새 윈도우를 생성하는 등 브라우저 관련된 객체들로 BOM(Browser Object Model)이라고 부름

코어 객체 종류

javascript 언어가 실행되는 어디서나 사용가능한 객체로 여러타입이 있음
코어 객체 생성은 new 키워드 사용
예시) var today = new Date();
var msg = new String("Hello");
→ today, msg : 레퍼런스 변수(생성된 객체를 가르킴)

Array

여러개의 원소들을 연속적으로 저자하고 전체를 하나의 단위로 다루는 데이터 구조
배열의 각 원소는 [] 기호와 0부터 시작하는 인덱스를 이용해 접근
형식
1. []로 배열 만들기
2. Array 객체로 배열 만들기
var week =["월", "화","수","목","금", "토", "일"];
week[6] = "Sunday"; → week[6]값을 "일"에서 "Sunday"로 변경
var plots= [-20, -5, 0, 15, 20];
var p = plots[1]; → p는 -5
배열크기와 원소 추가
처음 만들어진 크기로 고정되지 않고, 원소를 추가하면 늘어남
Array로 배열 만들기
코어객체인 Arrray를 이용해 배열을 생성할 수 있음
예시) var week =new Array("월", "화","수","목","금", "토", "일");
var day = week[0]; →day는 "월"
week[1] ="tuesday" → "화"를 "tuesday"로 변경
비어있는 배열 생성
초기에 배열 원소 갯수를 예상 할 수 없는 경우 빈 배열 생성가능
원소를 순서대로 삽입하면 배열의 크기가 자동으로 증가되며 인덱스는 순새대로 삽입해야함
예시) var week = new Array();
Date : 시간 정보를 담는 객체
예시) var now = new Date(); → 현재 날짜 시간(시, 분, 초) 값으로 초기화된 객체 생성
배열 생성 방법

방법	의미
new Array();	빈 비열 생성 추가할때마다 배열 크기 자동 설정
new Array(size);	size 갯수의 배열 생성, 원소 초기화 되지 않음
new Array(e1,e2, ...)	n개의 원소에 대한 초기값과 함께 배열 생성

메소드 종류

메소드	의미
concar(arr)	현재 배열에 배열 arr 원소들을 덧붙여 만든 새 배열
join(separator)	배열의 모든 원소들을 연결해 하나의 문자열로 만들어 리턴 각 원소 사이에 separator로 지정된 문자열 삽입, separator가 생략되면 ','가 사용
reverse()	원소를 역순으로 재배열하고 이를 복사한 새로운 배열 리턴
slice(idxA[, idxB])	두 인덴스 idxA, idxB사이의 원소들로 구성된 새 배열 리턴 idxB의 원소는 포함되지 않음 idxB가 생략되면 끝 원소까지 포함
sort()	문자열을 사전순으로 정렬하고 이를 복사한 새 배열 리턴
toString()	원소들을 모두 연결해 하나의 문자열로 만들어 리턴 원소사이에 ',' tkqdlq

<예시_1>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>객체 생성 및 활용</title>

</head>
<body>
    <h3>객체 생성 및 활용</h3>
    <hr>
    <script>
        //Date객체 생성
        var today = new Date();

        //Date객체의 toLocaleSting()메소드 호출
        document.write("현재시간 : "+today.toLocaleString()+"<br>");

        //String 객체 생성
        var mystr = new String("javascript study");
        document.write("mystr 내용 : "+mystr+"<br>");
        document.write("mystr 길이 : "+mystr.length+"<br>");
        //mystr.length엔 값 대입 불가
    </script>
</body>
</html>

↓결과

<예시_2>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Array 객체로 배열 생성</title>

</head>
<body>
    <h3>Array 객체로 배열 생성</h3>
    <hr>
    <script>
        var degrees = new Array(); //빈 배열 생성
        degrees[0]=15.1;
        degrees[1]=15.4;
        degrees[2]=16.1;
        degrees[3]=17.5;
        degrees[4]=19.2;
        degrees[5]=21.4;

        var sum = 0 ; 
        for(i=0; i<degrees.length;i++)
        sum+=degrees[i];
        document.write("평균 온도 : "+sum/degrees.length+"<br>");
    </script>
</body>
</html>

↓결과

<예시_3>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>[]로 배열 만들기 </title>

</head>
<body>
    <h3>[]로 배열 만들기</h3>
    <hr>
    <script>
        var  plots =[20,5,8,15,20];//원소 5개 배열 생성
        document.write("var plots=[20,5,8,15,20]<br>");

        plots[8] =13;

        for(i=0; i<plots.length;i++){
            var size= plots[i]; //plots 배열의 i번째 원소
            while(size>0){
                document.writeln("*");
                size--;
            }
            document.write(plots[i]+"<br>");
        }
    </script>
</body>
</html>

↓결과

<예시_4>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Date객체로 현재 시간 확인</title>

</head>
<body>
    <h3>Date객체로 현재 시간 확인</h3>
    <hr>
    <script>
        var now = new Date(); //현재 시간 값을 가진 Date객체 생성
        document.write("현재 시간 : "+now.toUTCString()+"<br><br>");
        document.write(now.getFullYear()+"년도<br>")
        document.write(now.getMonth()+1+"월<br>")
        document.write(now.getDate()+"일<br>")
        document.write(now.getHours()+"시<br>")
        document.write(now.getMinutes()+"분<br>")
        document.write(now.getSeconds()+"초<br>")
        document.write(now.getMilliseconds()+"밀리 초<br>")

        var next = new Date(2022,8,21,12,45,55); //8은 9월
        document.write("next.toLocaleString() : " +next.toLocaleString+"<br>");

    </script>
</body>
</html>

↓결과

<예시_5>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>방문 시간에 따라 변하는 배경색</title>

</head>
<body>
    <h3>페이지 방문 초 시간이 짝수면 red, 홀수면 green</h3>
    <hr>
    <script>
        var current= new Date();
        if(current.getSeconds()%2==0)
        document.body.style.backgroundColor="red";
        else
        document.body.style.backgroundColor="green";
        
        document.write("현재시간");
        document.write(current.getHours(),"시, ");
        document.write(current.getMinutes(),"분, ");
        document.write(current.getSeconds(),"초<br> ");
    </script>
</body>
</html>

↓결과

<예시_6>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>String객체 메소드 활용</title>

</head>
<body>
    <h2>String 객체 메소드 활용</h2>
    <hr>
    <script>
        var a = new String("Boys and Girls");
        var b = "!!";
        document.write("a : "+a+"<br>");
        document.write("b : "+b+"<br><hr>");

        document.write(a.charAt(0)+"<br>");
        document.write(a.concat(b,"입니다")+"<br>");
        document.write(a.indexOf("s")+"<br>");
        document.write(a.indexOf("And")+"<br>");//값이 없으면 -1리턴
        document.write(a.slice(5,8)+"<br>");
        document.write(a.substr(5,3)+"<br>");
        document.write(a.toUpperCase()+"<br>");
        document.write(a.replace("and","or")+"<br>");
        document.write("aaa"+" bbb <br><hr>");

        var sub =a.split(" ");
        document.write("a를 빈칸으로 분리<br>");
        for(var i = 0 ; i<sub.length;i++)
        document.write("sub"+i+" = "+sub[i]+"<br>");

        document.write("<hr>String 메소드를 실행 후 a,b 변화 없음<br>");
        document.write("a : "+a+"<br>");
        document.write("b : "+b+"<br>");
    </script>
</body>
</html>

↓결과

<예시_7>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>인코딩, 디코딩</title>
    <script>
        function ex1(){
            alert(encodeURI('가나다')+"\n"+decodeURI('%EA%B0%80%EB%82%98%EB%8B%A4'));
        }
        
        function ex2(){
            var x = 10, y=15;
            alert(String(x)+String(y));
        }
        function ex3(){
            var ob1 = eval("var num=5+2");
            var ob2 = eval("({'a':1, 'b':2, 'c':3})");
            alert(num +"\n"+ob2.b);
        }
    </script>
</head>
<body>
    <form name="frm">
        <input type="button" onclick="ex1()" value="연습1">&nbsp;&nbsp;
        <input type="button" onclick="ex2()" value="연습2">&nbsp;&nbsp;
        <input type="button" onclick="ex3()" value="연습3">&nbsp;&nbsp;
    </form>
</body>
</html>

encodeURI() : 일반 문자열을 퍼센트 인코딩된 문자열로 변환

decodeURI() : 인코딩된 문자열을 일반 문자열로 변환

↓결과

연습1 버튼을 클릭했을 때 / 연습2 버튼을 클릭했을 때 / 연습3 버튼을 클릭했을 때

'UI > JavaScript' 카테고리의 다른 글

220923_JavaScript_국비_DOM2 (2)	2022.09.23
220922_JavaScript_국비_Math/ String/ Object/ DOM (1)	2022.09.22
220920_JavaScript_국비_식& 연산자/ if~else/switch/for/while/do~while/function (2)	2022.09.20
220919_JavaScript_국비_코드위치/ 데이터 타입/ 변수 & 상수/ 식& 연산자 (2)	2022.09.19
220805_ JavaScript_생활코딩_refactoring/function (0)	2022.08.05

coing-daily

220921_JavaScript_국비_내장함수/ 객체/ Array

JavaScript 객체 & 배열

객체

Array

'UI > JavaScript' 카테고리의 다른 글

티스토리툴바

220921_JavaScript_국비_내장함수/ 객체/ Array

JavaScript 객체 & 배열

객체

Array

'UI > JavaScript' 카테고리의 다른 글

'UI/JavaScript' Related Articles

티스토리툴바