Java Script Intro

JAVA SCRIPT Introduction
Course Objective Amity School of Engineering & Technology
2
Amity School of Engineering & Technology
Introduction to Scripting
• Scripting Languages are mainly used to build the programming environment in
HTML document
• Pages will be made more dynamic and interactive.
• Some languages : VBScript, JavaScript, Jscript and ECMA Script
• Browser Includes Scripting Interpreter (Technique uses by attacker as well)
• Choosing a Scripting Language
– Browser compatibility
– Programmer familiarity
• Client or server can execute the scripts.
3
Client Vs. Server Scripting

Client Side Scripting Server Side Scripting
Runs on the user’s computer Runs on the Web server
i.e. Browser interprets the script.
Source code is visible to the user. Source code is not visible to the user because
the output of server side progarm is an HTML
page.
Used for validations and functionality Used for business logic and data access from
for the user events. the database. The pages are created
dynamically.
Depends on the browser and version. Not depend on the client, any server side
technology can be used.
4
Sample JS screen
5
History of JavaScript (Self Study)

• Netscape integrated Java into its Web Browser called Netscape Navigator
• In 1995, Netscape Communications introduced ‘LiveScript’, a Web Scripting
Language, to simplify Java Programming on Web pages
• Support for LiveScript began in June, 1995, when Beta Version 2.0b1 of Netscape
Navigator was released.
• Later in 1995, after an agreement with Sun, LiveScript was re-named JavaScript, to
leverage the popularity of Java
• To this date, JavaScript continues to evolve...
6
Features of JavaScript
7
JavaScript – lexical structure
8
Embedding JavaScript into HTML page

• <SCRIPT>…..</SCRIPT> tag
• LANGUAGE - the scripting language used for writing scripts
<SCRIPT Type=“Text/JavaScript”>
-----
(JavaScript code goes here)
----
</SCRIPT>
9
Deferred and Immediate Script

• SCRIPT tag can be written in both HEAD and BODY section
• Placing Javascript in the HEAD tag ensures readability.
• Immediate mode
– Scripts gets executed as the page loads.
<body>
<h4> Immediate Demo</h4>
<script language="JavaScript">
document.write("<h5> Using JavaScript</h5>");
</script>
</body>
10
Deferred and Immediate Script

• Deferred mode
– Script is executed based on some user action jsdef.html

</script>
<form name="f1">
<input type="button" value=" ok "
onClick="msg()">
</form>
11
JavaScript –Variables
• Declared using the keyword “var”. Declaring variables is not mandatory.
• Must start with a letter or an underscore and can have digits.
• Does not have explicit data types.
• The Data type is automatically decided by the usage.
• Scope is by default global. If a variable is prefixed by the keyword “var” within a
function then it is a local variable.
• The formal parameters are local to the function.
function demo()
{ var inum1 = 10; // Local to the function
inum2 = 20; // Global to the document.
}
demo(); // Invoking function
inum1 = inum1+1; // Error because inum1 is local variable
inum2 = inum2+1; // no Error
12
JavaScript – Implicit data types

• JavaScript recognizes the following implicit data types
– Number
– String
– Logical
– Object
– The special value null
• Type conversion
– JavaScript automatically converts between data types
– Consider
str = “100”, number1 = 10, number2 = 20 30
number3 = number1+ number2 10020
strsum = str + number2
20100
strsum = number2 + str
13
JavaScript – Operators
• Arithmetic Operators
+, ++, -, --, *, /, %
• Relational Operators
==, !=, ===, !==, >, >=, < , <= strict.html
• Logical Operators ( and , or , not)
&&, ||, !
• Assignment Operators
=, +=, -=, *=, /=, %=
• Strict equal (===)
Returns true if the operands are equal and of the same type.
• Strict not equal (!==)
Returns true if the operands are not equal and/or not of the same type.
14
JavaScript – Operators - Demo

num1=10;
str1="10";
document.write("<h2>num1 is "+num1+" and str1 is "+str1+"</h2>");
document.write("<h2>Using Equals(==)</h2>")
if(num1==str1)
document.write("<h3>num1 equal to str1</h3>");
else
document.write("<h3>num1 not equal to str1</h3>");
document.write("<h3> Using Strict Equals(===)</h3>");
if(num1===str1)
document.write("<h3>num1 equal to str1</h3>");
else document.write("<h3>num1 not equal to str1</h3>");
</script>
<h1> Strict Equals</h1>
15
Special operators
• typeof operator
– Unary operator
– Indicates the data type of the operand.
Eg:
x=123;
alert(typeof(x)); // Number
x="Hello"
alert(typeof(x)); // String
• new
– Used for instantiation of objects.
Eg: today = new Date( )
• this
– used to refer to the current object
16
Can you answer these questions?

