JS中只会使用console.log()？你out了

JavaScript 作为一门高级编程语言，拥有非常丰富的功能和 API，除了基础语法和变量、函数的使用外，还有很多功能可以实现。

关于用 console.log()，它通常是作为调试工具使用的，输出一些变量或者数据等信息，而不是用来交互的。

下面就是一些 JS 中的用途和功能：

1. DOM 操作

JS 可以通过 DOM（文档对象模型）来操作网页中的 HTML。例如，获取一个元素：

let element = document.querySelector('#id');

或者修改一个元素的样式：

element.style.color = 'red';

2. 事件处理

JS 能够响应用户操作，对于用户的行为做出反应。例如，通过监听鼠标事件来实现拖拽效果：

let element = document.querySelector('#id');

element.addEventListener('mousedown', function(e) {
  let x = e.clientX;
  let y = e.clientY;
  let deltaX, deltaY;

  function onMousemove(e) {
    deltaX = e.clientX - x;
    deltaY = e.clientY - y;

    element.style.top = element.offsetTop + deltaY + 'px';
    element.style.left = element.offsetLeft + deltaX + 'px';

    x = e.clientX;
    y = e.clientY;
  }

  document.addEventListener('mousemove', onMousemove);
  document.addEventListener('mouseup', function() {
    document.removeEventListener('mousemove', onMousemove);
  });
});

3. AJAX

JS 可以发送异步请求，来与服务器端进行数据交互。通过 AJAX（异步 JavaScript 和 XML），可以获取服务器返回的数据，并进行相应的操作。

let xhr = new XMLHttpRequest();

xhr.open('GET', '/path/to/api');
xhr.send();

xhr.onload = function() {
  if (xhr.status === 200) {
    let data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};

4. 动画效果

JS 可以通过改变元素的属性来实现动画效果。首先通过 requestAnimationFrame 来循环执行更新元素的属性，例如位置、透明度等：

function animate(time) {
  element.style.left = time / 10 + 'px';
  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

5. Canvas 画图

JS 也可以通过 Canvas 画出各种绚丽的图案和动画效果。

let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.arc(50, 50, 20, 0, 2 * Math.PI);
ctx.fillStyle = 'blue';
ctx.fill();

以上只是一些 JS 中常见的用途和功能，还有很多其他的应用场景，例如使用 JS 扩展浏览器的功能，创建复杂的数据结构等等。