JavaScript Tutorial
indexjavascript history javascript versions environment setup variables and data typesOperatorsstrings and numbers programming constructs arrays built in objects functions objects call apply bind closures error handling debugging CallbacksJS in Browser
BOM and DOMBrowser EventsWeb APIAjaxJQueryMost popular librariesAdvanced
prototypes Object Oriented ProgrammingModulesAsynchronous programmingBinary DataInternationalizationreactangularjsProjectsMiscellaneous
typescriptJS ecosystemChrome dev toolstesting frameworksInterview questions and AnswersBOM and DOM in browser
BOM
BOM stands for browser object model. Here is the list of objects in Browser Object Model.- window - viewport window
- screen - Device screen
- location
- history
- navigator
- alert
- cookie, localStorage, sessionStorage, Indexed DB
window Object in BOM
If you try to execute the plain JavaScript file just by double clicking in windows platform, you will get errors saying "alert is undefined" or "window is undefined" or "console is undefined". So you will have to run the JavaScript code within browser only.
//To show the alert box, you can use below method.
alert('hi')
//To get the input from user, you can use below code.
var name = prompt("Please enter your name")
/*
To display "OK" and "Cancel" Button, you can use "confirm" method
as shown in below example.
*/
var ret = confirm("Choose your option")
if (ret == true){
alert("You clicked OK")
}else{
alert("You clicked Cancel")
}
//To get the width and height of window, you can use below code.
console.log("Window height -> " + window.innerHeight)
console.log("Window width -> " + window.innerWidth)
//To open pop up window with specific URL, you can use below code.
//You can also move, resize and close pop up window.
var w = window.open("http://www.softpost.org","", "width=300,height=300")
w.moveTo(111,111)
w.resizeTo(444,444)
w.close()
//You can create new windows using open() method.
var newwindow = window.open();
newwindow .document.open();
newwindow .document.write("This will be put in the document in new window");
newwindow .document.close();
//To close the window, you can use close() method.
screen object
You can get screen width and height using below code.
console.log("Screen height - " + screen.height)
console.log("Screen width - " + screen.width)
location object
You can use location object to change the current page displayed within window.
console.log("Current url in the window - " + window.location.href)
console.log("Current domain in the window -" + window.location.hostname)
console.log("Current path in the window - " + window.location.pathname)
console.log("Protocol of the current url in the window - " + window.location.protocol)
window.location.assign("http://www.softpost.org")
window.location = "http://www.softpost.org"
history object
history object can be used to navigate back and forward.
window.history.back()
window.history.forward()
console.log("Total number of urls in the history - " & window.history.length)
navigator object
You can use navigator object to get the details of user agent.
console.log("User agent is -> " + window.navigator.userAgent)
setInterval, setTimeout and clearInterval
window object provides these methods which can be used to call the specific function after specific time and also in repeating manner.Storing data in browser
By default, cookies are disabled for local files. So ensure that you must set the cookie through http protocol only.
document.cookie = "location=toowong";
console.log("Cookie is - " + document.cookie);
Traditionally, we have been using cookies to store the data on browser. But there are 2 modern ways to store data.- sessionStorage - data is wiped out as soon as browser tab is closed
- localStorage - data persists even after closing and reopening the tab. Storage limit is higher as compared to sessionStorage
DOM
DOM stands for document object model. Here is the list of objects in Document Object Model.- document
- document.body
- document.anchors
- document.documentElement
- document.forms
- document.head
- document.images
- document.links
- document.scripts
- document.title
- node
document object
Important methods of document object are given below.- document.getElementById - This method will return the element with given id
- document.getElementsByTagName - This method will return all elements with given tag name.
- document.getElementsByClassName - This method will return all elements with given class name.
- document.querySelectorAll - This method will return first element with given CSS selector.
- document.querySelectorAll - This method will return all elements with given CSS selector.
//Below example prints the count of "table" tags.
console.log (document.getElementsByTagName("table").length)
//Below example prints the innerHTML of the first "table" .
console.log (document.getElementsByTagName("table")[0].innerHTML)
Manipulating HTML elements using JavaScript
As explained at HTMLElement , HTMLElement inherits from Element, Node, and EventTarget interfaces. To update the html of the element, you can use below line of code. All other html elements inherit from HTMLElement interface. e.g. HTMLInputElement inherits from HTMLElement.- element.innerHTML - This is used to get or set the innerHTML of the element.
- element.attribute - This is used to get or set the value of the attribute.
- element.setAttribute(attribute, value) - This is used to set the attribute value.
//In below example, we are updating the innerHTML of the element with id - myid.
document.getElementById("myid").innerHTML = "<p>
//This paragraph is added dynamically inside element with name - myid </p>";
//In below example, we are updating the src attribute of the element with id - logo.
document.getElementById("logo").src = "abc.png";
//In below example, we are updating the color style of the element with id - myid.
document.getElementById("myid").style.color = "red";
Web development and Automation testing
solutions delivered!!