Web Programming

Internet Application
05 Development

Dr. Fatma Sakr

 2
JavaScript history

 Brendan Eich convinced his boss at

Netscape that the Navigator browser should
have its own scripting language, and that
only a new language would do, a new
language designed and implemented in big
hurry, and that no existing language should
be considered for that role.

Web Programming 19-Mar-

24
 3
Introduction to JavaScript

 JavaScript is the language of the Web. It was introduced in

1995 by Netscape, the company that created the first browser
by the same name. Other browsers followed, and JavaScript
quickly gained acceptance as the client-side scripting
language on the internet.

 Today it is used by millions of websites to add functionality

and responsiveness, validate forms, communicate with the
server, and much more.
Web Programming 19-Mar-
24
 4
Introduction to JavaScript

 Originally, JavaScript was named LiveScript but was

renamed JavaScript as a marketing strategy to benefit from
the exploding popularity of the Java programming language
at that time.

 As it turned out, Java evolved into a server-side language and

did not succeed on the browser, whereas JavaScript did. The
change of name is unfortunate because it has caused a lot of
confusion.
Web Programming 19-Mar-
24
 5
JavaScript History

 JavaScript language first became available in the web

browser Netscape Navigator 2,it was called LiveScript.

 Since Java was the hot technology of the time, Netscape

decided that JavaScript sounded more exciting.

 • Microsoft decided to add their own brand of JavaScript

to Internet Explorer, which they named JScript

Web Programming 19-Mar-

24
 6
JavaScript

 JavaScript is a cross-platform (works on various operating

systems or devices), object-oriented scripting language.

 It is a small and lightweight language. Inside a host

environment (for example, a web browser)

 JavaScript can be connected to the objects of its

environment to provide programmatic control over them.

Web Programming 19-Mar-

24
 7
JavaScript Advantages

 JavaScript contains a standard library of objects, such as Array, Date,

and Math, and a core set of language elements such as operators,
control structures, and statements. Core JavaScript can be extended
for a variety of purposes by supplementing it with additional objects.

 Client-side JavaScript extends the core language by supplying objects to

control a browser and its Document Object Model (DOM). For example,
client-side extensions allow an application to place elements on an
HTML form and respond to user events such as mouse clicks, form
input, and page navigation.
Web Programming 19-Mar-
24
 8
JavaScript Advantages

 The script should be included in or referenced by an HTML document

for the code to be interpreted by the browser..

 The JavaScript client-side mechanism provides a web page to not

be a static HTML, but can include programs that interact with the
user, control the browser, and dynamically create HTML content.

 For example, you might use JavaScript to check if the user has
entered a valid e-mail address in a form field.

Web Programming 19-Mar-

24
 The merits of using 9
JavaScript
 Less server interaction: You can validate user input before sending the page off
to the server. This saves server traffic, 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 hovers
over them with a mouse or activates them via the keyboard.

 Richer interfaces: You can use JavaScript to include such items as drag-and-drop
components and sliders to give a Rich Interface to your site visitors.

Web Programming 19-Mar-

24
 10
JavaScript Editing Tools

Microsoft FrontPage: Microsoft has developed a popular HTML editor called

FrontPage. FrontPage also provides web developers with a number of JavaScript
tools to assist in the creation of interactive websites.

Macromedia Dreamweaver MX: Macromedia Dreamweaver MX is a very

popular HTML and JavaScript editor in the professional web development crowd.
It provides several handy prebuilt JavaScript components, integrates well with
databases, and conforms to new standards such as XHTML and XML.

 Macromedia HomeSite 5: HomeSite 5 is a well-liked HTML and JavaScript

editor from Macromedia that can be used to manage personal websites effectively.
Web Programming 19-Mar-
24
 Javascript – Enabling : Internet 11
Explorer

Here are the steps to turn on or turn off JavaScript in Internet

Explorer:
Follow Tools -> Internet Options from the menu.
Select Security tab from the dialog box.
Click the Custom Level button.
Scroll down till you find the Scripting option.
Select Enable radio button under Active scripting.
Finally click OK and come out.
 To disable JavaScript support in your Internet Explorer, you need to select
Disable radio button under Active scripting.

Web Programming 19-Mar-

24
 Embedding JavaScript in 12

HTML
 Client-side JavaScript code is embedded within HTML
documents in Four ways:

• Inline, between a pair of <script> and </script> tags in the Body

• From an external file specified by the src attribute of a <script> tag

• In an HTML event handler attribute, such as onclick or onmouseover

Web Programming 19-Mar-

24
 Embedding JavaScript in 13
HTML
 Client-side JavaScript code is embedded within HTML
documents in Four ways

Script in <head>...</head> section.

Script in <body>...</body> section.
Script in <body>...</body> and <head>...</head> sections.
Script in an external file and then include in <head>...</head>
section.

Web Programming 19-Mar-

24
 JavaScript in <head>...</head> 14
