Dragonball Online Goku Hand
본문 바로가기

Javascript29

mouseEnter / mouseOver 차이점 📎 mouseEnter와 mouseOver의 차이점에 대해 알아봅시다. mouseEnter와 mouseOver는 어떤 요소 안으로 마우스가 들어오면 들어오는 순간을 감지하는 마우스 이벤트입니다. 🧩 반대 : mouseOut과 mouseLeave : 마우스가 어떤 요소 밖으로 이동하는 순간을 감지 🧩 일반적으로 mouseOver는 mouseOut와 짝을 이루고, mouseEnter는 mouseLeave와 짝을 이루어 사용합니다. ➰짝꿍 mouseOver ⎯ mouseOut mouseEnter ⎯ mouseLeave 📎 mouseOver와 mouseEnter 차이 이벤트 버블링 : 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하고 최상단의 부모 요소를 만.. 2022. 9. 6.
요소 크기 메서드 Javascript 요소 크기 메서드에 대해 알아봅시다! 📎 Javascript 요소 크기 메서드 종류 속성은 가져오는 것 밖에 못하고 메서드는 값을 설정해줄 수 있습니다. 번호 속성/메서드 이름 설명 01 element.clientWidth 요소의 가로값(마진/보더 미포함) 02 element.clientHeight 요소의 높이값(마진/보더 미포함) 03 element.clientTop 요소의 Y축값(부모기준) 04 element.clientLeft 요소의 X축값(부모기준) 05 element.offsetWidth 요소의 가로값(보더/패딩 포함) 06 element.offsetHeight 요소의 가로값(보더/패딩 포함) 07 element.offsetTop 요소의 Y축값(문서 기준) 08 element.. 2022. 9. 1.
GSAP GSAP에 대해 알아봅시다! 📎GSAP란? : GrennSock에서 만든 자바스크립트 애니메이션 라이브러리입니다. : 일반적으로 애니메이션 효과는 CSS로 처리하거나 제이쿼리(JQuery)에서 제공하는 .animate()나 fadeIn(), SlideDown() 등으로 구현하는 것이 일반적입니다. 하지만 사용자의 욕구는 끝이 없고 그 이상의 복잡한 애니메이션을 구현하려면 다른 도구의 힘을 빌려야 하는데 GSAP가 그 중 하나입니다. ➰GSAP 사용법 📎 GSAP 사용 예시 const slider = document.querySelectorAll(".slider"); let currentIndex = 0; //let sliderCount = slider.length; setInterval(() => { c.. 2022. 8. 30.
charAt() 📎 charAt() 이란? : 문자열에서 특정 위치의 문자가 무엇인지 확인할 수 있는 메서드입니다. : 문자열의 개별 문자에 대해 특정 효과 줄 때 사용 string.charAt(index) : "문자열".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() 이란? : 특정 텍스트 안에 검색할 단어, 찾고싶은 단어가 있는 경우 해당 텍스트가 문구에 포함되어 있는지 확인하는 메서드입니다. : 단어뿐만 아니라 정규표현식을 사용하여 특정 패턴을 검색하는 것 가능 string.match('찾을 단어') 반환(배열로 표현됨) : [] : 예시 참고! 정규식 지원됨 🔍 match() 메서드 사용예제 (★주석이 리턴값입니다!★) const str1 = "javascript reference"; const currentStr1 = str1.match("javascript"); //javascript const currentStr2 = str1.match("reference"); //reference const currentStr3 = str1.match(.. 2022. 8. 23.
search() 📎 search() 이란? : 문자열에서 조건 문자열을 찾아서 몇 번째 위치에 있는지 확인을 해주는 메서드입니다. : 일치값 있으면? 일치값 위치 색인번호 반환 (0부터 시작) : 일치값 없으면? -1 반환 (‣ 문자열 포함 검사에 활용) string.search() "문자열".search("검색값"); "문자열".search(정규식표현); : 정규식표현은 따옴표로 안 묶음! indexOf랑은 다르게 숫자값을 안가져옴 (, 0)X 🔍 search() 메서드 사용예제 (★주석이 리턴값입니다!★) const str1 = "javascript reference"; const currentStr1 = str1.search("javascript"); //0 const currentStr2 = str1.search.. 2022. 8. 23.
함수 유형 점점 매운맛🌶인 함수에 대해 알아봅시다! 함수는 실행문이며 재활용을 위해 사용합니다. 📌 함수 유형 : 함수와 매개변수를 이용한 형태 📌 함수 유형 : 함수와 변수를 이용한 형태 📌 함수 유형 : 함수와 배열, 객체를 이용한 형태 📌 함수 유형 : 객체 안에 변수와 함수를 이용한 형태 📌 함수 유형 : 객체 생성자 함수 📌 함수 유형 : 프로토타입 함수 📌 함수 유형 : 객체 리터럴 함수 📎 함수 유형 : 함수와 매개변수를 이용한 형태 ⭐️매개변수 형태⭐️ function func(str){ document.write(str) } func("함수가 실행되었습니다."); 🔍 예시 function func(num, str1,str2){ document.write(num + ". " + str1 + "가 " .. 2022. 8. 23.
includes() includes() 이란? : 문자열이 특정 문자열을 포함하는지 확인하는 메서드, 불린(true, false)을 반환 string.includes(searchString, length) searchString : 검색할 문자열로 필수 요소임, 대소문자를 구분 length : 검색을 시작할 위치. 선택 요소로, 값이 없으면 전체 문자열을 대상으로 함 포함 여부 알려줌 "문자열".includes(검색값) "문자열".includes(검색값, 시작값) includes() 메서드 사용예제 (★주석이 리턴값입니다!★) const str1 = "javascript reference"; const currentStr1 = str1.includes("javascript"); //true const currentStr2 .. 2022. 8. 18.
padStart() / padEnd() padStart() / padEnd() 에 대해 알아봅시다! padStart() 메서드란? : 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환 : 채워넣기는 대상 문자열의 시작(좌측)부터 적용 string.trim() padEnd() 메서드란? : 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환 : 채워넣기는 대상 문자열의 끝(우측)부터 적용 (자릿수, 뭘로 채울지(기본 숫자빼고 나머지 자리수를 채우는데 자릿수보다 적으면 반복, 크면 자릿수만큼만 채우고 짤림)) "문자열".padStart(길이) "문자열".padStart(길이, 문자열) string.padStart(목표 문자열 길이, "현재 문자열에 앞에 채워넣을 다른 문자열.. 2022. 8. 18.
repeat() repeat() 이란? : 문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열을 반환 string.repeat(count) string : 문자열 count 매개변수 : 문자열을 반복할 횟수 (양의 정수) repeat() 메서드 사용예제 (★주석이 리턴값입니다!★) 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(문자열, 문자열....) concat() 메서드 사용예제 (★주석이 리턴값입니다!★) const str1 = "javascript"; const currentStr1 = str1.concat("reference") //javascriptreference const currentStr2 = str1.concat(" ", "reference") //javascript refer.. 2022. 8. 18.
replace() / replaceAll() replace() / replaceAll()에 대해 알아봅시다! replace() / replaceAll() 메서드란? : 대상 문자열을 원하는 문자값으로 변환하는 메서드 : 첫번째 매개변수는 변환하고자 하는 대상이 될 문자열 : 두번째 매개변수는 변환할 문자 값 : replace()에서 따옴표를 / 슬래시로 대체하고, 뒤에 gi 를 붙이면 replaceAll()과 같은 기능 string.replace() string.replaceAll() "문자열".replace("찾을 문자열", "변경할 문자열") "문자열".replace(정규식) "문자열".replace(정규식, "변경할 문자열") [정규식] * g : 발생할 모든 패턴에 대한 전역 검색 * i : 대/소문자 구분 안함 * m : 여러 줄 검색 r.. 2022. 8. 18.
split() split()이란? : 구분자를 기준으로 문자열을 잘라 배열로 입력할 때 사용하는 메서드 출력방법 "문자열".split(구분자); "문자열".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.split(' ') // ['javascript', 'reference'] con.. 2022. 8. 18.
trim() / trimStart() / trimEnd() trim() / trimStart() / trimEnd() 에 대해 알아봅시다! trim() 메서드란? : 문자열의 앞쪽, 뒤쪽 공백을 모두 제거한 문자열을 반환 string.trim() trimStart() 메서드란? : 문자열의 앞쪽 공백을 모두 제거한 문자열을 반환 string.trimStart() trimEnd() 메서드란? : 문자열의 뒤쪽 공백을 모두 제거한 문자열을 반환 string.trimEnd() trim() / trimStart() / trimEnd() 메서드 사용예제 const str1 = " javascript "; const currentStr1 = str1.trim(); document.querySelector(".sample03_N1").innerHTML = "1"; docum.. 2022. 8. 18.
toUppercase() / toLowercase() toUppercase() / toLowercase() 에 대해 알아봅시다! toUppercase() 메서드란? : 문자열을 대문자로 변환해서 반환 string.toUpperCase() toLowercase() 메서드란? : 문자열을 소문자로 변환해서 반환 string.toLowerCase() toUppercase() / toLowercase() 메서드 사용예제 >const str1 = "javascript"; const currestStr1 = str1.toUpperCase() document.querySelector(".sample02_N1").innerHTML = "1"; document.querySelector(".sample02_Q1").innerHTML = "javascript"; documen.. 2022. 8. 18.
템플릿 문자열 템플릿(template) 문자열이란? : 문자열 결합 : 값을 (변수 or 상수) 문자열 안에 써야하는 경우에 사용하는 것 : 간단하게 말해서 내장된 표현식을 허용하는 문자열 리터럴 : 따옴표 대신 ``(백틱) 문자로 문자열을 감싸서 만드는데 ${} 안에 표현식을 넣어 값이나 간단한 식 등 자바스크립트 문법을 문자열 안에 사용 우선 ``(백틱)으로 문장을 감싸고, 변수가 들어갈 부분에 ${변수명}과 같은 형태로 입력 템플릿(template) 문자열 사용예제 const str1 = "자바스크립트"; const str2 = "제이쿼리"; //document.write(str1 + str2); //자바스크립트제이쿼리 document.querySelector(".sample01_N1").innerHTML = ".. 2022. 8. 18.
slice() / substring() / substr() slice() / substring() / substr() 에 대해 알아봅시다! 01. slice() 메서드 slice() 메서드는 주어진 배열의 start 인덱스부터 end 인덱스까지(단, end인덱스는 포함하지 않음)에 대한 새로운 배열 객체로 반환합니다. ★slice(start index, end index)★ //start index : 0을 시작으로 하는 시작점에 대한 인덱스 : 만약 음수라면 배열의 끝에서부터의 길이를 나타냄 (-1이면 배열에서 제일 마지막 한 개 추출) : 배열의 길이보다 큰 값이면 빈 배열을 반환 //end index : 추출을 종료할 인덱스(end index를 제외하고 추출) : end가 생략되면? 배열의 끝까지(배열의 길이) 추출 : end가 배열의 길이보다 크다면? 배.. 2022. 8. 16.
indexOf() / lastIndexOf() indexOf() / lastIndexOf() 에 대해 알아봅시다! indexOf() 메서드란? : 앞에서부터 검색할 값을 찾기 시작하는 속성 : 여기서 시작할 위치가 생략이 될 경우에는 시작위치의 값을 0으로 인식하여 처음부터 검색을 시작 : 일치하는 결과값이 없을 경우에는 -1로 결과를 리턴 string.indexOf(검색할 값 , 시작위치) lastIndexOf() 메서드란? : 끝에서부터 검색할 값을 찾기 시작 : 시작위치가 생략되었을 경우 맨 끝에서부터 검색을 시작 string.lastIndexOf(검색할 값 , 시작위치) ★ 요약 ★ 검색된 문자열이 첫번째로 나타나는 위치의 index를 반환. 찾는 문자열이 없으면 -1을 반환 문자를 찾을 때 대소문자를 구분 indexOf() / lastInd.. 2022. 8. 16.
정규표현식 정규표현식이란? : 사전적인 의미로는 특정한 규칙을 가진 문자열의 집합을 표현하는데 사용하는 형식 언어입니다. 주로 Programming Language나 Text Editor 등에서 문자열의 검색과 치환을 위한 용도로 쓰입니다. 입력한 문자열에서 특정한 조건을 표현할 경우 일반적인 조건문으로는 다소 복잡할 수 있지만, 정규표현식을 이용하면 매우 간단하게 표현할 수 있습니다. 하지만, 코드가 간단한 만큼 가독성이 떨어져 표현식을 숙지하지 않으면 이해하기 힘들다는 문제점이 있습니다. 정규표현식은 패턴을 사용하여 문자열을 처리합니다! 정규표현식 객체 주요 패턴을 정리해봅시다! 패턴 설명 abc abc 문자열을 검색합니다. /abc/는 'abc' [abc] a, b, c 중 문자 하나를 검색합니다. /[abc.. 2022. 8. 16.
내장 함수 내장 함수 내장 함수는 자바스크립트에 기본적으로 내장되어 있는 함수들을 말합니다. ★종류★ 01. 인코딩, 디코딩 함수 02. 숫자, 유/무한 값 판별 함수 03. 숫자, 문자 변환 함수 04. 자바스크립트 코드 변경 함수 ▶ 인코딩, 디코딩 함수 URL주소에 쿼리 정보를 전송하여 데이터를 처리해야 되는 프로그램의 경우 한글과 같은 유니코드 문자가 포함되어 있으면 오류가 발생할 수 있습니다. 이런 경우 인코딩 함수를 이용하여 문자를 부호화시키고 부호화된 문자를 다시 디코딩 함수를 이용하여 원래 문자로 되돌릴 수 있습니다. 함수명 설명 encodeURIComponent() 영문, 숫자와 ()-_.~*!'을 제외한 문자를 인코딩합니다. decodeURIComponent() encodeURIComponent(.. 2022. 8. 16.
배열 객체 배열 객체 배열 객체는 인접한 메모리 블록 내의 특정 위치에 보관되는 데이터 조각입니다. 이러한 메모리 블록을 "Array" 라고 하며 컴퓨터 프로그램 내에서 쉽게 구성하고 엑세스 할 수 있도록 유사한 객체를 함께 그룹화하는 데 사용됩니다. 배열에서 객체의 위치를 "Index" 라고 합니다. 대부분의 컴퓨터 언어에서 첫 번째 객체의 색인은 1인 아닌 0에서 시작합니다. 배열의 모든 객체는 동일한 유형이어야 하며 배울에 문자열을 포함하도록 선언된 경우 모든 배열 객체는 문자열이어야 합니다. 일반적인 객체 유형이 배열에 의해 선언된 것이면 배열 객체는 크기에 관계없이 모든 유형의 데이터를 포함할 수 있습니다. ▶ 배열 속성 : length ▶ 배열 메서드 01. join() 02. push() / pop().. 2022. 8. 11.
요소 선택 요소 선택 요소를 제어하기 위해서 가장 먼저해야할 것은 요소를 선택하는 것입니다. 그렇다면 요소를 어떻게 불러와서 제어를 하는걸까요? 바로 선택자를 통해서 요소를 불러옵니다. ▶ 요소를 직접 선택하는 메서드 메서드 설명 getElementById() document.getElementById('content')일 경우 HTML 요소 중 id 속성이 'content'인 요소를 선택합니다. getElementsByClassName() document.getElementsByClassName('menu')일 경우 HTML 요소 중 class 명이 'menu'인 요소들을 선택합니다. getElementsByTagName() document.getElementsByTagName('ul')일 경우 HTML 요소 중.. 2022. 8. 7.
전역변수와 지역변수 전역변수와 지역 변수 변수는 함수 블록{}을 기준으로 변수의 선언 위치에 따라 '전역 변수'와 '지역 변수'로 나뉘어집니다. '전역 변수' : 함수 블록{} 밖이나 안에서 자유롭게 사용 가능 '지역 변수' : 함수 블록{} 내에서만 사용 가능 ▶ 전역 변수와 지역 변수 선언 위치 전역 변수 지역 변수 var 변수; function 함수 () { } function 함수 () { var 변수; } 예시 var kor = 90; function getScore(){ kor = 100; document.write(kor); } getScore(); document.write(kor); 결과 보기 함수 블록{}안에 있는 kor변수는 전역 변수입니다. ∴ getScore()함수를 호출하게 되면 kor 변수 값이 .. 2022. 7. 28.
함수(function) 함수 함수는 프로그램에서 반복적으로 사용되는 기능을 만들어 내기 위한 코드들의 집합으로 이해하면 됩니다. 01. 선언적 함수 선언적 함수는 function키워드로 함수를 만드는 선언적 방식입니다. function 함수 () { 실행문; } · 선언적 함수의 호출 '선언적 함수'는 함수를 호출할 때 함수의 앞 또는 뒤에서 호출 가능합니다. 변수나 함수를 선언하지 않고 호출하였을 때는 에러가 발생해야 하는 것이 맞지만, vas로 선언한 변수와 선언적 함수는 변수, 함수 선언 이전에 호출하여도 에러를 발생시키지 않습니다. 이것을 자바스크립트 성질을 '끌어올리기' 호이스팅(Hoisting)이라고 합니다. 02. 익명 함수 익명 함수는 변수에 함수 데이터를 저장하여 변수를 마치 함수처럼 사용 할 수 있도록 만들어.. 2022. 7. 26.
조건문 조건문 조건문은 특정 조건 만족 시(true인 경우)실행하는 명령의 집합이며, 종류로는 if와 switch가 있다. if문 if문은 조건식의 결과가 참(true)이면 주어진 실행문을 실행하고, 거짓(false)이면 아무것도 실행하지 않는 문장입니다. - if문의 형식 ① if (조건식) { 실행문; } - if문의 형식 ② if (조건식) { 실행문1; } else 실행문2; } - if문의 형식 ③ if (조건식1) { 실행문; } else if (조건식2) { 실행문2; } else { 실행문3; } - if문의 형식 ④ if문은 if문 안에 또 다른 if문을 중첩하여 사용할 수 있습니다. if (조건식1) { if (조건식2) { 실행문; } } switch문 switch문은 if~else문과 마찬.. 2022. 7. 26.
데이터 타입(Data Type) 데이터 타입(Data Type) 데이터 타입(Data Type)은 변수에 저장되는 데이터의 유형으로 원시(Primitive)데이터 타입과 객체(Object) 데이터 타입으로 나눌 수 있습니다. 원시 데이터 타입 : number, string, boolean, undefined, null, symbol 등 객체 데이터 타입 : function, object, array 등 number(숫자) 데이터 number 데이터는 정수, 소수점, 지수를 표현할 수 있습니다. var num1 = 10; //정수 var num2 = 10.5;//소수점 var num3 = le+2;//지수 string(문자) 데이터 string 데이터는 ''또는 ""으로 표현할 수 있습니다. 보통 문자 데이터는 작은따옴표로 많이 표현합니.. 2022. 7. 26.
for문 정리 반복문 반복문은 프로그램에서 필요한 결과 값을 도출하기 위해 실행문의 순서를 반복적으로 실행시키는 문법을 말합니다. 빈복문에는 while문, do while문, for문이 있으며, for문을 가장 많이 사용합니다. while문 for문이 정해진 횟수만큼 반복한다면, while 문은 조건식이 true일 경우에 계속해서 반복합니다. 초기 값{ while (조건식){ 실행문; 증가감식; } do while문 조건에 따라 반복을 계속할지를 결정할 때 사용하는 것은 while 문과 동일하나, 무조건 {}를 한 번 실행하고, 조건을 검사하여 반복을 결정합니다. 초기 값{ do{ 실행문; 증가감식; } while (조건식) for문 for문은 특정 구문을 여러번 반복하고 싶을 때 사용하는 반복문입니다. for ( 초.. 2022. 7. 21.
연산자 자바스크립트 연산자 프로그램에서 필요하 수식을 만들 때 필요한 것이 연산자입니다. 자바스크립트에서 연산자에는 산술연산자, 대입연산자, 비교연산자, 논리연산자 등이 있습니다. 산술 연산자 산술 연산자는 사칙연산을 다루는 기본적이면서도 가장 많이 사용되는 연산자입니다. 산술 연산자 종류 속성 설명 + 더하기 연산을 할 때 사용합니다. 문자와 문자, 문자와 변수 등을 연결할 때 사용합니다. - 빼기 연산을 할 때 사용합니다. * 곱하기 연산을 할 때 사용합니다. / 몫을 구 할 때 사용합니다. % 나머지를 구할 때 사용합니다. ++ 1씩 증가시킬 때 사용합니다. -- 1씩 감소시킬 때 사용합니다. 대입 연산자 대입 연산자는 오른쪽에 있는 피연산자(값)을 =(대입연산자)왼쪽에 있는 피연산자(변수, 대상)에 저장.. 2022. 7. 20.
기본 규칙 기본 규칙 자바스크립트를 다루기 위해서는 기초적인 특징과 기본 문법이 있습니다. 가장 기본이기 때문에 이 부분을 숙지하고 자바스크립트를 공부해야합니다. 자바스크립트란? JavaScript는 웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립트 프로그래밍 언어입니다. HTML은 정적인 레이아웃을 표현한다면, 자바스크립트는 동적인 기능을 표현합니다. 자바스크립트는 1995년 넷스케이프 커뮤니케이션의 브렌던 아이크가 개발하였으며 Netscape Navigsator2.0에 구현되었습니다. 1996년에는 마이크로소프트사의 Internet Explorer3.0 탑재되었으며 java 애플릿으로 구현된 웹 브라우저의 지지부진한 보급과 맞물려 빠르게 보급되었습니다. 1997년부터 ESMAScript를 따르는 표준.. 2022. 7. 20.

티스토리툴바