본문 바로가기

JavaScript30

오답노트1006 오답 노트 10월 6일 쪽지시험 오답노트 오답노트 보러가기 2022. 10. 6.

오답노트 오답 노트 맞은 문제도 제대로 이해하고 공부할 겸 20문제 모두 해설을 달았습니다. 는 사실 시험지를 학원에 놓고오는 바람에 20문제 전부 적었어요 이제 문제 10개를 만들어야 하는데 어떻게 만들어야 할 지 굉장히 고민되네요… 오답노트 보러가기 2022. 10. 3.

[JavaScript] mouseenter와 mouseover의 차이점 알아보기 mouseenter와 mouseover 메서드의 차이는? 이번 포스팅에서는 mouseenter와 mouseover 메서드의 차이에 대해 다뤄보도록 하겠습니다. mouseenter, mouseover 이벤트란 무엇인가!? mouseenter와 mouseover는 어떤 요소 안으로 마우스 커서가 들어오는 순간을 감지하는 이벤트이며, 이와 반대로 마우스가 어떤 요소 밖으로 이동하는 순간을 감지하는 이벤트는 mouseout, mouseleave다. mouseenter mouseleave mouseover mouseleave 그래서 둘이 뭐가 다른데!?🤔 mouseenter mouseleave의 경우는 이벤트 발생 시 버블링이 일어나지 않으며 자신만이 이벤트를 받을 수 있다. 반면, mouseover mousel.. 2022. 9. 5.

[JavaScript] 요소 크기 메서드 정리 요소 크기 메서드 요소 크기 메서드에 대해 정리해보자. 요소 크기 메서드 정리 메서드 설명 element.clientWidth 요소의 가로값(margin/border 미포함) element.clientHeight 요소의 세로값(margin/border 미포함) element.clientTop 요소의 Y축값(부모 기준) element.clientLeft 요소의 X축값(부모 기준) element.offsetWidth 요소의 가로값(border/padding 포함) element.offsetHeight 요소의 세로값(border/padding 포함) element.offsetTop 요소의 Y축값(문서 기준) element.offsetLeft 요소의 X축값(문서 기준) element.getBoundingClie.. 2022. 9. 1.

[JavaScript] GSAP 알아보기 GSAP란? GreenSock에서 만든 JavaScript 애니메이션 라이브러리로 일반적으로 애니메이션 효과는 CSS 또는 jQuery의 .animate() 등으로 구현하지만, 기존의 CSS와 jQuery로 구현하기 어려운 복잡한 애니메이션을 구현하기 위해 만들어진 것이 바로 GSAP입니다. GSAP 적용 방법 GreenSock 공식 홈페이지에서 설치 파일에서 다운로드 하는 방법이 있지만 귀찮으니 그냥 아래의 코드를 복붙하자. 기존 JS 코드와 GSAP 코드를 비교해보자 슬라이드 이펙트 02 포스팅에서 사용된 JS 코드를 가지고 왔다. GSAP 코드로 바꿔보도록 하자. JS 코드보다 좀 더 간략화 된 모습을 알 수 있다. 사용 문법은 gsap.to(".요소 클래스값", { 속성 }); 이러하다. 2022. 8. 29.

[JavaScript] 문자열 메서드 - charAt() 문자열 메서드 : 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 2022. 8. 22.

[JavaScript] 문자열 메서드 - match() 문자열 메서드 : match() 이번 포스팅에서는 문자열 메서드 중 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 currentSt.. 2022. 8. 22.

[JavaScript] 문자열 메서드 - search() 문자열 메서드 : search() 이번 포스팅에서는 문자열 메서드 중 search()에 대해 설명합니다. 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 currentStr4 = str1.search("a"); // 1 const currentStr5 = str1.search(.. 2022. 8. 22.

