作业 1 - Javascript

简介

Javascript 是一门广泛应用于 Web 开发的编程语言，可用于实现页面的交互效果、动画效果、表单验证以及前端逻辑处理等。Javascript 是一门基于事件与事件响应的脚本语言。

常见用途

网页交互效果

通过 Javascript ，可以为网页添加各种各样的交互效果，如按钮点击、页面滚动、弹出框等。例如，下面的代码可以实现一个 click 函数，当用户点击按钮时，会改变页面背景颜色。

document.querySelector('button').addEventListener('click', function() {
  document.querySelector('body').style.backgroundColor = 'red';
});

动画效果

通过 Javascript ，可以为网页添加各种动画效果，如图片轮播、菜单展开、滚动视差等。例如，下面的代码使用 jQuery 库实现了一个简单的图片轮播效果。

$(function() {
  var currentIndex = 0;
  var delay = 3000;
  var $imgs = $('.carousel img');
  setInterval(function() {
    $imgs.eq(currentIndex).removeClass('active');
    currentIndex = (currentIndex + 1) % $imgs.length;
    $imgs.eq(currentIndex).addClass('active');
  }, delay);
});

表单验证

通过 Javascript ，可以实现对用户提交的表单进行验证，确保输入的数据符合要求。例如，下面的代码实现了一个简单的表单验证，当用户输入的用户名和密码都不为空时，才会提交表单。

document.querySelector('form').addEventListener('submit', function(event) {
  var username = document.querySelector('input[name="username"]').value.trim();
  var password = document.querySelector('input[name="password"]').value.trim();
  if (!username || !password) {
    event.preventDefault();
  }
});

前端逻辑处理

通过 Javascript ，可以实现应用程序的前端逻辑处理。例如，使用 Vue.js 框架，可以实现一个简单的 TodoList 应用，如下所示。

new Vue({
  el: '#app',
  data: {
    todos: [],
    newTodo: ''
  },
  methods: {
    addTodo: function() {
      if (this.newTodo !== '') {
        this.todos.push(this.newTodo);
        this.newTodo = '';
      }
    },
    removeTodo: function(index) {
      this.todos.splice(index, 1);
    }
  }
});

发展历史

Javascript 于 1995 年由 Brendan Eich 在 Netscape 公司创造，最初名为 LiveScript ，后来改名为Javascript ，目的是为了让网页开发者可以通过脚本语言来开发动态网页，而无需使用复杂的 CGI 程序。随着 Web 前端技术的不断发展，Javascript 也不断发展壮大，现如今已经成为一门广泛使用的编程语言。

总结

Javascript 是一门广泛应用于 Web 开发的编程语言，可用于实现页面的交互效果、动画效果、表单验证以及前端逻辑处理等。通过 Javascript ，可以实现丰富多彩的网页应用程序，是 Web 前端开发的必备技能之一。