javascript&jquery/javascript14 <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> 객체요소의 우선순위 설정 객체요소의 우선순위 설정을 위해선 보통 아래와 같이 활용하게 된다. 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. <javascript> 자바스크립트 이벤트 연결 javascript 객체의 이벤트 연결은 'addEventListener'를 사용한다. 기본 형태 : 선택자.addEventListener('이벤트',function(){ 이벤트 발생 시 실행문 }) 1) function 또는 화살표함수를 이용한 두가지 형태의 표현 선택자.addEventListener('이벤트',function(){이벤트발생시 실행문}) 선택자.addEventListner('이벤트명',()=>{이벤트발생시 실행문 }) 2) 이벤트 연결 사용 예시 - click / mouseenter(마우스영역에 들어가는 것)/ mouseleave(마우스영역에서 나오는 것) - 이외에도 여러 이벤트가 있지만 다음과 같은 이벤트로 형태를 확인할 수 있다. HTML 삽입 미리보기할 수 없는 소스 2024. 4. 3. <javascript> 객체요소의 선택 오늘 정리할 javascript의 내용은 html의 구조에서 부모요소, 자식요소, 형제요소를 각 선택하는 방법이다. 이전에 언급한대로 선택자의 경우 변수를 활용하여 진행되었다. 1. 부모요소의 선택 · 선택자.parentElement : 직계부모 · 선택자.closest('선택할 상위부모객체') : 직계부모제외 2. 자식요소의 선택 · 선택자. children - 이 때 자식요소를 배열값으로 가져오게 됨에 따라 for구문 활용 3. 형제객체의 선택 · 선택자.previousElementSibling : 기준객체 앞 형제요소 · 선택자.nextElementSibling : 기준객체 뒤 형제요소 HTML 삽입 미리보기할 수 없는 소스 2024. 4. 3. 이전 1 2 3 다음
