목록분류 전체보기 (137)
코딩 이야기
var fruits1 = new Array("apple" ,"banana", "orange"); for(var i=0;i
DOCTYPE html> DOM - Create & Add Node 참가 신청 신청 // 신청 명단이 표시될 영역 1. 버튼에 이벤트 함수 지정하기 이 프로그램에서는 텍스트 필드에 이름을 입력한 후 [신청] 버튼을 누르면 가로줄 아래에 신청자 명단이 표시됩니다. 먼저 태그에 click 이벤트가 발생했을 때 실행할 newRegister() 함수를 지정합니다. 이때 return false를 추가하는 것은 원래 버튼의 기능(입력 내용을 서버로 전송하는 기능)을 사용하지 않겠다는 뜻입니다. 2. 이벤트 함수 정의하기 이제부터 작성하는 소스는 register.js 문서에 추가할 자바스크립트 소스입니다. 먼저 [신청] 버튼을 눌렀을 때 실행하기로 지정한 newRegister() 함수의 내용을 작성해 보겠습니다. r..
DOM에 새로운 노드를 추가하는 방법을 하기전에 DOM트렝 어떤 노드가 있었는지 다시 한 번 복습해 보겠습니다. 모든 HTML태그는 '요소(Element) 노드'로 표현합니다. HTML 태그에서 사용하는 텍스트 내용은 '텍스트(Text)'노드로 표현합니다. HTML 태그에 있는 속성은 모두 '속성(Attribute)'로 표현합니다. 주석은 '주석(Comment)'노드로 표현합니다. 웹 문서에 있는 요소는 단순히 태그만 있는 게 아니라 태그 속성과 내용을 함께 사용합니다. 그래서 이나 태그를 추가하고 싶다면 단순히 이나 태그에 해당하는 요소 노드뿐만 아니라 텍스트 내용과 속성도 노드로 추가해야 합니다. 속성 설명 1 createElement() 새 요소 노드를 만듭니다. 2-1 createTextNode(..
addEventListener()함수로 여러 이벤트를 한번에 처리하기 var pic = document.querySelector('#pic'); pic.addEventListener("mouseover","changePic","false") pic.addEventListener("mouseout","changePic","false") // 괄호안에 첫번째 순서대로 설명 // 1. 이벤트 유형 /* 처리할 이벤트 유형을 정합니다. 단, 이함수에서 이벤트 유형을 지정할 때는 'on'을 붙이지 않고 'click'이나 'mouseover'처럼 이벤트 이름만 사용합니다. */ // 2. 함수 /* 이벤트가 발생했을 때 실행할 명령을 나열하거나 따로 함수를 만들었다면 함수 이름을 지정합니다. */ // 3. 캡처여..