Section
<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<p> Click here for the result </p>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body> Output
</html>

19-Mar-
Web Programming 24
 The <script> Element in 15
<body>...</ body > Section

 This case when you need a script to run as the page loads
 In this case, you would not have any function defined using JavaScript.

<!DOCTYPE html> <!-- This is an HTML5 file -->

<html> <!-- The root element -->
<head>
<title> Home Page </title>
</head>
<body>
<h1>Welcome to JS.</h1>
<script>
//A script of js code
</script>
</body>
</html>
19-Mar-24
Web Programming
 16
Scripts in External Files

 The <script> tag supports a src attribute that specifies the

URL of a file containing JavaScript code.
<!DOCTYPE html> <!-- This is an HTML5 file -->
<html>
<head>
<title>Home Page </title>
<script src= "../../scripts/util.js” > </script>
</head>
<body>
<h1>Welcome to JS.</h1>
</body>
</html>
Web Programming 19-Mar-
24
 17
Event Handlers in HTML

 JavaScript functions that are registered with the web browser and
then invoked by the web browser in response to events (such as
user input).

 Event handler properties like onclick mirror HTML attributes with

the same names, and it is also possible to define event handlers by
placing JavaScript code in HTML attributes.

 <input type = "button“ id="btn" value= "click here" onclick=

"alert('click again'); this.disabled = true;">

Web Programming 19-Mar-

24
 18
Case Sensitivity

 JavaScript is a case-sensitive language.

 This means that language keywords, variables, function names, and

other identifiers must always be typed with a consistent capitalization
of letters.

 Example keyword, must be typed "while" not " While" or " WHILE”

 online, Online, OnLine, and ONLINE are four distinct variable names.

Web Programming 19-Mar-

24
 Comments 19

 JavaScript supports two styles of comments.

 Any text between a and the end of a line is treated as a comment
and is ignored by JavaScript.
 Any text between the characters /* and */ is also treated as a
comment; these comments may span multiple lines.
//This is a single-line comment.
/* This is also a comment */
/* This is yet another comment.
It has multiple lines. */
Web Programming 19-Mar-
24
 LITERALS 20

 A literal is a data value that appears directly in a program. The

following are all literals:
12 The number twelve
1.2 The number one point two
"hello world“ A string of text
'Hi„ Another string
true / false A Boolean value / The other Boolean value
/javascript/gi A "regular expression" literal
null Absence of an object

Web Programming 19-Mar-

24
 21
Reserved Words

 JavaScript reserves a number of identifiers as the keywords of

the language itself. You cannot use these words as identifiers in
your programs:

break delete function return typeof case do

if switch var catch else in this void continue false

instanceof throw while debugger

finally new true with default for null try 19-Mar-

Web Programming
24
 22
Types, Values, and Variables

 Identifiers and Reserved Words

An identifier is simply a name. In JavaScript, identifiers are used to name
variables and functions in JavaScript code.
A JavaScript identifier must begin with a letter, an underscore (_), or a
dollar sign ($).
Subsequent characters can be letters, digits, underscores, or dollar signs.
(Digits are not allowed as the first character so that JavaScript can easily
distinguish identifiers from numbers.)
 These are all legal identifiers:
∙i
∙ my_variable_name
∙ v13
∙ _dummy
∙ $str
Web Programming 19-Mar-
24
 23
Types

 JavaScript types can be divided into two

categories:
Primitive Types Object Types

- number - Language objects

- string - Browser objects
- Boolean - Document objects
- null - User-defined objects
.
- undefined

Web Programming 19-Mar-

24
 24
Variable Declaration

 Before you use a variable in a JavaScript program, you should declare

it. Variables are declared with the var keyword, like this: var i; var sum;
You can also declare multiple variables with the same var keyword:

 var i, sum; And you can combine variable declaration with variable
initialization: var message = "hello"; var i = 0, j = 0, k = 0; If you don't
specify an initial value for a variable with the var statement, the variable
is declared, but its value is undefined until your code stores a value into
it.

Web Programming 19-Mar-

24
 25
Number

 JavaScript does not make a distinction between integer values and floating-point
values.

 All numbers in JavaScript are represented as floating-point values.

 Number is a numeric data type in the double-precision 64-bit floating point

format .

 Integer 0, 3500, 10000000

 Floating-Point 3.14 2345.789 .333333333333333333 , 6.02e23

6.02 x 1023 , 1.4738223E-32 , 1.4738223 x 10-32

Web Programming 19-Mar-24
 26
string

 Set of characters enclosed within a matched pair of single or

