Javascript

//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_P1").innerHTML = str1 + str2;
    
    //02.
    const num1 = 100;
    const num2 = 200;
    
    document.querySelector(".sample01_N2").innerHTML = "2";
    document.querySelector(".sample01_Q2").innerHTML = "100, 200";
    document.querySelector(".sample01_M2").innerHTML = "숫자(number) 결합";
    document.querySelector(".sample01_P2").innerHTML = num1 + num2;
    
    //03.
    const text1 = "모던";
    const text2 = "자바스크립트";
    const text3 = "핵심";
    
    //나는 모던(modern) 자바스크립트(javascript) 핵심을 배우고 싶다.
    document.querySelector(".sample01_N3").innerHTML = "3";
    document.querySelector(".sample01_Q3").innerHTML = "모던, 자바스크립트, 핵심";
    document.querySelector(".sample01_M3").innerHTML = "문자열(string) 결합";
    document.querySelector(".sample01_P3").innerHTML = "나는 " + text1 +"(modern) " + text2 + "(javascript) " + text3 + "을 배우고 싶다."
    
    //04.
    document.querySelector(".sample01_N4").innerHTML = "4";
    document.querySelector(".sample01_Q4").innerHTML = "모던, 자바스크립트, 핵심";
    document.querySelector(".sample01_M4").innerHTML = "템플릿 문자열";
    document.querySelector(".sample01_P4").innerHTML = `나는 ${text1}(modern) ${text2}(javascript) ${text3}을 배우고 싶다.`
    

const str1 = "javascript";
    const currentStr1 = str1.toUpperCase();
    
    document.querySelector(".sample02_N1").innerHTML = "1";
    document.querySelector(".sample02_Q1").innerHTML = "javascript";
    document.querySelector(".sample02_M1").innerHTML = "toUpperCase";
    document.querySelector(".sample02_P1").innerHTML = currentStr1
    
    const str2 = "JAVASCRIPT";
    const currentStr2 = str1.toLowerCase();
    
    document.querySelector(".sample02_N2").innerHTML = "2";
    document.querySelector(".sample02_Q2").innerHTML = "javascript";
    document.querySelector(".sample02_M2").innerHTML = "toLowerCase";
    document.querySelector(".sample02_P2").innerHTML = currentStr2
    

const str1 = "       javascript      ";
    const currentStr1 = str1.trim();
    
    document.querySelector(".sample03_N1").innerHTML = "1";
    document.querySelector(".sample03_Q1").innerHTML = "str1";
    document.querySelector(".sample03_M1").innerHTML = "trim()";
    document.querySelector(".sample03_P1").innerHTML = currentStr1;
    
    //console에서 공백 여부 확인 가능
    console.log(str1);
    console.log(currentStr1);
    
    const str2 = "       javascript      ";
    const currentStr2 = str2.trimStart();
    
    document.querySelector(".sample03_N2").innerHTML = "2";
    document.querySelector(".sample03_Q2").innerHTML = "str2";
    document.querySelector(".sample03_M2").innerHTML = "trimStart()";
    document.querySelector(".sample03_P2").innerHTML = currentStr2;
    
    console.log(str2);
    console.log(currentStr2);
    
    const str3 = "       javascript      ";
    const currentStr3 = str3.trimEnd();
    
    document.querySelector(".sample03_N3").innerHTML = "3";
    document.querySelector(".sample03_Q3").innerHTML = "str3";
    document.querySelector(".sample03_M3").innerHTML = "trimEnd()";
    document.querySelector(".sample03_P3").innerHTML = currentStr3;
    
    console.log(str3);
    console.log(currentStr3);
    //글씨 중간에 있는 여백은 없앨 수 없음 : replace()로
    