[JavaScript] 함수 유형 알아보기 함수 유형 이번 포스팅에서는 자바스크립트의 재활용 목적으로 사용되는 함수 유형 7가지를 살펴보도록 하겠습니다. 1. 함수 유형 : 함수와 매개변수를 이용한 형태 재활용 목적으로 사용되며 함수와 매개변수를 이용한 형태입니다. function func(num, str1, str2) { document.write(num + ". " + str1 + "가 " + str2 + "되었습니다. "); } func("1", "함수", "실행"); func("2", "자바스크립트", "실행"); func("3", "제이쿼리", "실행"); // 이런식으로 추가하면서 소스 재활용이 가능함 결과 보기 1. 함수가 실행되었습니다. 2. 자바스크립트가 실행되었습니다. 3. 제이쿼리가 실행되었습니다. 2. 함수 유형 : 함수와 .. 2022. 8. 22.

[JavaScript] 문자열 메서드 - includes() 문자열 메서드 : includes() 이번 포스팅에서는 문자열 메서드 중 includes()에 대해 다뤄보도록 하겠습니다. includes() 문자열 포함 여부를 검색해서 불린(true/false)으로 반환한다. "문자열".includes(검색값) "문자열".includes(검색값, 시작값) 코드 보기 const str1 = "javascript reference"; const currentStr1 = str1.includes("javascript"); // true : 포함됨 const currentStr2 = str1.includes("j"); // true const currentStr3 = str1.includes("b"); // false : 포함되지 않음 const currentStr4 = s.. 2022. 8. 17.

[JavaScript] 문자열 앞·뒤 채우기 - padStart() & padEnd() 문자열 메서드 : padStart() / padEnd() 이번 포스팅에서는 문자열 메서드 중 padStart()와 padEnd()에 대해 다뤄보도록 하겠습니다. padStart() / padEnd() 주어진 길이에 맞게 앞·뒤의 문자열을 채우고, 새로운 문자열을 반환한다. 앞의 문자열을 채우는 건 padStart(), 뒤의 문자열을 채우는 건 padEnd(). "문자열".padStart(길이) "문자열".padStart(길이, 채울 문자열) "문자열".padEnd(길이) "문자열".padEnd(길이, 채울 문자열) 코드 보기 const str1 = "456"; const currentStr1 = str1.padStart(1, "0"); // 456 const currentStr2 = str1.padSta.. 2022. 8. 17.

[JavaScript] 문자열 메서드 - repeat() 문자열 메서드 : repeat() 이번 포스팅에서는 문자열 메서드 중 repeat()에 대해 다뤄보도록 하겠습니다. repeat() 문자열을 복사하여 복사한 새로운 문자열을 반환해준다. 즉, 단순 반복 기능이다. str1.repeat(반복 횟수); 코드 보기 const str1 = "javascript"; const currentStr1 = str1.repeat(0); //아무것도 출력되지 않음 const currentStr2 = str1.repeat(1); //javascript const currentStr3 = str1.repeat(2); //javascriptjavascript 2022. 8. 17.

[JavaScript] 문자열 메서드 - concat() 문자열 메서드 : concat() 이번 포스팅에서는 문자열 메서드 중 concat()에 대해 다뤄보도록 하겠습니다. concat() 둘 이상의 문자열을 결합해 새로운 문자열을 반환해준다. //"문자열".concat(문자열) : "문자열" + "문자열" 추가됨 //"문자열".concat(문자열, 문자열, …) : 무한으로 추가 가능함 코드 보기 const str1 = "javascript"; const currentStr1 = str1.concat("reference"); // javascriptreference const currentStr2 = str1.concat(" ", "reference"); // javascript reference const currentStr3 = str1.concat(",.. 2022. 8. 17.

[JavaScript] 문자열 메서드 - replace() & replaceAll() 문자열 메서드 : replace() / replaceAll() 이번 포스팅에서는 문자열 메서드 중 replace()와 replaceAll()에 대해 다뤄보도록 하겠습니다. replace() / replaceAll() 어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환한다. 문자열을 부분 문자로 구분하고 문자열로 반환한다. Visual Studio Code의 replace 기능을 떠올리면 이해하기 쉬울 것. //"문자열".replace(찾을 문자열, 변경할 문자열) //"문자열".replace(정규식) //"문자열".replace(정규식, 변경할 문자열) replaceAll에 대한 설명은 아래 예시 코드 밑의 주석 참고할 것. 코드 보기 const str1 = "javascript r.. 2022. 8. 17.

