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

【Django学习笔记（四）】JavaScript 语言介绍

news 2026/2/7 18:26:29

JavaScript 语言介绍

前言
正文
- 1、JavaScript 小案例
- 2、代码位置
- - 2.1 在当前 HTML 文件中
  - 2.2 在其他 js 文件中
- 3、代码注释
- - 3.1 HTML的注释
  - 3.2 CSS的注释
  - 3.3 Javascript的注释
- 4、变量 & 输出
- - 4.1 字符串
  - 4.2 数组
  - 4.3 对象(python里的字典)
- 5、条件语句
- 6、函数
- 7、DOM
- - 7.1 根据 ID 获取标签
  - 7.2 获取标签中的文本
  - 7.3 修改标签中的文本
  - 7.4 创建标签
  - 7.5 标签写内容
  - 7.6 动态创建标签并写入内容
  - 7.7 事件的绑定

前言

JavaScript：是一门编程语言，浏览器就是JavaScript语言的解释器；
DOM和BOM：相当于这门编程语言内置的一些模块，相当于 Python 中的 re、random模块等；
jQuery：相当于第三方模块，相当于 Python 中的 requests、openx l模块等；

本篇文章中主要介绍 JavaScript 的相关用法。

正文

1、JavaScript 小案例

JavaScript 的意义：让程序实现动态效果。

例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.menus {width: 200px;border: 1px solid red;}.menus .header {background-color: gold;padding: 20px 10px;}</style>
</head>
<body><div class="menus"><div class="header" onclick="myFunc()">大标题</div><div class="item">内容</div></div><script type="text/javascript">function myFunc() {alert("hello")//confirm("是否要继续？")}</script></body>
</html>

在这里插入图片描述
点击“大标题”，弹出对话框或选择框：

在这里插入图片描述

2、代码位置

2.1 在当前 HTML 文件中

head中
body中(推荐)

注意: 如果写在了 head 中，body 的 html 代码不会执行，会先执行 head 中的javascript 之后，才会显示 html 代码

2.2 在其他 js 文件中

导入JS文件：

<body><script src="static/js/my.js"></script>
</body>

3、代码注释

3.1 HTML的注释

<!-- 注释内容 -->

3.2 CSS的注释

只能写在 style 代码块中：

/* 注释内容 */

3.3 Javascript的注释

只能写在 script 代码块中：

// 注释内容/* 注释内容 */

4、变量 & 输出

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

在这里插入图片描述

4.1 字符串

//声明
var name = "声明一个字符串";
var name = String("声明一个字符串");

常见功能

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">欢迎中国联通领导XXX莅临指导</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>

在这里插入图片描述

4.2 数组

//定义数组
var v1 = [11,22,33,44];
var v2 = Array([11,22,33,44]);//操作
var v1 = [11,22,33,44];v1[1]                   //获取
v1[0] = "00"            //修改//追加
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){//index=0/1/2/3  循环的是索引//data=v1[index] ...
}//循环的第二种方式：
for(var i=0; i<v1.length; i++){...
}

数组案例: 动态数据添加

<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> 标签  文本和li结合起来var tag = document.createElement("li");//在 li 标签中写入内容tag.innerText = text;//添加到 id=city 那个标签的里面 DOMvar parentTag = document.getElementById("city");parentTag.appendChild(tag);}</script>
</body>
</html>

在这里插入图片描述

4.3 对象(python里的字典)

