Scribd
Upload
13 views

Javascript

Uploaded by

kanagavel gurunathan
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
13 views

Javascript

Uploaded by

kanagavel gurunathan
Copyright
© © All Rights Reserved
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