Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Device agnostic javscript – Part 1

Monday, July 21st, 2014 by Servage

JavaScript-1

JavaScript (JS) is a buzzword in today’s programming community. JS has established itself as a necessity, not only on the web, but across all devices, large to small. Mistaking Java for JavaScript is normal, as the first four letters seem to suggest they are interchangeable. In fact, both are quite different programming languages. Java is developed by Sun Micro System; whereas, JavaScript was invented by Brendan Eich and later adopted by the standard association now known as Ecma International.

The pervasive properties of JavaScript come from the DOM (Document Object Model) capability to manipulate code. JS can change HTML elements as well as other language elements, including server-side to client side languages and scripting. This is why it can effectively act with PHP, Java, Objective C, and other major web and mobile platforms. The client side aspect of JavaScript makes it a highly optimized script for smooth loading and interactions across various devices with different capacities.

Moreover, all the major browsers have adopted JS as their default scripting language. Therefore, when you simply write any code between <script>…</script> tags, it automatically interprets this as JavaScript. So, there isn’t a need to institute the older practice of inserting:

type=”text/javascript”
in the <script> tag.

JavaScript & HTML

JavaScript is able to change elements of HTML (innerHTML) using a DOM method in HTML which is:

document.getElementById(…)

With this method, you can easily add or delete the HTML elements as well as copy/clone the elements as needed. You can see it in following, practical code:

<!–DOCTYPE html>

My JavaScript

JavaScript can also change the content of an HTML element:

Push!

This is a demonstration.

// <![CDATA[

function firstFunction() {

document.getElementById("demo").innerHTML = "My First JavaScript!";

}

// ]]>

You can see JS placed in a HTML document using <script> tags. You can then write JS in any text editor or any advance-programming editor that exists. Additionally, you can create external JS files and then call them in any programming document, including multiple HTML pages.

Placement of JavaScript Code

You can write JavaScript in the <head> or <body> section, anywhere, depending on the sequence of execution you decide. Though, for sake of better performance of browsers, most web programmers place JS and similar scripts in the lower portion of <head> or <body> so they never interfere with the loading process. Placing all JavaScript code in one place (with comments) is a respectable practice, such that maintenance and debugging becomes more easy for other developers.

External JavaScript files with the .js extension can reference the source (src) attribute in HTML documents, in any section of HTML/XHTML and parts of HTML5 in following way:

<!–DOCTYPE html>

You should remember there is not any// <![CDATA[
tag in external JavaScript file as found in previous example of innerHML. Moreover, there is absent of print or output functions in the JavaScript therefore, we can use JavaScript only to manipulate the HTML elements or other language elements, not as an independent language as Java and PHP can do.
// ]]>

How JavaScript Works

Using the previously described DOM method, you can access any HTML element. Here you simply identify a HTML element with “id” attributes and afterwards, reference them in “innerHTML” to modify or alter them, as may be desired. In our first code example, we used a paragraph id “demo” as <p id=”demo”> in document.getElementById(“demo”).

Afterwards, we replaced the original element content with some new content using

innerHTML = “My First JavaScript!”;

Now, isn’t that easy?
References & More Reading
JavaScript Introduction
What Is JavaScript
Learn to Program with JavaScript

Device agnostic javscript - Part 1, 4.5 out of 5 based on 2 ratings
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.