Scribd
Upload
42 views32 pages

Lab 4 314

The document is about JavaScript and includes code examples. It discusses what JavaScript is used for, where JavaScript code can be placed, and provides code examples of JavaScript prompts, alerts, event handling, loops, and conditional statements. The document contains 6 sections that provide code examples of: 1) prompts and alerts, 2) an input form with event handling, 3) changing HTML formatting with JavaScript, 4) a while loop, 5) a for loop, and 6) if/else statements. The document aims to demonstrate basic JavaScript concepts and code examples.

Uploaded by

Khadija Khan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
42 views32 pages

Lab 4 314

The document is about JavaScript and includes code examples. It discusses what JavaScript is used for, where JavaScript code can be placed, and provides code examples of JavaScript prompts, alerts, event handling, loops, and conditional statements. The document contains 6 sections that provide code examples of: 1) prompts and alerts, 2) an input form with event handling, 3) changing HTML formatting with JavaScript, 4) a while loop, 5) a for loop, and 6) if/else statements. The document aims to demonstrate basic JavaScript concepts and code examples.

Uploaded by

Khadija Khan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 32

Raghed Alrefi CS314

4112248 Ms. Basimah Aljhne

CS314 – Web Application Development

Raghed Majed Alrefi


L02 – LB02
4112248

pg. 1
Raghed Alrefi CS314
4112248 Ms. Basimah Aljhne

JAVA
SCRIPT
JavaScript is a scripting or programming language that allows
(JS)
you to implement complex features on web pages — every time
a web page does more than just sit there and display static
information for you to look at — displaying timely content
updates, interactive maps, animated 2D/3D graphics, scrolling

What is JavaScript used for?


JavaScript is mainly used for web-based applications and web
browsers. But JavaScript is also used beyond the Web in software,
servers, and embedded hardware controls. Here are some basic
things JavaScript is used for:
1.     Adding interactive behavior to web pages
2.     Creating web and mobile apps
3.     Building web servers and developing server applications
4.     Game development

JavaScript Where To
1- You can either include the 2- You can keep the JavaScript
JavaScript code internally code in a separate external
within your HTML file and then point to that file
document itself from your HTML document.
pg. 2
Raghed Alrefi CS314
4112248 Ms. Basimah Aljhne

Task 1 😊
1.create HTML page with the following JavaScript Popup
Boxes:
a: prompt, ask the user to enter the name
b: alert
what is the difference?
Prompt: method returns the input value if the user clicks "OK", otherwise it
returns null

Alert: method is used when you want information to come through to the user.

pg. 3
Raghed Alrefi CS314
4112248 Ms. Basimah Aljhne

pg. 4
Raghed Alrefi CS314
4112248 Ms. Basimah Aljhne

Code:
<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            h1 {
            color: rgb(221, 28, 28);
            background-color:rgb(153, 202, 172);
            border: 2px solid;
            padding: 10px;
            text-align: center;
            font-family: Georgia, Times, 'Times New Roman', serif;
        }
            p {
            text-align: center;
            font-family: Georgia, Times, 'Times New Roman', serif;
            color: blue;
        }
            form {
            text-align: center;
            font-family: Georgia, Times, 'Times New Roman', serif;  
        }
            .button1 {
            display: flex;  
            justify-content: center;
            align-items: center;;
            font-family: Georgia, Times, 'Times New Roman', serif;
        }

</style>

<script>
function prompt1() {
    var Pro =prompt("Enter your name: ");
    if (Pro != null) {
    document.getElementById("pdb").innerHTML= "Hi "+ Pro +" how are you today? ";
    }
}
function call(name) {
    alert("Have a nice day  "+ name +" :) ");  
}

</script>
pg. 5
Raghed Alrefi CS314
4112248 Ms. Basimah Aljhne
    </head>
<body style="background-color: rgb(186, 219, 120);">

    <h1> Alert Dialog Box </h1>


    <p> Click the following button to see what happend:: </p>
