JAVASCRIPT 썸네일형 리스트형 javascript 예제(아이디 중복검사) 더보기 javascript 예제(image) 이미지 관련 예제 //html //JavaScript 1. 버튼 클릭시 image 너비 조절 var btn1, cat01; window.onload = function(){btn1 = document.all["btn1"];cat01 = document.images["cat01"]; btn1.onclick = function(){cat01.width = 125;};}; 2. 롤오버 이미지 var cat02; window.onload = function(){cat02 = document.images["cat02"]; cat02.mouseover =function(){cat02.src = "이미지 경로";}; cat02.mouseout = function(){cat02.src = "../images/cat02.. 더보기 javascript 예제(부모창과 자식창) window.html child.html 더보기 javascript message //message 1. alert(메시지) 경고창** alert("메시지"); 2. confirm(메시지) 선택 - 삭제유무 물어보는곳에 많이씀. **if(conform("정말 삭제하시겠습니까?")){location.href="delete.html");}else{ }3. prompt(메시지,초기값) - 값을 입력. var pw = prompt("암호를 입력하세요"); if(pw=="1234"){location.href="lecture.html");}else{alert("암호가 틀렸습니다.");} 더보기 javascript history history 객체 - window 자식 객체- (현재 세션에 한해서) 브라우저의 방문 기록 접근/조작 객체 - history.back(); //뒤로가기 - history.forward(); 앞으로가기 **go(n) : n(양의 정수 ~ 음의 정수)- history.go(-1); 한페이지 뒤로가기- history.go(-2); 두페이지 뒤로가기- history.go(1); 한페이지 앞으로가기- history.go(2); 두페이지 앞으로가기 더보기 javascript location 객체 location 객체- window 자식 객체- 브라우저가 보고있는 문서의 위치(주소, URL)를 제어하는 객체- 링크 역할을 한다. **기타기능console.log(location.href); //전체 URL (현재 URL)console.log(location.host); //도메인 + 포트console.log(location.hostname); //도메인console.log(location.port); //포트console.log(location.protocol); //http:// //페이지 이동하기location.href = "http://naver.com";location.replace("http://naver.com"); //새로고침, F5- location.reload(); - locatio.. 더보기 javascript collection(배열) 자바스크립트에서 기본으로 제공하는 배열(컬렉션)1. window.document.all : 모든 태그 배열(비표준-MS > 대다수 브라우저) 2. window.document.images : 문서상의 모든 태그 배열3. window.document.links : 문서상의 모든 태그 배열4. window.document.forms : 문서상의 모든 태그 배열5. window.document.forms.elements : 특정 의 내부 하위 컨트롤 태그 배열6. window.document.anchors : 문서상의 모든 태그 배열 window.onload = function(){}; =>브라우저가 페이지의 모든 내용을 읽고 난 뒤에 호출되는 이벤트 > 페이지의 모든 태그를 읽고 난 뒤라서 모든 태그에 접근.. 더보기 javascript key이벤트(키보드 관련) 키보드 관련 이벤트- 폼 관련 태그들만 사용한다.(포커스를 가지는 태그에만 적용 가능) + a태그1. onkeydown- 키를 눌렀을 때 발생- 키를 입력하면 이벤트 발생 후 문자가 입력- 물리키에 반응 2. onkeyup- 키를 떼었을 때 발생- 키를 입력하면 문자 입력 후 이벤트 발생- 물리키에 반응 3. onkeypress- 키를 눌렀을 때 발생- 문자키에 반응 //예시 현재 입력된 값이 사용되는 업무 > keyup현재 입력된 값과 상관없는 업무 > keydown or keyup ※ event.keyCode : 문자코드값 //특수키 조합- event.ctrlKey : ctrl- event.artKey : atr- event.shiftKey : shift //예시if(event.keyCode==89 .. 더보기 javascript mouse이벤트 마우스 사용할때 발생하는 이벤트1. onmouseover : 해당 객체의 영역 위에 커서가 진입하는 순간 발생2. onmouseout : 해당 객체의 영역에서 커서가 빠져나가는 순간 발생3. onmousedown : 해당 객체의 영역에서 마우스 버튼이 눌려지는 순간 발생4. onmouseup : 해당 객체의 영역에서 마우스 버튼이 뗄때 순간 발생5. onmousemove : 해당 객체의 영역에서 커서가 움직이는 순간 발생 //어느 버튼을 사용했는지?event 객체 - 이벤트에 의해서 호출되는 함수에서 사용하는 예약어- 발생한 사건의 여러가지 정보를 제공 객체 ※event.buttons == 1 왼쪽버튼event.buttons == 2 오른쪽버튼 마우스 포인터 좌표 1. x,y (비권장)- 문서 좌측 상단.. 더보기 javascript Event Event, 이벤트- 웹 페이지에서는 어떤 종류의 상호작용이 발생할 때 이벤트가 일어난다. 사용자가 무언가를 클릭하거나 특정 요소 위로 마우스를 가져가거나 특정한 키를 누르는 것 등이 이러한 상호작용에 포함된다.- BOM에서 다루는 이벤트- 사용자(사람)와 상호 작용하면서 일어나는 사건 > 마우스(키보드, 터치, 음성)를 조작하면 조작에 대한 반응- ex) 마우스 버튼 꾹~(클릭) > 프로그램상에서 이벤트 발생(클릭) > 미리 준비해놓은 프로그래밍 코드 호출(실행) 이벤트 처리 방식1. 정적 방식- 태그의 속성으로 onXXX속성을 사용하는 방식- onXXX : 이벤트 핸들러 (Event Handler) 2. 동적 방식- 함수를 사용하여 태그의 속성을 변경하는 방식 //예시 => button의 value .. 더보기 이전 1 2 다음
