Lecture17 ie321 dr_atifshahzad_js

DR ATIF SHAHZAD
Fundamentals of
Computer Systems
IE-321
LECTURE #17

RECAP
Logic
Logical variables
Conditional, Negation, Contrapositive,Biconditional
AND, OR,NOT,XOR
Logic gates
TruthTables
BooleanAlgebra
Examples
Q&A
MicrosoftVisio
Microsoft Project
Spreadsheet Concepts:
Using Microsoft Excel
Creating Charts in Microsoft Excel
Debugging Concepts Using Microsoft Excel
Presentation Concepts Using Microsoft PowerPoint
Image Concepts
Memory
Memory Cell
CPU
Register
Program Counter
Fetch-Execute Cycle
Q&A
File Management
Word Processing Basics Using MicrosoftWord
MicrosoftWord Layout and Graphics Features
Making and using compressed Files
WinZip, 7Zip
Notepad++
Wordpad
Adobe acrobat
Sumatra PDF
MathType
Database
Flat & Relational
Database
DBMS
Tables & Fields
Creating Tables in
Access
Design view and Data
Sheet View
Primary Key &
Foreign key
Relationships & ER
Diagram
Queries &Simple SQL
Cyber Security
Security Problems
Interception
Spoofing
Falsification
Repudiation
Security Technologies
Encryption
MAC
Data Model
Algorithm
Ingredients
Variables
Constructs
Pseudocode
Flowchart
Symbols
Flowcharting
examples
Q&A

9/27/2018 3
Dr.AtifShahzad
TODAY

Fundamentals of
Computer Systems
IE321

Javascript
9/27/2018
Dr.AtifShahzad
5

TheWeb Structure
9/27/2018
Dr.AtifShahzad
6
HTML:
Structure
CSS:
Presentation
JavaScript:
Behavior

HTML
• provides a page with structure and
CSS
• provides a page with appearance,
JavaScript
• provides a page with behavior.
Javascript

JavaScript
provides the ability
to add interactivity
to a website
help enrich the
user experience.
Javascript

JavaScript doesn’t need to be run through any
form of compiler that interprets our human-
readable code into something the browser can
understand.
The browser effectively reads the code and
interprets it on the fly.
Javascript

JavaScript
9/27/2018
Dr.AtifShahzad
10
JavaScript on the web
lives inside the HTML
document.
In HTML, JavaScript
code must be inserted
between <script> and
</script> tags:
<script>
...
</script>

JavaScript
9/27/2018
Dr.AtifShahzad
11
JS can be placed in the HTML page's
<body> section
<head> section.

JavaScript
9/27/2018
Dr.AtifShahzad
12

Adding Javascript to a Page
Like CSS,
you can embed a script right in a document or
keep it in an external file and link it to the page.
Embedded
Script
External
scripts

• To embed a script on a page, just add the code
as thecontent of a script element:
• <script>
• … JavaScript code goes here
• </script>
Embedded
Script
• The other method uses the src attribute to
point to a script file (with a .js suffix) by its
URL. In this case, the script element has no
content.
• <script src="my_script.js"></script>
External
scripts

<html>
<head> </head>
<body>
<script>
document.write("<h1>HelloWorld!</h1>");
</script>
</body>
</html>

The placement depends on when it should be executed.
Javascript can be placed for scripts
either in the head of the document or at the very end of the body.
Script Placement
• The best place to reference JavaScript files is right before the closing</bo
dy> tag so that the JavaScript file is loaded after all of the HTML has been
parsed.
• Putting it in header blocks the rendering of the page unless the whole file
is downloaded and executed, so moving the script to the bottom
improves the perceived performance.
• However, at times, JavaScript is needed to help render HTML and
determine it’s behavior, thus may be referenced within a document’s head

The placement depends on when it should be executed.
Javascript can be placed for scripts
either in the head of the document or at the very end of the body.
Script Placement
JS in head
<html>
<head>
<script>
</script>
</head>
<body>
</body>
</html>
JS in body
<html>
<head> </head>
<body>
<script>
</script>
</body>
</html>

<html>
<head>
<title></title>
<script type="text/javascript">
alert("This is an alert box!");
</script>
</head>
<body>
</body>
</html>

External JavaScript
Scripts can also be placed in external files.
External scripts are useful and practical when the same
code is used in a number of different web pages.
JavaScript files have the file extension.js

External JavaScript
<html>
<head>
<title> </title>
<script src=“IE321.js"></script>
</head>
<body>
</body>
</html> alert("This is an alert box!");
IE321.js

Statements Comments Variables Data types
Arrays
Comparison
Operators
If/else
Statements
Loops
Functions
Variable
Scope
Javascript Basics

A statement is a command that tells the
browser what to do.
A script is made up of a series of statements.
For example,alert("Thankyou.");is a statement.
The semicolon at the end indicates the end of the statement.
Statement

