Reference no: EM133140220

Learning Task: JavaScript

1. JavaScript Programming

By now you know that HTML is intended simply to explain what blocks of text are - where a paragraph starts and ends; where a heading is located; what text or images are supposed to link to. This is why it is a "Markup Language" - it provides markup for the browser to work out how to display the document. What it isn't is a programming language, and even if someone wishes to argue that it is, HTML is not Turing complete.

Which is a problem, because back in 1993 it seemed like a really good idea to make HTML responsive to the user. Before JavaScript the solution was to use what we now call server-side programming. On the web server we run software written in languages like Perl, Python, C++ or ASP.Net, and those programs respond to user requests by producing HTML which is sent to the browser. Server-side code has some great advantages - the biggest being that it has access to data stored on the server, such as databases and files. When you access Learn Online it is running server-side software (in PHP) that generates the pages you see by pulling data from a core database. The biggest disadvantage to server-side programming is that it is slow to respond. Each request must be sent to the server, which must then generate a new HTML page, which in turn must arrive at your computer and be rendered by the browser. It is great for submitting data and when we click on links, but it isn't instantaneous. Next study period you may be studying Data Driven Web Technologies, and that course will take you through server-side code in detail.

Client-side programming is when we write programs which are downloaded to the browser and run there. This makes them very responsive - if you trigger the program it creates an immediate response, and it normally has no need to contact the server to perform an action (we'll discuss exceptions next week). On the negative side, the user's computer needs to be able to run the software; traditionally they can be associated with security risks; you can't directly access server-side data; and the performance is governed by the performance of the user's computer.

In the end, many of the limitations of server-side programming are covered by the advantages of client-side programs while many of the disadvantages of client-side code are covered by server-side programming. Thus, in most applications we use both server-side and client-side together.

JavaScript
By now you probably have the idea - I love the history of these things, so you're stuck with a quick history lesson before we get going. Hopefully it will be relevant.

JavaScript is mostly a client-side programming language. It was developed by Netscape (one of the early and most significant browser developers) and released in 1995. Originally it was called LiveScript, but the name was changed after the success of Java - which leads to the common misconception that it must be like the Java programming language. It isn't. It uses a similar syntax, but otherwise has little to do with Java.

As far as syntax goes, JavaScript uses what we call a C-type syntax (which is shared by a very large number of programming languages, such as C, PHP, C#, C++ and Java). If you have Python programming experience, two of the big changes from Python are the use of a semicolon (";") to end statements, and the use of braces ("{}") to start and end blocks. For example, an "if" statement in Python looks something like:

if (x > 5) : do something
do something else

The indenting of the "do something" indicates that it is part of the "if" block and is only executed when x is greater than
5. The same code in JavaScript will look more like:

if (x > 5) { do something;
}
do something else;

We can indent the "Do something", but we don't need to - JavaScript knows to only perform that function if x is greater than 5 because it is enclosed in the braces. That gives JavaScript a bit more flexibility, because you could also write:

instead it uses Prototypes, but this is a bit outside of what we can cover in this course). Other differences we'll reveal as we go along.
The Document Object Model (DOM)
The core of JavaScript in browsers is the Document Object Model. To understand, let's look at a basic HTML page - one that we're going to use as the basis of what we're doing in this Learning Task.

If we break this down, we have a document that has a HTML block (which we can formally call the "root element"). Within the HTML block are two more elements: a "head" and a "body". Within the "head" is a "title" element, and within that is the text "Week 8". The "body" element contains three more elements: a "h1" element, an "a" element, and a "p" element (with the identifier "box"). The "p" element contains the text "Click me" while the "h1" element contains the text "JavaScript Demo". Finally, within the "a" element contains the attribute "href".

The DOM defines each of those elements as an object that can be individually targeted so that JavaScript can add or remove objects, and modify, add or remove properties of those objects. You can, for example, change the text in a "p" tag, or modify the CSS that applies to the "h1" object. It provides the model, the properties, and the tools you need to work with them
Events/Triggers
JavaScript is what we sometimes call an "event-based language". This means that the JavaScript you write spends most of its time doing nothing - it just sits there - until something happens to trigger it. At that point it performs whatever task it was programmed to do, and then it goes back into waiting mode.
With JavaScript, the four most common events are:
When the page is loaded
When a HTML element is clicked on
When a HTML element is modified by the user When the mouse passes over or leaves an element

Task 1
Create a HTML page using the code provided above. Change the "a" tag to read:

Test it by loading it into a browser and clicking on "Click me".
What we've done is pretty much the most basic type of JavaScript. That said, it shows two major elements of JavaScript programming. The first is the use of "onclick" which is one of the events we've been talking about. The second is the user of an "alert" function which creates one of the annoying pop-up alert boxes we all hate. JavaScript is very good at annoying users. Let's not use alert again.

(As an aside, the use of "#" in the link is a way of preventing the link from doing anything - that we we don't go to a different page while trying to execute the JavaScript).
Using the DOM
The problem with the alert example is that it doesn't do what JavaScript is good at. What we need to do is identify an element using JavaScript and change something about it, rather than just make an alert appear.

To identify an element, we need to find something that lets us pull it out from the rest. JavaScript allows us to find elements by:
ID
Class Name Tag Name CSS Selector
From the containing object

The above code will search through the document (the root element) to find a paragraph tag with the id "box". From there we can modify the properties of the object with that ID.
Common properties to change are:
innerHTML: changes the HTML contained within the tags src: changes the image to display
style.<n>: changes the CSS style. For example, style.border will change the border property value: the current value of a form element (to be covered next week)
We're going to start with innerHTML.

Task 2
To combine the two tasks we've been discussing, change the onclick event in the "a" tag to be:

If it works you will see a real-time change to the webpage. JavaScript will identify the appropriate element and change what it contains to match what you tell it to be.

Task 3
We don't just include small amounts of text - we can include any HTML at all. For example, remember the <li></li> tags from the HTML prac? Instead of adding 'You clicked it!' change the innerHTML to read:

As simple as that may seem, the ability to add HTML into HTML pages in real time at the request of the user opens up a world of possibilities.
Functions
The problem with the method we've been using is that our tags are going to get very, very big as the programs get longer. If we want to avoid that risk we can move the program out of the tag and into another place in the HTML document, and then launch it when the event occurs.
If adding JavaScript to a page we use the <script></script> tags. Normally they are placed near the top of the file in the
<head>, but we can place it elsewhere.

Task 4
Change your HTML page to read:

To break down what is happening here:
The <script> tag tells the browser that a JavaScript program is to follow, and therefore not to display this on the page.
counter = 0; is run when the page loads and sets the counter to 0 ready for you to use it.
function countClicks() declares a function called "countClicks". The { and } which follow enclose the JavaScript to run when this function is called.
The next line counter = counter + 1; increases the counter by one.

before, but this makes it a bit easier to read.
The final line - and the one which matters the most, is element.innerHTML = output; That takes the element we identified and change sthe innerHTML (the text it encompasses) to be the output we created.
Now all we need is to trigger it, and that happens in the "a" tag with:

We just put in the name of the function we want to use, add the brackets, and we're good to go. Using the current element
Using this
In many cases with JavaScript we want to modify the same element that we triggered. We could give that element an ID, but JavaScript has an easier solution for us. Instead of:

We're allowed to refer to the current element simply as "this", giving us:

This means that we can call a function and potentially send it the elemnt so that the same function can be used in a few different places.

Task 5
Change the previous (Task 4) JavaScript function to read:

And the "a" tag to be:

Using this approach, the onclick even in the "a" tag lets the function know what element to change.
Mouseovers
There are two very useful events in JavaScript that we haven't tackled yet:
onmouseover onmouseout
These are handy because they are triggered by the movement of the mouse, not when the mouse is clicked. An old trick was using them to handle what we called "JavaScript rollovers" - changing an image to highlight it when the mouse is on top. These days we can do similar tricks with CSS, but there are still times when the JavaScript solution is a better option.

Task 6
We're going to swap between two images using JavaScript. First, add to your HTML page the code:

You should recognise that from a couple of weeks ago as an image tag that displaces the image specified by src. Next, add an onmouseover event that changes the source (src) on the tag:
At this stage moving the mouse over the image will change the picture, but it won;t change back. To make it change back you need to create another event, almost exactly the same as the one above, using onmouseout and setting the image source

If you can make this function you can use three events (onmouseover, onmouseout, onclick) to change text (innerHTML) and properties (src) using JavaScript functions.

Attachment:- JavaScript Programming.rar