Scribd
Upload
12 views32 pages

Unit 5

Uploaded by

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

Unit 5

Uploaded by

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

UKA TARSADIA UNIVERSITY

Bhulabhai Vanmalibhai Patel


Institute Of Computer Science

Unit 5
Scripting Language
Java Script
Introduction
◦Using JavaScript
◦Dynamically insert new content into a web page or
modify an existing HTML element.
◦Gather information about the current date.
◦React to events that take place in a browser.
◦ Talk to a program running on a web server.
Conti…
Server-side and Client-side programming

◦ Server side applications runs on a web server and deal with large
databases.
◦ Client side applications are lightweight programs , less powerful
than Server side applications and can’t deal with large databases.
<script> element
oPut scripts you want your browser to run right away in the <body>
section of your HTML.
oThe browser runs your script as soon as it reaches the <script>
element.
oIf you put your script at the beginning of the <body> section, your
browser processes the script before it displays the page.
Conti…
oIf you place an ordinary script in the <head> section of your HTML
document, it runs immediately, before the browser processes any
part of the markup.
oHowever, it’s more common to use the <head> section for scripts
that contain functions.
Variables
o Temporary containers that store important
information.
o Store numbers, objects, or pieces of text.
• Declaring variables
◦ var myVariable
• Store information in a variable
◦ var myMessage = "Everybody loves variables"
Functions
o It is a series of code instructions you group together and
give a name.
o It is a block of code designed to perform a particular task.
Advantages
◦ You can reuse code: Define the code once, and use it
many times.
◦ You can use the same code many times with different
arguments, to produce different results.
Functions
Syntax:
function name(parameter1, parameter2, parameter3) {
// code to be executed
}
Function Calling:
The code inside the function will execute when "something" calls the function:
•When an event occurs (when a user clicks a button)
•When it is called from JavaScript code
•Automatically (self called)
Functions
Function Return:
•When JavaScript reaches a return statement, the function will stop
executing.
•If the function was called from a statement, JavaScript will "return"
to execute the code after the calling statement.
•Functions often compute a return value. The return value is
"returned" back to the "caller":
Functions
Example:
<p id="demo"></p>

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

function myFunction(a, b) {
return a * b;
}
</script>
Dialog Boxes
Alert Dialog Box
◦ Used to give a warning message to the users.
Confirmation Dialog Box
◦ Used to take user's consent on any option
Prompt Dialog Box
◦ You want to pop-up a text box to get user input.
◦ This dialog box is displayed using a method called prompt() which takes two
parameters:
◦ a label which you want to display in the text box.
◦ a default string to display in the text box.
Dialog Boxes
Example:
<button onclick="myFunction()">Try it</button>
function myFunction() {
alert("Button clicked!");
}
Data Types
var length = 16; // Number
var lastName = "Johnson"; // String
var cars = ["Saab", "Volvo", "BMW"]; // Array
var x = {firstName:"John", lastName:"Doe"}; // Object
• var x = 16 + "John Doe";
◦ Output: 16John Doe
• var x = 16 + 4 + "John Doe";
◦ Output: 20John Doe
• var x = "John Doe" + 16 + 4;
◦ Output: John Doe164
Array
Arrays are used to store multiple values in a single variable.
Creating an Array
◦ var cars = ["Saab", "Volvo", "BMW"];
Array
• Example
<html>
<body>
<h2>JavaScript Arrays</h2>
<p id="demo"></p>
<script>
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];
</script>
</body>
</html>
Array Methods
pop()
◦ Removes the last element from an array
push()
◦ Adds a new element to an array (at the end)
shift()
◦ Removes the first array element and "shifts" all other elements to a lower index.
unshift()
◦ Adds a new element to an array (at the beginning), and "unshifts" older elements.
concat()
◦ Creates a new array by merging (concatenating) existing arrays.
sort()
◦ Sorts an array alphabetically
reverse()
◦ Reverse the order of the elements in an array
Conditional Statements
• When you write code, you want to perform different actions for
different decisions.
• You can use conditional statements in your code to do this.

