김중태의 자바스크립트 이야기 [제공: 아가달(http://www.dal.co.kr)] 자바스크립트 예제 소스

문서 위치: 첫화면(Home) > 컴퓨터언어 > 본문의 예제 소스 실행해보기

본문의 예제 소스 실행해보기

본문의 예제 소스 실행해보기

[자바스크립트 이야기] 본문에 사용했던 예제 소스 파일입니다. 예제 소스 파일은 자료실에서 내려받을 수 있으니 소스 파일과 소스 파일에 사용한 그림 파일은 자료실에서 받아서 이용하기 바랍니다. 이 차림은 인터넷 상에서 예제 소스 파일을 실행해볼 수 있도록 만든 것입니다.

본문의 예제 소스 실행해보기

ex1_01.html 타자로 한 자씩 입력하는 것 같은 타이핑 효과

ex1_02.html 화면 왼쪽과 위쪽으로 글과 그림 이동하는 효과

ex1_03.html 지정된 방향으로 끊임 없이 움직이는 글과 그림

ex1_04.html 본문과 배경 그림 사이로 흐르는 그림과 글

ex1_05.html 본문 위로 폭포처럼 떨어지는 문장과 그림

ex1_06.html 화면을 떠다니는 그림과 글

ex1_07.html 크기가 변하면서 회전하는 글씨

ex1_08.html 마우스 커서 따라 다니는 문장

ex1_09.html 원하는 문장을 무지개빛으로 표시하기

ex1_10.html 마우스 가져가면 글월 상자에 설명 보여주기

ex1_11.html 자동으로 입력란에 커서 이동시키기

ex1_12.html 입력 양식에서 입력란 색 바꾸기

ex1_13.html 자료 입력 시 자동으로 다음 입력란으로 이동하기

ex1_14.html 제목 막대에 움직이는 문장 표시하기

ex1_15.html 제목 막대에 여러 개의 문장을 돌아가며 표시하기

ex1_16.html 상태 표시선에 여러 개의 문장을 돌아가며 표시하기

ex1_17.html 상태 표시선에 깜박이는 문장 표시하기

ex1_18.html 제목 막대에 깜박이는 문장 표시하기

ex1_19.html 상태 표시선이나 제목 막대에 타자 기법으로 여러 문장 돌아가면서 표시하기

ex1_20.html 상태 표시선이나 제목 막대에 왼쪽으로 이동하는 문장 표시하기

ex1_21.html 색깔이 한 글자씩 점차 바뀌는 문장 반복하기

ex1_22.html 점차 나타났다 사라지며 위로 스크롤되는 문장

ex1_23.html 일정 시간마다 위로 올라가는 문단

ex1_24.html 춤추는 글자

ex1_25.html 마우스 대면 표색깔 서서히 바꾸기

ex2_01.html 눈이 땅으로 떨어지는 효과

ex2_02.html 꽃이나 낙엽이 땅으로 떨어지는 효과

ex2_03.html 오른쪽 밑에 항상 따라다니는 그림

ex2_04.html 문서 첫 줄로 가기 아이콘 만들기

ex2_05.html 메뉴에서 선택한 그림 보여주기

ex2_06.html 이전 그림, 다음 그림 보여주기, 그림에 링크된 곳 이동하기

ex2_07.html 링크된 그림이나 문장의 점선 없애기

ex2_08.html 링크된 그림을 계속해서 돌아가면서 보여주기

ex2_09.html 링크된 그림을 무작위로 선택해 표시하기

ex2_10.html 마우스 커서 따라다니는 꽃잎이나 기타 그림들

ex2_11.html 그림이 점차 커지는 효과

ex2_12.html 그림이 점차 커졌다 작아졌다 반복하기

ex2_13.html 두 개의 그림이 겹치면서(오버랩) 바뀌기

ex2_14.html 커튼 형식으로 그림을 바꾸어 표시하기

ex2_15.html 조각난 그림이 모여서 하나로 표시되는 기법

ex3_01.html 문서를 열 때마다 전혀 다른 문서처럼 보이게 하기

ex3_02.html 위에서 갑자기 떨어지는 창 열기 효과

ex3_03.html 위에서 갑자기 떨어진 다음에 진동하는 창

ex3_04.html 일정 시간이 지나면 현재의 창을 닫거나 특정 작업 수행하기

ex4_01.html 간단한 풀다운 메뉴

ex4_02.html 메뉴에서 선택한 항목의 설명 보여주기

ex4_03.html 트리 구조의 메뉴 만들기

ex4_04.html 롤오버 기법의 표 메뉴(마우스 가져가면 색깔 바뀌는 표 메뉴)

ex4_05.html 원하는 곳에 이동시킬 수 있는 메뉴

ex5_01.html 만년 달력 프로그램: 이달 달력 보기

ex5_02.html 만년 달력 프로그램: 원하는 연도 일년 달력 보기

ex5_03.html 상태 표시선에 날짜와 시계 표시하기

ex5_04.html 제목 막대(title bar)에 문서 제목과 시계 표시

ex5_05.html 쿠키를 이용하여 방문 회수와 인사말 보여주기

ex5_06.html 접속자의 방문 시간 보여주는 시계

ex5_07.html 접속자의 로그인, 로그 아웃 시각 표시하기

ex5_08.html 지정된 시간 동안 카운트다운 하기

ex5_09.html 마우스 커서 따라다니는 수직 수평선

ex5_10.html 브라우저 창 안에서 돌아다니는 그림

ex5_11.html 마우스 따라다니는 별똥별

ex5_12.html 클릭하면 꽃잎이 흩날리는 효과

ex5_13.html 별이 화면 왼쪽으로 날아가는 효과

ex5_14.html 일정 시간마다 글자 색 바꾸기

ex5_15.html 글씨의 명암이 변하는 효과(fade in 효과)

ex5_16.html 필터를 이용한 페이드인 효과

ex5_17.html 마우스 가져가면 흑백 사진으로 표시하기

ex5_18.html 흑백 사진에 마우스 가져가면 컬러 사진으로 표시하기

ex5_19.html 텍스트 영역에 배경 그림 넣기

ex5_20.html 버튼 배경색 글씨색 변경하기, 버튼 안에 그림 넣기

ex5_21.html 링크 문장에 두 줄 만들기

ex6_01.html 국내 도메인 검색 프로그램

ex6_02.html 국제 도메인 검색 프로그램

ex6_03.html whois 서버 선택, 국제 도메인 검색 프로그램

ex6_04.html 즐겨찾기에 추가하는 방법

ex6_05.html 마우스의 오른쪽 단추 메뉴 사용 못하게 만들기

ex6_06.html 그림 저장 못하게 만들기

ex6_07.html 소스 못보게 한 문서의 소스 파일 보기

ex6_08.html 자신의 홈페이지를 접속자의 홈페이지(시작페이지)로 만들기

ex6_09.html 마우스 오른쪽 단추 기능 무용지물로 만들기

ex6_10.html 태그 연습장 만들기

ex7_01.html 글월 상자 영역의 위아래 스크롤 기능

ex7_02.html 특정 영역을 상하좌우로 스크롤하기

ex7_03.html 일정 시간마다 페이드인 효과를 주면서 표시되는 글

ex7_04.html 스크롤을 해도 항상 화면 아래에 표시되는 글

ex7_05.html 상태 표시선에 타이핑 효과를 주고 이동하는 글자

ex7_06.html 글자가 한 자씩 왼쪽으로 이동해 붙는 효과

ex7_07.html 일정 시간마다 스크롤되는 그림

ex7_08.html 화면에 무작위로 나타나는 그림

ex7_09.html 밖에서 안으로 드러나는 창 열기

ex7_10.html 타일 조각을 제거하면서 창 열기

ex7_11.html 띠 모양이 좌우로 교차하며 창 열기

ex7_12.html 띠 모양이 상하로 교차하며 창 열기

ex7_13.html 문서 열 때 페이드아웃 효과 주기

ex7_14.html 마우스 가져가면 감춘 메뉴 꺼내기

ex7_15.html 텍스트로만 만든 동그란 바늘 시계