网页的血液——javascript

JavaScript 基础知识概述

1. JavaScript 介绍

JavaScript 是一种高级的、解释型的编程语言,它是一种基于对象的、事件驱动的语言,它允许开发者创建动态的网页。JavaScript 是一种脚本语言,它可以嵌入到 HTML 中,或者作为外部文件引入。JavaScript 是一种客户端脚本语言,它在浏览器中运行,用于控制网页的行为。

2. JavaScript 变量声明

在 JavaScript 中,变量用于存储数据值。JavaScript 中的变量是通过 varletconst 关键字声明的。

  • var 关键字用于声明一个变量,它的作用域是整个函数。
  • let 关键字用于声明一个块级作用域的变量。
  • const 关键字用于声明一个常量,它的值不能改变。
var name = "John"; // 使用 var 声明变量
let age = 30; // 使用 let 声明变量
const PI = 3.14; // 使用 const 声明常量

3. JavaScript 中的数据类型

JavaScript 中的数据类型主要有以下几种:

  • Number:用于表示数字,包括整数和浮点数。
  • String:用于表示文本。
  • Boolean:用于表示真(true)或假(false)。
  • Object:用于表示对象,可以包含属性和方法。
  • Null:表示空值或不存在的对象。
  • Undefined:表示未定义的变量。
  • Symbol:表示唯一的标识符。
let num = 10; // Number
let str = "Hello"; // String
let isTrue = true; // Boolean
let obj = {name: "John", age: 30}; // Object
let nothing = null; // Null
let notDefined; // Undefined
let sym = Symbol("id"); // Symbol

4. JavaScript 中的运算符

JavaScript 提供了多种运算符,包括算术运算符、比较运算符、逻辑运算符、赋值运算符等。

  • 算术运算符:用于执行数学运算,如 +-*/%
  • 比较运算符:用于比较两个值,如 ==!=><>=<=
  • 逻辑运算符:用于逻辑操作,如 &&(与)、||(或)、!(非)。
  • 赋值运算符:用于赋值,如 =+=-=*=/=
let x = 10;
let y = 20;// 算术运算符
let sum = x + y; // 30
let diff = x - y; // -10// 比较运算符
let isEqual = x == y; // false
let isGreater = x > y; // false// 逻辑运算符
let isTrue = true && false; // false// 赋值运算符
x += 5; // x 现在是 15

5. JavaScript 中的流程控制

JavaScript 提供了多种流程控制语句,包括 ifelseswitchforwhiledo...while

  • if…else:用于条件判断。
  • switch:用于多条件判断。
  • for:用于重复执行代码块。
  • while:用于当条件为真时重复执行代码块。
  • do…while:用于当条件为真时重复执行代码块,且至少执行一次。
// if...else
if (x > y) {console.log("x is greater than y");
} else {console.log("x is not greater than y");
}// switch
switch (x) {case 10:console.log("x is 10");break;case 20:console.log("x is 20");break;default:console.log("x is not 10 or 20");
}// for
for (let i = 0; i < 5; i++) {console.log(i);
}// while
let i = 0;
while (i < 5) {console.log(i);i++;
}// do...while
let j = 0;
do {console.log(j);j++;
} while (j < 5);

6. JavaScript 中的函数

函数是一段可以重复使用的代码,它可以接受输入参数,并返回一个值。JavaScript 中的函数可以通过 function 关键字声明。

function greet(name) {return "Hello, " + name;
}console.log(greet("John")); // 输出 "Hello, John"

7. JavaScript 中的匿名函数

匿名函数是没有名称的函数,它们通常用作函数表达式或作为函数的参数。

// 函数表达式
let greet = function(name) {return "Hello, " + name;
};console.log(greet("John")); // 输出 "Hello, John"// 作为函数参数
setTimeout(function() {console.log("This message is displayed after 2 seconds");
}, 2000);

14. DOM 元素操作 HTML

DOM(Document Object Model)是一个编程接口,用于 HTML 和 XML 文档。它提供了一个结构化的文档表示,并定义了一种方式使程序能够访问和改变文档的内容、结构和样式。

获取元素

可以通过多种方式获取 DOM 元素:

  • 通过 ID:使用 document.getElementById() 方法。
  • 通过标签名:使用 document.getElementsByTagName() 方法。
  • 通过类名:使用 document.getElementsByClassName() 方法。
  • 通过选择器:使用 document.querySelector()document.querySelectorAll() 方法。
// 通过 ID 获取元素
var elementById = document.getElementById("myId");// 通过标签名获取元素
var elementsByTagName = document.getElementsByTagName("p");// 通过类名获取元素
var elementsByClassName = document.getElementsByClassName("myClass");// 通过选择器获取元素
var elementBySelector = document.querySelector(".myClass");
var elementsBySelector = document.querySelectorAll(".myClass");

修改元素

可以通过 DOM 元素的属性和方法来修改元素的内容、属性和样式。