<form>
    <label> First Name: </label>
    <input type="text" name="FirtName">
    <button onclick="call(form.FirtName.value)"> Display message </button>
</form>

    <h1> Prompt Dialog Box </h1>


<div class="button1">
    <p> Click the following button to see what happend: </p>
    <button onclick="prompt1()"> click me </button>
</div>
    <p id="pdb"></p>

    </body>
</html>

pg. 6
Raghed Alrefi CS314
4112248 Ms. Basimah Aljhne
2.create HTML page with input form that read the username
and button that has event (onclick) which display hi massage
with the username.

Code:
<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
            h3 {
            color: rgb(221, 28, 28);
            text-align: center;
            font-family: Georgia, Times, 'Times New Roman', serif;
        }
            form {
            text-align: center;
            font-family: Georgia, Times, 'Times New Roman', serif;  
        }
            .button1 {
            display: flex;  
            justify-content: center;
            align-items: center;;
            font-family: Georgia, Times, 'Times New Roman', serif;
        }

pg. 7
Raghed Alrefi CS314
4112248 Ms. Basimah Aljhne
</style>

<script>
    function call(name){
        document.write("Hi "+name)
    }
</script>
</head>
<body style="background-color: rgb(154, 247, 174)">
    <h3> User Name </h3>
    <form>
        <label for="first name "> </label>
        <input type="text" name="firname">
        <button onclick="call(form.firname.value)"> Displey Masssage </button>
    </form>
</body>
</html>

pg. 8
Raghed Alrefi CS314
4112248 Ms. Basimah Aljhne

3.create JS code that change the format of the HTML.

Code:
<html>
    <head>
        <style type="text/css">
            p {
            width: 150px;
            height: 50px;
            text-align: center;
            border: 2px solid;
            padding: 20px;
            border-color: rgb(114, 141, 17);
        }
            div {
            border: 2px solid;
            padding-left: 30px;
            padding-top: 20px;
            width:20cm;
            height: 7cm;
        }
            h3 {
            font-family:'Times New Roman', Times, serif;
            color:rgb(131, 83, 21);
        }
pg. 9
Raghed Alrefi CS314
4112248 Ms. Basimah Aljhne
</style>

<script>
    function change0(){
        var color = document.getElementById("color").value;
        document.getElementById("BGC").style.backgroundColor=color;
    }
</script>

</head>
    <body style="background-color:rgb(166, 245, 189)">
        <div>
            <h3> Dear user one of the features of this website is you can change the
background color </h3>
            <p id="BGC"> Please choose a background color </p>
            <select onchange="change0()" id="color">
                <option value="white"> None </option>
                <option value="Red"> Red :) </option>
                <option value="Green"> Green :) </option>
                <option value="Blue"> Blue :) </option>
            </div>
            </section>          
    </body>
</html>
   

pg. 10
Raghed Alrefi CS314
4112248 Ms. Basimah Aljhne
4.create JS code with While loop statement
5.create JS code with For loop statement

pg. 11
Raghed Alrefi CS314
4112248 Ms. Basimah Aljhne
Code:
<html>
    <head>
        <style type="text/css">
            p {
            color: rgba(148, 4, 88, 0.692);  
            border: 2px solid;
            border-color:rgb(194, 191, 6);
            width: 5cm;
            text-align: center;              
        }
    </style>
</head>
<body style="background-color:rgb(206, 250, 235)">
    <p> While Loop </p>
</body>
</html>

<script>
    var num =10;
    while(num >= 0){
        document.write("Number: "+ num +"<br>");
        num--;  
    }
    document.write("<p> For Loop </p>"+"<br>");
        for(i=0 ;i<11; i++){
        document.write("number "+ i +"<br>")
    }
</script>

pg. 12
Raghed Alrefi CS314
4112248 Ms. Basimah Aljhne
6.create JS code with IF, Else Statement

