Javascript
What is javascript?
Originally developed by Brendan Eich and originally known
as LiveScript, the programming language JavaScript was
renamed in 1995.
JavaScript is an client-side scripting language that allows a web
designer the ability to insert code into their web page.
Javascript is a lightweight , interpreted, object oriented language
and is known as the scripting language for web pages.
JavaScript is commonly placed into an HTML file, and runs directly
from the web page.
Font-end development and also back end development (node.js)
Javascript is a case sensitive.
Advantages of javascript
Interpreted languages: JavaScript is an interpreted language. It
requires no compilation process so no compiler is required.
Easy to learn: The syntax of JavaScript is very easy. Any person
can learn it very easily and use it to develop attractive websites.
Easy to Debug and Test: JavaScript code is interpreted line by
line. The errors are indicated along with line number. It is very easy
to find error in the code, correct it and test it gain.
Event-Based Programming: JavaScript is an event-based
language. It means that different code segment are executed when
certain event occur.
Why learn javascript
Javascript allows you to build interactive websites.javascript has
become an esstional web technology along with HTML and CSS as
most browser implement javascript.
Uses of Javascript
Input Validation: JavaScript can be used to validate the input.
Data entered informs should be validated before it is processed.
Mouse Effects: JavaScript can used to create different buttons
with interesting mouse rollover effects. It makes browsing more
interesting and attractive.
Popup Windows: JavaScript can be used to create popup
windows. These windows are normally used to display important
announcements, offers and news etc.
User Interaction: JavaScript can be used to interest with the user.
The input entered by the user can be processed and proper
message can be displayed to the user.
What is validation?
Validation is a process of testing and ensuring that the user has
entered required and properly formatted information through the
web form.
Type of Validation
1. Client-side validation
In client-side validation method, all the input validations and
error recovery process is carried out on the client side i.e on
the user’s browser.
2. Server-side validation
In server-side validation, all the input validations and error
recovery process is carried out on the server side.
Client Side Validation
Client-side validation is faster
than server-side because, the
validation takes place on
client side (on browser)
Client -side validation is less
secure
Server side validation
server-side validation is done
on the web server. Then the
server renders the data into
html page and sends back to
the client (browser)
Server-side validation is more
secure
Javascript Synatx:
JavaScripts in HTML must be inserted between <script> and
</script> tags.
<script >
Statement;
</script>
JavaScripts can be put in the <body> and in the <head> section of
an HTML page.
Type of Javascript
1.Internal Javascript
<script language="javascript" type="text/javascript">
JavaScript code
</script>
The script tag takes two important attributes:
o language: This attribute specifies what scripting language you
are using. Typically, its value will be javascript.
o type: This attribute is what is now recommended to indicate
the scripting language in use and its value should be set
to "text/javascript".
2. External Javascript
External JavaScript files have the file extension .js
<script src="myScript.js"></script>
Designer can use both internal and external javascript
Invalid Format
<script type="text/javascript" src="myjs.js">
document.write("welcome");
</script>
Valid format :
<script type="text/javascript" src="myjs.js"></script>
<script type="text/javascript">
document.write("welcome");
</script>
Javascript can display data in different ways:
Window.alert ();
The Window.alert() method displays an alert dialog with the optional
specified content and an OK button.
Syntax: window.alert(message);
<<html>
<head>
</head>
<body>
<script>
window.alert("welcome");
</script>
</body>
</html>
Document.write();
The write() method writes HTML expressions or JavaScript code to a
document.
window.write(message);
<html>
<head>
</head>
<body>
<script type="text/javascript">
document.write("Helloworld!");
</script>
</body>
</html>
Variable
variables can be used to hold values. Variables are declared with
the var keyword.
Global Variables: A global variable has global scope which
means it is defined everywhere in your JavaScript code.
Local Variables: A local variable will be visible only within a
function where it is defined. Function parameters are always
local to that function.
<html>
<head>
</head>
<body>
<script>
var a=20;
var b=30.6;
var c="welcome";
document.write("The value of A="+a+"<br/>");
document.write("The value of
document.write("The value of
</script>
</body>
</html>
B="+b+"<br/>");
C="+c);
To write program for swapping of two number
<html>
<head>
</head>
<body>
<script>
var a=20;
var b=30;
var temp;
document.write("The value
document.write("The value
temp=a;
a=b;
b=temp;
document.write("<br/>");
document.write("The value
document.write("The value
</script>
</body>
</html>
of a ="+a);
of b="+b);
of a ="+a);
of b="+b);
Hoisting
Hoisting is a JavaScript mechanism where variables and
function declarations are moved to the top of their scope before
code execution.
<html>
<head>
<script type="text/javascript">
Var a=20;
document.write(a+””+b);
var b=30;
</script>
</head>
</html>
Let Keyword:
Let allows us to declared variables that are limited in scope to
the block.
<html>
<head>
<script type="text/javascript">
let a=20;
function myfun()
{
let a=40;
document.write(a+"<br/>");
}
myfun();
document.write(a);
</script>
</head>
</html>
Difference between var and let
var and let are both used for variable declaration in javascript
but the difference between them is that var is function scoped
and let is block scoped.
<html>
<head>
<script type="text/javascript">
document.write(a);
var a=20;
document.write(a);
</script>
</head>
</html>
<html>
<head>
<script type="text/javascript">
if(true)
{
var i=10;
document.write(i);
}
document.write(i);
</script>
</head>
</html>
<html>
<head>
<script type="text/javascript">
document.write(a);
let a=20;
document.write(a);
</script>
</head>
</html>
<html>
<head>
<script type="text/javascript">
if(true)
{
let i=10;
document.write(i);
}
document.write(i);
</script>
</head>
</html>
Const: This declaration
create constant whose scope can be
either local or global to a block.
<html>
<head>
<script type="text/javascript">
if(true)
{
const i=10;
document.write(i);
}
document.write(i);
</script>
</head>
</html>
<html>
<head>
<script type="text/javascript">
const i=10;
if(true)
{
i=20;
document.write(i);
}
document.write(i);
</script>
</head>
</html>
Operator
JavaScript operators are used to perform an operation. There are
different types of operators for different uses.
1. Artithmetic Operators
Operator
Description
+
-
Addition
Subtraction
*
Multiplication
/
Division
%
Modulus (remainder of a division)
++
Increment
--
Decrement
Write program by using Arithmetic Operators
<html>
<head>
</head>
<body>
<script type="text/javascript">
var a=20;
var b=30;
var c;
c=a+b;
document.write("The Addition of two number = "+c);
document.write("<br/>");
c=a-b;
document.write("The substraction of two number = "+c);
document.write("<br/>");
c=a*b;
document.write("The Multiplication of two number = "+c);
document.write("<br/>");
c=a/b;
document.write("The Division of two number = "+c);
</script>
</body>
</html>
Write program for swapping without using third variable
<html>
<head>
</head>
<body>
<script>
var a=20;
var b=30;
document.write("The value of a ="+a);
document.write("The value of b="+b);
a=a+b;
b=a-b;
a=a-b;
document.write("<br/>");
document.write("The value of a ="+a);
document.write("The value of b="+b);
</script>
</body>
</html>
2. Assignment Operators
Operator
=
+=
-=
*=
Description
Assign
Add and assign. For example, x+=y
is the same as x=x+y.
Subtract and assign. For example,
x-=y is the same as x=x-y.
Multiply and assign. For example,
x*=y is the same as x=x*y.
/=
Divide and assign. For example,
x/=y is the same as x=x/y.
%
Modulus and assign. For example,
x%=y is the same as x=x%y.
3. comparison Operators
Operator
==
===
!=
!==
>
>=
<
<=
4. Logical/Boolean Operators
Operator
&&
||
!
Description
Is equal to
Is identical (is equal to and is of the
same type)
Is not equal to
Is not identical
Greater than
Greater than or equal to
Less than
Less than or equal to
Description
and
or
not
5. String Operators
Operator
=
+
+=
Description
Assignment
Concatenate (join two strings together)
Concatenate and assign.