INTRODUCTION:
JavaScript is the most popular scripting language on the internet, and works in all major browsers, such as Internet Explorer, Fire fox, Chrome, Opera, and Safari.
What is JavaScript
- JavaScript was designed to add interactivity to HTML pages
- JavaScript is a scripting language
- A scripting language is a lightweight programming language
- JavaScript is usually embedded directly into HTML pages
- JavaScript is an interpreted language (means that scripts execute without preliminary compilation)
- Everyone can use JavaScript without purchasing a license
What can a JavaScript do
JavaScript gives HTML designers a programming tool - HTML authors are normally not
programmers, but JavaScript is a scripting language with a very simple syntax!
Almost anyone can put small "snippets" of code into their HTML pages
JavaScript can put dynamic text into an HTML page - A JavaScript statement like this:
document.write("<h1>" + name + "</h1>") can
write a variable text into an HTML page
JavaScript can react to events - A
JavaScript can be set to execute when something happens, like when a page has finished loading or when a user
clicks on an HTML element
JavaScript can read and write HTML elements - A JavaScript can read and change the
content of an HTML element
JavaScript can be used to validate data - A JavaScript can be used to validate form data before it is submitted to a server. This saves the server
from extra processing
JavaScript can be used to detect the visitor's browser - A JavaScript can be used to detect
the visitor's browser, and - depending on the browser - load another page
specifically designed for that browser
JavaScript can be used to create cookies - A JavaScript can be used to store and retrieve information on the visitor's computer
JavaScript is Case Sensitive:
A function named
"myfunction" is not the same as "myFunction" and a variable
named "myVar" is not the same as "myvar". JavaScript is
case sensitive - therefore watch your capitalization closely when you create or
call variables, objects and functions.
Window Object Examples
1. Display an alert box:
<html>
<head>
<script
type="text/javascript">
function
show_alert()
{
}
</script>
</head>
<body>
<input
type="button" onclick="show_alert()" value="Show alert
box" />
</body>
2. Display a prompt box:
<html>
<head>
<script
type="text/javascript">
function
show_prompt()
{
var name=prompt("Please enter your name"Anshu Singh"); if
(name!=null && name!="")
document.write("Hello
" + name + "! How are you today?");
}
}
</script>
</head>
<input type="button" onclick="show_prompt()" value="Show prompt box" />
</body>
3. Display a confirm box, and alert what the visitor
clicked:
<html>
<head>
<script
type="text/javascript">
function
show_confirm()
{
var
r=confirm("Press a button!");
if
(r==true)
{
alert("You
pressed OK!");
}
else
{
alert("You
pressed Cancel!");
}
}
</head>
<body>
<input
type="button" onclick="show_confirm()" value="Show a
confirm
box"
/>
</body>
4. Create a pop-up window Open a new window when
clicking on a button:
<html>
<head>
<script
type="text/javascript">
function
open_win()
{
window.open("http://kishor.ucoz.com");
}
</script>
</head>
<body>
<form>
<input
type=button value=”https://anshusinghorg.weebly.com”>
</form>
</body>
5. Open a new window and control its appearance:
<html>
<head>
<script
type="text/javascript">
function
open_win()
{
window.open("http://www.w3schools.com","_blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400"); }
</script>
</head>
<body>
<form>
<input type="button" value="Open Window" onclick="open_win()">
</form>
</body>
</html>
6. Open multiple new windows:
<html>
<head>
<script
type="text/javascript">
function
open_win()
{
window.open("http://www.microsoft.com/");
window.open("http://kishor.ucoz.com");
}
</script>
</head>
<body>
<form>
<input
type=button value="Open Windows" onclick="open_win()">
</form>
</body>
7. Close the new window:
<html>
<head>
<script
type="text/javascript">
function
openWin()
myWindow=window.open("","","width=200,height=100");
myWindow.document.write("<p>This
is 'myWindow'</p>");
}
function
closeWin()
{
myWindow.close();
}
</script>
</head>
<input
type="button" value="Open 'myWindow'"
onclick="openWin()" />
<input
type="button" value="Close 'myWindow'"
onclick="closeWin()"/>
</body>
8. Print the current page:
<html>
<head>
<script type="text/javascript">
function
printpage()
{
window.print();
}
</script>
</head>
<body>
<input
type="button" value="Print this page"
onclick="printpage()" />
</body>
</html>
9. A simple timing:
<html>
<head>
<script
type="text/javascript">
function
timeText()
{
var t1=setTimeout("document.getElementById('txt').value='2
seconds!'",2000);
var t2=setTimeout("document.getElementById('txt').value='4
seconds!'",4000);
var
t3=setTimeout("document.getElementById('txt').value='6
seconds!'",6000);
}
</script>
</head>
<body>
<input
type="button" value="Display timed text!"
onclick="timeText()"/>
<input
type="text" id="txt" />
</form>
<p>Click the button above. The input field will tell you when two, four, and six seconds have passed…..</p> </body>
</html>
No comments:
Post a Comment