JavaScript Cheet Sheet

This example demonstrates various events and properties. Move the mouse to see the coordinates, click a mouse button, press up and down arrows to change text size, double click the mouse to see various properties.

// paragraph set to the first p element in the code using querySelector
var paragraph = document.querySelector("p");
// Declare size variable
var size;
// This function is passed an event. The event checks if the ArrowUp or ArrowDown buttons are pressed
// In either case, sizeChange function is called. The number that is pass is dependent on the user action
function keyPressed(e){
     if(e.key == "ArrowUp"){
       sizeChange(size * 1.1);
     }
     if(e.key == "ArrowDown"){
       sizeChange(size / 1.1);
     }
}

// This function is passed a newSize for the text in pixels. The paragraph size is set using paragraph.style.fontSize
function sizeChange(newSize){
     size = newSize;
     paragraph.style.fontSize = size + "px";
}

// Sets the initial size of the paragraph element to 12 pixels sizeChange(12);

//This function is passed an event. The event gets MoveEvent properties clientX and clientY and displays those values to the HTML element id's xMouse and yMouse
function getCoord(e){
     xMouse.innerHTML = "X Coordinate mousemove at: " +e.clientX;
     yMouse.innerHTML = "Y Coordinate mousemove at: " +e.clientY;
}

//This function is passed an event. The event gets MoveEvent properties clientX and clientY and displays those values to the HTML element id's xMouse and yMouse
// This function essential does the same thing as the function above, but it is called using a different event
function getCoordClick(e){
     xLocation.innerHTML = "X Coordinate Clicked: " +e.clientX;
     yLocation.innerHTML = "Y Coordinate Clicked: " +e.clientY;
}
// This function is passed an event. It is called when the mouse is double click. It will display the coordinates of the double click to HTML element doubleClick.
// This function will also check the value of various event properties and display each one at a time as an alert
function getDblCoordClick(e){
     doublClick.innerHTML = "Mouse double clicked at X = " +e.clientX +" Y = " +e.clientY;
     alert("target property returns: "+e.target);
     alert("type property returns: "+e.type);
     alert("bubbles property returns: "+e.bubbles);
     alert("cancelable property returns: "+e.cancelable);
     alert("currentTarget property returns: "+e.currentTarget);
     alert("defaultPrevented property returns: "+e.defaultPrevented);
     alert("eventPhase property returns: "+e.eventPhase);
     alert("timeStamp property returns: "+e.timeStamp);
}
// window object, addEventListener to call mousemove method. If called it will execute getCoord function
window.addEventListener("mousemove", getCoord);

// window object, addEventListener to call click method. If called it will execute getCoordClick function
window.addEventListener("click", getCoordClick);

// window object, addEventListener to call dblclick method. If called it will execute getDblCoordClick function
window.addEventListener("dblclick", getDblCoordClick);

// document object, body.addEventListener to call keydown method. If called it will execute keyPressed function
document.body.addEventListener("keydown", keyPressed);