什么是 JavaScript？——WEB开发系列41

原创

一条晒干的咸魚 2024-10-01 22:24:01 博主文章分类：WEB前端 ©著作权

文章标签 JavaScript web前端 HTML 网页百度 文章分类 JavaScript 前端开发 技术人为什么要写博客？

©著作权归作者所有：来自51CTO博客作者一条晒干的咸魚的原创作品，如需转载，请与作者联系，否则将追究法律责任

JavaScript 被称为网页的“动态引擎”，是与 HTML 和 CSS 并列的三大前端技术之一。HTML 负责网页的内容结构，CSS 负责外观样式，而 JavaScript 则主要用于实现网页的交互性与动态功能。JavaScript 是一种轻量级的解释型编程语言，用于为网页添加动态行为，如用户交互、表单验证、数据处理、动画效果等。

什么是 JavaScript？——WEB开发系列41_HTML

一、JavaScript 的高层定义

JavaScript 是一种基于对象、事件驱动的脚本语言，最初由 Netscape 公司开发。虽然它的名字与 Java 相似，但两者实际上毫无关系。JavaScript 的设计目标是让网页具备动态交互能力，例如处理用户输入、修改页面内容、响应用户行为等。

JavaScript 有以下几个显著特点：

解释执行：JavaScript 代码不需要预编译，直接由浏览器的 JavaScript 引擎解释执行。
弱类型语言：不像 Java 或 C++，JavaScript 不需要显式声明变量类型。
基于对象：JavaScript 使用对象来组织代码与数据，几乎所有东西都是对象。
跨平台：JavaScript 在不同浏览器和操作系统之间有很好的兼容性。

二、简单文本标签的示例：加点 CSS 和 JavaScript

下面通过一个简单例子来展示 HTML、CSS 和 JavaScript 如何协同工作。假设有一个页面，包含一个文本标签 <p>，通过 CSS 美化它，并使用 JavaScript 让它在点击时发生变化。

HTML 结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript 示例</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p id="text">点击我改变颜色和内容</p>
  <script src="script.js"></script>
</body>
</html>

CSS（styles.css）

#text {
  font-size: 20px;
  color: blue;
  text-align: center;
  padding: 20px;
  border: 2px solid black;
  cursor: pointer;
}

JavaScript（script.js）

document.getElementById('text').addEventListener('click', function() {
  this.style.color = 'red';
  this.innerHTML = '你已经点击了这个文本！';
});

当你点击页面中的这段文本时，它的颜色会从蓝色变为红色，且文本内容会更新为“你已经点击了这个文本！”，这就是 JavaScript 带来的动态效果。

什么是 JavaScript？——WEB开发系列41_网页_02

HTML 部分：我们在页面上放置了一个 <p> 元素，并给它设置了 id="text"，方便后续在 JavaScript 中引用。

CSS 部分：我们通过 CSS 给文本设置了字体大小、颜色、居中对齐以及边框等样式。

JavaScript 部分：通过 addEventListener 方法，我们让该文本在点击时改变文字颜色并更新文本内容。

三、JavaScript 到底可以做什么？

动态内容更新

JavaScript 可以根据用户的行为实时更新页面内容，而无需刷新整个页面。例如，在用户输入时，网页可以自动显示搜索建议，或在用户滚动页面时加载更多的内容。

搜索建议：当用户输入时，实时显示相关的搜索建议。

// 动态显示搜索建议
var input = document.getElementById('search');
input.addEventListener('input', function() {
  var suggestions = ['apple', 'banana', 'orange'];
  var match = suggestions.filter(s => s.startsWith(input.value));
  document.getElementById('suggestions').innerText = match.join(', ');
});

动态加载更多内容：当用户滚动到页面底部时，自动加载更多数据。

window.addEventListener('scroll', function() {
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
    loadMoreContent();  // 模拟加载更多内容的函数
  }
});

事件处理

JavaScript 允许开发者监听和处理用户的各种操作，比如点击按钮、输入文本、移动鼠标等。这种能力使得网页的交互性大大增强，用户体验更加流畅。

按钮点击事件：用户点击按钮时，改变页面的某些元素。

document.getElementById('myButton').addEventListener('click', function() {
  document.getElementById('myText').innerText = '按钮已点击！';
});

