Friday 14 November 2014

3. Lists and Introduction to Javascript

Lists

There are 2 types of lists:


  1. Unordered lists
  2. Ordered Lists
There is a third called Descriptive Lists which are a little different to the above which I won't cover here.

Unordered lists

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles).

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>


  • Coffee
  • Tea
  • Milk


Ordered List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers.

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>


  1. Coffee
  2. Tea
  3. Milk
Remember to place the above HTML code inside the <body></body> tags.

Styling Lists

By default, unordered lists use black dots and ordered lists used numbers starting at 1. There are many other types. Try the following styles:

<style>
ul {

   list-style-type: square;
}

ol {
    list-style-type: upper-roman;
}
</style>

Remember the style tag is in the head.

A full list of styles is available at http://www.w3schools.com/cssref/pr_list-style-type.asp


Introduction to JavaScript

JavaScript is the programming language of the web.

You could write a web page completely in JavaScript rather than HTML and CSS but it would be difficult to read and change. JavaScript is better at creating small parts of web elements and better still at manipulating HTML and CSS.

JavaScript is typically written in a file with a .js ending. For example dostuff.js. This file is then linked into the HTML page. For now we will do some simple inline scripts to help understand how it works. Inline means that the javascript is placed inside the HTML code.

Place the following code inside the <body><body> tags.

Example


<button type="button" onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>

<p id="demo">time</p>


Explanation


This will place a button on your web page. When you click the button, the onclick event happens. This fires the following JavaScript code:

document.getElementById('demo').innerHTML = Date()

Date() is JavaScript for the current date and time on your PC.

document is the web page document

getElementByID is a function of Document which gets an element on a web page or web document. It requires a element id which should be placed inside brackets and single quotes. The above example will get the first HTML element that has an id of demo. Notice the <p> tag below the button has an id of demo.

The innerHTML of the <p> tag is set to time when the page loads. When the button is clicked, it will be replaced with the current value for Date()

The result should be similar to below:

Fri Nov 14 2014 21:52:29 GMT+0000 (GMT Standard Time)



Well done. back to nice pictures and graphics next time with a little bit of JavaScript to spice it up a little bit.

Happy coding.

Michael