분류 전체보기
-
[JSP강의노트] 무료 템플릿을 활용한 게시판 디자인하기2009.09.29
-
[JavaScript강의노트] 제0강 강의노트를 시작하며2009.09.29
-
[HTML&CSS강의노트] 달력 만들기 예제2009.09.28
-
[연습문제02] 기간 계산 문제2009.09.24
[JSP강의노트] 무료 템플릿을 활용한 게시판 디자인하기
board_design.zip[JavaScript강의노트] 제0강 강의노트를 시작하며
강의노트를 시작하기에 앞서
1. 들어가면서
최근에 웹 개발에서 가장 큰 이슈를 들라면 당연 AJAX가 아닌가 싶다. AJAX는 Jesse James Garret의 'Ajax: A New Approach to Web Application'에서 처음 사용했다고 알려져있다. 이 글에 의하면 AJAX는 다음과 같은 기술들의 집합이다.
- XHTML과 CSS를 이용한 표준에 근거한 표현
- DOM;Document Object Model을 이용한 동적인 화면 제공과 상호 작용
- XML과 XSLT를 이용한 데이터 변환 및 제어
- XMLHttpRequest를 이용한 비동기 데이터 송수신
- 이 모든 기술들을 JavaScript로 조합
본 강의노트는 AJAX와 같은 기술을 다루려고 하는 것이 아니지만 JavaScript의 미래를 보여 주기에는 부족함 없는 실례가 될 것 같아 간단하게 소개하였다. JavaScript는 원래 네스케이스사의 웹브라우저의 스크립트 언어로 채택되었으며 이 웹브라우저가 시장 주도적인 위치를 차지하자 같은 회사의 웹 어플리케이션 서버의 서버측 스크립트 언어로 채택되기도 하였다. 초기 개발 당시의 이름은 'LiveScript'였으며 후에 Java언어의 개발사인 Sun의 양해하에 JavaScript라는 이름으로 대중에게 알려지게 되었다. 이렇듯 자바스크립트는 자바와는 태생부터가 다르고 문법도 상당 부분 다르지만 자바라는 이름을 갖고 있어 마치 자바언어의 한 계열인냥 오해를 불러일으키곤 했다. 현재는 ECMA라는 기관에 의해 국제표준으로 승인받아 ECMAScript라는 좀 더 표준적인 이름을 가지고 있으며 마이크로소프트에서는 JScript라는 이름의 거의 똑같은 호환 언어를 제공하고 있다.
2. 학습 계획
자바스크립트 언어의 학습은 다른 언어에 비해 임시적으로 진행되어 왔으며 최근에 이르러서야 기본 문법에 대한 중요성이 인식되어 체계가 세워지고 있다. 자바스크립트를 다뤄왔던 책들을 봐도 이를 반영하고 있는데 초기의 자바스크립트 책들은 주로 레시피 형식을 띄었으며 HTML의 보조적인 역할에 국한되었으나, 최근에 발행되는 자바스크립트 관련 서적들은 자바스크립트의 기본 문법을 코어(core)라는 부분으로 다루고, 이전에는 크게 다루지 않거나 거의 다루지 않았던, 객체와 배열, 고급 함수 기법, 클래스를 구현하기 위한 생성자와 프로토타입, 정규표현식, BOM;Browser Object Model, DOM;Document Object Model, 이벤트 모델, CSS를 이용한 동적 문서의 작성등 깊이 있는 주제들을 다루고 있다. 이는 AJAX와 같은 기술에 자바스크립트가 기반 언어로 사용되면서 체계적이고 깊이있는 내용의 학습이 필요해졌기 때문인 것으로 판단된다.
본 강의노트는 이러한 추세를 반영하여 다음과 같은 순서로 강의를 진행하고자 한다.
- 문장 구조 : 리터럴, 식별자, 코드 작성법 등
- 타입과 값
- 변수의 선언과 유효 범위
- 연산자
- 조건문
- 반복문
- 기타 제어문
- 배열와 연관배열
- 함수
- 객체
- 정규 표현식
- 웹 브라우저의 제어
- 폼 요소의 활용
- 이벤트의 처리
- CSS의 제어
- 문서 객체 모델
- 함수 고급 활용
- 생성자와 프로토타입을 활용한 클래스 만들기
강의 순서나 분량은 수업 일정에 맞추어 추가되거나 요약될 수 있음을 밝힌다. 아무쪼록 이 강의노트를 통해 개발자에게 강력한 능력을 제공하는 자바스크립트의 유연함을 맛보는 기회가 되기 바라며 강의 서론을 마칠까 한다. - 정샘.
[HTML&CSS강의노트] 달력 만들기 예제
<html>
<head>
<title>10월</title>
<style type="text/css">
th, td {
width: 100px;
border: solid 1px;
}
th {
height: 40px;
color: #fff;
background: #AF0A0A url('images/a1.gif') top right no-repeat;
}
td {
height: 80px;
text-align: center;
background: url('images/a2.gif') top left repeat-x;
}
td a:link, td a:active, td a:vlink {
text-decoration: none;
color: #000;
}
td a:hover {
width: 90px;
height: 70px;
background: #AF0A0A url('images/a4.gif') bottom left repeat-x;
color: #fff;
}
</style>
</head>
<body>
<table>
<caption>10월 달력</caption>
<thead>
<tr>
<th>일</th><th>월</th><th>화</th><th>수</th><th>목</th><th>금</th><th>토</th>
</tr>
</thead>
<tbody>
<tr>
<td> </td><td> </td><td> </td><td> </td><td><a href="#">1</a></td><td><a href="#">2</a></td><td><a href="#">3</a></td>
</tr>
<tr>
<td><a href="#">4</a></td><td><a href="#">5</a></td><td><a href="#">6</a></td><td><a href="#">7</a></td><td><a href="#">8</a></td><td><a href="#">9</a></td><td><a href="#">10</a></td>
</tr>
<tr>
<td><a href="#">11</a></td><td><a href="#">12</a></td><td><a href="#">13</a></td><td><a href="#">14</a></td><td><a href="#">15</a></td><td><a href="#">16</a></td><td><a href="#">17</a></td>
</tr>
<tr>
<td><a href="#">18</a></td><td><a href="#">19</a></td><td><a href="#">20</a></td><td><a href="#">21</a></td><td><a href="#">22</a></td><td><a href="#">23</a></td><td><a href="#">24</a></td>
</tr>
<tr>
<td><a href="#">25</a></td><td><a href="#">26</a></td><td><a href="#">27</a></td><td><a href="#">28</a></td><td><a href="#">29</a></td><td><a href="#">30</a></td><td><a href="#">31</a></td>
</tr>
</tbody>
</table>
</body>
</html>[연습문제02] 기간 계산 문제
Q. DATETIME 형식으로 저장된 필드의 값을 읽어서 ○년전, ○달전, ○시간전,○분전으로 출력하세요. (SELECT문을 사용)
A. 아래를 마우스로 끌어보세요. 답을 확인하기 전에 여러가지 모범답안을 기대하겠습니다. 댓글로 달아주세요.
WHEN MONTH(NOW()) - MONTH(d) > 0 THEN CONCAT(CAST(MONTH(NOW()) - MONTH(d) AS CHAR), '달전')
WHEN DAY(NOW()) - DAY(d) > 0 THEN CONCAT(CAST(DAY(NOW()) - DAY(d) AS CHAR), '일전')
WHEN HOUR(NOW()) - HOUR(d) > 0 THEN CONCAT(CAST(HOUR(NOW()) - HOUR(d) AS CHAR), '시간전')
ELSE CONCAT(CAST(MINUTE(NOW()) - MINUTE(d) AS CHAR), '분전')
END
FROM q1 ORDER BY d DESC;
[연습문제01] 날짜 변환 문제
문제> DATETIME 타입으로 저장된 필드값을 읽어들여서 오늘 날짜의 경우 시간(HH시 MM분) 형식으로 출력하고 이전 날짜의 경우 날짜(MM월 DD일) 형식으로 출력하세요.
(조건: SELECT문으로 출력)
풀이>
다음과 같이 데이터를 준비합니다.
CREATE TABLE q1 (d DATETIME) ENGINE MyISAM;
INSERT INTO q1 VALUES (SYSDATE());
INSERT INTO q1 VALUES (DATE_SUB(NOW(), INTERVAL 1 DAY));
답>
아래 부분을 마우스로 끌어보세요. 이 밖에도 다양한 답을 기대하겠습니다.SELECT IF(PERIOD_DIFF(DATE(NOW()), DATE(d)) <= 0, DATE_FORMAT(d, '%H시 %i분'), DATE_FORMAT(d, '%m월 %d일')) AS `갱신시간` FROM q1 ORDER BY d DESC;