const str1 = "javascript reference";
    const currentstr1 = str1.slice(0);  //javascript reference
    const currentstr2 = str1.slice(1);  //avascript reference
    const currentstr3 = str1.slice(2);  //vascript reference
    const currentstr4 = str1.slice(0, 1);  //j
    const currentstr5 = str1.slice(0, 2);  //ja
    const currentstr6 = str1.slice(0, 3);  //jav
    const currentstr7 = str1.slice(1, 2);  //a
    const currentstr8 = str1.slice(1, 3);  //av
    const currentstr9 = str1.slice(1, 4);  //ava
    const currentstr10 = str1.slice(-1);  //e 뒤에서부터 소환
    const currentstr11 = str1.slice(-2);  //ce
    const currentstr12 = str1.slice(-3);  //nce
    const currentstr13 = str1.slice(-3, -1);  //nc 앞뒤 마이너스값은 크기 잘 보고 적어야함
    const currentstr14 = str1.slice(-3, -2);  //n
    const currentstr15 = str1.slice(-3, -3);  //
    
    const currentstr16 = str1.slice(1, 4);  //ava
    const currentstr17 = str1.slice(4, 1);  //''에러(null값)
    const currentstr18 = str1.substring(1, 4);  //ava
    const currentstr19 = str1.substring(4, 1);  //ava 자동으로 바꿔줌
    
    //웹표준에는 없어졌지만 쓸 수는 있음
    const currentstr20 = str1.substr(0);  //javascript reference
    const currentstr21 = str1.substr(1);  //avascript reference
    const currentstr22 = str1.substr(2);  //vascript reference
    const currentstr23 = str1.substr(0, 1);  //j
    const currentstr24 = str1.substr(0, 2);  //ja
    const currentstr25 = str1.substr(0, 3);  //jav
    const currentstr26 = str1.substr(1, 2);  //av
    const currentstr27 = str1.substr(1, 3);  //ava
    const currentstr28 = str1.substr(1, 4);  //avas
    const currentstr29 = str1.substr(-1);  //e
    const currentstr30 = str1.substr(-2);  //ce
    const currentstr31 = str1.substr(-3);  //nce
    const currentstr32 = str1.substr(-1, 1);  //e
    const currentstr33 = str1.substr(-2, 2);  //ce
    const currentstr34 = str1.substr(-3, 3);  //nce
    

const str1 = "javascript reference";
    const currentStr1 = str1.split('');     //['j', 'a', 'v', 'a', 's', 'c', 'r', 'i', 'p', 't', ' ', 'r', 'e', 'f', 'e', 'r', 'e', 'n', 'c', 'e']
    const currentStr2 = str1.split(' ');    //['javascript', 'reference']
    const currentStr3 = str1.split('', 1);    //['j']
    const currentStr4 = str1.split('', 2);    //['ja']
    const currentStr5 = str1.split(' ', 1);    //['javascript']
    const currentStr6 = str1.split(' ', 2);    //['javascript', 'reference']
    const currentStr7 = str1.split('j');    //['', 'avascript reference']
    const currentStr8 = str1.split('a');    //['j', 'v', 'script reference']
    const currentStr9 = str1.split('e');    //['javascript r', 'f', 'r', 'nc', '']
    
    const str2 = "java/script/refer/ence";
    const currentStr10 = str2.split('/');   //['java', 'script', 'refer', 'ence']
    
    const str3 = "java&script&refer!ence";
    const currentStr11 = str3.split('!');   //['java&script&refer', 'ence']
    const currentStr12 = str3.split('&');   //['java', 'script', 'refer!ence']
    const currentStr13 = str3.split(/&|\!/);   //['java', 'script', 'refer', 'ence']
    
    const str4 = "javascript reference";
    const currentStr14 = str4.split('').join();      //j,a,v,a,s,c,r,i,p,t, ,r,e,f,e,r,e,n,c,e
    const currentStr15 = str4.split('').join('*');      //j*a*v*a*s*c*r*i*p*t* *r*e*f*e*r*e*n*c*e
    const currentStr16 = str4.split('').reverse().join();       //e,c,n,e,r,e,f,e,r, ,t,p,i,r,c,s,a,v,a,j
    const currentStr17 = str4.split('').reverse().join('/');        //e/c/n/e/r/e/f/e/r/ /t/p/i/r/c/s/a/v/a/j
    

