Scribd
Upload
19K views

JAVASCRIPT Path Finder

Javascript is a client side scripting language that can be used to add interactivity to web pages. It requires a text editor and web browser to execute code. Javascript code can be written directly in HTML files between <script> tags or in external .js files included via the <script> tag. Variables in Javascript are declared with var, let, or const and can hold different data types as Javascript is dynamically typed. Common operators in Javascript include arithmetic, comparison, logical, and conditional operators. Conditional statements like if, if/else, and if/else if are used to execute code under certain conditions.

Uploaded by

nandan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
19K views

JAVASCRIPT Path Finder

Javascript is a client side scripting language that can be used to add interactivity to web pages. It requires a text editor and web browser to execute code. Javascript code can be written directly in HTML files between <script> tags or in external .js files included via the <script> tag. Variables in Javascript are declared with var, let, or const and can hold different data types as Javascript is dynamically typed. Common operators in Javascript include arithmetic, comparison, logical, and conditional operators. Conditional statements like if, if/else, and if/else if are used to execute code under certain conditions.

Uploaded by

nandan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 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