자바스크립트

01. 문자열 : 문자열을 결합 / 템플릿 문자열
02. 문자열 속성 : length : 문자열 길이 구하기 : 반환(숫자)
03. 문자열 메서드 : toUpperCase : 문자열 대문자 변경 : 반환(문자열)
04. 문자열 메서드 : toLowerCase : 문자열 소문자 변경 : 반환(문자열
05. 문자열 메서드 : trim() : 문자열 공백 제거 : 반환(문자열)
06. 문자열 메서드 : indexOf() : 문자열 검색 : 반환(숫자)
07. 문자열 메서드 : lastIndexOf() : 문자열 검색 : 반환(숫자)
08. 문자열 메서드 : search() : 문자열 반환 : 반환(숫자)
09. 문자열 메서드 : includes() : 문자열 포함 여부 검색 : 반환(불린)
10. 문자열 메서드 : startsWidth() : 문자열 포함 여부 검색 : 반환(불린)
11. 문자열 메서드 : endWidth() : 문자열 포함 여부 검색 : 반환(불린)
12. 문자열 메서드 : charAt() : 지정한 인덱스의 문자를 추출 : 반환(숫자)
13. 문자열 메서드 : slice() : 지정한 범위 내 문자를 추출 : 반환(문자열)
14. 문자열 메서드 : substring() : 지정한 범위 내 문자를 추출 : 반환(문자열)
15. 문자열 메서드 : subStr() : 지정한 범위 내 문자를 추출 : 반환(문자열)
16. 문자열 메서드 : replace : 문자열 변경 : 반환(문자열)
17. 문자열 메서드 : split() : 문자열 반환 : 반환(배열)
18. 문자열 메서드 : padstart() : 문자열 시작부분에 문자열 추가 : 반환(문자열)
19. 문자열 메서드 : padend() : 문자열 끝부분에 문자열 추가 : 반환(문자열)
20. 문자열 메서드 : encodeURl() : 문자열을 인코딩 : 반환(문자열)
21. 문자열 메서드 : encodeURLComponent() : 문자열을 인코딩 : 반환(문자열)
22. 문자열 메서드 : decodeURl() : 문자열을 디코딩 : 반환(문자열)
23. 문자열 메서드 : decodeURLComponent() 문자열을 디코딩 : 반환(문자열)

01. 문자열 : 문자열을 결합 / 템플릿 문자열

번호	기본값	메서드	결과값


{
    const str1 = "자바스크립트";
    const str2 = "제이쿼리";

    //자바스크립트제이쿼리 출력

    document.querySelector(".sample01_N1").innerHTML = 1;
    document.querySelector(".sample01_Q1").innerHTML = "자바스크립트" + "제이쿼리";
    document.querySelector(".sample01_M1").innerHTML = "string 결합";
    document.querySelector(".sample01_R1").innerHTML = str1 + str2;
}

{
    const num1 = 100;
    const num2 = 200;

    // 100 + 200

    document.querySelector(".sample01_N2").innerHTML = 2;
    document.querySelector(".sample01_Q2").innerHTML = "100, 200";
    document.querySelector(".sample01_M2").innerHTML = "number 결합";
    document.querySelector(".sample01_R2").innerHTML = num1 + num2;
}

{
    const text1 = "모던";
    const text2 = "자바스크립트";
    const text3 = "핵심";

    // 나는 모던 (morden) 자바스크립트(javascript) 핵심을 배우고 싶다
    //document.write("나는" + text1 + "(morden)" + text2 + "(javascript)" + text3 + "을 배우고 싶다");

    document.querySelector(".sample01_N3").innerHTML = 3;
    document.querySelector(".sample01_Q3").innerHTML = "모던", "자바스크립트", "핵심";
    document.querySelector(".sample01_M3").innerHTML = "string 결합";
    document.querySelector(".sample01_R3").innerHTML = "나는" + text1 + "(morden)" + text2 + "(javascript)" + text3 + "을 배우고 싶다";
}

{
    const text1 = "모던";
    const text2 = "자바스크립트";
    const text3 = "핵심";

    // 나는 모던 (morden) 자바스크립트(javascript) 핵심을 배우고 싶다
    //document.write("나는" + text1 + "(morden)" + text2 + "(javascript)" + text3 + "을 배우고 싶다");

    document.querySelector(".sample01_N4").innerHTML = 4;
    document.querySelector(".sample01_Q4").innerHTML = "모던", "자바스크립트", "핵심";
    document.querySelector(".sample01_M4").innerHTML = "템플릿 리터럴";
    document.querySelector(".sample01_R4").innerHTML = `나는 $(text1) (morden) $(text2) (javascript) $(text3)을 배우고 싶다`;
}

02. 문자열 속성 : length : 문자열 길이 구하기 : 반환(숫자)

번호	기본값	메서드	결과값

{
    const str1 = "자바스크립트";
    const currentStr1 = str1.length;

    document.querySelector(".sample02_N1").innerHTML = 1;
    document.querySelector(".sample02_Q1").innerHTML = str1;
    document.querySelector(".sample02_M1").innerHTML = "length";
    document.querySelector(".sample02_R1").innerHTML = currentStr1;

    const str2 = "javascript";
    const currentStr2 = str2.length;

    document.querySelector(".sample02_N2").innerHTML = 2;
    document.querySelector(".sample02_Q2").innerHTML = str2;
    document.querySelector(".sample02_M2").innerHTML = "length";
    document.querySelector(".sample02_R2").innerHTML = currentStr2;         
}

03. 문자열 메서드 : toUpperCase / toLowerCase : 반환(문자열)

번호	기본값	메서드	결과값

{
    const str1 = "javascript";
    const currentStr1 = str1.toUpperCase();

    document.querySelector(".sample03_N1").innerHTML = 1;
    document.querySelector(".sample03_Q1").innerHTML = str1;
    document.querySelector(".sample03_M1").innerHTML = "toUpperCase";
    document.querySelector(".sample03_R1").innerHTML = currentStr1;

    const str2 = "JAVASCRIPT";
    const currentStr2 = str2.toLowerCase();

    document.querySelector(".sample03_N2").innerHTML = 2;
    document.querySelector(".sample03_Q2").innerHTML = str2;
    document.querySelector(".sample03_M2").innerHTML = "toLowerCase";
    document.querySelector(".sample03_R2").innerHTML = currentStr2;
}

04. 문자열 메서드 : trim() : 문자열 공백 제거 : 반환(문자열)

번호	기본값	메서드	결과값

{
    const str1 = "     ' javascript '     ";
    const currentStr1 = str1.trim();

    document.querySelector(".sample04_N1").innerHTML = 1;
    document.querySelector(".sample04_Q1").innerHTML = "     ' javascript '     ";
    document.querySelector(".sample04_M1").innerHTML = "trim";
    document.querySelector(".sample04_R1").innerHTML = currentStr1;
}

05. 문자열 메서드 : indexOf() / lastIndexOf() /search() / includes() / startsWidth() / endWidth()

번호	기본값	메서드	결과값

{
    const str = "자바스크립트(javascript) 공부";
    const text1 = str.indexOf("javascript");

    document.querySelector(".sample05_N1").innerHTML = 1;
    document.querySelector(".sample05_Q1").innerHTML = str;
    document.querySelector(".sample05_M1").innerHTML = "indexOf('javascript')";
    document.querySelector(".sample05_R1").innerHTML = text1;

    const text2 = str.indexOf("자바스크립트");

    document.querySelector(".sample05_N2").innerHTML = 2;
    document.querySelector(".sample05_Q2").innerHTML = str;
    document.querySelector(".sample05_M2").innerHTML = "indexOf('자바스크립트')";
    document.querySelector(".sample05_R2").innerHTML = text2;

    const text3 = str.indexOf("제이쿼리");

    document.querySelector(".sample05_N3").innerHTML = 3;
    document.querySelector(".sample05_Q3").innerHTML = str;
    document.querySelector(".sample05_M3").innerHTML = "indexOf('제이쿼리')";
    document.querySelector(".sample05_R3").innerHTML = text3;

    const text4 = str.indexOf('a');

    document.querySelector(".sample05_N4").innerHTML = 4;
    document.querySelector(".sample05_Q4").innerHTML = str;
    document.querySelector(".sample05_M4").innerHTML = "indexOf('a')";
    document.querySelector(".sample05_R4").innerHTML = text4;

    const text5 = str.lastIndexOf('a');

    document.querySelector(".sample05_N5").innerHTML = 5;
    document.querySelector(".sample05_Q5").innerHTML = str;
    document.querySelector(".sample05_M5").innerHTML = "lastIndexOf('a')";
    document.querySelector(".sample05_R5").innerHTML = text5;

    const text6 = str.search("javascript");

    document.querySelector(".sample05_N6").innerHTML = 6;
    document.querySelector(".sample05_Q6").innerHTML = str;
    document.querySelector(".sample05_M6").innerHTML = "search('javascript')";
    document.querySelector(".sample05_R6").innerHTML = text6;

    const text7 = str.search("jquery");

    document.querySelector(".sample05_N7").innerHTML = 7;
    document.querySelector(".sample05_Q7").innerHTML = str;
    document.querySelector(".sample05_M7").innerHTML = "search('jquery')";
    document.querySelector(".sample05_R7").innerHTML = text7;

    const text8 = str.includes("javascript");

    document.querySelector(".sample05_N8").innerHTML = 8;
    document.querySelector(".sample05_Q8").innerHTML = str;
    document.querySelector(".sample05_M8").innerHTML = "includes('javascript')";
    document.querySelector(".sample05_R8").innerHTML = text8;

    const text9 = str.includes("jquery");

    document.querySelector(".sample05_N9").innerHTML = 9;
    document.querySelector(".sample05_Q9").innerHTML = str;
    document.querySelector(".sample05_M9").innerHTML = "includes('jquery')";
    document.querySelector(".sample05_R9").innerHTML = text9;

    const text10 = str.startsWith("자바스크립트");

    document.querySelector(".sample05_N10").innerHTML = 10;
    document.querySelector(".sample05_Q10").innerHTML = str;
    document.querySelector(".sample05_M10").innerHTML = "startsWith('자바스크립트')";
    document.querySelector(".sample05_R10").innerHTML = text10;

    const text11 = str.endsWith("javascript");

    document.querySelector(".sample05_N11").innerHTML = 11;
    document.querySelector(".sample05_Q11").innerHTML = str;
    document.querySelector(".sample05_M11").innerHTML = "endsWith('javascript')";
    document.querySelector(".sample05_R11").innerHTML = text11;
}

06. 문자열 메서드 : charAt() : 지정한 인덱스의 문자를 추출 : 반환(숫자)

번호	기본값	메서드	결과값

{
    const str = "자바스크립트(javascript) 공부";
    const text1 = str.charAt(4);

    document.querySelector(".sample06_N1").innerHTML = 1;
    document.querySelector(".sample06_Q1").innerHTML = str;
    document.querySelector(".sample06_M1").innerHTML = "str.charAt(4)";
    document.querySelector(".sample06_R1").innerHTML = text1;

    const text2 = str.charAt('');

    document.querySelector(".sample06_N2").innerHTML = 2;
    document.querySelector(".sample06_Q2").innerHTML = str;
    document.querySelector(".sample06_M2").innerHTML = "str.charAt('')";
    document.querySelector(".sample06_R2").innerHTML = text2;
}

07. 문자열 메서드 : slice() : 지정한 범위 내 문자를 추출 : 반환(문자열)

번호	기본값	메서드	결과값

{
        const str = "자바스크립트(javascript) 공부";

        const text1 = str.slice(1, 4);

        document.querySelector(".sample07_N1").innerHTML = 1;
        document.querySelector(".sample07_Q1").innerHTML = str;
        document.querySelector(".sample07_M1").innerHTML = "str.slice(1, 4)";
        document.querySelector(".sample07_R1").innerHTML = text1;

        const text2 = str.slice(1);

        document.querySelector(".sample07_N2").innerHTML = 2;
        document.querySelector(".sample07_Q2").innerHTML = str;
        document.querySelector(".sample07_M2").innerHTML = "str.slice(1)";
        document.querySelector(".sample07_R2").innerHTML = text2;

        const text3 = str.slice(3, -1);

        document.querySelector(".sample07_N3").innerHTML = 3;
        document.querySelector(".sample07_Q3").innerHTML = str;
        document.querySelector(".sample07_M3").innerHTML = "str.slice(3, -1)";
        document.querySelector(".sample07_R3").innerHTML = text3;

        const text4 = str.slice(-14, -4);

        document.querySelector(".sample07_N4").innerHTML = 4;
        document.querySelector(".sample07_Q4").innerHTML = str;
        document.querySelector(".sample07_M4").innerHTML = "str.slice(-14, -4)";
        document.querySelector(".sample07_R4").innerHTML = text4;

        const text5 = str.slice(5, 1); // 시작 인덱스가 종료 인덱스보다 작아야 됨(실행 안됨)

        document.querySelector(".sample07_N5").innerHTML = 5;
        document.querySelector(".sample07_Q5").innerHTML = str;
        document.querySelector(".sample07_M5").innerHTML = "str.slice(5, 1)";
        document.querySelector(".sample07_R5").innerHTML = text5;

        const text6 = str.substring(5, 1); // 인덱스 1부터 5까지 순서를 바꿔서 검색

        document.querySelector(".sample07_N6").innerHTML = 6;
        document.querySelector(".sample07_Q6").innerHTML = str;
        document.querySelector(".sample07_M6").innerHTML = "substring(5, 1)";
        document.querySelector(".sample07_R6").innerHTML = text6;

        const text7 = str.substr(4, 2);

        document.querySelector(".sample07_N7").innerHTML = 7;
        document.querySelector(".sample07_Q7").innerHTML = str;
        document.querySelector(".sample07_M7").innerHTML = "substr(4, 2)";
        document.querySelector(".sample07_R7").innerHTML = text7;
    }

08. 문자열 메서드 : replace : 문자열 변경 : 반환(문자열)

번호	기본값	메서드	결과값

{
    const str = "자바스크립트(javascript) 공부";
    const text = str.replace("공부", "스터디");
    
    document.querySelector(".sample08_N1").innerHTML = 1;
    document.querySelector(".sample08_Q1").innerHTML = str;
    document.querySelector(".sample08_M1").innerHTML = "str.replace('공부', '스터디')";
    document.querySelector(".sample08_R1").innerHTML = text;

    const str2 = "img01.jpg";
    const text2 = str2.replace("img01.jpg", "img02.jpg");
    
    document.querySelector(".sample08_N2").innerHTML = 2;
    document.querySelector(".sample08_Q2").innerHTML = str2;
    document.querySelector(".sample08_M2").innerHTML = "str.replace('img01.jpg', 'img02.jpg')";
    document.querySelector(".sample08_R2").innerHTML = text2;

    const str3 = "010-9312-9004";
    const text3 = str3.replace('-', '');
    
    document.querySelector(".sample08_N3").innerHTML = 3;
    document.querySelector(".sample08_Q3").innerHTML = str3;
    document.querySelector(".sample08_M3").innerHTML = "str.replace('-', '')";
    document.querySelector(".sample08_R3").innerHTML = text3;

    const str3 = "010-9312-9004";
    const text3 = str3.replace('-', ''); // 하나의 '-'만 선택되고 바뀐다
    
    document.querySelector(".sample08_N3").innerHTML = 3;
    document.querySelector(".sample08_Q3").innerHTML = str3;
    document.querySelector(".sample08_M3").innerHTML = "str.replace('-', '')";
    document.querySelector(".sample08_R3").innerHTML = text3;

    const str4 = "010-9312-9004";
    const text4 = str4.replace(/-/g, ''); // 정규 표현식으로 모든 '-' 문자를 선택하고 바꾼다
    
    document.querySelector(".sample08_N4").innerHTML = 4;
    document.querySelector(".sample08_Q4").innerHTML = str4;
    document.querySelector(".sample08_M4").innerHTML = "str4.replace('/-/g', '')";
    document.querySelector(".sample08_R4").innerHTML = text4;

    const str5 = "010-9312-9004";
    const text5 = str4.replace(/-/g, ' ');
    
    document.querySelector(".sample08_N5").innerHTML = 5;
    document.querySelector(".sample08_Q5").innerHTML = str5;
    document.querySelector(".sample08_M5").innerHTML = "str4.replace(/-/g, ' ')";
    document.querySelector(".sample08_R5").innerHTML = text5;
}

09. 문자열 메서드 : split() : 문자열 반환 : 반환(배열)

번호	기본값	메서드	결과값

{
    const str1 = "자바스크립트(javascript) 공부";
    const text1 = str1.split('');

    document.querySelector(".sample09_N1").innerHTML = 1;
    document.querySelector(".sample09_Q1").innerHTML = str1;
    document.querySelector(".sample09_M1").innerHTML = "str1.split('')";
    document.querySelector(".sample09_R1").innerHTML = text1;

    const str2 = "자바스크립트(javascript) 공부";
    const text2 = str2.split(' ');

    document.querySelector(".sample09_N2").innerHTML = 2;
    document.querySelector(".sample09_Q2").innerHTML = str2;
    document.querySelector(".sample09_M2").innerHTML = "str2.split(' ')";
    document.querySelector(".sample09_R2").innerHTML = text2;

    const str3 = "자바스크립트(javascript) 공부";
    const text3 = str3.split('').join('/');

    document.querySelector(".sample09_N3").innerHTML = 3;
    document.querySelector(".sample09_Q3").innerHTML = str3;
    document.querySelector(".sample09_M3").innerHTML = "str3.split(' ').join('/')";
    document.querySelector(".sample09_R3").innerHTML = text3;

    const str4 = "https://webstoryboy.co.kr/main.html?id=1234&name=webs";
    const text4 = str4.split('&');

    document.querySelector(".sample09_N4").innerHTML = 4;
    document.querySelector(".sample09_Q4").innerHTML = str4;
    document.querySelector(".sample09_M4").innerHTML = "str4.split('&')";
    document.querySelector(".sample09_R4").innerHTML = text4;

    const str5 = "https://webstoryboy.co.kr/main.html?id=1234&name=webs";
    const text5 = str5.split(/&|\?/);

    document.querySelector(".sample09_N5").innerHTML = 5;
    document.querySelector(".sample09_Q5").innerHTML = str5;
    document.querySelector(".sample09_M5").innerHTML = "str3.split(/&|#92?/)";
    document.querySelector(".sample09_R5").innerHTML = text5;
}

}

