Scribd
Upload
14 views

Lab4

Uploaded by

umamasaeed.214
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
14 views

Lab4

Uploaded by

umamasaeed.214
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 13

FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY

Hamdard University

Lab # 04
JavaScript
Objectives:

 To learn the basic structure of JavaScript.


 To learn the functions of Javascript

Theory:

What is JavaScript?
 JavaScript and Java are two different computer languages.
 It is an object-oriented computer programming language commonly used to create interactive
effects within web browsers.
 JavaScript, is a text-based object-oriented computer programming language meant to run as part
of a web-based application and to create interactive effects within web browsers.
 One of the three pillars of web development—the other two being HTML and CSS.

The <script> Tag


To insert a JavaScript into an HTML page, use the <script> tag.The <script> and </script> tells where the
JavaScript starts and ends.The lines between the <script> and </script> contain the JavaScript:

Syntax
<script>
Js code
</script>
JavaScript in <head> or <body>
You can place an unlimited number of scripts in an HTML document. Scripts can be in the <body> or in
the <head> section of HTML, and/or in both. It is a common practice to put functions in the <head>
section, or at the bottom of the page. This way they are all in one place and do not interfere with page
content.

JavaScript in <body>
In this example, JavaScript writes into the HTML <body> while the page loads:

<!DOCTYPE html> JavaScript can write directly into the HTML output
<html> stream:
<body> This is a heading
This is a paragraph.
<p> You can only use document.write in the HTML
JavaScript can write directly into the HTML output
output. If you use it after the document has loaded
FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY
Hamdard University

stream: (e.g. in a function), the whole document will be


</p> overwritten.

<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
</script>

<p>
You can only use
<strong>document.write</strong> in the HTML
output.
If you use it after the document has loaded (e.g. in
a function), the whole document will be
overwritten.
</p>

</body>
</html>

External JavaScripts
Scripts can also be placed in external files. External files often contain code to be used by several
different web pages.External JavaScript files have the file extension .js.To use an external script, point to
the .js file in the "src" attribute of the <script> tag:

My Web Page
A Paragraph.
On Click
My Web Page
My First External JavaScript
Note: myFunction is stored in an external
file called "myScript.js".

JavaScript Outputs:
Manipulating HTML Elements
To access an HTML element from JavaScript, you can use the document.getElementById(id) method.
Use the "id" attribute to identify the HTML element:

<!DOCTYPE html> My First Web Page


<html>
My First JavaScript
<body>
FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY
Hamdard University

<h1>My First Web Page</h1>

<p id="demo">My First Paragraph.</p>

<script>
document.getElementById("demo").innerHTML="My
First JavaScript";
document.write("<p>My First JavaScript</p>");
</script>

</body>
</html>

Warning
Use document.write() only to write directly into the document output. If you execute document.write after
the document has finished loading, the entire HTML page will be overwritten:

<!DOCTYPE html> My First Web Page


<html> My First Paragraph.
<body> After click
<h1>My First Web Page</h1>
Oops! The document disappeared!
<p>My First Paragraph.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction()
{
document.write("Oops! The document
disappeared!");
}
</script>

</body>
</html>

JavaScript Code
 JavaScript code (or just JavaScript) is a sequence of JavaScript statements.
 Each statement is executed by the browser in the sequence they are written.
 This example will manipulate two HTML elements:

<!DOCTYPE html> My Web Page


FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY
Hamdard University

<html> Hello Dolly


<body> How are you?
<h1>My Web Page</h1>

<p id="demo">A Paragraph.</p>

<div id="myDIV">A DIV.</div>

<script>
document.getElementById("demo").innerHTML="Hello
Dolly";
document.getElementById("myDIV").innerHTML="How
are you?";
</script>

</body>
</html>

JavaScript Functions
Declared functions are not executed immediately. They are "saved for later use", and will be
executed later, when they are invoked (called upon).
The function can be called directly when an event occurs (like when a user clicks a button), and
it can be called from "anywhere" by JavaScript code.

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Hello World!");
}
</script>
</head>

<body>
<button onclick="myFunction()">Try it</button>
</body>
</html>
FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY
Hamdard University

<!DOCTYPE html> Click the button to call a function with


<html> arguments
<body>

<p>Click the button to call a function with


arguments</p>

<button onclick="myFunction('Harry
Potter','Wizard')">Try it</button>

<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script>

</body>
</html>

Example:

<!DOCTYPE html> This example calls a function


<html> which performs a calculation,
<body> and returns the result:

<p>This example calls a function which performs a calculation, 12


and returns the result:</p>
<p id="demo"></p>
<script>
function myFunction(a,b)
{
return a*b;
}

document.getElementById("demo").innerHTML=myFunction(
4,3);
</script>
</body>
</html>
FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY
Hamdard University

JavaScript Variables
<!DOCTYPE html> What a verynice day
<html>
<body>

<p>Click the button to create and add string


variables.</p>
<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<button onclick="myFunctions()">Try it</button>

