라라리라

2023.08.27 / Step 1 [DOM_기초문법_문자열] - 코딩 39 일차 본문

코딩/2023 JavaScript DOM

2023.08.27 / Step 1 [DOM_기초문법_문자열] - 코딩 39 일차

헤실 2023. 8. 27. 18:33

_0011_문자열_생성.html

 

<!DOCTYPE html>
<html lang="ko">
<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>
</head>
<body>

    <script>

        /*
            [개념] 문자열 생성
                아래 두 가지 방법은 모두 같은 문자열 객체를 생성한다.
                (1) let 변수 = new String("문자열");
                (2) let 변수 = "문자열";
        */
       


        let str1 = new String("hello");   // 문자열 객체 생성
        let str2 = "hello";               // 문자열 데이터 생성
        document.write(typeof str1, "<br>");
        document.write(typeof str2, "<br>");

        // == : 데이터의 종류를 구분하지 않고 오직 값으로만 비교
        document.write(str1 == str2, "<br>");   // true
        // === : 데이터의 종류 구분해서 값 비교
        document.write(str1 === str2, "<br>");  // false
       
        document.write("1" == 1, "<br>");   // true
        document.write("1" === 1, "<br>");   // false

    </script>

</body>
</html>

 

문자열 생성

 

_0012_문자열_백틱출력.html

 

<!DOCTYPE html>
<html lang="ko">
<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>
</head>
<body>

    <script>

        /*
            [개념] 문자열 출력
                (1) 백틱( ` )을 활용하면 문자를 보다 쉽게 출력할 수 있다.
                (2) ${} 를 사용해 변수를 사용할 수 있다.
        */

        let x = 10;
        let y = 20;

        // 기존 방식 : 더하기 연산자로 변수와 문자를 연결
        let rs1 = x + " + " + y + " = " + (x + y) + "<br>";
        document.write(rs1);
       
        // 백틱(`) 방식 : ${변수}
        let rs2 = `${x} + ${y} = ${x + y}<br>`;
        document.write(rs2);

    </script>

</body>
</html>

 

문자열 출력

 

_0013_문자열_접근_charAt.html

 

<!DOCTYPE html>
<html lang="ko">
<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>문자열 접근 - charAt()</title>
</head>
<body>

    <script>

        /*
            [개념] 문자열 접근
                (1) charAt(인덱스)
                (2) 특정 인덱스에 위치하는 문자를 반환한다.
                (3) index 범위를 벗어나는 값이 입력되면,
                    1) 대괄호로 접근하는 방법은 undefined를 반환한다.
                    2) 빈 문자열('')을 반환한다.
        */
       
        let text = "Hello, JavaScript!";

        document.write(`7번째 글자는 ${text[7]}입니다.<br>`);
        document.write(`7번째 글자는 ${text.charAt(7)}입니다.<br>`);

        document.write(text[100] + " : " + text.charAt(100));

    </script>

</body>
</html>

 

문자열 접근 - charAt()

 

_0014_문자열_인덱스_indexOf.html

 

<!DOCTYPE html>
<html lang="ko">
<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>문자열 인덱스 - indexOf()</title>
</head>
<body>
   
    <script>

        /*
            [개념] 문자열 인덱스
                (1) indexOf("문자열")
                (2) 인자로 전달된 문자열과 일치하는 첫 번째 인덱스를 반환한다.
                (3) 일치하는 값이 없으면 -1을 반환한다.
        */

        let text = "Hello, JavaScript!";

        let word = "j";
        let index = text.indexOf(word);
       
        // word = "a";
        // index = text.indexOf(word);

        if(index == -1) {
            document.write("해당 문자는 존재하지 않습니다.");
        } else {
            document.write(`${word}의 위치는 ${index}번째 입니다.`);
        }
       
    </script>

</body>
</html>

 

문자열 인덱스 - indexOf()

 

_0015_문자열_교체_replace.html

 

<!DOCTYPE html>
<html lang="ko">
<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>문자열 교체 - replace()</title>
</head>
<body>
   
    <script>

        /*
            [개념] 문자열 교체
                (1) replace("바꿀 문자", "새 문자")
                (2) 문자열을 교체해 새로운 문자열을 반환한다.
        */

        let text = "Hello, JavaScript!";

        document.write(text.replace("JavaScript", "HTML") + "<br>");
        text = text.replace("JavaScript", "JavaScript Dom")
        document.write(text);

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

 

문자열 교체 - replace()

 

_0016_문자열_추출_slice.html

 

<!DOCTYPE html>
<html lang="ko">
<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>문자열 추출 - slice()</title>
</head>
<body>
   
    <script>

        /*
            [개념] 문자열 추출
                (1) slice(인덱스)
                (2) 문자열의 일부를 추출해 새로운 문자열을 반환한다.
        */

        let text = "Hello, JavaScript!";

        let rs = text.slice(7);             // 7번째부터 끝까지 추출
        document.write(rs + "<br>");
       
        rs = text.slice(0, 5);              // 0번째부터 5번째 미만까지 추출
        document.write(rs + "<br>");

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

 

문자열 추출 - slice()

 

_0016_문자열_추출_substring.html

 

<!DOCTYPE html>
<html lang="ko">
<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>문자열 추출 - substring()</title>
</head>
<body>
   
    <script>

        /*
            [개념] 문자열 추출
                (1) substring(인덱스)
                (2) 문자열의 일부를 추출해 새로운 문자열을 반환한다.
        */

        let text = "Hello, JavaScript!";

        let rs = text.substring(7);             // 7번째부터 끝까지 추출
        document.write(rs + "<br>");
       
        rs = text.substring(0, 5);              // 0번째부터 5번째 미만까지 추출
        document.write(rs + "<br>");

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

 