double quotes (' or ").

 "" The empty string: it has zero characters

'testing„ "3.14" 'name="myform“‟

"Wouldn't you prefer O'Reilly's book?"

"This string\n has two lines"

“\n is the ratio of a circle's circumference to its diameter"

Web Programming 19-Mar-

24
 27
string

 String literals must be written on a single line. In ECMAScript

5, however, you can break a string literal across multiple lines
by ending each line except the last with a backslash ( \ ).

 "two\n lines" : A string representing 2 lines written on one line

 A one-line string written on 3 lines ( ECMAScript 5 only)

"one\ long\ line";

Web Programming 19-Mar-

24
 28
Long literal strings

 Sometimes, your code will include strings which are very long.

 You can use the + operator to append multiple strings together, like this:
var longString = "This is a very long string which needs " + "to wrap
across multiple lines because " + "otherwise my code is unreadable.";
Or you can use the backslash character (“ \”) at the end of each line to
indicate that the string will continue on the next line.

 var longString = "This is a very long string which needs \ to wrap across
multiple lines because \ otherwise my code is unreadable”;

Web Programming 19-Mar-

24
 29
Escape Sequences in String

 \0 The NUL character (\u0000)

 \b Backspace (\u0008)
 \t Horizontal tab (\u0009)
 \n Newline (\u000A)
 \v Vertical tab (\u000B)
 \r Carriage return (\u000D)
 \” Double quote (\u0022)
 \‟ Apostrophe or single quote (\u0027)
 \\ Backslash (\u005C)
Note: The backslash escape character (\) turns special characters
into string characters. 19-Mar-
24
 Escape Sequences in 30
String
i.e.
let text = "We are the so-called "Vikings" from the north.";

text =
We are the so-called

• The escape sequence \" inserts a double quote in a string.

i.e.
let text = "We are the so-called \"Vikings\" from the north.";

text =
We are the so-called "Vikings" from the north.

Web Programming 19-Mar-

24
 31
Boolean

 Boolean is a logical data type that can have only the values true or
false.
 JavaScript Booleans can have one of two values: true or false.
var completed = false;

var isMember = true;

If (isMember)

discount = 15;

Web Programming 19-Mar-

24
 32
null

 The value null represents the intentional

absence of any object value.

var element = null;

element = document.getElementById("i1");

Web Programming 19-Mar-

24
 33
undefined

 Undefined: is a primitive value automatically assigned to

variables that have just been declared or to formal arguments
for which there are no actual arguments.
i.e.
var xX;
console. log(x);
var temp;
typeof temp; //“undefined"

Web Programming 19-Mar-

24
 34

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Global Properties </h1>
<h2>The undefined Property </h2>
<p id="demo"> </p>
<script>
JavaScript Global Properties
let x; The undefined Property
if (x === undefined) { x is undefined
text = "x is undefined"; }
else { text = "x is defined"; }
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html> 19-Mar-
24
Difference between null and 35

undefined
typeof null // “object” (not “null" for legacy reasons)

typeof undefined // “undefined”

null === undefined // false

null == undefined // true

null === null //true

null == null //true

!null //true

Web Programming 19-Mar-

24
 36
Number
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Global Properties</h1>
<h2>The Number data on console</h2>
<p id="demo"> </p>
<script>
var intNum =100;
var floatNum=100.5;
console.log(intNum+floatNum); // document.write(intNum+floatNum)
var name="534654aliK";
var bool=true;
var number;
var num=null;
if(intNum==100){
console.log("yes"); // document.write(“YES”)
}
var longString = "This is a very long string which needs\
to wrap across multiple lines because \
otherwise my code is unreadable.";
</script>
</body>
</html> 19-Mar-
24
 37
The output on the console

JavaScript Global Properties

The Number data on console
200.5
YES

Web Programming 19-Mar-

24
 38
The Console Object

 The console object provides access to the browser's debugging console.

 The console object is a property of the window object.
 When testing console methods, be sure to have the console view visible.
 Press F12 to open the console view or right click mouse then press on “inspect”
 The console object is accessed with:
window.console or just console
Examples
window.console.error("You made a mistake");

Web Programming 19-Mar-

24
 39
Console Object Methods
Method Description
assert() Writes an error message to the console if a assertion is false
clear() Clears the console
count() Logs the number of times that this particular call to count() has been
called
error() Outputs an error message to the console
group() Creates a new inline group in the console. This indents following
console messages by an additional level, until console.groupEnd() is
called
groupCollapsed() Creates a new inline group in the console. However, the new group is
created collapsed. The user will need to use the disclosure button to
expand it
groupEnd() Exits the current inline group in the console
info() Outputs an informational message to the console
log() Outputs a message to the console
table() Displays tabular data as a table
time() Starts a timer (can track how long an operation takes)
timeEnd() Stops a timer that was previously started by console.time()
trace() Outputs a stack trace to the console
warn() Outputs a warning message to the console
 40

Web Programming 19-Mar-

24
 41
Examples:
 Write an object to the console:
const myObj = {firstname:"John", lastname:"Doe"};
console.log(myObj);

 Write an array to the console:

const myArr = ["Orange", "Banana", "Mango", "Kiwi"];
console.log(myArr);

Web Programming 19-Mar-

24
 42

Web Programming 19-Mar-

24