[JavaScript] 문자열 메서드 - split() 문자열 메서드 : split() 이번 포스팅에서는 문자열 메서드 중 split()에 대해 다뤄보도록 하겠습니다. split() 문자열에서 원하는 값을 배열로 반환한다. split('') 따옴표 안에 아무것도 안 쓸 경우 모든 문자열이 한 글자씩 쪼개져 나오며 따옴표 안에 문자열에 포함된 내용을 쓸 경우 해당 내용만 지워진 채 출력된다. // "문자열".split(구분자); // "문자열".split(정규식 표현); // "문자열".split(구분자, 제한(개수설정)); 코드 보기 const str1 = "javascript reference"; const currentStr1 = str1.split(''); //['j', 'a', 'v', 'a', 's', 'c', 'r', 'i', 'p', 't', '.. 2022. 8. 17.

[JavaScript] 문자열 앞·뒤 공백 제거하기 - trim() & trimStart() & trimEnd() 문자열 메서드 : trim() / trimStart() / trimEnd() 이번 포스팅에서는 문자열 메서드 중 trim() / trimStart() / trimEnd() 이 3가지에 대해 다뤄보도록 하겠습니다. trim() / trimStart() / trimEnd() 문자열의 앞·뒤 공백을 제거한다. trim() : 문자열 앞·뒤 공백 제거 trimStart() : 문자열 앞 공백만 제거 trimEnd() : 문자열 뒷 공백만 제거 번호 기본값 메서드 리턴값 1 ___javascript___ trim() javascript 2 ___javascript___ trimStart() javascript___ 3 ___javascript___ trimEnd() ___javascript 코드 보기 // 앞 뒤.. 2022. 8. 17.

[JavaScript] 대소문자 변경 - toUpperCase() & toLowerCase() 문자열 메서드 : toUpperCase() / toLowerCase() 이번 포스팅에서는 문자열 메서드 중 toUpperCase와 toLowerCase에 대해 다뤄보도록 하겠습니다. toUpperCase() / toLowerCase() toUpperCase는 문자열을 대문자로, toLowerCase는 소문자로 변경한다. 번호 기본값 메서드 리턴값 1 javascript toUpperCase() JAVASCRIPT 2 JAVASCRIPT toLowerCase() javascript 코드 보기 const str1 = "javascript"; const currentStr1 = str1.toUpperCase; document.querySelector(".sample02_N1").innerHTML = "1"; .. 2022. 8. 17.

[JavaScript] 정규 표현식 알아보기 정규 표현식이란? 정규 표현식(正規表現式, Regular Expression)은 문자열에서 특정 문자 조합을 찾기 위한 패턴으로 특정한 조건의 문자를 검색하거나 치환하는 과정을 매우 간편하게 처리할 수 있도록 하는 수단입니다. 정규 표현식 객체 주요 패턴 패턴 설명 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.

[JavaScript] 문자열 메서드 - indexOf() & lastIndexOf() 알아보기 문자열 메서드 : indexOf() / lastIndexOf() 이번 포스팅에서는 문자열 메서드 중 indexOf와 lastIndexOf에 대해 다뤄보도록 하겠습니다. indexOf() 문자열에서 특정 문자열의 첫번째로 시작되는 위치를 앞에서부터 찾고, 그 위치를 숫자로 반환한다. "문자열".indexOf(검색값) "문자열".indexOf(검색값, 위치값) 찾는 문자열이 없으면 -1을 리턴(출력)한다. 문자열을 찾을 때 대소문자를 구분한다. 코드 보기 const str1 = "javascript reference"; const currentStr1 = str1.indexOf("javascript"); // 0 : 시작위치를 의미함 const currentStr2 = str1.indexOf("referen.. 2022. 8. 16.

[JavaScript] 문자열 메서드 알아보기 문자열 메서드 이번 포스팅에서는 문자열 메서드에 대해 다뤄보도록 하겠습니다. 문자열 메서드 중 가장 많이 쓰이는 slice() / substring() / substr()에 대한 설명입니다. 얼핏보면 비슷해 보이는 이 3가지에도 꽤나 큰 차이점이 존재하는데요 이에 대해서 깊게 다뤄보도록 하죠. slice() / substring() / substr() 문자열에서 원하는 값을 추출해 문자열을 반환하는 메서드이다. 사용하는 방식은 아래 박스 참조. "문자열".slice(시작위치) "문자열".slice(시작위치, 끝나는 위치) // 시작위치의 값은 끝나는 위치의 값보다 작아야 한다. // substring() 시작값이 끝나는 값보다 클 경우 두 값을 바꿔서 처리(에러 방지) "문자열".substr(시작위치) .. 2022. 8. 16.

