网页的血液——javascript

news/2024/6/20 21:21:07/文章来源:https://blog.csdn.net/2301_77186809/article/details/137244976

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.luyixian.cn/news_show_1033580.aspx

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

相关文章

聚焦新污染物,共谋治理策|中联环保圈

在环境污染防治的征途上&#xff0c;新污染物治理不仅是一场考验决心和毅力的攻坚战&#xff0c;更是对原有治理策略的广度和深度的全面拓展。这需要以更加坚定的决心&#xff0c;更加科学的策略&#xff0c;以及更加创新的思维来应对。 地方两会圆满闭幕之际&#xff0c;各地…

链表优化与拓展的细节:深度探索与精致打磨(续篇)

五、链表算法的优化与拓展 链表算法的优化与拓展是链表应用中不可或缺的一部分。通过对算法进行精细打磨和创新拓展&#xff0c;我们可以进一步提升链表处理数据的效率和灵活性。 排序算法的优化 链表常用于实现各种排序算法&#xff0c;如插入排序、归并排序等。然而&#…

视频推拉流EasyDSS点播平台云端录像播放异常的问题排查与解决

视频推拉流EasyDSS视频直播点播平台可提供一站式的视频转码、点播、直播、视频推拉流、播放H.265视频等服务&#xff0c;搭配RTMP高清摄像头使用&#xff0c;可将无人机设备的实时流推送到平台上&#xff0c;实现无人机视频推流直播、巡检等应用。 有用户反馈&#xff0c;项目现…

redis对象list

Redis List是一组连接起来的字符串集合。 写操作&#xff1a; LPUSH 语法:LPUSH key value [value …] 功能:从头部增加元素,返回值为List中元素的总数。 RPUSH 语法:RPUSH key value [value …] 功能:从尾部增加元素,返回值为List中元素的总数。 LPOP 语法:LPOP key 功能…

fastadmin学习07-无限级分类

