Chap3 Javascript

1
Faculty of
Computer and
Information
Sciences
Information Technology
Department
Web Systems and
Technologies
IT 481 T
Lecture 3: Javascript
2
W3C Ethical Web Principles
“The web should empower an equitable, informed and
interconnected society. It has been, and should continue to be,
designed to enable communication and knowledge-sharing for
everyone. In order for the web to continue to be beneficial to
society, we need to consider the ethical implications of our work
when we build web technologies, applications, and sites.” W3C
3
W3C Ethical Web Principles
• There is one web: When we are adding new web technologies and platforms, we will build
them to cross regional and national boundaries. People in one location should be able to
view web pages from anywhere that is connected to the web.
• The web is for all people: The platform should accommodate people on low bandwidth
networks and with low specification equipment. The web platform and the tools we use to
create it must be accessible to people with disabilities, including visual, auditory, physical,
speech, cognitive, language, learning, and neurological disabilities.
• Security and privacy are essential: When we add features to the web platform, we are
making decisions that may change the ability of people to protect their personal data. This
data includes their conversations, their financial transactions and how they live their lives.
• The web is multi-browser, multi-OS and multi-device: We will not create web technologies
that encourage the creation of websites that work only in one browser, or only on particular
hardware. We expect that content provided by accessing a URL should yield a thematically
consistent experience when someone is accessing it from different devices.
4
Ethical issues in Web development
1. Addictive design: Every developer yearns to create content
that people love to use -- that's just good design. The problem
is that some teams craft apps that people get addicted to
2. Corporate ownership of personal data: AI-based processing of
contextual data about customers has increased. The ethical
question is what to do with that data
3. Weak cyber security and personally identifiable information
(PII) protection: Developers often only address security after
code release. To address this ethical responsibility for
customer safety, developers need education about
cybersecurity attacks.
5
Introduction
• Javascript is an open and cross-platform programming
language.
• It allows client-side script to interact with the user and make
dynamic pages.
• It is an interpreted programming language with object-
oriented capabilities.
6
Advantages of JavaScript
• Less server interaction − You can validate user
input before sending the page off to the
server, which means less load on your server.
• Immediate feedback to the visitors − They
don't have to wait for a page reload to see if
they have forgotten to enter something.
• Increased interactivity − You can create
interfaces that react when the user clicks on
an element or activates it via the keyboard.
7
Embedding script code
• JavaScript statements are placed within the <script>...
</script>.
• The <script> tags can be placed anywhere within the web
page
<script >
JavaScript code
</script>
8
Example
<html>
<body>
<script language="javascript" type="text/javascript">
alert("Hello World!");
</script>
</body>
</html>
9
Placement in HTML File
• There is a flexibility given to include JavaScript
code anywhere in an HTML document.
– Script in <head>...</head> section.
– Script in <body>...</body> section.
– Script in an external file and then include in
<head>...</head> section.
10
JavaScript in <head>
<head>
<script type="text/javascript">
function DisplayHello()
{
alert("Hello World")
}
</script>
</head>
<body>
<input type="button" onclick="DisplayHello()"
value="Say Hello" />
</body>
11
JavaScript in <body>
<body>
<h1 id=firstheading>Javascript
in Body</h1>
<p id="demo">A Paragraph</p>
<button onclick="myFunction()">
Try it</button>
<script>
function myFunction() {
document.getElementById("demo").
innerHTML = "Paragraph
changed.";
}
</script>
</body>
12
External JavaScript
• Scripts can also be placed in external files
• JavaScript files have the file extension .js.
External file: myScript.js
document.getElementById("demo").innerHTML = "Para
graph changed.";
}
• To use an external script, put the name of the script file in the
src (source) attribute of a <script> tag:
<script src="myScript.js"></script>
13
• The script will behave as if it was located exactly where the
<script> tag is located.
• Placing scripts in external files has some advantages:
– It separates HTML and code
– It makes HTML and JavaScript easier to read and maintain
• To add several script files to one page, use several script tags:
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
14
Javascript output
• JavaScript can "display" data in different ways:
– Writing into an HTML element using innerHTML.
– Writing into an HTML output
using document.write()
– Writing into an alert box, using window.alert()
(same as alert())
15
JavaScript Datatypes
• JavaScript defines three primitive data types −
– Numbers (integer and floating-point values). eg.
123, 120.50 etc.
– Strings e.g. "This text string" (the quotes are
compulsory)
– Boolean e.g. true or false.
• JavaScript supports a composite data type
known as object.
16
JavaScript Datatypes (cont.)
• JavaScript has dynamic types. This means that the same variable
can be used to hold different data types:
var x; // Now x is undefined
document.write('x is ' + typeof x + '<br>');
x = 5; // Now x is a Number
x = "Nourah"; // Now x is a String
• JavaScript arrays are written with square brackets.

