JavaScript By Example

The Basics

This series of examples shows you how to use all of the basic constructs of JavaScript.

1. First JavaScript - this example shows the best way to attach your JavaScript into your web page.
2. Noscript - the best way of catering for those visitors who do not have JavaScript.
3. Swapping Content - how to use JavaScript to quickly and easily swap what is displayed in a part of the web page.
4. Optional Semi-Colons - why even though semicolons on the end of statements are optional in JavaScript that best practice its to always include them.
5. Comments - the various appropriate ways to comment your JavaScript.
6. Variables - where and how you should define variables in JavaScript.
7. Operators - how to use operators in JavaScript and also at how JavaScript determines when + means add and when it means concatenate.
8. IF Statements - how to use a simple if statement in your JavaScript so as to make a decision about whether or not to run certain code.
9. Else - how to add an else to your if statement so as to run one of two pieces of code depending on the result of the comparison.
10. Blocks - how you can create a block of statements to substitute anywhere a single statement can go.
11. Switch - how to use a JavaScript switch statement to provide more than two alternative paths.
12. Switch - Grouping Case - how to group values together inside a switch statement so as to run the same code for multiple values.
13. Ternary Operator - a shorter way of writing some JavaScript if statements.
14. Whitespace - you can include it to make the script easier to read or exclude it to make the script faster to load.
15. Functions - separate out code that performs a specific task and to then run that code as and when required using a single statement.
16. Scope - we can define different scopes in which specific variables will exist.
17. For Loop - the most commonly used of the various loop constructs available in JavaScript.
18. While Loop - simpler in its operation than a for loop and in many cases will also be easier to understand.
19. Do While Loop - will run the code inside the loop at least once since it performs the test for whether to exit the loop at the end of the loop instead of at the start.
20. Loop Break - exit early out of any loop in JavaScript.
21. Continue - skip over the rest of the code in this iteration through the loop and to start the next iteration.
22. Objects - some are built into JavaScript and you can also create your own.
23. For .. In - allows you to access all of the properties and methods of an object without needing to know how many there are or what they are called.
24. Feature Sensing - Since JavaScript was first created it has had the ability to test whether the browser supports the code before running it.

Objects

These built-in objects will form the basis for most of the objects you create.

1. Boolean - is as simple as you can get in a usable object as it only allows for two values - true and false.
2. Object - provides a template on which all other JavaScript objects can be built.
3. Date - is probably the most useful of the built in JavaScript objects which does not provide a shortcut alternative notation.
4. Array - allows you to create an ordered collection of similar or dissimilar objects.
5. Number - when you convert numbers into Number objects you then have access to a whole range of methods for manipulating them.
6. Math - provides for more advanced number processing.
7. String - by converting text strings into String objects we gain the ability to manipulate the content of the string.
8. RegExp - provides pattern matching functionality for advanced string manipulation.
9. Function - the least efficient way of creating functions but which allows the function code itself to be dynamically created.

Functions

These functions are built into JavaScript to make it easier (and in some cases possible) to perform those tasks.

1. parseInt - converts numbers in any base between 2 and 36 into base 10.
2. parseFloat - allows text strings to be used to assign values to floating point numbers.
3. isNaN - provides a means of testing whether JavaScript considers a value to be capable of processing as a number or not. It returns true if the value is not a number.
4. isFinite - tests both that the value is a number and also that the number isn't too big for processing.
5. encodeURI and decodeURI - these functions 'escape' those characters that could lead to content being misinterpreted and help keep it separate from the surrounding content.
6. setTimeout - allows you to specify a delay before running a function.
7. setInterval - this function looks the same as setTimeout but instead of running the function once, it runs it over and over with the specified interval in between.

Events

Much of the JavaScript in our web page will be run in response to events.

1. Attaching Events - Not all browsers allow events to be attached in the same way. This example shows one way to combine them in an efficient manner.
2. Detaching Events - Where an eventlistener or attachEvent is used to add a function to an event you can also detach that function again when it is no longer required.
3. Cancel Bubble - Events bubble outward and can trigger the running of functions attached to that event on any of the ancestor elements of the one where the event was triggered unless one of the functions tells it to stop.
4. Prevent Default - Where an element has a default action that it performs that is not dependent on JavaScript we may need to disable that default when JavaScript is enabled.
5. Type of Event - A simple cross browser way of identifying which event is being processed.
6. Current Element - With bubbling events the element that the event is currently processing is not necessarily obvious unless you retrieve that information.
7. Cursor Coordinates - Determining the position within the web page that the mouse cursor was located at the time of triggering the event.
8. Character Entered - Keyboard events are triggered by someone interacting with a key on their keyboard. Here's how to find out which key it was.
9. Key Modifiers - shift, alt, ctrl - here we have a function that creates an object with properties that tell us which of these three keys are pressed.
10. Which Mouse Button - A computer mouse generally has three buttons on it. At least that is the number of different buttons that JavaScript is able to identify.

• 1
• 2
• 3
• 4