Most Popular Tutorials
Most Popular Tutorials :-

Simply Easy Learning at Your Fingertips. Click Tutorials Menu to view More Tutorial List





What is Javascript?

Javascript is the script language of the Web. It is the client side programming language. Javascript is an easy-to-use programming language that can be embedded in the header of your web pages. javascript can be write anywhere in your page. The script should be included in or referenced by an HTML document for the code to be interpreted by the browser.

Advantages of JavaScript:

  • Less server interaction:- You can validate user input before sending the page off to the server. This saves server traffic, which means less load on your server.
  • Immediate feedback to the visitors:- They don't have to wait for a page reload to see if they have forgotten to enter something.
  • Increased interactivity:- You can create interfaces that react when the user hovers over them with a mouse or activates them via the keyboard.
  • Richer interfaces:-You can use JavaScript to include such items as drag-and-drop components and sliders to give a Rich Interface to your site visitors.



JavaScript Syntax:

  • 1. JavaScript statements that are placed within the <script> ... </script> HTML tags in a web page.
  • 2. You can place the <script> tag containing your JavaScript anywhere within you web page but it is preferred way to keep it within the <head> tags.


The script tag takes two important attributes:

  • language: This attribute specifies what scripting language you are using. Typically, its value will be javascript.
  • 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>


Adding JavaScript to Your Web Pages

There are typically three ways to add JavaScript to a web page:

  • Embedding the JavaScript code between a pair of <script> and </script> tag.

  • Creating an external JavaScript file with the .js extension and then load it within the page through the src attribute of the <script> tag.

  • Placing the JavaScript code directly inside an HTML tag using the special tag attributes such as onclick, onmouseover, onkeypress, onload, etc.

    • File name : index.php

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Embedding JavaScript</title>
    </head>
    <body>
    <script>
    var msg = "Hello World!";
    document.write(msg); // Prints: Hello World!
    </script>
    </body>
    </html>

    Calling an External JavaScript File

    JavaScript code into a separate file with a .js extension, and then call that file in your document through the src attribute of the <script> tag, like this:

    <script src="js/hello.js"></script>

    File name : hello.js

    function say() {
    alert("Hello World!");
    }

    // Call function on click of the button
    document.getElementById("myBtn").onclick = say;

    File name : index.php

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Including External JavaScript File</title>
    </head>
    <body>
    <button type="button" id="myBtn">Click Me</button>
    <script src="js/hello.js"></script>
    </body>
    </html>

    Placing the JavaScript Code Inline

    You can also place JavaScript code inline by inserting it directly inside the HTML tag using the special tag attributes such as onclick, onmouseover, onkeypress, onload, etc.

    File name : index.php

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Inlining JavaScript</title>
    </head>
    <body>
    <button onclick="alert('Hello World!')">Click Me</button>
    </body>
    </html>

    JavaScript Can Change HTML Elements

    File name : index.php

    JavaScript can manipulate the DOM (change HTML contents).
    <html>
    <body>
    <p>JavaScript can change the content of an HTML element:</p>
    <button type="button" onclick="myFun()">Click Here!</button>
    <p id="demo">This is a demonstration.</p>
    <script>
    function myFun() {
    document.getElementById("demo").innerHTML = "Hello JavaScript!";
    }
    </script>
    </body>
    </html>

    JavaScript Can Change HTML Styles (CSS)

    File name : index.php

    <!DOCTYPE html>
    <html>
    <body>

    <h1>What Can JavaScript Do?</h1>

    <p id="demo">JavaScript can change the style of an HTML element.</p>

    <button type="button" onclick="myFunction()">Click Me!</button>

    <script>
    function myFunction() {
    var x = document.getElementById("demo");
    x.style.fontSize = "25px";
    x.style.color = "red";
    }
    </script>

    </body>
    </html>

    What is DOM?

    The DOM is a ittutorialC (World Wide Web Consortium) standard.
    The DOM defines a standard for accessing documents:
    "The ittutorialC Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."

    The ittutorialC DOM standard is separated into 3 different parts:

  • Core DOM - standard model for all document types
  • XML DOM - standard model for XML documents
  • HTML DOM - standard model for HTML documents


    • What is the HTML DOM?

    The HTML DOM is a standard object model and programming interface for HTML. It defines:

  • The HTML elements as objects
  • The properties of all HTML elements
  • The methods to access all HTML elements
  • The events for all HTML elements
    • In other words: The HTML DOM is a standard for how to get, change, add, or delete HTML elements.

    NOTE : - When a web page is loaded, the browser creates a Document Object Model of the page.
    The HTML DOM Document. In the HTML DOM object model, the document object represents your web page. The document object is the owner of all other objects in your web page. If you want to access objects in an HTML page, you always start with accessing the document object.

    Eg :-

    document.getElementById("demo");

  • The global object "document" represents the HTML document which is displayed in the current browser window.
  • document is an object. The line of code you pasted is supposed to run in the web browser. The web browser will have JavaScript engine. That engine will provide the developer with some runtime objects, such as document and window to interact with. The environment is called Browser Object Model (or BOM).

    • Example :

    File name : index.php

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

    we call a function document.write which writes a string into our HTML document. This function can be used to write text, HTML, or both. So above code will display following result: Hello World!

    Semicolons are Optional

    Simple statements in JavaScript are generally followed by a semicolon character, just as they are in C, C++, and Java. JavaScript, however, allows you to omit this semicolon if each of your statements are placed on a separate line. For example, the following code could be written without semicolons.

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

    var1 = 100
    var2 = 200

    </script>

    But when formatted in a single line as follows, you must use semicolons.

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

    var1 = 100; var2 = 200;

    </script>

    Comments in JavaScript

  • Any text between a // and the end of a line is treated as a comment and is ignored by JavaScript.
  • Any text between the characters /* and */ is treated as a comment. This may span multiple lines.
  • JavaScript also recognizes the HTML comment opening sequence is not recognized by JavaScript so it should be written as //-->.
    • <script language="javascript" type="text/javascript">
    <!--

    // This is a comment. It is similar to comments in C++

    /*
    * This is a multiline comment in JavaScript
    * It is very similar to comments in C Programming
    */

    //-->
    </script>

    JavaScript - Placement in HTML File

    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.

    • 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>

    JavaScript in <body>...</body> section

    <html>

    <head>
    </head>

    <body>

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

    <p>This is web page body </p>

    </body>
    </html>

    JavaScript in <body> and <head> Sections

    <html>
    <head>
    <script type="text/javascript">
    <!--
    function sayHello() {
    alert("Hello World")
    }
    //-->
    </script>
    </head>

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

    <input type="button" onclick="sayHello()" value="Say Hello" />

    </body>
    </html>

    JavaScript in External File

    <html>

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

    <body>
    .......
    </body>
    </html>

    filename.js

    function sayHello() {
    alert("Hello World")
    }





    Previous Next


    Trending Tutorials


    PHP

    PHP

    100+ Tutorials
    oops

    PHP OOPs

    80+ Tutorial
    Codeigniter

    Codeigniter

    100+ Tutorial
    Laravel

    Laravel

    100+ Tutorials
    Node.js

    NODE.JS

    100+ Tutorials
    Javascript

    Javascript

    100+ Tutorials


    Review & Rating

    0.0 / 5

    0 Review

    5
    (0)

    4
    (0)

    3
    (0)

    2
    (0)

    1
    (0)

    Write Review Here


    Most Popular Tutorials

     Important Link