JS BASICS JAVA SCRIPT SCRIPTING

UNIT – III
JAVA SCRIPT
Arulkumar V P

Introduction: Scripting
• Scripting: Scripting is an easy way of automating the process
which is needed to be done step-by-step by a user.
• Scripting languages: do not require the compilation step and
are rather interpreted. For example, normally, a C program needs
to be compiled before running whereas normally, a scripting
language like JavaScript or PHP need not be compiled.
• Applications of Scripting Languages :
1.To automate certain tasks in a program
2.Extracting information from a data set
3.Less code intensive as compared to traditional programming
languages

Introduction: Types of Scripting
• Client scripting can be defined as a code that is present in
a client’s HTML page.
• It is usually attached to the browser in a language that is
compatible with the browser.
• The browser then downloads that code temporarily and
processes it without the server. If additional information is
required, a request is raised and sent to the server.
• Client-side programming languages are :
1) Javascript
2) VBScript
3) HTML
4) CSS
5) AJAX
6) jQuery etc.

• Server-side scripting is a method of designing websites
so that the process or user request is run on the
originating server.
• Server-side scripts provide an interface to the user and
limit access to proprietary data and help keep control of
the script source code.
• which produce a response customized for each user's
(client's) request to the website.
• Server-side programming languages are :
ASP .NET, PHP, C++, Java and JSP, Python, Ruby on Rails, R

CLIENT SIDE SCRIPTING SERVER SIDE SCRIPTING
Source code is visible to user. Source code is not visible to user
because its output of server side is
a HTML page.
It usually depends on browser
and it’s version.
In this any server side technology
can be use and it does not depend
on client.
It runs on user’s computer. It runs on web server.
There are many advantages link
with this like faster. response
times, a more interactive
application.
The primary advantage is its ability
to highly customize, response
requirements, access rights based
on user.

CLIENT SIDE SCRIPTING SERVER SIDE SCRIPTING
It does not provide security for
data.
It provides more security for data.
It is a technique use in web
development in which scripts
runs on clients browser.
It is a technique that uses scripts
on web server to produce a
response that is customized for
each clients request.
HTML, CSS, javascript and
VBScript
ASP, PHP, Python, Java and Ruby

Introduction: JavaScript
• JavaScript is the most popular scripting language on the
internet, and works in all major browsers, such as Internet
Explorer, Firefox, Chrome, Opera, and Safari.
• What is JavaScript?
• JavaScript is a scripting language
• JavaScript is usually embedded directly into HTML pages
• JavaScript was designed to add interactivity to HTML pages
• JavaScript is an interpreted language (means that scripts
execute without preliminary compilation)

• Everyone can use JavaScript without purchasing a license.
• JavaScript is Netscape's cross-platform, object-oriented
scripting language.
• Core JavaScript contains a core set of objects, such as
Array, Date, and Math, and
• A core set of language elements such as operators,
control structures, and statements. Core JavaScript can
be extended for a variety of purposes by supplementing it
with additional objects.

What can a JavaScript do? (Applications)
• JavaScript gives HTML designers a programming tool
HTML authors are normally not programmers, but JavaScript
is a scripting language with a very simple syntax! Almost
anyone can put small "snippets" of code into their HTML
pages
• JavaScript can put dynamic text into an HTML page - A
JavaScript statement like this:
document.write("<h1>" + name + "</h1>") can write a
variable text into an HTML page
• JavaScript can react to events - A JavaScript can be set to
execute when something happens, like when a page has
finished loading or when a user clicks on an HTML element.

What can a JavaScript do?
• JavaScript can be used to validate data - A JavaScript
can be used to validate form data before it is submitted
to a server. This saves the server from extra processing
• JavaScript can be used to create cookies - A JavaScript
can be used to store and retrieve information on the
visitor's computer
• JavaScript can read and write HTML elements - A
JavaScript can read and change the content of an HTML
element

JavaScript: Placement in HTML File
In HTML, JavaScript code is inserted between
<script> . . . </script> tag
The most preferred ways to include JavaScript in an
HTML file are
1. Script in <head>...</head> section.
2. Script in <body>...</body> section.
3. Script in <body>...</body> and <head>...</head>
sections.
4. Script in an external file and then include in
<head>...</head> section.

JavaScript: <script> tag
JavaScript programs can be inserted into any part of an
HTML document with the help of the <script> tag, which is
automatically executed when the browser processes the tag.
The <script> tag has a few attributes that are
The type attribute: <script type=…>
he language attribute: <script language=…>
<script type="text/javascript">
. . . .
</script>
Script files are attached to HTML with the src attribute:
<script src="/path/to/script.js"> . . . </script>

JavaScript: <script> tag
A single <script> tag can't have both the src attribute
and code inside.
<script src="file.js"></script> <script>
alert("HELLO");
</script>
<script src="file.js">
alert("HELLO"); // the content is ignored, because src
is set </script>
x


JavaScript: <script> in <head>
• If you want to have a script run on some event, such as when a
user clicks somewhere
• Scripts to be executed when they are called, or when an event
is triggered, go in the head section.
• If you place a script in the head section, you will ensure that
the script is loaded before anyone uses it.
<html>
<head>
<script type = "text/javascript">
alert("Hello World")
</script>
</head>
<body>
<h2> Alert Completed </h2>
</body>
</html>

JavaScript: <script> in <body>
If we want to display/generate content in html on page
load, we can place <script> inside the <body>:
<html>
<head>
</head>
<body>
<script type = "text/javascript">
document.write("Hello World")
</script>
<p>This is web page body </p>
</body>
</html>

JavaScript: <script> in <head> & <body>
You can place an unlimited number of scripts in your
document, so you can have scripts in both the body and the head
section, the <script> in <head> will be loaded first.
<html>
<head>
....
</script>
</head>
<body>
....
</script>
</body>
</html>

JavaScript: <script> in External file (.js)
• JavaScript files have the file extension .js
• External JavaScript file (.js) can be referenced using
<script src="/PathToScriptFile.js"></script>
 src attribute is used to specify the full path of .js file.
• You can place an external script reference in <head> or
<body> as you like.
• External scripts cannot contain <script> tags.
• Placing scripts in external files has some advantages:
• It separates HTML and code
• It makes HTML and JavaScript easier to read and maintain
• Cached JavaScript files can speed up page loads

JavaScript: Code Structure
• Statements are syntax constructs and commands that perform
actions.
• We can have as many statements in our code as we want.
Statements can be separated with a semicolon.
• The semicolon is optional (according to the JavaScript
standard), and the browser is supposed to interpret the end of
the line as the end of the statement.
• A semicolon may be omitted in most cases when a line break
exists.
var v= 3 +
4 + 4;
If the line ends with a plus "+", then it is an "incomplete
expression", so the semicolon is not required. And in this case
that works as intended.

Note: Using semicolons makes it possible to write multiple
statements on one line.
Ex:
var name = "Jeeva"
var mark = 89
(or)
var name = "Jeeva"; var mark = 89
JavaScript is Case Sensitive
Unlike HTML, JavaScript is case sensitive - therefore
watch your capitalization closely when you write JavaScript
statements, create or call variables, objects and functions.
Ex: num, Num are different variables.

JavaScript Code:
JavaScript code (or just JavaScript) is a sequence of JavaScript
statements.
Each statement is executed by the browser in the sequence they are
written.
This example will write a heading and two paragraphs to a web
page:
Example:
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>

JavaScript Blocks
• JavaScript statements can be grouped together in blocks.
• Blocks start with a left curly bracket { ,
• and ends with a right curly bracket } .
• The purpose of a block is to make the sequence of statements
execute together.
Example
{
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
}
</script>

JavaScript: Comments
Single line comments:
Comments can be added to explain the JavaScript, or to make the
code more readable.
Single line comments start with //.
JavaScript Multi-Line Comments
Multi line comments start with /* and end with */.
The following example uses a multi line comment to explain the
code:
Using Comments at the End of a Line
In the following example the comment is placed at the end of a
code line.
document.write("Hello"); // Write "Hello“

JavaScript: Variables
Variables as symbolic names for values in your application. You
give variables names by which used to hold values or expressions.
We refer to them and which must conform to certain rules.
A variable can have a short name, like x, or a more descriptive name,
like carname.
• A JavaScript identifier, or name, must start with a letter or
underscore ("_"),
• Subsequent characters can also be digits (0-9).
• Because JavaScript is case sensitive, letters include the characters
"A" through "Z" (uppercase) and the characters "a" through "z"
(lowercase).
• Identifier name must not contain any white-space.
• legal names: Number_hits, temp99, and _name
• illegal names: 9temp, Number hits,

Declaring (Creating) JavaScript Variables
Creating variables in JavaScript is most often referred to as
"declaring" variables.
We can declare a variable in two ways:
• By simply assigning its a value. For example, x = 42
• With the keyword var. For example, var x = 42
var x;
var carname;
After the declaration shown above, the variables are empty (they
have no values yet).
However, you can also assign values to the variables when you
declare them:
var x=5;
var carname="Volvo";

Assigning Values to Undeclared JavaScript Variables:
If you assign values to variables that have not yet been declared,
the variables will automatically be declared.
These statements:
x=5;
carname="Volvo";
Redeclaring JavaScript Variables:
If you redeclare a JavaScript variable, it will not lose its original
value.
var x=5;
var x;
After the execution of the statements above, the variable x will still
have the value of 5. The value of x is not reset (or cleared) when
you redeclare it.

JavaScript: Variables Scope
When we set a variable identifier by assignment outside of a
function, it is called a global variable,
because it is available everywhere in the current document. When
we declare a variable within a
function, it is called a local variable, because it is available only
within the function.
let keyword used for variable declaration in JavaScript like var but
the difference between them is that var is function scoped(global)
and let is block scoped. Example:
var a = 10;
var a = 20; //a is replaced
let a = 10;
let a = 20; //SyntaxError: //Identifier
'a' has already been declared

JavaScript: Operators
JavaScript operators are symbols that are used to perform
operations on operands, types of operators in JavaScript
• Arithmetic Operators
• Comparison (Relational) Operators
• Assignment Operators
• Bitwise Operators
• Logical Operators
• Special Operators

JavaScript: Arithmetic Operators
Operator Description Example
+ Addition 10+20 = 30
- Subtraction 20-10 = 10
* Multiplication 10*20 = 200
/ Division 20/10 = 2
%
Modulus
(Remainder)
20%10 = 0
++ Increment var a=10; a++; Now a = 11
-- Decrement var a=10; a--; Now a = 9

JavaScript: Comparison Operators
== Is equal to 10==20 => false
===
Identical
(equal and of same type)
10===20 => false
10 === "10" => false
!= Not equal to 10!=20 => true
!== Not Identical 20!==20 => false
> Greater than 20>10 => true
>= Greater than or equal to 20>=10 => true
< Less than 20<10 => false
<= Less than or equal to 20<=10 => false

JavaScript: Assignment Operators
= Assign 10+10 = 20
+= Add and assign var a=10; a+=20; Now a = 30
-= Subtract and assign var a=20; a-=10; Now a = 10
*= Multiply and assign var a=10; a*=20; Now a = 200
/= Divide and assign var a=10; a/=2; Now a = 5
%= Modulus and assign var a=10; a%=2; Now a = 0

JavaScript: Logical Operators
&& Logical AND (10==20 && 20==33)
=> false
|| Logical OR (10==20 || 20==33)
=> false
! Logical Not !(10==20) => true
Logical operators are used to determine the logic between
variables or values. An expression containing logical
operator returns either 0 or 1 depending upon whether
expression results true or false.

JavaScript: Bitwise Operators
The bitwise operators perform bitwise operations on
operands.
& Bitwise AND (10==20 & 20==33) = false
| Bitwise OR (10==20 | 20==33) = false
^ Bitwise XOR (10==20 ^ 20==33) = false
~ Bitwise NOT (~10) = -10
<< Bitwise Left Shift (10<<2) = 40
>> Bitwise Right Shift (10>>2) = 2
>>>
Bitwise Right Shift
with Zero
(10>>>2) = 2

JavaScript: Bitwise Operators
The bitwise operators perform bitwise operations on
operands. Example:
12 = 00001100 (In Binary)
25 = 00011001 (In Binary)
Bit Operation of 12 and 25
00001100 ------>12
& 00011001 ------>25
00001000 ==> 8 (In decimal)

JS BASICS JAVA SCRIPT SCRIPTING

More Related Content

What's hot (20)

Similar to JS BASICS JAVA SCRIPT SCRIPTING (20)

Recently uploaded (20)

JS BASICS JAVA SCRIPT SCRIPTING