浏览器

JavaScript 可以在浏览器和服务端的 Node.js 运行时中运行。本节简要介绍了 JavaScript 在浏览器中的能力。

Window

在 JavaScript 中，window 对象表示包含网页 DOM（文档对象模型）的全局窗口。

Window 接口拥有各种函数、命名空间、对象和构造函数。

<!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>
  // 访问 window 属性
  const windowWidth = window.innerWidth;
  const windowHeight = window.innerHeight;

  // 打开一个新窗口
  function openNewWindow() {
    window.open('https://www.example.com', '_blank', 'width=500,height=400');
  }

  // 使用 window 显示警告
  function showAlert() {
    window.alert('Hello, this is an alert!');
  }

  // 使用 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.');
    }
  }

  // 使用 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

DOM（文档对象模型）是一套用于表示并与基于 HTML 或 XML 的标记语言文档交互的 API，。

DOM 是在浏览器中加载的文档模型，将文档表示为节点树或 DOM 树，其中每个节点表示文档的一部分。

<!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>

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

<script>
  // 通过其 ID 获取对段落元素的引用
  const paragraphElement = document.getElementById('demoParagraph');

  // 更改文本内容并向段落添加 CSS 类
  paragraphElement.textContent = 'This paragraph has been modified using JavaScript!';
  paragraphElement.classList.add('highlight');

  // 创建一个新元素（按钮）
  const newButton = document.createElement('button');
  newButton.textContent = 'Click me!';
  
  // 向按钮添加点击事件监听器
  newButton.addEventListener('click', function() {
    // 单击按钮时更改段落的文本内容
    paragraphElement.textContent = 'Button clicked!';
    paragraphElement.classList.remove('highlight');
  });

  // 将新按钮附加到文档的 body 中
  document.body.appendChild(newButton);
</script>

</body>
</html>

事件监听器

EventTarget 接口由可以接收事件并可对其进行监听的对象实现。 Element 及其子级，以及 Document 和 Window 都是最常见的事件目标。其他普通文档对象也可以当事件目标。

<!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>

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

<script>
  // 通过其 ID 获取对 HTML 元素的引用
  const clickButton = document.getElementById('clickButton');
  const demoParagraph = document.getElementById('demoParagraph');

  // 按钮点击事件的事件监听器
  clickButton.addEventListener('click', function() {
    // 更改文本内容并向段落添加 CSS 类
    demoParagraph.textContent = 'Button clicked!';
    demoParagraph.classList.add('highlight');
  });

  // 段落上的 mouseover 事件的事件监听器
  demoParagraph.addEventListener('mouseover', function() {
    // 鼠标悬停时更改段落的背景颜色
    demoParagraph.style.backgroundColor = 'lightgray';
  });

  // 段落上的 mouseout 事件的事件监听器
  demoParagraph.addEventListener('mouseout', function() {
    // 鼠标移出时重置段落的背景颜色
    demoParagraph.style.backgroundColor = '';
  });
</script>

</body>
</html>

❮ 上页

下页 ❯