'Skill/Javascript' 카테고리의 글 목록

Skill/Javascript

JS/jQuery - 반복문(for문 while문 등)에서 동적 변수 사용하기

동적변수변수명과 내용이 반복되면서 일부만 변경되는 경우 반복문을 통해 효율적으로 동적변수를 사용할 수 있다. 동적변수를 생성하는데에는 두자기 방법이 있는데, 배열을 이용해서 생성하는 방법과 글로벌 영역인 window 객체를 이용해서 생성하는 방법이 있다.check_circle Checkeval()이란 함수를 사용해서 동적변수를 생성할수도 있다. 하지만, 문자열로부터 eval()을 실행하는 것은 해커가 위험한 코드를 사용할 수도 있기 때문에 엄청나게 위험하다. 배열로 동적변수 만들기key값으로 변수명을 생성하고 value값으로 내용을 넣는다. var test = [];for (var i = 1; i test1: "테스트1"test2: "테스트2"test3: "테스트3"test4: "테스트4"test5:..

reviews calendar_month 2024.11.20

Skill/Javascript

JS/jQuery - 0부터 숫자 증가하는 카운트 애니메이션 (+ 스크롤 도달 했을 때 작동)

숫자 카운트0부터 100까지 숫자를 카운트 하거나 천단위나 소수점자리까지 숫자를 카운트 할 수 있다. 응용하면 스크롤해서 해당 페이지에 도달했을때 카운트를 시작 할 수도 있다. 제이쿼리 animate 메소드를 사용하면 어렵지 않게 구현할 수 있다. $('.count-num').each(function(index) { var $this = $(this); var countFrom = $this.attr('data-from'); var isComma = /^[0-9]+\.?[0-9]+$/; var countTo = $this.attr('data-count'); var speed = Math.floor($this.attr('data-duration')); var num; $({ val: cou..

reviews calendar_month 2024.07.14

Skill/Javascript

JS/jQuery - 콘텐츠 요소(html, text, node) 다루기 총 정리✨

웹 개발에서 HTML 요소를 동적으로 조작하는 것은 필수적이다. 콘텐츠 요소를 삽입, 수정하는 함수는 HTML을 포함한 콘텐츠를 모두 삽하는 함수와 HTML태그 없이 텍스트만 삽입하는 함수, 그리고 요소(Node)를 삽입하는 함수로 나눌 수 있고 콘텐츠를 제거하거나 복사할 수도 있다. 바닐라 스크립트❣️콘텐츠 요소 삽입하기콘텐츠 요소를 삽입하는 바닐라 스크립트 함수함수설명기존내용유지innerText텍스트 삽입 (보이는 것만)❌textContent텍스트 삽입 (숨겨진 것도 포함)❌append()맨 뒤에 노드 또는 텍스트 삽입✅appendChild()맨 뒤에 노드만 삽입✅prepend()맨 앞에 노드 또는 텍스트 삽입✅innerHTMLHTML 포함하여 내부 변경❌outerHTML자기 자신의 HTML까지 ..

reviews calendar_month 2024.07.11

Skill/Javascript

JS/jQuery - 스크립트로 inline-style, css (변수 포함) 제어하기

Style 제어하기웹페이지에서 스크립트로 요소의 스타일을 동적으로 제어할 수 있다. 값을 가져올 수도 있고, 추가 하거나 제거 할 수도 있다. 버튼을 클릭하면 변경되어야 하는 경우처럼 필요에 따라 사용할 수 있다. 바닐라 스크립트// window.getComputedStyle() 메소드로 전체 CSS 변수의 현재 값을 가져옴.const rootStyles = window.getComputedStyle(document.documentElement);// getPropertyValue 메소드로 변경 할 변수 또는 속성값을 선택.const mainColorValue = rootStyles.getPropertyValue('--main-color');const heightValue = rootStyles.get..

reviews calendar_month 2024.07.05

Skill/Javascript

JS/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/Javascript

JS/jQuery - 새로 고침, 뒤로 가기, 페이지 이동 했을 때 스크롤 위치 기억 : history, sessionStorage

history브라우저의 세션 기록, 즉 현재 페이지를 불러온 탭 또는 프레임의 방문 기록을 조작할 수 있는 기능을 제공한다. 즉, 사용자가 방문한 페이지의 기록을 통해 앞뒤로 이동하거나, 현재 기록을 변경하거나 추가할 수 있다.//새로 고침 시 항상 top:0 위치.history.scrollRestoration = "manual";//default//현재 위치를 기억하여 새로 고침 시 그 자리를 유지.history.scrollRestoration = "auto"; sessionStorage브라우저 세션 동안 데이터를 저장할 수 있는 객체. 브라우저가 열려있는 한 새로고침과 페이지 복구를 거쳐도 남아있다. sessionStorage는 localStorage와 비슷하지만, localStorage의 데이..

reviews calendar_month 2024.06.03

Skill/Javascript

JS/jQuery - 요소 선택 총 정리 : 아이디, 클래스, 네임, 태그, 부모, 조상, 자손, 형제, 이전, 다음

특정 요소 (id, class, name, tagname)특정 HTML 요소를 선택하는 방법은 여러 가지가 있다. 주로 요소를 어떻게 선택하고, 어떤 기준으로 접근하느냐에 따라 다르다. 특정요소 - 바닐라스크립트// 특정 id로 선택let element = document.getElementById('myId');// 특정 class로 선택let element = document.getElementsByClassName('myClass');// 특정 name으로 선택let element = document.getElementsByName('myname');// 특정 태그명으로 선택let element = document.getElementsByTagName('div');// CSS 선택자를 사용하여 첫..

reviews calendar_month 2024.05.30

Skill/Javascript

JS/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/Javascript

JS/jQuery - a태그(anchor) 버튼 클릭시 해당 아이디로 스크롤 부드럽게 이동하기

스크롤 부드럽게 이동웹페이지 디자인중에는 a태그 href링크에 해시태그(#)를 넣어 페이지를 스크롤 하는 방식이 있다. 스크립트 없이 사용하면 애니메이션 효과 없이 한번에 이동한다. 스크립트를 이용하면 스크롤을 부드럽게 이동하는 애니메이션 효과를 적용할 수 있다. 1페이지2페이지3페이지4페이지 바닐라스크립트 제이쿼리

reviews calendar_month 2024.05.16

Skill/Javascript

JS/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/Javascript

JS/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/Javascript

JS/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

닌니디자인의 포스팅을 검색 해주세요.

Ninny Design Skill/Javascript

티스토리툴바