javascript&jquery16 <javascript> keyboard이벤트(keydown-keyup-keypress) 자바스크립트의 키보드이벤트에는 keydown, keyup, keypress 이벤트가 있다. · keydown이벤트 - 사용자가 키보드를 눌렀을 때 발생 - 사용자가 키보드를 누를 때마다 한 번씩 발생하며, 눌린 키와 상관없이 발생(shift, tab등 가능) - 사용자가 키를 길게 누르고 있을 시 반복적으로 발생하지 않음 · keyup이벤트 - 사용자가 키보드를 눌렀다가 떼었을 때 발생 - keydown/keypress이후 keyup이벤트 발생 * keypress의 경우 shift, ctirl, alt 키 누르면 keypress이벤트 발생X, 그러나 뗄 경우 keyup이벤트 발생 · keypress이벤트 - 사용자가 키보드를 눌렀을 때 발생 - 키보드를 계속 누르고 있는 경우 계속 이벤트 발생 - 실제 .. 2024. 4. 16. <javascript> Math함수 : 숫자의 반올림(round), 올림(ceil), 내림(floor), 버림(trunc), 절대값(abs) 오늘 작성해 볼 이야기는 javascript의 숫자에 대한 이야기이다. javascript는 숫자에 대해 다양한 연산 함수를 제공한다. 오늘 알아볼 javascript의 숫자함수는 아래와 같다. ·Math.round() : 반올림 ·Math.ceil() : 올림 ·Math.floor() : 내림 ·Math.trunc() : 버림(정수값) ·Math.abs() : 절대값 ·Math.sqrt() : 제곱근 ·Math.pow(a,n) : a의 n승(a의거듭제곱) ·Math.random() : 랜덤값 1. Math.round() : 반올림 HTML 삽입 미리보기할 수 없는 소스 2. Math.ceil() : 올림 HTML 삽입 미리보기할 수 없는 소스 3. Math.floor() : 내림 HTML 삽입 미리보기.. 2024. 4. 15. <javascript & jquery> 탭메뉴 생성 앞서 간단한 CSS작업을 통한 탭메뉴 생성을 한 바 있다. 탭메뉴만들기(input태그/label태그의 활용) input태그는 사용자에게서 데이터를 받기 위해 사용되는 주태그이다. 이에 따라 다양한 속성을 가지고 있어서 상황에 맞게 사용할 필요가 있다. label태그는 input에 이름을 붙여주는 태그라고 생각 seon-xero.tistory.com 오늘은 jquery와 javascript를 활용한 탭메뉴 생성을 하려고 한다. 나의 경우 클래스추가 및 제어를 통해 탭메뉴가 이어지게 할 예정이지만 이 방법이 절대적인 것은 아니다. 제이쿼리와 자바스크립트에서의 클래스제어는 차이가 있다. 이전에 자바스크립트 관련 클래스추가 및 제어 관련 글은 작성한 적(하단에 참조로 남겨놓겠음)이 있으니 헷갈릴 경우 참고하면 .. 2024. 4. 13. <Jquery> attr 속성 <javascript> setAttribute 속성 HTML의 속성을 제어하는데 있어서 jquery는 .attr()통해서 제어하고, javascript에서는 setAttribute를 활용하여 제어하게 된다. 나는 이 속성을 활용해서 이미지 속성 변경을 많이 하곤 하지만, 글의 전달을 위해 input태그를 통해 예제를 보여줄까 한다. - jquery와 javascript의 스타일 조건 동일 - button클릭 시 input의 placeholder(미리보기텍스트) 변경 1. jquery jquery의 경우 필수적으로 사용해야 하는 플러그인이 있음에 따라 코드기록으로 대체한다. * 버튼 클릭시 input.attr(변경할속성명:변경할속성값) = input.attr(placeholder:"미리보기가 변경되었습니다") attr(속성명,속성값) DOCTYPE html.. 2024. 4. 11. <javascript> 객체요소의 우선순위 설정 객체요소의 우선순위 설정을 위해선 보통 아래와 같이 활용하게 된다. 1. 객체요소의 우선순위 설정 부모객체>자식객체 부모객체 자손객체(기호>대신 띄어쓰기로 구분) 선택객체선택객체의선택자 ex) #box div{ /* 아이디명=box 의 자손 태그=div 선택*/ #box .click div{ /*아이디명=box이면서 클래스명=click인 부모객체의 자손 태그=div 선택 = 동일한 객체의 우선순위를 높여서 선택 시 사용 = 동일한 객체의 선택자를 공백없이 붙여 모두 작성*/ } # box div.act{ /* 아이디명=box의 자손 태그=div이면서 클래스명=act인 자손 요소 선택*/ } HTML 삽입 미리보기할 수 없는 소스 2. 자바스크립트에서의 클래스 추가&제거 일반적으로 선택자.style.속성값.. 2024. 4. 9. <javascript> 반복되는 요소의 이벤트 적용 ◇ ul-li 형식 구조에 이벤트를 적용하는 경우 1) css에서 스타일 작업 시 각 객체를 자동으로 인식 2) j-query에서 스타일 작업 시 li전체를 인식 - 각 객체를 인식하기 위해 this선택자를 통한 작업 필요 3) javascript에서 스타일 작업 시 문서객체 선택 후 이벤트.currentTarget을 활용한 객체 인식 - es5버전까지는 2)jquery와 같이 this선택자 사용을 통해 각 객체 선택 - es6버전부터는 this 대신 e.currentTarget의 사용(e는 이벤트발생요소) ◇ 번외 j-query : $(선택자).text('내용') ▶ 선택자의 내용으로 text('내용')삽입 javascript : .innerText ▶ 선택객체 요소 안에 있는 텍스트값의 활용 HTML.. 2024. 4. 4. 이전 1 2 3 다음
