Mo's Develog

mousedown 및 mouseup이벤트(scale 및 색상변경) mousedown 이벤트(위치이동) mouseover 및 mouseout이벤트 테이블에 적용 번호 제목 작성자 1 제목1입니다 작성자1 2 제목2입니다 작성자2 3 제목3입니다 작성자3 이미지에 적용 ▲현재 body상태 window.addEventListener('DOMContentLoaded',function(){ var legend = document.querySelector('#title'); var div1 = document.querySelector('fieldset:nth-child(1) > div'); var div2 = document.querySelector('fieldset:nth-child(2) > div'); var ..

onfocus란? : input창의 경우 마우스클릭 또는 키보드 tab키로 focus상태일때, button등은 키보드 tab키로 focus상태일때를 말한다. onblur란? : focus된 상태가 사라졌을 때의 상태를 말한다. focus 및 blur이벤트 focus 및 blur이벤트 예제(HTML5의 속성 이용-IE에서만 적용됨) 아이디 비밀번호 focus 및 blur이벤트 예제(자바스크립트로 구현) 아이디 비밀번호 ▲ 현재 body의 상태 ▲ 첫번째 input창에 focus이벤트가 발생 시 멘트와 focus이벤트를 잃었을 때의 멘트이다. 이는 각각의 태그에 on이벤트처리를 통해 구현했다. 두번째 fieldset의 내용은 우리가 placeholder로 input창을 만들었을 때의 상태이다. 세번째 fie..

key이벤트 테스트 keydown: keyup: keypress: 주민번호 - ▲현재 body의 상태 keydown : 키보드의 모든키를 눌렀을 때 발생하는 이벤트 keyup : 키보드의 모든키를 눌렀다 땔 때 발생하는 이벤트 keypress : 영문자와 숫자 그리고 스페이바를 누를 때만 이벤트가 발생. 그 외의 키는 눌러도 이벤트발생 안함 window.addEventListener('DOMContentLoaded',function(){ var input=document.querySelector('input'); input.onkeydown=function(e){ console.log('keydown이벤트 발생'); console.log(e.type);//keydown console.log('e.key:..

/* [자바스크립트로 CSS제어하기] 방법1]엘리먼트객체.style.CSS속성="CSS속성값"; 단, CSS속성을 자바스크립트로 표현할때는 -(DASH)가 빠지고 두번째 글자의 첫글자가 대문자로 바뀜 단,-가 없는 CSS속성인 경우 그냥 소문자로 접근하면됨 방법2]엘리먼트객체.style["CSS속성"]="CSS속성값"; 이때는 CSS속성 그대로 넣어준다 예] font-size:10pt(CSS); color:red(CSS); background-image:url(이미지경로); 객체.style.fontSize="10pt";(자바스크립트) 객체.style["font-size"]="10pt";(자바스크립트) 객체.style.color='red';(자바스크립트) 객체.style["color"]='red';(자바스..

/* Date객체는 var 변수명 =new Date();로 생성한다. ※배열객체 var 배열명 = new Array(); ※Math객체 Math.함수명(); ※String객체는 방법1] var 변수명 = new String("문자열"); 방법2] var 변수명 = "문자열"; 혹은 직접 "문자열".함수()형식으로 사용가능 날짜 정보를 가져올때는 getXXX()시리즈로 날짜를 설정할때는 setXXX()시리즈로 */ //1]Date객체 얻기 방법1:Date() var today = new Date(); console.log('%O', today); console.log(today);//Tue Apr 19 2022 20:08:25 GMT+0900 (한국 표준시) console.log('년도:', (today...

※ String객체에 대한 포스팅은 자바와 거의 똑같기 때문에 중요하거나 자주사용하는 것 혹은 주의할 것들에 대해서만 포스팅 하겠습니다. //4]특정 위치(인덱스)의 하나의 문자 얻어오기 //charAt(인덱스):인덱스는 0부터 시작 document.write('charAt(인덱스)'); document.write(str3.charAt(3)+' '); document.write('자바스크립트'.charAt(2)+' '); //5]문자열에서 특정 문자열 얻어오기 substring(시작인덱스,끝인덱스): 끝인덱스 -1 document.write('substring(시작인덱스,끝인덱스)'); document.write('ACADEMY'.substring(3,7)); //5-1]문자열에서 특정 문자열 얻어오기2..

location & history & navigator & screen객체 객체의 함수 혹은 속성 테스트 아이디 비밀번호 ▲현재 body상태 console.log(location); // ▶Location console.log(location.href);//http://시스템주소:포트번호/JavaScript_ES5/BOM10_2.html console.log(location.protocol);//http console.log(location.port);//포트번호 console.log(location.hostname);//시스템주소 //location.href="https://www.nate.com";//사용자 이벤트에 의하지 않고 자동으로 이동 - 뒤로가기 활성화(히스토리 있는 경우) //locatio..

※우리가 DOM part.1 포스팅에서 BOM에 대한 기본개념을 다뤘으니 궁금하신분은 보고 오시길 바랍니다. 1. alert() / confirm() / prompt() BOM의 최상위 객체 Window alert()/confirm()/prompt() 아이디 ▲ input에 아이디를 입력하고 로그인을 누르면 console창에 입력한 아이디를 뿌려주고, 아이디를 입력하지 않고 로그인 인 버튼을 누르면 '아이디를 입력하세요'라는 경고창(alert)이 뜨도록 하자. 퇴실버튼을 누르면 '퇴실확인'을 한번확인하고 확인버튼을 누르면 퇴실처리되었다는 메세지를 콘솔창에 출력하고 입력버튼 또는 나이입력 버튼을 누르면 alert창으로 이름 혹은 나이를 입력받고 alert창으로 문장을 출력해주도록 하자. 2. open() ..

다양한 예제로 DOM을 좀 더 익혀보자 DOM API 사용하기:노드 가져오기 다양한 방법으로 노드 선택하기 태그명으로 얻기 정치 경제 연예 name속성으로 얻기 클래스명으로 얻기 네이버 다음 네이트 클래스명으로 DOM객체 얻어오기 아이디명으로 얻기 이미지 교체 1번 이미지 2번 이미지 3번 이미지 4번 이미지 전화번호 복사 010 011 017 019 - - 010 011 017 019 - - ▲ body태그를 브라우저에 출력하면 위와 같다. 1) 태그명 얻기 - checkbox에 checked한것과 input에 입력한 텍스트를 console창에 반환 function fnGetElementsByTag(){ var inputs =document.querySelectorAll('input'); console..