Scribd
Upload
2 views

FOP- Java Script_Unit 1 (1)

The document outlines a Faculty Orientation Program for a JavaScript course led by Dr. Khyati R Nirmal, detailing the teaching and examination schemes, course objectives, and outcomes. It covers the fundamentals of JavaScript, including syntax, data types, functions, and event handling, as well as the history and evolution of the language. The document also discusses the integration of JavaScript with HTML and CSS for dynamic web page functionality.

Uploaded by

meghshamjade50
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

FOP- Java Script_Unit 1 (1)

The document outlines a Faculty Orientation Program for a JavaScript course led by Dr. Khyati R Nirmal, detailing the teaching and examination schemes, course objectives, and outcomes. It covers the fundamentals of JavaScript, including syntax, data types, functions, and event handling, as well as the history and evolution of the language. The document also discusses the integration of JavaScript with HTML and CSS for dynamic web page functionality.

Uploaded by

meghshamjade50
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 93

Faculty Orientation Program

Java Script
By:
Dr. Khyati R Nirmal
Associate Professor
Department of Computer Engineering
SNJB’s LS KBJ CoE, Chandwad
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: Use basic features of java script

• CO2: Use relevant data types for developing application in java script

• CO3: Use the function and objects as self-contained, with data passing in and out
through well-defined interfaces in development of small systems

• CO4: Apply the regular expression for Text matching and manipulation

• CO5: Explore use of the various aspects of JavaScript object models that are
fundamental to the proper use of the language

• CO6: Develop the application using windows controlling and form handling
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


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
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"
language="javascript">
25
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>
</html>
</body>
</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 attribute
<head>
<script>
function fun() {
alert("Welcome to SNJB"); }
</script>
</head>
<body>
<h3> This is an example of using onclick attribute in HTML. </h3>
<p> Click the following button to see the effect. </p>
<button onclick = "fun()">Click me</button>
</body>
</html>
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 Example
<html>
<head>
<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 of event handler attributes
related to JavaScript events such as onclick,
onmouseover, etc. which you can 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
Performed
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
Performed Handler
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
Performed Handler
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 as x = x+1
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+y; x = 0;
return result; y = 10;
} }
Variables
• 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
var myArray = [1, 5, 1968, 3];
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 from
0 to 3
• To access an array length you can use arrayName.length
(e.g. alert(myArray2.length); )
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);
break;
. . .
default: statement(s);
}
• The switch statement is not supported by very old JavaScript aware browsers (pre-
JavaScript 1.2), but today this is not such an important issue
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
• The difference between loops is often when the loop
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 Loop
• The 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");
Function
• Functions are useful to segment code and create a set of statements that
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;}
Function
• We can then invoke a function using the function name
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
Function
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