Presentation is loading. Please wait.

Presentation is loading. Please wait.

웹디자인 2016-1.

Similar presentations


Presentation on theme: "웹디자인 2016-1."— Presentation transcript:

1 웹디자인

2 웹디자인 2016-1 홈페이지 디자인의 필수 기술 자바스크립트 (Javascript) 제이쿼리 (jQuery)
HTML5 + CSS3 + JavaScript 자바스크립트 (Javascript) 동적인 웹페이지 디자인 제이쿼리 (jQuery) 자바스크립트 라이브러리

3 교재 모던 웹을 위한 JavaScript jQuery 입문, 윤인성, 한빛미디어, 2013

4 자바 스크립트 소개 자바스크립트(javascript): 동적인 웹 페이지를 작성하기 위 하여 사용되는 언어
웹의 표준 프로그래밍 언어 모든 웹브라우저들은 자바스크립트를 지원

5 HTML5 기술의 핵심

6 자바 vs 자바 스크립트

7 자바 스크립트 특징 인터프리터 언어 동적 타이핑(dynamic typing) 구조적 프로그래밍 지원 객체 기반
함수형 프로그래밍 지원 프로토타입-기반(prototype-based)

8 간단한 예제 <!DOCTYPE HTML> <html> <head>
<title> My First Javascript </title> </head> <body> <script> var now = new Date(); document.write(now); </script> </body> </html> 웹브라우저에서 실행

9 자바 스크립트의 용도 이벤트에 반응하는 동작을 구현 AJAX HTML 요소들의 크기나 색상을 동적으로 변경 게임이나 애니메이션
사용자가 입력한 값들을 검증

10 jQuery jQuery- 일종의 자바 스크립트 라이브러리
무료이다.

11 jQuery 문장의 구조 $(...) 안에 선택자를 넣어서 원하는 요소를 선택하고, 선 택된 요소에 대하여 여러 가지 조작을 한다. $(“p”).show() - 모든 <p> 요소들을 찾아서 화면에 표시한다. $(“.group1”).slideup() - class=group1인 요소를 슬라이드업 방식으로 표시한다. $(“#id9”).hide() - id=id9인 요소를 화면에서 감춘다.

12 AJAX 개요 AJAX(Asynchronous JavaScript and XML)는 서버와 데이 터를 교환하는 기술의 하나

13 AJAX의 동작 원리

14 웹디자인 성적 중간시험 (30%) 기말시험 (40%) 실습 (20%) 출석 (10%)


Download ppt "웹디자인 2016-1."

Similar presentations


Ads by Google