Download as pdf or txt
Download as pdf or txt
You are on page 1of 98

JAVASCRIPT

Javascript is a client side scripting language.


To execute JavaScript following application is required:
1. text editor (notepad, notepad++,sublime text editor
etc. )
2. web browser (google chrome, firefox etc.)
extension if JavaScript file is .js
JavaScript code can be written inside html file.
There are two ways to write JavaScript code in a
webpage
1st method:
Javascript code will be written inside <script></script>
tag.
Exa:
<html>
<head>
<title>demo of javascript</title>
<script>
alert("this is first example");

</script>
</head>
<body>

</body>

</html>

2nd method
write JavaScript code inside external .js file and include
that file in a web page.
Example:
<html>
<head>
<title>demo of javascript</title>
<script src="demo.js"
type="text/javascript"></script>

</head>
<body>

</body>
</html>

24-05-2021
=========
How to enable JavaScript in a chrome:
Go to settings= privacy and securitysite settings=>
enable or disable JavaScript.
How to enable JavaScript in a firefox:
In url write about:config and press enter
Then search for javascript.enabled and make its value
true.
=>How to open javascript console in chrome:
Right click on the browser-> click on inspect option
From the inspect window, choose console option.
Example:
<html>
<head>
<title>demo of javascript</title>
<script type="text/javascript">
alert("hi");

</script>
<noscript>javascript is disabled in your
browser</noscript>
</head>
<body>

</body>

</html>
Variable in javascript:
-------------------------------
Variable is container which is used to hold the data.
Rule to write name of variable, function etc.
1. name alphabet(a-z, A_Z), digits(0-9), _ , $
example:
var raju@123=10; invalid variable name
var nielit patna=10; invalid variable name
2. name does not start with digit(0-9)
var 1st=100; invalid variable name
var hello123=100; valid variable name
3. keyword/reserved word of javascript can not be
used as variable name.

var true=100; invalid variable name


var TRUE=100; valid variable name

keyword of javascript:
break, case, catch, continue, debugger,
default, delete, do, else, finally
for, function, if, in, instanceof, new, return,
switch, this, throw, try, typeof, var, void, while,
with.
Future reserved words are tokens that may become
keywords in a future revision of
Javascript: class, const, enum, export, extends, import,
await and super.
Some future reserved words only apply in strict
mode: implements, interface, let, package, private, prot
ected, public, static, and yield.
 Additionally, the null, true, and false cannot be used
as variable in javascript.
 some reserved words that aren’t reserved words in
new revision anymore: int, byte, char, goto, long,
final, float, short, double, native, throws, boolean,
abstract, volatile, transient, and synchronized. It’s
probably a good idea to avoid these as well, for
optimal backwards compatibility.

To declare variable in javascript we use the following


1) var
2) let
3) const

example:
var a;
var b=4;
var a=10,b=6;

JavaScript is case sensitive scripting language.

typeof operator is used to know the type of variable


in javascript.
<html>
<head>
<title>demo of javascript</title>
<script type="text/javascript">
var a="nielit";
b=typeof(a)

alert(b)

</script>

</head>
<body>

</body>

</html>

JavaScript is a loosely typed scripting language.


JavaScript is a dynamically typed scripting
language.

Operator in javascript:
2+3 operand
+ operator
Arithmetic operator in js:
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus

5%7=5
20%3=2
20%-3 =2

-20%3=-2
-20 % -3=-2
Sign of Result after doing modulus operation depends
upon the sign of first operand.

Comparison operator or relational operator:


< Less then
> Greater then
<= Less then or equal to
>= Greater then or equal to
== Equal to
!= Not equal to

= : this is assignment operator.


Example:
2>3 false
5<10 true
5<5 false
6<=6 true
6<=9 true
5>=5 true
5>=10 false
5==7 false
7==7 true
5!=7 true
Example:
3<5
true
5<=10
true
5<=5
true
5==5
true
5==7
false
7!=10
True
Logical operator:
&& Logical AND
|| Logical OR

! Logical NOT

(3<5) && (5>2) true


(3>5) && (5>2) false
(3<5) && (5>20)
Op1 Op2 Op1 && Op2
true true true
True false false
False true false
False false false

Example:
(3<5) || (5>2)
true
(3>5) || (5>2)
true
(3<5) || (5>20)
true
(3<2) || (5>20)
False

