Scribd
Upload
13 views

Javascript

Uploaded by

kanagavel gurunathan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
13 views

Javascript

Uploaded by

kanagavel gurunathan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 23

JavaScript

Tr.G.kanagavel
B.Sc.,B.Ed.,M.C.A.,M.Phil.,C.I.G.,
SBOA Schools, Madurai-
625019
Why Study JavaScript?
JavaScript is one of the 3 languages all web
developers must learn:
1. HTML to define the content of web pages
2. CSS to specify the layout of web pages
3. JavaScript to program the behavior of web
pages
The Original JavaScript ES1 ES2 ES3 (1997-1999)
The First Main Revision ES5 (2009)
The Second Revision ES6 (2015)
All Yearly Additions (2016, 2017, 2018, 2019,
2020)
Introduction:
04.12.1995 – Netscape and Sun Inc. jointly

introduced JavaScript 1.0


(JavaScript)
HTML CGI on the Server

Common Scripting Lang. for web developers.


The JavaScript Client-side tech. provides many
advantages over traditional CGI Server-side
Scripts.
Advantages:
HTML -> Static Web Page
Real life web pages must be interactive
JS -> Dynamic Web Page
Validate before sending
Data ----------------> Server
This saves Server Traffic (less load on your server).
Rich Interface to site visitors
(Textboxes, Buttons,
drag-and-drop components and sliders)
<script> tag:
Tag can be placed anywhere with in the web

page.
Recommended to kept within the <head>

tags.
Script Commands – Script tag alerts the

browser program to start interpreting all the


text between these tags.
Syntax of JS in HTML or DHTML:

<script language=“javascript”
type=“text/javascript”>

JavaScript Code
<script>

Script tag has two important attributes


 Language (specify)
 Type (indicate)
Steps to follow to code JS Lang.
Enter HTML & JS code using any Text Editor

Save (filename.html)

Use any browser to see the result

If any changes required edit using editor and

save again then refresh (F5) the browser

Question: List any 5 browser name.


Simple JavaScript Program

The Two Basic Parts of an ICS


All clear? Great, let’s get back to SCADA!
Lexical Structure (rules) of JScript:
 Lowest level syntax of a language.

 Case-Sensitive Language

 Good practice to type in lower case.

 JS ignores spaces that appear between tokens.

 JS Supports 2 style of comments.

“//” – Single line comment

“/* */” – Multi line comment


 Use semicolon (;) to separate the statements (explicitly)

Question: Name the tokens.


Lexical Structure (rules) of JScript:
 A Literal is a data value for variable that

appears directly in a program.


 Identifier is simply a name

To name – variables, functions, labels for


certain loops.
 Keywords -> reserved words (can’t use as

identifier in the program)

Note: Tokens(Identifiers, operators, punctuator,


constant and keywords)
Variables:
 Variable is a memory location where value
can be stored.
Variable is a symbolic name for a value.
Variables are declared with var keyword in
JS.

Example:
var n;
keyword variable name (identifier)
var x = 5;
var y = 6;
Basic Data types:
 Data type – kind of data variable holds.

 String, Numbers & Booleans.

 String – list of characters


 String Literals - enclosing the characters in single or double
quotes.
 Strings may contain a single character or multiple
characters, including whitespace and special characters
such as \n (the newline).
 Numbers can be integer or floating-point numerical value
and numeric literals are specified in the natural way.
 Boolean can be any one of two values: true or false.
Boolean literals are indicated by using true or false directly
in the source code.
Rules for naming variable:
The first character must be a letter or an
underscore (_). Number cannot be as the first
character.
The rest of the variable name can include any
letter, any number, or the underscore. You
can't use any other characters, including
spaces, symbols, and punctuation marks.
JavaScript variable names are case sensitive.
That is, a variable named RegisterNumber is
treated as an entirely different variable than
one named registernumber.
There is no limit to the length of the variable
name.
Scope of variable:

The scope of a variable is the life time of a

variable of source code .


A global variable has global scope; it can be

defined everywhere in the JavaScript code.


Variables declared within a function are

defined only within the body of the function.


They are local variables and have local scope.
Assigning values to variables:
Variables can be assigned initial values when
they are declared as follows:
var numericData1 = 522;

var stringData = "JavaScript has strings\n It

sure does";
var numericData = 3.14;

var booleanData = true;


Assigning values to variables:
multiple variables can be declared with one var
statement, if the variables are separated by
commas: var no1=50, no2=5065;
JavaScript allows the implicit declaration of
variables by using them on the left-hand side of
an assignment.
JavaScript variables are untyped and it is
dynamically datatyped which means initially
you can assign a value of any data type to a
variable and later you can assign a value of
different data type to the same variable. For
example:
var value=100;
var value=”JavaScript”;
JavaScript Literals :
A literal is a fixed value given to a variable in
source code. Literals are often used to initialize
variables. For Example,
var int_const=250; //Integer constant//
var float_const=250.85; //Floating point
constant//
var char_const=’A’; //Character constant//
var string_const=”Raman”; //String constant//
var boolean_const=true; //Boolean constant//
Write statement:

General Syntax:
document.write ("string " + var);

Type casting in JavaScript.


The act of converting one data type into a
different data type which is also called as
casting.
In JavaScript there are two type of casting,
Implicit casting and
Explicit casting
Implicit casting occurs automatically in JavaScript
when you change the data stored in a variable:
JavaScript Operators and Expressions :

 An operator combines the values of its operands in some way and


evaluates to a new value.
 Operators are used for JavaScript’s arithmetic expressions,
comparison expressions, logical expressions, assignment
expressions.
 JavaScript interpreter can evaluate to produce a value.
 The data types are used directly as literals or within variables in
combination with simple operators, such as addition, subtraction,
and so on, to create an expressions.
 An expression is a code fragment that can be evaluated to some
data type the language supports. An expression is simply one or
more variables and/or constants joined by operators. An expression
is evaluated and produces a result. The result of all expressions
may be either an integer or floating-point value or Boolean value.
There are three types of expressions as follows,
 Arithmetic expressions
 Relational expressions
 Logical expressions
Arithmetic Operators :
JavaScript supports all the basic arithmetic
operators like addition (+), subtraction (–),
multiplication (*), division (/), and modulus (%, also
known as the remainder operator).
Arithmetic Operators :
Arithmetic Operators :
<Html>
<Head>
<Title>Demo Program – To test Arithmetic Operators in JavaScript
</Title>
</Head>
<Body>
<script language="javascript" type="text/javascript">
var value1 = 522, value2=10;
document.write("<br>Data1 : "+value1);
document.write("<br>Data2 : "+value2);
var sum = value1+value2;
var diff = value1-value2;
var prod = value1*value2;
var res = value1/value2;
var rem = value1%value2;
document.write("<br><br>The Sum of Data1 and Data2 : "+sum);
document.write("<br>The Difference of Data1 and Data2 : "+diff);
document.write("<br>The Product of Data1 and Data2 : "+prod);
document.write("<br>The Result after Division of Data1 and Data2 :
"+res);
document.write("<br>The Remainder after Division of Data1 and
Data2 : "+rem);

You might also like