본문 바로가기

JAVASCRIPT30

[오답노트 02] 2022. 10. 24.

[오답노트] 2022. 10. 4.

[JAVASCRIPT] mouseover와 mouseenter의 이벤트 차이점 자바스크립트 : Mouse Event Method 이번 시간에는 마우스 이벤트 메서드 중 mouseover와 mouseenter의 차이점에 대해 알아보겠습니다 ~ 😁 #1. mouseover와 mouseout 메서드 📖 • mouseover 메서드는 마우스 커서가 지정 영역 안으로 들어왔을 때 이벤트가 발생하는 메서드 입니다. • mouseout 메서드는 마우스 커서가 지정 영역 안에서 바깥으로 나갔을 때 이벤트가 발생하는 메서드 입니다. 💡 이처럼 mouseover 메서드는 mouseout 메서드와 짝을 이루기 때문에 꼭 함께 사용해주어야 합니다! #2. mouseenter와 mouseleave 메서드 📖 mouseenter와 메서드는 마우스 커서가 지정 영역 안으로 들어왔을 때 이벤트가 발생하는 메서.. 2022. 9. 6.

[JAVASCRIPT] 요소의 크기 및 위치를 표현하는 속성, 메서드 자바스크립트 : 요소 크기 및 위치 속성과 메서드 이번 시간에는 자바스크립트의 요소의 위치 및 크기를 표현하는 속성과 메서드들을 알아보겠습니다.😇 다음의 표를 통해 알아봅시다. #01. 요소의 속성 및 메서드 요소 크기 속성 설명 element.clientWidth 요소의 가로 값 (패딩 / 보더 / 마진 미포함) element.clientHeight 요소의 세로 값 (패딩 / 보더 / 마진 미포함) element.clientTop 요소의 Y축 값 (부모기준) element.clientLeft 요소의 X축 값 (부모 기준) element.offsetWidth 요소의 가로 값 (보더 / 패딩 포함) element.offsetTop 요소의 Y축 값 (문서 기준) element.offsetLeft 요소의 X축.. 2022. 9. 1.

[JAVASCRIPT] GSAP 라이브러리란? 자바스크립트 : GSAP 라이브러리 이번 시간에는 자바스크립트의 라이브러리인 GSAP 대해 알아보겠습니다.😆 #1. GSAP란? The GreenSock Animation Platform의 약자로 프론트엔드 개발자와 디자이너들이 쉽게 사용할 수 있는 애니메이션 자바스크립트 라이브러리 입니다. 특히 GSAP은 세밀한 움직임과 동작의 연속성을 훨씬 간편하게 설정할 수 있습니다. 📖 GSAP 사용 방법 📖 GSAP는 CDN 에서 라이브러리 링크를 가져오면 됩니다. 라이브러리를 가져올 땐 js 파일 링크를 가져오는 것처럼, CDN의 절대 주소를 가져오면 됩니다! #2. GSAP 객체를 만드는 기본 메서드 1. gsap.to() 2. gsap.from() 3. gsap.fromTo() gsap의 메소드 to는 첫.. 2022. 8. 30.

[JAVASCRIPT] 함수의 유형 자바스크립트 : 함수의 유형 이번 시간에는 함수의 유형에 대해 알아보겠습니다! 😁 #1. 함수 유형 : 함수와 변수를 이용한 형태 첫번째 유형은 변수를 통해 데이터를 전달시킵니다. ! 사용 방법 ! 각 변수마다 데이터 값을 선언하고 함수에 변수를 저장하여 실행문을 통해 데이터를 전달! function func(num, str1, str2){ document.write(num + ". " + str1 + "가 " + str2 + "되었습니다.14"); } const youNum1 = 1; const youNum2 = 2; const youNum3 = 3; const youStr1 = "함수"; const youStr2 = "자바스크립트"; const youStr3 = "제이쿼리"; const youCom1.. 2022. 8. 23.

