본문 바로가기

Html/Jsp/Javascript

Html,Jsp,Css_05

전일에 이어 <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+"&nbsp;");
 }

 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