Module 3 Cheatsheet: JavaScript Programming for Web
Applications
Class or Method Description Example
//Creates the element <p> and text “Hello World”.
Appends Hello World <p> to the HTML document.
<head>
<script>
function addPara() {
An HTML DOM method that after creating var newPara = document.createElement(“p”);
an element, you can use this function to var newText = document.createTextNode(“Hello
appendChild() place the element in the appropriate World!”);
location within the document. The element newPara.appendChild(newText);
document.body.appendChild(newPara);
to append is the only parameter. }
</script>
</head>
<body onload=“addPara()”>
</body>
Created by declaring the array elements in
[ ]. An array can be assigned to a variable,
const Beatles = [“Ringo”, “Paul”, “George”, “John”];
Arrays usually using the keyword const or var. //Here Beatles[0] is “Ringo”.
Arrays use zero based indexing to access
their elements.
//create a new date from a string
Constructor is new Date([optional var newDate = new Date(“2021-1-17 13:15:30”);
parameters]). If the constructor is declared
Date() with no parameters, it returns current local //create a new date instance representing 17 Jan 2021
date and time. New dates can be created by 00:00:00
//note that the month number is zero-based
passing parameters to new Date function. var newDate = new Date(2021, 0, 17);
//Creates the element <p> and text “Hello World”.
Appends Hello World <p> to the HTML document.
<head>
<script>
function addPara() {
Takes one tag name parameter and creates var newPara = document.createElement(“p”);
an element with that name. Can place the var newText = document.createTextNode(“Hello
document.createElement() element elsewhere on the page using World!”);
functions like insertBefore(), newPara.appendChild(newText);
document.body.appendChild(newPara);
appendChild(), replaceChild(). }
</script>
</head>
<body onload=“addPara()”>
</body>
//Creates the element <p> and text “Hello World”.
Appends Hello World <p> to the HTML document.
<head>
<script>
function addPara() {
var newPara = document.createElement(“p”);
var newText = document.createTextNode(“Hello
document.createTextNode()
Takes a string as input text and returns a World!”);
text node with the input text. newPara.appendChild(newText);
document.body.appendChild(newPara);
}
</script>
</head>
<body onload=“addPara()”>
</body>
//Changes the content of the div to “Hello World!”
<div id=“div1”>
<p>Hello</p>
<p>Hello</p>
A method of the DOM that takes an ID </div>
document.getElementByID() value parameter and returns an element
that matches the id. <script>
document.getElementById(“div1”).innerHTML = “<p>Hello
World!</p>”;
</script>
A method of the DOM that takes a tag name
//Gets an array of all elements in a document with the
document.getElementsByTagName()
parameter and returns an array called <p> tag.
“NodeList” that contains elements with the var tagNameArray = document.getElementsByTagName(“p”);
specified tag name.
Writes HTML or JavaScript to a document.
document.write()
Note that it overwrites any other text in the //Writes “Hello World” to the output stream.
document so is mostly used for testing document.write(“Hello World”);
purposes only.
//Removes the CSS style color blue
Returns the value of the specified attribute. <div id="div1" style="color: blue"></div>
<script>
element.getAttribute() Takes one parameter: the attribute name var div1 =
whose value is to be returned. document.getelementById("div1").getAttribute(“style”);
</script>
//Changes the content of the div to “Hello World!”
<div id=“div1”>
<p>Hello</p>
<p>Hello</p>
A property of the Element class that </div>
element.innerHTML() returns or alters contents of an HTML
element as a text string. <script>
document.getElementById(“div1”).innerHTML = “<p>Hello
World!</p>”;
</script>
A property of the Element class that //Removes the CSS style color blue
removes all previously set inline CSS styles <div id="div1" style="color: blue"></div>
<script>
element.removeAttribute() for a particular element. Takes one var div1 =
parameter: the attribute name that is being document.getelementById("div1").getAttribute(“style”);
removed. </script>
A property of the Element class that
overwrites all previously set inline CSS //In all elements named “theImage” sets the name of all
element.setAttribute()
styles for a particular element. Takes two src attributes to “another.gif”
parameters: the attribute name that is document.getElementById(“theImage”).setAttribute(“src”,
“another.gif”);
being set and the attribute value the
attribute is set to.
//Changes the CSS style color from blue to red
A property of the Element class that <div id="div1" style="color: blue"></div>
<script>
element.style() returns or alters inline CSS. Syntax is var div1 = document.getelementById("div1");
element.style.propertyName = value div1.style.color = "red";
</script>
Instance creates two properties about the
error: message that contains description of
//Catch statement defines a block of code to be
the error and the name property identifies executed if an error occurs in the try block.
the type of error. Generic error plus 6 other catch (err) {
Error Objects
core errors: TypeError, RangeError, document.getElementById(“myfile”).innerHTML =
URIError, EvalError, ReferenceError, err.name;
}
SyntaxError. //Creates custom error message
Error object can be extended to create throw new Error(“Only values 1-10 are permitted”);
custom error messages using the throw
keyword.
The history object is part of the window
object and contains the URLs visited by the
user within a browser window. It exposes //Go back two pages if the history exists in the
History Objects useful methods and properties that let you history list.
navigate back and forth through the user's history.go(-2);
history and manipulate the contents of the
history stack.
An HTML DOM method that, after creating //Creates a new <li> element and places it in the
an element, places a child element in the elementList before the first child of <ul>
let newLI = document.createElement("li");
insertBefore()
appropriate location before an existing newLI.innerText = "new Element";
child. The method takes two parameters, let elementList = document.getElementById("thisList");
the node object to be inserted and the elementList.insertBefore(newLI,
existing node to insert before. elementList.childNodes[0]);
The location object is part of the window //Returns the hostname property
Location Objects object and contains information about the let myhost = location.hostname;
current URL. newLI.innerText = "new Element";
The navigator object is part of the window
object class in the DOM that represents the
Navigator Objects
client Internet browser, also called the user //Retrieves the name of the browser
agent. There is no standard for this object var browsername = navigator.appName;
so what it returns differs from browser to
browser.
//Executes myFunction after MyHTMLPage has been loaded
onload()
A DOM event that starts a method when a document.getElementById(“MyHTMLPage”).onload = function
page is loaded. () {myFunction};
//Creates a new node and replaces the second element in
“thisList” with the word “blue”
let secondBullet = document.createTextNode(“blue”);
replaceChild()
After creating an element, this function var myList =
replaces a child node with a new node. document.getElementById(“thisList”).childNodes[1];
myList.replaceChild(secondBullet,
myList.childNodes[1]);
The screen object is part of the window //Returns the height and width of the user’s screen
Screen Objects object class in the DOM that can be used to var height=screen.height;
return properties about the user’s screen. var width=screen.width;
Window Objects The DOM window object is at the top of the //Opens a new browser window with the specified URL
window.open(“http://www.w3schools.com”);
DOM hierarchy and serves as the global
object. Everything in the DOM takes place
in a window. The window object controls
the environment that contains the
document.
Opens a new window. The first parameter
is a path, a URL, or an empty string, and
optional parameters include the window
name, features such as the placement of
the window or the dimensions, and a
Boolean replace value. The feature //Opens a new window that opens the IBM home page and
has a width of 600 and a height of 800)
window.open() parameter is a comma separated string of let thisWindow = window.open(“http://www.ibm.com”,
name-value pairs and the replace “myWindow”, “width”=600, “height”=800);
parameter is an optional Boolean. This
parameter has been deprecated so modern
browsers may not support it. This method
returns a reference to the new window
object.
Scrolls to a particular place in a window.
//Scrolls the window to the pixel located at the
window.scrollTo()
Parameters include the x-coordinate which coordinate (20, 200)
is the left-most pixel and the y-coordinate window.scrollTo(20, 200);
which is the upper-most pixel.
//Enables the use of properties and methods of the
Primitive types can be converted to objects String class such as the property n.length
let n = new String (“abc”);
using wrapper objects. They are the same
Wrapper Objects
name as the primitive except they start //Returns string
with uppercase letter. The typeof keyword typeof “abc”;
returns a string indicating the data type of
the operand. //Returns object
typeof new String(“abc”);
