JS

[JavaScript]date/math/String/array

로돌씨 2024. 7. 16. 16:39

date

<!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>
<script>
    window.onload=function(){
    document.getElementsByTagName("button")[0].onclick = testDate01;
//특정날짜출력하기
    document.getElementsByTagName("button")[1].onclick = testDate02;
}

    function testDate01(){
        let toDay = document.getElementById("today");
        let date = new Date();
        toDay.innerHTML = date.toDateString()+ "<br>";
        toDay.innerHTML += date.toLocaleDateString()+"<br>";
        toDay.innerHTML += date.toLocaleString()+"<br>";
        toDay.innerHTML += date.toLocaleTimeString() + "<br>";
    }
    function testDate02(){
        let year = 2022;
        let month = 3;
        let day = 14;

        let date = new Date (year, month-1, day);

        document.getElementById("spec").innerHTML = date+"<br>";

        //
        document.getElementById("spec").innerHTML 
                    += date.getFullYear()+"/"+(date.getMonth()+1)+"/"
                        +date.getDate()+"/"+date.getDay();
                        //getDay => 0일~6토
    }

</script>
</head>
<body>
    <h1>오늘 날짜 출력하기</h1>

    <span id="today"></span><br>
    <button>오늘 날짜</button>
    <hr>
    <h1>특정 날짜 출력하기</h1>
    <span id="spec"></span>
    <button>특정날짜</button>
</body>
</html>

날짜 출력하기 get date는 0 - 6 (0부터 월요일 화요일 ...)

 

math

<!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>
<script>
    function mathTest(){
        //랜덤 숫자 - Math.random()*100+1
        //floor : 버림.
        var rnum = Math.floor(Math.random()*100+1);
        
        document.getElementById("res").innerHTML += "랜덤: "+rnum+"<br>";
    }
    function ranColor(){
        let rnum = function(){
            return Math.floor(Math.random()*256);
        }
        document.body.style.backgroundColor="rgb("+rnum()+","+rnum()+","+rnum()+")";
    }

</script>

</head>
<body>
    <h1>Math</h1>
    <button onclick="mathTest();">버튼</button>
    <div id="res">

    </div>

    <button onclick="ranColor();">랜덤배경색</button>
    
</body>
</html>

 

 

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>
    <script>
        function strTest01(){
        let str01 = " String ";
        let str02 = " Test ";

        // + 연산자
        let str03 = str01 + str02;
        alert(" String + Test = " + str03);

        // concat()
        str03 = str01.concat(str02, " java ", " script ");
        alert("concat() : " + str03);
    }
    function strTest02(){
        let str = prompt("이름 입력");
        let span = document.getElementById("res");

        str = str.toLowerCase();

        if(str == 'multi'){
            span.textContent = str +"님, 환영합니다.";
        }else{
            span.textContent = "이름을 확인 해 주세요.";
        }

        //동등연산자 사용하면 비교하는 자료형에도 자동 형변환이 된다.
        let numVal = 10;
        if(numVal == "10"){
            alert("숫자10이 맞습니다. ==");
        }else{
            alert("숫자 10이 아닙니다 ==");
        }

        if(numVal === "10"){
            alert("숫자10이 맞습니다. ===");
        }else{
            alert("숫자 10이 아닙니다 ===");
        }
    }
        function strTest03(){
            //indexOf() : 왼-> 오
            //lastIndex() : 오 -> 왼
            // 검색하는 값이 존재하지 않을 경우 -1 리턴
            let str = "홍길동 이순신 유재석 강호동 이순신";
            let prop = prompt("검색할 이름 입력")

            alert("indexof: " + str.indexOf(prop));
            //첫글자가 시작되는 인덱스를 리턴해줌 (왼 -> 오)
            alert("lastindexof: " + str.lastIndexOf(prop));
            //오른쪽에서 왼쪽으로 탐색
        }
        function strTest4(){
            //substring : 시작 인덱스 , 종료 인덱스를 입력하여 추출
            //split : 기준이 되는 요소로 나누어 배열로 저장

            //let subStr = strVal.substring(15,32);  눈으로 하나하나 다 세어보는 원초적 방법
            //alert(subStr);
        
            let strVal = "문자열 추출하기.관련 함수:split , substring.";
            let startIndex = strVal.indexOf(":");
            let endIndex = strVal.lastIndexOf(".");// 문자열 추출로 찾아보기 

            let subStr = strVal.substring(startIndex+1,endIndex);
            //콜론을 포함하기때문에 인덱스값 +1을 해줌 
            alert(subStr);

            let splitVal = subStr.split(",");
            alert(splitVal[0]+ ":" + splitVal[1]);

        }
    </script>
