Saturday, March 29, 2014

Tutorial 11

Question 1-I
<html>
    <body>

    <script type="text/javascript">
        
        var count=prompt("Input your character");
    
        for ( i=0 ;  i<=10 ; i++) 
                document.write (count); 
                
   </script>
    </body>
</html>



Question 1-II

<html>
    <body>

    <script type="text/javascript">
 
    var i=0;
    var count1=prompt("Input your character");
    var count2=prompt("Input your character");
    
    
    while (i<=5) {
        document.write (count1);
        document.write (count2);
        i++;
    }
    </script>
    </body>
</html>
    
Question 1- III

<html>
    <body>

    <script type="text/javascript">

        var count1=prompt("Input your integer");

        for (var i=1 ; i<=12 ; i++)
            document.write(count1+" x "+i+" = " + (count1*i) + "<br>"); 

    </script>
    </body>
</html>
Posted by at No comments:

Tutorial 10

 Question 1- I & II

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="mystyle.css"> 
    </head>
    <body>
        <script type="text/javascript">
            var nescafe = prompt("Nescafe?","Enter Value");
            var apple = prompt("Apple?","Enter Value");
            var cocomilk = prompt("Coco Milk?","Enter Value");
            var maggiemee = prompt("Maggie Mee?","Enter Value");
        
            var nescafe_price = parseInt(nescafe)*10.50;
            var apple_price = parseInt(apple)*1.20;
            var cocomilk_price = parseInt(cocomilk)*1.50;
            var maggiemee_price = parseInt(maggiemee)*3.50;

            var subtotal = nescafe_price + apple_price + cocomilk_price + maggiemee_price;
            
            /* Display the receipt */
            document.write("<h2> ABC Shop Enterprise </h2>");
            document.write("<br>") 

            document.write("<table>");

            document.write("<tr><th width=130px> Item</th>");
            document.write("<th width=120px> Price </th>");
            document.write("<th width=110px> Total </th></tr>");
            
            document.write("<tr><td>Nescafe @ " + nescafe + "</td>");
            document.write("<td>RM10.50</td>");
            document.write("<td>RM " + nescafe_price.toFixed(2) + "</td></tr>");

            document.write("<tr><td>Apple @ " + apple + "</td>");
            document.write("<td>RM1.20</td>");
            document.write("<td>RM " + apple_price.toFixed(2) + "</td></tr>");

            
            document.write("<tr><td>Coco Milk @ " + cocomilk + "</td>");
            document.write("<td>RM1.50</td>");
            document.write("<td>RM " + cocomilk_price.toFixed(2) + "</td></tr>");

            
            document.write("<tr><td>Maggie Mee @ " + apple + "</td>");
            document.write("<td>RM3.50</td>");
            document.write("<td>RM " + maggiemee_price.toFixed(2) + "</td></tr>");
            
            document.write("<tr><td class=white>" + "</td>");
            document.write("<td class=yellow>SubTotal" + "</td>");
            document.write("<td class=yellow>RM" + subtotal.toFixed(2) + "</td></tr>");
        
            document.write("<tr><td class=white>" + "</td>");
            document.write("<td class=yellow>GST" + "</td>");
            document.write("<td class=yellow>RM" + 0.06*subtotal.toFixed(2) + "</td></tr>");
            
            document.write("<tr><td class=white>" + "</td>");
            document.write("<td class=black >Grand Total" + "</td>");
            document.write("<td class=black >RM" + (subtotal+0.06*subtotal).toFixed(2) + "</td></tr>");
        
            document.write("</table>"); 
                
        </script>    
    </body>
</html>


mystyle.css

body{font-family: Arial;}

table.design{
        font-size:12px; }

