PSE's blog

[JavaScript] STUDY 17 - 키보드 이벤트 & 입력 양식 이벤트

1. 키보드 이벤트 ● 키보드 이벤트 발생 순서 사용자가 키보드를 누름 keydown 이벤트 발생 글자 입력 keypress 이벤트 발생 사용자가 키보드에서 뗌 keyup 이벤트 발생 2. 키보드 이벤트 객체의 속성 ※ keyCode 목록 key keyCode key keyCode key keyCode 0 48 Backspace 8 Space 32 1 49 Tab 9 Page Up 33 2 50 Enter 13 Page Down 34 8 56 Shift 16 End 35 9 57 Control 17 Home 36 a 65 Alt 18 Arrow Left 37 s 66 Pause/Break 19 Arrow Up 38 y 89 Caps Lock 20 Arrow Right 39 z 90 ESC 27 Arrow..

[JavaScript] PRACTICE 6 - "인기 검색어" + 마우스 포인터 효과

연습문제 : 다음과 같은 동작을 HTML 문서와 JavaScript 프로그램을 작성하라. 네이버 첫 화면의 "인기 검색어"와 비슷하게 여러 항목 중 한 항목만 특정 영역에 나오는 HTML 문서의 작성 여러 항목들이 특정 영역에 순차적으로 돌아가는 JavaScript 프로그램 마우스 포인터가 롤링 영역에 올라갈 경우 정지 마우스 포인터가 롤링 영역에서 빠져 나가면 다시 동작 1 Time is gold 2 No sweat, no sweet 3 Asking costs nothing 4 Step by step goes a long way 5 You will never know until you try

[JavaScript] STUDY 16 - 이벤트 객체의 속성 & 마우스 이벤트

1. 이벤트 객체의 속성 2. 마우스 이벤트 3. 마우스 이벤트 객체의 속성

[JavaScript] PRACTICE 5 - 사이드바 메뉴 만들기

연습문제 : 메뉴 아이콘을 클릭했을 때 사이드바 메뉴가 화면 왼쪽에서 나타나도록 하는 JavaScript 프로그램을 작성하라. ① 닫기 버튼을 눌렀을 때 사이드바 메뉴가 사라지는 Version Menu Close ② 메뉴 버튼을 다시 눌렀을 때 사이드바 메뉴가 사라지는 Version Menu

[JavaScript] PRACTICE 4 - 드롭다운 메뉴바 만들기

연습문제 : 메뉴바에서 메뉴 항목을 클릭했을 때 하위 메뉴가 드롭다운 메뉴 형식으로 나타나도록 하는 JavaScript 프로그램을 작성하라. 스타일 시트 스크립트 HTML One-True-Layout Home HTML Tutorial Reference Example FAQ CSS Tutorial Reference Example FAQ Javascript Tutorial Reference Example FAQ jQuery Tutorial Reference Example FAQ Login Sign Up Home HTML CSS Javascript jQuery Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas interd..

[JavaScript] STUDY 15 - window·객체 이벤트

1. window 객체의 load 이벤트 ● DOM 객체의 이벤트 속성 - DOM 객체의 속성 중 on으로 시작하는 속성을 이벤트 속성이라고 함 - 이러한 이벤트 속성에는 함수를 할당해 이벤트가 발생했을 때 자동으로 함수가 실행되도록 함 ● window 객체의 load 이벤트 - load 이벤트는 window 객체의 로드가 완료되면 발생 HTML 문서에 존재하는 모든 태그를 읽은 다음이나, 화면에 나오는 순간이 window 객체의 로드가 완료되는 시점 2. window 객체의 addEventListener 메서드 addEventListener - 윈도우에 이벤트 핸들러 연결 document . addEventListener( event, function, [useCapture] ) 3. 윈도우·객체 이벤..

[JavaScript] PRACTICE 3 - 썸네일 이미지 만들기

연습문제 3) : 아래에 나온 썸네일 이미지를 클릭하면, 위에 나온 큰 사진을 클릭한 썸네일 사진으로 바꾸도록 하는 JavaScript 프로그램을 작성하라. JavaScript 프로그램을 위와 같이 작성했을 때 콘솔창에 오류가 뜨면서 실행이 되지 않는 이유는? 자바스크립트에서 함수는 기능이고 값이다. 그러므로 호출하기 이전에는 단순한 문장에 지나지 않는다. 앞의 이벤트 핸들러는 클릭했을 때야 비로소 함수가 호출이 되면서 그 기능이 작동하므로 함수를 클릭했을 때는 이미 for 반복문이 끝났으므로 이벤트 핸들러 안의 thumbnail[i]의 i는 3의 값이 대입된다. thumbnail[3]은 li 요소의 4번째 요소를 가리키는데 4번째 요소는 존재하지 않으므로 콘솔창에 오류가 뜬다. 그렇다면 만약 변수 i를..

[JavaScript] STUDY 14 - JavaScript 이벤트

1. JavaScript 이벤트 2. 이벤트 관련 용어 3. 이벤트 전달 4. 표준 이벤트 모델 5. 기본 이벤트 1. JavaScript 이벤트 1) 이벤트(Event) - 웹 페이지에서는 어떤 종류의 상호작용이 발생할 때 이벤트 발생 사용자에 의한 상호작용 : 클릭하거나 특정 요소 위로 마우스를 가져가거나 특정한 키를 누르는 것 등 브라우저에 의한 상호작용 : 웹 페이지의 로딩이 끝났다거나, 사용자가 페이지를 스크롤 하거나, 브라우저 창의 크기를 조절하는 것 등 - JavaScript를 통해 특정 객체에 이벤트가 일어나는 것을 감지할 수 있으며 그러한 이벤트들에 대응해서 어떤 일을 할 지 설정할 수 있다. 2) 이벤트 객체(event object) - 이벤트가 발생했을 때 이벤트에 대한 정보와 기능을..

[JavaScript] PRACTICE 2 - 롤링 효과가 추가된 "인기 검색어(news ticker)" 만들기

연습문제 2 다음과 같은 동작은 HTML 문서와 JavaScript 프로그램을 작성하라. 네이버 첫 화면의 "인기 검색어"와 비슷하게 여러 항목 중 한 항목만 특정 영역에 나오는 HTML 문서 작성 여러 항목들이 특정 영역에 순차적으로 돌아가면서 나오도록 하는 JavaScript 프로그램 작성 transition 스타일 속성을 사용해 부드럽게 움직이도록 작성 1Time is gold 2No sweat, no sweet 3Asking costs nothing 4Step by step goes a long way 5You will never know until you try

[JavaScript] PRACTICE 1 - "인기 검색어" 만들기

연습문제 1) : 다음과 같은 동작을 HTML 문서와 JavaScript 프로그램을 작성하라. 네이버 첫 화면의 "인기 검색어"와 비슷하게 여러 항목 중 한 항목만 특정 영역에 나오는 HTML 문서의 작성 여러 항목들이 특정 영역에 순차적으로 돌아가면서 나오도록 하는 JavaScript 프로그램의 작성 1Time is gold 2No sweat, no sweet 3Asking costs nothing 4Step by step goes a long way 5You will never know until you try