Scribd Logo
Upload

Welcome to Scribd!

  • Introduction To JavaScript

    Uploaded by

    Priyanka Kaliyaperumal
    8 views7 pages

    Original Title

    Introduction to JavaScript

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    8 views7 pages

    Introduction To JavaScript

    Uploaded by

    Priyanka Kaliyaperumal

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 7

    Introduction to JavaScript - Learn

    JavaScript
      »   JavaScript Basics  »   Introduction to JavaScript - Learn JavaScript

    JavaScript is not Java


    And I can continue and say that Java has nothing to do with JavaScript. Besides that, both
    are programming languages and that they can share some syntax at a macro level they are
    completely different. In fact, there is a good illustration around the web that says that "Java is to
    JavaScript as ham is to hamster". Having clear up this part, you can now continue to learn
    JavaScript

    Why learn JavaScript


    JavaScript is one of the most extensive programming languages on the internet, there is plenty of
    libraries that use JavaScript to accomplish really spectacular stuff. But before you dive into any of
    these libraries like jQuery, Bootstrap, Node or Angular, you should really learn the basics of
    JavaScript

    What can JavaScript do for you


    Well that is a good question. Javascript can do lots of things. From showing a simple text while
    modifying some HTML element, real-time form handling, image galleries, 2D or 3D animation,
    build games and lot more.

    Start learning JavaScript here


    Great, so where do we start. Here is a simple example that lets you use one of the simplest yet
    useful JavaScript snippet

    JAVASCRIPT<html><body><script type="text/JavaScript">document.write("This is a
    very simple yet powerful JavaScript function");</script></body>

    </html>

    This will output the following message:

    JAVASCRIPT<html>

    <body>
    <script type="text/JavaScript">

    document.write("This is a very simple yet powerful JavaScript


    function");

    </script>

    </body>

    </html>

    This will output the following message:

    JAVASCRIPTThis is a very simple yet powerful JavaScript function

    Now that is a boring example, isn't it? Try with the following and let me know what you think.

    JAVASCRIPT<p id="test_p">I am a boring paragraph.</p>

    <button type="button" onclick='document.getElementById("test_p").innerHTML = "This


    is quite better!"'>Give it a try!</button>

    Demo
    I am a boring paragraph.
    Give it a try!
    Now let's take a closer look at our first Javascript example and learn some basic concepts. Click
    next and let's start.

     CSS - Float

    Introduction to JavaScript - Location 

     JavaScript Basics 

     Introduction to JavaScript - Learn JavaScript


     Introduction to JavaScript - Location

    References


    First thing first. Before you start writing Javascript code, you have to know that you can place the
    script in three different locations.

     Inside the head section. This is internal Javascript.


     Inside the body section. This is also internal javascript.
     There are also some special cases where you can insert Javascript inline, but this is not
    recommended.
     External .js file in the head section
     External .js file in the body. Ideally you can place it the footer section of the body

    Javascript internal script


    Internal Javascript is largely used by the Javascript programming community

    Javascript inside head section


    One of the places where you can put your Javascript is in the head section of your HTML
    document. Here is a simple example about how you can accomplish this:

    JAVASCRIPT<html>

    <head>

    <script>

    // JavaScript code

    </script>

    </head>

    <body></body>

    </html>

    Javascript inside body section


    Javascript is a very versatile tool out there and it allows you to place the script anywhere you like.
    It is up to you to decide where depending on your needs.

    JAVASCRIPT<html>

    <head></head>

    <body>

    <script>

    // JavaScript code

    </script>

    </body>

    </html>

    Where exactly in the body should I place my Javascript?


    Well, this is a good question. And the answer is: Depends.
    There are times that you need to do some Javascript process before printing something to the
    user, and you need the Javascript snippet before the HTML element. On the other hand, you can
    print the HTML document and then modify its content. This allows you to place the JavaScript in
    the page footer, just before the end of the body tag.
    You have to know that reading and interpreting the Javascript code, takes time. So if you have to
    place the code inside the document, it is a good practice to place it in the footer so you can save
    loading speed.

    Inline Javascript
    JAVASCRIPT<a href="#" onclick="(function(){ alert('It\'s alive!!');})()">Click
    Me</a>

    Demo
    Click Me

    External Javascript inside head section


    Another way to insert Javascript code into a document is to wrap it up into a separate .js
    document. This way you can separate processing from the document markup
    Insert Javascript in head section
    Javascript files can be inserted in the head section of the document, like this.

    JAVASCRIPT<html>

    <head>

    <script src="../path/to/file.js"></script>

    </head>

    <body></body>

    </html>

    Insert Javascript in body section


    Alternatively you can load your .js files in the body section. ideally just before the closing body
    tag. This way you render all HTML document before start processing the Javascript code.

    JAVASCRIPT<html>

    <head></head>

    <body>

    .......

    <script src="../path/to/file.js"></script>

    </body>

    </html>

    This is a good practice if you want to save page loading speed.


    Javascript best practices
    JavaScript is often placed inline with the HTML document markup. For example, this is a typical
    way to bind JavaScript events to an HTML tag:

    JAVASCRIPT<input type="text" name="email" onchange="checkAEmail()" />

    Today this is known as a "not so good practice". There is a generally accepted opinion that you
    should separate the HTML markup structure from the processing part. Take a look at this next
    example of how we could implement this concept.

    JAVASCRIPT<input type="text" name="email" id="email" />

    <script>

    window.addEventListener("DOMContentLoaded", function(event) {

    document.getElementById('email').addEventListener("change",
    validateEmail);

    });

    </script>

    If you are interested in further reading about this subject, there is a good article located at the
    Wikipedia website, here: https://en.wikipedia.org/wiki/Unobtrusive_JavaScript

    What about type=text/javascript?


    In the early years of JavaScript you needed to set a type attribute for the script tag, like this:

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

    Nowadays, the type="text/javascript" is the default value for the script tag. So nothing happens if
    you use it, but you must know that it is not required any more.

     Introduction to JavaScript - Learn JavaScript


    Introduction to PHP - Learn PHP 

     JavaScript Basics 

     Introduction to JavaScript - Learn JavaScript


     Introduction to JavaScript - Location

    References

      HTML color codes chart


      HTML symbols character chart

    Miscellaneous

      Checking HTML code and links / Valid HTML code


      What is a favicon and how to use it
      The marquee tag, how do we use it.

    © HTML Tutorials | Privacy policy | Sitemap

    You might also like