web/javascript

HeadFirst ch05

늉_늉 2021. 3. 21. 18:59

ch05코드

 

자바스크립트 코드  ch05 madango 코드 

 

mandango3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<title>Madango - THe </title>
<body onload="initSeats();">
    <div style="margin-top:75px; text-align:center">
      <img id="seat0" src="" alt="" />
      <img id="seat1" src="" alt="" />
      <img id="seat2" src="" alt="" />
      <img id="seat3" src="" alt="" />
      <img id="seat4" src="" alt="" />
      <img id="seat5" src="" alt="" />
      <img id="seat6" src="" alt="" />
      <img id="seat7" src="" alt="" />
      <img id="seat8" src="" alt="" /><br />
      <input type="button" id="findseat" value="Find Seat" onclick="findSeat();" />
    </div>

    <script type="text/javascript">
         var seats = [false, true, false, true, true, true, false, true, false];
         var selSeat = -1; //안팔림

         function initSeats(){
             for(var i =0; i<seats.length;i++){
                 if(seats[i]){
                     document.getElementById("seat"+i).src = "seat_avail.png";
                     document.getElementById("seat"+i).alt= "Available seat";
                 }else{
                     document.getElementById("seat"+i ).src ="seat_unavail.png";
                     document.getElementById("seat"+i ).alt="Unvailable seat";

                 }

             }
         }



         function findSeat(){

             if(selSeat >= 0){
                 selSeat =-1;
                 initSeats();
             }

             for(var i = 0; i<seats.length; i++){
                 if(seats[i] && seats[i+1] && seats[i+2]){
                    
                     selSeat = i;
                     document.getElementById("seat"+ i).src="seat_select.png";
                     document.getElementById("seat"+ i).alt ="Your seat";
                     document.getElementById("seat"+ (i+1)).src="seat_select.png";
                     document.getElementById("seat"+ (i+1)).alt ="Your seat";
                     document.getElementById("seat"+ (i+2)).src="seat_select.png";
                     document.getElementById("seat"+ (i+2)).alt ="Your seat";


                     var accept = confirm("Seats " + (i +1) + " through " + (i + 3) + " are available. Accept?");


                     if(accept){
                         break;
                     }
                     if(!accept){
                         selSeat = -1;
                         document.getElementById("seat"+ i).src="seat_avail.png";
                         document.getElementById("seat"+ i).alt="Available seat";
                         document.getElementById("seat"+ (i+1)).src="seat_avail.png";
                         document.getElementById("seat"+ (i+1)).alt="Available seat";
                         document.getElementById("seat"+ (i+2)).src="seat_avail.png";
                         document.getElementById("seat"+ (i+2)).alt="Available seat";
                     }
                 }
             }
         }
    </script>
    </body>
</html>

 

 

mandango4.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body onload="initSeats();">
    <div style="margin-top:75px; text-align:center">
      <img id="seat0" src="" alt="" />
      <img id="seat1" src="" alt="" />
      <img id="seat2" src="" alt="" />
      <img id="seat3" src="" alt="" />
      <img id="seat4" src="" alt="" />
      <img id="seat5" src="" alt="" />
      <img id="seat6" src="" alt="" />
      <img id="seat7" src="" alt="" />
      <img id="seat8" src="" alt="" /><br />
      <input type="button" id="findseat" value="Find Seat" onclick="findSeat();" />
    </div>
    <script>
        // var count = prompt("Enter a number greater than 0:","10");

        // if(count>0){
        //     while(count>0){
        //         alert("카운트 " + count);
        //         count--;

        //     }
        // }


        // if(count>0){
        //     var x = count;
        //     while(x >0 ){
        //         alert("Starting in ... " + x);
        //         x--;
        //     }

        //     alert("Roll film!")
        // }else{
        //     alert("The number wasn't greater than 0. No movie for you!");
        // }

        var seats = [false, true, false, true, true, true, false, true, false];
         var selSeat = -1; //안팔림

         function initSeats(){
             for(var i =0; i<seats.length;i++){
                 if(seats[i]){
                     document.getElementById("seat"+i).src = "seat_avail.png";
                     document.getElementById("seat"+i).alt= "Available seat";
                 }else{
                     document.getElementById("seat"+i ).src ="seat_unavail.png";
                     document.getElementById("seat"+i ).alt="Unvailable seat";

                 }

             }
         }



         function findSeat(){

             if(selSeat >= 0){
                 selSeat =-1;
                 initSeats();
             }

             var i = 0; finished = false;
             while((i<seats.length) && !finished){
                 if(seats[i] && seats[i+1] && seats[i+2]){
                     selSeat = i;
                     document.getElementById("seat" +i).src ="seat_select.png";
                     document.getElementById("seat"+i).alt="Your seat";
                     document.getElementById("seat" +(i+1)).src ="seat_select.png";
                     document.getElementById("seat"+(i+1)).alt="Your seat";
                     document.getElementById("seat" +(i+2)).src ="seat_select.png";
                     document.getElementById("seat"+(i+2)).alt="Your seat";

                     var accept = confirm("Seats " + (i+1) +" through " +(i+3) +"are available. Accept?");

                     if(accept){
                         finished = true;
                     }
                     else{
                         selSeat = -1;
                         document.getElementById("seat" + i).src ="seat_avail.png";
                         document.getElementById("seat" + i).alt="Available seat";
                         document.getElementById("seat" + (i+1)).src ="seat_avail.png";
                         document.getElementById("seat" + (i+1)).alt="Available seat";
                         document.getElementById("seat" + (i+2)).src ="seat_avail.png";
                         document.getElementById("seat" + (i+2)).alt="Available seat";
                         
                     }

                 }
                 i++;
             }

            }

    </script>