键盘输入事件：用户输入时，动态显示输入的内容。

document.getElementById('myInput').addEventListener('keyup', function(event) {
  document.getElementById('displayText').innerText = event.target.value;
});

动画效果

JavaScript 通过操控 HTML 元素的样式或利用动画库，可以实现丰富的动画效果。这些动画通常用于提升页面的视觉效果和用户的沉浸感。

基本动画：改变元素的位置，模拟元素的移动效果。

var elem = document.getElementById("animate");
var pos = 0;
function move() {
  if (pos < 350) {
    pos++;
    elem.style.top = pos + 'px';
    elem.style.left = pos + 'px';
    requestAnimationFrame(move);
  }
}
move();

淡入淡出效果：通过逐渐改变透明度实现淡入淡出的视觉效果。

function fadeOut(element) {
  var op = 1;  // 初始不透明度
  var timer = setInterval(function () {
    if (op <= 0.1) {
      clearInterval(timer);
      element.style.display = 'none';
    }
    element.style.opacity = op;
    op -= 0.1;
  }, 50);
}

表单验证

表单验证是确保用户提交的输入数据符合要求的重要环节。JavaScript 可以在前端对表单数据进行预验证，减少用户提交无效数据到服务器的几率，提升用户体验和服务器的安全性。

电子邮件验证：验证用户输入的邮箱是否符合标准格式。

function validateEmail() {
  var email = document.getElementById('email').value;
  var regex = /\S+@\S+\.\S+/;
  if (!regex.test(email)) {
    alert('请输入有效的邮箱地址');
  }
}

密码强度验证：检查密码是否满足特定条件，比如长度、字符种类等。

function validatePassword() {
  var password = document.getElementById('password').value;
  if (password.length < 8) {
    alert('密码长度至少为8位');
  }
}

与服务器通信

JavaScript 可以通过 AJAX 或 Fetch API 实现与服务器的异步通信，这使得网页可以在不刷新页面的情况下从服务器获取数据或将数据发送到服务器。

AJAX 示例：利用 XMLHttpRequest 获取数据。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    document.getElementById('data').innerText = xhr.responseText;
  }
};
xhr.send();

Fetch API 示例：更现代的异步数据请求方式。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    document.getElementById('data').innerText = JSON.stringify(data);
  })
  .catch(error => console.error('Error:', error));

单页应用开发

JavaScript 支持开发单页应用（SPA），这种应用在用户浏览页面时无需每次都向服务器请求整个页面，只需更新部分内容。常用的 SPA 框架包括 React、Vue 和 Angular。

简单的 SPA 路由示例：基于 URL 片段加载不同的页面内容。

window.addEventListener('hashchange', function() {
  var page = location.hash.substr(1);
  loadPage(page);
});

function loadPage(page) {
  document.getElementById('content').innerText = '当前页面是：' + page;
}

数据可视化

JavaScript 通过数据可视化库如 D3.js 或 Chart.js，可以帮助开发者创建互动性强的图表，展示数据趋势或模式。

简单的条形图：

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)']
    }]
  }
});

移动应用开发

借助框架如 React Native 和 Cordova，JavaScript 也可以用于开发跨平台的移动应用程序。这种技术允许开发者用同样的代码构建 Android 和 iOS 应用。

React Native 示例：使用 JavaScript 构建一个简单的移动应用界面。

import React from 'react';
import { Text, View } from 'react-native';

const App = () => {
  return (
    <View>
      <Text>你好，React Native！</Text>
    </View>
  );
}

export default App;

机器学习

JavaScript 甚至还可以用于机器学习，尤其是 TensorFlow.js 的推出，允许开发者直接在浏览器中训练和运行机器学习模型。

简单的 TensorFlow.js 示例：

const model = tf.sequential();
model.add(tf.layers.dense({units: 1, inputShape: [1]}));
model.compile({loss: 'meanSquaredError', optimizer: 'sgd'});

const xs = tf.tensor2d([1, 2, 3, 4], [4, 1]);
const ys = tf.tensor2d([1, 3, 5, 7], [4, 1]);

model.fit(xs, ys, {epochs: 250}).then(() => {
  model.predict(tf.tensor2d([5], [1, 1])).print();
});