th{
    background-color: #FFC42B; padding: 5px; font-weight: bold; }

td.black{
    background-color: #FFC42B; padding: 5px; font-weight: bold; 
    color : black; }

td.yellow{
    background-color: yellow; padding: 5px; 
     font-weight: bold; color : red; }
    
td.white{
    background-color: white; padding: 5px; 
     font-weight: bold; color : red; }

td{
    background-color: #FFF7B8; color : #666666; padding: 5px;}


Question 1- III

<html>
    <body>

    <script type="text/javascript">
        var num1 = prompt("Enter interger");
        var num2 = prompt("Enter interger");

        var operator = prompt("Enter an operator");
        

        if (operator == "+") {
            var result = parseInt(num1)+ parseInt(num2);
            document.write(num1 + " + " + num2 + " = " + result + "<br>");
            }
        else if (operator == "*") {
            var result = parseInt(num1)*parseInt(num2);
            document.write(num1 + " * " + num2 + " = " + result + "<br>");
            }

        else if (operator == "/") {
            if (num2 == 0) 
            alert(num1 + " / " + num2 + " = " + "Cannot divide by Zero");
            else 
            var result = parseInt(num1)/parseInt(num2);
            document.write( result + "<br>");
            }
    
        else{
            alert("Invalid operator! Refresh and try again!");
            } 
    </script>

    </body>
</html>
Posted by at No comments:

Sunday, March 9, 2014

Tutorial 9

Question 1. a) 

<html>
<body>

<h1>My First JavaScript</h1>
<p> Click the button to display the date.</p>

<button type="button" onclick="myFunction()"> Display Date</button>
<p id="demo"></p>

<script type="text/javascript">
     function myFunction() {
    document.getElementById("demo").innerHTML = "Thu Feb 27 2014 18:25:36 GMT +0800 Malay Peninsular Standard Time";
    }
   </script>
</body>
</html>



Question 1. b)
a)      Explain these code:
<p id="demo">
document.getElementById("demo").innerHTML = Date();4
 In order to show a text on web page using Java Script, id need to be used and the text is written double quotation to be shown on the page. But, due to the call from document.getElementById and innerHTML, the text shown is changed. Demo that was supposedly to be on the web page will be replaced by the date. The date will be shown on the page instead of the demo.

Question 1. c)


<html>
<body>

<h1>My First JavaScript</h1>
<p> Click the button to display the date.</p>

<button type="button" onclick="myFunction()"> Display Date</button>
<p id="demo"></p>

<script type="text/javascript">
function myFunction() {
var str = "Current day and time:";
  var result = str.fontcolor("red");
document.getElementById("demo").innerHTML = result + "<br><br>" + "Thu Feb 27 2014 18:39:03 GMT +0800 (Malay Peninsular Standard Time)";
    }
   </script>
</body>

</html>

Question 2

<html>
<body>

<script type="text/javascript">
var num1 = 10;
var num2 = 5;
var message1 = "Happy Birthday";
var message2 = "years old";

document.write(num1 + " + " + num2 + " = " + (num1+num2) + "<br>");
document.write(num1 + " - " + num2 + " = " + (num1-num2) + "<br>");
document.write(num1 + " * " + num2 + " = " + (num1*num2) + "<br>");
document.write(num1 + " / " + num2 + " = " + (num1/num2) + "<br><br>");
document.write(message1 + "&nbsp" + num1 + "&nbsp" + message2);
</script>

</body>
</html>

Question 3. a)

What is the output?
        Your name is: (input's name)

Question 3. b) 

<html>
<body>
<script type="text/javascript">

     var name = prompt("What is your name?", "Aaron");
     var age = prompt("What is your age?", "22");
     var answer = "Your name is&nbsp" + name + ",&nbspyou are" + "&nbsp" + age + "&nbspyears old.";
document.write(answer);
</script>
</body>
</html>

Question 3. c)

<html>
<body>

<script type="text/javascript">
var length = prompt("Enter length");
var width = prompt("Enter width");

area = parseInt(length) * parseInt(width);
perimeter = 2*parseInt(length) + 2*parseInt(width);

document.write("Length = " + length + "<br>");
document.write("Width = " + width + "<br>");
document.write("Area = " + area + "<br>");
document.write("Perimeter = " + perimeter +"<br>");
</script>

</body>

</html>
Posted by at No comments:

Tutorial 8

1) 

CSS file

body {
    font-family:calibri;
        }

table {
    border-collapse:collapse;
    border-style: solid;
    border-color: red;
    background-color: #FDD017;
         }

td.yellow2 {    
    /*background-color: yellow;*/
    border-width: 2px;
    border-style: solid;
    border-color: red;
    font-size: 0.8em;
    text-align:left;
    }

td.yellow {    
    background-color: #FFFFCC;
    border-width: 2px;
    border-style: solid;
    border-color: red;
    }

th.border {
    background-color: #FFFFCC;
    border-width: 2px;
    border-style: solid;
    border-color: red;
    }




HTML File

