JavaScript

共 2,983 字，需阅读 7 分钟

2018/06/01 下午

959 次阅读

一、入门介绍

1.1

什么是JavaScript JavaScript是一种广泛使用的编程语言，通常用于Web开发中的动态交互效果（例如：网页表单验证、网页特效等）。它是一种脚本语言，不需要编译，直接在浏览器中解释执行。

1.2 JavaScript的优缺点

JavaScript的优点：

相对简单易学, 入门门槛较低
可以与HTML和CSS无缝地集成
直接在浏览器中解释执行，无需编译
是一种跨平台的编程语言，同时支持前端和后端开发
功能丰富，具备处理时间、日期、数字、字符串、表格等数据类型的内置函数和对象

JavaScript的缺点：

由于是一种动态语言，因此代码容易出错
对于初学者，可能需要更多的时间来了解复杂的概念
不适合大型项目，容易导致混乱
在多年前由于技术原因，JavaScript的性能并不好，但随着现代浏览器的升级，这个问题已经得到了很好的解决

1.3 安装JavaScript

无需安装，只需要在浏览器中打开HTML文件即可直接运行JavaScript代码。

二、基本概念和语法

2.1 变量声明

变量用于存储数据。在JavaScript中，使用 var 或 let 命令来定义变量。其中，let 命令是ES6新标准引入的，可以代替 var，具有更好的作用域控制。

        
          
            
            JavaScript
          
          
        
        
          12345
          var name = '张三'; // 声明一个字符串类型变量
let age = 18; // 声明一个整型变量

name = '李四'; // 修改字符串变量值
age = age + 1; // 修改整型变量值

2.2 数据类型

JavaScript中的数据类型包括：数值型、字符串、布尔、数组、对象等。一些常见的数据类型：

        
          
            
            JavaScript
          
          
        
        
          12345678
          let num = 123; // 数字类型
let str = "Hello World"; // 字符串类型
let bool = true; // 布尔类型
let arr = [1, 2, 3]; // 数组类型
let obj = {
  name: "张三",
  age: 18
}; // 对象类型

2.3 运算符

JavaScript中的运算符包括数学运算符、比较运算符、逻辑运算符等。

        
          
            
            JavaScript
          
          
        
        
          1234567891011121314151617
          // 数学运算符
4 + 2 // 6 
9 - 3 // 6 
10 * 2 // 20 
20 / 5 // 4 

// 比较运算符 
5 > 3 // true
2 <= 1 // false
"abc" === "abc" // true (注意: 双等号比较值, 三等号比较值和类型)

// 逻辑运算符
let x = 12;
let y = 26;
(x > 10) && (y < 30) // true (且) 
(x > 10) || (y < 15) // true (或) 
!(x > 10) // false (非)

2.4 函数

函数是定义或调用JavaScript代码的模块化方式。它们可以接受参数，执行任务并返回值。

        
          
            
            JavaScript
          
          
        
        
          12345
          function multiply(a, b) {
  // 定义一个简单的乘法函数
  return a * b; // 返回两数相乘的结果
}
multiply(2, 3); // 调用multiply函数，将2和3传递给参数a和b，返回结果是6。

2.5 DOM 操作

浏览器中的文档对象模型（Document Object Model，DOM）是一种使用 JavaScript 操作网页元素的方式。它可以让我们动态地改变网页内容。

以下是一个使用 DOM 更改元素样式的例子：

        
          
            
            HTML
          
          
        
        
          1234567891011121314151617
          <!DOCTYPE html>
<html>
  <body>

  <h1 id="myHeading">Hello World!</h1>

  <button onclick="changeStyle()">改变样式</button>

  <script>
    function changeStyle() {
      let heading = document.getElementById("myHeading");
      heading.style.color = "red";
      heading.style.backgroundColor = "yellow";
    }
  </script>
  </body>
</html>

2.6 Ajax

Ajax（Asynchronous JavaScript And XML）是一种通过 JavaScript 向服务器发送请求并获取响应的技术。它可以在无需重新载入整个页面的情况下更新网页的一部分内容。它通常用于实现异步加载、动态更新等功能。

以下是一个使用 Ajax 获取数据的例子：

        
          
            
            JavaScript
          
          
        
        
          12345678910
          let xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);

xhr.onreadystatechange = function() {
  if (this.readyState === 4 && this.status === 200) {
    let response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};
xhr.send();