[JAVASCRIPT] 문자열 메서드 : charAt( ) 자바스크립트 : 문자열 메서드 : charAt() 이번 시간에는 문자열 메서드인 charAt()에 대해 알아보겠습니다! 😁 #1. charAt( ) charAt() 메서드는 지정한 인덱스의 문자를 추출하여 문자열을 반환합니다. ! 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 ! point ! 대소문자를 구분하며 위치값을 작.. 2022. 8. 23.

[JAVASCRIPT] 문자열 메서드 : match( ) 자바스크립트 : 문자열 메서드 : match() 이번 시간에는 문자열 메서드인 match()에 대해 알아보겠습니다! 😁 #1. match( ) match() 메서드는 문자열을 검색하고 배열을 반환합니다. ! match( ) 사용 방법 ! "문자열".math(검색값); "문자열".math(정규식 표현); const str1 = "javascript reference"; const currentStr1 = str1.math("javascript"); // javascript const currentStr2 = str1.math("reference"); // reference const currentStr3 = str1.math("r"); // r const currentStr4 = str1.math(/ref.. 2022. 8. 23.

[JAVASCRIPT] 문자열 메서드 : search( ) 자바스크립트 : 문자열 메서드 : search() 이번 시간에는 문자열 메서드인 search()에 대해 알아보겠습니다! 😁 #1. search( ) search() 메서드는 문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열을 반환합니다. ! search( ) 사용 방법 ! "문자열".search(검색값); "문자열".search(정규식 표현); const str1 = "javascript reference"; const currentStr1 = str1.search("javascript"); // 0 const currentStr2 = str1.search("reference"); // 11 (11번째 자리 : 위치 값 출력) const currentStr3 = str1.search("j"); // 0.. 2022. 8. 23.

[JAVASCRIPT] 문자열 메서드 : includes( ) 자바스크립트 : 문자열 메서드 : includes() 이번 시간에는 문자열 메서드인 includes()에 대해 알아보겠습니다! 😁 #1. includes( ) includes() 메서드는 문자열 포함 여부를 검색하여, 불린(true, false)을 반환합니다. 즉 문자열이 특정 문자열을 포함하는지 확인하는 메서드라 볼 수 있습니다! ! includes( ) 사용 방법 ! string.includes( searchString, length ) "문자열".includes(검색할 문자열); "문자열".includes(검색할 문자열, 검색을 시작할 위치); == indexOF()와 거의 같다. const str1 = "javascript reference"; const currentStr1 = str1.incl.. 2022. 8. 18.

[JAVASCRIPT] 문자열 메서드 : padStart( ) / padEnd( ) 자바스크립트 : 문자열 메서드 : padStart() / padEnd() 이번 시간에는 문자열 메서드인 padStart() / padEnd()에 대해 알아보겠습니다! 😁 #1. padStart( ) padStart() 메서드는 주어진 길이에 맞게 앞 자리에 문자열을 채우고, 새로운 문자열을 반환합니다. ! padStart( ) 사용 방법 ! "문자열".padStart(길이(자리수)); "문자열".padStart(길이(자리수), "추가 할 문자열"); const str1 = "456"; const cirrentStr1 = str1.padStart(1, "0"); //456 const cirrentStr2 = str1.padStart(2, "0"); //456 const cirrentStr3 = str1.p.. 2022. 8. 18.

[JAVASCRIPT] 문자열 메서드 : repeat( ) 자바스크립트 : 문자열 메서드 : repeat() 이번 시간에는 문자열 메서드인 repeat()에 대해 알아보겠습니다! 😁 #1. repeat( ) repeat() 메서드는 문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열을 반환합니다. ! replace( ) 사용 방법 ! "문자열".replace("횟수값"); const str1 = "javascript"; const cirrentStr1 = str1.repeat(0); // '' const cirrentStr2 = str1.repeat(1); // javascript const cirrentStr3 = str1.repeat(2); // javascriptjavascript ! point ! 문자열의 반복 횟수값은 양의 정수여야 한다! 2022. 8. 18.

