Unit 5
Unit 5
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.
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 = "";
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"];
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.