Faculty of Computer Science

Course: Web Technology

(Lecture-1)

Khalilullah Akbari
Lecturer
Department of Computer Science
Email: khalil.akbari18@gmail.com, k.akbari@kardan.edu.af

Mobile: +93(0) 729908855

 Marks Division
Mid Term Exam 25 Marks

Final Term Exam 50 Marks

Semester Project 20 Marks

Attendance 5 Marks
 What is Script?
Script is an interpreted program that runs on client computer. It is
written in scripting Language.

Scripting Language:
• JavaScript (Client Side Scripting Language)

• PHP ( Server Side Scripting Language )

 Scripting Languages
• Server Side Scripts: Server-side
scripts are stored and executed on
server. These scripts are used to
provide user interaction. Data from
the client machine is sent to the
web server. Server-side scripts
process the request and send the
required page to the client browser.
 Scripting Languages
• Client-side scripts: Client-side scripts are
executed on client computers. The
browsers support the use of scripts. These
scripts can be embedded in HTML
documents. The browser interprets and
executes the code embedded in the page.
 What is JavaScript?
▪ JavaScript is a dynamic computer programming language. It is lightweight
and most commonly used as a part of web pages, whose implementations
allow client-side script to interact with the user and make dynamic pages.
It is an interpreted programming language with object-oriented
capabilities.

▪ Or

▪ JavaScript is used to include messages, scrolling, text, animations, menus,

pop-up window etc... JavaScript is directly embedded in HTML.
 What is JavaScript?
▪ Data (Contents):
▪ Static Content (HTML+CSS)

▪ Dynamic Content (PHP,ASP,JSP)

▪ Design:
▪ Static (HTML+CSS)

▪ Dynamic (HTML+CSS+JS)
 History of JavaScript
▪ JavaScript was created by Brendan Eich in 1995 in a span of 10 days. JavaScript
has become one of the world’s most popular programming language.

▪ It took Eich only 10 days to develop the scripting language, then known as
Mocha.

▪ Later, the marketing team replaced the name with 'LiveScript'. But due to
trademark reasons and certain other reasons, in December 1995, the language
was finally renamed to 'JavaScript‘ by Netscape. then, JavaScript came into
existence.
 What can in-browser JavaScript do?
▪ In-browser JavaScript can do everything related to webpage manipulation,
interaction with the user, and the webserver.
▪ Add new HTML to the page, change the existing content, modify styles.
▪ React to user actions, run on mouse clicks, pointer movements, key presses.
▪ Send requests over the network to remote servers, download and upload files
▪ Get and set cookies, ask questions to the visitor, show messages.
▪ Remember the data on the client-side (“local storage”).
 Application of JavaScript
▪ JavaScript is used to create interactive websites. It is mainly used
for:
▪ Client-side validation,
▪ Dynamic drop-down menus,
▪ Displaying date and time,
▪ Displaying pop-up windows and dialog boxes (like an alert dialog
box, confirm dialog box and prompt dialog box),
▪ Displaying clocks etc.
 Features of JavaScript
▪ All popular web browsers support JavaScript as they provide built-in
execution environments.

▪ JavaScript is an object-oriented programming language.

▪ It is a light-weighted and interpreted language.

▪ It is a case-sensitive language.

▪ It provides good control to the users over the web browsers.

 Variable
• A JavaScript variable is simply a name of storage location

<script>
var x = 10;
var y = 20.2;
var z=“Ali”;
document.write(z);
</script>
Naming Conventions for JavaScript Variables
▪ A variable name must start with a letter, underscore (_).

▪ A variable name cannot start with a number.

▪ A variable name can only contain alpha-numeric characters (A-z, 0-

9) and underscores.

▪ A variable name cannot contain spaces.

▪ A variable name cannot be a JavaScript keyword or a JavaScript

reserved word
The var and const Keywords
• The const keyword works exactly the same as var, except that
variables declared using const keyword cannot be reassigned later in
the code. Here's an example:
Example
var name = “Ali";
var age = 30;
var isStudent = true;
// Declaring constant
const PI = 3.14;
console.log(PI); // 3.14
// Trying to reassign
PI = 10; // error
 Conditional Statements
▪ In coding, we want to perform different actions for different decisions.
For that we can use conditional statements in our code.
▪ In JavaScript we have the following conditional statements:
▪ If is used to specify a block of code to be executed, if a specified
condition is true
▪ else is used to specify a block of code to be executed, if the same
condition is false
▪ if else if is used to specify a new condition to test, if the first
condition is false
▪ switch is used to specify many alternative blocks of code to be
executed
 Conditional Statements
