Javascript

JavaScript – Placement in HTML File


There is a flexibility given to include JavaScript code anywhere in an HTML document. However the most preferred ways to include JavaScript in an HTML file are as follows −

  • Script in <head>...</head> section.
  • Script in <body>...</body> section.
  • Script in <body>...</body> and <head>...</head> sections.
  • Script in an external file and then include in <head>...</head> section.

In the following section, we will see how we can place JavaScript in an HTML file in different ways.

JavaScript in <head>…</head> section

If you want to have a script run on some event, such as when a user clicks somewhere, then you will place that script in the head as follows −

<html>
   <head>
      <script type="text/javascript">
         <!-- function sayHello() { alert("Hello World") } //-->
      </script>
   </head>
   <body>
      <input type="button" onclick="sayHello()" value="Say Hello" />
   </body>
</html>

Check Live Demo Here : Hello World
(more…)

Advertisements

How to Enable JavaScript in Browsers


All the modern browsers come with built-in support for JavaScript. Frequently, you may need to enable or disable this support manually. This chapter explains the procedure of enabling and disabling JavaScript support in your browsers: Internet Explorer, Firefox, chrome, and Opera.

Warning for Non-JavaScript Browsers

If you have to do something important using JavaScript, then you can display a warning message to the user using <noscript> tags.

You can add a noscript block immediately after the script block as follows −

<html>
   <body>
      <script language="javascript" type="text/javascript">
         <!-- document.write("Hello World!") //-->
      </script>
      <noscript>
         Sorry...JavaScript is needed to go ahead.
      </noscript>
   </body>
</html>

Now, if the user’s browser does not support JavaScript or JavaScript is not enabled, then the message from </noscript> will be displayed on the screen. (more…)

JavaScript – Syntax


JavaScript can be implemented using JavaScript statements that are placed within the HTML tags in a web page.

You can place the <script> tags, containing your JavaScript, anywhere within you web page, but it is normally recommended that you should keep it within the <head> tags.

The <script> tag alerts the browser program to start interpreting all the text between these tags as a script. A simple syntax of your JavaScript will appear as follows.

<script ...>
   JavaScript code
</script>

The script tag takes two important attributes −

  • Language − This attribute specifies what scripting language you are using. Typically, its value will be javascript. Although recent versions of HTML (and XHTML, its successor) have phased out the use of this attribute.
  • Type − This attribute is what is now recommended to indicate the scripting language in use and its value should be set to “text/javascript”.

So your JavaScript segment will look like −

<script language="javascript" type="text/javascript">
   JavaScript code
</script>

(more…)

JavaScript – Overview


What is JavaScript ?

Javascript is a dynamic computer programming language. It is lightweight and most commonly used as a part of web pages, whose implementations allow client-side script to interact with the user and make dynamic pages. It is an interpreted programming language with object-oriented capabilities.

JavaScript was first known as LiveScript, but Netscape changed its name to JavaScript, possibly because of the excitement being generated by Java. JavaScript made its first appearance in Netscape 2.0 in 1995 with the name LiveScript. The general-purpose core of the language has been embedded in Netscape, Internet Explorer, and other web browsers.

The ECMA-262 Specification defined a standard version of the core JavaScript language.

  • 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

(more…)

Print Content using Javascript


You can print HTML page or your browser contents using window.print() javascript function.

Definition and Usage

The print() method prints the contents of the current window.

The print() method opens the Print Dialog Box, which lets the user to select preferred printing options.

Syntax

window.print()

Example

<html>
<head>
<title>Print Demo</title>
</head>
<body>
<p>Click the button to print the current page.</p>
<button onclick="javascript:window.print()">Print this page</button>
</body>
</html>

Live Demo

You can check Live Demo Here.

Show Your Current Location in Map using Navigator Object


Hello Friend’s, Here we will see how to display your current location in map using javascript navigator object. The navigator object contains information about the browser. We need one button control, one label / div or anything to show current co-ordinates that is longitude and latitude and one div tag to show map on page.

So this is my simple HTML code :

<p>Get Location Using Navigator Object</p>
<input id="GetInfo" type="button" value="Click Here To Print Location" />
<p id="Result"></p>
<div id="MapHolderDiv"></div>  

This is the javascript code we are going to use to get current co-ordinates and to create map using google api :

function GetInfo() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(ShowPosition);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function ShowPosition(position) {
    var latlon = position.coords.latitude + "," + position.coords.longitude;
    var x = "<b>Latitude: </b>" + position.coords.latitude +
        "<br><b>Longitude: </b>" + position.coords.longitude;
    document.getElementById("Result").innerHTML = x;
    var img_url = "http://maps.googleapis.com/maps/api/staticmap?center=" + latlon + "&zoom=14&size=400x300&sensor=false";
    document.getElementById("MapHolderDiv").innerHTML = "<img     src='" + img_url + "'>";
}  

Call this Javascript function on button click and you are ready.

Check live Demo here : Show Your Current Location in Map