<html>
    <head>
        <style type="text/css"> @import url("style.css")
        </style>
    </head>
    <body>
    
    <table border="2">
        <th colspan="4"><center> Search Products </center></th>
        <tr>
               <td class="yellow2"><b> Search For: </b></td>
               <td class="yellow"><input type="text"></input></td>
               <td class="yellow2"><b>Max Price: </b></td>
               <td class="yellow"><input type="numbers" size = "10"></input></td>
        </tr>
        <tr>
                <td class="yellow2"><b> Search Type: </b></td>
                <td class="yellow"><select name="type"> <option value="All Words"> All Words </select></td>
                <td class="yellow2"><b> In Category: </b></td>
                <td class="yellow"><select name="category"> <option value="All Categories"> All Categories </select></td>
         </tr>
        <th class="border" colspan="4">
                 <center><input type="button" value="SEARCH NOW"></center>
        </th>
    </table>
    </body>
</html>



2)

CSS File

body {
    background-image:url("UCSIULogo.jpg");
    background-repeat:no-repeat;
    background-size:10%;
    background-attachment:scroll; 
}

h1{
    color:red;
    font-size:25;
    font-family: calibri;
    text-indent:130px;
}

h2 {
    color:black;
    font-size:18;
    font-family: calibri;
    text-indent:130px;
}

table.A {
        font-family:calibri;
        border-collapse:collapse;
        border-width:2px;
        border-color: black;
        border-style: dotted;    
        color:blue;
        margin-left:130px;
        width:480px;
        padding-left: 10px;
}

hr {
    margin-left: 130px;
    width:550px;
    size:5px;
}

div.image {
    content:url("ucsicampuskl.jpg");
    width:40%;
    padding-left:130px;
    
}



HTML File


<html>
    <head>
        <style type="text/css"> @import url("Tutorial8.2.css")
        </style>
    </head>
    
    <body>
        <h1>School of Information Technology</h1>
        <h2>Faculty of Business and Information Science</h2>
        
        <table class="A" border="1">
            <tr> 
                <td style="blue">Contact: 999-123 4567 (Betty)<br>
                    Email: betty@ucsiuniversity.edu.my
                </td>
            </tr>
        </table>
        <hr></hr>
        <div class="image"> </div>
    </body>
</html>
Posted by at No comments:

Tutorial 7

body {
    background-color:pink;
    padding-left:15em;
          }

a:link { font-family:arial; color: white;}
a:visited { font-family:arial; color: red;}
a:hover { font-family:arial; color: blue;}

ul.links{
    list-style-type:none; //value=none/circle/square
    margin:0
    padding:0;
    width:10em;
    position:absolute;
    top:3em;
    left:0;
             }

ul.links li {
    margin:10px;
    background:#FF9900;
    border-right:1em solid black;
                }

h1 { font-family: broadway; color:purple; }

.font { font-family:arial; color:purple; }

EM { font-family:arial}


Tutorial 7.html 

<html>
    <head>
        <LINK REL = "stylesheet"  TYPE = "text/css"  HREF = "mystyle.css"
    </head>
    <body>
        <ul class="links">
                <li><a href="   "> Main Page </a></li>
                <li><a href="   "> My Biodata </a></li>
                <li><a href="   "> My Tutorial </a></li>
                <li><a href="   "> My Assignment </a></li>
        </ul>
        
        <h1> My first styled page </h1>
    
        <span class="font">
        Welcome to my page! <br> <br>
        It lacks images, but at least it has style. <br>
        And it has links, even if they don't go anywhere... <br><br>
        There should be more here, but I haven't create them yet. 
        </span> 
        <br><br><hr><br>
        <EM>
        <i>Published 17 February 2014 <br> by myself. </i>
        <EM>
        
    </body>
</html>
Posted by at No comments:

Tutorial 6

Header.html 
<html>
    <body style="background:url(images.jpg)">
    
    </body>
    
</html>














Sidebar.html
<html>
    <body bgcolor="pink">

     <b><u><font face="arial"> SIDEBAR </font></u></b><br><br>
    <font face="calibri" size="4"><b><a href="Tutorial 4.html" target="content"> Tutorial 4 </a></b></font>
<br><br>
    <font face="calibri" size="4"><b><a href="https://www.ucsiuniversity.edu.my/" target="content"> UCSI </a></b></font>
<br><br>
    
    </body>
</html>

 Tutorial 4.html 
<html>
    <head>
        <title> Tutorial 4</title>
    </head>

     <body>

     <center>
   <table border="3">

 <tr>
<td><b>Day/Time</b></td>
<td><b> 8.00-9.30</td>
<td><b> 9.30-11.00 </td>
<td><b> 11.00-12.30 </td>
<td><b> 12.30-2.00</td>
<td><b> 2.00-3.30 </td>
<td><b> 3.30-5.00 </td>
</tr>

 <tr>
