Basic Output Functions

There are 4 ways to out put information to the webpage
Writing into an alert box, using window.alert()
Writing into the HTML output using document.write()
Writing into an HTML element, using innerHTML
Writing into the browser console, using console.log()

You will notice that the page stops rendering untill you answer this.
window.alert('This is a pop up message');

document.write() =

This is used with document.getElementById( 'IDName' )innerHTML = ( 'Something goes here' ); to add the text to a specifice HTML element on your page.

innerHTML() =

This last one is a bit unusal. It rights tot eh console that is used in developer tools ( F12 ) in your browser and the console tab.
console.log( ' I have just added this to the console log ' );

Basic Document Functions

Here the text is changed from what it is to what the JavaScript changes it to.
function BasicFunction() { document.getElementById("BasicFunction").innerHTML = "JavaScript Text!"; }

BasicFunction = Original Text

Here we are creating an Object or Array using a key : value pair system. var person = { firstName : "John", lastName : "Doe", age : 50, eyeColor : "blue" }; This can later be called in your JavaScript. document.getElementById( 'XXX' ).innerHTML = person.firstName + ' has ' + person.eyeColor + ' eyes!';

Date Functions

Date() =

This is a function that needs the Date() function to work. It gets teh full year from teh Date() function

getFullYear() =

This needs the date function to work.
This pulls the number of milliseconds from January 1st, 1970 to the Date() function.
The internal clock in JavaScript starts at midnight January 1, 1970.
The getTime() function returns the number of milliseconds since then:

getTime() =

JavaScript counts months from 0 to 11. Month 10 is November.
This says set year but will allow you to set year, month, and day

setFullYear() =

Returns the day as a number

getDay() =

Here we create an array to show the days using teh getDay() function.
this will let you change the names of teh week or abrieviate them.

getDay(array) =

Here we are going to create a real time clock using JavaScript

Working with style elements

Here we are going to grab anything that is insde the < style > tag and out put in it using the < xmp > or < pre > tags.
This is done by using document.getElementsByTagName("HTML_TAG")[0]; in this case the style tag.
You will notice [0] on the end. This is stating that we want the 1st element of the array.
In the below example I changed the location of the array key to be called.
The array will be built of all the tags specified. If teh tag was < li > than every line elemnt found would be a different array element.

Here we are going to create a new style element using createElement() this will create teh HTML element
Next we declare the style we are adding. createTextNode() this creates a text string or node
Than we put the two together with appendChild(), this will add to teh end instead of overwriting

Here we are going to change the style of an element.
specifically the font color using style.color
Here Is the Element that we are changeing the color of

We are going to try adding more than a single change to teh style now

Click the button to change the background and alignment

Creating & Using Functions

A function

Click the button to display a random number between 1 and 10. ===> ===>

Here we are going to do a random number as well but will let you choose the range and display all the results.

Function - toggle_visibility()