Scribd
Upload
30 views95 pages

Java Script - Unit 1

Uploaded by

chvng7891
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
Download as pptx, pdf, or txt
30 views95 pages

Java Script - Unit 1

Uploaded by

chvng7891
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
Download as pptx, pdf, or txt
Download as pptx, pdf, or txt
You are on page 1/ 95

Java Script

Unit - I

By:
Mrs. Manisha Sagade
Assistant Professor
Department of Electronics and
Telecommunication Engineering
PICT, Pune
Java Script
• Teaching Scheme: Theory: 03 hrs. / week
• Credit: 03
• Examination Scheme:
• In-Sem (Theory): 30 Marks
• End Sem (Theory): 70 Marks)
• Prerequisite Courses:
• Fundamentals of Java Programming,
• Advanced Java Programming
Course Objectives
• To learn the syntax and semantics of Java script.

• To understand the data types and variables in Java script

• To learn how functions and objects are used in Java script

• To learn how to use regular expressions in java script for handling various string
operations.

• To understand the concept of object models and event handling in java


script programs.

• To learn the use of java script for controlling Windows and form handling
Course Outcomes
• CO1: Explain the basic features and fundamental concepts of Java Script and
Evaluate
an application using different data types and conditional & control statements

• CO2: Elaborate and predict the use of functions and objects in Java script.

• CO3: Identify and apply regular expressions used in java script for handling various
string operations.

• CO4: Analyze and determine various aspects of JavaScript object models.


Unit 1: Introduction to Java Scripts
• Introduction – First Look at JavaScript, Adding JavaScript to XHTML
Documents- The <script> Element, Using the <script> Element, Event
Handlers, Linked Scripts
• History and Use of JavaScript
• JavaScript Core Features- Overview-Basic Definitions, Language
Characteristics, Variables, Basic Data Types, Composite Types,
• Flow Control Statements, Loops, Functions, Input and Output in
JavaScript, Regular Expressions
CO1: Explain the basic features and fundamental concepts of Java Script and
Evaluate an application using different data types and conditional & control
statements
Flashback
This Was The Internet In 1995
Flash-forward
This is The Internet In 2022
Designing Webpage for Website
• To build webpage, the essential is to learn –
• HTML (Hyper Text Markup Language)

• The fundamental technology used to define the structure of a


webpage
• Next step is to integrate HTML with
• CSS Cascading Style Sheet, and how to use it to style HTML
• JavaScript, and how to use it to add dynamic functionality to
web pages
HTML Vs CSS Vs
JavaScript
Client side Script
Server side Script
Dynamic Content
Introduction JS- Java Script
Java Script

Client Side Dynamic front-end


Scripting scripting
Language
language
Introduction JS- Java Script
• JavaScript and Java are completely different languages, both in
concept and design.

• JavaScript was invented by Brendan Eich in 1995, and became an ECMA


standard in 1997.

• ECMA-262 is the official name of the standard. ECMAScript is the


official name of the language.

• ECMAScript versions have been abbreviated to ES1, ES2, ES3,


ES5, and ES6.

• Since 2016, versions are named by year (ECMAScript 2016,


2017, 2018, 2019, 2020).
Introduction JS- Java Script
•The Original Ja;vaScript ES1 ES2 ES3 (1997-1999)

•The First Main Revision ES5 (2009)

•The Second Revision ES6 (2015)

•Yearly Additions (2016, 2017, 2018, 2019, 2020)

Browser Support: Chrome, Firefox, Edge, Opera, Safari etc.

ECMAScript 1 - 6 is fully supported in all modern browsers


JavaScript
Advantages
Implementing form Changing an image on Performing complex
validation moving mouse over it calculations

Sections of a page
Content loading and
React to user actions, appearing and
changing dynamically
disappearing
What Can JavaScript Do?

Can read and write HTML


Can validate form data elements

Can access / modify browser


Can handle events
cookies
What Can JavaScript can’t
Do?
• Can not do database related • Can not close a window that
operation it hasn't opened.

Cannot Read From or Write to • Cannot Protect Your Page


