JavaScript 简介

JavaScript 是当今互联网上最流行的脚本语言,它最初由网景公司(Netscape)的 Brendan Eich 在1995年开发。这门语言不仅是现代Web开发的核心技术之一,还可广泛应用于服务器端开发(Node.js)、移动应用开发、桌面应用程序等多个领域。

JavaScript 的特点

  • 解释型语言:无需编译,由浏览器直接解释执行
  • 跨平台性:支持所有现代浏览器和操作系统
  • 事件驱动:基于事件响应的编程模型
  • 面向对象:支持面向对象编程(OOP)
  • 动态性:变量类型可以在运行时改变

JavaScript 的应用领域

前端开发

实现网页动态交互效果,如表单验证、动画效果、异步数据加载等

后端开发

通过Node.js构建服务器端应用程序,处理数据库操作、API开发等

移动开发

使用React Native、Ionic等框架开发跨平台移动应用

桌面应用

通过Electron等框架开发跨平台桌面应用程序

JavaScript:直接写入HTML输出流

使用document.write()方法可以直接向HTML文档写入内容:

实例

// 向页面输出标题和段落
document.write("<h1>JavaScript入门教程</h1>");
document.write("<p>欢迎学习JavaScript编程!</p>");
document.write("<p>当前时间:" + new Date().toLocaleString() + "</p>");

JavaScript:对事件的反应

JavaScript可以对用户的各种操作做出响应,如点击、鼠标移动、键盘输入等:

实例

// HTML中的按钮代码
<button type="button" onclick="showWelcome()">点击我</button>

// JavaScript函数
function showWelcome() {
    alert('欢迎访问我们的网站!');
    console.log('按钮被点击了!');
}

JavaScript:改变HTML内容

通过DOM操作,JavaScript可以动态修改网页的内容:

实例

// 修改页面元素的内容
function updateContent() {
    // 获取元素
    const demoElement = document.getElementById("demo");

    // 修改内容
    if (demoElement) {
        demoElement.innerHTML = "内容已被JavaScript修改!";
        demoElement.style.color = "blue";
        demoElement.style.fontSize = "20px";
    }

    // 或者使用更现代的方法
    const newElement = document.querySelector('.content');
    if (newElement) {
        newElement.textContent = "选择器方式获取元素";
    }
}

JavaScript:验证用户输入

客户端表单验证是JavaScript的重要应用之一:

实例

function validateForm() {
    // 获取输入值
    const email = document.getElementById('email').value;
    const age = document.getElementById('age').value;

    // 验证邮箱格式
    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailPattern.test(email)) {
        alert('请输入有效的邮箱地址!');
        return false;
    }

    // 验证年龄是否为数字
    if (isNaN(age) || age < 1 || age > 120) {
        alert('请输入有效的年龄(1-120)!');
        return false;
    }

    // 验证年龄是否为整数
    if (!Number.isInteger(Number(age))) {
        alert('年龄必须是整数!');
        return false;
    }

    alert('验证通过!');
    return true;
}

JavaScript vs Java

特性 JavaScript Java
类型 解释型脚本语言 编译型编程语言
执行环境 主要在浏览器中运行 需要Java虚拟机(JVM)
类型系统 动态类型 静态类型
面向对象 基于原型的面向对象 基于类的面向对象

现代JavaScript生态系统

核心语言
  • ES6/ES2015+ 新特性
  • 异步编程(Promise, async/await)
  • 模块化(ES Modules)
前端框架
  • React
  • Vue.js
  • Angular
构建工具
  • Webpack
  • Babel
  • npm/Yarn

学习建议

  • 从基础语法开始,逐步深入
  • 多动手实践,编写实际代码
  • 理解DOM操作和事件处理
  • 学习ES6+新特性
  • 掌握调试工具的使用