Single-line comments,
use two slash characters (//) at the beginning of the
line.
// This is a single-line comment.
Multiple-line comments
use the same syntax that you’ve seen in CSS.
Everything within the /* */ characters is ignored by
the browser.
Comments
/* This is a multi-line comment.
Anything between these sets of characters will be
completely ignored when the script is executed.
This form of comment needs to be closed. */

alert()
Alerts the user with some Message
Used for OUTPUT
9/27/2018
Dr.AtifShahzad
24
alert("Thanks for visiting");

document.write()
document.write("Another day");
Used for OUTPUT
9/27/2018
Dr.AtifShahzad
25
document.write("Thanks for visiting");

<html>
<head> </head>
<body>
<script>
document.write("HelloWorld!");
</script>
</body>
</html>
document.write()
9/27/2018
Dr.AtifShahzad
26
The document.write() function writes a
string into HTML document.
This function can be used to write text,
HTML, or both.

prompt()
The prompt() method takes two parameters.
The first is the label, which you want to display in the text
box.
The second is a default string to display in the text box
(optional).
9/27/2018
Dr.AtifShahzad
27
A prompt box is often used
to have the user input a value
before entering a page.
When a prompt box pops up,
the user will have to click
either OK or Cancel to proceed
after entering the input value.
If the user clicks OK, the
box returns the input value. If
the user clicks Cancel, the box
returns null.
var user = prompt("Please enter your name");
alert(user);
Used for
INPUT

A variable is like an information container.
You give it a name and then assign it a value, which can be a
number, text string, an element in the DOM, or a function.
The following declaration creates a variable with the name
“foo” and assigns it the value 5:
var foo = 5;
Variables

Undefined
The simplest of these data types is “undefined.” If we
declare a variable by giving it a name but no value, that
variable contains a value of “undefined.”
var foo;
alert(foo); // This will open a dialog containing "undefined".
Null
Assigning a variable of “null” (again, case-sensitive) simply
says,“Define this variable, but give it no inherent value.”
var foo = null;
alert(foo); // This will open a dialog containing "null".
Data types

Numbers
You can assign variables numeric values.
var foo = 5;
alert(foo); // This will open a dialog
containing "5".
The word “foo” now means the exact same thing as
the number five. Because JavaScript is “loosely
typed,” we don’t have to tell our script to treat the
variable foo as the number five.
Data types

Numbers
We can use classic mathematical notation: +,-,
*, and / for plus, minus, multiply, and divide,
respectively.
In this example, we use the plus sign (+) to add
foo to itself (foo + foo).
var foo = 5;
alert(foo + foo); // This will alert "10".
Data types

Strings
a line of text.
Enclosing characters in a set of single or double quotes
indicates that it’s a string.
var foo = "five";
alert( foo ); // This will alert "five"
The variable foo is now treated exactly the same as the word
“five”.
Data types

Strings
When the plus sign is used with strings, it sticks the strings
together (called concatenation) into one long string, as shown
in this example.
var foo = "bye"
alert (foo + foo); // This will alert "byebye“
var foo = "5";
alert( foo + foo ); // This will alert "55“
var foo = "five";
var bar = 5;
alert( foo + bar ); // This will alert "five5"
Data types

Strings
var mystring1 = "I am learning ";
var mystring2 = "JavaScript in IE321.";
document.write(mystring1 + mystring2);
Data types

Boolean
assign a variable a true or false value.
Boolean values use the true and false keywords
built into JavaScript, so quotation marks are
NOT necessary.
var foo = true; // The variable "foo" is now true
Data types

Arithmetic Operators
9/27/2018
Dr.AtifShahzad
36

Assignment Operators
9/27/2018
Dr.AtifShahzad
37

Increment/decrement Operators
Increment ++
• The increment operator increments the numeric value of its
operand by one. If placed before the operand, it returns the
incremented value. If placed after the operand, it returns the
original value and then increments the operand.
Decrement --
• The decrement operator decrements the numeric value of its
operand by one. If placed before the operand, it returns the
decremented value. If placed after the operand, it returns the
original value and then decrements the operand.
9/27/2018
Dr.AtifShahzad
38

Increment/decrement Operators
9/27/2018
Dr.AtifShahzad
39

A group of multiple values (called members) that
can be assigned to a single variable.
It is a way to store a list of items, or values.
The values in an array are said to be
indexed,
meaning you can refer to them by number according to the
order in which they appear in the list.The first member is
given the index number 0, the second is 1, and so on.
Arrays

For example,values in the array foo can be
accessed by referencing their index
number:
var foo = [5, "five", "5"];
alert( foo[0] ); // Alerts "5"
alert( foo[1] ); // Alerts "five"
alert( foo[2] ); // Also alerts "5"
Arrays

To compare two values,
JavaScript evaluates the statement and gives us
back a Boolean value depending on whether the
statement is true or false.
• == Is equal to
!= Is not equal to
• === Is identical to (equal to and of the same data type)
!== Is not identical to
> Is greater than
>= Is greater than or equal to
< Is less than
<= Is less than or equal to
Comparison Operators

alert( 5 == 5 ); // This will alert "true"
alert( 5 != 6 ); // This will alert "true"
alert( 5 < 1 ); // This will alert "false"
Comparison Operators

If/else statements are how we get
JavaScript to ask itself a true/false
question.
structure of a conditional statement:
if( true ) {
// Do something.
}
If/else statements

switch (expression) {
case n1:
statements
break;
case n2:
statements
break;
default:
statements
}
Switch Statement
when you need to
test for multiple
conditions

var day = 2;
switch (day) {
case 1:
document.write("Monday");
break;
case 2:
document.write("Tuesday");
break;
case 3:
document.write("Wednesday");
break;
default:
document.write("Another day");
}
// Outputs "Tuesday"
Switch Statement

There are cases in which we’ll want to go
through every item in an array and do
something with it,
several ways to write a loop, but the for
method is one of the most popular.
Loops

basic structure:
for( initialize the variable; test the condition; alter the value; )
{
// do something
}
Here is an example of a for loop in action.
for( var i = 0; i <= 2; i++ ) {
alert( i ); //This loop will trigger three alerts, reading "0", "1“,
and "2" respectively.
}
for Loops

check each item in an array” example.
var items = ["foo", "bar", "baz"];// First we create an array.
for( var i = 0; i <= items.length; i++ ) {
alert( items[i] ); //This will alert each item in the array.
}
For Loop--Exp
items.length
•Instead of using a number to limit the number of times the loop runs, we’re using a property built right into
JavaScript to determine the “length” of our array, which is the number of items it contains.
.length
items[i]
•We can use i variable inside of the loop to reference each index of the array.

basic structure:
while (condition) {
code block
}
while Loop
The while loop repeats through
a block of code, as long as a
specified condition is true.

Example:
var i=0;
while (i<=10) {
document.write(i + "<br />");
i++;
}
while Loop- Exp

A function is a bit of code that doesn’t run until it
is referenced or called.
alert() is a function built into our browser.
Functions

“out-of-the-box” (native JavaScript
functions)
(custom functions).
Native functions
Types of Functions

Native JavaScript
functions)
custom
functions
Types of Functions