//创建对象
info = {"name":"对象","age":18,
}
//也可以不加""
info = {name:"对象",age:18
}
info.age;
info.name = "Hello"info["age"]
info["name"] = "Hello";
//删除
delete info["age"]//循环
for(var key in info){//key=name or age； 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: "姓名1", age: 21 },{ id: 2, name: "姓名2", age: 22 },{ id: 3, name: "姓名3", age: 23 },{ id: 4, name: "姓名4", age: 24 },{ id: 5, name: "姓名5", age: 25 },{ id: 6, name: "姓名6", age: 26 },];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>

在这里插入图片描述

5、条件语句

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

6、函数

function func(){...//函数的内容
}//执行函数
func()

7、DOM

DOM 是一个模块，基于这个模块可以对 HTML 页面中的标签进行操作

7.1 根据 ID 获取标签

//根据 ID 获取标签
var tag = doucment.getElementById("xx");

7.2 获取标签中的文本

//获取标签中的文本
tag.innerText

7.3 修改标签中的文本

//修改标签中的文本
tag.innerText = "hhhhhhh";

7.4 创建标签

//创建 <li></li> 标签
var tag = document.createElement("li");

7.5 标签写内容

//在 li 标签中写入内容
tag.innerText = text;

7.6 动态创建标签并写入内容

<body>    <ul id="city"><li>北京</li></ul><script type="text/javascript">//根据 ID 获取标签<ul>var tag = document.getElementById("city");//根据 ID 获取标签<li>var newTag= document.getElementById("li");//<li>标签写内容"北京"newTag.innerText ="北京";//添加到"id=city"的标签里面 DOMtag.appendChild(newTag);}</script>
</body>

7.7 事件的绑定

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title>
</head><body><input type="text" placeholder="请输入内容" id="content"><!-- 通过οnclick="addCityInfo()" 进行事件的绑定 --><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 来实现

【Django学习笔记（四）】JavaScript 语言介绍

JavaScript 语言介绍前言正文1、JavaScript 小案例2、代码位置2.1 在当前 HTML 文件中2.2 在其他 js 文件中 3、代码注释3.1 HTML的注释3.2 CSS的注释3.3 Javascript的注释 4、变量 & 输出4.1 字符串4.2 数组4.3 对象(python里的字典) 5、条件语句6、函数7、DOM7.1 根据 I…...

编程日记 2024/4/4 18:58:37

IO和NIO的主要区别在哪里？

Java 中的 IO（输入/输出）和 NIO（新输入/输出）都是处理输入和输出操作的方式，它们的主要区别在于如何处理数据的读写。阻塞与非阻塞: IO是阻塞的，这意味着当一个线程调用read()或write()时，该线…...

编程日记 2024/4/4 18:56:35

爬虫部署平台crawlab使用说明

Crawlab 是一个基于 Go 语言的分布式网络爬虫管理平台，它支持 Python、Node.js、Jar、EXE 等多种类型的爬虫。 Crawlab 提供了一个可视化的界面，并且可以通过简单的配置来管理和监控爬虫程序。以下是 Crawlab 的一些主要优点： 集中管理&am…...

编程日记 2024/4/4 18:55:34

uniapp uni.scss中使用@mixin混入，在文件引入@include 样式不生效 Error: Undefined mixin.（踩坑记录一）

问题： 在uni.scss文件定义mixin 2. 在vue文件引入: 3. 出现报错信息: 4. 问题思考： 是不是需要引入uni.scss ？ 答案不需要 uni.scss是一个特殊文件，在代码中无需 import 这个文件即可在scss代码中使用这里的样式变量。uni-app的…...

编程日记 2024/4/4 18:54:33

Redis的5大常见数据类型的用法

上一篇文章我们讲了Redis的10大应用场景，这一篇文章就针对Redis的常用数据结构进行一个说明，通过示例的形式演示每一种数据结构如何使用。当涉及Redis的数据操作时，不同数据类型对应的不同数据结构，如下就对5大常用的数据类型进行…...

编程日记 2024/4/4 18:50:29

刘小光本就疑心赵本山与他媳妇李琳有染，赵本山为证实清白便想起蛋糕上的字，结果呢？

刘小光本就疑心赵本山与他媳妇李琳有染，赵本山为证实清白便想起蛋糕上的字，结果呢？ ——小品《生日快乐》（中5）的台词 （接上） 赵本山：噢!对对!那谁，老四，是…...

编程日记 2024/4/4 18:49:28

Unity之PUN实现多人联机射击游戏的优化（Section 2）

目录 🎮一、准备工作 🎮二、实现手雷投掷动作 🎮三、手雷投掷同步 💤3.1 photonView.RPC 🎮四、同步手雷伤害这几周都给我布置任务了，最近可忙。现在终于有机会更新了，也谢谢大家的阅读&a…...

编程日记 2024/4/4 18:46:25

多叉树题目：N 叉树的层序遍历

文章目录题目标题和出处难度题目描述要求示例数据范围解法思路和算法代码复杂度分析题目标题和出处标题：N 叉树的层序遍历出处：429. N 叉树的层序遍历难度 4 级题目描述要求给定一个 N 叉树的根结点 root \texttt{root} root&#xf…...

编程日记 2024/4/4 18:45:24

时序数据库IoTDB：功能详解与行业应用

一文读懂时序数据库 IoTDB。 01 为什么需要时序数据库解释时序数据库前，先了解一下何谓时序数据。时序数据，也称为时间序列数据，是指按时间顺序记录的同一统计指标的数据集合。这类数据的来源主要是能源、工程、交通等工业物联网强关联行业…...

编程日记 2024/4/4 18:41:20

信息系统项目管理师——第18章项目绩效域管理（一）

本章节内容属于第四版新增知识，为PMBOK第七版专有，选择、案例、论文都会考，属于比较重要的章节。选择题，稳定考3分左右，新教材基本考课本原话，需要多读课本，多刷题。案例题，考的概…...

编程日记 2024/4/4 18:36:14

WebSocket用户验证

在WebSocket中，如何携带用户的验证信息一、在OnMessage中进行验证客户端在连接到服务器后，客户端通过发送消息，服务器端在OnMessage方法中，进行信息验证，这种方式需要将用户身份验证及接收用户消息进行混合处理&am…...

编程日记 2024/4/4 18:35:13

NOSQL（非关系型数据库）的优缺点有哪些？

优点： 高度灵活且可扩展：NoSQL数据库不受固定数据模型的限制，可以根据应用需求灵活设计数据结构，轻松应对大规模数据集。此外，它支持分布式架构，具有出色的水平扩展能力，能够高效地处理大量数据…...

编程日记 2024/4/4 18:33:12

个人推荐Redis比较好的一种使用规范

随着对个人项目的不断开发、迭代和重构，博主在这个过程中总结出了一套使用redis的较好的规范。主要包含Redis的key命名规范和Redis代码规范。主要内容主要包含以下几个内容： 同一应用的key在最前面添加统一的前缀，如应用名； 案…...

编程日记 2024/4/4 18:32:11

【教程】宝塔default.db占用空间几十g解决方法|宝塔占用磁盘空间特别大解决方法|宝塔磁盘被占满怎么清理

目录一、前言二、排查问题三、解决方法一、前言用过宝塔创建网站，大家应该都非常熟悉，但是用随着用的时间越来越多，宝塔所占用的空间也越来越多，不停的加大数据盘都没有用，我原先买了30G够用了，随着时间…...

编程日记 2024/4/4 18:30:09

Unity类银河恶魔城学习记录11-15 p117 Ice and Fire item Effect源代码

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释，可供学习Alex教程的人参考此代码仅为较上一P有所改变的代码【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili IceAndFire_Controller.cs using System.Collections; using System.Coll…...

编程日记 2024/4/4 18:29:07

Qt QML的枚举浅用

QML的枚举用法序言概念命名规则在QML定义枚举的规范用法QML的枚举定义方法供QML调用的，C的枚举定义方法序言概念 QML的枚举和C的其实差不多，但是呢，局限比较多，首先不能在main.qml里定义，也不能在子项中定义。 …...

编程日记 2024/4/4 18:27:05

设计模式：单例模式六种实现

单例模式有多种实现方式，每种方式都有其设计思想、优缺点以及适用的使用场景。以下是一些常见的单例实现方式： 1. 懒汉式（线程不安全）设计思想这种实现方式采用了类加载的懒加载机制来保证单例只在第一次使用时被创建。实现代码 public class Singleton {private s…...

编程日记 2024/4/4 18:26:04

Mybatis-Plus05(分页插件）

分页插件 MyBatis Plus自带分页插件，只要简单的配置即可实现分页功能 1. 添加配置类 Configuration MapperScan("com.atguigu.mybatisplus.mapper") //可以将主类中的注解移到此处 public class MybatisPlusConfig {Bean public MybatisPlusIntercepto…...

编程日记 2024/4/4 18:20:59

python爬取B站视频

参考：https://cloud.tencent.com/developer/article/1768680 参考的代码有点问题，请求头需要修改，上代码： import requests import re # 正则表达式 import pprint import json from moviepy.editor import AudioFileClip, Vid…...

编程日记 2024/4/4 18:18:57

深度学习500问——Chapter05：卷积神经网络（CNN）（2）

文章目录 5.6 有哪些池化方法 5.7 1x1卷积作用 5.8 卷积层和池化层有什么区别 5.9 卷积核是否一定越大越好 5.10 每层卷积是否只能用一种尺寸的卷积核 5.11 怎样才能减少卷积层参数量 5.12 在进行卷积操作时，必须同时考虑通道和区域吗 5.13 采用宽卷积的好处有什么 …...

编程日记 2024/4/4 18:17:56

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时，需结合业务场景设计数据流转链路，重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点： 一、核心对接场景与目标商品数据同步场景：将1688商品信息…...

编程新知 2025/11/30 16:55:32

HTML 列表、表格、表单

1 列表标签作用：布局内容排列整齐的区域列表分类：无序列表、有序列表、定义列表。例如： 1.1 无序列表标签：ul 嵌套 li，ul是无序列表，li是列表条目。注意事项： ul 标签里面只能包裹 li…...

编程新知 2026/1/24 22:33:33

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

编程新知 2026/1/29 18:30:30

C++ Visual Studio 2017厂商给的源码没有.sln文件易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj，再用Visual Studio 2022打开。再保侟就有.sln文件了。易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

编程新知 2026/2/5 4:21:48

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码，实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

编程新知 2025/12/7 23:28:25

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时，Again增益0db变化为6DB，画面的变化只有2倍DN的增益，比如10变为20。这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析： 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

编程新知 2025/9/30 16:23:57

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

编程新知 2026/1/25 13:33:35

快刀集(1): 一刀斩断视频片头广告

一刀流：用一个简单脚本，秒杀视频片头广告，还你清爽观影体验。 1. 引子作为一个爱生活、爱学习、爱收藏高清资源的老码农，平时写代码之余看看电影、补补片，是再正常不过的事。电影嘛，要沉浸，…...

编程新知 2026/1/8 0:40:27

多模态图像修复系统：基于深度学习的图片修复实现

多模态图像修复系统：基于深度学习的图片修复实现 1. 系统概述本系统使用多模态大模型（Stable Diffusion Inpainting）实现图像修复功能，结合文本描述和图片输入，对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...

编程新知 2025/9/9 21:28:16

【把数组变成一棵树】有序数组秒变平衡BST，原来可以这么优雅！

【把数组变成一棵树】有序数组秒变平衡BST，原来可以这么优雅！ 🌱 前言：一棵树的浪漫，从数组开始说起程序员的世界里，数组是最常见的基本结构之一，几乎每种语言、每种算法都少不了它。可你有没有想过，一组看似“线性排列”的有序数组，竟然可以**“长”成一棵平衡的二…...

编程新知 2025/8/26 4:33:55

JavaScript 语言介绍

前言

正文

1、JavaScript 小案例

2、代码位置

2.1 在当前 HTML 文件中

2.2 在其他 js 文件中

3、代码注释

3.1 HTML的注释

3.2 CSS的注释

3.3 Javascript的注释

4、变量 & 输出

4.1 字符串

4.2 数组

4.3 对象(python里的字典)

5、条件语句

6、函数

7、DOM

7.1 根据 ID 获取标签

7.2 获取标签中的文本

7.3 修改标签中的文本

7.4 创建标签

7.5 标签写内容

7.6 动态创建标签并写入内容

7.7 事件的绑定

相关文章：