JavaScript Overview
First off, JavaScript has absolutely nothing to do with Java apart from the fact that they share similar names. JavaScript is a scripting language used on the web. It can be said that currently, it is by far the most used web-scripting tool. This level of success was partly because it is supported by the leading browsers of the moment. It waves goodbye to static, functionless pages and introduces us to dynamic content.
Scripting, such as JavaScript, adds functionality and interactivity to your web pages. JavaScript can be either directly implemented into your HTML pages or as a seperate file which could be referred to when necessary. One should also note that JavaScript is license-free.
JavaScript provides HTML designers with a programming tool write in their HTML page. This enables them to perform actions such as validate data on the clients' side and reduce server-side processing. JavaScipt is also event-driven, which implies that it can perform functions when an event has occoured (ex: mouse click). Since JavaScript goes hand-in-hand with HTML it can put dynamic text into an HTML page, such as adding a variable. It can also call HTML elements and amend them.
Hands-On
Making use once again of W3Schools, which provide great explainations accompanied by suitable examples, I started to get the feel of JavaScript. The first steps consisted of:
- Understanding its' place in an HTML document (in the <script type="text/javascript"></script> tags)
- How to change HTML elements through JavaScript
- Calling JavaScript functions from the HTML
- The differences on were to place your JavaScript. Typically all the script is one block and in the <head> tag.
- How to call external JavaScipt files
Coming from a Java background I understand the implication that JavaScript is case sensitive. While reading through and experimenting with the examples on W3Schools pages it became immediately apprent that the JavaScript syntax is pretty similar to Java's, which I am quite familiar with.
Assigned Example
We were assigned the task of modifying an existing HTML file with some of our custom ideas and some assigned ones.
The document can be found at
http://www.davidflanagan.com/javascript5/display.php?n=1-3&f=01/03.html
In brief, we were required to:
- Properly understand what the code does
- Modify its' CSS and HTML to make it more presentable
- Add these functions
- Total number of payments
- Date when loan ends
- Add a checkbox which reduces the interest rate by 10%
- Add a feature of your own
To properly understnad the code once has to first understand which parts are in HTML, which CSS and which are JavaScript. Reading through the code I was able to gain some understanding as to what is what and what does what. I modified the CSS to include a picture as a background and placed the table to be always at the centre of the browser.
I then added space in the tables for the new functions needed and started to amend the JavaScript to include the required functionality.
To be continued...
No comments:
Post a Comment