Notes

https://www.youtube.com/playlist?
list=PLzdWZT-ZJD0_IqetEOq2FxjQucklQi9KG
Java script used to create interactive websites. It is

mainly used for:
• Client-side validation.
• Dynamic drop down menus.
• Displaying date and time
• Displaying popup windows and dialog boxes.
JAVASCRIPT SYNTAX:
<html>
<head>
<title> Javascript syntax </title>
<script type="text/javascript">
document.write("Hi this is sample program");
</script>
</head>
<body>
</body>
</html>
There are three ways to include Javascript code.

.We include in Head tag
.We include in Body tag
.we can write in External file also
JAVASCRIPT FOR EXTERNAL FILE:

external.js
document.write("Hi this is sample program");
sample.html
<html>
<head>
<script type="text/javascript" src="external.js">
</script>
</head>
<body>
</body>
</html>
THREE WAYS TO ADD CONTENT IN WEBPAGE

1. document.write("Hi this is sample program");------(Testing Purpose)
2. alert("Hi this is sample program");-------(Alert Box)
or
window.alert("Hi this is sample program");
3.<p id="demo"></p>
<script type="text/javascript">
document.getElementById("demo").innerHTML="This is for Form Validation";
</script>
FUNCTIONS
A function is a set of statements enclosed within curly brackets ({}) that take
inputs, do the computation, and provide the resultant output.
You can call a function multiple times, thereby allowing reusability and modularity
in C programming.
<script>
function _name(){
document.write("Welcome to function");
}
_name(); //function calling... without calling the function will not execute.
</script>
IF We want to call the function dynamically fallow below process.

<script>
function _name(){
document.write("Welcome to function");
}
</script>
<input type="button" value="Click Me" onclick="_name()"/> //this is known as
Dynamic Function Calling
In function we can pass (Arguments/Parameters/Values)

<script>
function multiply(number){ //function functionname(parameters)
document.write(number*number*number);
}
</script>
<input type="button" value="Click Me" onclick="multiply(2)"/>
return type function-- a return statement ends the execution of a function and
returns the control to the calling function.
<script>
function multiply(number){
return number*number*number;
document.write("hello"); //it does not execute because the return type
function.
}
</Script>
<script>
document.write(multiply(4));
</script>
Variables in JAVA---- It is a Case Sensitive Language(A a) these are different.

<script>
var a=20;
document.write(a);
</script>
<script>
var a=20;
var b=30;
document.write(a+b);
</script>
Variables are two types:-

1) Local Variables (Inside function)
2) Global Variables (outside function)
<script>
function add(){
var x=50; //local Variable
document.write("Value of x is" + x); //we have to use with in that
function only.
}
add();
</script>
<script>
var x=45; //Global variable
function add(){
document.write(x);
}
add();
document.write(x+20);
</script>
DATATYPE
Data types are declarations for variables. This determines the type and size of
data associated with variables.
There are 5 types
1) Number Datatype(int,float)
2) String Datatype
3) Boolean Datatype
4) Regular Expression
5) Array
1) Number Datatype
<script>
var x=35;
document.write(x);
</script>
<script>
var x=35;
console.log(x)
</script>
2) String Datatype
<script>
var x="Rama Krishna";
document.write("My Name is:" + x);
</script>
3) Boolean Datatype
<script>
var x=true;
document.write(x);
</script>
4)Regular Expressions
<script>
var x=25;
var y=30;
var z=x+y;
document.write(z);
</script>
5) Array
<script>
const cars = ["Saab", "Volvo", "BMW"];
document.write(cars);
</script>
To Know what type of data it is:

<script>
var x=25;
document.write(typeof(x));
</script>
Example for Array consists of objects:

"Children": [
{
"name": "Olive",
"age": 11
},
{
"name": "Elula",
"age": 17
},
{
"name": "Mont",
"age": 13
}
]
Example for object:

"Spouse": {
"First_Name": "Rama",
"Last_Name": "Kalyani",
"age": 25
}
Operator
There are 6 types of operators
1) Arithmetic Operators (+, -, *, /, %, ++, --) [%(modulas-Remainder)]
2) Assignment Operators (=, +=, -=, *=, /=, %=)
3) Comparison/Relational Operators (==, !=, <, <=, >, >=) [To check one
condition only]
4) Bitwise Operators (&, |, ^, <<, >>, >>>) [To check Multiple Conditions]
[^(xor)(anyone is true or any one is false)]
5) Logical Operators(&&, ||, !)
6) Terinory Operator-------------a=10, b=20 big = a>b?a*5:b*2
Ex: Arithmetic Operator

<script>
var x=30;
var y=10;
document.write(x + y);
</script>
Ex: Assignment Operator

<script>
var x=30;
x=x+10; // or use x+=10;
document.write(x);
</script>
Ex: Relational Operators

<script>
var x=10;
var y=20;
if(x==y){
document.write("True");
}
else{
document.write("False");
}
</script>
Ex: Bitwise Operator

