(x)html 관련된 팁을 공유하는 공간입니다.
  • 웹미니 한줄 전광판 영역 입니다.
글 수 66

13

조회 수 : 5433 신고 : 0

작성자 : title: [ani]보라색 나비바비인형
포인트 : 19927 | 레벨 : 14
미리보기 :  
오늘은 3일차에서 배운 if 좀더 할게요
if가 중첩되서 쓰일때,

먼저 예를 들어 볼게요,

1.다음, 2.네이버, 3.하이바비닷컴, 4.빽짱구닷컴
이라고 제시를 해주고 사용자가 번호를 누르면,
해당 사이트가 열리게 해보겠습니다.

x=prompt("1.다음,  2.네이버, 3.하이바비닷컴, 4.빽짱구닷컴","")
// 사용자에게서 번호를 입력 받습니다.

    if (x>0 && x<5){ // 만약 x(사용자가 입력받은값)가 0보다 크고 5보다작으면이라고 범위를 지정해 줍니다.

    if (x==1){ // 만약 x(사용자가 입력받은값)가 1과 같으면

        y="http://www.daum.net" // http://www.daum.net을 y값에 넣어라

  else if (x==2) // x가 2와 같으면

        y="http://www.naver.com" // y값에 네이버를

  else if (x==3) // x가 3과 같으면

        y="http://www.hibarbie.com" // y값에 하이바비닷컴을

else // 그렇지 않으면

y="http://www.backzzanggu.com" // y값에 빽짱구닷컴을 넣어라

window.open(y)} // y값에 해당되는 사이트를 새창으로 열어라

else // 위의 조건에 만족하지 않으면

      document.write("해당 사이트를 찾을수 없습니다.") // 해당 사이트를 찾을수 없습니다. 라는 문구를 출력해라 라는 겁니다.

처음 if 썼을때 { }로 묶어주시는거 잊지 마시구요.
그담줄 두번째 if에도 { }로 묶어주시는거 꼭 잊지 마세요..



────────────────────────────────────



switch에 대해서 알아봅시다.
switch-case문은 여러개의 조건이 있고, 각 조건에 따라 실행되어야 하는 자바스크립트 코드가 달라지는 경우에 사용됩니다.
if(조건) 는 if 다음에는 범위를 잡아주는 조건을 걸어주고
switch(변수) 써준다. 형식은 case 값: 실행문; break; 값은 무조건 동일해야 합니다.

간단한 예제를 들어 봅시다.

월을 입력하면 해당되는 월이 몇일까지 있는지 나오게 해봅시다.

var month=prompt("당신이 원하는 월을 입력해 주세요.",""), day=0;
// var이 변수 선언한다고 하는거 아시죠? month라는 변수 선언해주고 그값은 사용자에게 값을 입력 받습니다. 그리고 초기값을 day라는 변수안에 0으로 잡아줍니다.

  switch(month){  // 위에 switch옆에 변수라고 쓴다고 알려줬죠?

    case "1": case "3": case "5": case "8": case "10": case "12":
// 같은거는 케이스로 묶어 줍니다.
  1번 3번 5번 8번 10번 12번은

        day=31; // day값이 31일까지 있으니 31일이죠
        break; // 끝났으면 bareak로 끝내줍니다. 마무리는 ; 으로 닫아줍니다. 밑에도 같은 형식이구요

    case "4": case "6": case "9": case "11":
        day=30; // day값은 30일까지 있으니 30으로 지정해주시고
        break; // 역시 끝마무리 해주시고
                
    case "2":
       day=28;
       break;
      
default: ; // 저위에 값을 만족하지 않으면 if문의 else와 같은거예요
        }

document.write(month+"월은 "+day+"일 입니다.");
// month(사용자가 입력한 값이죠?)월은 day(일수)일 입니다. 라는 문구를 출력하게 하는 문장입니다.

간단하게 스위치에 대해서 알아봤습니다.


───────────────────────────────────

for문은 반복문을 사용할때 마니 씁니다. 형식은 아래와 같습니다.
for(초기값;최종값;증감식)
초기값 뒤에는 변수(i, j, k..., 주로 i와 j값을 마니 씁니다.)=값(0,1)  
최종값: ~까지, 관계연산자(참,거짓)
증감식: ++(+1), --(-1)
이런식으로 옵니다.

for문도 간단한 예제를 들어 볼게요 (넘 어렵네요 여기서부터)

1부터 100까지 숫자를 찍어보겠습니다.

for(i=1; i <=100; i++){
// i값을 초기에 1로 잡아주고 i값이 100보다 작거나 같을때, i값을 +1을 해라
      document.write(i+" ")
// i값과 공백문자를 찍어주어라
   } //마무리

이렇게까지 하시면 쭈~욱 1~100까지 숫자가 한줄로 쭉 나옵니다.
이거를 10단위로 끊어서 다음줄로 내려가게 해봅시다.

if(i%10==0) // 만약 i값을 10으로 나눈 나머지가 0과 같을경우에
       document.write("<br>") // (br태그) 다음줄로 내려가라는 명령을 실행시킵니다. 즉,

for(i=1; i <=100; i++){

        document.write(i+" ")

if(i%10==0)
        
    document.write("<br>")
}

이렇게 되는거지요 결과값은

1 2 3 4 5 6 7 8 9 10
11 12 13 14 15 16 17 18 19 20
21 22 23 24 25 26 27 28 29 30
31 32 33 34 35 36 37 38 39 40
41 42 43 44 45 46 47 48 49 50
51 52 53 54 55 56 57 58 59 60
61 62 63 64 65 66 67 68 69 70
71 72 73 74 75 76 77 78 79 80
81 82 83 84 85 86 87 88 89 90
91 92 93 94 95 96 97 98 99 100  이렇게 나옵니다..

수고하셨습니다.
소중한 댓글 부탁드립니다.
추천수 10단위당 메달이 1개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시 BEST 아이콘이 붙게됩니다.
추천수에 따른 배경색 보기 본문으로 바로가기
  • 추천수 50개이상
  • 추천수 30개이상
  • 추천수 20개이상
  • 추천수 10개이상
  • 추천수 3개이상
닫기

댓글 '1'

profile
title: [ani]깜빡이는 표정빽짱구 (14381)

2005.04.13 01:52:15

오늘은 무쟈게 기네.. 수고했또. 따라해봐야것다..
List of Articles
번호 제목 글쓴이 날짜 추천 수 조회 수sort
공지 모바일 코딩하시는 분들 참고하세요. title: [ani]깜빡이는 표정빽짱구 2014-05-07   2639
46 인라인 요소에 맞는 코딩 title: [ani]깜빡이는 표정빽짱구 2009-02-17   8457
45 찾아보기 버튼모양 바꾸기 이병준 2010-05-27   7840
44 best of best css로 폼태그 사용시 공백없애기 title: [ani]깜빡이는 표정빽짱구 2006-03-28 56 7691
43 셀렉트박스 (selectbox) 세로크기 file title: [ani]깜빡이는 표정빽짱구 2011-05-12   7516
42 best of best 다국어 html 코딩 title: [ani]깜빡이는 표정빽짱구 2006-03-31 46 7299
41 이미지 마우스 오버시 아이콘뜨는거 없애기 title: [ani]깜빡이는 표정빽짱구 2006-05-28 19 7218
40 textarea 속에 내용넣기 (마우스 클릭시 사라짐) title: [ani]깜빡이는 표정빽짱구 2006-01-30 6 6901
39 자바스크립트 6일차 For문 [1] title: [ani]보라색 나비바비인형 2005-04-13 13 6472
38 모바일 코딩시 손가락으로 확대/축소 가능하게 할려면? title: [ani]깜빡이는 표정빽짱구 2012-08-06   6416
37 페이지 넘기기 부드럽게 [12] 아트리147 2009-10-31   6370
36 자바스크립트 2일차 var(변수) title: [ani]보라색 나비바비인형 2005-04-09 13 6342
35 유용한 HTML 태그 레퍼런스 사이트 [1] bumphy 2009-10-29   6161
34 랜덤으로 바뀌는 이미지 title: [ani]깜빡이는 표정빽짱구 2006-03-08 8 5822
33 브라우저 리셋 CSS [2] 이병준 2010-05-27 1 5816
32 글자 중간에 선을 그어주는 del 태그 [1] title: [ani]깜빡이는 표정빽짱구 2011-07-13   5803
31 정규식 실시간 웹테스터 입니다 컴센스 2010-05-27   5535
30 best of best 아이프레임시 뒷배경 투명처리및 불투명처리 title: [ani]깜빡이는 표정빽짱구 2004-02-28 20 5516
29 자바스크립트 5일차 if 중첩과 switch과 for문 [1] title: [ani]보라색 나비바비인형 2005-04-13 13 5433
28 이미지 없이 점선테이블로 만들기 title: [ani]깜빡이는 표정빽짱구 2006-01-07 6 5390
27 스크립트 한 줄로 IE6 죽이기 [2] 이병준 2010-05-27   5354