본문 바로가기

JAVASCRIPT37

JAVASCRIPT | 이벤트 메서드 | mouseenter / mouseover 의 차이 ✍︎ mouseenter / mouseover 의 차이를 알아봅시다 ! 어떤 영역에 마우스가 올라감을 감지하는 두 메서드의 차이점을 예제를 통해 알아봅시다. addEventListener("mouseenter") addEventListener("mouseover") 해당 영역의 자식 영역 감지 X 해당 영역의 자식 영역 감지 O # 예제를 통해 확인해봅시다 ! See the Pen mouseover ex by kkb75281 (@kkb75281) on CodePen. mouseenter의 경우, 자식 영역까지 감지할 수 없기 때문에 부모 영역에서만 보라색으로 변하는 것을 볼 수 있습니다. mouseover의 경우, 자식 영역까지 감지하기 때문에 자식 요소가 노란색으로 변하는 것을 볼 수 있습니다. 2022. 9. 6.
jQuery | 스타일 메서드 📁 jQuery 스타일 메서드에 대해 알아봅시다 ! 📂 css() 메서드 실행 분류 형식 취득 $("div").css("width"); 생성, 변경 $("div").css("background-color", "red").css("padding", "10px"); $("div").css({background-color: "red", padding: "10px"}); 콜백 함수 $("div").css("width", function(index, .w) { // index는 각 div 요소의 index 0,1,2 // w는 각 div 요소 width 속성 return css 속성 // 각 div 요소의 속성을 변경 }); ... 내용 내용 내용 📢 직접 적용하면서 이해하자 ! 내용1 내용2 내용3 See th.. 2022. 9. 4.
jQuery | 속성 메서드 📁 jQuery 속성 메서드에 대해 알아봅시다 ! 📂 attr() 메서드 선택한 요소의 attribute(속성)를 선택, 생성, 변경할 수 있습니다. 실행 분류 형식 취득 $("a").attr("href"); 생성, 변경 $("a").attr("href", "http://www.google.com/").attr("target", "_blank"); $("a").attr({href: "http://www.google.com/", target: "_blank"}); 콜백 함수 $("a").attr("href", function(index, h) { // index는 각 a 요소의 index 0,1,2 // h는 각 a 요소 href 속성 return attribute (속성) // 각 a 요소의 속성을 생성.. 2022. 9. 4.
jQuery | 클래스 메서드 📁 jQuery 클래스 메서드에 대해 알아봅시다 ! 📂 addClass() 메서드 요소에 class 속성을 추가할때 사용합니다. 실행 분류 형식 추가 $("div").addClass("클래스명"); 콜백 함수 $("div").addClass(function(index, className) { // index 는 각 div 요소의 index 0,1,2 // className 은 각 div의 class 속성 return class 속성 // 각 div에 class 속성을 추가함. }); ... 내용1 내용2 내용3 📢 직접 적용하면서 이해하자 ! 2022. 9. 4.
JAVASCRIPT | 요소 크기 메서드 🖇️ 위치 및 크기를 표현하는 속성 및 메서드 01. 요소 속성 : 크기 및 위치 : element.clientWidth : 요소의 가로값(margin/border 미포함) 02. 요소 속성 : 크기 및 위치 : element.clientHeight : 요소의 높이값(margin/border 미포함) 03. 요소 속성 : 크기 및 위치 : element.clientTop : 요소의 Y축값(부모 기준) 04. 요소 속성 : 크기 및 위치 : element.clientLeft : 요소의 X축값(부모 기준) 05. 요소 속성 : 크기 및 위치 : element.offsetWidth : 요소의 가로값(border/padding 포함) 06. 요소 속성 : 크기 및 위치 : element.offsetHeight .. 2022. 9. 1.
jQuery | 탐색 선택자 📁 jQuery 탐색 선택자에 대해 알아봅시다 ! 📂 기본 탐색 선택자 선택자 종류 설명 children( ) $("div").children( ) div 요소의 자식 요소 선택 parent( ) $("p").parent( ) p 요소의 부모 요소 선택 parents( ) $("p").parents("div") p 요소의 부모가 되는 모든 div 요소 선택 closest( ) $("p").closest("div") p 요소의 부모가 되는 첫 번째 div 요소 찾음 next( ) $("div.m").next( ) div.m 요소의 다음 요소 선택 nextAll( ) $("div.m").nextAll( ) div.m 요소의 다음 요소들을 모두 선택 nextUntil( ) $("div.m").nextUntil.. 2022. 8. 31.
jQuery | 필터 선택자 📁 jQuery 속성 선택자에 대해 알아봅시다 ! ':'이 붙은 선택자를 필터 선택자라고 합니다. 📂 기본 필터 선택자 선택자 종류 설명 :even $("tr:even") tr 요소 중 짝수 행만 선택 :odd $("tr:odd") tr 요소 중 홀수 행만 선택 :first $("td:first") 첫 번째 td 요소 선택 :last $("td:last") 마지막 td 요소 선택 :header $(":header") 헤딩(h1~h6) 요소 선택 :eq( ) $("li:eq(0)") index가 0인 li 요소 선택 (index는 0번이 첫 번째 요소) :gt( ) $("li:gt(0)") index가 0보다 큰 li 요소들 선택 :lt( ) $("li:lt(2)") index가 2보다 작은 li 요소들 .. 2022. 8. 31.
jQuery | 속성 선택자 jQuery 속성 선택자에 대해 알아봅시다 ! 선택자 종류 설명 요소[속성] $("span[class]") span 요소 중 class 속성을 가지고 있는 요소 선택 요소[속성='값'] $("span[class='abc']") span 요소 중 class가 'abc'인 요소 선택 요소[속성!='값'] $("span[class!='abc']") span 요소 중 class가 'abc'가 아닌 요소 선택 요소[속성~='값'] $("span[class~='abc']") span 요소 중 class가 'abc'를 포함하는 요소 선택 'abc'앞뒤로 연결된 문자가 없어야 선택 가능하기 때문에 'bg abc'는 선택되나 'bg_abc'는 선택되지 않음 요소[속성*='값'] $("span[class*='abc']").. 2022. 8. 30.
jQuery | 기본 선택자 jQuery 기본 선택자에 대해 알아봅시다 ! 기본 형식 : $("선택자") == $("#gnb") 선택자 종류 설명 태그 선택자 $("p") p 요소 선택 id 선택자 $("#gnb") #gnb 요소 선택 class 선택자 $(".logo") .logo인 요소 선택 자식 선택자 $("#gnb > ul > li") #gnb의 자식 요소의 자식 요소 li 선택 하위 선택자 $("#gnb ul") #gnb의 하위에 있는 모든 ul 요소 선택 인접 선택자 $("#visual + #content") #visual 다음에 오는 #content 요소 선택 형제 선택자 $("#visual ~ #footer") #visual의 형제 요소 #footer 선택 종속 선택자 $("div.util") div 요소 중 clas.. 2022. 8. 30.
JAVASCRIPT | jQuery 🤔 jQuery, 그게 뭔데? 제이쿼리는 자바스크립트 언어를 더 간편하게 사용할 수 있도록 단순화 시킨 자바스크립트 라이브러리입니다. 뛰어난 호환성 유지관리가 용이한 코드 작성 다양한 기능 제공(네트워크, 애니메이션 등) 플러그인 직접 구현, 확장 가능 🤓 jQuery, 사용해볼까? jQuery를 사용하기 위해서는 jQuert 라이브러리를 웹페이지에 연결해서 사용해야 합니다. 각 버전별 브라우저 호환 여부가 다르기 때문에 확인하시고 연결하시면 됩니다 '3' 📌 직접 다운로드 방식 1) jQuery 라이브러리 다운로드 공식 홈페이지 내 Download jQuery v3.6.1 을 다운로드 받아 사용합니다. 2) HTML 문서에서 jQuery 라이브러리 연결 html 문서를 jQuery 라이브러리와 같은 경.. 2022. 8. 29.
JAVASCRIPT | GSAP 🤔 GSAP, 그게 뭔데? GSAP_The GreenSock Animation Platform; CSS나 jQuery등을 사용해 애니메이션 효과를 구현하는데 있어 번거로움과 복잡함을 GSAP를 통해 훨씬 간편하게 설정이 가능합니다. 세세한 부분까지 설정이 가능하며 라이브러리 참고가 가능하여 여러 웹사이트에서 사용하고 있습니다. 🤓 GSAP, 사용해볼까? 위의 사진처럼 공식 사이트에서 설치하거나 CDN을 통해 사용할 수 있습니다. 📄 SLIDER 효과_좌로 움직이는 이미지를 통해 확인해보자 ! 2022. 8. 29.
JAVASCRIPT | 문자열 메서드 | charAt( ) charAt( )에 대해 알아보자 ! String.prototype.charAt( ); charAt( ) 메서드는 문자열에서 특정 인덱스에 위치하는 문자를 반환합니다. construction(구문) str.charAt("index") index(순서) 0과 문자열의 길이 - 1 사이의 정수값이 올 수 있습니다. 인덱스 값을 쓰지 않는다면 기본값으로 0이 설정되고 첫 문자를 반환합니다. 만약 인덱스가 문자열 길이보다 큰 경우 빈 문자열 " " 을 반홥합니다. # 예제를 통해 익혀봅시다. const str1 = "javascript reference"; const currentstr1 = str1.charAt(); const currentstr2 = str1.charAt("0"); const currents.. 2022. 8. 22.
JAVASCRIPT | 문자열 메서드 | match( ) match( )에 대해 알아보자 ! String.prototype.match( ); match( ) 메서드는 문자열이 정규식과 매치되는 부분을 검색합니다. construction(구문) str.match("searching"/regexp) searchString(찾을 문자열, 검색값) / regexp(정규식 표현) 문자열이 정규식과 일치한다면 일치하는 전체 문자열을 첫 번째 요소로 포함하는 "배열"을 반환합니다. 일치하는 것이 없으면 null이 반환됩니다. # 예제를 통해 익혀봅시다. const str1 = "javascript reference"; const currentstr1 = str1.match("javascript"); const currentstr2 = str1.match("reference.. 2022. 8. 22.
JAVASCRIPT | 문자열 메서드 | search( ) search( )에 대해 알아보자 ! String.prototype.search( ); search( ) 메서드는 문자열(정규식)을 검색하고 위치값(숫자)를 반환합니다. construction(구문) str.search("searching"/regexp) searchString(찾을 문자열, 검색값) / regexp(정규식 표현) 정규표현식과 주어진 스트링간에 첫번째로 매치되는 것의 인덱스를 반환합니다. 찾지 못하면 -1 를 반환합니다. # 예제를 통해 익혀봅시다. const str1 = "javascript reference"; const currentstr1 = str1.search("javascript"); const currentstr2 = str1.search("reference"); const.. 2022. 8. 22.
JAVASCRIPT | 함수(2) | 객체생성자, 프로토타입, 객체리터럴 함수(2) 저번 함수 게시글에 이어 이번에는 좀 더 활용하여 쓰이는 함수에 대해 알아보겠습니다. 지난번에 배운 내용에서 심화되는 부분이기 때문에 저번 게시글 한번씩만 다시 복습하고 오시면 PERFECT 👍 한번 더 짚고 가기 ! 함수란 실행문의 집합체이며, 재활용이 가능하다는 포인트 ✨ 13. 함수 유형 : 함수와 매개변수를 이용한 형태 함수는 여러 매개변수를 이용하여 표현이 가능합니다. 또한 재활용이 가능하기 때문에 또 쓰지 않고도 실행문만 추가하여 활용할 수 있습니다. function func(num, str1, str2){ document.write(num + ". " + str1 + "가 " + str2 + "되었습니다." + " "); } func("1", "함수", "실행"); // 위의 함수.. 2022. 8. 22.
JAVASCRIPT | 문자열 메서드 | includes( ) includes( )에 대해 알아보자 ! String.prototype.includes( ); 하나의 문자열이 다른 문자열에 포함되어 있는지 판별하고 불린값으로 반환시키는 메서드입니다. 있다면 true, 없다면 false로 반환시켜줍니다. construction(구문) "str".includes(searchString[, position]); searchString(찾을 문자열, 검색값) 현재 문자열에서 어떤 문자열을 찾을지 검색값을 정합니다. 대소문자를 구별합니다. position(찾기 시작할 위치, 위치값) 기본값; 0, 현재 문자열에서 어느 위치에서부터 찾을지를 정합니다. # 예제를 통해 익혀봅시다. const str1 = "javascript reference"; const currentStr1 .. 2022. 8. 17.
JAVASCRIPT | 문자열 메서드 | padStart( ) / padEnd( ) padStart() / padEnd()에 대해 알아보자 ! String.prototype.padStart( ); 주어진 길이에 맞게 앞의 문자열을 채우고, 새로운 문자열을 반환해주는 메서드입니다. String.prototype.padEnd( ); 주어진 길이에 맞게 뒤의 문자열을 채우고, 새로운 문자열을 반환해주는 메서드입니다. construction(구문) "str".padStart(targetLength [,padString]); targetLength(문자열 길이 지정) 문자열의 길이를 지정해줍니다. 현재 길이보다 작다면 있는 그대로 반환시켜줍니다. padString(채워넣을 다른 문자열) 채워 넣는 문자열이 지정해준 문자열의 길이를 넘어서면 좌측부터 순서대로 넣고 뒷부분은 자릅니다. # 예제를 통.. 2022. 8. 17.
JAVASCRIPT | 문자열 메서드 | repeat( ) repeat( )에 대해 알아보자 ! String.prototype.repeat( ); 문자열을 주어진 횟수만큼 반복하여 반환해주는 메서드입니다. construction(구문) "str".repeat(count); count(횟수) 문자열을 반복할 횟수를 입력하며, 0부터 양의 정수가 올 수 있습니다. (음의 정수:Error) # 예제를 통해 익혀봅시다. const str1 = "javascript"; const currentStr1 = str1.repeat(0); const currentStr2 = str1.repeat(1); const currentStr3 = str1.repeat(2); 결과보기 '' javascript javascriptjavascript 2022. 8. 17.
JAVASCRIPT | 문자열 메서드 | concat( ) concat( )에 대해 알아보자 ! String.prototype.concat( ); 둘 이상의 문자열을 결합하여 새로운 문자열로 반환하는 메서드입니다. construction(구문) "str".concat(string2, string3[, ..., stringN]); string2, ..., stringN(결합할 문자열) 결합할 문자열 중에는 배열도 올 수 있습니다. # 예제를 통해 익혀봅시다. const str1 = "javascript"; const currentStr1 = str1.concat("reference"); const currentStr2 = str1.concat(" ", "reference"); const currentStr3 = str1.concat(",", "reference").. 2022. 8. 17.
JAVASCRIPT | 문자열 메서드 | replace( ) / replaceAll( ) replace( ) / replaceAll( )에 대해 알아보자 ! String.prototype.replace( ); 어떤 패턴에 일치하는 일부 또는 전부를 새로운 문자열로 반환하는 메서드입니다. construction(구문) "str".replace(regexp | substr, newSubstr | function); regexp(정규식) | substr(문자열) 패턴이 오는 자리로 정규식이나 문자열이 올 수 있습니다. 모든 문자열에 대해 검색하고 바꾸기 위해 정규표현식의 g 플래그를 활용합니다. newSubstr(문자열) | function(함수) 대체되는 문자열이 오는 자리로 이를 만드는 함수가 올 수도 있습니다. # 예제를 통해 익혀봅시다. const str1 = "javascript refe.. 2022. 8. 17.
JAVASCRIPT | 문자열 메서드 | split( ) split( )에 대해 알아보자 ! String.prototype.split( ); String 객체를 지정한 구분자를 이용해 여러 개의 문자열로 나누는 메서드입니다. construction(구문) "문자열".split( ); "문자열".split(separator); "문자열".split(separator, limit); separator(구분자) 문자열을 끊어야 할 부분을 나타내는 문자열로, 해당 부분은 삭제되고 남은 문자열이 배열로 변환됩니다. 문자열이나 정규표현식을 적을 수 있습니다. 두 글자 이상일 경우 문자열 전체가 일치해야 끊어집니다. 빈 문자열일 경우 str 각각의 문자가 배열의 원소 하나씩으로 변환됩니다. 구분자가 제일 처음이나 끝에 나올 경우 반환되는 배열도 빈 문자열로 시작하거나 끝납.. 2022. 8. 17.
JAVASCRIPT | 문자열 메서드 | trim( ) / trimStart( ) / trimEnd( ) trim( ) / trimStart() / trimEnd()에 대해 알아보자 ! String.prototype.trim( ); 문자열 양 끝의 공백을 제거하는 메서드입니다. String.prototype.trimStart( ); 문자열 시작부분의 공백을 제거하는 메서드입니다. String.prototype.trimEnd( ); 문자열 끝부분의 공백을 제거하는 메서드입니다. * 공백; 모든 공백문자(space, tab, NBSP 등)와 모든 개행문자(LF, CR 등)를 의미 # 예제를 통해 익혀봅시다. str 문자열에 공백이 없어도 예외 없이 새 문자열이 반환됩니다. (본질적으로 str의 복사본) trimStart( ); 웹 호환성을 위해 trimLeft( ); 라는 별칭으로도 호출이 가능합니다. trim.. 2022. 8. 17.
JAVASCRIPT | 문자열 메서드 | toUpperCase( ) / toLowerCase( ) toUpperCase( ) / toLowerCase( )에 대해 알아보자 ! toUpperCase( ); 문자열을 대문자로 변환해 반환하는 메서드입니다. toLowerCase( ); 문자열을 소문자로 변환해 반환하는 메서드입니다. # 예제를 통해 익혀봅시다. 여러 문자열을 합치기 위해 + 연산자와 ' '(띄어쓰기) 등을 활용하였습니다. const str1 = "javascript"; const currentStr1 = str1.toUpperCase(); document.querySelector(".sample02_N1").innerHTML = "1"; document.querySelector(".sample02_Q1").innerHTML = "javascript"; document.querySelecto.. 2022. 8. 17.
JAVASCRIPT | 문자열 문자열(String)에 대해 알아보자 ! 문자열 결합과 내장된 표현식을 허용하는 문자열 리터럴, 템플릿 문자열에 대해 알아봅시다. 01. 문자열(String) 결합 / 숫자(Numner) 결합 여러 문자열을 합치기 위해 + 연산자와 ' '(띄어쓰기) 등을 활용하였습니다. //01. const str1 = "자바스크립트"; const str2 = "제이쿼리"; document.querySelector(".sample01_N1").innerHTML = "1"; document.querySelector(".sample01_Q1").innerHTML = "자바스크립트, 제이쿼리"; document.querySelector(".sample01_M1").innerHTML = "문자열(string) 결합"; docu.. 2022. 8. 17.
JAVASCRIPT | 문자열 메서드 | indexOf( ) / lastIndexOf( ) 문자열 메서드(검색)에 대해 알아보자 ! 다양한 문자열 메서드 중 문자열에서 특정 문자의 위치를 찾고 숫자를 반환하는 indexOf() / lastIndexOf()에 대해 알아봅시다. 01. indexOf( ); "문자열".indexOf(검색값) "문자열".indexOf(검색값, 위치값) const str1 = "javascript reference" const currentstr1 = str1.indexOf("javascript"); //0(j가 0번째) const currentstr2 = str1.indexOf("reference"); //11(r이 11번째) const currentstr3 = str1.indexOf("j"); //0 const currentstr4 = str1.indexOf("a".. 2022. 8. 16.
JAVASCRIPT | 문자열 메서드 | 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(.. 2022. 8. 16.
JAVASCRIPT | 정규식 표현 정규식 표현에 대해 알아보자 ! 정규 표현식(regular expression; regex)이란 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어입니다. 현재 많은 프로그래밍 언어, 텍스트 처리 프로그램, 고급 텍스트 편집기 등이 정규 표현식 기능을 제공하고 있습니다. 한눈에 확인해보는 정규표현식 객체 주요 패턴 패턴 설명 abc abc 문자열을 검색 /abc/는 'abc' [abc] a, b, c 중 문자 하나를 검색 /[abc]/는 'ad', 'bd', 'cd' [^abc] a, b, c를 제외한 문자 하나를 검색 /[^abc]d/는 'ed', 'fd', 'gd' [A-Z] 알파벳 대문자 문자를 검색 [a-z] 알파벳 소문자 문자를 검색 [0-9] 0-9까지의 숫자를 검색 . 하나의.. 2022. 8. 16.
JAVASCRIPT | 내장 함수 내장 함수에 대해 알아보자 ! 내장 함수는 자바스크립트에 기본적으로 내장되어 있는 함수들을 말합니다. 그렇기 때문에 사용자가 별도로 정의하지 않고 호출만해서 사용하는 함수입니다. 01. 인코딩, 디코딩 함수 'http://icoxpublish.com/search?query=자바스크립트'와 같이 URL 주소에 쿼리 정보를 전송하여 데이터를 처리해야 되는 프로그램의 경우 한글과 같은 유니코드 문자가 포함되어 있으면 오류가 발생할 수 있습니다. 이 경우 인코딩 함수를 이용해 문자를 부호화시키고 이 문자를 다시 디코딩함수를 이용하여 원래 문자로 되돌릴 수 있습니다. 함수명 설명 encodeURIComponent( ) 영문, 숫자와 ( ) - _ . ~ * ! '을 제외한 문자를 인코딩 decodeURICompo.. 2022. 8. 15.
JAVASCRIPT | 배열 객체 배열에 대해 알아보자 ! 배열 속성, 메서드에 대해 알아봅시다 ! 앞으로 내용이 더 추가 될 예정입니다 :D 01. 배열 속성 : length : 배열 길이 구하기 : 반환(숫자) 02. 배열 메서드 : join() : 배열 요소 문자열을 결합 : 반환(문자열) 03. 배열 메서드 : push() : 배열 마지막 요소에 추가 : 반환(숫자) 04. 배열 메서드 : pop() : 배열 마지막 요소를 삭제 : 반환(삭제된 요소) 01. 배열 속성 : length : 배열 길이 구하기 : 반환(숫자) length 속성은 배열의 길이를 구할 수 있습니다. 번호 기본값 메서드 리턴값 1 [100, 200, 300, 400, 500] length 5 2 ['a', 'b', 'c', 'd', 'f'] 5 3 [1, .. 2022. 8. 11.
JAVASCRIPT | 요소 객체 요소 객체 요소를 제어하기 위해서는 요소 선택을 먼저 해야 합니다. 오늘은 요소를 직접 선택하는 메서드에 대해 알아봅시다. 요소를 직접 선택하는 메서드 메서드 설명 getElementByld( ) document.getElementByld('content')일 경우 HTML 요소 중 id 속성이 'content'인 요소를 선택합니다. getElementsByClassName( ) document.getElementsByClassName('menu')일 경우 HTML 요소 중 class명이 'menu'인 요소들을 선택합니다. getElementsByTagName( ) document.getElementsByTagName('ul')일 경우 HTML 요소 중 태그명이 'ul'인 요소들을 선택합니다. quert.. 2022. 8. 6.

It's cording time

코딩 여기서 정리하고 배워보자구 :9

광고 준비중입니다.