Sunday 27 October 2013

Insert JavascriptInto Html

Integrating JavaScript with HTML

(insert javascript into html, javascript insert html after element, embed jquery in html, embed javascript in php, javascript innerhtml, jquery insert html)

JavaScript is a collection of some or many programming statements that a programmer embeds in an HTML document. These statements will work or affect the HTML when they are placed in the <script> and </script> tags. Placement of these tags is up to the developer that where he or she wants to put them in the head section or in the body section.
Previously the Language was used to specify the type of the <script> tag. For example:
<script LANGUAGE="JavaScript1.5" > </script>
According to the HTML 4.0 specification, the TYPE attribute is now the proper way to go. However, you can continue to use both attributes if you want, in order to ensure that older browsers don't get confused. When working with JavaScripts, the TYPE attribute will always be Text/JavaScript.
Another way to work with JavaScripts is to store them in external files that have a .js file extension and then to reference those files from within your HTML pages. To accomplish this, you use the SRC attribute to specify the location of an external JavaScript file.  This is use full as it makes difficult for the user to view the JavaScript code.  It also makes it possible to share the same JavaScripts among multiple HTML pages. Once you have defined the opening and closing tags, you can begin placing JavaScript statements between them.
Before writing your first program in JavaScript you should know a little about the structure of the HTML page. If you are not so familiar with these tags and structure please do check the Programming Dost’s Learning HTML section.

<HTML>
  <HEAD>
    <TITLE>The Title of the Page goes here</TITLE>
  </HEAD>
  <BODY>
  </BODY>
</HTML>
This HTML page structure contains the <HEAD> </HEAD>, <TITLE> </TITLE>, and <BODY> </BODY> tag sets all wrapped inside the starting and ending <HTML> </HTML> tag set. If you want to do so, create your own template now. When you are done, add the following lines inside the body section:
<SCRIPT TYPE="Text/JavaScript" LANGUAGE="JavaScript" >
  document.write("Hello World From Programming Dost");
</SCRIPT>
After you put the code in the head or body tags the code will look like:
<HTML>
  <HEAD>
    <TITLE> The Title of the Page goes here</TITLE>
  </HEAD>
  <BODY>
    <SCRIPT TYPE="Text/JavaScript" LANGUAGE="JavaScript" >
      document.write("Hello World From Programming Dost");
   </SCRIPT>
  </BODY>
</HTML>

How to test your JavaScript Code?

Now that you have typed in your first script, you need to save it. We called this script as javaScriptTutorial_1.html. The HTML extension identifies the page as an HTML page. Your computer uses the information in the file's extension to associate the file with a particular application. An .html extension tells the operating system to open its default browser and pass the HTML file to it. Alternatively, you can use the .htm extension, which is also recognized as an extension for HTML pages.
If you are using a full-featured HTML editor, the editor may enable you to test your script with the click of a button like Dreamweaver or Visual Studio etc. Because Notepad has no such automatic HTML testing feature, we simply started up a browser and used it to open the javaScriptTutorial_1.html file. The browser opened our page and ran the script.




No comments:

Post a Comment