<script>
var x=10;
var y=20;
var z=30;
if(x>y & x>z){
document.write("x is greaterthan y and z");
}
else if(x<y & x<z){
document.write("x is lessthan y and z");
}
else{
document.write("z is greater number");
}
</script>
<script>
var fname="Rama";
var sname="krishna";
if(fname=="Rama" | sname=="gopal"){
document.write("Welcome" +);
}
</script>
IF-Else Statement
<script>
var x=20;
if(x%2 == 0){
document.write("X is even number");
}
else{
document.write("X is odd number");
}
Ex:
<script>
var marks=85;
if(marks>90){
document.write("A Grade");
}else if(marks>75){
document.write("B Grade");
}else if(marks>60){
document.write("C Grade");
}else if(marks>45){
document.write("D Grade");
}else{
document.write("FAIL");
}
</script>
Loops
There are three types of loops for,while,do-while
<script>// for loop is used when no of iterations we know
for(initialization; condition; increment){
//code will be executed }
</script>
EX:
<script>
for(i=0; i<=5; i++){
document.write("Hello <br/>");
}
</script>
Ex:
<script>
for(i=1; i<=10; i++){
document.write(2*i +"<br/>");
//document.write("2 x" + i + "=" + 2*i +"<br/>");
}
</script>
Ex:
<script>
var i=1;
while(i<=50){ //while loop is used when no of iterations we din't know
document.write(i + "<br/>");
i=i+2;
}
</script>
Ex:
<script>
var i=1;
do{
document.write(i + "<br/>");
i=i+2;
}
while(i<=50)
</script>
SWITCH STATEMENT
<script>
var marks=60;
switch(true){
case marks>90 :result="A Grade";
break;
case marks>75 :result="B Grade";
break;
case marks>60 :result="C Grade";
break;
case marks>45 :result="D Grade";
break;
default: result="FAIL";
}
document.write(result);
</script>
ARRAYS
Arrays are declared in three ways
1) By array literal
2) Array Directly(New Keyword)
3) Array Constructor
Ex: By Array Literal

<script>
var students=["Hari","Seetha","Gopal"];
for(i=0,i<students.length,i++){
document.write(students[i] + "<br/>");
}
</script>
Ex: Array Directly

<script>
var i=0;
var student=new Array();
student[0]="Ravi";
student[1]="Chanti";
student[2]="Banti";
student[3]="Latha";
while(i<student.length){
document.write(student[i] + "<br>");
i++;
}
</script>
Object
<script>
var student1={rollno:6, name:"Hari", Branch:"ECE"}
document.write(student1.rollno + "" + student1.name + "" +student1.Branch);
</script>
Date and time

<script>
var today=new Date();
document.write(today);
</script>
Ex: To get date

<script>
var today=new Date(); //it prints complete date and time
var day=today.getDate();
var month=today.getMonth();
var year=today.getFullYear();
document.write(day + "/" + month + "/"+ year);
</script>
Ex: To get Time

<script>
var today=new Date(); //it prints complete date and time
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
document.write(h + ":" + m + ":"+s);
</script>
Ex: To get Time Dynamic

<span id="rk"> </span>
<script>
function AbcTime(){
var now= new Date();
var h=now.getHours();
var m=now.getMinutes();
var s=now.getSeconds();
document.getElementById("rk").innerHTML=h + ":" + m + ":" + s;
setInterval("AbcTime()",1000);
}
AbcTime();
</script>
Ex: String charAt, indexOf

<script>
var x=new String("Hello");
document.write(x.charAt(2));
document.write(x.indexOf("H"));
document.write(x.toLowerCase());
document.write(x.slice(2,5));
</script>
Browser Object Model(BOM)

The Browser Object Model (BOM) allows JavaScript to "talk to" the browser.
There are 6 types they are:
1) Window object (alert, confirm, prompt, open, close, size, setInterval,
setTimeout)
2) History Object(back, forward)
3) Navigator Object( to know browser details)
Window Object:
<script>
window.alert("Hello");
</script>
<script>
window.confirm("Hello");
</script>
<script>
window.prompt("How are you?");
</script>
<script>
var x = window.prompt("How are you?");
document.write(x);
</script>
<script>
window.open("http://www.google.com");
</script>
<script>
function abc(){
window.open("http://www.google.com");
}
</script>
<input type="button" value="google" onclick="abc()">
<script>
window.close();
</script>
<script>
var w=window.innerWidth;
var h=window.innerHeight;
document.write(w+ " " + h);
</script>
<script>
function myFunction(){
alert("Hello");
}
setInterval(myFunction, 2000);
</script>
<script>
function myFunction(){
alert("Your time is over");
}
setTimeout(myFunction, 5000);
</script>
History Object:
<a href="second.html"> Second Page</a>
<script>
function goBack(){
history.back();
}
</script>
<input type="button" value="Back" onclick="goBack();">
Navigator object:
<script>
document.write(navigator.appName);
</script>
<script>
document.write(navigator.appVersion);
</script>
<script>
document.write(navigator.cookieEnabled);
</script>

Notes

Uploaded by

Copyright:

Available Formats

Notes

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Notes

Uploaded by

Copyright:

Available Formats

https://www.youtube.com/playlist?

Java script used to create interactive websites. It is

There are three ways to include Javascript code.

JAVASCRIPT FOR EXTERNAL FILE:

THREE WAYS TO ADD CONTENT IN WEBPAGE

IF We want to call the function dynamically fallow below process.

In function we can pass (Arguments/Parameters/Values)

Variables in JAVA---- It is a Case Sensitive Language(A a) these are different.

Variables are two types:-

To Know what type of data it is:

Example for Array consists of objects:

Example for object:

Ex: Arithmetic Operator

Ex: Assignment Operator

Ex: Relational Operators

Ex: Bitwise Operator

Ex: By Array Literal

Ex: Array Directly

Date and time

Ex: To get date

Ex: To get Time

Ex: To get Time Dynamic

Ex: String charAt, indexOf

Browser Object Model(BOM)

You might also like