01.JavaScript How to and Where To

Javascript how to and where to

how to put a javascript into an HTML page
how to handle simple browsers
where to put the javascript
using an external javascript

How to put a javascript into an HTML page

<html>
<body>
<script type="text/javascript">
document.write("Hello world");
</script>
</body>
</html>

<html>
<body>
<script type="text/javascript">
document.write("Happy, Happy,Joy,Joy");
</script>
</body>
</html>

to add HTML tags to the javascript

<html>
<body>
<script type="text/javascript">
document.write("<h1>Hello World</h1>");
</script>
</body>
</html>

<html>
<body>
<script type="text/javascript">
document.write("<h1>Happy, Happy,Joy,Joy</h1>");
</script>
</body>
</html>

To insert a javascript into an HTML page, we use the <script> tag.
Inside <script> tag we use the type attribute to define the scripting language.

<script type="text/javascript"> and </script> tell where the javascript starts and end

<html>
<body>
<script type="text/javascript">
....
</script>
</body>
</html>

The document.write command is a standard javascript command for writing output to a page.

<html>
<body>
<script type="text/javascript">
document.write("<h1>Hello World</h1>");
</script>
</body>
</html>

How to handle simple browsers

Browsers that do not support javascript will display javascript as page content.

to prevent them from doing this and as a part of the javascript  standard, the HTML comment tag should be used to "hide" the javascript.

<html>
<body>
<script type="text/javascript">
<!--
document.write("<h1>Hello World</h1>");
//-->
</script>
</body>
</html>

The two forward slashes at the end of comment line(//) comprise the javascript comment symbol.
This prevents javascriptfrom from exicuting the --> tag.

where to put the javascript

javascript in a page will be executed immediately while the page loads into the browser.

Scripts in <head>

scripts to be executed when they are called, or when an event is triggered, are placed in functions.

<html>
<head>
<script type="text/javascript">
function message()
{
alert("this alert box was called with the onload event");
}
</script>
</head>

<body onload="message()">
</body>
</html>


Scripts in <body>

If you don't want your script to be placed inside a function, or if your script should write page content,
it should be placed in the body section.

<html>
<head>
</head>

<body>
<script type="text/javascript">
document.write("this message is written by javascript");
</script>
</body>
</html>

Scripts in <head> and <body>

<html.
<head>
<script type="text/javascript">
function message()
{
alert("This alert box was called with the onload event");
}
</script>
</head>
<body onload="message()">
<script type="text/javascript">
document.write("This message is written by javascript");
</script>
</body>
</html>

Using an External Javascript

If you want to ru n the same javascript on several pages without having to write the same script on every pag,
You can write a javascript in an eternal file.

save the external file with a .js file extension
Note: The external script file cannot contain the <script> tag

<html>
<head>
<script type="text/javascript" src="xxx.js"></script>
</head>

<body>
</body>
</html>

No comments:

My Favorite Books

  • C and Data Structures by Ashok N. kamthane
  • Web Technologies by A. A. Puntambekar
  • Learn HTML and CSS with W3Schools
  • Learn JavaScript and Ajax with W3Schools
  • HTML5 Black Book: Covers Css3, Javascript,XML, XHTML, Ajax, PHP And Jquery
  • HTML5 Application Development Fundamentals: MTA Exam 98-375
  • .NET 4.0 Programming 6-In-1, Black Book
  • SQL Server 2008 R2 Black Book
  • Asp.net 4.0 Projects Covers: net 3.5 And .net 4.0 Codes, Black Book
  • UNIX Shell Programming 1 Edition by Yashavant Kanetkar
  • UNIX and Shell Programming 1 Edition by Richard F. Gilberg, Behrouz A. Forouzan
  • Computer Networks by Andrew S. Tanenbaum
  • Multiple Choice questions in computer science by Timothy J Williams