[JAVASCRIPT] 문자열 메서드 : concat( ) 자바스크립트 : 문자열 메서드 : concat() 이번 시간에는 문자열 메서드인 concat()에 대해 알아보겠습니다! 😁 #1. concat( ) concat() 메서드는 둘 이상의 문자열을 결합하여, 새로운 문자열을 반환합니다. 즉 여러개의 문자열을 하나로 합친다고 볼 수 있습니다. ! replace( ) 사용 방법 ! "문자열".concat("추가할 문자열"); "문자열".concat("추가할 문자열", "추가할 문자열"....); : 여러개 사용 가능 "문자열".concat("추가할 문자열", ["추가할 문자열"]); : 배열 사용 가능 const str1 = "javascript"; const cirrentStr1 = str1.concat("reference"); // javascriptrefe.. 2022. 8. 18.

[JAVASCRIPT] 문자열 메서드 : replace( ) / replaceAll( ) 자바스크립트 : 문자열 메서드 : replace() 이번 시간에는 문자열 메서드인 replace()에 대해 알아보겠습니다! 😁 #1. replace( ) replace() 메서드는 String.prototype.replace()의 약자로 문자열을 치환하거나 변환 할 때 사용하는 메서드입니다. 즉 문자열을 부분 문자열로 구분하고 변환하여 새로운 배열로 반환해줍니다. ! replace( ) 사용 방법 ! "문자열"replace("찾을 문자열", "변경할 문자열"); "문자열"replace("찾을 문자열", "변경할 문자열"); "문자열"replace(정규식); "문자열"replace(정규식, "변경할 문자열"); const str1 = "javascript reference"; const cirrentStr.. 2022. 8. 18.

[JAVASCRIPT] 문자열 메서드 : split( ) 자바스크립트 : 문자열 메서드 : split() 이번 시간에는 문자열 메서드인 split()에 대해 알아보겠습니다! 😁 #1. split( ) slice() 메서드는 문자열에서 원하는 값을 추출한 뒤 새로운 문자열로 반환합니다. 즉 문자열을 분할하여 부분 문자열 배열을 만듭니다 📖 아래의 코드 예제와 주석을 통해 더 자세히 알아봅시다! 📖 ! split( ) 사용 방법 ! "문자열".split(구분자(separator)); "문자열".split(정규식 표현); "문자열".split(구분자, 갯수); //갯수를 설정할 수 있다. const str1 = "javascript reference"; const currentStr1 = str1.split(''); //['j','a','v','a','s','c',.. 2022. 8. 18.

[JAVASCRIPT] 문자열 메서드 : 대소문자 변경과 공백 제거 자바스크립트 : 문자열 메서드 : 대소문자/공백 지금부터 자바스크립트의 대소문자 변경, 공백 제거 문자열 메소드에 대해 알아봅시다! #1. toUpperCase(), toLowerCase() toUpperCase()는 문자열을 대문자로 변경해주며 toLowerCase()는 소문자로 변경해줍니다. 변경 후에는 새로운 문자열로 반환해줍니다. //01. 대문자 변경 const str1 = "javascript"; const currentStr1 = str1.toUpperCase(); //02. 소문자 변경 const str2 = "JAVASCRIPT"; const currentStr2 = str1.toLowerCase(); 표로 확인해보자! 번호 기본값 메서드 리턴값 1 javascript toUpperCas.. 2022. 8. 18.

[JAVASCRIPT] 템플릿 문자열 자바스크립트 : 문자열 결합 : 템플릿 문자열 지금부터 자바스크립트의 문자열 결합과 문자열 메소드인 템플릿 문자열에 대해 알아봅시다! 1. 템플릿 문자열 템플릿 문자열( )은 문자열 결합 메서드로 내장된 표현식을 허용하는 문자열 리터럴입니다. 문자열을 결합할 때 따옴표 대신 ` ` (backtick_백틱)을 사용하며 변수를 넣고자 하는 부분에 ${}를 사용하여 넣어주면 됩니다. 또한 간단한 자바스크립트 문법을 문자열 안에 사용할 수 있습니다. //01. 문자열(string) 결합 const str1 = "자바스크립트"; const str2 = "제이퀘리"; document.querySelector(".sample01_P1").innerHTML = str1 + str2; //02. 숫자(number) 결합.. 2022. 8. 18.

