Scribd
Upload
3 views

Cheatsheet- JavaScript Programming for Web Applications__

This document is a cheatsheet for JavaScript programming focused on web applications, detailing various methods and properties of the HTML DOM. It includes examples for creating and manipulating elements, handling arrays, dates, and error objects, as well as working with the history, location, navigator, screen, and window objects. Each method is accompanied by a brief description and code snippets demonstrating its usage.

Uploaded by

pankaj raja
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

Cheatsheet- JavaScript Programming for Web Applications__

This document is a cheatsheet for JavaScript programming focused on web applications, detailing various methods and properties of the HTML DOM. It includes examples for creating and manipulating elements, handling arrays, dates, and error objects, as well as working with the history, location, navigator, screen, and window objects. Each method is accompanied by a brief description and code snippets demonstrating its usage.

Uploaded by

pankaj raja
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

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”);

You might also like