본문 바로가기
반응형

Javascript28

mouseenter / mouseover 차이점 mouseenter / mouseover 차이점 마우스 이벤트의 종류 click : 마우스를 클릭할 때 발생 dbclick : 마우스를 더블 클릭할 때 발생 mousedown : 마우스 버튼을 누를 때 발생 mouseup : 마우스 버튼을 뗄 때 발생 mouseenter : 마우스가 요소의 경계 외부에서 내부로 이동할 때 발생 mouseleave : 마우스가 요소의 경계 내부에서 외부로 이동할 때 발생 mousemove : 마우스를 움직일 때 발생 mouseout : 마우스가 요소를 벗어날 때 발생 mouseover : 마우스를 요소 안에 들어올 때 발생 mouseenter JS 에서는 Explorer전용 이벤트이나 jQuery 에서는 브라우저를 고려하지 않고 작동이 되도록 구성요소에 마우스 포인터가 진.. 2022. 9. 5.
요소 크기 메서드 요소 크기 메서드 종류 제이쿼리 자바스크립트 설명 Dimensions width() - 요소의 가로(패딩/보더/마진 미포함) height() - 요소의 세로(패딩/보더/마진 미포함) innerWidth() clientWidth 요소의 가로(패딩 포함, 보더/마진 미포함) innerHeight() clientHeight 요소의 세로(패딩 포함, 보더/마진 미포함) outerWidth() offsetWidth 요소의 가로(패딩/보더 포함, 마진 미포함) outerHeight() offsetHeight 요소의 세로(패딩/보더 포함, 마진 미포함) outerWidth(true) - 요소의 가로(패딩/보더/마진 포함) outerHeight(true) - 요소의 세로(패딩/보더/마진 포함) See the Pen e.. 2022. 9. 1.
GSAP GSAP 개념 The GreenSock Animation Platform (줄여서 GSAP)는 프론트엔드 개발자와 디자이너들이 쉽게 사용할 수 있는 아주 강력한 타임라인기반의 애니메이션 자바스크립트 라이브러리 입니다. CSS와 바닐라 자바스크립트만으로도 동적인 화면을 만들 수 있지만 GSAP은 세밀한 움직임과 동작의 연속성을 훨씬 간편하게 설정할 수 있습니다. GSAP 사용방법 코드를 작성하기전에, 먼저 HTML파일에 GSAP 라이브러리를 추가해야합니다. CDN을 이용하여 추가해도되고 직접 파일을 다운받아 추가해도 됩니다. GSAP의 Tween 객체를 만드는 기본 메소드 gsap.to() gsap.from() gsap.fromTo() See the Pen GSAP ex by sukjun2 (@sukjun.. 2022. 8. 29.
charAt() 문자열 메서드 : charAt() match() 메서드는 문자열에서 특정 인덱스에 위치하는 유니코드 단일문자를 반환합니다. "문자열".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 charAt() 예제 var anyString = 'Brave new world'; console.log("The character at index 0 is '" + anyString.. 2022. 8. 22.
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 currentStr4 = str1.match(/reference/); //reference const currentStr5 = str1.match(/Reference/); //nul.. 2022. 8. 22.
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("v"); //2 const currentStr6 = str1.sea.. 2022. 8. 22.
함수 유형 함수 유형 함수는 JavaScript에서 기본적인 구성 블록 중의 하나입니다. 함수는 작업을 수행하거나 값을 계산하는 문장 집합 같은 자바스크립트 절차입니다. 함수를 사용하려면 함수를 호출하고자 하는 범위 내에서 함수를 정의해야만 합니다. 01. 함수와 매개변수를 이용한 형태 재활용 목적으로 사용되며 함수와 여러개의 매개변수를 이용한 형태입니다. function func(num, str1, str2) { document.write(num + ". " + str1 + "가 " + str2 + "되었습니다.13"); } func("1", "함수", "실행"); func("2", "자바스크립트", "실행"); func("3", "제이쿼리", "실행"); 결과 확인하기 1. 함수가 실행되었습니다.13 2. 자바.. 2022. 8. 22.
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 = str1.includes("reference"); //true const currentStr5 = str1.include.. 2022. 8. 17.
padStart() / padEnd() 문자열 메서드 : padStart() / padEnd() padStart() / padEnd() 메서드는 주어진 길이에 맞게 앞/뒤 문자열을 채우고, 새로운 문자열을 반환합니다. 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"); //00456 const currentStr6 = str1.padSt.. 2022. 8. 17.
repeat() 문자열 메서드 : repeat() repeat() / repeatAll() 메서드는 문자열을 복사하여, 복사한 새로운 문자열을 반환합니다. 그 패턴은 문자열이나 정규식(RegExp)이 될 수 있으며, 교체 문자열은 문자열이나 모든 매치에 대해서 호출된 함수일 수 있습니다. pattern이 문자열 인 경우, 첫 번째 문자열만 치환이 되며 원래 문자열은 변경되지 않습니다. const str1 = "javascript"; const currentStr1 = str1.repeat(0); //'' const currentStr2 = str1.repeat(1); //javascript const currentStr3 = str1.repeat(2); //javascriptjavascript repeat() 예제 Ra.. 2022. 8. 17.
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(", ", "reference"); //javascript, reference const currentStr4 = str1.concat(", ", "ref.. 2022. 8. 17.
replace() / replaceAll() 문자열 메서드 : replace() / replaceAll() replace() 메서드는 어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환합니다. "문자열".relplace(찾을 문자열, 변경할 문자열) "문자열".relplace(정규식) "문자열".relplace(정규식, 변경할 문자열) const str1 = "javascript reference"; const currentStr1 = str1.replace("javascript", "자바스크립트"); // 자바스크립트 reference const currentStr2 = str1.replace("j", "J"); // Javascript reference const currentStr3 = str1.replace("e", ".. 2022. 8. 17.
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'] const currentStr3 = str1.split('', 1); //['j'] c.. 2022. 8. 17.
대/소문자 변경과 공백 제거 소문자/대문자/공백 제거 대/소문자를 변경하고, 공백을 제거하는 메서드를 알아봅니다. 01. toUpperCase() / toLowerCase() toUpperCase() : 문자열을 대문자로 변경합니다. toLowerCase() : 문자를 소문자로 변경합니다. 번호 기본값 메서드 리턴값 1 javascript toUpperCase(); JAVASCRIPT 2 JAVASCRIPT toLowerCase(); javascript 02. trim() / trimStart() / trimEnd() 문자열의 앞/뒤 공백을 제거합니다. 번호 기본값 메서드 리턴값 1 javascript trim(); javascript 2 javascript trimStart(); javascript 2 javascript trim.. 2022. 8. 17.
문자열 결합 / 템플릿 문자열 문자열 : 문자열 결합 / 템플릿 문자열 템플릿 리터럴은 백틱(`) 문자로 구분된 리터럴로, 여러 줄 문자열 , 포함된 표현식을 사용한 문자열 보간 및 태그가 지정된 템플릿 이라는 특수 구성을 허용 합니다. 따옴표 대신 ``(백틱) 문자로 문자열을 감싸서 만드는데 ${} 안에 표현식을 넣어 값이나 간단한 식 등 자바스크립트 문법을 문자열 안에 사용할 수 있습니다. 번호 기본값 메서드 리턴값 1 자바스크립트, 제이쿼리 문자열(string) 결합 자바스크립트제이쿼리 2 100, 200 숫자(number) 결합 300 3 모던, 자바스크립트, 핵심 문자열(string) 결합 나는 모던(modern) 자바스크립트(javascript) 핵심을 배우고 싶다. 4 모던, 자바스크립트, 핵심 템플릿 문자열 나는 모던(.. 2022. 8. 17.
정규표현식 정규표현식(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-a] 알파벳 소문자 문자를 검색합니다. [0-9] 0-9까지의 숫자를 검색합니다. . 하나의 문자를 검색합니다. 만약 '마침표' 문자 그대로의 의미를 사용할 경우 '₩.'으로 표현해야 합니다. \w 알파벳, 숫자, _를 검색합니다. \W 알파벳, 숫자,.. 2022. 8. 16.
slice() / substring() / substr() slice() / substring() / substr() 메서드(문자열 추출) 문자열에서 원하는 값을 추출하여 문자열을 반환하는 메서드입니다. 01. slice() "문자열".slice(시작위치) "문자열".slice(시작위치, 끝나는위치) // 시작 위치의 값은 끝나는 위치 값보다 작아야 합니다. const str1 = "javascript reference"; const currentStr1 = str1.slice(0); //javascript reference const currentStr2 = str1.slice(1); //avascript reference const currentStr3 = str1.slice(2); //vascript reference const currentStr4 = s.. 2022. 8. 16.
indexOf() / lastIndexOf() 문자열 메서드 : 검색 : indexOf() / lastIndexOf() indexOf('a')인 경우 'a'를 왼쪽 문자부터 검색하여 일치하는 index 번호를 반환합니다. 일치하는 문자가 없으면 -1을 반환합니다. indexOf() 메서드는 대소문자를 구분합니다. lastIndexOf() 메서드는 주어진 값과 일치하는 부분을 fromIndex 로부터 역순으로 탐색하여, 최초로 마주치는 인덱스를 반환합니다. "문자열".indexOf(검색값); "문자열".indexOf(검색값, 위치값); "문자열".lastIndexOf(검색값); "문자열".lastIndexOf(검색값, 위치값); const str1 = "javascript reference"; const currentStr1 = str1.indexOf.. 2022. 8. 16.
내장 함수 내장 함수 내장 함수는 자바스크립트에 기본적으로 내장되어 있는 함수들을 말합니다. 01. 인코딩, 디코딩 함수 'http://icoxpublish.com/search?query=자바스크립트'와 같이, URL주소에 쿼리 정보를 전송하여 데이터를 처리해야 되는 프로그램의 경우 한글과 같은 유니코드 문자가 포함되어 있으면 오류가 발생할 수 있습니다. 이런 경우 인코딩 함수를 이용하여 문자를 부호화시키고, 부호화된 문자를 다시 디코딩 함수를 이용하여 원래 문자로 되돌릴 수 있습니다. 함수명 설명 encodeURIComponent() 영문, 숫자와 ( ) - _ . ~ * ! '을 제외한 문자를 인코딩합니다. decodeURIComponent() encodeURIComponent()의 디코딩 함수 02. 숫자 유.. 2022. 8. 15.
배열 메서드 배열 메서드 배열 자체를 수정하며, 배열의 처음이나 끝에서 요소 하나를 추가하거나 제거하는 메서드입니다. 01. 배열 속성 : length : 배열 길이 구하기 : 반환(숫자) length 속성은 배열의 길이를 반환하는 속성입니다. 번호 기본값 메서드 리턴값 1 [100, 200, 300, 400, 500] length 5 2 ['a', 'b', 'c', 'd', 'e'] 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").innerHT.. 2022. 8. 11.
요소 선택 요소 선택 요소를 직접 선택하는 메서드 메서드 설명 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. 6.
지역변수/전역변수 지역변수/전역변수 '전역 변수'는 함수 블록{} 밖이나 안에서 자유롭게 사용 가능하지만 '지역 변수'는 함수 블록{} 내에서만 사용할 수 있습니다. 전역 변수와 지역 변수 선언 위치 전역 변수 지역 변수 var 변수; function 함수() { } function 함수() { var 변수; } 예시1 var kor = 90; function getScore() { kor = 100; // 전역 변수 console.log(kor); // 100 } getScore(); console.log(kor); // 100 예제1에서 함수 블록{}안에 있는 kor 변수는 전역 변수입니다. 따라서 getScore() 함수를 호출하게 되면 kor 변수 값이 90에서 100으로 바뀌게 됩니다. 예시2 var kor = .. 2022. 7. 28.
함수 함수 함수는 프로그램에서 반복적으로 사용되는 기능을 만들어 내기 위한 코드들의 집합입니다. 분류 종류 설명 사용자 정의 함수 선언적 함수 익명 함수 프로그램에서 필요한 기능을 사용자가 직접 정의해서 사용하는 함수입니다. 01. 선언적 함수 '선언적 함수'는 함수를 호출할 때 함수의 앞 또는 뒤에서 호출 가능합니다. function func() { document.write("함수가 실행되었습니다.1"); } 결과 확인하기 함수가 실행되었습니다.1 02. 익명 함수 익명 함수는 변수에 함수 데이터를 저장항 변수를 마치 함수처럼 사용 할 수 있도록 만들어 줍니다. 익명 함수는 변수 선언 이후에 호출해야 합니다. const func = function () { // 함수에 이름이 없어서 변수에 넣어 사용함 d.. 2022. 7. 26.
조건문 조건문 조건문은 주어진 조건식의 결과에 따라 별도의 명령을 수행하도록 제어하는 명령문입니다. 조건문 중에서도 가장 기본이 되는 명령문은 바로 if 문입니다. if문 if(조건식){ 실행문 } if 문은 조건식의 결과가 참(true)이면 주어진 명령문을 실행하며, 거짓(false)이면 아무것도 실행하지 않습니다. 예제 prompt()는 숫자로 입력한 데이터를 문자로 처리하기 때문에 '+' 연산자를 사용할 경우 더하기 연산이 아니라 연결 연산이 됩니다. 결과 확인하기 평균 90점 합격 평균 59점 불합격 switch문 switch 문은 if / else 문과 마찬가지로 주어진 조건 값의 결과에 따라 프로그램이 다른 명령을 수행하도록 하는 조건문입니다. 이러한 switch 문은 if / else 문보다 가독성.. 2022. 7. 25.
데이터 타입 데이터 타입 데이터 타입(Data Type)은 프로그래밍 언어에서 사용할 수 있는 데이터(숫자, 문자열, 불리언 등)의 종류를 말한다. 코드에서 사용되는 모든 데이터는 메모리에 저장하고 참조할 수 있어야 한다. number(숫자) 데이터 number 데이터는 정수, 소수점, 지수를 표현할 수 있습니다. var num1 = 10; var num2 = 10.5; var num3 = 1e+2; console.log(num1); // 10 console.log(num2); // 10.5 console.log(num3); // 100, 1e+2는 1*10의 2승을 의미합니다. string(문자) 데이터 string 데이터는 ''또는 ""으로 표현할 수 있습니다. var str1 = '문자'; var str2 = .. 2022. 7. 25.
반복문 반복문 반복문은 프로그램에서 필요한 결과 값을 도출하기 위해 실행문의 순서를 반복적으로 실행시키는 문법입니다. 반복문에는 while문, do while문, for문이 있으며, for문을 가장 많이 사용합니다. while문 초기 값 while (조건식) { 실행문; 증가감식; } for문이 정해진 횟수만큼 반복한다면, while 문은 조건식이 true 일 경우에 계속해서 반복합니다. 조건식이 false가 되면 반복 행위를 멈추고 while문을 종료합니다. do while문 초기 값 do { 실행문; 증가감식; } while (조건식) 조건에 따라 반복을 계속할지를 결정할 때 사용하는 것은 while 문과 동일합니다. 다만, 무조건 중괄호 {} 블럭을 한번 실행하고, 조건을 검사하여 반복을 결정합니다. fo.. 2022. 7. 21.
연산자 자바스크립트 연산자 프로그램에 필요한 수식을 만들 때 필요한 것이 연산자입니다. 자바스크립트에서 연산자는 산술연산자, 대입연산자, 비교연산자, 논리연산자 등이 있습니다. 산술 연산자 산술 연산자는 사칙연산을 다루는 기본적이면서도 가장 많이 사용되는 연산자입니다. 산술 연산자 종류 속성 설명 + 더하기 연산을 할 때 사용합니다. 문자와 문자, 문자와 변수 등을 연결할 때 사용합니다. - 빼기 연산을 할 때 사용합니다. * 곱하기 연산을 할 때 사용합니다. / 몫을 구할 때 사용합니다. % 나머지를 구할 때 사용합니다. ++ 1씩 증가시킬 때 사용합니다. -- 1씩 감소시킬 때 사용합니다. 대입 연산자 대입 연산자는 변수에 값을 대입할 때 사용하는 이항 연산자이며, 피연산자들의 결합 방향은 오른쪽에서 왼쪽입.. 2022. 7. 20.
기본 규칙 기본 규칙 자바스크립트를 다루기 위해서는 기초적인 특징과 기본 문법이 있습니다. 가장 기본이기 때문에 이 부분을 숙지하고 자바스크립트를 공부해야합니다. 자바스크립트란? JavaScript는 웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립트 프로그래밍 언어입니다. HTML은 정적인 레이아웃을 표현한다면, 자바스크립트는 동적인 기능을 표현합니다. 자바스크립트는 1995년 넷스케이프 커뮤니케이션의 브렌던 아이크가 개발하였스며 Netscape Navigsator2.0에 구현되었습니다. 1996년에는 마이크로소프트사의 Internet Explorer3.0 탑재되었으며 java 애플릿으로 구현된 웹 브라우저의 지지부진한 보급과 맞물려 빠르게 보급되었습니다. 1997년부터 ESMAScript를 따르는 표준.. 2022. 7. 20.
반응형

광고 준비중입니다.