JAVASCRIPT TUTORIALS

0
154
views

This is the JavaScript tutorials by ‘HTLV’ team.

The tutorial will cover the JavaScript learning from beginner to master level, Tutorial will start from the next section below. As you all know it all starts with an Introduction.

One can make an HTML page interactive with the user, via JavaScript. JavaScript is one of the widely used programming language these days.

This chapter is only a minor description/introduction of JavaScript, you can learn the JavaScript in our upcoming JS tutorials

INTRODUCTION:-

JavaScript is one of the most used web based programming language. The multimedia and web apps you see, out there interacting with you on the wide world of internet, and those irritating money making pop-ups.  Yes! , they all work with JavaScript on client side.

JavaScript can make your work a lot easier than, manipulating web logics with manual HTML and CSS code.  You can easy make interactive and on command actions on web pages by using JavaScript.

In this tutorial we’ll guide you with proper code demonstration, code-editor and with images of performed actions.

<html>
<head>
<script>
document.getElementById("demonstrate").innerHTML = "First Script From HTLV";
</script> 
</head>
<body>
<p id=”demonstrate”></p>
</body>
</html>

 

 

 

HTML content can be changed with JavaScript

<!DOCTYPE html>
<html>
    <head>
       
    </head>
    
<body>
    
<p id="demonstrate"> </p>
<p>this is a para including java script content</p>
<script>
    document.getElementById("demonstrate").innerHTML = "First Script From HTLV";

</script> 

</body>
</html>

Example:

 <!doctype html>

<html>

          <head>

                   <title>JS Tutorial</title>

          </head>

          <body>

                   <p id="para">This is a Para with in HTML web page..</p>

                   <br>

                   <button id="click" onclick="change()">Click Me!</button>

          <script>

                   function change(){

document.getElementById('para').innerHTML = "this is your new text by javascript";

                   }

          </script>

          </body>

</html>

Example explanation:-

JavaScript can be written between the <script> </script> tag in a HTML document. One can embed the script anywhere in the HTML Document, but this is recommended to insert the script at the end of the body.

An external JavaScript file can also be called from your HTML document. This technique is known as referral calling. An external JS file is more recommended when it comes to make proper web pages. This’ll simplify your complications for writing different scripts for every process you need.

In the example above the script is used for changing the para in the page, on click of the button.

Let’s start from the most basics. In this tutorial we’ll use the embedded script inside the same HTML page, later we’ll introduce you how to call the external JavaScript file.

HTML attributes can be changed with JavaScript

<!DOCTYPE html>
<html>
    <head>
        
    </head>
    
<body>
    
<img src="superthumb.jpg" alt="image-description" width="500px" />
<img id="demonstrate" src="superthumb.jpg" alt="image-description" width="500px" />

<script>
    document.getElementById("demonstrate").src = "source.jpg";

</script> 

</body>
</html>

Example:-

<body>

     <p>This is a Para with in HTML web page..</p>

     <p id="para"></p>

<script>

document.getElementById('para').innerHTML = "this is your text by javascript";

     </script>

</body>

Explanation:

The written script statement “document.getElementById(‘para’)”, can be described as:

document :  refers to the document in which it is written.

.getElementById :  It will take the value, as per it’s given Id. That’s why it is ‘get-Element-By-Id’, there are many other methods such as ‘getElementByClassName’, etc… by which you can call the element, we’ll introduce the methods to you later.

.innerHTML : This keyword defines that the given string should have to be shown in the document as a HTML statement.

And the text, between the quotes is a string which you want to display.

JavaScript is a object oriented language so it takes it’s document element like objects, so it is easy to manipulate the document’s parts using JavaScript.

Previous articleInput Types in HTML Forms
SHARE