Welcome to Ebony's Sick JavaScript Tutorial

The Basics

Throughout this document, actual code will be styled like this.

Function Syntax

JavaScript functions inside of script tags need to be declared as a function. function MyFunction

Functions must have brackets after them. function MyFunction()

Code for the function should be contained in curly brackets. function MyFunction() { code }

Lines of code should end with a semi colon. function MyFunction() { code; }

Parameters can be included within the brackets. function MyFunction(p1, p2) { p1 * p2; }


Variables

JavaScript variables are defined by the keyword 'var'. var myVariable

Unline other programming languages, there are no strongly typed variables such as 'string' or 'int'.

Variable names must be unique, and can contain letters, digits, underscores and dollar signs.

Variable names cannot begin with numbers.

Reserved words cannot be used as names (e.g. var var = 10; will not work, var myVar = 10; will work).


Onclick Attribute

JavaScript functions can be written directly in the 'onclick' html attribute onclick="document.getElementById('demo').innerHTML = Date();"

The above function is attached to the button element below.
<button id="demo" type="button" onclick="document.getElementById('demo').innerHTML = Date();">


Function Call

JavaScript functions can called in the 'onclick' html attribute onclick="ShowStar()".

This is the more common use of the attribute, as JavaScript code can be several lines long and may need to be reused.

The code for the above function is written between script tags on the page
<script> function ShowStar(){ document.getElementById('demo2').innerHTML = "&#9733;"; document.getElementById('demo2').style.color = "yellow"; } </script>.


Document.getelementbyid

The JavaScript function document.getElementById('ElementId')... targets a particular HTML elements based on the id attribute.

For example, this 'h4' subtitle has the id set as 'ThisSubtitle'. <h4 id="ThisSubtitle">

The function called via the button is document.getElementById('ThisSubtitle').style.fontSize = '35px';


Document.getelementsbyclassname

The JavaScript function document.getElementsByClassName('ClassName')... gets all HTML element based on the id attribute.

For example, all 'h4' subtitles have the class set as 'h4Title'. <h4 class="h4Title">

The function called via the button is:
function UnderlineH4Titles() { var x = document.getElementsByClassName("h4Title"); var i; for (i = 0; i < x.length; i++) { x[i].style.textDecoration = "underline"; } }


Toggle Show/Hide

The generic JavaScript toggle checks which condition is true, then executes the other. For example, the button below checks whether the elements with the class name 'example' have display set to 'none' or not.

function ToggleHide() { var x = document.getElementsByClassName("example"); var i = 0; if (x[0].style.display === "none") { for (i = 0; i < x.length; i++){ x[i].style.display = "block"; } } else { for (i = 0; i < x.length; i++){ x[i].style.display = "none"; } } }


Timers

The function var intervalID = window.setInterval(MyFunction,1000) sets a timer on the window to call a function every second.

0

var intervalID = window.setInterval(AddToNumber,1000); var number = 0; function AddToNumber() { number++; document.getElementById('num').innerHTML = number; }


Conclusion

This short tutorial should have introduced the main concepts of using JavaScript with web pages.

JavaScript can also be used to change link paths, image sources and more.

For more information on JavaScript, see w3schools.


Next Up - jQuery

jQuery is a JavaScript library with lots of handy functions already written.

Most websites include jQuery for form validation, slideshows, menu bar transitions and more.