Javascript

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

    document.querySelector(".sample01_R1").innerHTML = str1+str2;

    const num1 = 100;
    const num2 = 200;

    document.querySelector(".sample01_R2").innerHTML = num1+num2;
    
    const txt1 = "모던";
    const txt2 = "자바스크립트";
    const txt3 = "핵심";
    
    document.querySelector(".sample01_R3").innerHTML = "나는 "+ txt1 + "(modern) "+ txt2 +"(javascript) " + txt3 + "을 배우고 싶다.";

    const tem1 = "모던";
    const tem2 = "자바스크립트";
    const tem3 = "핵심";

    document.querySelector(".sample01_R4").innerHTML = `나는 ${txt1} (modern) ${txt2}(javascript) ${txt3}을 배우고 싶다.`; 
}

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

    document.querySelector(".sample02_R1").innerHTML = currentStr1;

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

    document.querySelector(".sample02_R2").innerHTML = currentStr2;
}

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

    document.querySelector(".sample03_R1").innerHTML = currentStr1;

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

    document.querySelector(".sample03_R2").innerHTML = currentStr2;
}

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

    document.querySelector(".sample04_R1").innerHTML = currentStr1;
}

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

    const text1 = str.indexOf("javascript");
    document.querySelector(".sample05_R1").innerHTML = text1;

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

    const text3 = str.indexOf("제이쿼리");
    document.querySelector(".sample05_R3").innerHTML = text3;

    const text4 = str.indexOf("a");
    document.querySelector(".sample05_R4").innerHTML = text4;

    const text5 = str.lastIndexOf("a");
    document.querySelector(".sample05_R5").innerHTML = text5;

    const text6 = str.search(/javascript/); //정규식 표현 지원가능.
    document.querySelector(".sample05_R6").innerHTML = text6;

    const text7 = str.search(/jquery/);
    document.querySelector(".sample05_R7").innerHTML = text7;

    const text8 = str.includes("javascript");
    document.querySelector(".sample05_R8").innerHTML = text8;

    const text9 = str.includes("jquery");
    document.querySelector(".sample05_R9").innerHTML = text9;

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

    const text11 = str.endsWith("javascript");
    document.querySelector(".sample05_R11").innerHTML = text11; 
}

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

    document.querySelector(".sample06_R1").innerHTML = text;

    const text2 = str.charAt();
    document.querySelector(".sample06_R2").innerHTML = text2;
}

{
    //slice (시작 인덱스)
    //slice (시작 인덱스, 종료 인덱스)
    //시작값이 종료값보다 클 경우 : 결과 없음
    //substring() : 시작값이 종료값보다 클 경우 : 두 값을 바꿔서 처리
    //substr(시작 인덱스, 글자 수)
    const str = "자바스크립트(javascript) 공부";

    const text = str.slice(1,4);
    document.querySelector(".sample07_R1").innerHTML = text;

    const text2 = str.slice(1);
    document.querySelector(".sample07_R2").innerHTML = text2;

    const text3 = str.slice(3,-1);
    document.querySelector(".sample07_R3").innerHTML = text3;
                
    const text4 = str.slice(7,-4);
    // const text4 = str.slice(7,17);
    // const text4 = str.slice(-14,-4);
    // const text4 = str.slice(-14,17);
    
    document.querySelector(".sample07_R4").innerHTML = text4;

    const text5 = str.slice(5,1);//앞자리 수가 뒷자리 수 보다 작아야한다. 이러면 값이 안나옴.
    document.querySelector(".sample07_R5").innerHTML = "실행 안됨";

    const text6 = str.substring(5,1); // 앞 뒤 바꿔서 슬라이스
    document.querySelector(".sample07_R6").innerHTML = text6;

    const text7 = str.substr(4,2);
    document.querySelector(".sample07_R7").innerHTML = text7;
}

{
    const str = "자바스크립트(javascript) 공부";
    const text = str.replace('공부', '스터디'); 

    document.querySelector(".sample08_R1").innerHTML = text;

    const str2 = "img01.jpg";
    const text2 = str2.replace('img01.jpg', 'img02.jpg'); 
    document.querySelector(".sample08_R2").innerHTML = text2;

    const str3 = "010-4104-6999";
    const text3 = str3.replace(/-/g, ''); //replace는 정규식 표현을 지원한다.

    document.querySelector(".sample08_R3").innerHTML = text3;

    const str4 = "010-4104-6999";
    const text4 = str4.replace(/-/g, ' '); //두번 째 문자열 공백은 한칸 띄었음.
    
    document.querySelector(".sample08_R4").innerHTML = text4;
}

{
    const str = "자바스크립트(javascript) 공부";
    const text = str.split(''); //한 글자씩 쪼개기

    document.querySelector(".sample09_R1").innerHTML = text;

    const text2 = str.split(' '); //한 단어씩 쪼개기

    document.querySelector(".sample09_R2").innerHTML = text2;

    const text3 = str.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_R4").innerHTML = text4;

    const text5 = str4.split(/&|\?/);

    document.querySelector(".sample09_R5").innerHTML = text5;
}

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

    document.querySelector(".sample10_R1").innerHTML = text;

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

    document.querySelector(".sample10_R2").innerHTML = text2;

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

    document.querySelector(".sample10_R3").innerHTML = text3;

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

    document.querySelector(".sample10_R4").innerHTML = "<pre>'"+ text4; + "'</pre>";

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

    document.querySelector(".sample10_R5").innerHTML = text5;

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

    document.querySelector(".sample10_R6").innerHTML = text6;

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

    document.querySelector(".sample10_R7").innerHTML = text7;

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

    document.querySelector(".sample10_R8").innerHTML = "<pre>'"+ text8; + "'</pre>";
}

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

    const text2 = "https://webstoryboy.co.kr/자바스크립트.html";
    const url2 = encodeURIComponent(text2);

    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_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_R4").innerHTML = url4;                    
}