키보드와 하루

1. fade 이벤트 - 역할 fadeIn() - 문서 객체를 천천히 보여줌 fadeOut() - 문서 객체를 천천히 사라짐 fadeToggle() - fadeIn() 메서드와 fadeOut() 메서드를 번갈아 실행 ◈ 구문형식 fadeIn( speed , callback , easing) - speed : 효과를 진행할 속도 지정 (입력 - 밀리 초 단위의 숫자 , 문자열(slow,normal,fast)) - callback : 효과를 수행후 실행할 함수 지정 - easing : easing 형태를 지정 (입력 - linear,swing) 2. fade 이벤트 - 예제 ◈ 코드 123456789101112131415161718$(document).ready(function () { $("#btn").c..

1. 입력양식 이벤트 - 역할 입력양식 반응에 따른 이벤트 2. 입력양식 이벤트 - 정리이벤트 이름설명change내용이 변경할 때focus초점을 맞출 때focusin초점을 맞추어지기 바로 전focusout초점이 사라지기 바로 전blur초점이 사라지면select선택할 때(text 타입,textarea 제외) submitsubmit 버튼을 누를 때 resetreset 버튼을 누를 때 3. 입력양식 이벤트 - 예제1 ◈ 코드 12345678910111213$(document).ready(function () { $("#test").change(function (event){ alert($(this).val()); });}); ◈ 결과화면 ◈ 설명 텍스트를 입력하고 테스트 내용이 변경되었을 때에만 alert 창..

1. getElementById - 역할 태그에서 id 속성이 일치하는 문서 객체를 가져옴 2. getElementById - 예제 ◈ 코드 1234567891011121314151617window.onload = function(){ alert(document.getElementById('t_font')); //[object HTMLfontElement] alert(document.getElementById('t_font').id); // t_font alert(document.getElementById('t_font').size); // 10px}; test1

1. innerHTML() - 역할태그의 내부를 의미하는 속성 2. innerHTML() - 예제◈ 코드 12345678window.onload = function(){ var v_h1 = "test1"; document.body.innerHTML = v_h1;}; ◈ 결과화면 ◈ 설명 innerHTML를 사용하면 보다 쉽게 문서 객체를 생성하여 붙일 수 있습니다

1. 객체 생성() - 역할 요소를 활용하여 객체 생성 2. 객체 생성() - 메서드메서드설명createElement()요소 노드를 생성createTextNode() 텍스트 노드를 생성appendChild()객체에 노드를 연결 3. 객체 생성() - 예제 ◈ 코드 123456789101112window.onload = function(){ var v_h1 = document.createElement('h1'); var v_h1_text = document.createTextNode('test1'); v_h1.appendChild(v_h1_text); document.body.appendChild(v_h1);}; ◈ 결과화면 ◈ 설명 v_h1 변수로 요소 노드를 생성후 v_h1_text에 텍스트 노드를 생..

1. 윈도 이벤트 - 역할 윈도 반응에 따른 이벤트 2. 윈도이벤트 - 정리이벤트 이름설명ready객체 준비 완료load윈도를 불러들일 때unload윈도를 닫을 때resize윈도 크기 변화가 있을 때scroll윈도 스크롤이 발생할 때error에러가 있을 때 3. 윈도이벤트 - 예제1 ◈ 코드 12345678910 $(document).ready(function () { $(window).load(function(){ alert("load 이벤트"); });}); ◈ 결과화면 ◈ 설명 처음 화면을 실행하면 위와 같은 alert 창이 발생합니다 4. 윈도이벤트 - 예제2 ◈ 코드 12345678910 $(document).ready(function () { $(window).scroll(function(){..

1. 키보드 이벤트 - 역할키보드 반응에 따른 이벤트 2. 키보드 이벤트 - 정리이벤트 이름설명keydown 키보드를 누를 때 발생keypress글자가 입력될 때 발생(한글은 지원 안함)keyup키보드를 땔 때 발생 3. 키보드 이벤트 - 예제1◈ 코드 123456789101112131415 $(document).ready(function () { $('input').keydown(function() { alert($(this).val()); });}); ◈ 결과화면 - a를 입력한 뒤에 b를 눌렀을 때 ◈ 설명 a를 입력하고 b를 입력했을 때 keydown 이벤트가 발생하여 먼저 alert창을 찍고 다음 b가 입력됩니다 4. 키보드 이벤트 - 예제2◈ 코드 123456789101112131415 $(d..

1. 마우스 이벤트 - 역할 마우스 반응에 따른 이벤트 2. 마우스 이벤트 - 정리이벤트 이름설명click 마우스 클릭시 발생 dbclick 마우스 더블클릭시 발생 mousedown 마우스 버튼을 눌렀을 때 발생 mouseup마우스 버튼을 땔 때 발생mouseenter마우스가 외부→내부로 이동할 때 발생mouseleave 마우스가 내부→외부로 이동할 때 발생mousemove 마우스가 움직일 때 발생 mouseout마우스가 벗어날 때 발생 mouseover마우스가 들어올 때 발생 3. 마우스 이벤트 - 예제 ◈ 코드 1234567891011121314151617 $(document).ready(function () { $('h1').mouseover(function() { $(this).css('color..

1. location - 역할 주소 표시와 관련된 객체 2. location - 속성속성설명hrefURL 주소host호스트 이름과 포트 번호(localhost:8080) hostname호스트이름(localhost)port포트번호(8080)pathname디렉토리 경로search요청 매개변수(?tt=10) 3. location - 메소드메소드설명assign(link)현재 위치를 이동reload()새로고침replace(link)현재 위치를 이동 (뒤로가기버튼 동작X) 4. location - 예제 ( 페이지 이동 ) ◈ 코드 123456789101112131415$(document).ready(function () { location = 'http://devjhs.tistory.com'; location.hr..

1. screen - 역할 웹 브라우저 화면이 아닌 운영체제 화면의 속성을 가짐 2. screen - 속성속성설명height화면 높이 width 화면 넓이 availWidth사용가능한 넓이 availHeight 사용 가능한 높이colorDepth 사용 가능한 색상 수 pixelDepth 한 픽셀당 비트수 3. screen - 예제 ◈ 코드 12345678910111213141516171819$(document).ready(function () { alert(screen.width);//2560 alert(screen.height);//1080 alert(screen.colorDepth);//24 alert(screen.pixelDepth);//24 });