Jump to content

JavaScript Programming/DOM and BOM/Example Code

From Wikiversity

example.html

[edit | edit source]
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="Cache-Control"content="no-cache"><title>Example</title><style>body{font-family:Arial,Helvetica,sans-serif;}</style><p>View the Console for JavaScript output.</p><scriptdefersrc="example.js"></script></head><body><noscript>Enable JavaScript to see web page content.</noscript></body></html>

example.js

[edit | edit source]
// This program displays DOM and BOM properties.//// References:// https://en.wikibooks.org/wiki/JavaScript"use strict";window.addEventListener("load",function(){displayElements("*");console.log("");displayChildNodes(document,0)console.log("");displayWindow();console.log("");displayScreen();console.log("")displayNavigator();console.log("");displayLocation();});functiondisplayElements(tag){letelements=document.getElementsByTagName(tag);for(leti=0;i<elements.length;i++){letelement=elements[i];console.log(element.tagName);}}functiondisplayChildNodes(node,level){console.log(`${" ".repeat(level*4)}${node.nodeName}`)for(leti=0;i<node.childNodes.length;i++){displayChildNodes(node.childNodes[i],level+1);}}functiondisplayWindow(){console.log(`window.innerWidth: ${window.innerWidth}`);console.log(`window.innerHeight: ${window.innerHeight}`);}functiondisplayScreen(){console.log(`screen.width: ${screen.width}`);console.log(`screen.height: ${screen.height}`);}functiondisplayNavigator(){console.log(`navigator.platform: ${navigator.platform}`);console.log(`navigator.userAgent: ${navigator.userAgent}`);}functiondisplayLocation(){console.log(`location.hostname: ${location.hostname}`);console.log(`location.href: ${location.href}`);}
close