<td><b>Monday</b></td>
<td>Public Speaking (C417) </td>
<td>IT (Lab C) </td>
<td>&nbsp</td>
<td>&nbsp</td>
<td>&nbsp</td>
<td>&nbsp</td>
</tr>

 <tr>
<td><b>Tuesday</b></td>
<td>&nbsp</td>
<td>&nbsp</td>
<td>&nbsp</td>
<td>&nbsp</td>
<td>Film Studies(C401)</td>
<td>PR (G04)</td>
</tr>
<tr>
<td><b>Wednesday</b></td>
<td>Public Speaking (C407)</td>
<td>&nbsp</td>
<td>&nbsp</td>
<td>&nbsp</td>
<td>&nbsp</td>
<td>&nbsp</td>
</tr>

 <tr>
<td><b>Thursday</b></td>
<td>&nbsp</td>
<td>Film Studies (C401)</td>
<td>PR (Newsroom)</td>
<td>IT (C409)</td>
<td>&nbsp</td>
<td>&nbsp</td>
</tr>

 <tr>
<td><b>Friday</b></td>
<td>IT (Audi)</td>
<td>&nbsp</td>
<td>&nbsp</td>
<td>&nbsp</td>
<td>&nbsp</td>
<td>&nbsp</td>
</tr>
</table>
    </center> <br>

     <center><b>
    Time Table (Jan - Apr 2014)
    </center></b> <br>

     <center><a href="Tutorial 3.html">
    Click here for Tutorial 3 </a></center> <br>

     </body>
    
</html>

 Content.html
<html>
    <body style="background-color:skyblue">
    
    <font face= "arial" size="4">Click links from the sidebar to view contents </font>
    
    </body> 
</html>

 Frame.html
<html>
    <frameset>
    <frameset rows="30%, *" frameborder="1">
        <frame noresize="noresize" src="Header.html" > 
    <frameset cols="20%,*">
        <frame name="nav" noresize="noresize" src="Sidebar.html">
        <frame name = "content" noresize="noresize" src="Content.html">                        
    </frameset>

     </body>
</html>
Question 2 - Form

 <html>
    <body>
    <form action="send.php" method="post">
        <b>What kind of car would you like to buy? </b><br> <br>
    &nbsp&nbsp&nbsp&nbsp&nbsp    
        <input type="radio" name="user_vehicle" value="Proton" checked> Proton &nbsp    
        <input type="radio" name="user_vehicle" value="Honda"> Honda &nbsp
        <input type="radio" name="user_vehicle" value="Ferarri"> Ferrari &nbsp
        <input type="radio" name="user_vehicle" value="Ford"> Ford &nbsp
    <br><br>
        <b>What colour do you want on you car? </b><br><br>
    &nbsp&nbsp&nbsp&nbsp&nbsp
        <select>
        <option value="White"> White </option>
        <option value="Red"> Red</option>
        <option value="Black" selected> Black </option>
                     <option value="Blue"> Blue </option>
        </select>
        Other: <input type="text" name="user_other"/>
    <br><br>
        <b>Enter other recommendation of your preferred car: </b> <br>
    &nbsp&nbsp&nbsp&nbsp&nbsp
        <textarea name="Other" rows="5" cols="50"> </textarea>
    <br><br>
        <b>Tell us how to get in touch with you: </b><br><br>
    <table> 
    <tr>
    <td>&nbsp&nbsp&nbsp&nbsp&nbsp Name </td>
     <td><input type="text" name="user_name"/> </td></tr>
    <tr>
    <td>&nbsp&nbsp&nbsp&nbsp&nbsp E-mail </td>
    <td><input type="text" name="user_email"/> </td></tr>
    <tr>
    <td>&nbsp&nbsp&nbsp&nbsp&nbsp Tel </td> 
    <td><input type="text" name="user_tel"/> </td></tr>
    <tr>
    <td> &nbsp&nbsp&nbsp&nbsp&nbsp FAX </td>
    <td><input type="ext" name="user_fax"/> </td></tr>
    </table><br>

     &nbsp&nbsp&nbsp&nbsp&nbsp
    <input type="checkbox"> Please contact me as soon as possible regarding this matter <br>    
    <br>
    <input type="submit" value="Send" /> 
    <input type="reset" value="Clear" />
    
     </form>
    </body>
</html>
Posted by at No comments:
Subscribe to: Posts (Atom)