</body>

</html>

 

 

 

mandango5.html  //2차원배열로 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body onload="initSeats();">
    <div style="margin-top:75px; text-align:center">
        <img id="seat0" src="" alt="" />
        <img id="seat1" src="" alt="" />
        <img id="seat2" src="" alt="" />
        <img id="seat3" src="" alt="" />
        <img id="seat4" src="" alt="" />
        <img id="seat5" src="" alt="" />
        <img id="seat6" src="" alt="" />
        <img id="seat7" src="" alt="" />
        <img id="seat8" src="" alt="" /><br />
        <img id="seat9" src="" alt="" />
        <img id="seat10" src="" alt="" />
        <img id="seat11" src="" alt="" />
        <img id="seat12" src="" alt="" />
        <img id="seat13" src="" alt="" />
        <img id="seat14" src="" alt="" />
        <img id="seat15" src="" alt="" />
        <img id="seat16" src="" alt="" />
        <img id="seat17" src="" alt="" /><br />
        <img id="seat18" src="" alt="" />
        <img id="seat19" src="" alt="" />
        <img id="seat20" src="" alt="" />
        <img id="seat21" src="" alt="" />
        <img id="seat22" src="" alt="" />
        <img id="seat23" src="" alt="" />
        <img id="seat24" src="" alt="" />
        <img id="seat25" src="" alt="" />
        <img id="seat26" src="" alt="" /><br />
        <img id="seat27" src="" alt="" />
        <img id="seat28" src="" alt="" />
        <img id="seat29" src="" alt="" />
        <img id="seat30" src="" alt="" />
        <img id="seat31" src="" alt="" />
        <img id="seat32" src="" alt="" />
        <img id="seat33" src="" alt="" />
        <img id="seat34" src="" alt="" />
        <img id="seat35" src="" alt="" /><br />
  
      <input type="button" id="findseat" value="Find Seat" onclick="findSeat();" />
    </div>
    <script>

        var seats = [[ false, true, false, true, true, true, false, true, false ],
                   [ false, true, false, false, true, false, true, true, true ],
                   [ true, true, true, true, true, true, false, true, false ],
                   [ true, true, true, false, true, false, false, true, false ]];

         var selSeat = -1; //안팔림



         function initSeats(){
             for(var i= 0; i<seats.length; i++ ){//제일바깥 포문
                for(var j= 0; j<seats[i].length;j++) //i번쨰 행의 길이만큼 -> 안쪽 포문
                if(seats[i][j]){
                    document.getElementById("seat" + (i * seats[i].length + j)).src ="seat_avail.png";
                    document.getElementById("seat" + (i * seats[i].length + j)).alt="Available seat";
                }else{
                    document.getElementById("seat" + (i* seats[i].length + j)).src = "seat_unavail.png";
                    document.getElementById("seat" + (i* seats[i].length + j)).alt="Unvailable seat";
                }

             }
         }



         function findSeat(){

             if(selSeat >= 0){
                 selSeat =-1;
                 initSeats();
             }

             var i = 0; finished = false;
             while((i<seats.length) && !finished){
                 for( var j = 0; j< seats[i].length; j++){

                 
                 if(seats[i][j] && seats[i][j+1] && seats[i][j+2]){
                    selSeat = i * seats[i].length + j;
                     document.getElementById("seat" + (i * seats[i].length + j)).src = "seat_select.png";
                     document.getElementById("seat" + (i* seats[i].length + j)).alt="Your seat";
                     document.getElementById("seat" + (i * seats[i].length + j+1)).src = "seat_select.png";
                     document.getElementById("seat" + (i* seats[i].length + j+1)).alt="Your seat";
                     document.getElementById("seat" + (i * seats[i].length + j+2)).src = "seat_select.png";
                     document.getElementById("seat" + (i* seats[i].length + j+2)).alt="Your seat";


                     var accept = confirm("Seats " + (j + 1) +" through " +(j +3) + " in Row " +(i+1) + " are available. Accept?");

                     if(accept){
                         finished = true;
                         break;
                     }
                     else{
                         selSeat = -1;
                         document.getElementById("seat" + (i * seats[i].length + j)).src = "seat_avail.png";
                         document.getElementById("seat" + (i* seats[i].length + j)).alt="Available seat";
                         document.getElementById("seat" + (i * seats[i].length + j+1)).src = "seat_avail.png";
                         document.getElementById("seat" + (i* seats[i].length + j+1)).alt="Available seat";
                         document.getElementById("seat" + (i * seats[i].length + j+2)).src = "seat_avail.png";
                         document.getElementById("seat" + (i* seats[i].length + j+2)).alt="Available seat";
                         
                     }
                    }

                 }
                 i++;
             }

            }

    </script>
</body>

</html>

 

 

이미지파일과 전체 코드는

resources.oreilly.com/examples/9780596527747/tree/master/ch05/mandango

저작자표시

'web > javascript' 카테고리의 다른 글

test  (6) 2024.06.14
함수참조  (0) 2021.04.30

'web/javascript'의 다른글

  • 현재글HeadFirst ch05

관련글

티스토리툴바