pg. 13
Raghed Alrefi CS314
4112248 Ms. Basimah Aljhne
Code:
<html>
    <head>
        <style type="text/css">
            div {
            border: 2px solid;
            padding-left: 20px;
            border-color:#2320ecbe;
            width: 15cm;
            height: 4cm;
        }
            h2,h3 {
            font-family:'Courier New', Courier, monospace;
        }
            h2 {
            color: rgb(23, 4, 128);
        }
            h3 {
            color:rgba(20, 103, 228, 0.747)
        }
        </style>
    </head>
    <body style="background-color: rgb(235, 163, 163)">
        <div>
            <h2> create JS code with IF, Else Statement </h2>
             <h3> what color is the sky?  </h3>
                    <input type="radio" name="color" value="blue"
onclick="color(this.value)">blue
                    <input type="radio" name="color" value="green"
onclick="color(this.value)">green
                    <input type="radio" name="color" value="red"
onclick="color(this.value)">red
        </div>
    </body>
</html>
<script>
    function color(rainbow){
        if (rainbow =="blue"){
            window.alert("Right :)");
        }
        else {
            window.alert("wrong :(")
        }
    }
</script>
pg. 14
Raghed Alrefi CS314
4112248 Ms. Basimah Aljhne
7- Document Object Model:
7.1: Display Date on <p> when the user click on the button
7.2: insert DOM

Code:
<html>
    <head>
    </head>
    <body>
        <h2 style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;">
insert DOM </h2>
        <button onclick="insert()"> insert </button>
    </body>
</html>
<script>
function insert(){
    var NewEl =document.createElement("p");
    var text  =document.createTextNode("PHP is not easy at all...");
    NewEl.appendChild(text);
    document.body.appendChild(NewEl);}
</script>

pg. 15
Raghed Alrefi CS314
4112248 Ms. Basimah Aljhne
7.3 replace DOM

Code:
<html>
<body>
    <div id="main">
        <p id="demo"> old paragraph </p>
    </div>
<button onclick="replace()"> replace </button>
</body>
</html>

<script>
    function replace() {
        var Newel = document.createElement("p");
        var text = document.createTextNode("new p");
        Newel.appendChild(text);
       
        var oldel = document.getElementById("demo");
        var par = document.getElementById("main");
        par.replaceChild(Newel,oldel)
    }
</script>

pg. 16
Raghed Alrefi CS314
4112248 Ms. Basimah Aljhne
7.4 Remove DOM

Code:
<html>
    <head>
        <style type="text/css">
        button {
        background-color:rgb(138, 245, 138);
    }
        body {
        background-color:rgb(248, 212, 165);
    }
        p,li {
        color: rgb(69, 69, 197);
    }
    </style>
</head>
<body>
    <div id="main">
pg. 17
Raghed Alrefi CS314
4112248 Ms. Basimah Aljhne
        <p id="demo">this is a paragraph</p>
    </div>
        <button onclick="remove()">remove paragraph</button>
    <ul id="list">
        <li>Coffee</li>
        <li>Water</li>
        <li>Juice</li>
    </ul>
    <button onclick="remove2()">remove from list</button>

    </body>
</html>

<script>
    function remove(){
        var part=document.getElementById("main");
        var child=document.getElementById("demo");

        part.removeChild(child);
    }
    function remove2(){
        var par=document.getElementById("list");
        par.removeChild(par.firstElementChild);
    }
</script>

pg. 18
Raghed Alrefi CS314
4112248 Ms. Basimah Aljhne
7.5 DOM animation

Code:
<html>
    <style>
    #main {
    height: 400px;
    width: 500px;
    position: relative;
    background-color: rgb(216, 11, 189);
}
    #animate {
    height: 50px;
pg. 19
Raghed Alrefi CS314
4112248 Ms. Basimah Aljhne
    width: 50px;
    position: absolute;
    background-color: rgb(67, 147, 238);
}
    </style>