[JAVASCRIPT] 문자열 메서드 : indexOf( ) 자바스크립트 : indexOf() 메서드 이번 시간에는 문자열 메서드 중 하나인 indexOf() 메서드에 대해 알아보겠습니다.😆 #1. indexOf( ) indexOf() 메서드는 문자열에서 추출하고 싶은 문자의 위치를 찾은 후 숫자로 해당 문자열을 반환합니다. 즉 특정 문자가 문자열의 어느 index에 위치하는지 찾는 메서드라고 볼 수 있습니다. ! indexOf() 사용법 ! "문자열".indexOf(검색값) "문자열".indexOf(검색값, 위치값) : 처음 값은 추출하고 싶은 문자열을 작성하고 마지막 값을 그 문자열을 찾기 시작 할 위치로 적으면 된다. ✏️예제 코드 const str1 = "javascript reference" const currentStr1 = str1.indexOf("j.. 2022. 8. 17.

[JAVASCRIPT] 정규 표현식 자바스크립트 : 정규 표현식(패턴) 정규 표현식이란? 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어이며 문자열에서 특정 문자 조합을 찾기 위한 패턴입니다! 즉 쉽게 말해서 문자열에서 특정 문자를 찾아내는 도구라고도 볼 수 있습니다! #1. 정규 표현식 객체 주요 패턴 정규 표현식에서 사용하는 기호를 메타(meta) 문자라고 합니다. 패턴 설명 abc abc 문자열을 검색합니다. /abc/는 'abc' [abc] a, b, c 중 문자 하나를 검색합니다. /[abc]d/는 'ad', 'bd', 'cd' [^abc] a, b, c 중 문자 하나를 검색합니다. /[abc]d/는 'ad', 'bd', 'cd' [A-Z] 알파벳 대문자를 검색합니다. [a-z] 알파벳 소문자를 검색합니다. [.. 2022. 8. 17.

[JAVASCRIPT] 문자열 메서드 : Slice(), substring(), substr() 자바스크립트 : 문자열 메서드 slice(), substring(), substr() slice(), substring(), substr()는 문자열 메서드의 변경 타입으로 문자열에서 원하는 값을 추출하여 문자열을 반환하는 메서드입니다. #1. slice( ) slice() 메서드는 문자열에서 원하는 값을 추출하여 문자열을 반환합니다. ! slice( ) 사용 방법 ! "문자열"slice(시작 위치) "문자열"slice(시작 위치, 끝나는 위치) const str1 = "javascript reference" const currentStr1 = str1.slice(0); //javascript reference const currentStr2 = str1.slice(1); //avascript refer.. 2022. 8. 17.

[JAVASCRIPT] 내장 함수 자바스크립트 : 내장 함수 내장 함수란? 자바스크립트에 기본적으로 내장되어 있는 함수를 말합니다. 지금부터 내장 함수에 대해 자세히 알아봅시다! 1. 인코딩, 디코딩 함수 URL주소에 쿼리 정보를 전송하여 데이터를 처리해야 하는 경우 유니코드 문자가 포함되어 있으면 오류가 걸릴 확률이 높습니다. 때문에 인코딩 함수를 통해 문자를 부호화 시켜서 처리한 후 디코딩 함수를 통해 문자로 다시 되돌릴 수 있습니다. 함수명 설명 encodeURIComponent( ) 영문, 숫자와 ( ) - _ . ~ * ! ' 을 제외한 문자를 인코딩합니다. decodeURIComponent( ) encodeURIComponent( )의 디코딩 함수 2. 숫자, 유/무한 값 판별 함수 함수명 설명 isNaN( ) 숫자인지 아닌지.. 2022. 8. 16.