Files in the Client. Source or Images
JavaScript - Placement in HTML
File
Script in Script in

<head>...</head> section <body>...</body> section

Script in Script in External file and then include


link in HTML file head section
<head> and <body> section
First Look at JavaScript
<html>
<head>
<title>JavaScript Hello World</title>
</head>
<body>
<h1 align="center">First JavaScript</h1>
<script type="text/javascript">
document.write("Hello World from JavaScript!");
</script>
</body> Write a string to the browser.

</html>
First Look at JavaScript
• Using the <script> element allows the browser to
differentiate between what is JavaScript and what is
(X)HTML markup or regular text

• XHTML is the most recent version of HTML. It


reformulates HTML in terms of XML, bringing greater
regularity to the language as well as an increased
separation of logical structure from the presentational
aspects of documents.
Markup Language Vs Scripting Language

<script type="text/javascript">
<strong>
document.write("Hello World from JavaScript!");
</strong>
</script>
Markup Language Vs Scripting Language
<script type="text/javascript">
<strong>
document.write("Hello World from JavaScript!");
</strong>
</script>

<script type="text/javascript">
document.write("<strong>Hello World</strong>")
</script>
Adding JavaScript to XHTML Documents

• <script> element is commonly used to add script to a document.

• However, there are four standard ways to include script in


an (X)HTML document:
1. Within the <script> element

2. As a linked file via the src attribute of the <script> element

3. Within an XHTML event handler attribute such as onclick

4. Via the pseudo-URL javascript: syntax referenced by a link


The <script> Element

• <script> . . . </script>
• By default <script> tends to interpret contents as
JavaScript
• You can also include the following attributes to explicitly
specify javascript
• Inclusion of language attribute

<script type="text/javascript"
1. Within <script> element
Within <body> tag Within <head> tag
<html> <html>
<head> <head>
</head> <script>
<body> document.write("hello")
<script>
</script>
document.write("hello")
</head>
</script>
</body> </html>
</html>
2. As a linked file via the src attribute

myScript.js

