Servage Magazine

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

Exploring JavaScript for your website

Tuesday, December 30th, 2014 by Servage

javascript-badgeJavaScript brings dynamic functionality to your websites. Every time you see something pop up when you mouse over an item in the browser, or see new text, colors, or images appear on the page in front of your eyes, or grab an object on the page and drag it to a new location – all those things are done through JavaScript. It offers effects that are not otherwise possible, because it runs inside the browser and has direct access to all the elements in a web document.

JavaScript first appeared in the Netscape Navigator browser in 1995, coinciding with the addition of support for Java technology in the browser. Due to the initial incorrect impression that JavaScript was a spin-off from Java, there has been some longterm confusion over their relationship. However, the naming was just a marketing ploy to help the new scripting language benefit from the popularity of the Java programming language.

JavaScript gained new power when HTML elements on web pages got a more formal and structured definition in what is called the Document Object Model, or DOM. The DOM makes it relatively easy to add a new paragraph or focus on a piece of text and change it.

Since both JavaScript and PHP support much of the structured programming syntax used by the C programming language, they look very similar to each other and they are both fairly high-level languages. They are also “weakly typed” so it is easy to change a variable to a new type just by using it in a new context (insted of having to declare all variables and date types strictly).

Some of the key benefits of using JavaScript are listed below.

Add effects

You can use JavaScript to dynamically add effects to your document’s elements, like sliding, spinning, fading, moving etc. This makes it possible to create interactivity and app-like experiences for your users.

Change the content

You can change content in the document using JavaScript, by adding, removing or changing existing elements. This could be combined with some effects, and thereby for example create a sortable list for the user.

Process data

Moving data between the client and server is another great benefit of javaScript. You can send and receive data without the page reloading, which makes it possible to build complex web apps. Have a look at our other blog posts about AJAX and JavaScript for an in-depth knowledge about this.

JavaScript and HTML text

JavaScript is a client-side scripting language that runs entirely inside the web browser. To call it up you place your JavaScript code between opening <script> and closing </script> HTML tags. A typical HTML 4.01 “Hello World” document using JavaScript might look like below.

“Hello World” displayed using JavaScript
<html>
 <head>
  <title>Hello World
  </title>
 </head>
<body>
 <script type="text/javascript">
 document.write("Hello World")
 </script>
 <noscript>
 Your browser doesn't support or has disabled JavaScript
 </noscript>
</body>
</html>

You may have seen web pages that use the HTML tag <script language=”javascript”>, but that usage has now been deprecated. This example uses the more recent and preferred <script type=”text/javascript”>.

Within the <script> tags is a single line of JavaScript code that uses the JavaScript equivalent of the PHP echo or print commands, document.write. As you would expect, it simply outputs the supplied string to the current document, where it is displayed.

You may have also noticed that, unlike with PHP, there is no trailing semicolon (;). This is because a newline serves the same purpose as a semicolon in JavaScript. However, if you wish to have more than one statement on a single line, you do need to place a semicolon after each command except the last one. And of course, if you wish, you can add a semicolon to the end of every statement and your JavaScript will still work fine.

The other thing to note in this example is the <noscript> and </noscript> pair of tags. These are used when you wish to offer alternative HTML to users whose browsers do not support JavaScript or who have it disabled.

References & more reading

 

Exploring JavaScript for your website, 4.6 out of 5 based on 5 ratings
Categories: Guides & Tutorials

Keywords:

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.