10. 문자열 메서드 : padstart() / padend()

번호	기본값	메서드	결과값

{
    const num = "7";
    const text = num.padStart(2, '0');

    document.querySelector(".sample10_N1").innerHTML = 1;
    document.querySelector(".sample10_Q1").innerHTML = num;
    document.querySelector(".sample10_M1").innerHTML = "num.padStart(2, '0')";
    document.querySelector(".sample10_R1").innerHTML = text;

    const num2 = "456";
    const text2 = num2.padStart(6, "123");

    document.querySelector(".sample10_N2").innerHTML = 2;
    document.querySelector(".sample10_Q2").innerHTML = num2;
    document.querySelector(".sample10_M2").innerHTML = "num2.padStart(6, '123')";
    document.querySelector(".sample10_R2").innerHTML = text2;

    const num3 = "abc";
    const text3 = num3.padStart(3, '0');

    document.querySelector(".sample10_N3").innerHTML = 3;
    document.querySelector(".sample10_Q3").innerHTML = num3;
    document.querySelector(".sample10_M3").innerHTML = "num2.padStart(3, '0')";
    document.querySelector(".sample10_R3").innerHTML = text3;

    const num4 = "abc";
    const text4 = num4.padStart(6);

    document.querySelector(".sample10_N4").innerHTML = 4;
    document.querySelector(".sample10_Q4").innerHTML = num4;
    document.querySelector(".sample10_M4").innerHTML = "num4.padStart(6)";
    document.querySelector(".sample10_R4").innerHTML = "'" + text4 + "'";

    const num5 = "7";
    const text5 = num5.padEnd(2, '0');

    document.querySelector(".sample10_N5").innerHTML = 5;
    document.querySelector(".sample10_Q5").innerHTML = num5;
    document.querySelector(".sample10_M5").innerHTML = "num5.padEnd(2, '0')";
    document.querySelector(".sample10_R5").innerHTML = text5;

    const num6 = "456";
    const text6 = num6.padEnd(6, "123");

    document.querySelector(".sample10_N6").innerHTML = 6;
    document.querySelector(".sample10_Q6").innerHTML = num6;
    document.querySelector(".sample10_M6").innerHTML = "num6.padEnd(6, '123')";
    document.querySelector(".sample10_R6").innerHTML = text6;

    const num7 = "abc";
    const text7 = num7.padEnd(3, '0');

    document.querySelector(".sample10_N7").innerHTML = 7;
    document.querySelector(".sample10_Q7").innerHTML = num7;
    document.querySelector(".sample10_M7").innerHTML = "num7.padEnd(3, '0')";
    document.querySelector(".sample10_R7").innerHTML = text7;

    const num8 = "abc";
    const text8 = num8.padEnd(6);

    document.querySelector(".sample10_N8").innerHTML = 8;
    document.querySelector(".sample10_Q8").innerHTML = num8;
    document.querySelector(".sample10_M8").innerHTML = "num8.padEnd(6)";
    document.querySelector(".sample10_R8").innerHTML = "'" + text8 + "'";

}