• What is the need of client side scripts?
• Why is JavaScript used for Client side Scripting ?
• What is the difference between Deferred and Immediate Script?
• How can we declare a local variable?
• What is the difference between == and ===?
• What is the use of the typeof operator?
17
JavaScript – Control structures

• Control structure in JavaScript, as follows:
– if
• A single block of code will be executed based on the condition
– if .. else
• a block of statements will executed based on the outcome of the condition.
– switch …. case
• switch statement will be tested against the numbers in the case options
• executes set of statements associated with the first matching catch block.
control.html (control.html.HTM)
18
JavaScript – Loop
• while loop
iterates through a block of statements until the condition becomes false
Syntax : while ( test condition) {
zero or more statements
}
• for loop
Iterate through a block of statements for based on the range of values
Syntax : for(initstmt; condstmt; updstmt ) {
}
• do while loop
block of statements is executed first and then condition is checked
Syntax : do {
}while ( test condition) Loop.html (Loop.html.HTM)
19
JavaScript – Loop - Demo

for(i=10;i<=100;i=i+10)
{document.write("<hr color=red size=3 width="+i+"%>");}
for(i=100;i>=10;i=i-10)
{document.write("<hr color=red size=3 width="+i+"%>");}
document.write("<form name='f1‘><select name='s1'>");
year=2000;
while(year<2050)
{document.write("<option value="+year+">"+year+"</option>"); year++;
}
document.write("</select></form>");
</script>
<body>
<h1> Loop Demo</h1>
</body>
20
JavaScript – Control structures

• break
– Terminates the switch, loop or label statement and transfers control to the statement that
follows the loop.
• continue
– It continues from the beginning of the loop. It skips the portion of code.
– In a for loop, it transfers control to the update statement.
– In a while loop, control will be transferred to the condition check.
for(i=0; i<5; i++)

{ inner : /*JS Comments : label */
for(j=0;j<5;j++)
{
if(i==j){ break inner;}
document.write(j+" ");
}
document.write("<br>"); }
21
User defined Functions

• A function is a sequence of reusable code which has a name.
• Way to organize your code. User can write his own functions
• JavaScript functions are actions which are associated to the web page.
• JavaScript has some in-built functions.
function contains name, parameters and statements function.html (function.html.HTM)
function myfunction(argument1,argument2,etc) {
some statements;
}
There are two purposes for functions.
1. It is a reusable code which is used to perform the same operation without copying the code again and
again(organizational tool).
2. It is link to event and the web page. eg radio button, Mouse clicks, button presses, etc.
Top-Level functions
• eval
– Evaluates a string without reference to a particular object.
– eval( string)
• parseInt and parseFloat
– Converts the string value to numeric value.
– parseInt( string) , Syntax parseFloat( string)
• isNaN
– Determines whether the parameter is NaN (no ta number).
– isNaN( testValue)
• isFinite
– Determines whether it is a finite number
– isFinite( number)
funTop.html (funTop.html.HTM)
23
Top-Level functions - Demo

var1=parseInt("1Infy");
var2=parseInt("Infy");
var3=isFinite("3445");
var4=isFinite("Infy");
document.write("<h1>Using parseInt method for '1Infy' the output is <i><font
color=red>" +var1+"</font></i></h1>");
document.write("<h1>Using parseInt method for 'Infy' the output is <i><font color=red>"
+var2+"</font></i></h1>");
document.write("<h1>Using isFinite method for '3445' the output is <i><font color=red>"
+var3+"</font></i></h1>");
document.write("<h1>Using isFinite method for 'Infy' the output is <i><font color=red>"
+var4+"</font></i></h1>");
</script>
61
In-built properties
topproperty.html (topproperty.html.HTM)
25
Summary
26

Java Script Intro

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Java Script Intro

Uploaded by

Copyright:

Available Formats

JAVA SCRIPT Introduction

Course Objective Amity School of Engineering & Technology

Client Vs. Server Scripting

History of JavaScript (Self Study)

JavaScript – lexical structure

Embedding JavaScript into HTML page

• LANGUAGE - the scripting language used for writing scripts

Deferred and Immediate Script

Deferred and Immediate Script

JavaScript – Implicit data types

JavaScript – Operators - Demo

Can you answer these questions?

JavaScript – Control structures

JavaScript – Loop - Demo

JavaScript – Control structures

for(i=0; i<5; i++)

User defined Functions

Top-Level functions - Demo

You might also like