자바스크립트 44

Jquery - $.each 메소드 사용법

자바스크립트에서 배열에 들어 있는 내용을 HTML 페이지에 표시하기 위해서 $,each 메소드를 사용하는 법을 봅시다. 다음과 같이 array를 선언후 for문처럼 사용하는 $.each 메소드를 통해서 모든 name과 link 항목을 innerHTML 시키는 예제입니다. DOCTYPE html> Insert title here $(document).ready(function(){ var array = [ {name: 'hanbit', link: 'http://hanb.co.kr'}, {name: 'daum', link: 'http://daum.net'}, {name: 'naver', link: 'http://naver.com'} ] $.each(array, function(index, item){ var..

자바스크립트 - DOM level2 이벤트 모델

DOM LEVEL2 이벤트 모델에서는 DOM LEVEL0이벤트에서와는 달리 여러 번 이벤트를 추가가 가능하다는 점입니다. 인터넷 익스플로러에서는 attachEvent 로 이벤트를 추가하고 detachEvent로 이벤트를 삭제하고 그 외 브라우저에서는 addEventListener로 이벤트를 추가하고 removeEventListener로 이벤트를 삭제합니다. 예제 소스 DOCTYPE html> Insert title here window.onload = function(){ var header = document.getElementById('my-header'); if(header.attachEvent){ //인터넷 익스플로러 일 경우 실행 var handler = function(){ window.eve..

자바스크립트 - 이벤트 버블링과 버블링 막는 방법

이벤트 버블링이란 이벤트가 자식부터 부모까지 계속 실행되는 것을 말한다. DOCTYPE html> Insert title here window.onload = function(){ } * {border: 3px solid black;} Pagagraph 위와 같은 소스의 경우 pagagraph 다음 header 다음 inner-div 다음 outer-div 순으로 실행이 될 것이다. 만약 이벤트 버블링을 막고 싶다면? 다음과 같이 인터넷 익스플로러 : 이벤트 객체의 cancelBubble 속성을 true로 바꿈 그 외 브라우저 : 이벤트 객체의 stopPropagation() 메서드를 사용 으로 막습니다. DOCTYPE html> Insert title here window.onload = functio..

자바스크립트 - 문서객체를 이용한 글자 움직이기 예제

문서 객체 모델(DOM, Document Object Model)은 document 객체와 관련된 객체의 집합입니다. 문서 객체 모델을 사용하면 HTML 페이지에 태그를 추가 수정 제거 할 수 있습니다. 다음은 이 문서 객체 모델을 이용한 글자들의 움직임을 만든 예제입니다. DOCTYPE html> Insert title here //랜덤한 정수를 생성 function nextRandomInteger(limit){ return Math.round(Math.random() * limit); } //랜덤한 알파벳을 리턴 var alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; function randomAlphabet(){ return alphabet.charAt(nextRandomI..

반응형