전일에 이어 <script>문 작성
*) if 문 : 만약에 ~ 하다면...
범위의 조건을 설정하여 조건이 참이면 실행, 거짓일 땐 else구문을 실행한다.
연산식(A=500/2같은)에서는 아닌 경우도 있지만(오른쪽 먼저계산)
기본적으로 코드 작성의 순차는 위에서 아래, 왼쪽에서 오른쪽이다.
허나 if문에서는 상황에 따라 왔다 갔다 하는 속성을 가진다고 볼 수 있겠다.
*-I) if 문의 학점 구하기 : 결과값이 참이어도 다음 문구를 반복 실행한다
<script>
jum=prompt("점수를 입력하세요(0~100점 사이의 값",""); // 사용자로부터 숫자 입력받음
// 입력받을 숫자의 범위 설정 ▽
if(jum<0 || jum>100) // ←범위를 벗어난 경우
// if(!(jum>=0 && jum<=100)) ← 앞에 not이 붙어 있으므로 범위를 벗어난 경우
// if(jum>=0 && jum<=100) ←정상범위
// ||는 둘중 하나 &&는 둘다 실행, ||가 실행 속도면에서 유리
{
alert(jum+"(은)는 점수의 범위를 벗어났습니다.");
}
// 정상적인 범위의 값이 들어온 경우 ▽
else{
if(jum>=90){ // 만약 95 입력시
document.write(jum+" = A학점: 고생많았네"); // true: 결과 출력
}
if(jum>=80 && jum<90){
document.write(jum+" = B학점: 나름했군"); // 별개의 문장이므로 결과 나왔지만 비교
}
if(jum>=70 && jum<80){
document.write(jum+" = C학점: 잤나?"); // 또 비교
}
if(jum>=60 && jum<70){
document.write(jum+" = D학점: 잤군"); // 또
}
if(jum<60){
document.write(jum+" = F학점: 나가"); // 또;; 비효율적이다. 그래서 나온것이 else if
}
</script>
*-II) if else문을 이용한 학점구하기: if문의 결과가 참이면 종료 거짓일때 else if 실행
<script>
jum=prompt("점수를 입력하세요(0~100점 사이의 값",""); // 사용자로부터 숫자 입력받음
// 입력받을 숫자의 범위 설정 ▽
if(jum<0 || jum>100) // ←범위를 벗어난 경우
// if(!(jum>=0 && jum<=100)) ← 앞에 not이 붙어 있으므로 범위를 벗어난 경우
// if(jum>=0 && jum<=100) ←정상범위
// ||는 둘중 하나 &&는 둘다 실행, ||가 실행 속도면에서 유리
{
alert(jum+"(은)는 점수의 범위를 벗어났습니다.");
}
// 정상적인 범위의 값이 들어온 경우 ▽
if(jum>=90){ // A학점
document.write(jum+" = A학점: 고생많았네"); // 참이면 여기서 else{} 끝으로 이동: 끝 거짓은 다음으로
}else if(jum>=80){
document.write(jum+" = B학점: 나름했군");
}else if(jum>=70){
document.write(jum+" = C학점: 잤나?");
}else if(jum>=60){
document.write(jum+" = D학점: 잤군");
}else{
document.write(jum+" = F학점: 나가");
} // 참이 나오면 끝. 안나오면 else{}안의 실행
// → → → → → → → → → → → → → → → → → → → 참을 만족할 때 여기로 와서 끝남
</script>
# 결과(*) (*-I과 *-II 결과는 동일)
**) switch문의 구조
<script>
s="su" // 조건
switch(s){ // (변수or상수)에 있는 값과
case "월":document.write("<img src='aaa.jpg'>");
// case "상수": 에 있는 값이 같으면 해당case의 :다음을 출력한다.
// 조건이 맞는것이 없을땐(default가 없다는 전제로 그냥 종료)
break; // case가 반복일때 멈춤
case "5":documnet.write(10*10);
break; // break가 없다면 다음 case까지 연속으로 실행된다
case "su":document.write(s+"요일"); //su요일
break;
default:document.write("잘못들어온 값"); // case에 해당값이 없다면 :다음을 출력,필요 없으면 생략해도 됨
}
</script>
**-I) switch문을 이용한 학점 구하기
⊙ 특정 수를 정수화시키는 method : parseInt
ex) document.write(parseInt(95/10)); → 9
<script>
jum=prompt("점수를 입력하세요(0~100점 사이의 값",""); // 사용자로부터 숫자 입력받음
// 입력받을 숫자의 범위 설정 ▽
if(jum<0 || jum>100) // ←범위를 벗어난 경우
// if(!(jum>=0 && jum<=100)) ← 앞에 not이 붙어 있으므로 범위를 벗어난 경우
// if(jum>=0 && jum<=100) ←정상범위
// ||는 둘중 하나 &&는 둘다 실행, ||가 실행 속도면에서 유리
{
alert(jum+"(은)는 점수의 범위를 벗어났습니다.");
}
// if 문을 사용할때와 아래 목적은 같다. (학점 출력)
switch (parseInt(jum/10)) // 입력받은 jum의 값을 10으로 나눈 몫
{
case 10:
case 9:hak="A학점: 고생했네";break
// △ 몫이 10 또는 9일 때의 hak의 변수선언 동시에 따옴표안의 내용이 변수에 저장?
// 좀더 쉬운말이 생각이 나지 않는다.. 아래도 같은 의미!?
case 8:hak="B학점: 나름했군";break
case 7:hak="C학점: 잤나?";break
case 6:hak="D학점: 잤군";break
default:hak="F학점: 나가";break
}
document.write(jum+" = "+hak);
}
</script>
# 결과 (**-1)
상단의 결과 (*)과 동일
**-II) switch문을 이용한 날짜 구하기
⊙ 아래 예제에서 볼 수 있는 method를 정리해볼까..
- 일단 method란? Javascript의 Object에 속해 있어 특별한 기능을 수행하는 함수
ex) Objectname.method() <--메소드 표현
Objectname.properties <--속성 표현
- new Date() : 이것도 메소드..? 인가? 여튼 시스템상의 날짜를 가져오는 역할을 한다
- get : 단어 뜻 그대로 앞에 붙은 변수명에 해당되는 객체에서 정보(?)를 가져오는 역할
- set : 앞에 붙은 변수명에 해당되는 객체의 값을 초기화 하는 역할
(예제를 더 봐야 알겠지만 아직 set에 대해 확실히 감이 안온다)
<script>
// 시스템의 날짜와 시간정보 얻어오기
date = new Date(); // 변수=생성 클래스(). 시스템의 날짜를 구하는 객체
y = date.getYear(); // date라는 객체 안에서 Year(년도)를 얻어내(get)라.
// get은method - 정보를 얻어내는 기능
// date.setYear(2012) : 객체의 년도만 2012년으로 셋팅해라.
m = date.getMonth()+1; // 월구하기: 0-1월 ~ 11-12월)
d = date.getDate(); // 일구하기
w = date.getDay(); // 요일구하기 : 0-일, 1-월, 2-화, 3-수, 4,-목, 5-금, 6-토
h = date.getHours(); // 시간 구하기
mm = date.getMinutes(); // 분 구하기
// 초 구하기 : s = date.getSeconds(); // 자바에서는 시/분/초 에 s가 없다.
// 현재 요일을 찾아 document.write로 현재 날짜 시분 출력
switch (w) // w= 0~6 (일~토)
{
case 0:wStr="일";break; // 자바스크립트에서는 명령문 안에서 (wStr같은) 변수선언 가능
case 1:wStr="월";break;
case 2:wStr="화";break;
case 3:wStr="수";break;
case 4:wStr="목";break;
case 5:wStr="금";break;
case 6:wStr="토";break;
}
document.write(y+"년 "+m+"월 "+d+"일 "+wStr+"요일 "+h+"시 "+mm+"분<br>")
// 여러 케이스에서 변수를 대체함으로 출력명령은 하나로도 가능
// 위와 같지만 요일에 해당되는 이미지 출력 (케이스별 출력)
switch (w)
{
case 0:document.write("<img src='../html/img/week/sun.jpg'>");
break;
case 1:document.write("<img src='../html/img/week/mon.jpg'>");
break;
case 2:document.write("<img src='../html/img/week/tue.jpg'>");
break;
case 3:document.write("<img src='../html/img/week/wed.jpg'>");
break;
case 4:document.write("<img src='../html/img/week/thu.jpg'>");
break;
case 5:document.write("<img src='../html/img/week/fri.jpg'>");
break;
case 6:document.write("<img src='../html/img/week/sat.jpg'>");
}
</script>
# 결과 (**-II)
△ 윈도우상의 날짜를 변경함으로 다른 이미지 출력가능
*** 반복문 for
⊙ for (초기값; 최종값(조건); 증가/감소)
(△ 본인의 생각일뿐; 설명이 잘못되었다면 지적바람)
<script>
img = "<img src=../html/img/blog_img.GIF>";
for ( cnt=1; cnt<=3; cnt++ ) // 자바 스크립트는 변수값으로 자동으로 형선언이 된다.
{
document.write(img);
}
document.write("<p>");
// 1~50까지 홀수 출력
for ( n=1; n<100; n+=2) // 초기값1에서 2씩 증가시켜 홀수 출력
{
document.write(n+" ");
}
document.write("<p>");
// 1~50까지 홀수 출력: table에 넣어서
document.write("<table border=1>");
document.write("<tr>");
for ( n=1; n<100; n+=2)
{
document.write("<td width=50 align=center>"+n+"</td>");// width는 브라우저크기에 맞춰짐
if((n+1)%10==0) document.write("</tr><tr>"); // 추가: if문으로 조건문, 행내리기..
} // (9+1)%10==0 이므로 9에서 다음줄로 넘어가는 방식
// 규칙(조건문)을 잘 찾아내는 능력 중요.
document.write("</tr></table>");
</script>
# 결과
***-I) for문 연습1: 숫자를 입력받아 구구단 출력
<script>
dan = prompt("숫자를 입력하세요","");
document.write("<table border=1>");
document.write("<caption>== "+dan+"단 ==</caption>");
for (d=1; d<10 ; d++)
{
if (d%2==0)
{
document.write("<tr bgcolor=#ffcc00>");
}
else {
document.write("<tr>");
}
document.write("<td align=center>"+dan+" * "+d+" = "+dan*d+"</td></tr>");
}
document.write("</table>");
</script>
# 결과 (***-I)
***-II) for문 연습2: 자바스크립트로 달력만들기
<script>
// 1. 조건 설정하기
now = new Date(); //오늘날짜와시간에 관한 정보
y = now.getYear(); //현재 연도
m = now.getMonth()+1; //현재 월 : 1월이 0으로 시작하여 +1
d = now.getDate();
w = now.getDay();
now.setDate(1); // 금일 날짜를 1일로 바꾼다
w = now.getDay(); // 1일에 대한 요일 구하기
// 그달의 마지막 날 구하기
// 현재 연도를 4로 나눈 값의 나머지가 0 이고
// 100으로 나눈 값의 나머지가 0
// 또는 현재 연도를 400으로 나눈 값의 나머지가 0 일 때
// 2월의 말일을 구할 수 있다? 라는 것 같다.
// y%4 == 0 && y%100 != 0 || y%400 == 0
// 위와 같이 입력되는게 정석일까?
switch(m){
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12: lDay=31; break;
case 2:
if (y%4 == 0) // 위에서 말한걸 간단히 적용
{
lDay=29; // 나머지가 0일때 말일은 29일
}
else {
lDay=28; // 나머지가 0이 아닐때 말일은 28일
}
break;
default : lDay = 30; // 4월은 항상 30일 이라던데...상식부족?!
}
document.write("<table border=1>");
document.write("<caption>"+y+"년 "+m+"월</caption>");
document.write("<tr><td><img src=../html/img/c.gif></td></tr>");
document.write("<tr><td>");
// 달력날짜 시작▽
document.write("<table width=100%>");
document.write("<tr><td>일<td>월<td>화<td>수<td>목<td>금<td>토</tr> <tr>");
for (space=1; space<=w; space++)
{
document.write("<td></td>") // 1일 출력전공백
}
// 날짜
cnt = w;
for (day=1; day<=lDay; day++)
{
document.write("<td>"+day+"</td>");
cnt++;
if (cnt==7)
{
document.write("</tr><tr>");
cnt=0;
}
}
document.write("</tr></table>");
// 달력날짜 △
document.write("</td></tr>");
document.write("</table>");
</script>
# 결과 (***-II)
※ 작성된 소스만 읽어보면 이해도 되고 재밌다 싶으면서도 직접 해보세요 하면..
할줄은 모르는 상태?
'Html/Jsp/Javascript' 카테고리의 다른 글
Html,Jsp,Css_06 (0) | 2011.10.17 |
---|---|
[Test] 회원가입 폼 만들기 (1) | 2011.10.16 |
Html,Jsp,Css_04 (0) | 2011.10.13 |
Html,Jsp,Css_03 (0) | 2011.10.12 |
Html_02 (0) | 2011.10.11 |