function myFunction()
{ document.getElementById("demo").innerHTML =
"Paragr
aph changed.";
}
2. As a linked file via the src attribute
demoextr.htm
<html>
<body>
<h2>Demo External JavaScript</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<p>This example links to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>
<script src="myScript.js"></script>
</body>
</html>
3. XHTML event handler
<head>attribute
<script>
function fun() {
alert("Welcome
to PICT"); }
</script>
</head>
<body>
<h3> This is an
example of
using onclick
attribute in
HTML. </h3>
4. Via the pseudo-URL
<script>
document.write("<html><body>Hello World!</body></html>");
</script>
Hiding JavaScript from Outdated
Browsers
• Older browsers don't understand the <script> tag.

• These browsers treat your JavaScript just like HTML,


which means that all they can do is display the
JavaScript itself like text.

• We use a trick that hides the JavaScript in those cases:


enclose the script within the HTML comments.

31
Script Hiding and <noscript>
• Script Hiding using HTML and JavaScript comments
<script language="javascript"
type="text/javascript">
<!--
put your JavaScript here
//-->
</script>
• Avoids printing script onscreen in non-script aware browsers

32
Script Hiding and <noscript>
• <noscript> Element
• Useful to provide alternative rendering in browsers that have script off or don’t support
script

<noscript>
<h1>Your browser does not support JavaScript or

it is currently disabled.</h1>
</noscript>

33
<noscript> Exclusion
<html>
<head>
Example
<title>Needs JavaScript</title>
</head>
<body>
<script language="javascript" type="text/javascript">
<!--
document.write("Congratulations! If you see this you have JavaScript.");
//-->
</script>
<noscript>
<b>JavaScript required</b><br>
</noscript>
</body>
</html>
34
Event Handlers
• HTML defines a set event handler
of related to attributes eventssuch as
JavaScript
onmouseover, etc. which you canonclick,
bind
JavaScript statements to.

• There are both the core events defined by HTML 4 as


well as common form and page events like onsubmit,
onload, etc.
Event Handlers- Mouse
Event Event Handler Description
Performe
d
click onclick When mouse click on an element

mouseover onmouseover When the cursor of the mouse comes over


the element
mouseout onmouseout When the cursor of the mouse leaves an element

mousedown onmousedown When the mouse button is pressed over


the element
mouseup onmouseup When the mouse button is released over
the element
mousemove onmousemove When the mouse movement takes place.
Event Handlers- Keyboard

Event Performed Event Handler Description

Keydown & Keyup onkeydown When the user press


& onkeyup and then release
the key
Event Handlers- Form
Event Event Description
Performe Handler
d
focus onfocus When the user focuses on an element

submit onsubmit When the user submits the form


blur onblur When the focus is away from a
form element
change onchange When the user modifies or changes
the value of a form element
Event Handlers- Window
Event Event Description
Performe Handler
d
load onload When the browser finishes the loading of the page

unload onunload When the visitor leaves the current webpage, the
browser unloads it
resize onresize When the visitor resizes the window of the browser
Event Handlers-Demo

<body onload="alert('page loaded');">


<form>
<input type="button" value="press me"
onclick="alert('Hello from JavaScript!');">
</form>
<a href="http://www.yahoo.com"
onmouseover="alert('hi');">Yahoo</a>
</body>
Linked Scripts

Refer slide No. 27 and 28


Example is also attached.
Unit 1: Introduction to Java Scripts
• Introduction – First Look at JavaScript, Adding JavaScript to
XHTML Documents- The <script> Element, Using the <script>
Element, Event Handlers, Linked Scripts
• History and Use of JavaScript
• JavaScript Core Features- Overview-Basic Definitions, Language
Characteristics, Variables, Basic Data Types, Composite Types,
• Flow Control Statements, Loops, Functions, Input and Output in
JavaScript, Regular Expressions

CO1: Use basic features of java script


History of Java Script
Year ECMA Browser
1995 JavaScript was invented by Brendan Eich

1996 Netscape 2 was released with JavaScript 1.0

1997 JavaScript became an ECMA standard (ECMA-262)

1997 ES1 ECMAScript 1 was released


1997 ES1 IE 4 was the first browser to support ES1

1998 ES2 ECMAScript 2 was released


1998 Netscape 42 was released with JavaScript 1.3

European Computer Manufacturers Association ECMA


History of Java Script
Year ECMA Browser
1999 ES2 IE 5 was the first browser to support ES2

1999 ES3 ECMAScript 3 was released

2000 ES3 IE 5.5 was the first browser to support ES3

2000 Netscape 62 was released with JavaScript 1.5


2000 Firefox 1 was released with JavaScript 1.5

2008 ES4 ECMAScript 4 was abandoned


2009 ES5 ECMAScript 5 was released
History of Java Script
Year ECMA Browser
2011 ES5 IE 9 was the first browser to support ES5 *

2011 ES5 Firefox 4 was released with JavaScript 1.8.5

2012 ES5 Full support for ES5 in Safari 6

2012 ES5 Full support for ES5 in IE 10


2012 ES5 Full support for ES5 in Chrome 23

2013 ES5 Full support for ES5 in Firefox 21


2013 ES5 Full support for ES5 in Opera 15
History of Java Script
Year ECMA Browser
2014 ES5 Full support for ES5 in all browsers

2015 ES6 ECMAScript 6 was released

2016 ES6 Full support for ES6 in Chrome 51

2016 ES6 Full support for ES6 in Opera 38


2016 ES6 Full support for ES6 in Edge 14

2016 ES6 Full support for ES6 in Safari 10


2015 ES6 Full support for ES6 in Firefox 52

2018 ES6 Full support for ES6 in all browsers **


Use of Java Script
Form validation

Page embellishments and special effects

Navigation systems

Basic mathematical calculations

Dynamic document generation

Manipulation of structured documents


Unit 1: Introduction to Java Scripts
• Introduction – First Look at JavaScript, Adding JavaScript to
XHTML Documents- The <script> Element, Using the <script>
Element, Event Handlers, Linked Scripts
• History and Use of JavaScript
• JavaScript Core Features- Overview-Basic Definitions, Language
Characteristics, Variables, Basic Data Types, Composite Types,
• Flow Control Statements, Loops, Functions, Input and Output in
JavaScript, Regular Expressions

CO1: Use basic features of java script


Features of Java Script
Java Script Overview-Basic Definitions
Java Script Overview-Basic Definitions
Language Characteristics
• Script Execution order
• Top to bottom
• <head> before <body>
• Cannot forward reference outside a <script> tag

• JavaScript is case sensitive


• HTML is NOT case sensitive
• Remember onClick, ONCLICK, onclick doesn’t count since that is HTML
Language Characteristics

• Whitespace
• Whitespace is generally ignored in JavaScript
statements and between JavaScript statements,
• e.g.
•x = x + 1 same as x = x
+ 1
• s = typeof x; is the same as s=typeof x;
• but it is not the same as s=typeofx; or s= type
of x;
Language Characteristics

• Statements
• A script is made up of individual statements
• JavaScript statements are terminated by ENTERs or semi-colons (;)
• So x = x+1; same x = x+1
as
alert(x)
alert(x);
• Prefer to use semi-colons because if you reduce ENTERs you run into
problems
x=x+1 alert(x) throws an error while x=x+1;alert(x);
does not.
Language Characteristics
• To group together statements we can create a block using
curly braces { }. In some sense this creates one large
statement
• Blocks are used with functions as well as larger decision
structures like if statements
function add(x,y) { if (x > 10) {
var result = x = 0;
x+y; return y = 10;
result; }
Variable
s
• Variables store data in a program
• The name of a variable should be uniquely well formed
identifier starting with a letter and followed by letters or
digits
• Variable names should not contain special characters or
white space
• Variable names should be well considered,
e.g. "sum" is better than "x"
Variables – Variable Scope
• determines the level of accessibility to this variable.

• Variables declared outside of any function are said to have global


scope, thus accessible everywhere in your JavaScript code
• Variables declared inside a function are local variables
and thus are defined only within this function;
Variables – Variable Scope
• No block scope. Block scope means that the defined variable is
available only within its containing block, which is bounded by
{ }.
• All local variables in JavaScript have function-wide scope.
• If you declare a local variable or function parameter with the
same name of an existing global variable, you effectively hide
the global variable from the function.
Variables – Variable Declaration
• Define a variable using the var statement
var x;
• If undefined, a variable will be defined on its first use
• Variables can be assigned at declaration time
var x = 5;
• Commas can be used to define many variables at once
var x, y=5, z;
Basic Data Types
Basic Data Types
• Every variable has a data type that indicates what kind of data the
variable holds
• Basic data types in JavaScript
• String (e.g. "thomas", 'x', "Who are you?")
• Strings may include special escaped characters
• 'This isn\'t hard'
• Strings may contain some formatting characters
• "Here are some newlines \n\n\n and tabs \t\t\t"

• Number (5, -345, 56.7, -456.45677)


• Boolean (true, false)
Basic Data Types :typeof
Operator
• A less-known operator in JavaScript is the typeof operator. It
tells you what type of data you're dealing with.
• For examples:
var BooleanValue = true;
var NumericalValue = 354;
var StringValue = "This is a String";
alert(typeof BooleanValue);
alert(typeof NumericalValue);
alert(typeof StringValue);
Basic Data Types : Dynamic Typing
• Every JavaScript variable has a data type, but the
type is inferred from the variable’s content
• variable that is assigned a string value assumes the
string data type. A consequence of JavaScript’s
automatic type inference is that a variable’s type
can change during script execution.
• For example, a variable can hold a string at one
point and then later be assigned a Boolean. Its type
changes according to the data it holds.
Basic Data Types : Dynamic Typing
(demo)
document.write(4*3);
document.write("<br>");
document.write("5" +
5);
document.write("<br>");
document.write("5" -
3);
document.write("<br>");
document.write(5 *
"5");
Composite Types
• JavaScript supports more advanced types made up of a collection of
basic
types.
• Arrays
• An ordered set of values grouped together with a single identifier
• Since JavaScript is loosely-typed, array elements can be of different data types.

• Defining arrays = [1, 5, 1968, 3];


var myArray
var myArray2 = ["Thomas", true, 3, -47];
var myArray3 = new Array();
var myArray4 = new Array(10);
var myArray5 = new Array("Tom", "Roy", "Al");
Composite Types-
Array
• Access arrays by index value
var myArray = new Array(4)
myArray[3] = "Hello";
• Arrays in JavaScript are 0-
based, e.g.
• var myArray1 =
["Thomas", true, 3, -
47];
• myArray1[0] is "Thomas",
myArray1[1] is true and so
on
• Given new Array(4) you have
an array with an index running
Composite Types- Object

• Objects can hold any type of data and are the primary
mechanism by which useful tasks are carried out. The
browser provides a large number of objects for you to use
• For example, you can interact with the user through the
Window object or modify the contents of a Web page with
the Document object.
Composite Types- Object
• Data contained in an object are said to be properties of the
object. Properties are accessed with the “dot” operator,
which is simply a period followed by the property name.
• The syntax is
• objectname.propertyname

• For example, you would access the lastModified property of


the Document object as document.lastModified.
Composite Types- Object
• Functions contained in an object are said to be methods of
the object.
• Methods are also accessed with the dot operator:
• objectname.methodname()
Composite Types- Object (example)
• The write() method of the Document object was used
to output text to the screen:
• document.write("Hello JavaScript world!");
• with (document)
{
write("this is easier ");
write("than writing out ");
write("the whole path");
}
Composite Types-
Expressions and Operators
• Make expressions using operators in JavaScript
• Basic Arithmetic
+ (addition), - (subtraction/unary negation), / (division),
*
(multiplication), % (modulus)
• Increment decrement
++ (add one) -- (subtract one)
• Comparison
>, <, >=, <= , != (inequality), == (equality),
=== (type equality)
• Logical
&& (and) || (or) ! (not)
Composite Types-
Expressions and Operators
• Bitwise operators (&, |, ^)
• Not commonly used in JavaScript except maybe cookies?
• Shift operators (>> right shift, << left shift)
• String Operator
• "+" serves both as addition and string concatenation
• document.write("JavaScript" + " is " + " great!");
• You should get familiar with this use of +
• Be aware of operator precedence
• Use parenthesis liberally to force evaluations
• var x = 4 + 5 * 8 versus x = (4+5) * 8
Composite Types-
Expressions and Operators
<html><head>
<script language="JavaScript">
var datA, datB, datC, datD, datE;
datA = 10 + 10;
datB = 10 - 5;
datC = 10 * 10;
datD = 10 / 2;
datE = 10 % 4;
document.write("A: 10 + 10 = "+ datA +"<BR>");
document.write("B: 10 - 5 = "+ datB +"<BR>");
document.write("C: 10 * 10 = "+ datC +"<BR>");
document.write("D: 10 / 2 = "+ datD +"<BR>");
document.write("E: 10 % 4 = "+ datE +"<BR>");
</script>
</head>
<body></body></html>
Unit 1: Introduction to Java Scripts
• Introduction – First Look at JavaScript, Adding JavaScript to
XHTML Documents- The <script> Element, Using the <script>
Element, Event Handlers, Linked Scripts
• History and Use of JavaScript
• JavaScript Core Features- Overview-Basic Definitions, Language
Characteristics, Variables, Basic Data Types, Composite Types,
• Flow Control Statements, Loops, Functions, Input and Output in
JavaScript, Regular Expressions

CO1: Use basic features of java script


Flow Control Statements
if .. else Statement
• Basic program execution control handled in JavaScript using the if
statement
if (expression) or if (expression)
true-case true-case;
else
false-case;
• Example:
if (x > 10)
alert("x bigger than 10");
else
alert("x smaller than
10");
Flow Control Statements
if .. else Statement
• You can use {} with if statements to execute program
blocks rather than single statements
if (x > 10) {
alert("X is bigger than 10");
alert("Yes it really is bigger");
}
• Be careful with ;’s and if statements
if (x > 10); <-- ";" should not be here
alert("I am always running!?");
Flow Control Statements : if .. else
Statement
Flow Control Statements
Switch Statement
• If statements can get messy so you might consider using a switch statement instead

switch (condition) {
case (value1): statement(s);
break;
case (value2):
statement(s);
b
reak;
. . .
default
: statement(s);
}
Flow Control Statements :Loop
• JavaScript supports three types of loops: while, do/while, and for
• Syntax of while:

while(condition)
statement(s)

• Example:
var x=0;
while (x < 10)
{ document.write(x);
document.write("<br>");
x = x + 1;
}
document.write("Done");
Flow Control Statements : do
Loop between loops is often when the loop
• The difference
condition check is made, for example
var x=0;
do {
document.write(x);
x = x + 1;
} while (x < 10);

• In the case of do loops the loop always executes at least


once since the check happens at the end of the loop
Flow Control Statements : for
• The Loop
most compact loop format is the for loop which
initializes, checks, and increments or decrements all in a
single statement
for (x=0; x < 10; x++) {
document.write(x);
}
• With all loops we need to exercise some care to avoid
infinite loops.
Flow Control Statements : Loop
Control
• We can control the execution of loops with two statements: break
and continue
• break jumps out of a loop (one level of braces)
• continue returns to the loop increment
var x=0;
while (x < 10) {
x = x + 1;
if (x == 3)
continue;

document.write("x = " + x);


if (x == 5)
break;
}
document.write("Loop done");
Functio
n code and create a set of statements that
• Functions are useful to segment
will be used over and over again The basic syntax is
function name(parameter list) {
statements;
return;
}

• For example
function add(x, y){
var sum = x + y;

return sum;}
Functio
n using the function name
• We can then invoke a function
with ( )’s
var result = add(2, 3);
• We can also pass variable values as well as literals
var a=3, b=5;
var result;
result =
add(a, b);
• Variables are passed to function by value so you must use
return to send things back.
• You can return a value or not from a function and you can
have as many return statements as you like
Functio
n
Input and Output in JavaScript
• JavaScript executes in a host environment like a Web
browser, its
• I/O facilities might be different from what you would
expect.
• For obvious security reasons, plain client-side JavaScript
is not usually allowed to read or write files in the local
file system.
Input and Output in JavaScript
• Interacting with the user is typically achieved through the
• Window object, several methods of which are described
here.
• One of the most common I/O methods in JavaScript
is using the alert() method of Window,
• which displays its argument message in a dialog box that
includes an OK button.
• For example,
alert("This is an important message!");
Input and Output in JavaScript
• Other forms of dialog with the user include
the confirm() method, which displays its
argument message in a dialog box with both
OK and Cancel buttons.
• With the script
confirm("Learn JavaScript?");
Input and Output in JavaScript
• the prompt() method to collect some data from
the user.
• A prompt displays its argument message in
a dialog box and allows the user to
• enter data into a text field, as illustrated
by this example:
• var answer = prompt("What is your
favorite
color?","");
Regular Expression
• The last major functional feature of JavaScript is the regular expression.
• A regular expression as defined by the RegExp constructor is used
to carry out pattern matching.
• var country = new RegExp("England");
• This could have been defined as well using a direct assignment:
• var country = /England/;
• Once a regular expression is defined, we can use it to pattern-match and
potentially change strings.
• The following simple example matches a piece of the string in
the
variable .
Regular Expression
• geographicLocation and substitutes it for another string.

var country = new RegExp("England");


var geographicLocation = "New England";
document.write("Destination for work:
"+geographicLocation+"<br>");
geographicLocation =
geographicLocation.replace(country, "Zealand");
document.write("Destination for vacation:
"+geographicLocation);
Comments
• When writing JavaScript you may want to include a comment
/*
This is a
multiple line
style
comment
*/
// This is a
single line
comment
Any Questions?

You might also like