Scribd
Upload
10 views

Java Script Intro

The document provides an introduction to JavaScript, including: 1) JavaScript is used for building dynamic and interactive HTML pages and is executed on the client-side browser. 2) Client-side scripting runs on the user's computer and allows for user event validation/functionality, while server-side scripting runs on the web server and is used for business logic/data access. 3) JavaScript was originally developed as LiveScript by Netscape in 1995 and later renamed to leverage the popularity of Java. It has since evolved significantly.

Uploaded by

Anushka Sharma
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
10 views

Java Script Intro

The document provides an introduction to JavaScript, including: 1) JavaScript is used for building dynamic and interactive HTML pages and is executed on the client-side browser. 2) Client-side scripting runs on the user's computer and allows for user event validation/functionality, while server-side scripting runs on the web server and is used for business logic/data access. 3) JavaScript was originally developed as LiveScript by Netscape in 1995 and later renamed to leverage the popularity of Java. It has since evolved significantly.

Uploaded by

Anushka Sharma
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 26

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
Amity School of Engineering & Technology

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
Amity School of Engineering & Technology

Sample JS screen

5
Amity School of Engineering & Technology

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
Amity School of Engineering & Technology

Features of JavaScript

7
Amity School of Engineering & Technology

JavaScript – lexical structure

8
Amity School of Engineering & Technology

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
Amity School of Engineering & Technology

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
Amity School of Engineering & Technology

Deferred and Immediate Script


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

<script language="JavaScript">
<!--
/*calling function when user clicks on the button */
function msg(){
alert("Hi");
}
// -->
</script>
<form name="f1">
<input type="button" value=" ok "
onClick="msg()">
</form>
11
Amity School of Engineering & Technology

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
Amity School of Engineering & Technology

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
Amity School of Engineering & Technology

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
Amity School of Engineering & Technology

JavaScript – Operators - Demo


<script language="JavaScript">
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
Amity School of Engineering & Technology

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
Amity School of Engineering & Technology

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
Amity School of Engineering & Technology

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
Amity School of Engineering & Technology

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 ) {
zero or more statements
}
• do while loop
block of statements is executed first and then condition is checked
Syntax : do {
zero or more statements
}while ( test condition) Loop.html (Loop.html.HTM)

19
Amity School of Engineering & Technology

JavaScript – Loop - Demo


<script language="JavaScript">
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
Amity School of Engineering & Technology

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
Amity School of Engineering & Technology

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.
Amity School of Engineering & Technology

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
Amity School of Engineering & Technology

Top-Level functions - Demo


<script language="JavaScript">
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
Amity School of Engineering & Technology

In-built properties

topproperty.html (topproperty.html.HTM)

25
Amity School of Engineering & Technology

Summary

26

You might also like