JavaScript
- JavaScript is a lightweight, interpreted programming language.
- Designed for creating network-centric applications.
- Complementary to and integrated with Java.
- Complementary to and integrated with HTML.
- Open and cross-platform
********************************************************************************
Advantages of JavaScript
- Less server interaction − You can validate user input before sending the page off to the server. This saves server traffic, which means less load on your server.
- Immediate feedback to the visitors − They don't have to wait for a page reload to see if they have forgotten to enter something.
- Increased interactivity − You can create interfaces that react when the user hovers over them with a mouse or activates them via the keyboard.
- Richer interfaces − You can use JavaScript to include such items as drag-and-drop components and sliders to give a Rich Interface to your site visitors.
********************************************************************************
Limitations of JavaScript
We cannot treat JavaScript as a full-fledged programming language- Client-side JavaScript does not allow the reading or writing of files. This has been kept for security reason.
- JavaScript cannot be used for networking applications because there is no such support available.
- JavaScript doesn't have any multithreading or multiprocessor capabilities.
********************************************************************************
Hello world
********************************************************************************
<html>
<body>
<script language="javascript" type="text/javascript">
<!--
document.write(""hey sree ! welcome back to the javascritp ..!!");
//-->
</script>
</body>
</html>
********************************************************************************
JavaScript - Placement in HTML File
- 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 in <head>...</head> section
<html>
<head>
<script language="javascript" type="text/javascript">
function download()
{
alert("hey you're exceeded your download limit");
}
</script>
</head>
<body>
<input type="button" onclick="download()" value="download" />
</body>
</html>
********************************************************************************
JavaScript in <body>...</body> section
<html>
<head>
</head>
<body>
<script>
document.write("javascript in body");
</script>
<p> welcome to the javascript..this is the body</p>
</body>
</html>
********************************************************************************
JavaScript in <body> and <head> Sections
<html>
<head>
<script type="text/javascript">
function chinna()
{
alert("heyy tell me chinna ...!!!");
}
</script>
</head>
<body>
<script type="text/javascript">
document.write("hey chinna ..!!!");
</script>
<input type="button" onclick="chinna()" value="chinna"/>
</body>
</html>
******************************************************************************
JavaScript in External File
The script tag provides a mechanism to allow you to store JavaScript in an external file
<html> <head> <script type="text/javascript" src="filename.js" ></script> </head> <body> ....... </body> </html>
you can keep the following content in filename.js file
function sayHello() { alert("Hello World") }
********************************************************************************
<html>
<head>
<script type="text/javascript">
function download()
{
var name="heyyy sree"
var nick="welcome back to javascript chinna"
alert(name);
alert(nick);
}
</script>
</head>
<body>
<input type="button" onclick="download()" value="download" />
</body>
</html>
********************************************************************************
JavaScript Variable Scope
<html>
<body onload="fn()">
<script type="text/javascript">
var global="global var";
function fn()
{
document.write("local var");
}
</script>
</body>
</html>
********************************************************************************
JavaScript Variable Names
JavaScript variable names are case-sensitive
should not use any of the JavaScript reserved keywords as a variable name
variable names should not start with a numeral (0-9).
JavaScript Reserved Words
abstract
boolean
break
byte
case
catch
char
class
const
continue
debugger
default
delete
do
double
|
else
enum
export
extends
false
final
finally
float
for
function
goto
if
implements
import
in
|
instanceof
int
interface
long
native
new
null
package
private
protected
public
return
short
static
super
|
switch
synchronized
this
throw
throws
transient
true
try
typeof
var
void
volatile
while
with
|
********************************************************************************
Arithmetic Operations
<html>
<body>
<script type="text/javascript">
var a=9;
var b=5;
var newline= "<br />";
document.write("Arithmetic Operations <br/><br/>")
document.write("a+b = ");
res=a+b;
document.write(res);
document.write(newline)
res=a-b;
document.write("a-b =");
document.write(res);
document.write(newline)
</script>
</body>
</html>
********************************************************************************
if...else statement:
<html>
<body>
<script type="text/javascript">
var age=21;
if(age>18)
{
document.write("you're eligible for voting")
}
else
{
document.write("you''re not eligible");
}
</script>
</body>
</html>
********************************************************************************
JavaScript - Switch Case
<html>
<body>
<script>
document.write("switch case <br/> <br/> ")
var char='A'
switch(char)
{
case 'B':
document.write("better <br/>")
break;
case 'A':
document.write("best <br/> ")
break;
case 'C':
document.write("good <br/>")
break;
}
</script>
</body>
</html>
********************************************************************************
JavaScript - While Loops
<html>
<head>
<script type="text/javascript">
function jai()
{
var i=0;
while(i<108)
{
document.write("jai jai bajrangbali");
document.write("<br />")
i++;
}
}
</script>
</head>
<body>
<input type="button" onclick="jai()" value="jai jai bajrangbali"/>
</body>
</html>
********************************************************************************
JavaScript - For Loop
<head>
<script type="text/javascript">
function jai()
{
var i;
for(i=0;i<108;i++)
{
document.write("jai sri ram !");
document.write("<br />")
}
}
</script>
</head>
<body>
<input type="button" onclick="jai()" value="jai sri ram !"/>
</body>
</html>
********************************************************************************
JavaScript for...in loop
for (variable in object){ ********************************* }
<html>
<body>
<script type="text/javascript">
var x;
for(x in object)
{
document.write(x);
document.write("<br/>");
}
</script>
</body>
</html>
********************************************************************************
JavaScript - Loop Control
The break Statement
<html>
<body>
<script type="text/javascript">
var x=0;
while(x<99)
{
if(x==9)
break;
document.write(x)
document.write("<br/>")
x++;
}
</script>
</body>
</html>
The continue Statement
<html>
<body>
<script type="text/javascript">
var x=0;
while(x<10)
{
document.write(x);
document.write("<br/>");
x++;
if(x==3)
continue;
}
</script>
</body>
</html>
Using Labels to Control the Flow
********************************************************************************<html> <body> <script type="text/javascript"> <!-- document.write("Entering the loop!<br /> "); outerloop: // This is the label name for (var i = 0; i < 5; i++) { document.write("Outerloop: " + i + "<br />"); innerloop: for (var j = 0; j < 5; j++) { if (j > 3 ) break ; // Quit the innermost loop if (i == 2) break innerloop; // Do the same thing if (i == 4) break outerloop; // Quit the outer loop document.write("Innerloop: " + j + " <br />"); } } document.write("Exiting the loop!<br /> "); //--> </script> </body> </html>********************************************************************************
JavaScript - Functions
<html>
<head>
<script type="text/javascript">
function myself(name,book)
{
alert("hey " + name + " now i am reading " + book + " novel. " )
}
</script>
</head>
<body>
click this button... to know about me..!!!
<br/> <br/>
<input type="button" onclick="myself('chinna','sudden crush')" value="about me" />
</body>
</html>
The return Statement
<html>
<head>
<script type="text/javascript">
function my_novel(name,book)
{
var novel=name+" reading " + book
//doucment.write("hey "+ name " now i am reading "+ book +".")
return novel;
}
function myself()
{
var next_novel;
next_novel =my_novel('chinna','sudden crush');
document.write(next_novel);
}
</script>
</head>
<body>
click this button to know which novel i'm reading.
<br/><br/>
<input type="button" onclick="myself()" value="novel"/>
</body>
</html>
********************************************************************************
JavaScript - Events
onclick Event Type
<html>
<head>
<script language="javascript" type="text/javascript">
function next()
{
alert("you're viewing next article")
}
function previous()
{
alert("you're viewing previous article")
}
</script>
</head>
<body>
check this following articles.. <br/><br/>
<input type="button" onclick="previous()" value="previous article"/>
<input type="button" onclick="next()" value="next article"/>
</body>
</html>
<head>
<script language="javascript" type="text/javascript">
function next()
{
alert("you're viewing next article")
}
function previous()
{
alert("you're viewing previous article")
}
</script>
</head>
<body>
check this following articles.. <br/><br/>
<input type="button" onclick="previous()" value="previous article"/>
<input type="button" onclick="next()" value="next article"/>
</body>
</html>
****************************************************************************
onmouseover and onmouseout
<html>
<head>
<script type="text/javascript">
function mouse()
{
document.write("hey chinna !!");
}
</script>
</head>
<body>
<div onmouseover="mouse()">
<h2> place your mouse over this </h2>
</div>
</body>
</html>
***************************************************************************
onsubmit Event type
********************************************************************************
JavaScript - Page Redirection
<html>
<head>
<script type="text/javascript">
function direction()
{
window.location="www.google.co.in"
}
</script>
</head>
<body>
<p> click this button to redirect to new page</p>
<form>
<input type="button" onclick="direction()" value="click to redirect"/>
</form>
</body>
</html>
********************************************************************************
JavaScript - Dialog Boxes
Alert Dialog Box
<html>
<head>
<script type="text/javascript">
<!--
function Warn() {
alert ("This is a warning message!");
document.write ("This is a warning message!");
}
//-->
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type="button" value="Click Me" onclick="Warn();" />
</form>
</body>
</html>
Confirmation Dialog Box
<html>
<head>
<script type="text/javascript">
<!--
function getConfirmation(){
var retVal = confirm("Do you want to continue ?");
if( retVal == true ){
document.write ("User wants to continue!");
}
else{
document.write ("User does not want to continue!");
}
}
//-->
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type="button" value="Click Me" onclick="getConfirmation();" />
</form>
</body>
</html>
Prompt Dialog Box
<html>
<head>
<script type="text/javascript">
<!--
function getValue(){
var retVal = prompt("Enter your name : ", "your name here");
document.write("You have entered : " + retVal);
}
//-->
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type="button" value="Click Me" onclick="getValue();" />
</form>
</body>
</html>
------------------------------------------------------------------------------------------------------------------
<html>
<head>
<script type="text/javascript">
function sree()
{
var ret=prompt("enter your name : ","your name..");
document.write("heyyyy " + ret);
}
</script>
</head>
<body>
<input type="button" onclick="sree()" value="name"/>
</body>
</html>
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
********************************************************************************
No comments:
Post a Comment