If statement
<script>
var Marks=80;
if(Marks==80)
{
document.write("Your Grade is B"+ "<br>");
}
</script>
 Conditional Statements
If else statement
<script>
var M=50;
if(M>59)
{
document.write("You are pass" + "<br>");
}
else
{
document.write("You are Fail"+ "<br>");
}
</script>
 Conditional Statements
If else if statement
<script>
var page=“Contact";
if(page=="About") {
document.write("you are in the About Page"+ "<br>");
}
else if(page=="Home"){
document.write("you are in the Home Page"+ "<br>");
}
else if(page=="Contact"){
document.write("you are in the Contact Page"+ "<br>");
}
else {
document.write("you are selected wrong page "+ "<br>");
}
</script>
 Conditional Statements
switch
<script>
var G="A";
switch(G)
{
case "B":
document.write("you have Grade B "+ "<br>");
break;
case "A":
document.write("you have Grade A "+ "<br>");
break;
case "C":
document.write("you have Grade C "+ "<br>");
break;
default:
document.write("you are fail "+ "<br>");
break;
}
</script>
 JavaScript Array

▪ JavaScript array is an object that represents a collection of similar

type of elements.

▪ There are 3 ways to construct array in JavaScript

▪ By array literal
▪ By creating instance of Array directly (using new keyword)
▪ By using an Array constructor (using new keyword)
 JavaScript array literal
• The syntax of creating array using array literal is given below:

• var arrayname=[value1,value2.....valueN];

• As you can see, values are contained inside [ ] and separated by , (comma).
• Let's see the simple example of creating and using array in JavaScript.
<script>
var emp=[“Ali",“Ahmad",“Kareem"];
document.write(emp[0] + "<br/>");
document.write(emp[1] + "<br/>");
</script>
JavaScript Array directly (new keyword)
• The syntax of creating array directly is given below:
• var arrayname=new Array();
• Here, new keyword is used to create instance of array.
• Let's see the example of creating array directly.
<script>
var emp = new Array();
emp[0] = "Saleem";
emp[1] = "Zabi";
emp[2] = "Raihan";
document.write(emp[0] + "<br>");
document.write(emp[1] + "<br>");
document.write(emp[2] + "<br>");
</script>
JavaScript array constructor (new keyword)

• Here, you need to create instance of array by passing arguments in

constructor so that we don't have to provide value explicitly.
• The example of creating object by array constructor is given below.
<script>
var emp=new Array("Mahmood","Rabi","Saber");
document.write(emp[0] + "<br>");
document.write(emp[1] + "<br>");
document.write(emp[2] + "<br>");
</script>
 JavaScript loop
JavaScript supports different kinds of loops:

• for - loops through a block of code a number of times

• while - loops through a block of code while a specified condition is true

• do/while - also loops through a block of code while a specified condition is

true
 JavaScript Functions
• Function is a group of statement which is used to perform a specific task

• Advantage of JavaScript function

• Code reusability: We can call a function several times so it saves coding.

• Less coding: It makes our program compact.

 JavaScript Functions
<script>
function FirstFun()
{
alert("hello! this is the first Function");
}
</script>
<input type="button" onclick=" FirstFun()" value="call function"/>
 JavaScript local and Global variables

• A JavaScript local variable is declared inside block or function. It is

accessible within the function or block only. For example:
function abc(){
var x=10;//local variable
}
• A JavaScript global variable is accessible from any function. A variable i.e. declared
outside the function is known as global variable. For example:
<script>
var data=200;//gloabal variable
function a(){
document.writeln(data);
}
a();//calling JavaScript function
</script>
 JavaScript local and Global variables

<script>
// Sample function
function Sum()
{
var a=10;
var b=20;
document.write("a+b is equal to " + (a+b)+ "<br>" );
}
// function call
Sum();
</script>
 JavaScript local and Global variables

<script>
// function with parameter

function Square( a)
{
var s=a*a;
document.write("Square of a is ="+ s+ "<br>" );

}
// function call with parameter

Square(5);
</script>
 JavaScript local and Global variables

<script>
// function with return type

function Cube()
{
var b=10;

var c=b*b*b;
return c;
}
// function call with return type

document.write("Cube of b is "+ Cube()+ "<br>" );

</script>
 JavaScript local and Global variables
<script>
// local Variable
function abc(){
var x=10;//local variable
document.write(x +"<br>");
}
abc();

// Global variable
var data=200;//gloabal variable
function a(){
document.write(data +"<br>");
}
function b(){
document.write(data +"<br>");
}
//calling JavaScript function
a();
b();
</script>
 Assignment
Explain the following types of loops with practical example in JavaScript?

1.for/in
2.for/of