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. 나는 모던(modern) 자바스크립트(javascript) 핵심을 배우고 싶다.
const text1 = "모던";
const text2 = "자바스크립트";
const 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 + "을 배우고 싶다."
    
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;

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); // slice에서는 출력되지 않는 값
const currentStr18 = str1.substring(4, 1); //ava 값을 인지하여 바꾸어 출력해줌
const currentStr19 = str1.substring(1, 4); //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); //['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

const str1= "javascript reference"
const currentStr1 = str1.replace("javascript", "자바스크립트"); //자바스크립트 reference
const currentStr2 = str1.replace("j", "J"); //Javascript reference
const currentStr3 = str1.replace("e", "E"); //처음에 나오는 e만 대문자로 변경
const currentStr4 = str1.replace(/e/g, "E"); //javascript rEfErEncE
const currentStr5 = str1.replaceAll("e", "E"); //javascript rEfErEncE
const currentStr6 = str1.replaceAll(/e/gi, "E"); //대, 소문자 e를 모두 찾아 E로 변경한다는 정규식 표현
    
// 이미지 바꾸기
// 숫자만 바꾸면 충돌이 일어날 수 있으니, 상세하게 적습니다.
const str2 = "https://www.naver.com/img01.jpg"
const currentStr7 = str2.replace("img01.jpg", "img02.jpg");

// 전화번호의 - 없애기
const str3 = "010-2000-1000";
const currentStr8 = str3.replaceAll("-", "") //01020001000
const currentStr9 = str3.replace(/-/g, " ") //010 2000 1000
const currentStr10 = str3.replace(/[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, "1239") //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, "1239") //456123
const currentStr22 = str1.padEnd(6) //456___

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 먼저 나오는 a의 검색값만 출력
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 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.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); //reference
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.charCodeAt(); //106
const currentStr6 = str1.charCodeAt("0"); //106
const currentStr7 = str1.charCodeAt("1"); //97
const currentStr8 = str1.charCodeAt("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