본문 바로가기

Javascript28

자바스크립트 : 마우스 이벤트 메서드 : mouseover VS mouseenter 자바스크립트 : 마우스 이벤트 메서드 : mouseover VS mouseenter 오늘은 자바스크립트의 마우스 이벤트 메서드 중 mouseover와 mouseenter의 차이에 대하여 알아보도록 하겠습니다. mouseover VS mouseenter mouseover와 mouseenter는 요소 위에 마우스 포인터를 위치했을 때 이벤트를 발생시키는 메서드입니다. 이 두 메서드의 차이는 무엇일까요? window.addEventListener("mouseover",() => {}) window.addEventListener("mouseenter",() => {}) 이벤트 버블링 두 메서드의 차이는 이벤트 버블링에 있습니다. 이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 .. 2022. 9. 5.

자바스크립트 : 요소 크기 메서드 요소 크기 메서드 자바스크립트에는 요소의 크기 및 위치를 다양한 방법으로 표현하는 속성과 메서드가 있습니다. 크기 및 위치를 표현하는 속성과 메서드 속성 및 메서드 설명 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축 값(문서 기준) elemen.. 2022. 9. 1.

자바스크립트 : GSAP란? 자바스크립트 : GSAP란? GSAP는 GreenSock에서 만든 자바스크립트 애니메이션 라이브러리입니다. 일반적으로 애니메이션 효과는 CSS나 JQUERY로 구현하는 것이 일반적이지만, 그 이상의 복잡한 애니메이션을 보다 간단하게 구현하기 위해 탄생한 것이 바로 GSAP입니다. 오늘은 GSAP의 사용법을 간단하게 알아보도록 하겠습니다. 1. CDN에서 라이브러리 가져오기 CDN이란 Contents Delivery Network의 약자로, 데이터를 분산된 서버에서 받아오는 것을 말합니다. GSAP이나 jQuery의 라이브러리를 호스팅된 서버에 직접 설치해서 사용할 수도 있지만, CDN을 사용하면 클라이언트가 직접 자신의 위치로 라이브러리를 전송받게 됩니다. 위와 같이, 라이브러리를 사용하려면 js파일의 .. 2022. 8. 29.

자바스크립트 : 함수의 유형 함수의 유형 자바스크립트에서 함수의 유형은 여러 가지가 있습니다. 오늘은 다양한 함수의 유형에 대하여 알아보겠습니다. 1. 함수와 매개변수를 이용한 형태 자바스크립트에서 함수의 특징은 실행문의 집합체라는 점과, 재활용이 가능하다는 점입니다. 함수와 매개변수를 이용하면, 다음과 같이 함수를 재활용할 수 있습니다. function func(num, str1, str2){ document.write(num + ". " + str1 + "가 " +str2 + "되었습니다.") } func("1", "함수", "실행"); // 매개변수를 str1, str2로 전달 func("2", "자바스크립트", "실행"); func("3", "제이쿼리", "실행"); 결과보기 1. 함수가 실행되었습니다. 2. 자바스크립트가 .. 2022. 8. 22.

자바스크립트 : 문자열 검색 메서드 : charAt() 문자열 검색 메서드 : charAt() charAt() 메서드는 문자열에서 특정 인덱스에 위치하는 값을 반환합니다. charAt() 메서드 "문자열".charAt(숫자) const str1 = "javascript reference"; const currentStr1 = str1.charAt(); const currentStr2 = str1.charAt("0"); const currentStr3 = str1.charAt("1"); const currentStr4 = str1.charAt("2"); 결과보기 j j a v 2022. 8. 22.

자바스크립트 : 문자열 검색 메서드 : match() 문자열 검색 메서드 : match() match() 메서드는 문자열(정규식 포함)을 검색하고, 배열로 반환합니다. match() 메서드 1. "문자열".match("검색값") const str1 = "javascript reference"; const currentStr1 = str1.match("javascript"); const currentStr2 = str1.match("reference"); const currentStr3 = str1.match("r"); 결과보기 javascript reference r 2. "문자열".match(정규식 표현) const str1 = "javascript reference"; const currentStr1 = str1.match(/reference/); co.. 2022. 8. 22.