// 修改元素的文本内容
elementById.textContent = "New text content";// 修改元素的 HTML 内容
elementById.innerHTML = "<b>New HTML content</b>";// 修改元素的属性
elementById.setAttribute("class", "newClass");// 修改元素的样式
elementById.style.color = "blue";

15. DOM 相关元素

DOM 提供了一系列的元素和对象,用于表示文档的结构和内容。

  • 节点(Node):文档中的所有内容都是节点,如元素、属性、文本等。
  • 元素(Element):文档中的 HTML 标签。
  • 属性(Attribute):元素的属性。
  • 文本(Text):元素或属性中的文本内容。
// 获取元素节点
var elementNode = document.getElementById("myId");// 获取文本节点
var textNode = elementNode.firstChild;// 获取属性节点
var attributeNode = elementNode.getAttributeNode("class");

16. DOM 的创建与删除

可以通过 DOM 方法来创建和删除元素。

创建元素

// 创建新的 div 元素
var newDiv = document.createElement("div");// 设置新元素的文本内容
newDiv.textContent = "New div element";// 将新元素添加到 body 中
document.body.appendChild(newDiv);

删除元素

// 获取要删除的元素
var elementToRemove = document.getElementById("elementToRemove");// 删除元素
elementToRemove.parentNode.removeChild(elementToRemove);

通过以上介绍,我们可以看到 DOM 提供了一种结构化的方式来表示和操作 HTML 文档的内容、结构和样式。通过 DOM,开发者可以动态地创建、修改和删除文档的元素,从而实现复杂的网页交互和动态内容更新。

上面就是对java的介绍,内容较为全面,喜欢可以给个关注哦。
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/294673.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

YOLOv9改进策略 :主干优化 | 无需TokenMixer也能达成SOTA性能的极简ViT架构 | CVPR2023 RIFormer

💡💡💡本文改进内容: token mixer被验证能够大幅度提升性能,但典型的token mixer为自注意力机制,推理耗时长,计算代价大,而RIFormers是无需TokenMixer也能达成SOTA性能的极简ViT架构 ,在保证性能的同时足够轻量化。 💡💡💡RIFormerBlock引入到YOLOv9,多个数…

ADS-B及雷达显示终端8.4

#更新内容# 本次软件更新内容不少&#xff0c;但可见部分不多。主要更新集中的系统后台部分。后台更新内容包括&#xff1a; #后台更新内容# 1、增加了对部分特殊雷达编码格式的支持。应甲方要求&#xff0c;对部分国产雷达及其特殊的雷达编码协议进行了支持&#xff0c;增加了…

OpenHarmony无人机MAVSDK开源库适配方案分享

MAVSDK 是 PX4 开源团队贡献的基于 MavLink 通信协议的用于无人机应用开发的 SDK&#xff0c;支持多种语言如 C/C、python、Java 等。通常用于无人机间、地面站与通信设备的消息传输。 MAVLink 是一种非常轻量级的消息传递协议&#xff0c;用于与无人机&#xff08;以及机载无…

【好书推荐4】图机器学习

【好书推荐4】图机器学习 写在最前面编辑推荐内容简介作者简介目录前言/序言本书读者内容介绍 &#x1f308;你好呀&#xff01;我是 是Yu欸 &#x1f30c; 2024每日百字篆刻时光&#xff0c;感谢你的陪伴与支持 ~ &#x1f680; 欢迎一起踏上探险之旅&#xff0c;挖掘无限可能…

分月饼 java题解

import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in); int m sc.nextInt(); // 读取员工数量mint n sc.nextInt(); // 读取月饼数量n// 调用distribute方法并打印返回的分配方法总数//先默认每人分一个…

SmartChart的部署以及可能遇见的报错解决方案

简介 数据可视化是一种将数据转化为图形的技术&#xff0c;可以帮助人们更好地理解和分析数据。但是&#xff0c;传统的数据可视化开发往往需要编写大量的代码&#xff0c;或者使用复杂的拖拽工具&#xff0c;不仅耗时耗力&#xff0c;而且难以实现个性化的需求。有没有一种更…

SwiftUI Swift 显示隐藏系统顶部状态栏

Show me the code // // TestHideSystemTopBar.swift // pandabill // // Created by 朱洪苇 on 2024/4/1. //import SwiftUIstruct TestHideSystemTopBar: View {State private var isStatusBarHidden falsevar body: some View {Button {withAnimation {self.isStatusBa…

67、yolov8目标检测和旋转目标检测算法batchsize=1/6部署Atlas 200I DK A2开发板上

基本思想:需求部署yolov8目标检测和旋转目标检测算法部署atlas 200dk 开发板上 一、转换模型 链接: https://pan.baidu.com/s/1hJPX2QvybI4AGgeJKO6QgQ?pwd=q2s5 提取码: q2s5 from ultralytics import YOLO# Load a model model = YOLO("yolov8s.yaml") # buil…