Op1 Op2 Op1 || Op2


true true true
true false true
false true true
false false false

Logical NOT(!):
!(3>5)
true
!(3>2)
False
Op1 Op2 !Op1 !Op2
true true false false
true false false true
false true true false
false false true true
Conditional statement:
==================
1. if
2. if..else
3. else..if

if statement:
syntax:
if(test_condition)
{
Statements1;

}
In this first of all test_condition is evaluated, if test
condition is found to be true then statement inside if
will be executed, otherwise statement inside if will
not be executed.
Example:
<script type="text/javascript">
var a="nielit";
var b=10;
if(50>10)
{
alert(a)
}

</script>
Output:
Value of a will be shown in alert box.

Q:write a javascript code to check whether a given


natural number is odd or even.

Code:
<script type="text/javascript">
var n=22;

if(n%2==0)
{
alert("even number");
}
if(n%2==1)
{
alert("odd number");
}
</script>
Example:
<script type="text/javascript">
var n=41;

if(n%2==0)
{
alert("even number");
}
if(n%2!=0)
{
alert("odd number");
}

</script>

Output: same as above

=>if..else statement:
===================
Syntax:
If(test_condition)
{
Statement1;

}
else
{

Stmt2;

In case of if..else statement, first of all


test_condition is evaluated, if test condition is found
to be true then statement inside if will be executed,
otherwise statement inside else block will be
executed.
Example:
<script type="text/javascript">
var n=41;

if(n%2==0)
{
alert("even number");
}
else
{
alert("odd number");
}

</script>

If…else..if statement:
==============
Syntax:
If(test_condition1)
{
Stmt1;
}
else if(test_condition2)
{

}
else if(test_condition2)
{
}
------------------
------------------
else
{

Stmt n;
}

Q: write a javascript code to print the grade of a o


level student based on the following criteria.
Marks>=85 GRADE S
MARKS >=75 AND MARKS<85 GRADE A
MARKS >=65 AND MARKS<75 GRADE B

Example:
<script type="text/javascript">
var marks=30;
if(marks>=85)
{
alert("GRADE S");
}
else if(marks>=75)
{
alert("GRADE A");
}
else if(marks>=65)
{
alert("GRADE B");
}
else if(marks>=55)
{
alert("GRADE C");
}
else if(marks>=50)
{
alert("GRADE D");
}
else
{
alert("Grade FAIL");
}

</script>
Q: write a program to check the triangle is valid or
not. Value of angle is taken from the user.
Q: write a javascript code to check whether a person
is eligible for voting or not(age should be greter then
or equal to 18, value of age is taken
Q: write a javascript code to check whether a given
year is leap year or not.

1999 no
1900 nahi 1800 nahi 1700
2021 no
400, 800, 1200, 1600 leap,2000

Leap year:
1. Year should be divisible by 4 and should not
divisible by 100.
OR
2. Year should be divisible by 400
Logic.
((Year%4==0) && (year%100!=0)) ||(year%400==0)

Code:
<html>
<head>
<title>demo of javascript</title>
<script type="text/javascript">
var year=1600;
if(((year%4==0) && (year%100!=0))
||(year%400==0))
{
alert("leap year");
}

else
{
alert("not a leap year");
}

</script>

</head>
<body>

</body>

</html>
Q: write a program to check whether a given year is
leap year or not, value of year is taken using html
input box.
<html>
<head>
<title>demo of javascript</title>
<script type="text/javascript">
function check()
{
var
year=document.getElementById("box1").value;
if(((year%4==0) && (year%100!=0))
||(year%400==0))
{
alert("leap year");
}

else
{
alert("not a leap year");
}
}

</script>
</head>
<body>
enter 4 digit year(YYYY):<input type="text"
id="box1" /><br/>
<button onclick="check();">check year</button>
</body>

</html>

=>comment in Javascript:
Comment is used to enhance the readability and
understandability of the code.
Single line comment:
Syntax:
//some text
Multiline comment:
/*
Some text
Some text */

Example:
<html>
<head>
<title>demo of javascript</title>
<script type="text/javascript">
function check()
{
var
year=document.getElementById("box1").value;
/*var is used to declare a varible
modulus operator is give us
remainder*/
if(((year%4==0) && (year%100!=0))
||(year%400==0))
{
//alert("leap year"); this is
single line comment
alert("given year is leap year");
}

else
{
alert("not a leap year");
}
}

</script>
</head>
<body>
enter 4 digit year(YYYY):<input type="text"
id="box1" /><br/>
<button onclick="check();">check year</button>
</body>

</html>

02-06-2021
==========
a="hello"
"hello"
b="world"
"world"
a+b
"helloworld"
2+3
5
"h"+"k"
"hk"
2+"5"
"25"
"6"+3
"63"
Code:
<html>
<head>
<title>demo of javascript</title>
<script type="text/javascript">
function add()
{
var
n1=parseInt(document.getElementById("box1").valu
e);
var
n2=parseInt(document.getElementById("box2").valu
e);
var sum;
sum=n1+n2;
alert(sum);
}

</script>

</head>
<body>
enter 1st number:<input type="text" id="box1"
/><br/>
enter 2nd number:<input type="text" id="box2"
/><br/>
<button onclick="add();">add</button>
</body>

</html>

Output:
Console.log(): this is used for debugging purpose.
This is used to print the message on console.

document.write(): this is used for testing purpose.


It will delete all existing html code.
document.writeln(): same as document.write(), but
it will write newline character after each statement.

Htmlelementobject.innerHTML:

Example:
<html>
<head>
<title>demo of javascript</title>
<script type="text/javascript">
function add()
{
var
n1=parseInt(document.getElementById("box1").valu
e);
var
n2=parseInt(document.getElementById("box2").valu
e);
var sum;
sum=n1+n2;

document.getElementById("result").innerHTML="su
m of "+n1+" and "+n2+" = "+sum;
}

</script>

</head>
<body>
enter 1st number:<input type="text" id="box1"
/><br/>
enter 2nd number:<input type="text" id="box2"
/><br/>
<button onclick="add();">add</button>
<h1 id="result" style="color:red"></h1>
</body>
</html>

Function in JavaScript:
==================
Function is a block of code to perform a particular
task.

Debugging is easy
Reusability of code
Bigger code can be divided into smaller module.
To write a code using function involve two step
1. Function Definition( or function declaration)
2. Function calling.
1. Function definition
Syntax :

function functionname ()
{

//Javascript statement;

Ex2:
function functionname (parameter1, parameter2,…)
{

//Javascript statement;

Function calling
If you define a function it will not execute automatically.
User have to call it to execute the function.
Syntax of function calling:
Function_name();
Function calling may not have any parameter.

function_name(parameter1,parameter2,…);
function call may have n number of parameter.

Example:
<script type="text/javascript">
function add()
{
alert("hello");

add();

</script>
Example:
<script type="text/javascript">
function add(n1,n2)
{
var sum=n1+n2;
alert(sum);

add(12,10);

</script>

Example:
<script type="text/javascript">
function add(n1,n2)
{
var sum=n1+n2;
return sum;
}

k=add(12,10);
alert("sum= "+k);

</script>

Example:
<html>
<head>
<title>demo of javascript</title>
<script src="leapyear.js"></script>
<script type="text/javascript">
function fun1()
{
var
year=document.getElementById("box1").value;
isLeap(year);

}
</script>

</head>
<body>
enter 4 digit year(YYYY):<input type="text"
id="box1" /><br/>
<button onclick="fun1();">check year</button>
</body>

</html>

Q: check leap year using function call, when function


is written in external javascript file.
<html>
<head>
<title>demo of javascript</title>
<script src="leapyear.js"></script>
<script type="text/javascript">
function fun1()
{
var
year=document.getElementById("box1").value;
isLeap(year);

}
</script>

</head>
<body>
enter 4 digit year(YYYY):<input type="text"
id="box1" /><br/>
<button onclick="fun1();">check year</button>
</body>

</html>

Leapyear.js:
============
function isLeap(year)
{

/*var is used to declare a varible


modulus operator is give us
remainder*/
if(((year%4==0) && (year%100!=0))
||(year%400==0))
{
//alert("leap year"); this is
single line comment
alert("given year is leap year");
}

else
{
alert("not a leap year");
}
}
Switch case:

break: this statement is used to come out from the


inner loop or switch.

Syntax:
Switch(expression)
{
case value1: stmt1;
break;
case value2: stmt1;
break;
-------------------------------
-------------------------------

default: stmt;

}
Example;
<html>
<head>
<title>demo of javascript</title>
<script type="text/javascript">
var n=8;
switch(n)
{
case 1:alert("today is monday");
break;
case 2:alert("today is tuesday");
break;
case 3:alert("today is wednesday");
break;
case 4:alert("today is thursday");
break;
case 5:alert("today is friday");
break;
case 6:alert("today is saturday");
break;
case 7:alert("today is sunday");
break;

default: alert("please enter 1 to 7 only");


}

</script>

</head>
<body>

</body>

</html>

Example:
<html>
<head>
<title>demo of javascript</title>
<script type="text/javascript">
var n=5;
switch(n)
{
case 1:alert("today is monday");
case 2:alert("today is tuesday");

case 3:alert("today is wednesday");

case 4:alert("today is thursday");

case 5:alert("today is friday");

case 6:alert("today is saturday");

case 7:alert("today is sunday");

default: alert("please enter 1 to 7 only");

</script>

</head>
<body>

</body>
</html>

Output: today is Friday


today is Saturday
today is Sunday
please enter 1 to 7 only
above message will be displayed in alert box.

Q: write a jvascript code to check the given ulphabet


is vowel or not using switch case statement.
<html>
<head>
<title>demo of javascript</title>
<script type="text/javascript">

var n="D";
switch(n)
{
case "A":
case "a":
case "E":
case "e":
case "I":
case "i":
case "O":
case "o":
case "U":
case "u":alert("vowel");
break;
default: alert("not a vowel");

</script>

</head>
<body>

</body>

</html>

Same question with html input:


<html>
<head>
<title>demo of javascript</title>
<script type="text/javascript">
function fun1()
{
var
n=document.getElementById("box1").value;
switch(n)
{
case "A":
case "a":
case "E":
case "e":
case "I":
case "i":
case "O":
case "o":
case "U":
case "u":alert("vowel");
break;
default: alert("not a vowel");

}
}

</script>

</head>
<body>
enter a alphabet:<input type="text" id="box1"
/><br/>
<button onclick="fun1();">check year</button>

</body>

</html>
 Default statement generally placed at the end of
switch case, but it can be present anywhere within
the switch case.
<html>
<head>
<title>demo of javascript</title>
<script type="text/javascript">
function fun1()
{
var
n=document.getElementById("box1").value;
switch(n)
{
default: alert("not a vowel");
break;
case "A":
case "a":
case "E":
case "e":
case "I":
case "i":
case "O":
case "o":
case "U":
case "u":alert("vowel");

}
}

</script>

</head>
<body>
enter a alphabet:<input type="text" id="box1"
/><br/>
<button onclick="fun1();">check year</button>
</body>

</html>

Variable in javascript:
There are two type of variable in javascript
1. Local variable
2. Global variable
Local variable: local variable is a variable which is defined
within the function.
Global variable: it is defined outside the function.
<html>
<head>
<title>demo of javascript</title>
<script type="text/javascript">
var a=10; //global variable
function fun1()
{
var a=5; //local variable
alert(a); // print 5

}
alert(a); //print 10
fun1();

</script>

</head>
<body>

</body>

</html>
Datatype in javascript:

It is specifying what kind of data we can store in a


variable.

<script type="text/javascript">
var a=10;
alert(typeof(a));

</script>

Output:
number

There are two type of datatype in javascript:


1. Primitive
a. Number
b. Boolean
c. String
d. Undefined
e. Null
f. BigInt
g. Symbol
2. Non-premitive
a. Object
b. Function
Note there are nine data types are available in JavaScript
according to latest revision.

Example:
<script type="text/javascript">
var a=2.5;
alert(typeof(a));

</script>
Output: number

Example:
<script type="text/javascript">
var a="hello"; //or var a=’hello’
alert(typeof(a));

</script>
output:string
example:
<script type="text/javascript">
var a=true;
alert(typeof(a));

</script>
output: boolean
example:
<script type="text/javascript">
var a=false;
alert(typeof(a));

</script>
output: boolean

output:

<html>
<head>
<title>demo of javascript</title>
<script type="text/javascript">
var a=false;
alert("false");
</script>

</head>
<body>

</body>

</html>

Example:
<html>
<head>
<title>demo of javascript</title>
<script type="text/javascript">
var a;
alert(a);

</script>

</head>
<body>

</body>
</html>
Output: undefined

Undefined: if you declare a variable and not


assigning any value then its is undefined.

Null= it means nothing , it has exactly one value i.e


null

Form validation in javascript:


========================

Important event:
Onclick
Onmouseover
Onmouseout
Onsubmit
Onload
onblur
example:
<html>
<head>
<title>demo of javascript</title>
<script type="text/javascript">

alert(a);

</script>

</head>
<body>
<marquee onmouseover="this.stop();"
onmouseout="this.start();">hello world</marquee>

</body>

</html>
Trim(): this is used to remove whitespace from both the
side.
Syntax:
string.trim()
ex:
str1=” hello “;
alert(str1.trim()); output: hello without any space.

String.length:this is used to find the length of any string.

=================
charCodeAt: using this we can get the asci value from the
string.
Syntax:
String.charCodeAt(index);
Ex:
var b="A123";
undefined
b.charCodeAt(0)
65

Example:
<html>
<head>
<title>demo of javascript</title>
<script type="text/javascript">
function isvalid()
{
var
sname1=document.getElementById("uname").value;
sname=sname1.trim();
if(sname=="")
{

alert("name field can not left blank");


return false;

}
else if(sname.length<2)
{

alert("your name should not be less then 2


character");
return false;

}
}
function namevalid()
{
var
sname1=document.getElementById("uname").value;
sname=sname1.trim();
for(i=0;i<sname.length;i=i+1)
{
acode=sname.charCodeAt(i);
//alert(acode);
/*if((acode<97 && acode!=32) ||
acode>122)
{
alert("only small a-z is allowed");
return false;
}*/
if(!((acode>=97 && acode<=122) ||
(acode>=65 && acode<=90) || acode==32) )
{
alert("only small and capital is
allowed");
return false;
}
}
return true;

}
</script>

</head>
<body>
<form method="post" action="welcome.html">
enter name<input type="text" id="uname"/><br
/>

<input type="submit" name="submit"


value="submit" onclick="return namevalid();"/>

</form>

</body>

</html>

Example:
<html>
<head>
<title>demo of javascript</title>
<script type="text/javascript">
function isvalid()
{
var
sname1=document.getElementById("uname").value;
sname=sname1.trim();
if(sname=="")
{

alert("name field can not left blank");


return false;

else if(sname.length<2)
{
alert("your name should not be less then 2
character");
return false;

}
}
function namevalid(abc)
{
acode=abc.keyCode;
/*acode=sname.charCodeAt(i);
//alert(acode);
/*if((acode<97 && acode!=32) ||
acode>122)
{
alert("only small a-z is allowed");
return false;
}*/
if(!((acode>=97 && acode<=122) ||
(acode>=65 && acode<=90) || acode==32) )
{
// alert("only small and capital is
allowed");
return false;
}
else{
return true;
}

</script>

</head>
<body>
<form method="post" action="welcome.html">
enter name<input type="text" id="uname"
onkeydown="return namevalid(event)"/><br />

<input type="submit" name="submit"


value="submit" onclick="return namevalid();"/>

</form>

</body>

</html>

var a=10;
undefined
isNaN(a)
false
var b="abcd";
undefined
isNaN(b)
true
var c="11";
undefined
isNaN(c)
false

isNaN(): this is used to check whether a given value


is number or not.
This function will return true if given value is not a
number otherwise it return false.

charAt():this method is used to know the character


at a specified index.
Example:
var a="NIELIT";
undefined
a.charAt(0)
"N"
a.charAt(2)
"E"

indexOf():this method is used to know the index of


desired text in a string. It will show the index of first
occurrence only. It will return -1 if specified text is
not found.
indexOf(desiredtext,position)
var a="NIELIT";
undefined
a.indexOf("LI")
3
a.indexOf("@")
-1
var b="NIELIT";
undefined
b.indexOf("I")
1
b.indexOf("I",2)
4

lastIndexOf():this method is used to know the index


of desired text in a string. It will show the index of
last occurrence only. It will return -1 if specified text
is not found.
var a="NIELIT";
undefined
a.lastIndexOf("I")
4
Slice of a string in javascript:
slice(): this method is used to take the part of a
string from a given string.
var a="NIELIT";
undefined
a.slice(0,3)
"NIE"
a.slice(0)
"NIELIT"
a.slice(1)
"IELIT"

<html>
<head>
<title>demo of javascript</title>
<script type="text/javascript">
function isvalid()
{
var
sname1=document.getElementById("uname").value;
var
mobile=document.getElementById("mob").value;
var
gen=document.getElementsByName("gender");
sname=sname1.trim();
if(sname=="")
{

alert("name field can not left blank");


return false;

else if(sname.length<2)
{

alert("your name should not be less


then 2 character");
return false;

}
else if(isNaN(mobile))
{
alert("number not valid");
return false;
}
else if(mobile.length!=10)
{
alert("enter 10 digit only");
return false;
}
else if(!(gen[0].checked==true ||
gen[1].checked==true))
{
alert("pls select gender");
return false;

}
function namevalid(abc)
{
acode=abc.keyCode;
/*acode=sname.charCodeAt(i);
//alert(acode);
/*if((acode<97 && acode!=32) ||
acode>122)
{
alert("only small a-z is allowed");
return false;
}*/
if(!((acode>=97 && acode<=122)
|| (acode>=65 && acode<=90) || acode==32) )
{
// alert("only small and capital is
allowed");
return false;
}
else{
return true;
}

</script>

</head>
<body>
<form method="post"
action="welcome.html">
enter name<input type="text" id="uname"
onkeydown="return namevalid(event)"/><br />
mobile number<input type="text" id="mob"
/><br />

gender<input type="radio" name="gender"


value="M" />male
<input type="radio" name="gender"
value="F" />female
<input type="submit" name="submit"
value="submit" onclick="return isvalid();"/>

</form>

</body>

</html>
<html>
<head>
<title>demo of javascript</title>
<script type="text/javascript">
function isvalid()
{

sname1=document.getElementById("uname").value;

mobile=document.getElementById("mob").value;

gen=document.getElementsByName("gender");
sname=sname1.trim();
if(sname=="")
{

alert("name field can not left blank");


return false;

else if(sname.length<2)
{
alert("your name should not be less then 2
character");
return false;

}
else if(isNaN(mobile))
{
alert("number not valid");
return false;
}
else if(mobile.length!=10)
{
alert("enter 10 digit only");
return false;
}
else if(!(gen[0].checked==true ||
gen[1].checked==true))
{
alert("pls select gender");
return false;

}
function namevalid(abc)
{
acode=abc.keyCode;
/*acode=sname.charCodeAt(i);
//alert(acode);
/*if((acode<97 && acode!=32) ||
acode>122)
{
alert("only small a-z is allowed");
return false;
}*/
if(!((acode>=97 && acode<=122) ||
(acode>=65 && acode<=90) || acode==32) )
{
// alert("only small and capital is
allowed");
return false;
}
else{
return true;
}

</script>

</head>
<body>
<form method="post" action="welcome.html">
enter name<input type="text" id="uname"
onkeydown="return namevalid(event)"/><br />
mobile number<input type="text" id="mob"
/><br />

gender<input type="radio" name="gender"


value="M" />male
<input type="radio" name="gender" value="F"
/>female
<input type="submit" name="submit"
value="submit" onclick="return isvalid();"/>

</form>

</body>

</html>

21-06-2021
==========
<html>
<head>
<title>demo of javascript</title>
<script type="text/javascript">
function isvalid()
{

sname1=document.getElementById("uname").value;

mobile=document.getElementById("mob").value;

gen=document.getElementsByName("gender");

cat1=document.getElementById("cat").value;

cat1=document.getElementById("cat").value;

tc1=document.getElementById("tc").checked;
sname=sname1.trim();
if(sname=="")
{

alert("name field can not left blank");


return false;

else if(sname.length<2)
{

alert("your name should not be less then 2


character");
return false;

}
else if(isNaN(mobile))
{
alert("number not valid");
return false;
}
else if(mobile.length!=10)
{
alert("enter 10 digit only");
return false;
}
else if(!(gen[0].checked==true ||
gen[1].checked==true))
{
alert("pls select gender");
return false;

}
else if(cat1=="")
{

alert("pls choose category ");


return false;
}
else if(tc1==false)
{

alert("pls accept our term and condition ");


return false;
}

}
function namevalid(abc)
{
acode=abc.keyCode;
/*acode=sname.charCodeAt(i);
//alert(acode);
/*if((acode<97 && acode!=32) ||
acode>122)
{
alert("only small a-z is allowed");
return false;
}*/
if(!((acode>=97 && acode<=122) ||
(acode>=65 && acode<=90) || acode==32) )
{
// alert("only small and capital is
allowed");
return false;
}
else{
return true;
}

</script>
</head>
<body>
<form method="post" action="welcome.html">
enter name<input type="text" id="uname"
onkeydown="return namevalid(event)"/><br />
mobile number<input type="text" id="mob"
/><br />

gender<input type="radio" name="gender"


value="M" />male
<input type="radio" name="gender" value="F"
/>female
<br /><select name="cat" id="cat">
<option value="">select category</option>
<option value="gen">General</option>
<option value="obc">OBC</option>
<option value="sc">sc</option>
<option value="st">st</option>
</select><br />
<input type="checkbox" name="tc"
value="agree" id="tc"/>i agree term and condition of
your website.<br />
<input type="submit" name="submit"
value="submit" onclick="return isvalid();"/>

</form>

</body>

</html>
Output:
=======
Date 1-jan-201 01-01-2021 Saturday 23:56:43
Slider in javascript
Blinking text, blinking image
How to change background color at run time
==============
Angular js:
==========
Angular js is a javascript framework.
Official website to download angular Js is
http://angularjs.org
Cdn is as follows:
https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/an
gular.min.js

how to include angular js in our html pages.


<html>
<head>
<title>demo of javascript</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.
2/angular.min.js" type="text/javascript" ></script>
</script>

</head>
<body>

</body>

</html>

Exampl2:
<html>
<head>
<title>demo of javascript</title>
<script src="angular.min.js" type="text/javascript"
></script>
</script>

</head>
<body>

</body>

</html>

<html>
<head>
<title>demo of javascript</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.
2/angular.min.js" type="text/javascript" ></script>
</script>

</head>
<body>
<div ng-app="">
{{10+5}}
</div>

</body>

</html>
Output:15

ng-app:this directive is used to define the angular js


application area.
example:
<html>
<head>
<title>demo of javascript</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.
2/angular.min.js" type="text/javascript" ></script>
</script>

</head>
<body>
<div ng-app="">
{{3+5}}
</div>
<div>
{{3+5}}
</div>

</body>

</html>
Output:
8
{{3+5}}

Example:
<html>
<head>
<title>demo of javascript</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.
2/angular.min.js" type="text/javascript" ></script>
</script>

</head>
<body ng-app="">
<div >
{{3+5}}
</div>
<div>
{{3+5}}
</div>

</body>

</html>
8
8

expression in angular js:


expression will be written inside double curly braces in
angular js.
Syntax: {{ expression }}

<html>
<head>
<title>demo of javascript</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.
2/angular.min.js" type="text/javascript" ></script>
</script>

</head>
<body ng-app="">
<div >
{{3+5}}
</div>
<div>
{{3+5+7+8}}
</div>

</body>

</html>

ng-model: this directive is used to bind the html control


to a application variable.
Q: write a javascript code to print the name as we are
typing. Name is taken from the html input box.
Example:
<html>
<head>
<title>demo of javascript</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.
2/angular.min.js" type="text/javascript" ></script>
<script>
function print1()
{
a=document.getElementById("box1").value;

document.getElementById("result").innerHTML=a;

}
</script>

</head>
<body >
<input type="text" id="box1"
onkeyup="print1();"/>
<p id="result"></p>
</body>

</html>
Same program using angular js:
=========================
<html>
<head>
<title>demo of javascript</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.
2/angular.min.js" type="text/javascript" ></script>

</head>
<body ng-app="">
<input type="text" ng-model="name"/>
<p >{{name}}</p>

</body>
</html>

ng-bind:this directive is used to bind the application data


to the html view.
<html>
<head>
<title>demo of javascript</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.
2/angular.min.js" type="text/javascript" ></script>
</head>
<body ng-app="">
<input type="text" ng-model="name"/>
<p ng-bind="name"></p>

</body>

</html>

ng-init: this directive is used to initialize the angularJs


application data.

<html>
<head>
<title>demo of javascript</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.
2/angular.min.js" type="text/javascript" ></script>

</head>
<body ng-app="" ng-init="name='hi'">
<input type="text" ng-model="name"/>
<p ng-bind="name"></p>

</body>

</html>

You might also like