</head>
<body>
    <h1>String</h1>

    <p>문자열 합치기
        <button onclick = "strTest01();">클릭</button>
    </p>
    <p>문자열 비교하기
        <button onclick = "strTest02();">클릭</button>
    <span id ="res"></span>
    </p>
    <p>문자열 검색하기
        <button onclick = "strTest03();">클릭</button>
    </p>
    <p>문자열 추출하기
        <button onclick="strTest4()">클릭</button>

    </p>
        
    
</body>
</html>

 

 

 

toLowerCase ⇒ 대문자가있다면 소문자로 변환

동등연산자 → == 자동으로 형을 맞춰서 값을 true / false 로 변환

                  ex) 10 == “10” → true

                 === 형까지 맞아야 값을 true / false로 변환 

            ex) 10 === “10” → false / “10” === “10” → true

 

array

<!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>배열</title>
<script>
    function arrTest1(){
        let arr1 = new Array();
        let arr2 = new Array(3);

        console.log(arr1[0]);
        console.log(arr2[0]);

        arr1[0] = "바나나";
        console.log(arr1[0]);

        arr2[0] = "자동차";
        arr2[1] = "비행기";
        arr2[2] = "도보";
        arr2[3] = "기차";
        console.log(arr2);

        //new 연산자를 활용한 초기화
        var arr3 = new Array('홍길동', '임꺽정', '이순신');
        console.log(arr3);

        var arr4 = ['java', 'mysql', 'html', 'css', ['jsp','servlet']]
        console.log(arr4);

    }
    function arrTest2(){
        //indexof() : 배열에서 요소가 위치한 인덱스 리턴
        let arr1 = ['사과', '딸기', '바나나', '복숭아', '키위', '포도', '수박'];
        console.log("복숭아가 있는 인덱스 : "+ arr1.indexOf("복숭아"));

        //concat() : 배열 결합.
        arr1 = ['사과', '딸기', '바나나'];
        let arr2 = ['복숭아', '키위', '포도', '수박'];
        console.log("arr1.concat(arr2): " + arr1.concat(arr2));
        console.log("arr2.concat(arr1): " + arr2.concat(arr1));

        //join() : 배열을 결합하여 문자열로 반환
        arr1 = ['소녀시대','뉴진스', '원더걸스','카라','ses'];
        let arr1Join = arr1.join(" ");
        console.log(arr1Join + " : arr1Join의 타입 : "+ typeof(arr1Join));

        // reverse() : 배열의 순서를 뒤집는다.
        arr1 = [1,2,3,4,5,6,7,8,9];
        console.log("arr1: "+arr1);
        console.log("reverse(): "+ arr1.reverse());
        console.log("reverse() 후 arr1: "+ arr1);


    }


</script>
</head>
<body>
    <h1>배열 객체</h1>
    <p>자바스크립트에서는 자료형 지정이 없기 때문에
        모든 자료형을 보관하는 변수의 모음을 배열로 처리.<br>
        자바에서 컬렉션과 비슷하다.
    </p>

    <h3>배열 선언</h3>
    <p>배열 선언시 크기를 정하지 않고 선언 가능, 크기를 지정하고 선언 가능</p>
    <button onclick="arrTest1();">클릭!</button>

    <h3>array 객체의 함수</h3>
    <p> indexof(), concat(), join(), reverse(), push()&pop(), 
        shift()&unshift(), slice(), splice() ... </p>
    <button onclick="arrTest2();">클릭</button>

inextOf : 값을 찾아내어 인덱스 출력

concat : 배열을 결합시킴 ( 순서에 맞춰 )

join : 배열 결합 후 문자열로 반환

reverse : 배열의 순서를 뒤집음

'JS' 카테고리의 다른 글

[JavaScript]array2 / popup  (0) 2024.07.19
[JS]rolling / dom / Object / numberObject / transObject  (2) 2024.07.03
[JavaScript]스크립트언어란?  (0) 2024.07.01
[JS] 자주 쓰는 함수 모음  (0) 2024.05.10

'JS'의 다른글

  • 현재글[JavaScript]date/math/String/array

관련글

티스토리툴바