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 = [Link](“p”);
an element, you can use this function to var newText = [Link](“Hello
appendChild() place the element in the appropriate World!”);
location within the document. The element [Link](newText);
[Link](newPara);
to append is the only parameter. }
</script>
</head>
<body > </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 = [Link](“p”);
an element with that name. Can place the var newText = [Link](“Hello
[Link]() element elsewhere on the page using World!”);
functions like insertBefore(), [Link](newText);
[Link](newPara);
appendChild(), replaceChild(). }
</script>
</head>
<body > </body>
//Creates the element <p> and text “Hello World”.
Appends Hello World <p> to the HTML document.
<head>
<script>
function addPara() {
var newPara = [Link](“p”);
var newText = [Link](“Hello
[Link]()
Takes a string as input text and returns a World!”);
text node with the input text. [Link](newText);
[Link](newPara);
}
</script>
</head>
<body > </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>
[Link]() value parameter and returns an element
that matches the id. <script>
[Link](“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
[Link]()
parameter and returns an array called <p> tag.
“NodeList” that contains elements with the var tagNameArray = [Link](“p”);
specified tag name.
Writes HTML or JavaScript to a document.
[Link]()
Note that it overwrites any other text in the //Writes “Hello World” to the output stream.
document so is mostly used for testing [Link](“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>
[Link]() Takes one parameter: the attribute name var div1 =
whose value is to be returned. [Link]("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>
[Link]() returns or alters contents of an HTML
element as a text string. <script>
[Link](“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>
[Link]() for a particular element. Takes one var div1 =
parameter: the attribute name that is being [Link]("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
[Link]()
styles for a particular element. Takes two src attributes to “[Link]”
parameters: the attribute name that is [Link](“theImage”).setAttribute(“src”,
“[Link]”);
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>
[Link]() returns or alters inline CSS. Syntax is var div1 = [Link]("div1");
[Link] = value [Link] = "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, [Link](“myfile”).innerHTML =
URIError, EvalError, ReferenceError, [Link];
}
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 [Link](-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 = [Link]("li");
insertBefore()
appropriate location before an existing [Link] = "new Element";
child. The method takes two parameters, let elementList = [Link]("thisList");
the node object to be inserted and the [Link](newLI,
existing node to insert before. [Link][0]);
The location object is part of the window //Returns the hostname property
Location Objects object and contains information about the let myhost = [Link];
current URL. [Link] = "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 = [Link];
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 [Link](“MyHTMLPage”). > page is loaded. () {myFunction};
//Creates a new node and replaces the second element in
“thisList” with the word “blue”
let secondBullet = [Link](“blue”);
replaceChild()
After creating an element, this function var myList =
replaces a child node with a new node. [Link](“thisList”).childNodes[1];
[Link](secondBullet,
[Link][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=[Link];
return properties about the user’s screen. var width=[Link];
Window Objects The DOM window object is at the top of the //Opens a new browser window with the specified URL
[Link](“[Link]
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)
[Link]() parameter is a comma separated string of let thisWindow = [Link](“[Link]
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
[Link]()
Parameters include the x-coordinate which coordinate (20, 200)
is the left-most pixel and the y-coordinate [Link](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 [Link]
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”);