<p id="demoo"></p>

<script>
function myFunction()
{
txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;
document.getElementById("demo").innerHTML=txt3
;
}

function myFunctions()
{
var x=5+5;
var y="5"+5;
var z="Hello"+5;

vardemoP=document.getElementById("demoo");
demoP.innerHTML=x + "<br>" + y + "<br>" + z;
}

</script>

</body>
</html>
FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY
Hamdard University

If...else Statement
Use the if....else statement to execute some code if a condition is true and another code if the
condition is not true.
Syntax
if (condition)
{
code to be executed if condition is true
}
else
{
code to be executed if condition is not true
}

Example
If the time is less than 20:00, you will get a "Good day" greeting, otherwise you will get a "Good
evening" greeting

if (time<20)
{
x="Good day";
}
else
{
x="Good evening";
}

The result of x will be:

Good day

If...else if...else Statement


Use the if....else if...else statement to select one of several blocks of code to be executed.

Syntax
if (condition1)
{
code to be executed if condition1 is true
}
else if (condition2)
FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY
Hamdard University

{
code to be executed if condition2 is true
}
else
{
code to be executed if neither condition1 nor condition2 is true
}

Example
If the time is less than 10:00, you will get a "Good morning" greeting, if not, but the time is less
than 20:00, you will get a "Good day" greeting, otherwise you will get a "Good evening"
greeting:

if (time<10)
{
x="Good morning";
}
else if (time<20)
{
x="Good day";
}
else
{
x="Good evening";
}

The result of x will be:

Good morning

JavaScript Loops
Loops are handy, if you want to run the same code over and over again, each time with a
different value.
Often this is the case when working with arrays:
Instead of writing:
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY
Hamdard University

document.write(cars[5] + "<br>");

You can write:


for (vari=0;i<cars.length;i++)
{
document.write(cars[i] + "<br>");
}

Example:

<!DOCTYPE html>
<html>
<body>
<script>
for (i=1; i<=5; i++)
{
document.write(i + "<br/>")
}
</script>
</body>
</html>

while loop
<script>
var i=11;
while (i<=15)
{
document.write(i + "<br/>");
i++;
}
</script>

Do while loop
<script>
var i=21;
do{
document.write(i + "<br/>");
i++;
}while (i<=25);
</script>
FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY
Hamdard University

JavaScript Functions
The function can be called directly when an event occurs (like when a user clicks a button), and
it can be called from "anywhere" by JavaScript code.

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Hello World!");
}
</script>
</head>

<body>
<button onclick="myFunction()">Try it</button>
</body>
</html>

Declare the argument, as variables, when you declare the function:


function myFunction(var1,var2)
{
//some code
}

The variables and the arguments must be in the expected order. The first variable is given the
value of the first passed argument etc.

<!DOCTYPE html> Click the button to call a function with


<html> arguments
<body>

<p>Click the button to call a function with


arguments</p>

<button onclick="myFunction('Harry
Potter','Wizard')">Try it</button>

<script>
function myFunction(name,job)
FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY
Hamdard University

{
alert("Welcome " + name + ", the " + job);
}
</script>

</body>
</html>

Functions with a Return Value


<!DOCTYPE html> This example calls a function
<html> which performs a calculation,
<body> and returns the result:

<p>This example calls a function which performs a calculation, 12


and returns the result:</p>

<p id="demo"></p>

<script>
function myFunction(a,b)
{
return a*b;
}

document.getElementById("demo").innerHTML=myFunction(
4,3);
</script>

</body>
</html>
FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY
Hamdard University

JavaScript Objects
"Everything" in JavaScript is an Object: a String, a Number, an Array, a Date. In JavaScript, an object is
data, with properties and methods.

Creating JavaScript Objects


Almost "everything" in JavaScript is an object. Strings, Dates, Arrays, Functions. You can also create
your own objects.
This example creates an object called "person", and adds four properties to it:

<!DOCTYPE html> John is 50 years old.


<html>
<body>

<script>
var person=new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue";
document.write(person.firstname + " is " +
person.age + " years old.");
</script>

</body>
</html>

Accessing Object Properties


The syntax for accessing the property of an object is:
objectName.propertyName
FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY
Hamdard University

Lab Tasks:

Q1. Create a webpage that declaresa variable, assigns a value to it, displays the value, change the value,
and displays the value again and print the values on the webpage().

Q2. Create JS code to swap two values using third variable. And also without using third variable.

Q3. Create a webpage that inputs the name of the user using prompt box, welcomes the user when the
page is loaded, tells the length of the name entered and convert the name to the upper case.
Hint : to get input from user use the following:
var text = prompt('Enter your name ','Name' );
alert("Welcome "+ text);

Q4. Create an object Employee which has the following properties, id, name, designation, salary, phone
number and city.Create a webpage that inputs the data and on clicking the submit button display the
data in a dialogue box.

Note: Attach a snap shot of every above mentioned task.

Learning outcomes:

You might also like