1. if : to specify a block of code to be executed, if a specified condition


is true
Syntax:
if (condition) {
// block of code
}
Conditional Statements
1. if:
Example: Syntax:
if (condition) {
<p id="demo">Good Evening!</p> // block of code to be
<script> }
if (hour < 18) {
document.getElementById("demo").innerHTML = "Good day!";
}
</script>
2. if else:
Syntax:
Example: if (condition) {
<p id="demo"></p> // block of code
<script> } else {
var hour = new Date().getHours(); // block of code
var greeting; }
if (hour < 18) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
document.getElementById("demo").innerHTML = greeting;
</script>
3. else if:
Example: Syntax:
<p id="demo"></p> if (condition1) {
<script> // code
var time = new Date().getHours();} else if (condition2) {
var greeting; // code
if (time < 10) { } else {
greeting = "Good morning"; // code
} else if (time < 20) { }
greeting = "Good day";
} else {
greeting = "Good evening";
}
document.getElementById("demo").innerHTML = greeting;
</script>
JavaScript Switch Statement:
How it works:
•The switch expression is evaluated once.
•The value of the expression is compared with the values of each case.
•If there is a match, the associated block of code is executed.
•If there is no match, the default code block is executed.
Syntax:
switch(expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}
Example :
switch (new Date().getDay()) {
case 6:
text = "Today is Saturday";
break;
case 0:
text = "Today is Sunday";
break;
default:
text = "Looking forward to the Weekend";
}
JavaScript For Loop:

Loops are handy, if you want to run the same code over and over again, each time with
a different value.
JavaScript supports different kinds of loops:
• for - loops through a block of code a number of times
• for/in - loops through the properties of an object
• for/of - loops through the values of an iterable object
• 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
1. for loop:
<p id="demo"></p>
<script>
var text = "";

for (var i = 0; i < 5; i++) {


text += "The number is " + i + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>
2. for in loop:
The JavaScript for in statement loops through the properties of an Object:
Syntax:
for (key in object) {
// code block
}
Example:
<p id="demo"></p>
<script>
var person = {fname:“Ami", lname:“Acharya", age:25};
var txt = "";
for (var x in person) {
txt += person[x] + " ";
}
document.getElementById("demo").innerHTML = txt;
</script>
3. for of loop:
• The JavaScript for of statement loops through the values of an iterable object.

• It lets you loop over iterable data structures such as Arrays, Strings, Maps,
NodeLists, and more:

Syntax:
for (variable of iterable) {
// code block
}
o variable - For every iteration the value of the next property is assigned to the
variable. Variable can be declared with const, let, or var.
o iterable - An object that has iterable properties.
Example:
1. Looping over an Array Output:
BMW
<p id="demo"></p> Volvo
Mini
<script>
const cars = ["BMW", "Volvo", "Mini"];

let text = "";


for (let x of cars) {
text += x + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>
Example: Output:
2. Looping over a String J
a
<p id="demo"></p>
v
a
<script> s
let language = "JavaScript"; c
let text = ""; r
for (let x of language) { i
text += x + "<br>"; p
}
t
document.getElementById("demo").innerHTML = text;
</script>
4. while loop:
Syntax:
while (condition) {
// code block
}
Example:
<p id="demo"></p>
<script>
let text = "";
let i = 0;
while (i < 10) {
text += "<br>The number is " + i;
i++;
}
document.getElementById("demo").innerHTML = text;
</script>
• The code in the loop will run, over and over again, as long as a variable (i) is less than 10
Syntax:
do {
// code block
}
while (condition);
Example:
<p id="demo"></p>
<script>
let text = "“;
let i = 0;
do {
text += "<br>The number is " + i;
i++;
}
while (i < 10);
document.getElementById("demo").innerHTML = text;
</script>
The loop will always be executed at least once, even if the condition is false, because the
code block is executed before the condition is tested.

You might also like