(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 자바스크립트 6일차 For문 [1] title: [ani]보라색 나비바비인형 2005-04-13 13 6472
45 자바스크립트 5일차 if 중첩과 switch과 for문 [1] title: [ani]보라색 나비바비인형 2005-04-13 13 5433
44 자바스크립트 2일차 var(변수) title: [ani]보라색 나비바비인형 2005-04-09 13 6342
43 아이프레임 title: [ani]깜빡이는 표정빽짱구 2004-02-17 12 3530
42 타이틀바 꾸미기2 [1] title: [ani]깜빡이는 표정빽짱구 2004-04-18 10 3793
41 움직이는 타이틀바 title: [ani]깜빡이는 표정빽짱구 2004-04-18 10 3973
40 랜덤으로 바뀌는 이미지 title: [ani]깜빡이는 표정빽짱구 2006-03-08 8 5822
39 hit th 태그와 td 태그의 차이점 [2] title: [ani]깜빡이는 표정빽짱구 2005-12-07 7 11507
38 textarea 속에 내용넣기 (마우스 클릭시 사라짐) title: [ani]깜빡이는 표정빽짱구 2006-01-30 6 6901
37 이미지 없이 점선테이블로 만들기 title: [ani]깜빡이는 표정빽짱구 2006-01-07 6 5390
36 풀스크린 띄우기 title: [ani]깜빡이는 표정빽짱구 2006-01-01 6 4751
35 HTML 문서의 공통 구조 title: [ani]깜빡이는 표정빽짱구 2006-03-23 5 4875
34 링크된곳 마우스 올렸을때 상태표시줄에 내용표시하기 title: [ani]깜빡이는 표정빽짱구 2006-03-12 5 5178
33 새창을 열면 현재창 닫히는소스 title: [ani]깜빡이는 표정빽짱구 2005-11-24 4 4575
32 브라우저 리셋 CSS [2] 이병준 2010-05-27 1 5816
31 반응형 캘린더 소스 [1] title: [ani]깜빡이는 표정빽짱구 2018-09-16   558
30 html 인라인요소와 블록요소 title: [ani]깜빡이는 표정빽짱구 2016-06-03   375
29 모바일 키패드 입력창 title: [ani]깜빡이는 표정빽짱구 2016-02-16   646
28 모바일 코딩시 확대 축소(가능, 불가능) title: [ani]깜빡이는 표정빽짱구 2014-07-21   1197
27 아이폰에서 숫자 사이즈 title: [ani]깜빡이는 표정빽짱구 2014-02-06   1916