본문 바로가기

Javascript32

배열 메서드 총정리 배열 메서드 총정리 배열 메서드를 총정리 하는 시간을 가지겠습니다. 01. 배열 속성 : length : 배열 길이 구하기 : 반환(숫자) 배열의 길이를 구하기 위해서 length 속성을 사용한다. 번호 기본값 매서드 리턴값 1 [100, 200, 300, 400, 500] length 5 2 ['a''b''c''d''f'] length 5 3 [1, 2, ['a', 'b']] length 3 { //01 const arrNum = [100, 200 ,300, 400, 500]; document.querySelector(".sample01_N1").innerHTML = "1"; document.querySelector(".sample01_Q1").innerHTML = "[100, 200 ,300, 400.. 2022. 10. 10.
startsWith() / endsWith() startsWith() / endsWith() startsWith() / endsWith()메서드에 대해 알아보는 시간을 가지도록 하겠습니다. startsWith() / endsWith() startsWith() 메서드는 시작하는 문자열에서 문자열을 검색하여 불린( true,false)으로 반환합니다. endsWith() 메서드는 끝나는 문자열에서 문자열을 검색하여 불린(true, false)으로 반환합니다. "문자열".startsWith(검색 문자열); "문자열".startsWith(검색 문자열, 위치값); "문자열".endsWith(검색 문자열; "문자열".endsWith(검색 문자열, 시작 위치값); { const str1 = "javscript reference"; const currentStr1.. 2022. 10. 10.
함수 유형 03 함수 유형 03 함수유형 3번째 시간입니다. 난이도 높은 함수가 슬슬 등장합니다. 01. 즉시 실행 함수 { (() =>{ document.write("함수실행"); })(); } 결과보기 함수실행 02. 파라미터함수 { // 파라미터함수 function func(str = "함수가 실행"){ document.write(str); } func(); } 결과보기 함수가 실행 03. arguments 함수 { // auguments함수 function func(a, b){ document.write(arguments[0]) document.write(arguments[1]) } func("함수가실행", "함수가 실행"); } 결과보기 함수가실행 함수가 실행 04. 재귀함수 : 자기 자신을 호출 { // 23.. 2022. 10. 10.
펼침 연산자 / 객체 구조, 비구조 할당 펼침 연산자 / 객체구조, 비구조 할당 펼침 연산자와 객체구조, 비구조 할당에 대해 알아보는 시간을 가지도록 하겠습니다. 01. 펼침연산자란? 배열에 포함된 항목을 목록으로 바꿔주는 연산자입니다. 마침표 세개(...)로 표시합니다. 펼침 연산자는 단독으로 쓰일 수 없습니다. 배열에 포함된 항목을 목록으로 바꿨다면 이를 배열이나 객체 등에 담아줘야합니다. 변수에 담을 시 에러가 발생합니다. 01-1. 펼침연산자 : 복사 { // 복사 { const obj = { a: 100, b: 200, c: "javascript" } const spread = { ...obj } document.write(spread.a) document.write(spread.b) document.write(spread.c) } 결.. 2022. 10. 10.
mouseenter / movesover의 차이점 mouseenter / movesover 오늘은 mouseenter / movesover의 차이점에 대해 알아보는 시간을 가지도록 하겠습니다. 01. mouseenter / movesover 이벤트 메서드란? mouseOver와 mouseEnter는 어떤 요소 안으로 마우스가 들어오는 순간을 감지하는 마우스 이벤트이며, 이와 반대로 마우스가 어떤 요소 밖으로 이동하는 순간을 감지하는 마우스 이벤트는 mouseOut과 mouseLeave입니다. 일반적으로 mouseOver는 mouseOut와 짝을 이루고, mouseEnter는 mouseLeave와 짝을 이루어 사용합니다. 02. mouseenter / movesover 차이점 두 이벤트를 유사하지만 이벤트 전파와 취소 가능성에 큰 차이가 있습니다. mou.. 2022. 9. 5.
요소 크기 속성 / 메서드 요소 크기 메서드 요소 크기 메서드에 대해 알아보는 시간을 가지도록 하겠습니다. 01. 요소 크기 메서드 종류 요소 크기 메서드의 종류를 알아보겠습니다. 속성 및 메서드 설명 clientWidth 요소의 가로(패딩 포함, 보더/마진 미포함) clientHeight 요소의 높이(패딩 포함, 보더/마진 미포함) clientTop 요소의 Y축값(부모기준) clientLeft 요소의 X축값(부모기준) offsetWidth 요소의 가로(패딩/보더 포함, 마진 미포함) offsetHeight 요소의 높이(패딩/보더 포함, 마진 미포함) offsetTop 요소의 X축값(문서기준) offsetTop 요소의 Y축값(문서기준) getBoundingClientRect() 크기 및 위치 02.예제 See the Pen Unt.. 2022. 9. 1.
GSAP GSAP GSAP에 대해 알아보는 시간을 가지도록 하겠습니다. GSAP를 이용해서 애니메이션 효과를 줘보도록 하겠습니다. 01. GSAP란? GSAP는 GrennSock에서 만든 자바스크립트 애니메이션 라이브러리 입니다. 일반적으로 애니메이션 효과는 CSS로 처리하거나 제이쿼리(JQuery)에서 제공하는 .animate()나 fadeIn(), SlideDown() 등으로 구현하는 것이 일반적이다. 하지만 사람의 욕구는 끝이 없고 그 이상의 복잡한 애니메이션을 구현하려면 다른 도구의 힘을 빌려야 하는데 GSAP가 그 중 하나입니다. GSAP는 제이쿼리보다 훨씬 퍼포먼스가 좋고 사용법도 간단합니다 또한 훨씬 부드럽게 표현 가능합니다. 02. 사용법 CDN을 가져와 위에 깔아주고 시작합니다. { } 03. 결과물 2022. 8. 29.
함수 유형 02 함수 유형 지난번 함수 시간에 이어서 이번 시간에는 좀 더 복잡한 함수 유형에 대해 알아보겠습니다. 01. 함수와 매개변수를 이용한 형태 함수 : 실행문 집합체, 재활용 { function func(num, str1, str2){ document.write(num + ". " +str1 + "가 "+ str2 +"되었습니다."); } func("1", "함수", "실행"); func("2", "자바스크립트", "실행"); func("3", "제이쿼리", "실행"); } 결과보기 1. 함수가 실행되었습니다. 2. 자바스크립트가 실행되었습니다. 3. 제이쿼리가 실행되었습니다. 02. 함수와 변수를 이용한 형태 변수를 매개변수에 대입하여 사용합니다. { function func(num, str1, str2){.. 2022. 8. 23.
charAt() 문자열 객체 charAt()에 대해 알아보는 시간을 가지도록 하겠습니다. charAt() charAt() 함수는 문자열에서 특정 인덱스에 위치하는 유니코드 단일문자를 반환합니다. "문자열".charAt(숫자); { //14. charAt() { "문자열".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. 23.
match() 문자열 객체 match()에 대해 알아보는 시간을 가지도록 하겠습니다. match() match() 메서드는 문자열이 정규식과 매치되는 부분을 검색합니다. 반환(배열) { //13 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.matc.. 2022. 8. 23.
search() 문자열 객체 search()에 대해 알아보는 시간을 가지도록 하겠습니다. search() search() 메서드는 문자열(정규식)을 검색하고 위치값(숫자)를 반환합니다. "문자열".search("검색값"); "문자열".search("정규식 표현"); { //12 search : 반환(숫자) { "문자열".search("검색값"); "문자열".search("정규식 표현"); const str1 = "javascript reference"; const currentStr1 = str1.search("javascript"); //0 const currentStr2 = str1.search("reference"); //11 const currentStr3 = str1.search("j"); //0 const c.. 2022. 8. 23.
includes() 문자열 객체 includes()에 대해 알아보는 시간을 가지도록 하겠습니다. includes() includes() 메서드는 문자열 포함 여부를 검색하여, 불린(true, false)을 반환합니다. "문자열".includes(검색값); "문자열".includes(검색값,시작값); { //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.. 2022. 8. 18.
padStart() / padEnd() 문자열 객체 padStart() / padEnd()에 대해 알아보는 시간을 가지도록 하겠습니다. padStart() / padEnd() padStart()/padEnd() 메서드는 주어진 길이에 맞게 앞/뒤 문자열을 채우고, 새로운 문자열을 반환합니다. "문자열".padStart(길이) "문자열".padStart(길이, 문자열) { //09 { //"문자열".padStart(길이) //"문자열".padStart(길이, 문자열) const str1 = "456"; const currentStr1 = str1.padStart(1, "0"); //456 const currentStr2 = str1.padStart(2, "0"); //456 const currentStr3 = str1.padStart(3, "0.. 2022. 8. 18.
repeat() 문자열 객체 repeat()에 대해 알아보는 시간을 가지도록 하겠습니다. repeat() repeat() 메서드는 문자열을 복사하여, 복사한 새로운 문자열을 반환합니다. { //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() 메서드는 둘 이상의 문자열을 결합하여, 새로운 문자열을 반환합니다. "문자열".concat(문자열) "문자열".concat(문자열, 문자열....) { //07 { //"문자열".concat(문자열) //"문자열".concat(문자열, 문자열....) const str1 = "javascript"; const currentStr1 = str1.concat("reference"); //javascriptreference const currentStr2 = str1.concat(" ", "reference"); //javascript reference const currentStr3 = str1.conc.. 2022. 8. 17.
replace() / replaceAll() 문자열 객체 replace() / replaceAll()에 대해 알아보는 시간을 가지도록 하겠습니다. replace() / replaceAll() replace() 메서드는 문자열을 부분 문자열로 구분하고 배열로 반환합니다. "문자열".replace("찾을 문자열", "변경할 문자열") "문자열".replace(정규식) "문자열".replace(정규식, "변경할 문자열") { //"문자열".replace("찾을 문자열", "변경할 문자열") //"문자열".replace(정규식) //"문자열".replace(정규식, "변경할 문자열") const str1 = "javascript reference"; const currentStr1 =str1.replace("javascript", "자바스크립트"); //.. 2022. 8. 17.
split() 문자열 객체 split()에 대해 알아보는 시간을 가지도록 하겠습니다. split() 문자열에서 원하는 값을 추출 배열로 반환합니다. "문자열".split(구분자); "문자열".split(정규식 표현); "문자열".split(구분자, 갯수); { //05 { // "문자열".split(구분자); // "문자열".split(정규식 표현); // "문자열".split(구분자, 갯수); 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.s.. 2022. 8. 17.
소문자 / 대문자 / 공백 문자열 객체 대/소문자와 공백에 관련된 메서드에 대해 알아보는 시간을 가지도록 하겠습니다. 01. toUpperCase() / toLowerCase() toUpperCase() : 문자열을 대문자로 변경하고, ToLowerCase()는 문자열을 소문자로 변경합니다. 번호 기본값 메서드 리턴값 1 javascript toUpperCase() JAVASCRIPT 2 JAVASCRIPT toLowerCase() javascript { // 02 { const str1 = "javascript"; const currentStr1 = str1.toUpperCase(); document.querySelector(".sample02_N1").innerHTML = "1"; document.querySelector("... 2022. 8. 17.
문자열 결합 / 템플릿 문자열 문자열 객체 문자열 결합 / 템플릿 문자열에 대해 알아보는 시간을 가지도록 하겠습니다. 문자열 결합 / 템플릿 문자열 템플릿 문자열은 내장된 표현식을 허용하는 문자열 리터럴이다. 번호 기본값 메서드 리턴값 1 자바스크립트, 제이쿼리 문자열(string) 결합 자바스크립트제이쿼리 2 100, 200 숫자(number) 결합 300 3 모던, 자바스크립트, 핵심 문자열(string) 결합 나는 모던(morden) 자바스크립트 (javascript) 핵심을 배우고 싶다. 4 모던, 자바스크립트, 핵심 탬플릿 문자열 나는 모던(morden) 자바스크립트 (javascript) 핵심을 배우고 싶다. { //01 { const str1 = "자바스크립트"; const str2 = "제이쿼리"; document.qu.. 2022. 8. 17.
indexOf() / lastIndexOf() 문자열 객체 문자열 객체에서 사용하는 메서드 중 indexOf()와 lastIndexOf에 대해 알아보는 시간을 가지도록 하겠습니다. indexOf() / lastIndexOf 문자열에서 특정 문자의 위치를 찾고 숫자를 반환합니다. "문자열".indexOf(검색값) "문자열".indexOf(검색값, 위치값) "문자열".lastIndexOf(검색값) "문자열".lastIndexOf(검색값, 위치값) { //10 { // "문자열".indexOf(검색값) // "문자열".indexOf(검색값, 위치값) // "문자열".lastIndexOf(검색값) // "문자열".lastIndexOf(검색값, 위치값) const str1 = "javascript reference"; const currentStr1 = st.. 2022. 8. 17.
문자열 객체 slice() / substring() / substr() 문자열 객체 문자열 객체에서 사용하는 메서드 중 slice() / substring() / substr()에 대해 알아보는 시간을 가지도록 하겠습니다. 01. 문자열 메서드 : 변경 : slice() : 문자열에서 원하는 값을 추출(문자열)★★ 셋 중 가장 많이 사용하며, 시작위치는 끝나는 위치보다 작아야합니다. slice(시작위치), lice(시작위치,끝나는 위치) 형태로 사용합니다. { //slice(시작위치) //slice(시작위치, 끝나는위치) //시작위치 < 끝나는위치 const str1 = "javascript reference"; const currentStr1 = str1.slice(0); //javascript reference const currentStr2 = str1.slice(1).. 2022. 8. 17.
정규식 표현 정규식 표현 정규 표현식 또는 정규식은 특정한 규칙을 가진 문자열의 집합을 표현하는데 사용하는 형식언어입니다. 01. 정규표현식 객체 주요 패턴 패턴 설명 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까지의 숫자를 검색합니다. . 하나의 문자를 검색합니다. 만약 '마침표' 문자 그대로의 의미를 사용할 경우 '₩.' 으로 표현해야 합니다. \w 알파벳, 숫자, _를 검색합니다. \W 알파.. 2022. 8. 17.
내장 함수 내장 함수 내장 함수는 자바스크립트에 기본적으로 내장되어 있는 함수들을 말합니다. 01. 인코딩, 디코딩 함수 'http://icoxpublish.com/search?query=자바스크립트'와 같이 URL주소에 쿼리 정보를 전송하여 데이터를 처리해야 되는 프로그램의 경우 한글과 같은 유니코드 문자가 포함되어 있으면 오류가 발생할 수 있습니다. 이런 경우 인코딩 함수를 이용하여 문자를 부호화 시키고 부호화된 문자를 다시 디코딩 함수를 이용하여 원래 문자로 되돌릴 수 있습니다. 함수명 설명 encodeURIComponent() 영문, 숫자와 () - _ . ~ * ! ' 을 제외한 문자를 인코딩합니다. decodeURIComponent() encodeURIComponent()의 디코딩 함수 02. 숫자, 유.. 2022. 8. 12.
배열 객체 join() / push() / pop() 배열 객체 배열 객체에서 많이 사용하는 메서드로 join(), pop(), push() 가 있습니다. 01. 배열 속성 : length : 배열 길이 구하기 : 반환(숫자) 배열의 길이를 구하기 위해서 length 속성을 사용한다. 번호 기본값 매서드 리턴값 1 [100, 200, 300, 400, 500] length 5 2 ['a''b''c''d''f'] length 5 3 [1, 2, ['a', 'b']] length 3 { //01 const arrNum = [100, 200 ,300, 400, 500]; document.querySelector(".sample01_N1").innerHTML = "1"; document.querySelector(".sample01_Q1").innerHTML = ".. 2022. 8. 11.
요소 선택 요소 선택 ▶ 요소를 직접 선택하는 메서드 메서드 설명 getElementById() dlcument.getElementById('contnet')일 경우 HTML 요소 중 id 속성이 'content'인 요소를 선택합니다. getElementsByClassName() document.getElementsByClassName('menu')일 경우 HTML 요소 중 class명이 'menu'인 요소들을 선택합니다. getElementsByTagName() document.getElementByTagName('ul')일 경우 HTML 요소 중 태그명이 'ul'인 요소들을 선택합니다. getElementsByName() document.getElementsByName('txt')일 경우 HTML 요소 중 na.. 2022. 8. 6.
지역변수 / 전역변수 전역 변수와 지역 변수 변수는 함수 블록{}을 기준으로 변수의 선언 위치에 따라 '전역 변수'와 '지역 변수'로 나누어진다. '전역 변수'는 함수 블록{} 밖이나 안에서 자유롭게 사용가능하지만 '지역 변수'는 함수 블록{} 내에서만 사용할 수 있다. { var kor = 90; function getScore() { kor = 100; // 전역 변수 console.log(kor); //100 } getScore(); console.log(kor); // 100 } 함수 블록{}안에 있는 kor 변수는 전역변수입니다. 따라서 getScore 함수를 호출하게 되면 kor 변수 값이 90에서 100으로 바뀌게 됩니다. { var kor = 90; function getScore() { var kor = 10.. 2022. 7. 28.
함수 함수 함수는 프로그램에서 반복적으로 사용되는 기능을 만들어 내기 위한 코드들의 집합으로 이해하면 된다. 01. 선언적 함수 '선언적 함수'는 함수를 호출할 때 함수의 앞 또는 뒤에서 호출 가능합니다. var로 선언한 변수와 선언적 함수는 변수,함수 이전에 호출하여도 에러가 발생하지 않는다 이러한 자바스크립트의 성질을 호이스팅(Hoisting) 이라고 한다. function compute(){ conosle.log('선언적 함수'); } compute(); function compute(){ conosle.log('선언적 함수'); } compute(); 02. 익명 함수 익명 함수는 변수에 함수 데이터를 저장하여 변수를 마치 함수처럼 사용 할 수 있도록 만들어 준며, 익명 함수는 변수 선언 이후에 호출해.. 2022. 7. 26.
데이터 타입 데이터 타입 데이터 타입은 변수에 저장되는 데이터의 유형으로 원시타입과 객체타입으로 나눌 수 있다. 원시 타입으로는 number, string, boolean, undefined, null, symbol 등이 있고, 객체 타입에는 function, object, array 등이 있다. number(숫자) 데이터 number 데이터는 정수, 소수점, 지수를 표현할 수 있습니다. string(문자) 데이터 string 데이터는 ''또는""로 표현할 수 있다. 보통 문자 데이터는 작은따옴표로 많이 표현하며 바깥쪽을 큰따옴표로 처리 했으면 안쪽은 작은따옴표로 처리한다. boolean(논리) 데이터 boolean 데이터는 true(참)와 false(거짓)의 값을 표현함. boolean에서 0값은 false를 의미.. 2022. 7. 26.
조건문 제어문 제어문이란 프로그램에서 필요한 결과 값을 도출하기 위해 실행문의 순서를 제어하거나 반복시키는 문장을 말합니다. if문 if문은 조건식과 실행문으로 이루어지며 가장 많이 사용되는 제어문입니다. { var html = Number(prompt('html 점수입력', '')); var css = Number(prompt('css 점수입력', '')); var javascript = Number(prompt('javascript 점수입력', '')); var avg = (html + css + javascript) / 3; var comment; if (avg >= 60) { if(html < 40) { comment = 'HTML' + '40점 미만 불합격'; } else if (css < 40){ c.. 2022. 7. 26.
반복문 반복문 반복문은 프로그램에서 필요한 결과 값을 도출하기 위해 실행문의 순서를 반복적으로 실행시키는 문법을 말합니다. 반복문에는 while문, do while문, for문이 있으며, for문을 가장 많이 사용합니다. while문 for ( 초기값; 조건식; 증감값 ){ 실행문 } do while문 do while문은 while문과 달리 한번은 무조건 실행된다는것에 차이가 있다. for ( 초기값; 조건식; 증감값 ){ 실행문 } for문 for ( 초기값; 조건식; 증감값 ){ 실행문 } 0부터 99까지 출력하기 //0부터 99까지 출력하기 for( let i=0; i 2022. 7. 26.

HTML
CSS

JAVASCRIPT

자세히 보기