Web Technologies

Lecture 7-8
JavaScript

Muhammad Ramzan
 Lecture Outline
 JavaScript
 History of JavaScript
 What Is the Use of JavaScript?
 Examples of JavaScript Applications
 JavaScript Types
 JavaScript Keywords
 JavaScript is Case Sensitive
 JavaScript Syntax
 JavaScript Comments
 JavaScript Functions

2
 JavaScript
• JavaScript is the programming language that made the World Wide Web
what it is today.
• JavaScript is the programming language of HTML and the Web.
• JavaScript is one of the 3 languages all web developers must learn:
• HTML to define the content of web pages
• CSS to specify the layout of web pages
• JavaScript to program the behavior of web pages
• Web pages are not the only place where JavaScript is used. Many
desktop and server programs use JavaScript. Node.js is the best
known framework. Some databases, like MongoDB and CouchDB, also use
JavaScript as their programming language.

3
 History of JavaScript
• JavaScript was invented by Brendan Eich in 1995, and
became an ECMA standard in 1997.
• ECMAScript (European Computer Manufacturers Association
Script)
• ECMAScript is the official name of the language.
• From 2015 ECMAScript is named by year (ECMAScript 2015).
• ECMAScript 1 (1997): First Edition.
• ECMAScript 2 (1998): Minor changes only.
• ECMAScript 3 (1999): Added Regular Expressions. Added
try/catch.
• ECMAScript 4: Never released.
• ECMAScript 5 (2009): Major Changes (Paradigm Shift)
4
 History of JavaScript [Cont’d]
• JavaScript was developed for Netscape. Netscape was the first
browser to run JavaScript.
• After Netscape the Mozilla foundation continued to develop
JavaScript for the Firefox browser.
• The latest JavaScript version was 1.8.5. (Identical to
ECMAScript 5).
• IE 4 was the first browser to support ECMAScript 1 (1997).
• IE 5 was the first browser to support ECMAScript 2 (1999).
• IE 5.5 was the first browser to support ECMAScript 3
(2000).
• Chrome 23, IE 10, and Safari 6 were the first browsers to
fully support ECMAScript 5.

5
What Is the Use of JavaScript?

• JavaScript’s primary use is to transform web

pages from static to dynamic.
• Adding behavior to web pages is at the core of
JavaScript’s pervasiveness. Many of these
behaviors have been mentioned.
• Sliders, dropdown menus, animations, audio, and
video, can all be categorized as behavior
changes.

6
What Is the Use of JavaScript? Cont….

• Here are some other examples of JavaScript’s

implementation towards web page behavior:
• Showing or hiding information
• Zooming in/out
• Displaying a timer or countdown
• Gallery carousels on homepages

7
Examples of JavaScript Applications
• JavaScript, we use at either the front-end or back-end or even
for full-stack development, offers developers a diverse range
of applications.
• The following JavaScript examples explain in detail the
varying uses of JavaScript.
1. Presentations
2. Web Development
3. Server Applications
4. Web Applications
5. Games
6. Mobile Applications
8
 1. Presentations
• Developers have the option of recruiting two JavaScript
libraries, RevealJS (open source HTML presentation framework)
and BespokeJS, to generate a slide deck on the web.
• Hence, online presentations can be accessed by those with
mobile devices like phones and tablets. This framework
supports all CSS color formats as well as miscellaneous
themes, transition styles, and backgrounds.
• The BespokeJS plugin is a feature-heavy framework that
supplies rich properties such as scaling, animated bullets,
and syntax highlighting while coding. BespokeJS is
characterized as being lightweight.

9
 2. Web Development

• Web development involves all the

behaviors enlisted to create a dynamic
and interactive web page.
• In addition to performing web page
interactions, JavaScript can open
PDFs, run widgets, and load web page
content in the absence of a refresh.
10
 3. Server Applications
• Node.js is the most frequently used runtime
environment for JavaScript, where developers can
write, test, and debug code. Through Node.js you
can write server-side software.
• An example of a JavaScript server application is
the Opera Unite feature of the Opera Browser.
• Opera Unite lets users run serve applications like
file sharing and streaming straight from the web
browser.

11
 4. Web Applications
• Angular and Vue.js are popular JavaScript
frameworks that developers make use of
during app development.
• Netflix and PayPal were developed with
AngularJS and APIs.
• An application programming interface (API)
is a protocol for accessing web-based
software. Example Weather Snippets, Travel
Booking

12
 5. Games
• Games in JavaScript tend to harness the
EaselJS library, a library known for its rich
graphics. JavaScript and HTML5 are a favored
combo for creating games on the web.
• HTML5 is designed so that you have full
access to the web unaccompanied by additional
plugins like Flash(creating games, making
presentations, animations, visualizations,
webpage components, and many other
interactive applications). 13
 6. Mobile Applications
• Mobile applications are built to be stand-alone apps void of
any web-based context. JavaScript developers look to React
Native and ReactJS for this type of development.

• Facebook.
• Walmart.
• Instagram.

https://trio.dev/blog/examples-javascript

14
 JavaScript Types