문자열 추출 - substring()

 

_0017_문자열_구분자_split.html

 

<!DOCTYPE html>
<html lang="ko">
<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>문자열 구분자 - split()</title>
</head>
<body>
   
    <script>

        /*
            [개념] 문자열 구분자
                (1) split("구분자 문자")
                (2) 지정한 구분자를 이용해 여러 개의 문자열로 나눈다.
        */

        let text = "html/css/javascript";

        let arr = text.split("/");
        document.write(arr);





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

 

문자열 구분자 - split()

 

_0018_문자열_대소문자변환.html

 

<!DOCTYPE html>
<html lang="ko">
<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>문자열 대소문자 변환 - toUpperCase(),toLowerCase()</title>
</head>
<body>
   
    <script>

        /*
            [개념] 문자열 대소문자 변환
                (1) toLowerCase() : 문자열을 소문자로 변환해 반환한다.
                (2) toUpperCase() : 문자열을 대문자로 변환해 반환한다.
        */

        let text = "aBcDeFg";

        let rs1 = text.toLowerCase();
        let rs2 = text.toUpperCase();

        document.write(rs1 + ", " + rs2);

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

 

문자열 대소문자 변환 - toUpperCase(),toLowerCase()

 

_0019_문자열_합치기_concat.html

 

<!DOCTYPE html>
<html lang="ko">
<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>문자열 합치기 - concat()</title>
</head>
<body>
   
    <script>

        /*
            [개념] 문자열 합치기
                (1) concat("새로운 문자")
                (2) 문자열에 새로운 문자열을 결합해 새로운 문자열을 반환한다.
        */

        let str1 = "Hello";
        let str2 = "Javascript";

        let rs1 = str1.concat(str2);
        document.write(rs1 + "<br>");
       
        let rs2 = str1.concat(" ", str2);
        document.write(rs2);

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

 

문자열 합치기 - concat()

 

_0020_문자열_공백제거_trim.html

 

<!DOCTYPE html>
<html lang="ko">
<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>문자열 공백제거 - trim()</title>
</head>
<body>
   
    <script>

        /*
            [개념] 문자열 공백제거
                (1) trim()
                (2) 분자열에 새로운 문자열을 결합해 새로운 문자열을 반환한다.
        */

        // 전체 공백 제거는 자바스크립트의 정규표현식을 이용을 해야 한다.
        let text = "   Hello Javascript  ";
        console.log(`[${text}]`);
       document.write(`[${text}]`);
        document.write("<br>");
        let rs1 = text.trim();
        console.log(`[${rs1}]`);
        document.write(`[${rs1}]`);
       
    </script>
   
</body>
</html>

 

문자열 공백제거 - trim()

 

_0021_문자열_정규식기초.html

 

<!DOCTYPE html>
<html lang="ko">
<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>
</head>
<body>
   
    <!--
    -->

    <script>

        // \d : 숫자를 의미
        // {} : 중괄호 안의 숫자는 갯수를 의미
        // 즉, 숫자3개 - 숫자4개 - 숫자4개
        let regex = /\d{3}-\d{4}-\d{4}/;
        document.write(regex.test("010-1234-5678"), "<br>");        // true
        document.write(regex.test("010-12-34"), "<br>");            // false

        // 전체 공백제거는 정규식을 통해서만이 가능하다.
        let text = "   Hello Java  script  ";
        console.log("전체 공백 제거:" + text.replace(/(\s*)/g, ""));
        console.log("앞 공백 제거:" + text.replace(/^\s*/, ""));
        console.log("뒷 공백 제거:" + text.replace(/\s*$/, ""));
        // /(\s*)/g 전체 공백
        // /^\s*/ 앞 공백
        // /\s*$/ 뒤 공백
    </script>

</body>
</html>

 

문자열 공백제거 - 정규식

 

_0022_날짜_Date클래스.html

 

<!DOCTYPE html>
<html lang="ko">
<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>Date클래스</title>
</head>
<body>

    <script>

        /*
            [개념] Date 클래스
        */

        let monthList = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
        let hangulYoil = ["일", "월", "화", "수", "목", "금", "토"];

        let today = new Date();
        document.write(today + "<br>");

        // 월과 요일은 배열로 찾아야하므로 0부터 시작한다.
        let month = today.getMonth();   // 0월부터 시작
        document.write(`${month + 1}월은 총 ${monthList[month]}일 입니다.<br>`);

        let date = today.getDate();
        let day = today.getDay();       // 일(0) ~ 토(6)
        document.write(`${month + 1}월 ${date}일 ${hangulYoil[day]}요일<br>`);

        let hour = today.getHours();
        let minute = today.getMinutes();
        let second = today.getSeconds();
        document.write(`${hour}시 ${minute}분 ${second}초<br>`);
       
    </script>
   
</body>
</html>

 

Date클래스

 

저작자표시

'코딩 > 2023 JavaScript DOM' 카테고리의 다른 글

2023.08.31 / Step 1 [DOM_태그선택3] - 코딩 43 일차  (0) 2023.08.31
2023.08.30 / Step 1 [DOM_태그선택2] - 코딩 42 일차  (0) 2023.08.30
2023.08.29 / Step 1 [DOM_태그선택1] - 코딩 41 일차  (0) 2023.08.29
2023.08.28 / Step 1 [DOM_기초문법_기타] - 코딩 40 일차  (0) 2023.08.28
2023.08.26 / Step 1 [DOM_기초문법_배열] - 코딩 38 일차  (0) 2023.08.26
'코딩/2023 JavaScript DOM' Related Articles more