hundreds of predefined functions built
into JavaScript, including:
alert(), confirm(), and prompt()
» These functions trigger browser-level dialog boxes.
Date() : Returns the current date and time.
parseInt("123"):This function will, among other things, take a
string data type containing numbers and turn it into a number
data type.The string is passed to the function as an argument.
SetTimeout(functionName, 5000):Will execute a function after
a delay.The function is specified in the first argument, and the
delay is specified in milliseconds in the second (in the example,
5000 milliseconds equals 5 seconds).
Native functions

To create a custom function, we type the
function keyword followed by a name for
the function, followed by opening and closing parentheses, followed
by opening and closing curly brackets.
function name() {
// Our function code goes here.
}
Custom
functions

There are times when you’ll want a variable
that you’ve defined within a function to be
available anywhere throughout your script.
Other times, you may want to restrict it and
make it available only to the function it lives
in.
This notion of the availability of the variable is
known as its scope.
Variable Scope

A variable that can be used by any of the
scripts on your page is globally scoped.
A variable that’s available only within its
parent function is locally scoped.
JavaScript variables use functions to manage
their scope. If a variable is defined outside of
a function, it will be globally scoped and
available to all scripts.
Variable Scope

When you define a variable within a function and you want
it to be used only by that function, you can flag it as locally
scoped by preceding the variable name with the var
keyword.
var foo = "value";
To expose a variable within a function to
the global scope, we omit the var keyword
and simply define the variable:
foo = "value";
Local vs Global variable

A variable declared outside a
function, becomes GLOBAL.
var carName = "Volvo";
// code here can use carName function
myFunction() {
// code here can use carName
}
Local vs Global variable

• <!DOCTYPE html>
• <html>
• <body>
• <p onclick="myFunction(),myFunction1();"
>Th e local variable carName cannot be ac
cessed from code outside the function:</p
>
• <p id="demo"></p>
• <script src="function.js"></script>
• </body>
• </html>
• function myFunction() {
• var carName = "Volvo";
• }
• function myFunction1()
• {
• document.getElementById("demo").inner
HTML ="The type of carName is " + typeof
carName;
• }
Local vs Global Variables

The return statement stops the execution
of a function and returns a value from that
function.
Return Statement

function addNumbers(a,b) {
return a + b;
}
Any reference you make to that function gives you the
result of the function.
alert( addNumbers(2,5) ); //Alerts "7“
Return Statement

