Include Javascript File in Html

Ways of Embedding and Integrating JavaScript in the HTML Pages

(js tag, javascript embed tag, embed javascript into html, include javascript file in html, javascript within html, include javascript file, include js file in html, add js file to html)

As you know, there are two places you can put your JavaScripts in an HTML page: in either the head or body section. In addition, I have told you that you can either embed JavaScript directly into the HTML page or reference it in as an external .js file. One more way you can integrate JavaScript into an HTML page is as a component in an HTML tag.

As we already told you that we can put our JavaScript code in anywhere in <head> or in <body> tags. We told you that you can embed your code directly or in your code or by saving it in another file and then referring the web page to get data from that external file. Here we are going to define how to use both ways of embedding code in an HTML page.

Using or Embedding JavaScript Code in the Body Section of an HTML page

JavaScripts embedded with the <SCRIPT> and </SCRIPT> tags can be placed anywhere in the body section of an HTML page. Scripts embedded in the body section are executed as part of the HTML document when the page loads. This enables the script to begin executing automatically as the page loads. For example, the statements shown below demonstrate how to embed a JavaScript within the body section of an HTML page.

<BODY>

  <SCRIPT TYPE="Text/JavaScript" LANGUAGE="JavaScript" >

    document.write("Code embedded in the body of an HTML page.");

  </SCRIPT>

</BODY>

JavaScript can be used or embedded more than once in the HTML pages.

<BODY>

  <SCRIPT TYPE="Text/JavaScript" LANGUAGE="JavaScript" >

    document.write("First embedded code in the body section.");

  </SCRIPT>

  <BR>

  <SCRIPT LANGUAGE="JavaScript" TYPE="Text/JavaScript">

    document.write("Second embedded code in the body section.");

  </SCRIPT>

</BODY>

Embedding the JavaScript in <Head> and </Head> tags in HTML pages

JavaScripts can also be placed anywhere within the head section of your HTML pages. Unlike scripts embedded within the body section of HTML pages, scripts embedded in the head section are not necessarily automatically executed when the page loads. In some cases, they are executed only when called for execution by other statements within the HTML page. Most JavaScript programmers move all functions and most variables to the head section because this ensures that they will be defined before being referenced by scripts located in the body section of the page.

NOTE

Variables are containers for storing information in computer memory. Functions are groups of JavaScript statements that you can call to perform a specific task. We'll talk more about the benefits of using functions and variables in upcoming posts.

The following statements show an HTML page with a JavaScript embedded in the head section. This script will automatically execute when the HTML page is loaded.

<HTML>

  <HEAD>

    <TITLE>Programming Dost Home Page</TITLE>

    <SCRIPT TYPE="Text/JavaScript" LANGUAGE="JavaScript">

      window.alert("JavaScript is executing from the Head section");

    </SCRIPT>

  </HEAD>

  <BODY>

  </BODY>

<HTML>

Using JavaScript with an External file in HTML pages

To store your JavaScripts in external files, you need to save them as plain text files with a .js file extension. You then need to add the SCR attribute to the opening <SCRIPT> tag in your HTML page as stated here.

<SCRIPT SRC="myExternalFile.js" TYPE="Text/JavaScript" LANGUAGE="JavaScript" > </SCRIPT>

In this example, an external JavaScript named myExternalFile.js has been used. This external JavaScript can contain any number of JavaScript statements or code. However, it cannot have any HTML whatsoever. Otherwise you'll end up with an error. For instance, the contents of the myExternalFile.js script  might be very simple as follows:

document.write("External JavaScript for the friends(dost) of Programming Dost.");

There are many advantages to putting JavaScripts in externally referenced files. For beginners, by getting JavaScripts out of your HTML pages you make your HTML pages smaller and easier to work with. In addition, you can reuse the JavaScripts stored as external files over and over again by referencing them from any number of HTML pages. This way if you create a script that you want to reference from several HTML pages, you can do so without having to insert the same script in all HTML pages over and over again. As a plus, should you ever want to alter the functionality of an externally stored script, you can do it by changing the code in the external file and all is done for you.

NOTE

There is no limit of the external file which can be called in an HTML page. And there is not limit of code use in the external file.

Use of JavaScript in the HTML tags in Web Pages

JavaScript can also be placed within HTML tags, as shown in the following example.

<BODY onLoad=document.write("Hello World! From Programming Dost")> </BODY>