[JavaScript] 내장 함수 내장 함수 자바스크립트에 기본적으로 내장되어 있는 함수들을 말한다. 인코딩, 디코딩 함수 'https://www.google.com/search?query=자바스크립트' 위와 같이 URL 주소에 쿼리 정보를 전송해 데이터를 처리해야 하는 프로그램의 경우 한글과 같은 유니코드 문자가 포함되어 있으면 오류가 발생할 수 있는데 이런 경우 인코딩 함수를 이용해 문자를 부호화시키고 부호화된 문자를 다시 디코딩 함수를 이용해 원래 문자로 되돌릴 수 있다. 함수명 설명 encodeURIComponent() 영문, 숫자와 ( ) - _ . ~ * ! ' 을 제외한 문자를 인코딩한다. decodeURIComponent() encodeURIComponent()의 디코딩 함수 예제 코드 보기 var encodeStr = '.. 2022. 8. 13.

[JavaScript] 배열 메서드 알아보기 배열 메서드 이번 포스팅에서는 배열 메서드에 대해 다뤄보도록 하겠습니다. 배열 메서드 중 가장 많이 쓰이는 join(), push(), pop()에 대한 설명입니다. join() 배열의 요소들을 연결하여 하나의 값으로 만든다. 문자열 값으로 반환한다. 번호 기본값 메서드 리턴값 1 [100, 200, 300, 400, 500] join('') 100200300400500 2 [100, 200, 300, 400, 500] join(' ') 100 200 300 400 500 3 [100, 200, 300, 400, 500] join('★') 100★200★300★400★500 4 [100, 200, 300, 400, 500] join('-') 100-200-300-400-500 코드 보기 const arr.. 2022. 8. 11.

[JavaScript] 요소 선택 메서드 알아보기 요소 선택 요소를 직접 선택하는 메서드 메서드 설명 getElementById() document.getElementByid('content')일 경우, HTML 요소 중 id 속성이 'content'인 요소를 선택 getElementsByClassName() document.getElementsByClassName('menu')일 경우, HTML 요소 중 class명(名)이 'menu'인 요소들을 선택 getElementsByTagName() document.getElementsByTagName('ul')일 경우, HTML 요소 중 태그명이 'ul'인 요소들을 선택 getElementsByName() document.getElementsByName('txt')일 경우, HTML 요소 중 name명이 '.. 2022. 8. 5.