• Internal JavaScript:
• In HTML, JavaScript code must be inserted between
<script> and </script> tags.
• You can place any number of scripts in an HTML
document.
• Scripts can be placed in the <body>, or in the <head>
section of an HTML page, or in both.

Placing scripts at the bottom of the <body> element

improves the display speed, because script interpretation
slows down the display.
15
Internal JavaScript Example

16
 JavaScript Types [Cont’d]

• External JavaScript:
• External scripts are practical when the same code is
used in many different web pages.
• JavaScript files have the file extension .js
<script src="myScript.js"></script>

• You can place an external script reference in <head> or

<body> as you like.
• External scripts cannot contain <script> tags.

17
External JavaScript Example

18
 JavaScript Keywords
• JavaScript statements often start with a keyword to
identify the JavaScript action to be performed.
• JavaScript keywords are reserved words. Reserved words
cannot be used as names for variables.

break, continue, debugger, do, while, for, function, if,

else, return, switch, try, catch, var

19
 JavaScript is Case Sensitive
• All JavaScript identifiers are case sensitive.
• The variables lastName and lastname, are two different
variables.
• JavaScript does not interpret VAR or Var as the keyword
var.
• JavaScript programmers tend to use Camel Case that starts
with a uppercase letter.

getElementById
getElementsByClassName
getElementsByTagName
20
 JavaScript Syntax
• JavaScript syntax is the set of rules, how JavaScript
programs are constructed
• The JavaScript syntax defines two types of values: Fixed
values and variable values.
• Fixed values are called literals. Variable values are
called variables

21
 JavaScript Syntax [Cont’d]

• JavaScript Literals
• The most important rules for writing fixed values are:
• Numbers
• Numbers are written with or without decimals:
• 10.50
• 1000
• Strings
• Strings are text, written within double or single
quotes:
• "John Doe"
• 'John Doe'
22
 JavaScript Syntax [Cont’d]

• JavaScript Variables
• In a programming language, variables are used to store
data values.
• JavaScript uses the var keyword to declare variables.
• An equal sign is used to assign values to variables.
• In this example, x is defined as a variable. Then, x is
assigned (given) the value 6:

var x;
x = 6;

23
 JavaScript Syntax [Cont’d]

• JavaScript Variables [Cont’d]

• All JavaScript variables must be identified with unique
names.
• The general rules for constructing names for variables
(unique identifiers) are:
• Names can contain letters, digits, underscores, and
dollar signs.
• Names must begin with a letter
• Names are case sensitive (y and Y are different
variables)
• Reserved words (like JavaScript keywords) cannot be
24 used as names
 JavaScript Syntax [Cont’d]

• Value = undefined
• In computer programs, variables are often declared
without a value. The value can be something that has to
be calculated, or something that will be provided
later, like user input.
• A variable declared without a value will have the value
undefined.
• The variable carName will have the value undefined
after the execution of this statement:
var carName;

25
 JavaScript Syntax [Cont’d]

• Re-Declaring JavaScript Variables

• If you re-declare a JavaScript variable, it will not
lose its value.
• The variable carName will still have the value "Volvo"
after the execution of these statements:

var carName = "Volvo";

var carName;

26
 JavaScript Syntax [Cont’d]

• JavaScript Operations
• As with algebra, you can do arithmetic with JavaScript
variables, using operators like = and +.
• You can also add strings, but strings will be
concatenated.
• If you put a number in quotes, the rest of the numbers
will be treated as strings, and concatenated.
var x = 5 + 2 + 3; var x = "John" + " " + "Doe";

var x = "5" + 2 + 3; var x = 2 + 3 + "5";

27
 JavaScript Syntax [Cont’d]

• JavaScript Operators
• Arithmetic (+, -, *, /, **, %, ++, --)
• Assignment (=, +=, -=, *=, /=, %=, **=)
• Comparison (==, !=, ===, !==, >, <, >=, <=, ?)
• Logical (&&, ||, !)
• Bitwise (&, |, ~, ^, <<, >>, )

28
 JavaScript Comments
• Not all JavaScript statements are "executed“.
• Code after double slashes // or between /* and */ is
treated as a comment.
• Comments are ignored, and will not be executed:
var x = 5; // I will be executed

29
What can JavaScript do?
• JavaScript Can Change HTML Content
• JavaScript Can Change HTML Attribute Values
• JavaScript Can Change HTML Styles (CSS)
• JavaScript Can Hide HTML Elements
• JavaScript Can Show HTML Elements

30
What can JavaScript do? (Cont---)
o JavaScript Can Change HTML Content

31
What can JavaScript do? (Cont---)

32
 What can JavaScript do? (Cont---)
• JavaScript Can Change HTML Styles (CSS)

33
What can JavaScript do? (Cont---)
• JavaScript Can Hide HTML Elements
• JavaScript Can Show HTML Elements

display='block'
 JavaScript Functions
• A JavaScript function is a block of code designed to
perform a particular task.
• A JavaScript function is executed when "something" invokes
it (calls it).
• A JavaScript function is defined with the function
keyword, followed by a name, followed by parentheses ().
function name(parameter1, parameter2, parameter3) {
// code to be executed
}

35
Function Example

36