In this example, the JavaScript onLoad=document.write("Hello World! From Programming Dost ") statement has been added to the HTML <BODY> tag. This particular JavaScript statement tells the browser to write the enclosed text when the browser first loads the HTML page.

JavaScript and Case Sensitivity | JavaScript Case Sensitivity

JavaScript and Case Sensitivity

It should be kept in mind the JavaScript is a case sensitive programming language (Not like the HTML). So you should be extremely careful about the code you embed while using JavaScript. Case sensitivity means that you must type JavaScript elements exactly as they appear in this book in order for them to work. For example, as far as JavaScript is concerned, the words “variable” and “Variable” refer to two different things, so pay special attention when typing your scripts. As for example in our program instead of using document.write() we mistaken and used Document.write() so our program ended with an error. So be very careful with JavaScript’s case sensitivity.

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.

Header Files in C and C++

Header files

You have already been using a header file from day-zero. You know that we used towrite at the top before the start of the main() function <iostream.h>, with ‘.h’ as an extension, you might have got the idea that it is a header file.

Now we will see why a Header file is used. In the previous lecture, we discussed a little bit about Function Prototypes. One thing is Declaration and other is Definition. Declaration can also be called as ‘Prototype’. Normally, if we have lot of functions and want to use them in some other function or program, then we are left with only one way i.e. to list the prototypes of all of them before the body of the function or program and they use them inside the function or program. But for frequent functions inside a program, this technique increases the complexity (of a program). This problem can be overcome by putting all these function prototypes in one file and writing a simple line of code for including the file in the program. This code line will indicate that this is the file, suppose 'area.h' containing all the prototypes of the used functions and see the prototypes from that file. This is the basic concept of a header file.

So what we can do is: Make our own header file which is usually a simple text file with '.h' extension ('.h' extension is not mandatory but it is but it is a rule of good programming practice).

Write function prototypes inside that file. (Recall that prototype is just a simple line of code containing return value, function name and an argument list of data types with semi-colon at the end.)

That file can be included in your won program by using the ‘#inclue’ directive and that would be similar to explicitly writing that list of function prototypes.

Function prototypes are not the only thing that can be put into a header file. If we use the standard  variables like ‘pi’ which is equal to 3.1415926 in a file and then include the file as a header file we will be able to use the variable ‘pi’ in any file which includes the containing file, without specifying every time the value of ‘pi’. It would be nice, if we can assign meaningful names to them. There are two benefits of doing this. See, we could have declared a variable of type double inside the program and given a name like ‘pi’:

double pi = 3.1415926;

Then everywhere in the subsequent calculations we can use 'pi'. But it is better to pre-define the value of the constant in a header file (one set for all) and simply including that header file, the constant ‘pi’, is defined. Now, this meaningful name ‘pi’ cab be used in all calculations instead of writing the horrendous number 3.1415926 again and again.

There are some preprocessor directives which we are going to cover later. Moment, we will discuss about ‘#define’ only. We define the constants using this preprocessor directive as:

#define pi 3.1415926

The above line des a funny thing as it is not creating a variable. Rather it associates a name with a value which can be used inside the program exactly like a variable. (Why it is not a variable?, because you can’t use it on the left hand side of any assignment.). Basically, it is a short hand, what actually happens. You defined the value of the ‘pi’ with ‘#difine’ directive and then started using ‘pi’ symbol in your program. Now we will see what a compiler does when it is handed over the program after the writing process. Wherever it finds the symbol ‘pi’, replaces the symbol with the value 3.1415926 and finally compiles the program. Thus, in compilation process the symbols or constants are replaced with actual values of them. But for us as human beings, it is quite readable to see the symbol ‘pi’. Additionally, if we use meaningful names for variables and see a line ‘2 * pi * radius’, it becomes obvious that circumference of a circle is being calculated. Note that in the above statement, ‘2 * pi * radius’; 2 is used as a number as we did not define any constant for it. We have defined ‘pi’ and ‘radius’ but defining 2 would be over killing.

Useful Things for Functions in Programming

Return-value_type:

Function may or may not return a value. If a function returns a value, that must be of a valid data type. This can only be one data type that means if a function returns an int data type than it can only return int and not char or float. Return type may be int, float, char or any other valid data type. How can we return some value from a function? The keyword is return which is used to return some value from the function. It does two things, returns some value to the calling program and also exits from the function. It does two things, returns some value to the calling program and also exits from the function. We can only return a value (a variable or an expression which evaluates to some value) from a function. The data type of the returning variable should match return_value_type data type.