[JAVASCRIPT] 배열 메서드 : join(), push(), pop() 자바스크립트 : 배열 메서드 지금부터 자바스크립트의 배열 메소드인 join() / push() / pop()에 대해 알아봅시다! 배열 메서드들을 이해하게 되면 배열을 좀 더 효율적으로 사용할 수 있게됩니다 :) 1. join( ) join( )은 배열을 변경하지 않고 참조만 하는 메서드로 배열의 모든 요소를 하나의 문자열로 반환합니다. //01 const arrNum = [100, 200, 300, 400, 500]; const text1 = arrNum.join(''); //배열의 요소를 전부 이어서 불러온다. const text2 = arrNum.join(' '); //한 칸을 띄우면 join이 여백을 인식해서 한 칸씩 띄워서 표현된다. const text3 = arrNum.join('★'); //별.. 2022. 8. 11.

요소 선택 자바스크립트 요소 선택 자바스크립트에서 CSS 선택자를 넘겨서 원하는 HTML 요소를 찾을 수 있도록 함수를 제공하고 있다. 대표적으로 querySelector() 함수는 선택자에 부합하는 요소 중에서 첫 번째 요소만을 반환하고, querySelectorAll() 함수는 선택자에 부합하는 모든 요소를 반환한다. 01. 요소를 직접 선택하는 메서드 메서드 속성 입력 방법 : document . 메서드명 ( ' 요소명 ' ) 메서드 설명 getElementById() HTML 요소 중 id 속성인 요소를 선택한다. ex) document.getElementById('header') getElementByClassName() HTML 요소 중 class명으로 선언한 요소를 선택한다. ex) document.g.. 2022. 8. 7.