VUE3——生命周期

Vue3.0中可以继续使用Vue2.x中的生命周期钩子&#xff0c;但有有两个被更名&#xff1a; beforeDestroy改名为 beforeUnmountdestroyed改名为 unmounted Vue3.0也提供了 Composition API 形式的生命周期钩子&#xff0c;与Vue2.x中钩子对应关系如下&#xff1a; beforeCreate&g…

vitess执行计划缓存 测试

打开执行计划器缓存&#xff1a; sysbench /usr/local/share/sysbench/oltp_write_only.lua --mysql-host127.0.0.1 --mysql-port15306 --mysql-userroot --mysql-password --mysql-dbcustomer --report-interval10 100s sysbench /usr/local/share/sysbench/oltp_read_only.l…

有哪些AI智能写作软件?七款自动写作神器,建议收藏

AI智能写作软件的发展&#xff0c;为广大写作者提供了便捷高效的创作工具。如今市场上涌现出了许多优秀的AI智能写作软件&#xff0c;它们各自具备独特的特点和功能&#xff0c;为写作者们带来了全新的写作体验。以下将介绍八款备受推崇的自动写作神器&#xff0c;让我们一起来…

淘宝店铺如何从1688一键铺货?官方授权接口,可满足多样化上货需求

此API目前支持以下基本接口&#xff1a; item_get 获得1688商品详情item_search 按关键字搜索商品item_search_img 按图搜索1688商品&#xff08;拍立淘&#xff09;item_search_suggest 获得搜索词推荐item_fee 获得商品快递费用seller_info 获得店铺详情item_search_shop 获得…

Adaboost集成学习 | Matlab实现基于LSTM-Adaboost长短期记忆神经网络结合Adaboost集成学习时间序列预测(股票价格预测)

目录 效果一览基本介绍模型设计程序设计参考资料效果一览 基本介绍 Adaboost集成学习 | Matlab实现基于LSTM-Adaboost长短期记忆神经网络结合Adaboost集成学习时间序列预测(股票价格预测) 模型设计 股票价格预测是一个具有挑战性的时间序列预测问题,可以使用深度学习模型如…

Google DeepMind 大语言模型中的长形态事实性

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 论文标题&#xff1a;Long-form factuality in large language models 论文链接&#xff1a;https://arxiv.org/abs/2403.18802 论文的关键信息总结如下&#xff1a; 研究问题是什么&#xff1f;论文…

Protobuf 二进制文件学习及解析

0. 简介 protobuf也叫protocol buffer是google 的一种数据交换的格式&#xff0c;它独立于语言&#xff0c;独立于平台。google 提供了多种语言的实现&#xff1a;java、c#、c、go 和 python&#xff0c;每一种实现都包含了相应语言的编译器以及库文件。 由于它是一种二进制的…

每日面经分享(pytest测试案例,接口断言,多并发断言)

pytest对用户登录接口进行自动化脚本设计 a. 创建一个名为"test_login.py"的测试文件&#xff0c;编写以下测试脚本 import pytest import requests# 测试用例1&#xff1a;验证登录成功的情况 # 第一个测试用例验证登录成功的情况&#xff0c;发送有效的用户名和密…

如何召开一次创意十足的OKR头脑风暴会?

召开一次创意十足的OKR&#xff08;Objectives and Key Results&#xff0c;目标与关键成果&#xff09;头脑风暴会&#xff0c;是激发团队成员智慧、明确共同目标并落实关键行动的重要环节。下面将详细列举召开此类头脑风暴会的具体步骤&#xff0c;以确保会议达到预期效果。 …

【数据结构】线性表

文章目录 前言线性表的定义和基本操作1.线性表的定义2.线性表的基本操作 顺序表的定义1.静态分配方式2.动态分配方式 顺序表的插入和删除1.顺序表的插入2.顺序表的删除 顺序表的查找1.按位查找&#xff08;简单&#xff09;2.按值查找 单链表的定义1.代码定义一个单链表2.不带头…

Linux和Windows安装PHP依赖管理工具Composer

Composer 是 PHP 的一个依赖管理工具。它允许申明项目所依赖的代码库&#xff0c;会在项目中安装它们。 Composer 不是一个包管理器。是的&#xff0c;它涉及 "packages" 和 "libraries"&#xff0c;但它在每个项目的基础上进行管理&#xff0c;在你项目的…

154 Linux C++ 通讯架构实战9 ,信号功能添加,信号使用sa_sigaction 回调,子进程添加,文件IO详谈,守护进程添加

初始化信号 使用neg_init_signals(); 在nginx.cxx中的位置如下 //(3)一些必须事先准备好的资源&#xff0c;先初始化ngx_log_init(); //日志初始化(创建/打开日志文件)&#xff0c;这个需要配置项&#xff0c;所以必须放配置文件载入的后边&#xff1b;//(4)一些初…