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;

//300

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

console.log("나는 " + text1 +" " + text2 + " " +text3 +"을 배우고 싶다.")

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 = str2.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;


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;

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;

//slice(시작 위치)
//slice(시작 위치, 끝나는 위치)//끝나는 위치 값이 시작 위치 값보다 커야함
//substr(시작위치)
//substr(시작위치, 길이)
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);  //av
const currentStr8 = str1.slice(1, 3);  //av
const currentStr9 = str1.slice(1, 4);  //avs
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);  //n

const currentStr16 = str1.slice(1, 4);  //ava
const currentStr17 = str1.slice(4, 1);  //''

const currentStr18 = str1.substring(4, 1);  //ava
const currentStr19 = str1.substring(1, 4);  //ava

//substring()은 시작 위치와 끝나는 위치값의 크기에 영향이 없다. 자동으로 바꿔줌

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); //['j', 'a']
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

//"문자열".replace(찾을 문자열, 변경할 문자열)
//"문자열".replace(정규식)
//"문자열".replace(정규식, 변경할 문자열)

const str1 = "javascript reference";
const currentStr1 = str1.replace("javascript", "자바스크립트");       //자바스크립트 reference
const currentStr2 = str1.replace("j", "J");                         //자바스크립트 reference
const currentStr3 = str1.replace("e", "E");                         //javascript rEference
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("img01", "img02");                   //https://www.naver.com/img02.jpg

const str3 = "010-2000-1000";

const currentStr8 = str3.replace("-","");                             //0102000-1000
const currentStr9 = str3.replaceAll("-","");                          //01020001000
const currentStr10 = str3.replace(/-/g,"");                           //01020001000
const currentStr11 = str3.replace(/-/g," ");                          //010 2000 1000
const currentStr12 = str3.replace(/-/g,"★");                         //010★2000★1000
const currentStr13 = str3.replaceAll(/[1-9]/g,"★");                  //0★0-★000-★000


//01020001000

//"문자열".concat(문자열)
//"문자열".concat(문자열, 문자열....)

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 reference";
    
const currentStr1 = str1.indexOf('javascript');         //0
const currentStr2 = str1.indexOf('reference');          //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(데이터가 없을 경우 이렇게 출력됨)
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 currentStr14 = str1.lastIndexOf('javascript');     //0
const currentStr15 = str1.lastIndexOf('reference');     //11
const currentStr16 = str1.lastIndexOf('j');             //0
const currentStr17 = str1.lastIndexOf('a');             //3
const currentStr18 = str1.lastIndexOf('v');             //2
const currentStr19 = str1.lastIndexOf('jquery');        //-1
const currentStr20 = str1.lastIndexOf('b');             //-1
const currentStr21 = str1.lastIndexOf('javascript', 0);     //0
const currentStr22 = str1.lastIndexOf('javascript', 1);     //0
const currentStr23 = str1.lastIndexOf('reference', 0);     //-1
const currentStr24 = str1.lastIndexOf('reference', 1);     //-1
const currentStr25 = str1.lastIndexOf('reference', 11);     //11
const currentStr26 = str1.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
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.search('javascript');            //0
const currentStr2 = str1.search('reference');          //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

 // "문자열".charAt(숫자);
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


//charCodeAt()
const currentStr5 = str1.charCodeAt();            //106
const currentStr6 = str1.charCodeAt("0");            //106
const currentStr7 = str1.charCodeAt("1");            //97
const currentStr8 = str1.charCodeAt("2");            //118

// "문자열".startsWith(검색 문자열);
// "문자열".startsWith(검색 문자열, 위치값 );
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

// "문자열".endsWith(검색 문자열);
// "문자열".endsWith(검색 문자열, 위치값 );
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