본문 바로가기

Javascript40

mouseover vs mouseenter mouseOver vs mouseEnter mouseOver/mouseOut과 mouseEnter/mouseLeave는 마우스 커서가 요소에 진입/이탈할 시 발동하는 메서드입니다. ○ 마우스 오버와 마우스 엔터의 차이 mouseOver와 mouseEnter의 차이는 이벤트 버블링의 발생 여부에 있습니다. mouseOver/mouseOut는 이벤트 버블링이 발생하며, mouseEnter/mouseLeave는 발생하지 않습니다. ※ 이벤트 버블링이란? 이벤트 버블링은 자식 요소의 이벤트 핸들러를 발동시 최상위까지 모든 부모 요소의 이벤트 핸들러가 같이 발동되는 것을 말합니다. 위의 이미지를 예로 들어면 3번의 자식 요소 이벤트 핸들러가 발동시 부모 요소인 2번의 이벤트 핸들러가 발동되고 그 다음 2번의 부모.. 2022. 9. 6.
제이쿼리 - 속성 관련 메서드 Jquery 선택한 요소의 attribute(속성)를 선택, 생성, 변경하는 메서드입니다. ▶ attr( ) 메서드 실행 분류 형식 취득 $("a").attr("href"); 생성, 변경 $("a").attr("href", "http://icoxpublish.com").attr("target", "_blank"); $("a").attr({"href": "http://icoxpublish.com", target:"_blank"}); 콜백 함수 $("a").attr("href", function(index, h){ //index는 각 a 요소의 index 0, 1, 2 //h는 각 a 요소 href 속성 return attribute(속성) // 각 a 요소의 속성을 생성 및 변경합니다. }); ... 다음.. 2022. 9. 5.
제이쿼리 - 클래스 관련 메서드 Jquery 클래스를 추가/제거하는 메서드 입니다. ▶ addClass( ) 메서드 실행 분류 형식 추가 $("div").addClass("클래스명"); 콜백 함수 $("div").addClass(function(index, className)){ //index는 각 div 요소의 index 0, 1, 2 //className은 각 div의 class 속성 return class 속성 // 각 div에 class 속성을 추가합니다. }); ... 내용1 내용2 내용3 See the Pen Untitled by mbynae (@mbynae) on CodePen. ▶ removeClass( ) 메서드 실행 분류 형식 제거 $("div").removeClass("클래스명"); 형식 $("div").remove.. 2022. 9. 5.
요소 크기 메서드 요소 크기 메서드 요소의 크기 속성값을 나타내고 설정할 수 있는 메서드입니다. 요소의 크기를 구하는 속성 : client*/offset* 속성값을 설정할 수 있는 메서드 : getBoundingClientRect() 속성의 차이는 마진과 보더, 패딩값을 포함/미포함, 축의 기준이 부모요소/문서요소인지의 차이가 있습니다. See the Pen 위치 및 크기 요소 by mbynae (@mbynae) on CodePen. 2022. 9. 1.
JQUERY2 Jquery jQuery는 HTML의 DOM 조작과 이벤트 제어, 애니메이션 그리고 Ajax까지 웹 화면을 다루는 자바스크립트 라이브러리입니다. 1. 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).. 2022. 9. 1.
GSAP GSAP GrennSock에서 개발한 애니메이션 효과를 쉽게 사용할 수 있도록 제공하는 타임라인 기반의 애니메이션 자바스크립트 라이브러리입니다. 일반적으로 애니메이션은 CSS를 사용해 만들지만 GSAP를 사용하면 더욱 간편하며 복잡한 애니메이션을 구현할 수 있습니다. 또한 Jquery가 저물어가는 요즘 GSAP는 떠오르는 자바스크립트 라이브러리이기도 합니다. ▶ 설치 방법 GreenSock 사이트에서 다운 받아 적용할 수 있습니다. 또는 홈페이지에서 제공하는 cdn 링크를 스크립트에 적용하면 사용이 가능합니다. ▶ 사용 예시 스크립트로 cdn 링크를 건 후 GSAP의 프로퍼티를 선언하여 사용한 예 입니다. 이런 식으로 선언 후 적용할 클래스를 지정해 적용할 수 있습니다. 사용 가능한 GSAP의 프로퍼티 .. 2022. 8. 29.
JQUERY Jquery jQuery는 HTML의 DOM 조작과 이벤트 제어, 애니메이션 그리고 Ajax까지 웹 화면을 다루는 자바스크립트 라이브러리입니다. 지금은 Angular, React, Vue 같은 화면을 다루는 여러 가지 기술들이 있어 화면 개발을 보다 쉽게 할 수 있지만, 화면과 관련된 기술이 발전하기 전에는 화면 개발을 쉽게 해 주는 라이브러리는 거의 존재하지 않았습니다. 하지만 jQuery가 등장하면서 전세계 많은 개발자들이 사용한 라이브러리가 되었습니다. 다만, 요즘엔 점점 사용하지 않는 추세가 되고 있습니다. ▶ 설치 방법 JQuery 사이트에서 다운 받아 적용할 수 있습니다. 또는 홈페이지에서 제공하는 cdn 링크를 스크립트에 적용하면 사용이 가능합니다. JQuery는 상당히 유명한 라이브러리이기.. 2022. 8. 29.
charAt( ) 문자열 메소드 - charAt( ) 선택한 숫자의 위치값에 있는 문자를 반환하는 메서드입니다. 매소드 설명 문법 charAt( ) 선택한 숫자의 위치값에 있는 문자를 추출해 반환합니다. "문자열".charAt(숫자); charAt( ) 메소드는 문자열에서 지정된 위치에 존재하는 문자를 찾아서 반환하는 함수입니다. 메소드에 숫자를 적으면 숫자에 해당하는 문자를 찾습니다. 또한 정규표현식을 사용해 검색이 가늘합니다. { const str1 = "javascript reference"; const currentStr1 = str1.match("javascript"); //javascript const currentStr2 = str1.match("reference"); //reference const curr.. 2022. 8. 22.
match( ) 문자열 메소드 - match( ) 문자열을 검색하고 배열값을 반환하는 메서드입니다. 매소드 설명 문법 match( ) 문자열(정규식)을 검색하고 배열값을 반환합니다. "문자열".match("검색값") "문자열".match("정규식 표현") match( ) 메소드는 문자열에서 찾고 싶은 문자가 포함되어 있는지 확인할 수 있습니다. 또한 단어 뿐만 아니라 정규표현식을 사용해서 검색이 가능합니다. { const str1 = "javascript reference"; const currentStr1 = str1.match("javascript"); //javascript const currentStr2 = str1.match("reference"); //reference const currentStr3 = st.. 2022. 8. 22.
search( ) 문자열 메소드 - search( ) 문자열을 검색하고 위치값을 반환하는 메서드입니다. 매소드 설명 문법 search( ) 문자열(정규식)을 검색하고 위치값(숫자)을 반환합니다. "문자열".search("검색값") "문자열".search("정규식 표현") search( ) 메소드는 문자열에서 조건 문자열을 찾아서 몇번째 위치에 있는지 확인해주는 함수입니다. 첫번째로 매칭되는 문자의 위치를 반환하며, 못찾을 시 -1을 반환합니다. { const str1 = "javascript reference"; const currentStr1 = str1.search("javascript"); //0 const currentStr2 = str1.search("reference"); //11 (11번째 자리기 때문) co.. 2022. 8. 22.
함수 유형 함수 유형 이전 함수의 심화편입니다. 01. 함수 유형 : 함수와 매개변수를 이용한 형태 함수와 매개변수를 이용해 실행하는 함수 형태입니다. { function func(num, str1, str2){ document.write(num + ". " + str1 + "가 " + str2 + "되었습니다."); } func("1", "함수", "실행"); func("2", "자바스크립트", "실행"); func("3", "제이쿼리", "실행"); } 결과 확인하기 02. 함수 유형 : 함수와 변수를 이용한 형태 함수 외부에 변수를 사용해서 실행하는 함수 형태입니다. { function func(num, str1, str2){ document.write(num + ". " + str1 + "가 " + str2.. 2022. 8. 22.
includes( ) 문자열 메소드 - includes( ) 문자열 포함 여부를 검색하여, 불린(true/false)으로 반환합니다. ▶ includes( ) "문자열".includes("문자열") "문자열".includes("문자열", 위치값) includes( ) 메소드는 문자열 데이터에 해당 문자가 포함되어 있으면 true를 반환하고, 포함되어 있지 않으면 false를 반환합니다. 위치값은 문자열의 첫 부분이 0으로 시작하며 우측으로 갈수록 1씩 증가합니다. 위치값을 적을 시 위치값에 해당하는 위치부터 우측으로 문자 포함 여부를 판단합니다. { const str1 = "javascript reference" const currentStr1 = str1.includes("javascript"); //true (문자열 포함.. 2022. 8. 18.

광고 준비중입니다.