키보드와 하루

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 });

1. open() - 역할 새로운 window를 만들어 줌 ◈ 사용형식 open( URL , 원도 이름 , 창 설정 ) 2. open() - 창 설정 값옵션설명입력 값 height높이 값 width 넓이 값 location 주소 입력창 유무 yes , no menubar 메뉴 유무yes , noresizable 화면 크기 조절 가능 여부 yes , no status 상태 표시줄 유무 yes , no toolbar 상태 표시줄 유무 yes , no 3. open() - 예제 ◈ 코드 123456789$(document).ready(function () { window.open('http://devjhs.tistory.com','child','width=500,height=300,toolbar=no'); }..

1. trim() - 역할문자열 양쪽 끝에 존재하는 공백을 제거 2. trim() - 예제◈ 코드 123456789101112$(document).ready(function () { var text = ' test '; alert("나는"+text+"입니다"); //나는 test 입니다 alert("나는"+text.trim()+"입니다"); //나는test입니다 }); ◈ 설명 text 변수를 보게 되면 test라는 문자 양쪽으로 공백이 있습니다 이러한 상태에서 바로 alert을 찍어보면 첫번째 alert 처럼 공백이 존재하게 됩니다 그래서 두번째 alert 창에서처럼 trim을 이용하게 되면 공백이 제거된 상태로 출력됩니다

1. every() , some() - 역할 every() - 특정 조건을 모두 만족하는지 확인 some() - 특정 조건에서 적어도 하나는 만족하는지 확인 2. every() - 예제 ◈ 코드 123456789101112131415161718192021$(document).ready(function () { var array = [1,2,3,4,5];var array_two = [1,2,3,4,5]; array = array.every(function(ele){ return ele