const str1 = "javascript reference";
    //const currentStr1 = str1.replace("javascript");       //undefined javascript
    const currentStr1 = str1.replace("javascript", "자바스크립트");     //자바스크립트 reference
    const currentStr2 = str1.replace("j", "J");     //Javascript reference
    const currentStr3 = str1.replace("e", "E");     //javascript rEference
    
    // 나머지 E도 바꾸고 싶으면 all 쓰거나 정규식으로
    // 정규식에서 g(;global) : 여러개 있으면 여러개 다 선택해라
    const currentStr4 = str1.replaceAll("e", "E");      //javascript rEfErEncE
    const currentStr5 = str1.replaceAll(/e/g, "E");     //javascript rEfErEncE
    
    // 소문자 대문자 구별 없이 바꾸고 싶을 때
    const currentStr6 = str1.replaceAll(/e/gi, "E");    //javascript rEfErEncE
    
    
    const str2 = "https://www.naver.com/img01.jpg";
    const currentStr7 = str2.replace("1", "2");     //https://www.naver.com/img02.jpg
    const currentStr8 = str2.replace("img01.jpg", "img02.jpg");     //https://www.naver.com/img02.jpg
    
    const str3 = "010-2000-1000";
    const currentStr9 = str3.replace("-","");   //0102000-1000
    const currentStr10 = str3.replaceAll("-","");    //01020001000
    const currentStr11 = str3.replaceAll(/-/g,"");    //01020001000
    const currentStr12 = str3.replaceAll(/-/g," ");    //010 2000 1000
    const currentStr13 = str3.replaceAll(/-/g,"*");    //010 2000 1000
    const currentStr14 = str3.replaceAll(/[1-9]/g,"*");    //0*0-*000-*000
    

const str1 = "javascript";
    const currentStr1 = str1.concat("reference");   //javascriptreference
    const currentStr2 = str1.concat(" ", "reference");   //javascript reference
    const currentStr3 = str1.concat(",", "reference");   //javascript,reference
    const currentStr4 = str1.concat(", ", "reference", ", ", "book");   //javascript, reference, book
    const currentStr5 = str1.concat(",", ["reference","book"]);   //javascript,reference,book
    

const str1 = "javascript";
    const currentStr1 = str1.repeat(0);     //''
    const currentStr2 = str1.repeat(1);     //javascript
    const currentStr3 = str1.repeat(2);     //javascriptjavascript
    

const str1 = "456";
    const currentStr1 = str1.padStart(1, "0");   //456
    const currentStr2 = str1.padStart(2, "0");   //456
    const currentStr3 = str1.padStart(3, "0");   //456
    const currentStr4 = str1.padStart(4, "0");   //0456
    const currentStr5 = str1.padStart(5, "0");   //00456
    const currentStr6 = str1.padStart(6, "0");   //000456
    const currentStr7 = str1.padStart(6, "1");   //111456
    const currentStr8 = str1.padStart(6, "12");     //121456
    const currentStr9 = str1.padStart(6, "123");    //123456
    const currentStr10 = str1.padStart(6, "1234");  //123456
    const currentStr11 = str1.padStart(6);          //   456(앞부분 공백처리)
    
    const currentStr12 = str1.padEnd(1, "0");       //456
    const currentStr13 = str1.padEnd(2, "0");       //456
    const currentStr14 = str1.padEnd(3, "0");       //456
    const currentStr15 = str1.padEnd(4, "0");       //4560
    const currentStr16 = str1.padEnd(5, "0");       //45600
    const currentStr17 = str1.padEnd(6, "0");       //456000
    const currentStr18 = str1.padEnd(6, "1");       //456111
    const currentStr19 = str1.padEnd(6, "12");      //456121
    const currentStr20 = str1.padEnd(6, "123");     //456123
    const currentStr21 = str1.padEnd(6, "1234");    //456123
    const currentStr22 = str1.padEnd(6);            //456___
    

