본문 바로가기
광고 준비 중

Javascript30

[자바스크립트] Test05 오답 노트 2022. 10. 3.
[자바스크립트] mouseenter / movesover 차이점 2022. 9. 6.
[자바스크립트] 브라우저 크기 메서드 정리 2022. 9. 6.
[자바스크립트] 요소 크기 메서드 요소 크기 메서드 요소의 크기 및 위치를 구하는 메서드 입니다. element.clientWidth : 요소의 가로값(마진/보더 미포함) element.clientHeight : 요소의 높이값(마진/보더 미포함) element.clientTop : 요소의 Y축값(부모 기준) element.clientLeft : 요소의 X축값(부모 기준) element.offsetWidth: 요소의 가로값(보더/패딩 포함) element.offsetHeight: 요소의 높이값(보더/패딩 포함) element.offsetTop: 요소의 Y축값(문서 기준) element.offsetLeft: 요소의 X축값(문서 기준) element.getBoundingClientRect(): 크기 및 위치 See the Pen Untitle.. 2022. 9. 2.
자바스크립트 charAt() charAt()() charAt() 함수는 문자열에서 특정 인덱스에 위치하는 유니코드 단일문자를 반환합니다. 0과 문자열의 길이 - 1 사이의 정수값. 인자를 생략하면 기본값으로 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 2022. 8. 22.
자바스크립트 match() match() match() 메서드는 문자열이 정규식과 매치되는 부분을 검색합니다 match : 반환(배열) 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(/Re.. 2022. 8. 22.
자바스크립트 search() search() search() 메서드는 문자열을 검색하고 위치값(숫자)를 반환합니다. "문자열".search("검색값"); "문자열".search(정규식표현); //08 const str1 = "javascript"; const currentStr1 = str1.repeat(0) //'' const currentStr2 = str1.repeat(1) //javascript const currentStr3 = str1.repeat(2) //javascriptjavascript 2022. 8. 22.
Javascript 함수의 유형 예제 함수의 유형 다양한 함수 유형 예제 입니다. 13. 함수 유형 : 함수와 매개변수를 이용한 형태 함수 : 실행문 집함체, 재활용 function func(num, str1, str2) { document.write(num + ". " + str1 + "가" + str2 + "되었습니다. "); } func("1", "함수", "실행"); func("2", "자바스크립트", "실행"); func("3", "제이쿼리", "실행"); 결과 보기 14. 함수 유형 : 함수와 변수를 이용한 형태 function func(num, str1, str2) { document.write(num + ". " + str1 + "가 " + str2 + "되었습니다. "); } const youNum1 = 1; const yo.. 2022. 8. 22.
indexOf() / lastIndexOf 메서드 indexOf() indexOf() 메서드는 호출한 String 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환합니다. 일치하는 값이 없으면 -1을 반환합니다. indexOf("찾을 문자열") var str = 'HTML,CSS,JavaScript'; var pos1 = str.indexOf('JavaScript'); // 결과 : 9 indexOf("찾을 문자열", "시작 위치") var str = 'HTML,CSS,JavaScript'; var pos1 = str.indexOf(',', 5); // 결과 : 8 lastIndexOf() lastIndexOf() 메서드는 주어진 값과 일치하는 부분을 fromIndex로부터 역순으로 탐색하여, 최초로 마주치는 인덱스를 반환합니다. 일치하는 부분을 찾.. 2022. 8. 18.
문자열 결합 / 템플릿 문자열 문자열 결합 / 템플릿 문자열 템플릿 문자열은 내장식 표현식을 허용하는 문자열 리터럴이다. //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; const num1 = 100; const num2 = 200; //02 d.. 2022. 8. 18.
includes() 메서드 includes() includes() 메서드는 문자열 포함 여부를 검색하여, 불린(true,false)을 반환합니다. //"문자열".padStart(길이) //"문자열".padStart(길이, 문자열) //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("r.. 2022. 8. 18.
padStart() / padEnd() 메서드 padStart() / padEnd() padStart()/padEnd() 메서드는 주어진 길이에 맞게 앞/뒤 문자열을 채우고, 새로운 문자열을 반환합니다. //"문자열".padStart(길이) //"문자열".padStart(길이, 문자열) //09 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"); //0.. 2022. 8. 18.
repeat() 메서드 repeat() repeat() 메서드는 문자열을 복사하여, 복사한 새로운 문자열을 반환합니다. //"문자열".concat(문자열, 문자열....) //08 const str1 = "javascript"; const currentStr1 = str1.repeat(0) //'' const currentStr2 = str1.repeat(1) //javascript const currentStr3 = str1.repeat(2) //javascriptjavascript 2022. 8. 18.
concat() 메서드 concat() concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다. //"문자열".concat(문자열, 문자열....) //07 const str1 = "javascript"; const currentStr1 = str1.concat("reference"); //javascriptreference const currentStr2 = str1.concat("","reference"); //javascriptreference const currentStr3 = str1.concat(", ","reference"); //javascript, reference const currentStr4 = str1.concat(", ","reference", ", ", "bo.. 2022. 8. 18.
replace() / replaceAll() 메서드 replace() / replaceAll() replace() 메서드는 문자열을 부분 문자로 구분하고 배열로 반환합니다. //"문자열".replace("찾을 문자열") //"문자열".replace("찾을 문자열", "변경할 문자열") //"문자열".replace(정규식) //"문자열".replace(정규식, "변경할 문자열") //06 const str1 = "javascript reference"; const currentStr1 = str1.replace("javascript","자바스크립트"); //자바스크립트 reference const currentStr2 = str1.replace("j","J"); //Javascript reference const currentStr3 = str1.repla.. 2022. 8. 18.
trim() / trimStart() / trimEnd() trim() / trimStart() / trimEnd() 문자열의 앞 뒤 공백을 제거합니다. //03 const str1 = " javascript "; const currentStr1 = str1.trim(); document.querySelector(".sample03_N1").innerHTML = "1"; document.querySelector(".sample03_Q1").innerHTML = "javascript"; document.querySelector(".sample03_M1").innerHTML = "trim"; document.querySelector(".sample03_P1").innerHTML = currentStr1; const str2 = " javascript "; const.. 2022. 8. 18.
split ()😍 split() 문자열에서 원하는 값을 추출하여 배열로 반환합니다. //"문자열".split(구분자); //"문자열".split(정규식 표현); //"문자열".split(구분자, 갯수); //05 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 c.. 2022. 8. 18.
toUpperCase() / toLowerCase() 메서드 toUpperCase() / toLowerCase() toUpperCase() : 문자열을 대문자로 변경 반환(문자열) toLowerCase() : 문자열을 소문자로 변경 반환(문자열) //02 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_P.. 2022. 8. 18.
정규표현식 주요객체 정규표현식(正規表現式 / regular expression) 이란? 프로그래밍에서 문자열을 다룰 때, 문자열의 일정한 패턴을 표현하는 일종의 형식 언어를 말한다. 정규식이라고도 부르며,보통 regex 혹은 regexp라 많이 쓴다. 정규표현식 객체 주요 패턴 패턴 설명 abc abc 문자열을 검색합니다. /abc/는 'abc' [abc] a,b,c 중 문자 하나를 검색합니다. /[^abc]d/는 'ad', 'bd', 'cd' [^abc] a,b,c를 제외한 문자 하나를 검색합니다. /[^abc]d/는 'ed', 'fd', 'gd' [A-Z] 알파벳 대문자 문자를 검색합니다. [a-z] 알파벳 소문자 문자를 검색합니다. [0-9] 0~9 까지의 숫자를 검색합니다. . 하나의 문자를 검색합니다. 만약 '마침.. 2022. 8. 16.
slice() / substring() / substr() slice() : substring() : substr() slice() : substring() : substr() 메서드는 문자열에서 원하는 값을 추출하여 문자열을 반환하는 메서드입니다. slice() slice() 메서드는 어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 원본 배열은 바뀌지 않습니다. substring() substring() 메소드는 string 객체의 시작 인덱스로 부터 종료 인덱스 전 까지 문자열의 부분 문자열을 반환합니다. substr() substr() 메서드는 문자열에서 특정 위치에서 시작하여 특정 문자 수 만큼의 문자들을 반환합니다. const str1 = "javascript referance"; const c.. 2022. 8. 16.
728x90
반응형