[JavaScript] 전역변수와 지역변수 전역변수와 지역변수 변수는 중괄호(함수 블록){ }를 기준으로 변수 선언 위치에 따라 전역변수와 지역변수로 나뉜다. 지역 변수는 블록 내에서만 사용 가능한 반면, 전역변수는 블록 바깥이나 안쪽이나 자유롭게 사용 가능하다. 전역변수와 지역변수의 선언 위치 이렇게 블록 { }에 의해 변수 범위가 달라지는 것을 변수의 scope(스코프)라고 한다. 전역변수 지역변수 var 변수; function 함수 () { } function 함수 () { var 변수; } 예시 01 아래의 예시에서는 함수 블록 내의 kor 변수가 전역변수이며 getScore() 함수를 호출하게 되면 kor 변수 값이 90에서 100으로 변경된다. var kor = 90; function getScroe() { kor = 100; // 전.. 2022. 7. 28.

[JavaScript] 함수의 종류와 사용방법 함수 프로그램에서 반복적으로 사용되는 기능을 만들기 위한 코드들의 집합 01. 선언적 함수 함수를 선언할 때 이름을 붙여주는 함수. function func() { document.write("함수가 실행되었습니다.1"); } func(); // 이걸 써야 출력됨 결과 보기 함수가 실행되었습니다.1 02. 익명 함수 말 그대로 이름 없는 함수로 함수코드가 변수명에 저장된 형태이다. const func = function() { document.write("함수가 실행되었습니다.2"); // 변수 이름 (func)을 쓰고 있어서 익명함수 } func(); 결과 보기 함수가 실행되었습니다.2 03. 매개변수 함수 함수 호출 시 인수로 전달된 값을 함수 내부에서 사용 가능하도록 해주는 변수. str이 바로 매.. 2022. 7. 26.

[JavaScript] 데이터 타입 종류 알아보기 데이터 타입 변수에 저장되는 데이터의 유형(타입)을 의미하며 원시(Primitive) 타입, 객체(Object)타입으로 나뉩니다. 원시 타입에는 number, string, boolean, undefined, null, symbol 등이 있으며 객체 타입에는 function, object, array 등이 있습니다. 01. number 정수, 소수점, 지수 표현 가능합니다. var num1 = 10; var num2 = 10.5; var num3 = le+2; console.log(num1); // 10 console.log(num2); // 10.5 console.log(num3); // 100 le+2는 1*10의 2승을 의미함. 02. string 문자를 표현하고자 할 때 사용하는 데이터이며 ' '.. 2022. 7. 25.

[JavaScript] 조건문의 종류와 사용방법 조건문 프로그램에서 주어진 표현식의 결과에 따라 별도의 명령을 수행하도록 제어하는 실행문입니다. 그 중 if가 가장 기본이 되는 실행문입니다. 01. if문 조건에 맞으면(참(ture)이면) 참의 결과를 실행시켜줍니다. console.log로 출력시켰기 때문에 Chrome F12 키를 통해 콘솔 창에서만 확인 가능. /* if (조건식) { 실행문; } */ var age = 10; // age(나이)는 10세이다. var admissionFee = ' '; // (입장료) 결과 실행 칸 if (age < 13) { // age = 10, 13 이하이므로 true admissionFee = '2,000원'; // true이므로 '2000원' 출력됨 } console.log(admissionFee); 결과.. 2022. 7. 25.

[JavaScript] 반복문 사용법과 활용예시 반복문 프로그램에서 필요한 결과 값을 도출하기 위해 실행문의 순서를 여러번 반복시킬 때 사용하는 문법입니다. while문, do while문, for문 등이 있지만 for문이 가장 많이 쓰입니다. for (초기 값; 조건식; 증감값) { 실행문; } 01. while문 조건식이 true일 경우에 계속해서 반복하는 반복문입니다. /* 초기 값 while (조건식) { 실행문; 증가감식; } */ var n = 1; var sum = 0; while(n < 8) { sum += n; n++; } console.log(sum); 결과 보기 28 02. do while문 조건에 따라 반복을 계속할지를 결정할 때 사용하는 것은 while문과 같지만 무조건 중괄호{ } 안의 실행문을 실행한 후 조건을 검사하여 반복.. 2022. 7. 21.

[JavaScript] 연산자 종류 알아보기 자바스크립트 연산자 프로그램에 필요한 수식을 만들 때 필요한 것이 바로 연산자입니다. 자바스크립트에서 연산자에는 산술 연산자, 대입 연산자, 비교 연산자, 논리 연산자 등이 있습니다. 01. 산술 연산자 사칙연산을 다루는 정도의 기본적이고 아주 많이 쓰이는 중요한 연산자입니다. 산술 연산자 종류 속성 설명 + 더하기 연산을 할 때 사용 문자와 문자, 문자와 변수 등을 연결할 때 사용 - 빼기 연산을 할 때 사용 * 곱하기 연산을 할 때 사용 / 몫을 구할 때 사용 % 나머지 구할 때 사용 ++ 1씩 증가 시킬 때 사용 -- 1씩 감소 시킬 때 사용 02. 대입 연산자 값을 변수에 대입(저장)하는 방식의 연산자로, 대입연산자에서의 '='는 '같다'가 아닌 대입(저장)함을 의미합니다. 대입 연산자 종류 속성.. 2022. 7. 20.

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

이전 1 다음

Reference Book

JavaScript

JavaScript

HTML

HTML

CSS

CSS

광고 준비중입니다.

티스토리툴바