11. 문자열 메서드 : encodeURl() / encodeURLComponent() / decodeURl() / decodeURLComponent() : : 문자열을 인코딩

번호	기본값	메서드	결과값

{
    const text = "https://webstoryboy.co.kr/자바스크립트.html";
    const url = encodeURI(text);

    document.querySelector(".sample11_N1").innerHTML = "1";
    document.querySelector(".sample11_Q1").innerHTML = text;
    document.querySelector(".sample11_M1").innerHTML = "encodeURI()";
    document.querySelector(".sample11_R1").innerHTML = url;
    const text2 = "https://webstoryboy.co.kr/자바스크립트.html";
    const url2 = encodeURIComponent(text2);

    document.querySelector(".sample11_N2").innerHTML = "2";
    document.querySelector(".sample11_Q2").innerHTML = text2;
    document.querySelector(".sample11_M2").innerHTML = "encodeURIComponent()";
    document.querySelector(".sample11_R2").innerHTML = url2;

    const text3 = "https://webstoryboy.co.kr/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8.html";
    const url3 = decodeURI(text3);

    document.querySelector(".sample11_N3").innerHTML = "3";
    document.querySelector(".sample11_Q3").innerHTML = text3;
    document.querySelector(".sample11_M3").innerHTML = "decodeURI()";
    document.querySelector(".sample11_R3").innerHTML = url3;

    const text4 = "https%3A%2F%2Fwebstoryboy.co.kr%2F%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8.html";
    const url4 = decodeURIComponent(text4);

    document.querySelector(".sample11_N4").innerHTML = "4";
    document.querySelector(".sample11_Q4").innerHTML = text4;
    document.querySelector(".sample11_M4").innerHTML = "decodeURIComponent()";
    document.querySelector(".sample11_R4").innerHTML = url4;
}