728x90
Ninny Design Skill/Javascript
-
Skill/JavascriptJS/jQuery - 특정 문자 제거&변경(모두, 일부, 대소문자) : replace()replace()문자열에서 특정 부분 문자열을 다른 문자열로 대체하는 함수. 원본 문자열을 변경하는 것이 아니라 새로운 문자열을 반환한다. 바꾸고자 하는 문자열(substr)과 대체할 문자열(newSubstr)을 지정할 수 있다. 대체할 문자열을 빈칸으로 지정하면 특정 문자는 제거된다. 만약, 특정 문자를 모두 대체하려면 정규식을 이용한다.let newStr = str.replace(substr, newSubstr) 예시특정 문자 제거하기/변경하기let str = "Hello, world! Hello, everyone!"//제거하기let newStr = str.replace("Hello", "");//변경하기let newStr = str.replace("Hello", "Hi");// , world! H..reviews calendar_month 2024.06.23
-
Skill/JavascriptJS/jQuery - 마우스오버 메소드 : mouseover(), mouseout()와 mouseenter(), mouseleave()마우스오버란?마우스를 특정 요소 위에 올려놓았을 때 발생하는 이벤트. 이는 웹사이트나 소프트웨어의 인터페이스에서 자주 사용되며, 마우스를 올렸을 때 시각적 피드백을 제공하거나 추가 정보를 표시하는 데 사용된다. 예를 들어, 웹사이트에서 마우스를 버튼 위에 올리면 버튼의 색상이 바뀌거나 툴팁(Tooltip)이 나타나는 경우, 이러한 기능은 사용자가 어떤 요소와 상호작용할 수 있는지 직관적으로 알 수 있다. 마우스오버는 HTML, CSS, JavaScript를 사용하여 구현할 수 있다. mouseover() VS mouseenter()마우스 커서가 특정 HTML 요소 위에 올려질 때 발생. mouseover()document.getElementById('parent').addEventListener..reviews 3 calendar_month 2024.05.22
-
Skill/JavascriptJS/jQuery - 요소의 높이(height), 넓이(width)요소의 높이(height)와 넓이(width)속성에 따라 높이값과 너비값을 가져오는 방법이 조금씩 다르다. 바닐라 스크립트와 제이쿼리로 가져오는 방법 또한 다르기 때문에 상황에 따라 알맞는 속성을 사용할 수 있다. 바닐라스크립트// 높이값 가져오기let clientH = element.clientHeight;let offsetH = element.offsetHeight;let scrollH = element.scrollHeight;let rectH = element.getBoundingClientRect().height;let styleH = window.getComputedStyle(element).height;// 넓이값 가져오기let clientW = element.clientWidth;let..reviews calendar_month 2024.05.07
-
Skill/JavascriptJS/jQuery - 자주 쓰는 정규식(한글만/영문만/대소문자/숫자만/특수문자만)정규식 문자열 패턴을 찾거나 변형하기 위해 사용되는 표현식이다. 스크립트에서 정규식을 사용하면 특정 패턴을 가진 문자열을 찾거나 추출할 수 있다. 정규식은 다양한 메타 문자와 특수 문자를 사용하여 패턴을 정의한다. const re = /ab+c/; 예시 자주쓰는 정규식 한글만 /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/g 자음, 모음, 한글 모두 영문만 찾기 /[a-zA-Z]/g 대문자, 소문자 모두 영문 소문자만 찾기 /[a-z]/g 영문 대문자만 찾기 /[A-Z]/g 숫자만 찾기 /[0-9]/g 숫자만 제외하고 찾기 /[^0-9]/g 특수문자만 찾기 /[^가-힣\w\s]/g 한글, 영문, 숫자, 공백 제외 domain_verification Source 정규 표현식 - JavaScript | MDN 정규 표현식, 또..reviews 4 calendar_month 2024.02.06
-
Skill/JavascriptJS/jQuery - 현재시간(년/월/일/시/분/초) : Date() 함수new Date() JavaScript는 1970년 1월 1일부터 날짜를 밀리초로 저장합니다. 현재 날짜와 시간을 사용하여 날짜 객체를 생성합니다. new Date(); new Date(milliseconds); new Date(dateString); new Date(year, month, day, hours, minutes, seconds, milliseconds); 예시 메소드 getFullYear() 연도를 반환합니다. getMonth() 월을 반환합니다. (0 ~ 11) getDate() 해당 월의 날짜를 반환합니다. (1 ~ 31) getHours() 시간을 반환합니다. (0 ~ 23) getMinutes() 분을 반환합니다. (0 ~ 59) getSeconds() 초를 반환합니다. (0 ~ 5..reviews 94 calendar_month 2023.12.23
-
Skill/JavascriptJS/jQuery - 스크롤 이벤트 : 맨 위, 맨 아래, 요소 위치 감지, 스크롤 업&다운스크롤 이벤트웹 페이지를 스크롤할 때 발생하는 이벤트. 마우스 휠을 사용하여 스크롤하거나 터치 기반 장치에서 스크롤 제스처를 사용할 때도 발생할 수 있다. 이벤트 핸들러를 사용하여 스크롤 이벤트를 감지하고, 사용자가 스크롤을 할 때 특정 동작을 수행할 수 있다.check_circle Check스크롤 이벤트내에 내용을 입력하면 스크롤이 발생할 때 마다 호출하기 때문에 이벤트를 한번만 호출해야 한다면 주의해야 한다. 스크롤 - 바닐라 스크립트window.addEventListener('scroll', function() { // 스크롤 이벤트가 발생할 때 실행될 작업 console.log('페이지가 스크롤됨!');}); 스크롤 - 제이쿼리$(selector).scroll(function() { ..reviews 1 calendar_month 2023.12.01
-
Skill/JavascriptJS/jQuery - 천단위(3자리수)마다 콤마 넣기 : toLocaleString(), replace()toLocaleString() 함수 toLocaleString() 메소드는 숫자를 통화 형식으로 표시하거나, 날짜와 시간을 로컬 시간대에 맞는 형식으로 표시해주기 때문에 toLocaleString() 메소드를 이용하여 숫자 3단위마다 콤마를 넣을 수 있다. wb_incandescent Tip toLocaleString()메소드는 현재 지역 설정에 따라 변환된 값을 반환한다. 따라서 결과는 각 사용자의 로컬 설정에 따라 다를 수 있다. 예시 var number = 123456789; console.log(number.toLocaleString()); // "123,456,789" // 인자없이 사용하면 사용자의 로컬 설정에 따라 반환 console.log(number.toLocaleString('ko-KR..reviews 1 calendar_month 2023.12.01
-
Skill/JavascriptJS/jQuery - 요소의 class 읽기, 추가, 변경, 제거, 포함 여부클래스 읽기바닐라스크립트const ex = document.getElementById('ex');// 클래스 이름 문자열로 리턴ex.className;ex.classList;ex.classList.length; // 클래스 갯수ex.classList.item(0); // 인덱스 0번째 클래스 이름ex.classList.item(1); // 인덱스 1번째 클래스 이름ex.classList.item(2); // 인덱스 2번째 클래스 이름className, classListelement의 클래스 이름을 문자열로 리턴classList.lengthelement의 클래스 갯수를 리턴classList.item(index)element의 특정 인덱스의 클래스 이름을 리턴 제이쿼리const ex = $('#ex');ex..reviews calendar_month 2023.10.23
-
Skill/JavascriptJS/jQuery - 현재페이지 url 가져오기 : window.location현재페이지 URLWindow.location은 읽기 전용 속성으로, 문서의 현재 위치(URL)에 대한 정보가 담긴 Location객체를 반환한다. 읽기 전용 형태이지만 문자열 할당이 가능하기 때문에 location을 문자열처럼 사용할 수 있다. 이 객체를 사용하여 브라우저의 주소 표시줄을 제어하고 페이지를 동적으로 변경할 수 있다.Location.href온전한 URL을 값으로 하는 DOMString. 바뀔 경우 연결된 문서도 새로운 페이지로 이동한다. 연결된 문서와 다른 오리진에서도 설정할 수 있다.Location.protocolURL의 프로토콜 부분을 값으로 하는 DOMString으로, 마지막의 ':'도 포함.Location.hostURL의 호스트 부분을 값으로 하는 DOMString으로, 호스트명, ..reviews calendar_month 2023.10.16
728x90