자바스크립트 : 문자열 검색 메서드 : search() 문자열 검색 메서드 : search() search() 메서드는 문자열(정규식 포함)을 검색하고, 위치값(숫자)을 반환합니다. indexOf() 메서드와 같지만, search() 메서드는 정규식을 사용할 수 있다는 점에서 차이가 있습니다. search() 메서드 1. "문자열".search("검색값") const str1 = "javascript reference"; const currentStr1 = str1.search("javascript"); const currentStr2 = str1.search("reference"); const currentStr3 = str1.search("j"); const currentStr4 = str1.search("a"); const currentStr5 = st.. 2022. 8. 22.

자바스크립트 : 문자열 검색 메서드 : includes() 문자열 검색 메서드 : includes() includes() 메서드는 문자의 포함 여부를 검색하여, 불린(true, false)을 반환합니다. 즉, 배열이 특정 요소를 포함하고 있는지 판별합니다. includes() 메서드 참고! includes() 메서드는 대/소문자를 구분합니다. 1. "문자열".includes("검색값") const str1 = "javascript reference"; const currentStr1 = str1.includes("javascript"); const currentStr2 = str1.includes("j"); const currentStr3 = str1.includes("b"); 결과보기 true true false 2. "문자열".includes("검색값", 위.. 2022. 8. 17.

자바스크립트 : 문자열 변경 메서드 : padStart() / padEnd() 문자열 변경 메서드 : padStart() / padEnd() padStart() / padEnd() 메서드는 주어진 길이에 맞게 앞 / 뒤 문자열을 채우고, 새로운 문자열을 반환합니다. padStart() 메서드 padStart() 메서드는 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환합니다. 채워넣기는 대상 문자열의 시작(좌측)부터 적용됩니다. const str1 = "456"; const currentStr1 = str1.padStart(1, "0"); // 현재 문자열의 길이보다 작다면, 채워넣지 않고 그대로 반환합니다. const currentStr2 = str1.padStart(2, "0"); const currentStr3 = str1.padStart.. 2022. 8. 17.

자바스크립트 : 문자열 변경 메서드 : split() 문자열 변경 메서드 : split() split() 메서드는 문자열에서 원하는 값을 추출하여 배열로 반환합니다. split() 메서드 split() 메서드는 문자열에서 구분자가 등장하면, 해당 부분을 삭제하고 남은 문자열을 배열로 반환합니다. 구분자가 등장하지 않거나 생략되었을 경우, 배열은 원본 문자열을 유일한 원소로 가집니다. 1. "문자열".split(구분자) const str1= "javascript reference" const currentStr1 = str1.split(''); const currentStr2 = str1.split(' '); const currentStr3 = str1.split('j'); const currentStr4 = str1.split('a'); const curr.. 2022. 8. 17.

자바스크립트 : 문자열 변경 메서드 : repeat() 문자열 변경 메서드 : repeat() repeat() 메서드는 문자열을 복사하여, 복사한 새로운 문자열을 반환합니다. 즉, 이름 그대로, 선택한 문자열을 반복합니다. repeat() 메서드 다음과 같이, count 안에 문자열을 반복할 횟수(0과 양의 무한대 사이의 정수)를 작성합니다. str.repeat(count); const str1 = "javascript"; const currentStr1 = str1.repeat(0); const currentStr2 = str1.repeat(1); const currentStr3 = str1.repeat(2); 결과보기 javascript javascriptjavascript 2022. 8. 17.

자바스크립트 : 문자열 변경 메서드 : concat() 문자열 변경 메서드 : concat() concat() 메서드는 둘 이상의 문자열을 결합하여, 새로운 문자열을 반환합니다. concat() 메서드 concat() 메서드는 메서드를 호출한 배열 뒤에 각 인수를 순서대로 붙여 새로운 배열을 만듭니다. 인수가 배열이면 그 구성요소가 순서대로 붙고, 배열이 아니면 인수 자체가 붙습니다. 중첩 배열 내부로 재귀하지 않습니다. const str1 = "javascript"; const currentStr1 = str1.concat("reference"); const currentStr2 = str1.concat(" ", "reference"); const currentStr3 = str1.concat(", ", "reference"); const currentSt.. 2022. 8. 17.

자바스크립트 : 문자열 변경 메서드 : replace(), replaceAll() 문자열 변경 메서드 : replace() / replaceAll() replace() / replaceAll() 메서드는 선택한 문자열을 변경하고, 변경된 문자열로 반환합니다. replace() / replaceAll() 메서드 replace() / replaceAll() 메서드는 어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환합니다. 그 패턴은 문자열이나 정규식(RegExp)이 될 수 있으며, 교체 문자열은 문자열이나 모든 매치에 대해서 호출된 함수일 수 있습니다. 1. "문자열".replace("찾을 문자열", "변경할 문자열") const str1 = "javascript reference" const currentStr1 = str1.replace("javascript",.. 2022. 8. 17.

자바스크립트 : 문자열 결합 : 템플릿 문자열 문자열 결합 : 템플릿 문자열 템플릿 문자열은 어떠한 경우에, 어떻게 사용할 수 있을까요? 다음 예제를 통해 템플릿 문자열에 대하여 알아보도록 하겠습니다. 문자열 결합 일반적으로 문자열을 결합할 때는 "+" 연산자를 사용합니다. 그 사용 방법은 다음과 같습니다. const str1 = "자바스크립트"; const str2 = 100; document.write(str1 + str2 + "제이쿼리" + 100); document.write(str2 + str1 + "제이쿼리" + 100); 결과보기 자바스크립트100제이쿼리100 100자바스크립트제이쿼리100 위 예제에 나타난 것처럼, "+" 연산자를 사용하면 변수와 문자열, 숫자를 쉽게 결합할 수 있습니다. 템플릿 문자열 템플릿 문자열(Template l.. 2022. 8. 17.

자바스크립트 : 문자열 변경 메서드 : trim() / toUpperCase() / toLowerCase() 문자열 변경 메서드 : trim() / toUpperCase() / toLowerCase() trim() 메서드는 문자열의 공백을 제거해 주고, toUpperCase() / toLowerCase() 메서드는 문자열을 대 / 소문자로 변환해 줍니다. 하나씩 살펴보도록 하겠습니다. trim() 메서드 trim() 메서드는 문자열 양 끝의 공백을 제거합니다. 공백이란 모든 공백문자(space, tab, NBSP 등)와 모든 개행문자(LF, CR 등)를 의미합니다. trimStart() 메서드를 사용하면 앞 공백, trimEnd() 메서드를 사용하면 뒤 공백만을 제거해줄 수 있습니다. 문자열 중간의 공백은 제거할 수 없습니다. const str1 = " javascript " const currentStr1 =.. 2022. 8. 17.

자바스크립트 : 문자열 검색 메서드 : indexOf() / lastIndexOf() 문자열 검색 메서드 : indexOf() / lastIndexOf() indexOf(), lastIndexOf() 메서드는 문자열에서 특정 문자의 위치를 찾고, 그 위치값을 숫자로 반환합니다. indexOf() 메서드 indexOf() 메서드는 호출한 String 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환합니다. 일치하는 값이 없으면 -1을 반환합니다. 1. indexOf() : "문자열".indexOf(검색값) const str1 = "javascript reference"; const currentStr1 = str1.indexOf("javascript"); const currentStr2 = str1.indexOf("reference"); const currentStr3 = str1.in.. 2022. 8. 17.

자바스크립트 : 문자열 변경 메서드 : slice() / substring() / substr() 문자열 변경 메서드 : slice() / substring() / substr() slice(), substring(), substr() 메서드는 문자열에서 원하는 값을 추출하여 문자열로 반환합니다. 세 가지 메서드는 모두 비슷하면서도, 작동 방법은 조금씩 다릅니다. slice() 메서드 slice() 메서드는 어떤 배열의 begin부터 end까지(end 미포함)에 대한 복사본을 반환합니다. 두 가지 방법으로 작동시킬 수 있습니다. 1. slice : "문자열".slice(시작 위치) const str1 = "javascript reference"; const currentStr1 = str1.slice(0); const currentStr2 = str1.slice(1); const currentStr3.. 2022. 8. 17.

자바스크립트 : 정규식 표현 정규식 표현(정규표현식 객체) 정규표현식 객체는 정해진 문자의 패턴을 만들 때 사용합니다. 프로그래밍을 처음 접하는 사람에게는 정규표현식은 이해하기 어려운 객체 중 하나입니다. 정규표현식 객체의 주요 패턴 패턴 설명 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] 알파벳 소문자 문자를 검색합니다. [0-9] 0-9까지의 숫자를 검색합니다. . 하나의 문자를 검색합니다. 만약 '마침표' 문자 그대로의 의미를 사용할 경우, '₩.'으.. 2022. 8. 17.

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

자바스크립트 : 배열 메서드 : join(), push(), pop() 배열 메서드 : join(), push(), pop() 배열은 리스트와 비슷한 객체로서 순회와 변형 작업을 수행하는 메서드를 갖습니다. 배열은 길이, 요소의 자료형이 고정되어있지 않기 때문에, 길이가 언제든지 늘어나거나 줄어들 수 있고, 데이터를 연속적이지 않은 곳에 저장할 수 있습니다. 이러한 배열을 편리하게 다루기 위해 사용되는 메서드에 대하여 알아보겠습니다. join() 메서드 join()은 배열 요소들을 문자열로 결합해 주어, 문자열로 반환하는 메서드입니다. const arrNum = [100, 200, 300, 400, 500]; const text1 = arrNum.join('') const text2 = arrNum.join(' ') const text3 = arrNum.join('★') c.. 2022. 8. 11.

자바스크립트 : 요소 선택 요소 선택 자바스크립트의 각 요소를 제어하기 위해서는 해당 요소를 선택해야 합니다. 요소 선택 메서드에 대하여 알아보겠습니다. 요소 직접 선택 메서드 메서드 설명 getElementById() document.getElementById('content')일 경우, HTML 요소 중 id 속성이 'content'인 요소를 선택합니다. getElementsByClassName() document.getElementsByClassName('menu')일 경우, HTML 요소 중 class명이 'menu'인 요소들을 선택합니다. getElementsByTagName() document.getElementsByTagName('ul')일 경우, HTML 요소 중 태그명이 'ul'인 요소들을 선택합니다. getEle.. 2022. 8. 6.

자바스크립트 : 전역 변수와 지역 변수 전역 변수와 지역 변수 변수는 함수 블록{}을 기준으로 변수의 선언 위치에 따라 전역 변수와 지역 변수로 나누어집니다. 전역 변수는 함수 블록{} 밖이나 안에서 자유롭게 사용 가능하지만, 지역 변수는 함수 블록{} 내에서만 사용할 수 있습니다. 전역 변수와 지역 변수 선언 위치 var kor = 90; function getScore() { kor = 100; //전역 변수 document.write(kor); //100 } getScore(); document.write(kor); //100 위의 예시에서 함수 블록{} 안에 있는 kor 변수는 전역 변수입니다. 따라서 getScor() 함수를 호출하게 되면 kor 변수의 값이 90에서 100으로 바뀌게 됩니다. var kor = 90; function.. 2022. 7. 28.

자바스크립트 : 함수 함수 함수는 프로그램에서 반복적으로 사용되는 기능을 만들어내기 위한 코드들의 집합입니다. 선언적 함수 선언적 함수는 가장 일반적인 형태로, 함수명이 있는 함수입니다. function func(){ document.write("함수가 실행되었습니다.1") } func(); 결과보기 함수가 실행되었습니다.1 익명 함수 익명 함수는 말 그대로 함수의 이름이 없으며, 변수의 이름을 쓴 함수입니다. 함수를 재사용하지 않을 경우, 익명함수를 만들어서 사용합니다. const func = function(){ document.write("함수가 실행되었습니다.2"); } func(); 결과보기 함수가 실행되었습니다.2 매개변수 함수 함수의 매개변수란 함수를 호출할 때 인수로 전달된 값을 함수 내부에서 사용할 수 있게 .. 2022. 7. 26.

자바스크립트 : 데이터 타입 데이터 타입(Date Type) 데이터 타입(Data Type)은 변수에 저장되는 데이터의 유형으로 Primitive(원시) 데이터 타입과 Object(객체) 데이터 타입으로 나눌 수 있습니다. 이곳에서는 Primitive(원시) 데이터 타입에 대해서 살펴보겠습니다. number(숫자) 데이터 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 string(문자) 데이터 string 데이터는 '' 또는 ""으로 표현할 수 있습니다. var str1 = '문자'; var s.. 2022. 7. 25.

자바스크립트 : 조건문 조건문 조건문은 주어진 조건식의 결과에 따라 별도의 명령을 수행하도록 제어하는 명령문입니다. 가장 기본이 되는 명령문은 if문이며, 그 외에도 switch문 등이 있습니다. if문 if문은 조건식의 결과가 true이면 주어진 명령문을 실행합니다. false이면 명령문을 실행하지 않습니다. 기본적인 형식은 다음과 같습니다. if (조건식) { 실행문; } if문은 if문 안에 또 다른 if문을 중첩하여 사용할 수 있습니다. 예제와 함께 살펴보도록 하겠습니다. 시험과목: HTML, CSS, JAVASCRIPT 합격기준: 100점 만점 기준, 과목당 40점 이상, 전과목 평균 60점 이상이면 합격 var html = Number(prompt('html 점수입력', '')); var css = Number(pr.. 2022. 7. 25.

자바스크립트 : 반복문 반복문 반복문은 프로그램에서 필요한 결과 값을 도출하기 위해 실행문의 순서를 반복적으로 실행시키는 문법을 말합니다. 반복문에는 while문, do while문, for문이 있으며, for문을 가장 많이 사용합니다. while문 while문은 조건식의 값이 true일 경우, 계속해서 반복합니다. while문의 기본적인 형식은 다음과 같습니다. 초기 값 while (조건식) { 실행문; 증가감식; } do while문 do while문은 while문과 동작 방식이 동일하지만, do while문은 do를 먼저 실행하기 때문에 첫 번째 실행은 조건에 상관없이 실행한다는 차이가 있습니다. do wile문의 기본적인 형식은 다음과 같습니다. 초기 값 do { 실행문; 증가감식; } while (조건식) for문 f.. 2022. 7. 21.

자바스크립트 : 연산자 자바스크립트 연산자 프로그램에 필요한 수식을 만들 때 필요한 것이 연산자입니다. 자바스크립트에서 연산자에는 산술연산자, 대입연산자, 비교연산자, 논리연산자 등이 있습니다. 산술 연산자 산술 연산자는 사칙연산을 다루는 기본적이면서도 가장 많이 사용되는 연산자입니다. 산술 연산자 종류 속성 설명 + 더하기 연산을 할 때 사용합니다. 문자와 문자, 문자와 변수 등을 연결할 때 사용합니다. - 빼기 연산을 할 때 사용합니다. * 곱하기 연산을 할 때 사용합니다. / 몫을 구할 때 사용합니다. % 나머지를 구할 때 사용합니다. ++ 1씩 증가시킬 때 사용합니다. -- 1씩 감소시킬 때 사용합니다. 대입 연산자 대입 연산자는 변수에 값을 대입할 때 사용하는 이항 연산자입니다. 대입 연산자 종류 설명 = num = .. 2022. 7. 20.

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

이전 1 다음

728x90

감사합니다. 🦙

JAVASCRIPT

HTML

CSS

광고 준비중

티스토리툴바