Lecture17 IE321 DrAtifShahzad JS

DR ATIF SHAHZAD
IE-321
Fundamentals of
LECTURE #17 Computer Systems
RECAP
Data Model
Algorithm
Ingredients
Variables Memory
Logic Constructs Memory Cell
Pseudocode CPU
Logical variables
Flowchart
Conditional, Negation, Contrapositive,Biconditional Register
Symbols
AND, OR,NOT,XOR Program Counter
Flowcharting
Logic gates examples Fetch-Execute Cycle
Truth Tables Q&A Q&A
Boolean Algebra Spreadsheet Concepts: File Management
Examples Using Microsoft Excel Word Processing Basics Using Microsoft Word
Database Creating Charts in Microsoft Excel Microsoft Word Layout and Graphics Features
Q&A
Flat & Relational
Debugging Concepts Using Microsoft Excel Making and using compressed Files
Database
DBMS Presentation Concepts Using Microsoft PowerPoint WinZip, 7Zip
Tables & Fields Image Concepts Notepad++
Creating Tables in Wordpad
Access
Design view and Data Adobe acrobat
Sheet View Sumatra PDF
Primary Key & MathType
Foreign key
Relationships & ER
Diagram
Cyber Security
Queries &Simple SQL
Microsoft Visio
Security Problems
Interception
Spoofing
Microsoft Project Falsification
Repudiation
Security Technologies
Encryption
MAC
Dr. Atif Shahzad
9/27/2018
TODAY
3
Fundamentals of
Computer Systems
IE321
Javascript
Dr. Atif Shahzad
9/27/2018 5
The Web Structure
HTML: CSS: JavaScript:
Structure Behavior
Presentation
Dr. Atif Shahzad
9/27/2018 6
Javascript
HTML
• provides a page with structure and
CSS
• provides a page with appearance,
JavaScript
• provides a page with behavior.
Javascript
JavaScript
provides the ability

help enrich the
to add interactivity
user experience.
to a website
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
In HTML, JavaScript
JavaScript on the web
code must be inserted
lives inside the HTML
between <script> and
document.
</script> tags:
<script>
...
Dr. Atif Shahzad
</script>
9/27/2018 10
JavaScript
JS can be placed in the HTML page's
<body> section
<head> section.
Dr. Atif Shahzad
9/27/2018 11
JavaScript
Dr. Atif Shahzad
9/27/2018 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 External
Script scripts
• To embed a script on a page, just add the code
Embedded as thecontent of a script element:
• <script>
Script • … JavaScript code goes here

• </script>
• The other method uses the src attribute to

External point to a script file (with a .js suffix) by its
URL. In this case, the script element has no
content.
scripts • <script src="my_script.js"></script>
<html>
<head> </head>
<body>
<script>
document.write("<h1>HelloWorld!</h1>");
</script>
</body>
</html>
Script Placement
Javascript can be placed for scripts
either in the head of the document or at the very end of the body.
The placement depends on when it should be executed.
• 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
Script Placement
Javascript can be placed for scripts
either in the head of the document or at the very end of the body.
The placement depends on when it should be executed.
JS in head JS in body
<html>
<html>
<head>
<head> </head>
<script>
<body>
</script>
<script>
</head>
</script>
<body>
</body>
</body>
</html>
</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
Javascript Basics
Statements Comments Variables Data types
Comparison If/else Loops

