当前位置： 首页 > news >正文

JavaScript详细教程

news 2026/5/28 22:05:33

文章目录

  • 前言
  • 一、代码位置
  • 二、注释
  • 三、变量
    • 1.字符串类型
    • 2.数组
    • 3.对象（字典）
  • 四、条件语句
  • 五、函数
  • 六、DOM模板

前言

JavaScript 是一种脚本编程语言，它可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新——交互式的地图、2D/3D 动画、滚动播放的视频等等——JavaScript 就在其中。

一、代码位置

  • 在HTML文件中
    • head中
    • body中（常用，防止先执行该代码，不符合用户的体验）
  • 在static文件夹的js文件夹中，导入使用，放在body的最下部分
    请添加图片描述
<!-- 导入代码 -->
<body><script src="static/js/my.js"></script>
</body>

二、注释

语言注释
HTML<!-- 注释内容 -->
CSS/* 注释内容 */
Javascript// 注释内容 or /* 注释内容 */

三、变量

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script type="text/javascript">var name = "poker";console.log(name);   //打印变量</script>
</body>
</html>

请添加图片描述

1.字符串类型

  • 常用功能
//声明
var name = "helloworld";
var name = String("helloworld");
var name = "中国联通"//长度
var v1 = name.length;//下标操作
var v2 = name[0];//去除空白
var v3 = name.trim();//切片, 前闭后开
var v4 = name.substring(0,2);
  • 实例：跑马灯
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title>
</head><body><div id="txt">欢迎中国联通领导poker莅临指导</div><script type="text/javascript">function show() {//1.去HTML中找到某个标签并获取他的内容 (DOM)var tag = document.getElementById("txt");var dataString = tag.innerText;//2.动态起来,把文本中的第一个字符放在字符串的最后面var firstChar = dataString[0];var otherString = dataString.substring(1, dataString.length);var newText = otherString + firstChar;//3.在HTML标签中更新内容tag.innerText = newText;}//Javascript中的定时器//每秒钟执行这个show函数setInterval(show, 1000);    //毫秒</script>
</body>
</html>

请添加图片描述

2.数组

  • 常用功能
//声明
var v1 = [11,22,33,44];
var v2 = Array([11,22,33,44]);//下标操作
v1[1]
v1[0] = "poker"//追加
v1.push("联通");			//尾部追加 [11,22,33,44,"联通"]
v1.unshift("联通");		//头部追加 ["联通",11,22,33,44]
v1.splice(索引,0,元素);
v1.splice(1,0,"中国");	//指定位置追加 [11,"中国",22,33,44]//删除
v1.pop();				//尾部删除
v1.shift();				//头部删除
v1.splice(索引位置,1);
v1.splice(2,1);			//索引为 2 的元素删除 [11,22,44]//遍历
var v1 = [11,22,33,44];
for(var index in v1){//data=v1[index]...
}for(var i=0; i<v1.length; i++){...
}
  • 实例：动态数据
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title> 
</head>
<body><ul id="city"><!-- <li>北京</li><li>天津</li><li>上海</li> --></ul><script type="text/javascript">var cityList = ["北京","天津","上海"];for(var idx in cityList) {var text = cityList[idx];//创建 <li></li> 标签var tag = document.createElement("li");//在 li 标签中写入内容tag.innerText = text;//添加到 id=city 那个标签的里面 DOMvar parentTag = document.getElementById("city");parentTag.appendChild(tag);}</script>
</body>
</html>

请添加图片描述

3.对象（字典）

  • 常用功能
//声明
info = {"name":"poker","age":18,
}info = {name:"poker",age:18
}//组成与修改
info.age;
info.name = "toker"info["age"]
info["name"] = "toker";//删除
delete info["age"]//遍历
for(var key in info){//key值 data=info[key]...
}
  • 实例：动态表格
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title>
</head><body><table border="1"><thead><tr><th>ID</th><th>姓名</th><th>年龄</th></tr></thead><tbody id="body"><tr><!-- <td>1</td><td>poker</td><td>25</td> --></tr></tbody></table><script type="text/javascript">var dataList = [{ id: 1, name: "poker", age: 25 },{ id: 1, name: "poker", age: 25 },{ id: 1, name: "poker", age: 25 },{ id: 1, name: "poker", age: 25 },{ id: 1, name: "poker", age: 25 },{ id: 1, name: "poker", age: 25 },];for (var idx in dataList) {var info = dataList[idx];//1.创建 tr 标签var tr = document.createElement("tr");for (var key in info) {var text = info[key];//2.创建 td 标签var td = document.createElement("td");td.innerText = text;tr.appendChild(td);}//3. 追加数据var bodyTag = document.getElementById("body");bodyTag.appendChild(tr);}</script>
</body>
</html>

请添加图片描述

四、条件语句

if (条件) {...
}else{...
}if (条件) {...
else if (条件){...
}else{...
}

五、函数

function func(){...
}//执行
func()

六、DOM模板

  • DOM 是一个模块,模块可以对HTML页面中的标签进行操作
  • 常见功能
//根据 ID 获取标签
var tag = doucment.getElementById("xx");//根据 ID 创建标签
var tag = document.createElement("xx");//获取标签中的文本
tag.innerText//修改标签中的文本
tag.innerText = "hhhhhhh";
  • 事件绑定
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title>
</head><body><input type="text" placeholder="请输入内容" id="content"><input type="button" value="点击添加" onclick="addCityInfo()"><ul id="city"></ul><script type="text/javascript">function addCityInfo() {//1.找到标签var userContent = document.getElementById("content");//2.获取input中用户输入的内容var newString = userContent.value;//判断用户输入是否为空if (newString.length > 0) {//3.创建 li 标签,传入用户输入的内容var newTag = document.createElement("li");newTag.innerText = newString;//4.标签添加到 ul 中var parentTag = document.getElementById("city");parentTag.appendChild(newTag);//5.将 input text 内容清空userContent.value = "";}else{alert("输入不能为空!")}}</script>
</body>
</html>

请添加图片描述

  • 还有很多的DOM操作没有介绍,我们后面会使用JQuery来实现DOM的功能,所以这里的内容了解即可

相关文章：

JavaScript详细教程

文章目录 前言一、代码位置二、注释三、变量1.字符串类型2.数组3.对象&#xff08;字典&#xff09; 四、条件语句五、函数六、DOM模板 前言 JavaScript 是一种脚本编程语言&#xff0c;它可以在网页上实现复杂的功能&#xff0c;网页展现给你的不再是简单的静态信息&#xff0…...

编程日记 2024/3/23 21:41:19

Hive自定义GenericUDF函数

Hive自定义GenericUDF函数 当创建自定义函数时&#xff0c;推荐使用 GenericUDF 类而不是 UDF 类&#xff0c;因为 GenericUDF 提供了更灵活的功能和更好的性能。以下是使用 GenericUDF 类创建自定义函数的步骤&#xff1a; 编写Java函数逻辑&#xff1a;编写继承自 GenericUDF…...

编程日记 2024/3/23 21:38:16

伊理威科技：抖音开网店新手刚做选啥品

在数字浪潮中&#xff0c;抖音不仅是展示才艺的舞台&#xff0c;更是创业者的新天地。新手若想在这片热土上开垦网店&#xff0c;选品便是首要课题。选择产品如同种下希望的种子&#xff0c;既要考量土壤肥沃度&#xff0c;也得预测风雨适宜期。 兴趣与专长是选品的罗盘。热爱所…...

编程日记 2024/3/23 21:37:15

【爬虫】专栏文章索引

为了方便 快速定位 和 便于文章间的相互引用等 作为一个快速准确的导航工具 爬虫 目录&#xff1a; &#xff08;一&#xff09;web自动化和接口自动化 &#xff08;二&#xff09;实战-爬取Boss直聘信息数据...

编程日记 2024/3/23 21:36:14

【Linux】Linux开发工具-vim / 编译器-gcc/g++ / 调试器-gdb / git操作 / 项目自动化构建工具-make/Makefile

主页&#xff1a;醋溜马桶圈-CSDN博客 专栏&#xff1a;Linux_醋溜马桶圈的博客-CSDN博客 gitee&#xff1a;mnxcc (mnxcc) - Gitee.com 目录 1.在Linux写自己的第一个程序 1.1 nano指令 1.2 nano指令的使用 1.2.1 介绍 1.2.2 演示 1.2.2.1 创建.c文件 1.2.2.2 nano cod…...

编程日记 2024/3/23 21:34:10

解决VM重新打开后找不到共享文件夹的问题

我的问题是之前按照网上的文档设置了vm的共享文件夹&#xff0c;能成功使用&#xff0c;但是问题是下一次打开之后就找不到了&#xff0c;虚拟机设置里共享文件夹是启用的&#xff0c;文件夹也完成了映射网络驱动器&#xff0c;但是就是找不到共享文件夹 解决方法&#xff1a;…...

编程日记 2024/3/23 21:33:10

uni app 空挡接龙

pc游戏 空挡接龙 还不完整。现在没时间搞了记录在这里&#xff0c;等以后有时间了再继续搞。 <template><view class"page_main"><view class"contentone"><canvas class"canvas_cla" style"z-index: 1;" canva…...

编程日记 2024/3/23 21:32:08

oracle表备份及还原

工作中&#xff0c;经常使用Navicat访问及操作Oracle数据库&#xff0c;备份表非常方便Ctrlc、Ctrlv&#xff1b;最近备份表&#xff0c;发现这种操作有问题&#xff1b;数据表有2条检查&#xff0c;使用Ctrlc、Ctrlv操作&#xff0c;发现新备份的表出现4条检查&#xff0c;再对…...

编程日记 2024/3/23 21:31:07

牛客小白月赛89补题1（ABCD)（偏难）

评价&#xff1a; 高情商&#xff1a;收获很大 &#xff0c;让自己进一步认清自己。 低情商&#xff1a;题目难&#xff0c;自己太菜了。 今天还有一些其他事&#xff0c;剩下的题明天再补。 我们从a题开始吧&#xff1a; A.签到 我们只要看看其中的max与min是否不符合即可…...

编程日记 2024/3/23 21:30:06

内存条@电脑支持的最大内存@升级内存硬件

文章目录 电脑支持的最大内存规格cpu官网查看支持的规格命令行查看脚本化 DDR内存LPDDR内存内存升级扩展&#x1f47a;插槽检查板载内存SPD内存厂商其他 内存参数&#x1f47a;性能指标使用软件查看更多内存相关的软件工具 电脑支持的最大内存规格 确认电脑最大支持内存大小和频…...

编程日记 2024/3/23 21:29:04

如何了解AI基础概念

1. **在线课程和教程&#xff1a;** - 寻找在线AI课程或教程&#xff0c;例如Coursera、edX、Udemy等平台上的课程。这些课程通常会从基础概念开始介绍&#xff0c;逐步深入。 2. **书籍阅读&#xff1a;** - 阅读与AI相关的书籍&#xff0c;如《Python深度学习》、《机…...

编程日记 2024/3/23 21:23:59

Apache James数据库存储用户信息的密码加密问题

项目场景 Apache James邮件服务器使用数据库来存储用户信息的密码加密问题&#xff1a; 将James的用户改为数据库存储James密码是如何加密验证的 1.将James的用户改为数据库存储 1、修改存储方式 找到james-2.3.2\apps\james\SAR-INF\config.xml 找到<users-store>标…...

编程日记 2024/3/23 21:22:59

大数据分布式事务的深入理解？

在一个大数据系统内部分布式事务无处不在&#xff0c;但凡一个任务分布到多台机器上执行就会涉及到分布式事务的场景&#xff0c;分布式事务一直以来都是分布式系统比较难以解决的问题。 事务的理解&#xff0c;比如你要将账户A转1块钱到账户B中&#xff0c;那么这个行为在执行…...

编程日记 2024/3/23 21:21:58

LeetCode hot100-17

41. 缺失的第一个正数给你一个未排序的整数数组 nums &#xff0c;请你找出其中没有出现的最小的正整数。 请你实现时间复杂度为 O(n) 并且只使用常数级别额外空间的解决方案。 这题要求空间复杂度为O(1)&#xff0c;要么定义单个变量&#xff0c;要么原地操作。定义长度为n的数…...

编程日记 2024/3/23 21:20:56

java网络原理（二）------TCP确认应答和超时重传

一Tcp协议 TCP&#xff0c;即Transmission Control Protocol&#xff0c;传输控制协议。人如其名&#xff0c;要对数据的传输进行一个详细的控制。 二.TCP协议段格式 知道了端口号才能进一步确认这个数据报交给了哪一个程序。16为端口号是2字节&#xff0c;范围是0到65535.如…...

编程日记 2024/3/23 21:16:53

机器学习：智能时代的核心引擎

目录 一、什么是机器学习 二、监督学习 三、无监督学习 四、半监督学习 五、强化学习 一、什么是机器学习 机器学习是人工智能的一个分支&#xff0c;它主要基于计算机科学&#xff0c;旨在使计算机系统能够自动地从经验和数据中进行学习并改进&#xff0c;而无需进行明确…...

编程日记 2024/3/23 21:14:45

Docker-Image

Docker Docker 镜像是什么为什么需要镜像镜像命令总览docker imagesdocker tagdocker pulldocker pushdocker rmidocker savedocker loaddocker image inspectdocker historydocker importdocker image prunedocker build Docker 镜像是什么 Docker image 本质上是一个 read-on…...

编程日记 2024/3/23 21:12:44

YOLOv8 如何实现多主干特征融合方式 | GhostNet+ShuffleNet / SwinTransformer+ShuffleNet

文章目录 前言模块添加方法双特征提取例子`GhostNet+ShuffleNet` 双主干结构图代码`Swin+ShuffleNet` 双主干结构图代码参数量与计算量1. 什么是YOLO-Magic框架？2. 如何加入这个框架？3. 加入后如何使用框架？4. GitHub组织是什么？...

编程日记 2024/3/23 21:11:43

工作需求ElementUi组件的使用

加油&#xff0c;新时代打工人&#xff01; 组件源码 <template><div mouseenter"mousein true" mouseleave"mousein false"><el-input type"text" clearable autocomplete"off" v-model"searchDoc.originName…...

编程日记 2024/3/23 21:09:41

自动驾驶轨迹规划之时空语义走廊（一）

欢迎大家关注我的B站： 偷吃薯片的Zheng同学的个人空间-偷吃薯片的Zheng同学个人主页-哔哩哔哩视频 (bilibili.com) 目录 1.摘要 2.系统架构 3.MPDM 4.时空语义走廊...

编程日记 2024/3/23 21:07:39

Allegro等长设置翻车实录：拓扑模板法的3个坑与手工PinPair的救赎

Allegro等长设计避坑指南&#xff1a;从拓扑模板到精准PinPair的实战演进在高速PCB设计中&#xff0c;等长匹配如同精密钟表里的齿轮啮合&#xff0c;差之毫厘便可能导致整个系统时序崩塌。当设计从简单的点对点结构升级到多负载复杂拓扑时&#xff0c;Allegro用户常陷入两种典…...

编程新知 2026/5/26 3:32:09

用C语言解决‘换硬币’问题？我来教你如何调试和验证你的循环逻辑

用C语言解决‘换硬币’问题&#xff1f;我来教你如何调试和验证你的循环逻辑 当你第一次面对"换硬币"这类组合问题时&#xff0c;那种既兴奋又困惑的感觉我至今记忆犹新。作为C语言初学者&#xff0c;理解多重循环的运作机制就像在迷宫中寻找出口——每次你以为找到了…...

编程新知 2026/5/26 3:17:59

第3篇：系统透视——信息部门如何构建“税务友好型”IT架构

本篇导读&#xff1a;如果你是信息总监或IT负责人&#xff0c;请通读全文&#xff0c;尤其是“系统合规设计的三必须”和“现场检查SOP”&#xff1b;如果你是财税人员&#xff0c;请重点阅读“研产供销全链条的系统对接要求”和“与IT部门的协作要点”&#xff1b;如果你是老板…...

编程新知 2026/5/26 1:19:05

别再死记硬背了！用5个生活化比喻彻底搞懂Linux进程的fork、exec和wait

别再死记硬背了&#xff01;用5个生活化比喻彻底搞懂Linux进程的fork、exec和wait想象你正在厨房准备一顿大餐。菜谱上写着"切菜"、"炒菜"、"装盘"等步骤&#xff0c;但突然发现需要同时处理多道菜品——这时候&#xff0c;你会本能地让家人分工…...

编程新知 2026/5/26 0:03:57

【DeepSeek漏洞扫描辅助实战指南】：20年安全专家亲授3大避坑法则与5步提效流程

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;DeepSeek漏洞扫描辅助的核心价值与适用边界 DeepSeek漏洞扫描辅助并非通用型渗透测试引擎&#xff0c;而是一个聚焦于大语言模型&#xff08;LLM&#xff09;应用层安全的轻量级分析工具。其核心价值在…...

编程新知 2026/5/25 19:57:28

BetterJoy终极指南：3分钟让你的Switch手柄变身PC游戏神器

BetterJoy终极指南&#xff1a;3分钟让你的Switch手柄变身PC游戏神器 【免费下载链接】BetterJoy Allows the Nintendo Switch Pro Controller, Joycons and SNES controller to be used with CEMU, Citra, Dolphin, Yuzu and as generic XInput 项目地址: https://gitcode.c…...

编程新知 2026/5/25 19:36:54

告别手动复制！用这个自定义编辑器脚本一键备份/克隆Unity Terrain Data

告别手动复制&#xff01;用这个自定义编辑器脚本一键备份/克隆Unity Terrain Data在Unity关卡设计和技术美术的工作流中&#xff0c;地形数据的灵活复用往往意味着反复的手动操作——导出高度图、备份材质参数、复制植被分布&#xff0c;每个环节都可能成为效率瓶颈。想象这样…...

编程新知 2026/5/26 19:34:35

XZ1018,100V,40A,NMOS 封装：TO252

封装&#xff1a;TO252类型&#xff1a;NVDS&#xff1a;100V VGS&#xff1a; 20V ID&#xff1a;40ARDS(ON)&#xff1a;10V <14mΩRDS(ON)&#xff1a;4.5V <19mΩ型号&#xff1a; XZ1018 封装&#xff1a;TO252类型&#xf…...

编程新知 2026/5/25 17:55:32

基于Jetson Nano与JNEEG Shield的脑电信号采集与边缘AI处理实战

1. 项目概述&#xff1a;低成本脑机接口的硬件基石 如果你对脑机接口、生物信号处理或者边缘AI应用感兴趣&#xff0c;但又苦于专业设备动辄数万甚至数十万的高昂门槛&#xff0c;那么JNEEG Shield的出现&#xff0c;可能会为你打开一扇新的大门。这是一个专为NVIDIA Jetson Na…...

编程新知 2026/5/26 21:43:34

为什么你的霓虹总像“塑料灯带”？Midjourney光子散射模拟缺陷曝光：3个被官方隐瞒的--sref调参禁区

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;为什么你的霓虹总像“塑料灯带”&#xff1f; 霓虹效果在现代 UI 设计中无处不在——按钮悬停、加载指示器、焦点高亮……但多数实现却流于表面&#xff1a;生硬的 box-shadow、固定色值的渐变边框、缺乏物理感…...

编程新知 2026/5/25 16:42:13