<body>
    <h2> DOM Animation </h2>
    <p> <button onclick="animate1()"> Click me </button> </p>
    <div id="main">
        <div id="animate"></div>
    </div>
<script>
    function animate1(){
        var elementMO =document.getElementById("animate");
        var pos = 0;
        var id=setInterval(frame , 5);
        function frame(){
            if(pos==350){
                clearInterval(id);
            }
            else{
                pos++;
                elementMO.style.top=pos + "px"
                elementMO.style.left=pos +"px"
            }
        }
    }
    </script>
</body>
</html>

pg. 20
Raghed Alrefi CS314
4112248 Ms. Basimah Aljhne
8. JavaScript Form validation

pg. 21
Raghed Alrefi CS314
4112248 Ms. Basimah Aljhne
Code:
<html>
    <head>
        <style>
            p,h2 {
            font-family:'Times New Roman', Times, serif;
            font-weight: bold;
            color: rgb(13, 126, 73);
        }
            body {
            background-color:rgba(129, 207, 243, 0.322);
            margin: 20px;
            border: 2px solid;
            padding: 15px;
            padding-right: 200px;
        }
            input {
            border: 2px solid;
            border-radius: 5px;
            border-color: rgb(9, 170, 63);
        }
            .erorr {
            color: red;
            font-weight: 15;
        }
        </style>
</head>
<body>
    <h2> Welcome please complete the following </h2>
<form name="ErrorForm" method="post" action="" onsubmit="return valid()">
    <p> User Name: </p>
    <input type="text" name="Name">
    <p class="erorr"  id="name erorr"></p>
   
    <p> Password: </p>
    <input type="text" name="passw">
    <p class="erorr" id="pass erorr"></p>
    <p> Email: </p>
    <input type="text" name="email">
    <p class="erorr" id="emali erorr"></p>

    <p>Course Name: </p>


    <select id="course" name="cour">
        <option value="None">None</option>
        <option value="CS314">CS314</option>
pg. 22
Raghed Alrefi CS314
4112248 Ms. Basimah Aljhne
        <option value="CS111">CS111</option>
        <option value="CS112">CS112</option>
        <option value="CS315">CS315</option>
        </select>
    <p class="error" id="email erorr"></p>
        <button>Register</button>
        </form>
    </body>
</html>

<script>
    function valid(){
        var name =document.ErrorForm.Name.value;
        var pass =document.ErrorForm.passw.value;
        var email =document.ErrorForm.email.value;
        var course=document.ErrorForm.cour.value;
        if(name== ""){
            document.getElementById("name erorr").innerHTML=" Enter a name! ";
            return false;
        }
        var regx = /^[a-zA-Z][a-zA-Z0-9]+$/ ;
        if(regx.test(name)==false)
            {
                document.getElementById("name erorr").innerHTML=
                "Enter a vaild name"+"<br>"+ " 1-you have to start with a letter"+"<br>"+"2-
your name must contains numbers";
                return false;
            }
        else{
            document.getElementById("name erorr").innerHTML="valid";
        }
        if(pass==""){
            document.getElementById("pass erorr").innerHTML="enter pass :(";
            return false;}
         var regxp=/^[A-Z][a-zA-Z0-9]+$/;
         if(regxp.test(pass)==false){
            document.getElementById("pass erorr").innerHTML="enter valid pass :("+
            "<br>"+"* Start with a capetal letter"+"<br>"+"* password must contain numbers";
            return false; }
        else{
            document.getElementById("pass erorr").innerHTML="valid";
        }
        if(email==""){
            document.getElementById("emali erorr").innerHTML=" Enter an Email :() ";
            return false;
        }

pg. 23
Raghed Alrefi CS314
4112248 Ms. Basimah Aljhne
        var regxpr =  /^[a-zA-Z0-9]+@[a-zA-Z0-9.-]+$/;
        if(regxpr.test(email)==false){
                document.getElementById("emali erorr").innerHTML=
                "Enter a vaild email! "+
            "<br>"+"1- Start with a letter or number"+"<br>"+"2- You have to include @
"+"<br>"+"3- Then the orgnastion name"+"<br>"+"example: [email protected]";
                return false;
            }
        else{
            document.getElementById("emali erorr").innerHTML="valid";
        }
    }
