DOM 객체의 구조
이것은 문장입니다.
하하하*^^*
히히히*>___<*
HELLO
CSS3 스타일의 동적 변경
이것은
문장입니다.
클릭하면 내용이 바뀝니다...
This 키워드 활용
여기 클릭하면 크기와 색 변경
document 객체의 properties 출력
태그 이름으로 DOM객체 찾기
내가 좋아하는 과일 찾아보기
저는 빨간 사과를 좋아해서
아침마다 한 개씩 먹고 있어요. 운동할 때는 중간 중간에
바나나를 먹지요. 탄수화물 섭취가 빨라
힘이 납니다. 또한 달콤한 향기를 품은 체리와
여름 냄새 물씬 나는 자두를 좋아합니다.
HTML문서 작성기 만들기
아래에 HTML 문서를 작성하고 버튼을 클릭해 보세요.
새 윈도우에 HTML 문서가 출력됩니다.
DIV 객체를 동적으로 생성, 삽입, 삭제하는 예제
ge
DIV생성
부모 div입니다.
onclick 리스너로 계산기 만들기
계산하고자 하는 수식을 입력하고 계산 버튼을 눌러보세요.
마우스 관련 이벤트 리스너
마우스 관련
이벤트
가 발생합니다.
마우스 이벤트 객체의 프로퍼티
마우스 이벤트 객체의 프로퍼티와 onmousemove
이미지 위에 마우스를 움직일 때
onmousemove 리스너가 실행되고,
마우스의 위치를 보여줍니다.
oncontextmenu에서 컨텍스트 메뉴 금지
마우스 오른쪽 클릭은 금지됩니다. 아무곳이나
클릭해도 컨텍스트 메뉴를 볼 수 없습니다.
HTML 문서의 로딩 완료, onload
이 페이지는 onload 리스너의
사용 예를 보여줍니다
이 페이지가 출력되고 난 바로 직후
onload 리스너를 통해
경고창을 출력합니다.
onload로 이미지 크기 출력
new Image()로 이미지 로딩
이미지를 클릭하면 다음 이미지를 보여줍니다.
사용자 입력 여부 체크 - onblur 이벤트 이용
라디오 버튼 활용
목적지는 어디입니까?
체크박스 활용
구매할 물건을 고르시오.
서적 주문
서적 주문
Select 객체 활용
좋아하는 도라에몽을 선택하시오~
키보드 이벤트 활용
키 리스너와 키 이벤트 객체의 프로퍼티
텍스트 창에 키를 눌러 보세요. Alt, Shift, Ctrl 키도 가능합니다.