Arrays
Operators Statements
Variable
Functions
Scope
Statement
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("Thank you."); is a statement.
The semicolon at the end indicates the end of the statement.
Comments
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.
/* 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
alert("Thanks for visiting");

Dr. Atif Shahzad
9/27/2018 24
document.write()
document.write("Another day");
Used for OUTPUT
document.write("Thanks for visiting");

Dr. Atif Shahzad
9/27/2018 25
document.write()
The document.write() function writes a
string into HTML document.
This function can be used to write text,
HTML, or both. <html>
<head> </head>
<body>
<script>
document.write("Hello World!");
</script>
Dr. Atif Shahzad
</body>
</html>
9/27/2018 26
prompt() Used for
INPUT
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).
var user = prompt("Please enter your name");
alert(user);
When a prompt box pops up, If the user clicks OK, the
A prompt box is often used
the user will have to click box returns the input value. If
to have the user input a value
Dr. Atif Shahzad
either OK or Cancel to proceed the user clicks Cancel, the box

before entering a page.
after entering the input value. returns null.
9/27/2018 27
Variables
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;
Data types
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
Arithmetic Operators
Dr. Atif Shahzad
9/27/2018 36
Assignment Operators
Dr. Atif Shahzad
9/27/2018 37
Increment/decrement Operators
• 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
Increment ++ original value and then increments the operand.
• 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
Decrement -- original value and then decrements the operand.
Dr. Atif Shahzad
9/27/2018 38
Increment/decrement Operators
Dr. Atif Shahzad
9/27/2018 39
Arrays
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
values in the array foo can be
For example,
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"
Comparison Operators
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"
If/else statements
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
var foo = [5, "five", "5"];
if( foo[1] === "five" ) {
alert("This is the word five, written in plain English.");}
In this case, the alert would fire because the foo variable with an
index of 1 (the second in the list) is identical to “five”.
var test = "testing";
if( test == "testing" ) {
alert( "You haven't changed anything." );
} else {
alert( "You've changed something!" );
}
Switch Statement
switch (expression) {
case n1:
statements
break; when you need to
case n2:
statements
test for multiple
break; conditions
default:
statements
}
Switch Statement
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"
Loops
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.
for 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 Loop--Exp
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.
} 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.
while Loop
basic structure:
while (condition) {
code block
}
The while loop repeats through

a block of code, as long as a
specified condition is true.
while Loop- Exp
Example:
var i=0;
while (i<=10) {
document.write(i + "<br />");
i++;
}
Functions
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.
Types of Functions
“out-of-the-box” (native JavaScript

functions)
(custom functions).
Native functions
Types of Functions
Native JavaScript custom

functions) functions
Native 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).
Custom
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.
}
Variable Scope
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.
Local vs Global variable
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 Variables
• <!DOCTYPE html> • function myFunction() {

• <html> • var carName = "Volvo";
• <body> • }
• function myFunction1()
• <p onclick="myFunction(),myFunction1();" • {
>Th e local variable carName cannot be ac • document.getElementById("demo").inner
cessed from code outside the function:</p
> HTML ="The type of carName is " + typeof
carName;
• }
• <p id="demo"></p>
• <script src="function.js"></script>
• </body>
• </html>
Return Statement
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)
NEVER hesitate to
contact should you
have any question
Dr. Atif Shahzad
Dr. Atif Shahzad
9/27/2018 67
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.
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,
Then we can use this function to indicate where this browser should be redirected on the
click of a button.
You then call this function from the < body > element’ s onclick event, like so:
function googleRedirect()
{
<button id="btn" onclick="googleRedirect()">Redirect to Google!</button> window.location.assign("http://www.w
3schools.com");
}
Window Properties/ Methods
In JavaScript, the browser is known
as the window object. properties
The window object has a number of
and methods that we can use to
interact with it.
Windows Events
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.
Similarly onclick and

For example, the onload
onmouseover handlers
event handler triggers a
trigger a script when the
script when the document
user clicks or mouses over
loads.
an element, respectively.
Events Handlers
Applying Event Handlers
• There are three ways we can apply event handlers within a webpage.
• <body onclick="myFunction();"> /* myFunction

will now run when the user clicks anything within
As an HTML 'body' */
attribute
• <script>
As a method attached • window.onclick = myFunction; /* myFunction will
run when the user clicks anywhere within the
to the element browser window */
• </script>
• <script>
Using • window.addEventListener("click", myFunction); /*
myFunction will run when the user clicks anywhere
addEventListener within the browser window */
• </script>
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.
The DOM is a
collection of
nodes:
• Element nodes
• Attribute nodes
• Text nodes
Example DOM tree
• <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>
Accessing
• Dot Notation
DOM Nodes
• 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;
Ways for Accessing 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 for Accessing 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()
• To get 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")
Manipulating
•
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 style attribute.
• document.getElementById("intro").style.color = "#fff";

Lecture17 IE321 DrAtifShahzad JS

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Lecture17 IE321 DrAtifShahzad JS

Încărcat de

Drepturi de autor:

Formate disponibile

DR ATIF SHAHZAD

provides the ability

JS can be placed in the HTML page's

Script • … JavaScript code goes here

• The other method uses the src attribute to

The placement depends on when it should be executed.

The placement depends on when it should be executed.

Statements Comments Variables Data types

Comparison If/else Loops

alert("Thanks for visiting");

document.write("Thanks for visiting");

The prompt() method takes two parameters.

either OK or Cancel to proceed the user clicks Cancel, the box

• The decrement operator decrements the numeric value of its

accessed by referencing their index

Here is an example of a for loop in action.

The while loop repeats through

“out-of-the-box” (native JavaScript

Native JavaScript custom

To expose a variable within a function to

• <!DOCTYPE html> • function myFunction() {

Similarly onclick and

• <body onclick="myFunction();"> /* myFunction

S-ar putea să vă placă și