JavaScript标签|极客笔记

JavaScript标签

JavaScript是一种广泛使用的客户端脚本语言，它为网页添加了交互性和动态功能。通过在HTML文档中使用JavaScript标签，我们可以在网页中嵌入JavaScript代码，并在浏览器中执行这些代码。

JavaScript基础

变量和数据类型

JavaScript中的变量可以用来存储各种不同类型的数据。常见的数据类型包括数字(number)、字符串(string)、布尔值(boolean)、数组(array)和对象(object)等。

下面是一些变量声明和赋值的示例代码：

var name = "Alice";
var age = 25;
var isStudent = true;
var hobbies = ["reading", "painting", "traveling"];
var person = { name: "Bob", age: 30, hobbies: ["coding", "gaming"] };

控制流程和函数

JavaScript提供了多种控制流程和函数来实现条件判断、循环和封装可重用的代码块。

条件语句

条件语句用于根据不同的条件执行不同的代码块。常见的条件语句包括if语句、if-else语句和switch语句。

var num = 10;

if (num > 0) {
  console.log("The number is positive.");
} else if (num < 0) {
  console.log("The number is negative.");
} else {
  console.log("The number is zero.");
}

循环语句

循环语句用于重复执行一段代码块，常见的循环语句有for循环和while循环。

for (var i = 0; i < 5; i++) {
  console.log("Count: " + i);
}

var j = 0;
while (j < 5) {
  console.log("Count: " + j);
  j++;
}

函数

函数是一段可重用的代码块，在需要时可以被调用执行。函数可以接受参数和返回值。

function sayHello(name) {
  console.log("Hello, " + name + "!");
}

sayHello("Alice");

function add(a, b) {
  return a + b;
}

var result = add(2, 3);
console.log(result);

DOM操作

在JavaScript中，DOM（Document Object Model）用于表示和操作HTML文档中的元素。通过DOM操作，我们可以动态地改变网页的内容和样式。

下面是一些常见的DOM操作示例代码：

// 通过ID获取元素
var element = document.getElementById("myElement");

// 改变元素的文本内容
element.innerHTML = "New content";

// 添加一个类名到元素
element.classList.add("highlight");

// 绑定点击事件到元素
element.addEventListener("click", function() {
  console.log("Element clicked");
});

JavaScript高级特性

异步编程

JavaScript是一种单线程语言，意味着它一次只能执行一个任务。为了避免长时间的等待，JavaScript引入了异步编程的概念。

在异步编程中，任务会在后台执行，并在完成后通过回调函数或Promise返回结果。这样可以避免阻塞后续代码的执行。

下面是一个使用回调函数进行异步编程的示例代码：

function fetchData(callback) {
  setTimeout(function() {
    var data = "Some data";
    callback(data);
  }, 2000);
}

function processData(data) {
  console.log("Processing data: " + data);
}

fetchData(processData);

面向对象编程

JavaScript支持面向对象编程的特性，可以使用构造函数和原型链来创建和继承对象。

下面是一个使用构造函数和原型链创建对象和继承的示例代码：

function Animal(name, age) {
  this.name = name;
  this.age = age;
}

Animal.prototype.speak = function() {
  console.log("An animal speaks");
};

function Dog(name, age, breed) {
  Animal.call(this, name, age);
  this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype);

Dog.prototype.bark = function() {
  console.log("The dog barks");
};

var dog = new Dog("Max", 3, "Labrador");
dog.speak();
dog.bark();

JavaScript框架和库

JavaScript拥有丰富的框架和库，可以帮助开发者更轻松地构建复杂的应用程序。

jQuery

jQuery是一个功能强大的JavaScript库，简化了DOM操作、事件处理、动画效果等任务，使代码更简洁易读。

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <p id="myElement">Click me</p>
  <script>
     $(document).ready(function() {$ ("#myElement").click(function() {
        $(this).text("Clicked");
      });
    });
  </script>
</body>
</html>

React

React是一个用于构建用户界面的JavaScript库，采用了组件化开发的思想，使开发者能够更容易地构建交互式UI。

下面是一个使用React创建组件的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.development.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.development.js"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    function Greeting(props) {
      return <h1>Hello, {props.name}!</h1>;
    }

    ReactDOM.render(<Greeting name="Alice" />, document.getElementById("root"));
  </script>
</body>
</html>