Javaweb、HTML、css和JavaScript的关系

0

什么是JavaScript

广泛使用的编程语言，主要用于网页开发和 web 应用程序的交互功能。
JavaScript 是一种脚本语言，能够在客户端（即用户的浏览器）上运行，通常与 HTML 和 CSS 配合使用，用来增加网页的动态效果、响应用户操作、处理数据等。
1

基本使用：引入JavaScript

2

基本语法入门

变量声明

var：声明一个全局或函数作用域的变量。
let：声明一个块级作用域的变量，通常推荐使用 let。
const：声明一个常量，常量一旦赋值后不能修改。

var name = "John";  // 使用 var 声明变量，已不推荐使用，容易导致变量污染和作用域问题
let age = 30;       // 使用 let 声明块级作用域的变量
const pi = 3.14;    // 使用 const 声明常量

数据类型

字符串（String）：表示文本。
数字（Number）：整数或浮动数。
布尔值（Boolean）：true 或 false。
数组（Array）：用于存储多个值。
对象（Object）：用于存储键值对。

let name = "Alice";         // 字符串
let age = 25;               // 数字
let isStudent = true;       // 布尔值
let colors = ["red", "blue", "green"];  // 数组
let person = {name: "Bob", age: 40};    // 对象

操作符

算术操作符：+, -, *, /, %
比较操作符：==（类型可以不一样）, ===(绝对等于), !=, !==, >, <, >=, <=
逻辑操作符：&&（与）, ||（或）, !（非）

条件语句

循环语句

函数

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

greet("Alice");  // 调用函数，输出：Hello, Alice!
greet("Bob");    // 调用函数，输出：Hello, Bob!

事件处理

通过事件监听器来处理用户交互，比如点击按钮、输入框变化

<button onclick="alert('按钮被点击!')">点击我</button>

let button = document.getElementById("myButton");
button.addEventListener("click", function() {
    alert("按钮被点击!");
});

数组操作

1

调试

console.log() 是一种常用的调试方式，用来输出信息到浏览器控制台。

console.log("Hello, World!");

函数

异步编程与回调函数

  • 异步编程 允许你在操作还没有完成时继续执行其他代码，避免阻塞。
  • 回调函数是一种传递给另一个函数的函数，并在某个操作完成后被调用。

在异步编程中，回调函数常用于指定在某个操作完成后应该执行的代码。比如，当网络请求完成、数据加载完毕、定时器结束时，回调函数会被执行。

作用域和闭包

数组和对象

  • 数组（Array）：存储一组有序的数据，可以是不同类型的，可以通过索引访问。
  • 对象（Object）：存储一组键值对，类似于字典或哈希表，用于描述和组织数据。

DOM 操作

通过 DOM（文档对象模型）来操作网页中的 HTML 元素。常见的操作有：

  • 获取元素：getElementById、querySelector。
  • 修改元素内容：innerText、innerHTML。
  • 修改样式：style 属性。

json对象

用于在服务器和客户端之间传输数据。它是由键值对组成的文本格式，可以看作是一个“数据容器”。
-JSON 的基本格式：

{
  "name": "Alice",
  "age": 25,
  "isStudent": false,
  "courses": ["Math", "Science", "History"]
}
\\对象objec格式{name: "Alice", age: 25}有所区别

jQuery

  • Ajax（Asynchronous JavaScript and XML）是 异步 JavaScript 和 XML 的缩写，是一种用于在不重新加载整个网页的情况下与服务器交换数据并更新部分网页内容的技术。Ajax 可以让网页在不刷新的情况下与服务器进行通信和更新数据。
    工作流程：
  1. 用户操作触发 Ajax 请求：例如，用户点击一个按钮、输入框内容变化，或者页面加载时。
  2. 浏览器向服务器发送请求：通过 JavaScript，发送一个请求到服务器。
  3. 服务器处理请求并返回响应：服务器接收到请求后，处理数据并返回响应（通常是 JSON、XML 或 HTML）。
  4. 浏览器接收并处理响应：浏览器收到服务器的响应后，JavaScript 代码会根据返回的数据动态更新页面上的内容，而不需要重新加载页面。
  • jQuery
    流行的 JavaScript 库，它使得操作 HTML、CSS 和 JavaScript 变得更简单，尤其是在处理 DOM（文档对象模型）操作和 Ajax 请求时。
    基本用法：
  1. 选择器：通过 jQuery 的选择器，你可以快速选中页面上的元素。例如，选中所有 div 元素，或选中 ID 为 #myElement 的元素。
  2. 操作 DOM：通过 jQuery，可以轻松地修改页面的内容、样式、事件等。
  3. 简化事件处理：jQuery 提供了简洁的事件绑定方法，如点击、鼠标移入等。
  4. Ajax 请求：通过 jQuery，你可以轻松发送异步请求，获取服务器上的数据，而不会刷新页面