Lecture 1 JavaScript

JavaScript
Lecture-1
Intro
• JavaScript was created in 1995 by Brendan Eich,
an engineer at Netscape.
• It is a case sensitive language.
• It can be used in body and head.
• It is similar to c language.
• It has data type ( number, string, Boolean,
Symbol, object (function, array, date, RegExp),
null, undefined
Bismillah
• Let's start with a traditional Bismillah JavaScript!.
<HTML>
<HEAD> <TITLE></TITLE>
<SCRIPT language="javascript">
function Bismillah( )
{ alert (“Bismillah JavaScript!");
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="javascript : Bismillah( )"> First JavaScript
Prog. </A>
</BODY>
</HTML>
Separate JavaScript File (.js)
<html>
<head> <title> Call the Script-File </title>
<script src="first.js"> </script>
</head>
<body>
This is calling script from stored file having extention .js
<form>
<input type="button" value="Call the JavaScript"
onclick="Bismillah()"> </input>
</form> </body> </html>
• javaScript is free format language. No need to
define variables but
• Var can be used to define variables
– Var name=“asad”
• parseInt(): to convert string to
integer.(string,base-to-convert)
– parseInt("123", 10); // 123 parseInt("010", 10); //
10
prompt
<html>
<head> <title> Test Program </title>
<script language="JavaScript">
function GetMyData( )
{ nm= prompt("Enter Your Name:","");
rno= prompt("Enter Your Roll No:","");
alert("The Name of Roll No "+ rno +" is: "+ nm );}
</script>
</head>
<body>
<a href="javascript:GetMyData( )">My Bio Data</a>
</body>
</html>
Exercise:
• Make a web page and insert these three images...
• Make it so that as you click on each number, an
alert box pops up and says "You clicked on 1"
(or 2, or 3).
• Combine the prompt box with the above exercise

so that with each click of a button, it asks you for
your name and display message like "Hey Ali, you
picked number 1."
Operators
• Math operators:
–+, - , *, /,%
• Relational Operators:
– <, > , <= , >=, == , !=
• Logical Operators:
– && , || , !
Maths
<html>
<head> <title> Tested Program </title>
function Mul()
{ fno=prompt("Enter First No : ","");
sno=prompt("Enter Sec. No : ","");
m = fno * sno;
alert("The Multiplication of " + fno + " and " + sno + " = " + m ); }
function Add()
{ fno=prompt("Enter First No : ","");
sno=prompt("Enter Sec. No : ","");
sum = (fno * 1) + (sno * 1);
alert("The Sum of " + fno + " and " + sno + " = " + sum ); }
</script> </head>
<body>
<h1 align=center> My JavaScript Calculator <h1>
<form>
<input type=button value="Multiplication" onclick="Mul()">
<input type=button value=“ + " onclick="Add()">
Exercise
• Add the more Buttons for the following
operations and display the result in required
format:
– Operators : /(Div) , % ( remainder ) , --- (minus)
• Result Must be in given format :

35 / 5 = 7
23 % 9 = 5
30 – 12 = 18
Document Object Model-DOM
Objects, properties and methods.
• An object in javascript is a window, a frame,
an image, a form, a text , a textarea , the
document itself, a radio button etc.
• A property is some characteristic of an object...
the location of a document, the background
color of a document, whether a radio box is
checked or unchecked, the width of an image,
etc.
• A method is basically a function. A method does
something. For example close( ) is a method.
window.close() closes a window.
Follow me here
– We have the browser window...
• window
– In the window is this document...
• window.document
– In the document is a form...
• window.document.form
– In the form is an input...
• window.document.form.input
– And the input has a value...
• window.document.form.input.value
• This is an object hierarchy. This is how you would refer
to different properties of different objects on the page.
– An imaginary object hierarchy might be...
• world.country.state.city.street.house.person.name
– This would define the name property of a person.
Access Form’s Data
<html>
<head> <title> Test Program </title>
function ShowData()
{ n=document.myform.StNm.value;
r=document.myform.RNo.value;
alert("Name is "+n + " & Roll No is : "+ r ); }
</script>
</head>
<body>
<form name="myform">
Enter Your Name : <input type=text name="StNm"><br>
Enter Your Roll No : <input type=text name="RNo"><br>
<input type=button value="Show The Data"
onclick="ShowData()">
Exercise-Exchange
• Get input in two text boxes. When you click on
the button , the contents of the input boxes are
exchanged.
Enter Name: Ali Raza
Enter Class : PGD-2
Exchange the Contents
• After pressing button the result will be

Enter Name: PGD-2
Enter Class : Ali Raza
Exchange the Contents

Parameter Passing
<html>
<head> <title> Parameter Passing Program </title>
function BGCSetter(col)
{ window.document.bgColor =col; }
</script> </head>
<body>
<h1 align=center> My Background Color Program </h1> <hr>
<form name="myform">
<input type=button value=" Red "
onclick="BGCSetter('#ff0000')" >
<input type=button value=" Green "
onclick="BGCSetter('Green')" >
<input type=button value=" Blue " onclick="BGCSetter('Blue')"
>
Exercise-BGColor-Setter
• Add 3 more color selections to the page. ALSO,
add something which saves the original color of
the page before changing it. And using default
Color Button it sets the color back to this
default background color.
Default Color Green Blue

DOM Methods
The following is a list of the DOM search methods with a short description and
example:
■ getElementById Returns a reference to the first object with specified id
var btn = document.getElementById('btnSave');
■ getElementsByTagName Returns a live NodeList, which is a special array of all
elements with the specified tag name. The live NodeList automatically
updates if you add, delete, or modify elements. The following example
returns an array of all images:
var images = document.getElementsByTagName('img');
■ getElementsByName Returns a live NodeList of all elements with the specified
name. This works well with option buttons when all their options
typically have the same name. The following example retrieves an array
of all elements with the name pizzaSize:
var pizzaSizes = document.getElementsByName('pizzaSize');
• getElementsByClass Returns a live NodeList of
all elements with the specified CSS class name.
var pizzaParts= document.getElementsByClass('pizzaPart');
• querySelector Accepts a CSS selector as its parameter.
– The querySelector method returns the first matched element if one-to
many exist or null if there is no match. In addition to being supported on
the docu-ment object, the querySelector method exists on the Element
object, so you can query either the entire DOM or just an element’s
content. In the following example, the pound symbol (#) indicates a
search for an id. This example returns a reference to the button whose id
is btnSave
• var btn = document.querySelector('#btnSave');

• querySelector Accepts a CSS selector as its
parameter. The querySelectorAll method returns
a static NodeList of all elements that match the
class. This example returns a reference to the
elements whose CSS class name is pizzaPart:
var btn = document.querySelector('.pizzaPart');

Lecture 1 JavaScript

Uploaded by

Lecture 1 JavaScript

Uploaded by

JavaScript

• Combine the prompt box with the above exercise

• Result Must be in given format :

Enter Class : PGD-2

Exchange the Contents

• After pressing button the result will be

Exchange the Contents

Default Color Green Blue

• var btn = document.querySelector('#btnSave');

You might also like