지역함수와 전역함수 자바스크립트 전역변수 / 지역변수 변수는 함수블록 {}을 기준으로 변수의 선언 위치에 따라 전역변수와 지역변수로 나누어 진다. 전역변수 : 전역 변수는 함수 블록 {} 밖이나 안에서 자유롭게 사용 가능 지역변수 : 지역 변수는 함수 블록 {} 내에서만 사용 할 수 있다. ▶︎ 전역변수와 지역변수 선언 위치 전역 변수 지역 변수 var 변수; function 함수 () { } function 함수 () { var 변수; } 01. 전역변수 예시 문제 kor 변수의 값을 90에서 100으로 바꾸기 { var kor = 90; function getScore() { kor = 100; //전역변수 console.log(kor); } getScore(); console.log(kor); } 결과 보기 100 1.. 2022. 7. 29.

함수 자바스크립트 함수 프로그램에서 반복적으로 사용되는 기능을 만들어 내기 위한 코드들의 집합으로 이해하면 된다. 01. 선언적 함수 선언적 함수는 가장 일반적인 형식의 함수로 함수를 선언할 때 이름을 붙여준다. function func(){ document.write("실행문"); } func(); { function func(){ document.write("함수가 실행되었습니다.1") //write = 브라우저객체이자 메소드이다 } func(); } 결과 보기 함수가 실행되었습니다.1 02. 익명 함수 함수명 대신 변수명에 함수코드를 저장하는 방식이다. 즉 함수명에 이름을 지정하지 않는다. 대신 변수명을 지정해준다. const func(){ document.write("실행문"); } func(); { .. 2022. 7. 26.

데이터 타입 데이터 타입 데이터 타입은 변수에 저장되는 데이터의 유형으로 원시 데이터 타입과 객체 데이터 타입으로 나눌 수 있다. #1. 숫자(number) 데이터 숫자 데이터는 정수, 소수점 등을 표현 할 수 있다. let table = 1; let table2 = 1.5; #2. 문자(string) 데이터 문자 데이터는 '' 또는 "" 로 표현할 수 있다. 보통 문자 데이터를 사용할 땐 작은 따옴표 '' f를 많이 표현 문자안에 문자가 들어갈 땐 서로 다른 따옴표를 사용해주어야 한다. let table = "문자와 '문자" let table2 = '문자와 "문자"' #3. 논리(boolean) 데이터 논리 데이터는 true와 false의 값을 표현한다. 논리 데이터에서 0값은 false를 의미하며 0값 이외의 숫.. 2022. 7. 26.

조건문 조건문 조건문은 조건식이 참과 거짓인지에 따라 코드를 제어한다. if문 if문의 형식 : if ( 조건식 ) { 실행문; } { var age = 10; var admissionFee = ""; if (age < 13) { admissionFee = "2000원"; } document.write(admissionFee); } 결과 보기 2000원 중첩 if문 중첩 for문과 비슷하며 매우 많이 사용한다. { var html = Number(prompt('html 점수입력','')); var css = Number(prompt('css 점수입력','')); var javascript = Number(prompt('javascript 점수입력','')); var avg = (html + scc + javas.. 2022. 7. 26.

반복문 반복문 반복문은 프로그램에서 필요한 결과 값을 도출하기 위해 실행문의 순서를 반복적으로 실행시키는 문법이다. 반복문 : while문, do while문, for문이 있으며, for문을 가장 많이 사용한다. while문 조건이 참일 경우에만 while문이 실행되며 조건에 맞지 않을 경우 실행되지 않는다. do while문 while문과는 달리 do를 먼저 실행시키기 때문에 첫번째 실행은 조건에 상관없이 실행된다. for문 for문은 특정 구문을 여러번 반복하고 싶을 때 사용하는 반복문이다. for문 안에 if문이 들어갈 수도 있고 if문 안에 for문이 들어갈 수 있다. for ( 초기값; 조건식; 증감값){ 실행문 } for문 실습하기 01. for문을 이용하여 0부터 99까지 출력하기 { for( le.. 2022. 7. 21.

연산자 자바스크립트 연산자 프로그램에 필요한 수식을 만들 떄 필요한 것이 연산자이다. 연산자의 종류는 산술연산자, 대입연산자, 비교연산자, 논리연산자 등이 있다. #1. 산술 연산자 산술 연산자는 사칙연산을 다루는 기본적인 연산자이다. 그만큼 가장 많이 사용되기도 한다. 산술연산자 종류 설명 + 더하기 연산을 할 때 사용 문자와 문자, 문자와 변수 등을 연결할 때 사용 - 빼기 연산을 할 때 사용 * 곱하기 연산을 할 떄 사용 / 몫을 구할 때 사용 % 나머지를 구할 때 사용 ++ 1씩 증가시킬 때 사용 -- 1씩 감소시킬 때 사용 보통 왼쪽의 피연산자에서 오른쪽 피연산자로 결합한다. #2. 대입 연산자 대입 연산자는 변수에 값을 대입할 때 사용하는 연산자이다. 대입 연산자에서 '='는 같다의 의미가 아닌 변수.. 2022. 7. 20.

기본 규칙 기본 규칙 자바스크립트를 다루기 위해서는 기초적인 특징과 기본 문법이 있습니다. 가장 기본이기 때문에 이 부분을 숙지하고 자바스크립트를 공부하세요! 자바스크립트란? JavaScript는 웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립트 프로그래밍 언어입니다. HTML은 정적인 레이아웃을 표현한다면, JavaScript는 동적인 기능을 표현합니다. 자바스크립트는 1995년 넷스케이프 커뮤니케이션의 브렌던 아이크가 개발하였스며 Netscape Navigsator2.0에 구현되었습니다. 1996년에는 마이크로소프트사의 Internet Explorer3.0 탑재되었으며 java 애플릿으로 구현된 웹 브라우저의 지지부진한 보급과 맞물려 빠르게 보급되었습니다. 1997년부터 ESMAScript를 따르는 .. 2022. 7. 20.

이전 1 다음

728x90

Lucky Charms Rainbow

JAVASCRIPT

html

HTML

css

CSS

티스토리툴바