四、浏览器中 JavaScript 的执行机制

JavaScript 在浏览器中是如何执行的呢？这是理解 JavaScript 运行方式的关键。

浏览器安全

浏览器为 JavaScript 提供了沙盒环境，即 JavaScript 无法访问本地文件系统或其他系统资源，这样可以保证用户的安全。同时，浏览器还有同源策略，即 JavaScript 只能与同一来源（相同域名、协议和端口）的资源进行交互，以防止跨站脚本攻击（XSS）。

JavaScript 运行次序

在浏览器中，JavaScript 的执行是单线程的，也就是说，它只能一次执行一个任务。如果一个任务执行时间过长，会阻塞后续代码的执行。这就是为什么我们通常将一些耗时操作放在异步任务（如 setTimeout、fetch）中，以便不影响用户的体验。

解释代码 vs 编译代码

JavaScript 是解释型语言，代码会逐行被浏览器的 JavaScript 引擎（如 V8、SpiderMonkey）解释并执行，而非像 Java 或 C++ 这样的编译型语言。虽然有一些优化机制，如 JIT（即时编译），但 JavaScript 本质上仍然是一种解释执行的语言。

服务器端代码 vs 客户端代码

JavaScript 最初只在客户端（浏览器）中执行，但随着技术的发展，Node.js 的出现使得 JavaScript 可以在服务器端运行，这让开发者能够用同一种语言来编写前端和后端代码。

动态代码 vs 静态代码

JavaScript 是一种动态语言，它允许在运行时修改代码结构。例如，函数可以在程序运行时被重新定义，甚至可以生成新的函数。这为 JavaScript 提供了极大的灵活性，但也使得代码的调试与维护相对复杂。

五、如何向页面添加 JavaScript？

根据使用场景，我们可以通过几种不同的方式将 JavaScript 添加到网页中。

内部 JavaScript

将 JavaScript 代码直接嵌入到 HTML 文件的 <script> 标签中。这种方式适合小型项目或简单的功能。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>内部 JavaScript 示例</title>
</head>
<body>
  <p id="demo">点击这里</p>
  <script>
    document.getElementById('demo').onclick = function() {
      alert('你点击了这段文本！');
    };
  </script>
</body>
</html>

外部 JavaScript

将 JavaScript 代码写在单独的 .js 文件中，并通过 <script> 标签的 src 属性引入。这种方式有助于代码的模块化和维护。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>外部 JavaScript 示例</title>
</head>
<body>
  <p id="demo">点击这里</p>
  <script src="script.js"></script>
</body>
</html>

外部 script.js 文件：

document.getElementById('demo').onclick = function() {
  alert('你点击了这段文本！');
};

内联 JavaScript 处理器

在 HTML 元素的属性中直接编写 JavaScript 代码，例如 onclick 事件处理器。这种方式不推荐使用，因为它与 HTML 结构耦合度较高，不利于代码的重用和维护。

<p id="demo" onclick="alert('你点击了这段文本！')">点击这里</p>

使用 addEventListener

addEventListener 是一种更现代的事件处理方法，它可以将多个事件处理函数绑定到同一个元素上。

document.getElementById('demo').addEventListener('click', function() {
  alert('你点击了这段文本！');
});

脚本加载策略

为了提升页面加载速度，我们可以通过以下几种策略优化 JavaScript 的加载：

异步加载：通过设置 <script> 标签的 async 属性，可以让脚本与 HTML 并行加载，适合不依赖其他脚本的场景。
延迟加载：通过设置 defer 属性，可以让脚本在 HTML 解析完成后再执行，适合需要等待 DOM 结构加载完成的场景。

<script src="script.js" async></script>
<script src="script.js" defer></script>

六、JavaScript 中的注释

注释是编写代码时的良好习惯，它能帮助开发者理解代码，尤其是在项目复杂或团队协作时。JavaScript 支持单行和多行注释。

单行注释

// 这是一个单行注释
console.log('Hello, world!');

多行注释

/*
  这是一个多行注释
  可以用于注释长段代码
*/
console.log('Hello, world!');

上一篇：唤醒数据中台潜力，加速数据飞轮转动：数据驱动秘籍

下一篇：如何存储你需要的信息：变量——WEB开发系列42

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