• Array items are separated by commas.
var cars = ["Saab", "Volvo", "BMW"];
typeof cars; // returns “object” not array
document.write('cars is ' + typeof cars);
17
Variables
• Before you use a variable in a JavaScript program, you must
declare it. Variables are declared with the var keyword:
<script >
var name="PNU";
var x, y; Write on the html
x=0; page
document.write(name);
</script>
18
Exercise
• Create a variable called carName, assign the value
"Volvo" to it, and display it.
<!DOCTYPE html>
<html>
<body>
<script>
var carName="Volvo";
document.write(carName);
</script>
</body>
</html>
19
Variable Scope
• The scope of a variable is the region of your program in which
it is defined.
• JavaScript variables have only two scopes.
– Global Variable can be defined anywhere in JavaScript code.
– Local Variables − will be visible only within a function where it is
defined.
• Within the body of a function, a local variable takes
precedence over a global variable with the same name  If
you declare a local variable or function parameter with the
same name as a global variable, you effectively hide the global
variable.
• The same way, local variable hides function parameter
20
Global or local?
<html>
<body onload = checkscope("parameter");>
<script>
var myVar = "global"; // Declare a global
variable
function checkscope( myVar) {
var myVar = "local"; // Declare a local variable
document.write(myVar);
}
</script>
</body>
</html>
21
Operators
• JavaScript supports the following types of
operators.
– Arithmetic Operators
– Comparison Operators
– Logical (or Relational) Operators
– Assignment Operators
– Conditional (or ternary) Operators
22
Arithmetic operators
Operator Description
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus (Remainder)
++ Increment
-- Decrement
23
Comparison Operators
== equal to
!= not equal
> greater than
< less than
>= greater than or equal to
<= less than or equal to
? ternary operator
If Condition is true? Then value X : Otherwise value Y

C=(a > b) ? 100 : 200;
24
Logical Operators
&& logical and

|| logical or
! logical not
Type Operators
typeof Returns the type of a variable
instanceof Returns true if an object is an instance of an object type
25
Example
var x;
document.write(typeof x);
document.write("<br>");
document.write(x instanceof Number);
26
Typeof operator
Type String Returned by typeof

Number "number"
String "string"
Boolean "boolean"
Object "object"
Function "function"
Undefined "undefined"
27
Exercise
<body>
<script>
var a = 10; var b = "hello";
actualType = (typeof b == "String" ? "B is String" : "B is Numeric");
document.write("Result => ");
document.write(actualType);
document.write("<br />");
actualType = (typeof a == "string" ? "A is String" : "A is Numeric");
document.write("Result => ");
document.write(actualType);
document.write("<br />");
</script>
</body>
28
Functions
• A JavaScript function is a block of code designed to perform a
particular task.
• No types or var for parameters
• return value is optional
function myFunction(p1, p2) {

return p1 * p2;
// The function returns the product of p1
and p2
• }To invoke a function somewhere later in the script, you would
simply need to write the name of that function
myfunction(1, 10);
29
Events
• JavaScript's interaction with HTML is handled through events
that occur when the user or the browser manipulates a page.
– An HTML web page has finished loading
– An HTML input field was changed
– User clicks a button or any element (we can click a paragraph)
– User closes or resizes a window
• HTML allows event handler attributes, with JavaScript code,
to be added to HTML elements.
<element event="some JavaScript">
30
Example
<button
onclick="document.getElementById('whatever').
innerHTML=Date()">The time is?
</button>
<p id= "whatever" ></p>
31
Common HTML Events
Event Description
onchange An HTML element has been changed
onclick The user clicks an HTML element
onmouseover The user moves the mouse over an HTML element
onmouseout The user moves the mouse away from an HTML element
onkeydown The user pushes a keyboard key

onload The browser has finished loading the page
onsubmit The user clicks the submit button of a form
<input type=text onchange="alert()">
32
onsubmit Event
<body>
<form action="/action_page.php" onsubmit="myFunction()">

Enter name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
<script>
alert("The form was submitted");
}
</script>
</body>
33
JavaScript can change CSS style
34
35
JavaScript Form Validation
36
37
Advanced : CSS animation
<button id="growing"
onclick="this.style.fontSize = '36px';
this.style.color = 'red';">
Click me
</button>
<style>
#growing {
transition: font-size 10s, color 20s;
}
</style>
38
let vs var
• Four ways of variable declaration:
– let
– const
– var
– Nothing
• The var declaration is similar to let. Most of the time
we can replace let by var or vice-versa
• let was introduced in 2015
39
“var” has no block scope
• Variables, declared with var, are either function-
scoped or global-scoped. They are visible through
blocks.
if (true) { var test = "visible"; }
document.write(test);
// visible, the variable lives after if
• As var ignores code blocks, we’ve got a global
variable test.
• If we used let, the variable would only be visible
inside if
if (true) { let test = "visible"; }
document.write(typeof test);
document.write(test);
// Error: test is not defined
40
Book Chapter/ References:
Web Technologies: A Computer Science
Perspective by Jeffrey C. Jackson, Pearson
Education, chap. 4 p. 192-209
THANK
YOU
Assignment Operators
Operator Example Same As

= x=y x=y
+= x += y x=x+y
-= x -= y x=x-y
*= x *= y x=x*y
/= x /= y x=x/y
%= x %= y x=x%y
43

Chap3 Javascript

Uploaded by

Chap3 Javascript

Uploaded by

1

• JavaScript arrays are written with square brackets.

If Condition is true? Then value X : Otherwise value Y

&& logical and

Type String Returned by typeof

function myFunction(p1, p2) {

onkeydown The user pushes a keyboard key

<input type=text onchange="alert()">

<form action="/action_page.php" onsubmit="myFunction()">

Operator Example Same As

You might also like