const str1 = "javascript reference"
    const currentstr1 = str1.indexOf("javascript");             //0(j가 0번째)
    const currentstr2 = str1.indexOf("reference");              //11(r이 11번째)
    const currentstr3 = str1.indexOf("j");                      //0
    const currentstr4 = str1.indexOf("a");                      //1(중복일때는 제일 처음에 있는 위치값)
    const currentstr5 = str1.indexOf("v");                      //2
    const currentstr6 = str1.indexOf("jquery");                 //-1(데이터가 없을때는 -1 출력)
    const currentstr7 = str1.indexOf("b");                      //-1
    const currentstr8 = str1.indexOf("javascript", 0);          //0
    const currentstr9 = str1.indexOf("javascript", 1);          //-1
    const currentstr10 = str1.indexOf("reference", 0);          //11
    const currentstr11 = str1.indexOf("reference", 1);          //11
    const currentstr12 = str1.indexOf("reference", 11);         //11
    const currentstr13 = str1.indexOf("reference", 12);         //-1
    
    const str2 = "javascript reference"
    const currentstr14 = str2.lastIndexOf("javascript");        //0
    const currentstr15 = str2.lastIndexOf("reference");         //11
    const currentstr16 = str2.lastIndexOf("j");                 //0
    const currentstr17 = str2.lastIndexOf("a");                 //3(중복일때는 제일 뒤에 있는 위치값)
    const currentstr18 = str2.lastIndexOf("v");                 //2
    const currentstr19 = str2.lastIndexOf("jquery");            //-1
    const currentstr20 = str2.lastIndexOf("b");                 //-1
    const currentstr21 = str2.lastIndexOf("javascript", 0);     //0
    const currentstr22 = str2.lastIndexOf("javascript", 1);     //0
    const currentstr23 = str2.lastIndexOf("reference", 0);      //-1
    const currentstr24 = str2.lastIndexOf("reference", 1);      //-1
    const currentstr25 = str2.lastIndexOf("reference", 11);     //11
    const currentstr26 = str2.lastIndexOf("reference", 12);     //11
    

const str1 = "javascript reference";
    
    const currentStr1 = str1.includes("javascript"); //true
    const currentStr2 = str1.includes("j"); //true
    const currentStr3 = str1.includes("b"); //false
    const currentStr4 = str1.includes("reference"); //true
    const currentStr5 = str1.includes("reference", 1); //true
    const currentStr6 = str1.includes("reference", 11); //true
    const currentStr7 = str1.includes("reference", 12); //false
    

const str1 = "javascript reference";
    
    const currentstr1 = str1.search("javascript");             //0
    const currentstr2 = str1.search("reference");              //11(r이 11번째)
    const currentstr3 = str1.search("j");                      //0
    const currentstr4 = str1.search("a");                      //1
    const currentstr5 = str1.search("v");                      //2
    const currentstr6 = str1.search("jquery");                 //-1
    const currentstr7 = str1.search("b");                      //-1 
    const currentstr8 = str1.search(/[a-z]/g);                 //0
    

const str1 = "javascript reference";
    
    const currentstr1 = str1.match("javascript");            //javascript
    const currentstr2 = str1.match("reference");             //reference
    const currentstr3 = str1.match("r");                     //r
    const currentstr4 = str1.match(/reference/);             //reference
    const currentstr5 = str1.match(/Reference/);             //null
    const currentstr6 = str1.match(/Reference/i);            //null
    const currentstr7 = str1.match(/r/g);                    //['r', 'r', 'r']
    const currentstr8 = str1.match(/e/g);                    //['e', 'e', 'e', 'e']
    

const str1 = "javascript reference";
const currentstr1 = str1.charAt();               //j
const currentstr2 = str1.charAt("0");            //j
const currentstr3 = str1.charAt("1");            //a
const currentstr4 = str1.charAt("2");            //v

const currentstr5 = str1.charCode();             //106
const currentstr6 = str1.charCode("0");          //106
const currentstr7 = str1.charCode("1");          //97
const currentstr8 = str1.charCode("2");          //118

const str1 = "javascript reference";
const currentStr1 = str1.startsWith('javascript');         //true
const currentStr2 = str1.startsWith('j');                  //true
const currentStr3 = str1.startsWith('java');               //true
const currentStr4 = str1.startsWith('reference');          //false
const currentStr5 = str1.startsWith();                     //false
const currentStr6 = str1.startsWith('');                   //true
const currentStr7 = str1.startsWith('reference', 7);       //false
const currentStr8 = str1.startsWith('reference', 11);      //true

const currentStr9 = str1.endsWith('reference');            //true
const currentStr10 = str1.endsWith('e');                   //true
const currentStr11 = str1.endsWith('refer');               //false
const currentStr12 = str1.endsWith('javascript');          //false
const currentStr13 = str1.endsWith();                      //false
const currentStr14 = str1.endsWith('');                    //true
const currentStr15 = str1.endsWith('reference', 7);        //false
const currentStr16 = str1.endsWith('reference', 20);       //true