What will be the output of the following
function
function bar() {
return 3;
alert(“displays alert.");
}
var x = bar ();
alert(x)
Return Statement

9/27/2018
Dr.AtifShahzad
67
NEVER hesitate to
contact should you
have any question
Dr.Atif Shahzad

<button id="btn" onclick="googleRedirect()">Redirect to Google!</button>
Browser Object Model
JavaScript gives you access to and the ability to manipulate the
parts of the browser window itself.
For example, we can make the browser to redirect to some URL on the click of a button.
You then call this function from the < body > element’ s onclick event, like so:
Then we can use this function to indicate where this browser should be redirected on the
click of a button.
To do this, first you need to add a function in a javascript file that is going to be
triggered when the button is clicked,
function googleRedirect()
{
window.location.assign("http://www.w
3schools.com");
}

Window Properties/ Methods
In JavaScript, the browser is known
as the window object. The window object has a number of
properties and methods that we can use to
interact with it.

Windows Events
For example, the onload
event handler triggers a
script when the document
loads.
Similarly onclick and
onmouseover handlers
trigger a script when the
user clicks or mouses over
an element, respectively.
An event is an action that can be detected with
JavaScript, such as when the document loads or
when the user clicks on an element or just
moves her mouse over it.
In scripts, an event is identified by an event
handler.

• There are three ways we can apply event handlers within a webpage.
Applying Event Handlers
• <body onclick="myFunction();"> /* myFunction
will now run when the user clicks anything within
'body' */As an HTML
attribute
• <script>
• window.onclick = myFunction; /* myFunction will
run when the user clicks anywhere within the
browser window */
• </script>
As a method attached
to the element
• <script>
• window.addEventListener("click", myFunction); /*
myFunction will run when the user clicks anywhere
within the browser window */
• </script>
Using
addEventListener

The DOM is a
collection of
nodes:
• Element nodes
• Attribute nodes
• Text nodes
Document Object Model
The Document Object Model, or DOM, represents
the web page that is loaded into the browser using a
series of objects.The main object is the document
object, which in turn contains several other child
objects.

• <html>
• <head>
• <title>Document title</title>
• <meta charset="utf-8">
• </head>
• <body>
• <div>
• <h2>Subhead</h2>
• <p>Paragraph text with a
<a href="foo.html">link</a> here.</p>
• </div>
• <div>
• <p>More text here.</p>
• </div>
• </body>
• </html>
Example DOM tree

• Dot Notation
• In order to access the different objects in the DOM, you start with the doc
ument object, working down to the object that holds the data you are aft
er.
• Each object is separated by a period or full - stop character; hence, this is
known as a dot notation .
• For example the statement in the following example says to look on the p
age (document), find the element that has the id value “beginner”, find t
he HTML content within that element (innerHTML),
• document.getElementById( "beginner" ).innerHTML;
Accessing
DOM Nodes

• There are several methods for accessing nodes in the document.
• By element name
• getElementsByTagName()
• document.getElementsByTagName("p");
• By id attribute value
• getElementById()
• This method returns a single element based on that element’s ID (the value of its id
attribute), which we provide to the method as an argument:
• document.getElementById("lead-photo");
Ways forAccessing Nodes

• By class attribute value
• getElementsByClassName()
• This allows you to access nodes in the document based on
the value of a class attribute
• document.getElementsByClassName("column");
• By selector
• querySelectorAll()
• It allows you to access nodes of the DOM based on a CSS-style selector.
• document.querySelectorAll(".sidebar p");
• Accessing an attribute value
• getAttribute()
• Toget the value of an attribute attached to an element node, we call getAttribute()
with a single argument: the attribute name.
• document.getElementById("lead-image").getAttribute("src")
Ways forAccessing Nodes

• DOM also gives us several built-in methods for manipulating
elements their attributes, and their contents.
• setAttribute()
• It is used to set the value of element attributes, for example here it sets src
attribute to a new image name. This method requires two arguments: the a
ttribute to be changed and the new value for that attribute.
• document.getElementById("lead-image"). setAttribute("src", "lespaul.jpg");
• innerHTML
• Suppose we need a quick way of adding a paragraph of text to the first element
on our page with a class of intro:
• document.getElementsByClassName("intro"). innerHTML =“<p>This is our intro text</p>";;
• Style
• DOM also allows us to add, modify, or remove a CSS style from an element using the style property. It
works similarly to applying a style with the inline styleattribute.
• document.getElementById("intro").style.color = "#fff";
Manipulating
Nodes

Lecture17 ie321 dr_atifshahzad_js

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Lecture17 ie321 dr_atifshahzad_js

Similar a Lecture17 ie321 dr_atifshahzad_js (20)

Más de Atif Shahzad

Más de Atif Shahzad (20)

Último

Último (20)

Lecture17 ie321 dr_atifshahzad_js