📌  相关文章
📜  JavaScript 国际完整参考(1)

📅  最后修改于: 2023-12-03 15:01:42.166000             🧑  作者: Mango

JavaScript 国际完整参考

JavaScript 是一门广泛使用的脚本语言，主要用于在 Web 浏览器中为网页增加交互功能。本文档为 JavaScript 的国际完整参考，涵盖了语言本身、DOM、BOM、异步操作、动画效果等方面的内容。

语言基础

JavaScript 是一门面向对象的脚本语言，在语言基础方面，主要包括数据类型、运算符、控制语句、函数等方面。

  • 数据类型：

JavaScript 的数据类型包括基础数据类型和引用数据类型，基础数据类型包括：Number、String、Boolean、Undefined 和 null，引用数据类型包括：Object、Array、Function 等。

  • 运算符：

JavaScript 的运算符主要包括算术运算符、关系运算符、逻辑运算符等。

  • 控制语句：

JavaScript 的控制语句包括条件语句、循环语句、跳转语句等。

  • 函数：

JavaScript 是一门函数式编程语言，函数是它的核心部分。JavaScript 的函数包括函数声明、函数表达式、匿名函数等。

DOM

DOM（文档对象模型）是指将 HTML 或 XML 文档看作一个树形结构，通过 DOM 可以对这个结构进行访问、添加、删除、修改等操作。JavaScript 操作 DOM 是非常常见的任务，主要涉及到节点的增删改查等操作。

  • 节点操作：

可以通过 JavaScript 操作 DOM 节点进行增删改查等操作。DOM 的节点分为元素节点、文本节点、属性节点等等。 

// 创建元素节点
var newElement = document.createElement("div");
// 为元素节点设置属性
newElement.setAttribute("class", "box");
// 为元素节点添加子节点
var textNode = document.createTextNode("hello world");
newElement.appendChild(textNode);
// 将元素节点添加到文档中
document.body.appendChild(newElement);
  • 遍历 DOM：

通过遍历 DOM，可以查找、遍历、修改 DOM 树中的节点。常见的方法有：querySelector、querySelectorAll、getElementById 等。

// 通过 id 查找并修改元素的样式
var element = document.getElementById("myElement");
element.style.color = "red";
BOM

BOM（浏览器对象模型）是指浏览器提供的与浏览器窗口相关的对象模型，包括对浏览器窗口和框架以及浏览器窗口中显示的文档进行访问的方法和接口。

  • 窗口操作：

可以通过 BOM 操作窗口进行打开、关闭、刷新等操作。常见的方法有：window.open、window.close、window.location 等。

  • 计时器操作：

通过计时器可以延时执行某个任务，或者周期性的执行某个任务。常见的方法有：setTimeout、setInterval。

// 延时 2s 执行函数
setTimeout(function() {
  alert("2s passed!");
}, 2000);

// 每隔 2s 循环执行函数
setInterval(function() {
  alert("2s passed!");
}, 2000);
异步操作

JavaScript 是一门单线程语言，但是它支持异步执行某些任务，可以在执行某个任务时，不会影响到后面的任务继续执行。常见的异步操作有：Ajax、事件处理、Promise、async 和 await 等。

  • Ajax：

Ajax 是一种在页面不刷新的情况下，通过 JavaScript 发送 HTTP 请求，获取数据并更新页面的技术。常见的库有 jQuery、axios 等。

// 使用 axios 发送 GET 请求
axios.get('/api/user?userId=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
  • 事件处理：

事件处理是一种异步操作，可以在用户交互或者浏览器事件触发的时候，执行某个任务。常见的事件有 click、hover、scroll 等。

// 监听按钮点击事件
document.getElementById("myButton").addEventListener("click", function() {
  // 执行某个任务
});
  • Promise：

Promise 是一种封装异步操作的对象，它可以让异步操作更加优雅。常见的方法有 resolve、reject、then、catch 等。

// 创建 Promise 对象
var promise = new Promise(function(resolve, reject) {
  // 执行异步操作
  setTimeout(function() {
    // 异步操作结束后执行 resolve
    resolve("done!");
  }, 1000);
});

// 调用 Promise 对象的 then 方法获取异步操作的返回值
promise.then(function(value) {
  console.log(value);  // 输出 "done!"
});
  • async 和 await：

async 和 await 是 ES6 引入的一种简化异步代码的语法糖。通过 async 和 await，可以让异步操作更加直观明了。

// 使用 async 和 await 简化异步代码
async function getData() {
  try {
    var response = await axios.get('/api/user?userId=12345');
    console.log(response);
  } catch (error) {
    console.log(error);
  }
}
动画效果

JavaScript 可以用来实现各种动画效果，常见的动画包括：淡入淡出效果、缓动效果、转场动画等。

  • 淡入淡出效果：

通过 JavaScript 操作元素的透明度，可以实现淡入淡出效果。

// 淡入淡出效果
function fadeIn(element) {
  element.style.opacity = 0;
  var timer = setInterval(function() {
    var value = parseFloat(element.style.opacity);
    if (value >= 1) {
      clearInterval(timer);
    } else {
      element.style.opacity = value + 0.1;
    }
  }, 100);
}

function fadeOut(element) {
  element.style.opacity = 1;
  var timer = setInterval(function() {
    var value = parseFloat(element.style.opacity);
    if (value <= 0) {
      clearInterval(timer);
    } else {
      element.style.opacity = value - 0.1;
    }
  }, 100);
}
  • 缓动效果：

通过 JavaScript 操作元素的位置、大小、颜色等属性，可以实现缓动效果。

// 缓动效果
function animate(element, target) {
  clearInterval(element.timer);
  element.timer = setInterval(function() {
    var current = parseInt(element.style.left || 0, 10); // 当前位置
    var step = (target - current) / 10;  // 步长
    step = step > 0 ? Math.ceil(step) : Math.floor(step);  // 向上取整或向下取整
    element.style.left = current + step + "px";
    if (current === target) {
      clearInterval(element.timer);
    }
  }, 10);
}

animate(document.getElementById("myElement"), 300);
参考资料