</script>

pg. 24
Raghed Alrefi CS314
4112248 Ms. Basimah Aljhne

Task 2 😊
The Goal of this Task: Demonstrate knowledge of basic
JavaScript through building one-page website with self-
updating time (a clock) using JavaScript.

Code:
<!DOCTYPE html>
<html>
    <head>
    <title> Clock Using JavaScript </title>
<style>
        body {
        font-family: 'Times New Roman', Times, serif;
        background-color: rgb(253, 197, 197);
    }
        .wrap {
        text-align: center;
        padding: 200px 0 0;
    }
        h1 {
        font-size: 50px;
pg. 25
Raghed Alrefi CS314
4112248 Ms. Basimah Aljhne
        margin-bottom: 15px;
    }
        #clock span {
        display: inline-block;
        box-shadow: 0 5px 15px #1b42ce;
        width: 100px;
        background-color: rgb(121, 114, 211);
        height: 100px;
        line-height: 100px;
    }
        #clock span:first-child{
        margin-left: 0;
    }  
        #clock span:last-child{
        background-color: #fa256c;
    }
</style>

</head>
<body>
    <div class="wrap">
        <h1 id="greetings"></h1>
        <h1 id="clock"></h1>
    </div>
<script src="javascriptCLOCK.js"> </script>
    </body>
</html>

function clock(){
    var date = new Date();
    var hours=date.getHours();
    var minutes = date.getMinutes();
    var seconds = date.getSeconds();
    var midday;

    hours = updateTime(hours);
    minutes = updateTime(minutes);
    seconds = updateTime(seconds);
    var name = "Raghed";
    midday = (hours>=12) ? " PM" : " AM";
    document.getElementById("clock").innerHTML =
"<span>"+hours+"</span>" + ":" + "<span>"+minutes+"</span>" + ":" +"<span>"+
seconds+"</span>" +  midday;
    var time = setTimeout(function(){
pg. 26
Raghed Alrefi CS314
4112248 Ms. Basimah Aljhne
        clock();
    },1000);
    if(hours <12 ){
    var greeting ="Good Moring " + name;
}
if (hours >= 12 && hours <=18){
var greeting = "Good Afternoor " + name ;
}
if (hours>= 18 && hours <= 24){
var greeting = "Good Evening " +name;
}
document.getElementById("greetings").innerHTML = greeting;
}
function updateTime(k){
if (k <10 ){
    return "0" +k }
    else{
        return k;
    }
}

clock();

Tags pg. 27

and
Raghed Alrefi CS314
4112248 Ms. Basimah Aljhne

<html> </html> : these are outer tags that apply to the entire HTML
doc. The first <html> tag indicates the markup language used for the
doc, and the </html> marks the end of the web page.
<head> </head> : the <head> tag contains the me metadata that is
required to describe the styles, fonts, linked files, page title, and scripts
used by the HTML doc.
<title> </title> : this tag contains the text appears as the title of a doc
in the browser. There cannot be more than one <title> element in an
HTML doc.
<body> </body> : the <body> tag contains all the text, data, and
images that are displayed when the HTML doc is opened in a browser.
<h> </h> : the <h1/h2/h3/h4/h5/h6> tags indicate that the text is a
header. <h1> is usually used for the title of the page, while the others are
used to style smaller headings on the doc.
<p> </p> : this tag contains the text that should appear as a paragraph
on screen. The browser starts a new line and adds margins for spacing
around the paragraph.