There may be some functions which do not return any value. For such functions, the return_value_type is void. ‘void’ is a keyword of ‘C’ language. The default return_value_type is of data type i.e. if we do not mention any return_value_type with a function; it will return an int value.

Function-name:

The same rules of variable naming conventions are applied to functions name. Function name should be self-explanatory like square, squareRoot, circleArea etc.

Argument-list:

 Argument list contains the information which we pass to the function. Some function does not need any information to perform the task. In this case, the argument list for such functions will be empty. Arguments to a function are of valid data type like int number, double radius etc.

Declarations and Statements:

This is the body of the function. It consists of declarations and statements. The task of the function is performed in the body of the function.

//The function multiplies an integers to itself and returns the result

Int multiply(int my_number)

{

            Int my_result = 0;

            my_result = my_number * my_number;

            return result;

}

Calling Mechanism:

How a program can use a function? It is very simple. The calling program just needs to write the function name and provide its arguments (without data types). It is important to note that while calling a function, we don’t write the return value data type or the data types of arguments.

Scope of Identifiers in a Function

Scope of Identifiers

An 'Identifier' means any name that the user creates in his/her program. These names can be of variables, functions and labels. Here the scope of an identifier means its visibility. We will focus Scope of Variables in our discussion.

Suppose we write the function:

void func1() {

int i;

……..      //Some other lines of code

int j = i+2;    //Perfectly alright

. . .

}

Now this variable ‘i’ can be used in any statement inside the function func1(). But consider this variable being used in a different function like:

void func2() {

int k = i + 4; //Compilation error

. . .

}

The variable ‘i’ belongs to func1() and is not visible outside that. In other words, ‘i’ is local to func1().To understand the concept of scope further, we have to see what are Code Blocks? A code block begins with ‘{‘ and ends with ‘}’.Therefore, the body of a function is essentially a code block. Nonetheless, inside a function there can be another block of code like 'for loop' and 'while loop' can have their own blocks of code respectively. Therefore, there can be a hierarchy of code blocks.

A variable declared inside a code block becomes the local variable for that for that block. It is not visible outside that block. See the code below:

void func() {

            int outer; //Function level scope

            . . .

            {

                        Int inner;         //Code block level scope

                        inner = outer; //No problem

                        . . .

            }

inner ++;          //Compilation error

}

Please note that variable ‘outer’ is declared at function level scope and variable ‘inner’ is declared at block level scope.

The ‘inner’ variable declared inside the inner code block is not visible outside it. In other words, it is at inner code block scope level. If we want to access that variable outside its code block, a compilation error may occur.

            

Declaration and Definition of a Function

Declaration and Definition of a Function

Declaration and definition are two different things. Declaration is the prototype of the function, that includes the return type, name and argument list to the function and definition is the actual function code. Declaration of a function is also known as signature of a function. As we declare a variable like int x; before using it in our program, similarly we need to declare function before using it. Declaration and definition of a function can be combined together if we write the complete function before the calling function. Then we don’t need to declare it explicitly. If we have written all of our functions in a different file and we call these functions from mani() which is written in a defferent file. In this case, the main( ) will not be compiled unless it knows about the functions declaration. There we write the declaration of functions before the main() function. Function declaration is a one line statement in which we write the return type, name of the function and the data type of arguments. Name of the arguments is not necessary. The definition of the function contains the complete code of the function. It starts with the declaration statement with the addition that in definition, we do write the names of the arguments. After this, we write an opening brace and then all the statements, followed by a closing brace.

If the function square is defined in a separate file or after the calling function, then we need to declare it:

Delaration:

Double square (double);

Definition:

Double square (double number)

{

            return (my_num * my_num);

}

Here is the complete code to elaborate the topic more:

#include <iostream.h>

//Here we are declaring the function.

double square(double);

main(){

            double num, result;

            result = 0;

            num = 0;

            cout<<”Please Enter a Number to calculate the square of.”;

            cin>>num;

            //now we are going to call the function

            result = square (num);

            cout <<”The square of ”<<num<<”is”<<result;

            // function to calculate the square of a number

            double square ( double num)

{

                        return (num * num ) ;

}

}

A function in a calling program can take place as a stand-alone statement, on hand side of a statement. This can be a part of an assignment expression.