JavaScript Cheet Sheet

Example 1 - innerWidth & innerHeight Properties

// Demonstrates window properties 'innerWidth' and 'innerHeight'
example1a.innerText = "Browser window width is: " +window.innerWidth +"px";
example1b.innerText = "Browser window height is: " +window.innerHeight +"px";
// Run the example again after adjusting your screen size

Example 1 Output

Run Example 1

Click button to show result...

Example 2 - Open A Window

// Demonstrates open() method. Parameter is web address.
window.open("https://www.ontariolearn.com/");

Example 2 Output

Run Example 2

Click button to open a new window...

Example 3 - Find Color Depth

// Demonstrates screen colorDepth property
example3a.innerText = "Your screen's color depth is: " +screen.colorDepth;

Example 3 Output

Run Example 3

Click button find your screen's color depth:

Example 4 - Document - Open / Write / Background Color

// Demonstrates various document methods which open a new page, replace and write contents, change background color
document.open("text/html","replace");
document.write("<h2>Learning about the HTML DOM is fun! <h2>");
// bgColor will change the background color of a page
document.bgColor = "red";
document.close();

Example 4 Output

Run Example 4

Click button to show result...

Example 5 - Navigator

// HTML5 spcification adds geolocation property to navigator
// getCurrentPosition method is passed a callback function 'success'
navigator.geolocation.getCurrentPosition(success);
function success(position) {
// This function is called by getCurrentPosition(sucess)
// Gets your latitude and longitude coordinates
   var latitude = position.coords.latitude;
   var longitude = position.coords.longitude;
   example5a.innerText = "Your latitude is: " +latitude;
   example5b.innerText = "Your longitude is: " +longitude;
}

Example 5 Output

Run Example 5

Click button to show result...

Example 6 - navigator.appName

// Demonstrates appName property which returns the name of the browser and appCodeName property which returns the code for the browser
// Many browsers return the name "Netscape"
example6a.innerText = "Your broswer is: " +navigator.appName;
example6b.innerText = "Application code name of the browser: " +navigator.appCodeName;

Example 6 Output

Run Example 6

Click button to show result...

Example 7

// Demonstrates properties platform and language
example7a.innerText = "Your broswer platform (operating system) is: " +navigator.platform;
example7b.innerText = "Broswer language is: " +navigator.language;

Example 7 Output

Run Example 7

Click button to show result...

Example 8

> // Returns the width and height of the screen
example8a.innerText = "Screen width is: " +screen.width;
example8b.innerText = "Screen height is: " +screen.height;
// Returns the width and height less minus interface features like the Windows Taskbar
example8c.innerText = "Screen availWidth is: " +screen.availWidth;
example8d.innerText = "Screen availHeight is: " +screen.availHeight;

Example 8 Output

Run Example 8

Click button to show result...

Example 9

function historyExample1(){
// Demonstrates history object, back() method
window.history.back();
}

Example 9 Output

Run Example 9 - Moves back to previous page

Example 10

function historyExample2(){
// Demonstrates history object, go() method which accepts an argument for the number of pages to move
   window.history.go(-2);
}

Example 10 Output

Run Example 09 - Moves back two pages