pg. 28
Raghed Alrefi CS314
4112248 Ms. Basimah Aljhne

<i> </i> : It is used to apply thematic break between paragraph-level


elements.
<strong> </strong> : It is used to define important text, and it’s
make it bold.
</br> : the </br> tag tells the browser to start a new line. It is a single
tag, with the closing slash included before the closing greater-than sign.
<hr> : It is used to apply thematic break between paragraph-level
elements.
&nbsp; : &nbsp is actually one of the most frequently used HTML
entities. Nbsp stands for non-breaking space, meaning that strings
separated with this entity will not be separated and put into separate
lines.
<a href> </a> : the use of this tag is to add a link to your web page
<img src> : the use of this tag is to add a image to your web page
<tt> </tt> : creates inline text which is presented using the user agent's
default monospace font face.
<dd> </dd> : the use of this tag is to add space between words in your
web page
<sub> </sub> : this tag defines subscript text. Subscript text appears
half a character below the normal line
<sup> </sup> : this tag defines subscript text. Subscript text appears
half a character above the normal line
<table> </table> : The use of this tag is for making schedule
<tr> </tr> : This tag is for main rows that are used in the schedule
<th> </th> : This tag is for rows that are used in the schedule pg. 29
Raghed Alrefi CS314
4112248 Ms. Basimah Aljhne
<select> </select> : <select> is a tag that is used to create a drop-down
list
<option value =”” > </option> : In HTML is used to choose an option
from a Drop-Down menu
<textarea> </textarea> : this tag is represents a multi-line plain-text
editing control, useful when you want to allow users to enter a sizeable
amount of free-form text
<td> </td> : This tag is for rows that are inside the schedule
<input type=”” name=””> : is an input control that presents users with
an interactive control for entering data
<ul> </ul> : is a tag represents an unordered list of items, typically
rendered as a bulleted list
<li> </li> : this tag is used to represent an item in a list

pg. 30
Raghed Alrefi CS314
4112248 Ms. Basimah Aljhne

Link: by using a <link> element to link to an external CSS file

Style: by using a <style> element in the <head> section

Color: property defines the text color to be used.

font family: property defines the font to be used.

Font size: property defines the text size to be used.

Border: property defines a border around an HTML element.

Padding: property defines a padding (space) between the text and the
border.

Margin: property defines a margin (space) outside the border.

background color – Float – Text aligns – Text Decoration – font


size – font weight – width – Hight – border radius – Display -Text
shadow

pg. 31
Raghed Alrefi CS314
4112248 Ms. Basimah Aljhne

References
(n.d.). Retrieved from https://www.javatpoint.com/html-tags

Chris, K. (2021, August 24). What is HTML – Definition and Meaning of Hypertext Markup Language. Retrieved from
FreeCodeCamp: https://www.freecodecamp.org/news/what-is-html-definition-and-meaning/

contributors, M. (2022, march 19). what is javascript. Retrieved from developer:


https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript

Farrar, A. (n.d.). Digital clock in JavaScript. Retrieved from codepen: https://codepen.io/afarrar/pen/JRaEjP

How to Design Digital Clock using JavaScript ? (2021, Jul 30). Retrieved from GeeksforGeek's:
https://www.geeksforgeeks.org/how-to-design-digital-clock-using-javascript/

Html Tags . (n.d.). Retrieved from JavaPoint: https://www.javatpoint.com/html-tags

Malek, P. (2020, October 29). &nbsp and HTML Space Challenges and Tricks. Retrieved from mailtrap:
https://mailtrap.io/blog/nbsp/

Reactor, H. (2021, August 26). What is JavaScript used for? Retrieved from Hack Reactor:
https://www.hackreactor.com/blog/what-is-javascript-used-for

Steele, C. (2020). Begginer's step-byatep coding course. London, England: DK.

Rahman, A. JavaScript_LabRef (1).

pg. 32

You might also like