create table fa_producttype (id int auto_increment comment 分类id,createtime bigint null comment 创建时间,updatetime bigint null comment 更新时间,deletetime bigint null comment 删除时间,name varchar(255) null comment 分类名称…

数论与线性代数——整除分块【数论分块】的【运用】【思考】【讲解】【证明(作者自己证的QWQ)】

文章目录 整除分块的思考与运用整除分块的时间复杂度证明 & 分块数量整除分块的公式 & 公式证明公式证明 代码code↓ 整除分块的思考与运用 整除分块是为了解决一个整数求和问题 题目的问题为&#xff1a; ∑ i 1 n ⌊ n i ⌋ \sum_{i1}^{n} \left \lfloor \frac{n}{…

用html实现在页面底部养鱼的效果

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>在网页底部养鱼</title><link rel"stylesheet" href"./style.css"> </head> <body> <div id"fi…

​ SpringBoot自动装配原理

SpringBoot自动装配原理 SpringBoot的启动类上有一个注解&#xff1a;SpringBootApplication 。该注解是三个注解的复合注解。 1.SpringBootConfiguration 注解 点进SpringBootConfiguration 注解&#xff0c;可以发现其核心注解为Configuration注解&#xff1a; Configuration…

Mysql 常用SQL语句

1、查看mysql中所有的数据库&#xff0c; show databases; 2、创建库 create database 库名;&#xff08;也可以用 create database if not exists 库名; 表示如果库不存在再创建&#xff09; 例&#xff1a;create database if not exists ecology; 3、删除库 …

Mysql数据库故障排查与优化

目录 前言 一、Mysql数据库的单实例故障 1.故障一——拒绝连接数据库 1.1故障内容 1.2问题分析 1.3解决方法 2.故障二——密码错误 2.1故障内容 2.2问题分析 2.3解决方法 3.故障三——数据库处理较慢 3.1故障内容 3.2问题分析 3.3解决方法 4.故障四——数据库表…

【leetcode】力扣简单题两数之和

题目 思路 代码实现 #include<iostream> #include<unordered_map>using namespace std;class Solution { public:vector<int> TwoNumber(const vector<int>& nums, int target){vector<int> number_vector;unordered_map<int, int> …

SpringCloud学习(1)-consul

consul下载安装及使用 1.consul简介 Consul是一种开源的、分布式的服务发现和配置管理工具&#xff0c;能够帮助开发人员构建和管理现代化的分布式系统。它提供了一套完整的功能&#xff0c;包括服务注册与发现、健康检查、KV存储、多数据中心支持等&#xff0c;可以帮助开发人…

代码随想录算法训练营第39天|62.不同路径 |63. 不同路径 II

代码随想录算法训练营第39天|62.不同路径 |63. 不同路径 II 详细布置 62.不同路径 本题大家掌握动态规划的方法就可以。 数论方法 有点非主流&#xff0c;很难想到。 https://programmercarl.com/0062.%E4%B8%8D%E5%90%8C%E8%B7%AF%E5%BE%84.html 视频讲解&#xff1a;https…

深入了解C语言中的结构体类型与内存对齐

引言&#xff1a; 在C语言中&#xff0c;结构体是一种自定义的数据类型&#xff0c;它允许我们将不同类型的数据组合在一起&#xff0c;形成一个新的数据类型。结构体的使用为我们解决了一些复杂数据的表示和处理问题&#xff0c;不仅限于单单的整型或者字符。本文将深入探讨结…

网络编程--高并发服务器(二)

这里写目录标题 线程池高并发服务器UDP服务器TCP与UDP机制的对比TCP与UDP优缺点比较UDP的C/S模型实现思路模型分析实现思路&#xff08;对照TCP的C/S模型&#xff09; recvfrom函数、sendto函数 一级目录二级目录二级目录二级目录 一级目录二级目录二级目录二级目录 一级目录二…

C++引用与指针比较

引子&#xff1a; 问题&#xff1a; 指针指向变量必须类型一致&#xff08;int对int*类型指针&#xff09;&#xff0c;这样计算&#xff0c;解引用才能得到正确的结果&#xff0c;那引用也是如此吗&#xff1f; 回答&#xff1a;&#xff08;常引用&#xff09; 从语法来说…

MyBatis主要的类层次结构(Mybatis工具类)

MyBatis主要的类层次结构 每一个MyBatis的应用程序都以一个SqlSessionFactory 对象的实例为核心 。 SqlSessionFactory对象的实例可以通过SqlSessionFactoryBuilder对象来获得 。 SqlSessionFactoryBuilder对象可以从 XML 配置文件中构建 SqlSessionFactory对象。 package…

RN实现全局数据共享(非Redux,使用原生内置的方法实现)

下面这个方法是在RN使用全局数据共享的,使用原生React的方式搞得,相对于Redux配置相对简单,适合小型项目 项目内创建MyContext.js // MyContext.jsimport React from react;const MyContext React.createContext();export default MyContext;App.js引入 // App.jsimport Rea…

【opencv】教程代码 —features2D(7)根据单应性矩阵估计相机坐标系下的物体位姿...

pose_from_homography.cpp从图像中找到棋盘角点并进行姿态估计 从图像中找到棋盘角点并显示 计算角点在世界坐标系中的位置 读取相机内参和畸变系数并校正图像中的角点 计算从3D点到2D点的单应性矩阵 通过奇异值分解(SVD)优化对旋转矩阵的估计 基于单应矩阵分解及其优化结果&am…

HarmonyOS 应用开发之LifecycleForm接口切换LifecycleApp接口切换 LifecycleApp接口切换

LifecycleForm接口切换 FA模型接口Stage模型接口对应d.ts文件Stage模型对应接口onCreate?(want: Want): formBindingData.FormBindingData;ohos.app.form.FormExtensionAbility.d.tsonAddForm(want: Want): formBindingData.FormBindingData;onCastToNormal?(formId: string…