Know How To Have More Functional HTML With The Help Of JavaScript

ประกาศบน - Last Modified on

You only need internet to view a website. Let’s suppose you are a marketer and you need traffic to your site. For it to happen, your website has to be captivating, and enjoyable to read. A computer language allows web creation and in this case, the computer language used is HTML. It is a powerful, easy to learn language that is user-friendly and constantly updates to meet the demands of today’s vast internet user base.

HTML, which means Hyper Text Mark-up Language, allows anyone to go to anywhere on the web by clicking on the given links. The hyperactive text simply means the method through which a user clicks on hyperlinks to move onto another page. A mark-up, on the other hand, is text specially marked as italicizing, made possible by HTML tags inside that text.  

Like so many other programming languages, HTML uses a coding language. The writer types the short HTML codes as tags into a text file. The written text is saved as an HTML file, and can be viewed from any chosen browser. The browser translates the text into a form visible to readers. To create the kind of HTML pages needed, anything from a graphical editor to a text editor can do the job perfectly.

What is JavaScript, and how does JavaScript make HTML dynamic?

In writing the web pages, a code is executed using a scripting language. One of these is JavaScript, a lightweight programming language that is easy to use. It is highly useful due to its ability to introduce interactivity in all web pages. Mainly used in the creation of polls and queries, every major browser has been built in JavaScript. If your website visitors use browsers supporting and enabling JavaScript, it automatically runs every time they visit your page. Unlike other scripting languages, JavaScript does not need constant downloading from the website.

It is amazing what a code, having a few lines of a JavaScript, can achieve. The majority of websites employ JavaScript in their web creation because it allows dynamic, customized interactions. It is important to understand the structure of JavaScript before you start work on your web pages. However, if you have no idea how to interact JavaScript into your websites, use freelancer.com to hire experts with web development skills.

Clear maintenance of a JavaScript code in an HTML file makes the file easy to understand, and furnishes it clean. HTML files can reuse the same JavaScript file repeatedly, and one of the biggest advantages is that JavaScript hides when a browser does not support it.

Methods Used to Incorporate JavaScript into a Web Page

When there is less JavaScript, the code embeds inside <script> tags within your web page. All the changes made after embedding JavaScript code are immediately visible, compared to the changes made when the JavaScript external source file is not visible. This is because there are times the browser caches the JavaScript external source file. Below are examples of how to include JavaScript into web pages.

The first way is the inclusion of statements of JavaScript inside <script> and </script> tags. The example given below demonstrates how the syntax that includes JavaScript in <script> tags goes about:

 

<script type=”text/JavaScript”>

    JavaScript code

</script>

The above code shows the attribute type used for specifying the scripting language followed in writing the embedded statements within <script> tags.

Among the many scripting languages, VBScript and JavaScript are the most popular. If no language is specified, browsers assume JavaScript by default.

Inclusion of the <script> tags is either in the section head of a web page, or in the section body. Specifying multiple <script> blocks in a single web page is valid. Executing of multiple scripts occurs from the top to the bottom.

Another way of specifying JavaScript is writing statements of it in an external file and then referencing the same in your web page. This external file is a source of, and ends with the extension .js. The example below shows the syntax used to reference a JavaScript external source file.

1

2

3

<script type=”text/javascript”src=“script.js”>

 JavaScript code...

</script>

The above code depicts src which in turn specifies the path, leading to the JavaScript external source file. This path can go either of two ways - relative or absolute. A point to note is that there is no JavaScript statement written between these two tags <script> and </script> because they are ignored. Writing multiple <script> tags refers to multiple external source files.

The third example below shows how to convert a static HTML page into a dynamic JavaScript based HTML page.

For instance, you have an HTML-page saved as, "index.html" (referred to as index_static.html in this example).

index_static.html

<! DOCTYPE HTML>

<html>

    <head>

        <title>Test</title>

    </head>

    <body>

        <h1> Hello !!! </h1>

    </body>

</html>

To clearly see the output desired, open the above file in a browser and create an equivalent JavaScript file similar, or equivalent to, the above file. Create the Javascript source using online tools. Do so by pasting the above HTML file source to the JavaScript source. What follows looks like this:

dynamic.js

document.write("<!DOCTYPE HTML>");

document.write("<html>");

document.write("    <head>");

document.write("        <title>Test<\/title>");

document.write("    <\/head>");

document.write("    <body>");

document.write("        <h1> Hello !!! <\/h1>");

document.write("    <\/body>");

document.write("<\/html>");

Now, your new dynamic version of the static_index.html looks like this:

index_dynamic.html

<script language="JavaScript" src="dynamic.js"></script>

Once again, open the initial index_dynamic.html on your browser and check the web page.

The last example is: take a document containing an image1 at the initial time of loading the page. Image1 changes to image2 after a click by the user. This is a demonstration of dynamism that indicates Dynamic HTML (DHTML).

The example below explains it more:

 

 

 

 

 

//HTML Code

<html>

   <head>

      <title>DHTML Demo</title>

   </head>

   <body>

      <img src= “image1.jpg” id=”image”/>

      <script type= “text/javascript”src=“script.js”></script>

   </body>

</html>

 

 

 

 

 

 

//JavaScript code - script.js

function change( )

{

   var img =document.getElementById(“image”);

   img.src = image2.jpg;

}

document.getElementById(“image”).onclick= change;

Examples of JavaScript Dynamism in an HTML Web Document

Content document changes easily with the interactions of the user.

Content document changes after a specific time interval and on browser events that are specific.

  • Allows for movement of old elements to newer positions
  • Makes elements disappear and reappear, depending on your needs
  • Allows the background and foreground colors to change
  • Changes the properties of all the font elements
  • Helps to change the contents of all the elements
  • Oversees the overlapping of all the stack order elements
  • Allows easier dragging and dropping of elements to any place in the browser window

Conclusion

JavaScript is a multi-paradigm language that is very easy to use and learn. Its flexibility appeals to everyone who uses it, and there is no better language for writing your HTML web pages. The fact the language restricts you to conduct programming in a certain style, makes it very helpful in learning and understanding the strengths and weaknesses associated with it.

It is especially useful for people who are self-taught, and have no formal training in programming languages. That is how easy it is to grasp the fundamentals of the JavaScript programming language. It continues to gain in popularity, and this is likely to continue for many years to come. People with excellent JavaScript skills have promising job prospects.

Read more about how to make HTML dynamic, and tell a friend about this article.

Do you believe you can use JavaScript to make your HTML dynamic? What would you recommend we add to the above article? If it was of any help to you, please leave a comment below.

ลงประกาศ 23 กันยายน, 2017

EdwardSuez

Sales & Marketing Guru

Edward is the Sales & Marketing Correspondent for Freelancer.com. He is currently based in Sydney, and is a self-confessed ice-cream fan.

บทความถัดไป

Myths Of SEO Link Building That You Need To Be Wary Of