» Quick Introduction to JavaScript » 2. Advanced » 2.7 Browser

Browser

JavaScript can run both in browsers and server-side Node.js runtimes. This section briefs about browser only capabilities of JavaScript.

Window

In JavaScript, the window object represents the global window containing the DOM (Document Object Model) of a web page.

The Window interface is home to a variety of functions, namespaces, objects, and constructors.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Window Object Example</title>
</head>
<body>

<script>
  // Accessing window properties
  const windowWidth = window.innerWidth;
  const windowHeight = window.innerHeight;

  // Opening a new window
  function openNewWindow() {
    window.open('https://www.example.com', '_blank', 'width=500,height=400');
  }

  // Displaying an alert using window
  function showAlert() {
    window.alert('Hello, this is an alert!');
  }

  // Confirming an action using window
  function showConfirmation() {
    const result = window.confirm('Do you want to proceed?');
    if (result) {
      console.log('User clicked OK.');
    } else {
      console.log('User clicked Cancel.');
    }
  }

  // Prompting user input using window
  function showPrompt() {
    const userInput = window.prompt('Please enter your name:', 'John Doe');
    if (userInput !== null) {
      console.log('User entered:', userInput);
    } else {
      console.log('User canceled the prompt.');
    }
  }
</script>

<button onclick="openNewWindow()">Open New Window</button>
<button onclick="showAlert()">Show Alert</button>
<button onclick="showConfirmation()">Show Confirmation</button>
<button onclick="showPrompt()">Show Prompt</button>

</body>
</html>

DOM

The DOM (Document Object Model) is an API that represents and interacts with any HTML or XML-based markup language document. The DOM is a document model loaded in the browser and representing the document as a node tree, or DOM tree, where each node represents part of the document.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Literank DOM Manipulation Example</title>
  <style>
    .highlight {
      color: red;
      font-weight: bold;
    }
  </style>
</head>
<body>

<!-- Original content -->
<h1>Welcome to DOM Manipulation Example</h1>
<p id="demoParagraph">This is a paragraph.</p>

<script>
  // Get a reference to the paragraph element by its ID
  const paragraphElement = document.getElementById('demoParagraph');

  // Change the text content and add a CSS class to the paragraph
  paragraphElement.textContent = 'This paragraph has been modified using JavaScript!';
  paragraphElement.classList.add('highlight');

  // Create a new element (in this case, a button)
  const newButton = document.createElement('button');
  newButton.textContent = 'Click me!';
  
  // Add a click event listener to the button
  newButton.addEventListener('click', function() {
    // Change the text content of the paragraph when the button is clicked
    paragraphElement.textContent = 'Button clicked!';
    paragraphElement.classList.remove('highlight');
  });

  // Append the new button to the body of the document
  document.body.appendChild(newButton);
</script>

</body>
</html>

Event Listeners

The EventTarget interface is implemented by objects that can receive events and may have listeners for them. Element, and its children, as well as Document and Window, are the most common event targets, but other objects can be event targets, too.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Literank Event Listeners Example</title>
  <style>
    .highlight {
      color: red;
      font-weight: bold;
    }
  </style>
</head>
<body>

<!-- Original content -->
<button id="clickButton">Click me!</button>
<p id="demoParagraph">This is a paragraph.</p>

<script>
  // Get references to HTML elements by their IDs
  const clickButton = document.getElementById('clickButton');
  const demoParagraph = document.getElementById('demoParagraph');

  // Event listener for the button click event
  clickButton.addEventListener('click', function() {
    // Change the text content and add a CSS class to the paragraph
    demoParagraph.textContent = 'Button clicked!';
    demoParagraph.classList.add('highlight');
  });

  // Event listener for mouseover event on the paragraph
  demoParagraph.addEventListener('mouseover', function() {
    // Change the background color of the paragraph on mouseover
    demoParagraph.style.backgroundColor = 'lightgray';
  });

  // Event listener for mouseout event on the paragraph
  demoParagraph.addEventListener('mouseout', function() {
    // Reset the background color of the paragraph on mouseout
    demoParagraph.style.backgroundColor = '';
  });
</script>

</body>
</html>
❮ Prev
Next ❯