Python Web开发记录 Day4：JavaScript

名人说：莫道桑榆晚，为霞尚满天。——刘禹锡（刘梦得，诗豪）
创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊）

目录

      • 四、JavaScript
        • 1、JavaScript-基础
          • ①JavaScript
          • ②代码位置
          • ③注释
          • ④变量
          • ⑤字符串
        • 2、JavaScript-常见类型和事件
          • ①数组
          • ②对象（字典）
          • ③条件语句
          • ④函数
          • ⑤DOM
          • ⑥事件的绑定
        • 3、Python基础和前端三组件----总结和回顾
        • 4、综合案例
          • ①HTML
          • ②CSS
          • ③JavaScript

四、JavaScript

1、JavaScript-基础

JavaScript是一种高级的、解释执行的编程语言，它是网络开发中不可或缺的一部分。最初，JavaScript被创建出来是为了使网页更加生动活泼，如今，它已经发展成为了一种全栈开发语言，不仅仅被用于客户端（浏览器）的脚本编写，还能用于服务器端的开发（比如使用Node.js）。

在客户端，JavaScript用于实现网页上的动态效果和交互功能，比如表单验证、动态加载内容、滑动效果等。在服务器端，JavaScript可以用于构建服务器应用程序、操作数据库等。

概要：

  • JavaScript，是一门编程语言。浏览器就是JavaScript语言的解释器。

  • DOM和BOM

    相当于编程语言内置的模块。
    例如：Python中的re、random、time、json模块等

  • jQuery

    相当于是编程语言的第三方模块。
    例如：python中的requests、openpyxl

①JavaScript

JavaScript的意义是什么？

让框架动起来

案例1：弹窗确认

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</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("你好呀");confirm("是否要继续？")}</script>
</body>
</html>

image-20240225232251747

在本节中，我们将探讨JavaScript的几个实际应用案例，并通过简单的代码示例来实现它们。这些案例将覆盖动态网页交互、数据处理以及简单的后端API创建，展示JavaScript的多方面能力。

案例2: 动态更新网页内容

一个常见的JavaScript应用是动态地更新网页内容。以下是一个简单的示例，展示了如何使用JavaScript响应用户的点击事件，来动态更新页面上的文本。

<!DOCTYPE html>
<html>
<head><title>动态更新内容</title>
</head>
<body><p id="demo">JavaScript能够改变这段文本。</p><button type="button" onclick="changeText()">点击我！</button><script>
function changeText() {document.getElementById("demo").innerHTML = "欢迎来到JavaScript世界！";
}
</script></body>
</html>

在这里插入图片描述

这个例子中，当用户点击按钮时，changeText函数会被触发，进而使用document.getElementById().innerHTML更改段落的内容。

案例3: 简单的数据处理

JavaScript也常用于数据处理和展示。下面的示例展示了如何计算并展示一个数字数组的平均值。

function calculateAverage(numbers) {const sum = numbers.reduce((acc, curr) => acc + curr, 0);return sum / numbers.length;
}const numbers = [10, 20, 30, 40, 50];
const average = calculateAverage(numbers);
console.log("平均值:", average);

在这里插入图片描述

这段代码首先定义了一个calculateAverage函数，该函数使用reduce方法计算数组中所有数字的和，然后除以数组的长度得到平均值，最后打印到控制台。

案例4: 创建简单的后端API

使用Node.js，JavaScript能够创建简单的后端服务。以下是一个使用Express框架创建的简单API示例，它返回一个欢迎信息。

首先，需要安装Express：

npm install express

然后，创建一个app.js文件：

const express = require('express');
const app = express();app.get('/', (req, res) => {res.send('欢迎使用Express!');
});const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {console.log(`服务器运行在端口${PORT}`);
});

启动服务器：

node app.js

这个简单的Express应用创建了一个HTTP GET路由，当访问根URL (/) 时，它会发送一个欢迎信息。

通过这些示例，我们可以看到JavaScript作为一种灵活且强大的编程语言，在前端和后端开发中的广泛应用。

小结：前端三大组件

  • HTML 框架
  • CSS 装饰
  • JavaScript 让装饰好的框架动起来
②代码位置

在HTML文档中，JavaScript代码可以放置在几个不同的位置，通常取决于具体的需求和场景。这些位置包括：

  1. <head>标签内: 将JavaScript代码放置在HTML文档的<head>部分是一种常见做法。这样做可以在页面的其余部分加载之前先加载JavaScript代码。但是，如果脚本较大或依赖于页面内容，则可能会导致页面加载速度变慢。

    <head><script>// JavaScript代码</script>
</head>

  2. <body>标签内: 另一种常见的做法是将JavaScript代码放置在<body>标签的末尾。这样做可以确保在执行JavaScript代码之前，HTML文档的所有元素都已经加载完毕，特别适用于那些需要操作DOM元素的脚本。（推荐*）

    <body><!-- 页面内容 --><script>// JavaScript代码</script>
</body>

  3. 外部JavaScript文件: 通过<script>标签的src属性引入外部JavaScript文件，这种方式有利于代码的重用和缓存，同时也可以使HTML文档结构更清晰。（推荐*）

    <script src="path/to/your-script.js"></script>

  4. 事件属性内: JavaScript代码也可以直接写在HTML元素的事件属性内，如onclick、onload等，但这种做法通常不推荐，因为它会使HTML与JavaScript代码耦合得过紧，不利于维护。

    <button onclick="alert('Hello, World!')">点击我</button>

  5. JavaScript模块: 在支持ES6模块的现代浏览器中，可以使用<script type="module">来编写模块化的JavaScript代码，这使得代码组织和依赖管理变得更加清晰。

    <script type="module">// 模块化的JavaScript代码
</script>

选择JavaScript代码的放置位置时，应考虑到脚本的作用、依赖关系、以及对页面加载性能的影响。在实践中，将脚本放置在<body>标签的末尾通常被视为最佳实践，特别是对于那些需要操作DOM或依赖于页面内容的脚本。

image-20240225235916421

JS代码的存在形式：

  • 当前HTML中
    <script type="text/javascript">// 此处写JavaScript代码alert(123);</script>
  • 在其他js文件中，导入使用

image-20240226000556886

③注释
  • HTML的注释
<!-- 注释内容 -->
  • CSS的注释，style代码块
/*注释内容*/
  • JavaScript的注释，Script代码块
//注释内容
或
/* 注释内容 */
④变量

  • Python，编程语言

    name="张三"

  • JavaScript，编程语言

    在JavaScript中，变量是用来存储数据值的容器。变量的声明和使用是JavaScript编程的基础。以下是一些关于JavaScript变量的重要概念：

    1. 声明变量: 在JavaScript中，可以使用var、let或const关键字来声明变量。var是传统的声明方式，而let和const是ES6引入的新关键字，提供了更多控制和更清晰的作用域。

      var name = "Alice";
let age = 30;
const country = "USA";

    2. 变量命名规则: 变量名可以包含字母、数字、下划线（_）和美元符号（$），但不能以数字开头。变量名也不能是JavaScript的保留关键字。

    3. 数据类型: JavaScript是一种动态类型语言，这意味着在声明变量时不需要指定数据类型。变量的数据类型可以在运行时改变。JavaScript支持多种数据类型，包括字符串（String）、数字（Number）、布尔值（Boolean）、数组（Array）、对象（Object）等。

      var message = "Hello";  // 字符串
var count = 10;         // 数字
var isValid = true;     // 布尔值
var list = [1, 2, 3];   // 数组
var person = {name: "Bob", age: 25};  // 对象

    4. 作用域: 在JavaScript中，变量的作用域决定了其可访问性。var声明的变量具有函数作用域，而let和const声明的变量具有块作用域。块作用域意味着变量仅在其声明的代码块内部可访问。

      function test() {var localVar = "local";  // 函数作用域if (true) {let blockVar = "block";  // 块作用域console.log(blockVar);   // 输出: block}// console.log(blockVar);    // 错误: blockVar is not defined
}

    5. 变量提升: 使用var声明的变量会被提升到其所在函数或全局作用域的顶部，这意味着可以在声明之前使用变量。而let和const声明的变量不会被提升。

      console.log(x);  // 输出: undefined
var x = 5;console.log(y);  // 错误: Cannot access 'y' before initialization
let y = 10;

    理解和正确使用变量是JavaScript编程的基础。随着JavaScript的发展，推荐使用let和const来声明变量，以便获得更好的作用域控制和避免一些常见的错误。

案例：定义变量并打印输出

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script type="text/javascript">var name = "张三"; //字符串console.log(name)</script>
</body>
</html>

在这里插入图片描述

⑤字符串

在JavaScript中，字符串是存储文本数据的一种数据类型，用于表示文本值。字符串可以包含字母、数字、空格、标点符号等字符。以下是关于JavaScript中字符串的一些基本概念和操作：

  1. 创建字符串: 字符串可以使用单引号'...'、双引号"..."或模板字符串（反引号`…`）来创建。模板字符串提供了嵌入变量和表达式的能力。

    var str1 = 'Hello, World!';
var str2 = "JavaScript programming";
var name = "Alice";
var greeting = `Hello, ${name}!`;  // 使用模板字符串

  2. 字符串的不可变性: 在JavaScript中，字符串是不可变的。这意味着一旦一个字符串被创建，它的内容就不能被改变。要修改字符串，必须创建一个新的字符串。

    var str = "Hello";
str[0] = "J";  // 尝试修改字符串的第一个字符
console.log(str);  // 输出: Hello，原字符串未改变

  3. 字符串属性和方法: JavaScript为字符串提供了多种属性和方法，以便进行操作和处理，如长度获取、字符串拼接、查找、替换、切割等。

    • 获取字符串长度: 使用.length属性。

      console.log("Hello".length);  // 输出: 5

    • 拼接字符串: 可以使用+操作符或模板字符串。

      var str3 = str1 + " " + str2;  // 使用+操作符
var str4 = `${str1} ${str2}`;  // 使用模板字符串

    • 查找字符串: 使用.indexOf()或.includes()方法。

      console.log(str2.indexOf("Java"));  // 输出: 0
console.log(str2.includes("Java"));  // 输出: true

    • 替换字符串内容: 使用.replace()方法。

      var newStr = str2.replace("JavaScript", "Web");
console.log(newStr);  // 输出: Web programming

    • 切割字符串: 使用.slice()或.substring()方法。

      var subStr = str2.slice(0, 10);
console.log(subStr);  // 输出: JavaScript

  4. 转义字符: 在字符串中，可以使用反斜杠\来表示特殊字符，如换行\n、制表符\t、单引号\'、双引号\"等。

    var multilineStr = "This is line 1.\nThis is line 2.";
console.log(multilineStr);

  5. 字符串比较: JavaScript使用词典顺序（基于Unicode编码）比较字符串。

    console.log("apple" < "banana");  // 输出: true

字符串是JavaScript中用于处理文本数据的基本数据类型之一，熟练掌握字符串的操作对于进行文本处理和用户交互是非常重要的。

案例1：处理用户输入的全名

//1.获取用户全民
var fullName = "Jane lora";
//2.提取姓氏
var lastName = fullName.split(" ")[1];
//3.检查姓氏长度
console.log(`Your last name, ${lastName}, has ${lastName.length} characters.`);
var lastNameUpper = lastName.toUpperCase();
//4.转换姓氏为大写
console.log(`Your last name in uppercase: ${lastNameUpper}`);
//5.替换姓氏中的特定字符
var lastNameReplaced = lastName.replace(/e/g, "*");
console.log(`Your last name with replacements: ${lastNameReplaced}`);
//6.向用户问好
var firstName = fullName.split(" ")[0];
console.log(`Hello, ${firstName}!`);

在这里插入图片描述

这个案例展示了字符串的创建、分割、长度检查、大小写转换、内容替换以及模板字符串的使用，涵盖了字符串处理的几个重要知识点。接下来补充说明一下JavaScript中字符串的声明方式，和常见、常用的几个功能：

//声明方式
var name = "张三";
var name = String("张三")

//常见功能
var name = "中国联通"; 
var v1 = name.length; //字符串长度
var v2 = name[0]; 	  //name.charAt(3)
var v3 = name.trim(); /*trim() 方法用于删除字符串的头尾空白符，空白符包括：空格、制表符 tab、换行符等其他空白符等。trim() 方法不会改变原始字符串。trim() 方法不适用于 null, undefined, Number 类型。	*/	
var v4 = name.substring(1,2); /*substring() 方法用于提取字符串中介于两个指定下标之间的字符。返回的子串包括 开始 处的字符，但不包括 结束 处的字符。即：前取后不取*/

案例2：跑马灯

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>跑马灯</title>
</head>
<body>
<span id="txt">欢迎中国联通领导张三指导</span><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中的定时器，如：每1s执行一次show函数setInterval(show,1000);
</script>
</body>
</html>

223gif

2、JavaScript-常见类型和事件
①数组

数组是一种用于存储多个值的单一变量。在JavaScript中，数组可以包含不同类型的元素，比如字符串、数字、对象，甚至其他数组。

a.创建数组

可以使用数组字面量来创建数组，方法是将元素用逗号分隔并放在方括号[]中。

let fruits = ["Apple", "Banana", "Cherry"];

b.访问数组元素

通过索引访问数组元素，索引从0开始。

let firstFruit = fruits[0]; // "Apple"

c.数组方法

JavaScript提供了许多操作数组的方法，例如.push()添加元素到数组末尾，.pop()从数组末尾移除元素等。

fruits.push("Durian"); // 添加"Durian"到fruits数组
let lastFruit = fruits.pop(); // 移除并返回数组的最后一个元素 "Durian"

//定义
var v1 = [11,22,33,44];
var v2 = Array([11,22,33,44]);

//方法/操作
var v1 = [11,22,33,44]v1[1]
v1[0] = "张三"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];

var v1 = [11,22,33,44];
for(var idx in v1){// idx = 0/1/2/3  data = v1[idx]
}

var v1 = [11,22,33,44];
for(var i=0; i<v1.length; i++){// i=0/1/2/3  data=v1[idx]
}

注意：break和continue（break是结束整体，continue是跳过本次）

案例：动态数据

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><ul id="city">
<!--        <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>

image-20240226163712684

②对象（字典）

对象是包含一组键值对的集合。每个键值对将一个键映射到一个值。键是字符串（或Symbol），而值可以是任何类型的数据。

a.创建对象

对象可以通过对象字面量创建，即使用大括号{}包围键值对，键和值之间使用冒号分隔。

let person = {name: "John",age: 30,isEmployed: true
};

info = {"name":"张三","age":18
}info = {"name":"张三",age:18
}

b.访问对象属性

可以使用点.或方括号[]语法来访问对象的属性。

let personName = person.name; // 使用点语法
let personAge = person["age"]; // 使用方括号语法

info.age
info.name = "郭智"info["age"]
info["name"] = "郭智"delete info["age"]

info = {name:"张三",age:18
}for(var key in info){// key = name/age   data = info[key]
}

案例：动态表格

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</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>郭智</td><td>19</td></tr></tbody></table><script type="text/javascript">var info = {id:1,name:"郭智",age:19};var tr = document.createElement("tr");for (var key in info){var text = info[key];var td = document.createElement("td");td.innerText = text;tr.appendChild(td);}// console.log(tr);var bodyTag = document.getElementById("body");bodyTag.appendChild(tr);
</script>
</body>
</html>

image-20240226213443875

③条件语句

条件语句用于基于条件来执行不同代码

a.if语句

if (condition) {// 当条件为真时执行的代码
}

b.if…else语句

if (condition) {// 当条件为真时执行的代码
} else {// 当条件为假时执行的代码
}

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

c.switch语句

对于多个条件分支，switch语句提供了一种更清晰的方式。

switch(expression) {case value1:// 当expression等于value1时执行的代码break;case value2:// 当expression等于value2时执行的代码break;default:// 如果没有匹配的case，执行这里的代码
}
④函数

在JavaScript中，函数是一段可以被重复调用的代码块。函数可以接受参数、执行特定任务并返回结果。它们是组织和复用代码的基本单位。

a.创建函数

函数可以通过几种方式创建，最常见的是使用function关键字。

function greet(name) {return "Hello, " + name + "!";
}

b.调用函数

一旦定义了函数，就可以通过其名称和一对圆括号来调用它，如果有参数，还需要在圆括号中提供实参。

let greeting = greet("Alice");
console.log(greeting); // 输出: Hello, Alice!

c.匿名函数和函数表达式

函数也可以是匿名的，即没有名称。这种函数通常用于函数表达式或作为回调函数传递。

let show = function(message) {console.log(message);
};show("I'm an anonymous function!"); // 输出: I'm an anonymous function!

d.箭头函数

ES6引入了箭头函数，提供了一种更简洁的函数写法。箭头函数对this的处理也与传统函数不同，更适合用在某些特定的场合，比如回调函数和高阶函数。

const add = (a, b) => a + b;console.log(add(2, 3)); // 输出: 5

e.函数参数

函数可以接受参数，这些参数在函数被调用时传递给它。JavaScript允许函数调用时参数数量与定义时不一致，过多的参数会被忽略，缺少的参数会被视为undefined。

function sum(a, b) {return a + b;
}console.log(sum(1, 2, 3)); // 输出: 3，第三个参数被忽略
console.log(sum(1)); // 输出: NaN，因为b是undefined

f.默认参数

在ES6及更高版本中，可以为函数参数提供默认值。

function multiply(a, b = 1) {return a * b;
}console.log(multiply(5)); // 输出: 5，b使用默认值1

g.剩余参数和展开语法

剩余参数语法允许我们将一个不定数量的参数表示为一个数组。

function sumAll(...numbers) {return numbers.reduce((acc, current) => acc + current, 0);
}console.log(sumAll(1, 2, 3, 4)); // 输出: 10

展开语法（...）可以在调用函数时将数组元素作为单独的参数传递。

let nums = [1, 2, 3];
console.log(sumAll(...nums)); // 输出: 6

函数在JavaScript中是极其强大的，它们不仅可以用于执行计算和操作数据，还可以作为值传递，赋予JavaScript以灵活和表达力强的特性。

⑤DOM

DOM，简单来说，就是一个模块，这个模块可以对HTML页面中的标签进行操作。若展开来说：

DOM 是 文档对象模型 (Document Object Model) 的缩写，它是 W3C 制定的一系列标准，用于表示和操作 HTML 和 XML 文档。在 JavaScript 中，DOM 提供了一组 API，允许我们访问和操作网页中的所有元素，包括：

  • HTML 元素，例如 <div>、<p>、<img> 等
  • 文本内容
  • 样式信息
  • 事件处理

使用 DOM，我们可以动态地修改网页内容，添加交互效果，以及创建各种复杂的功能。

a.DOM 的基本概念

DOM 将 HTML 文档表示为一个树形结构，其中每个节点代表一个 HTML 元素或文本内容。每个节点都具有一系列属性和方法，用于访问和操作该节点。

  • 节点：代表 HTML 元素或文本内容的最小单位
  • 元素节点：代表 HTML 元素
  • 文本节点：代表文本内容
  • 属性：节点的特性，例如 id、class、href 等
  • 方法：节点的操作，例如 appendChild()、removeChild()、addEventListener() 等

b.DOM 操作( * )

使用 DOM，我们可以执行各种操作，例如：

  • 获取元素：可以使用 getElementById()、querySelector() 等方法获取指定元素
  • 修改元素：可以使用 innerHTML、textContent 等属性修改元素内容
  • 添加样式：可以使用 style 属性添加样式
  • 添加事件：可以使用 addEventListener() 方法添加事件处理程序

DOM 是 JavaScript 中的重要概念，用于访问和操作网页中的所有元素。掌握 DOM 操作可以让我们创建更具交互性和动态性的网页。

//根据ID获取标签
var bodyTag = document.getElementById("xx");//获取标签中的文本
tag.innerText//设置标签中的文本
tag.innerText = "哈哈哈哈哈";

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div></div><ul id="city"><li>北京</li>
</ul><script type="text/javascript">var tag = document.getElementById("city");var newTag = document.createElement("li");newTag.innerText = "北京";tag.appendChild(newTag);
</script></body>
</html>

在这里插入图片描述

⑥事件的绑定

事件绑定是JavaScript中非常重要的概念，它指的是将事件与特定的元素相关联的过程。当事件发生时，会触发与该元素绑定的事件处理函数。

a.事件绑定的三种方式

在JavaScript中，事件绑定主要有以下三种方式：

  1. 使用内联事件处理函数

这种方式是将事件处理函数直接写在HTML元素的事件属性中，例如：

<button onclick="alert('Hello, world!')">点击我</button>

在这里插入图片描述

这种方式简单易用，但不够灵活，而且代码不易维护。

  1. 使用DOM元素的事件属性

这种方式是将事件处理函数赋值给DOM元素的事件属性，例如：

<button id="btn">点击我</button><script>
var btn = document.getElementById("btn");
btn.onclick = function() {alert("Hello, world!");
};
</script>

在这里插入图片描述

这种方式比内联事件处理函数更灵活，代码也更易维护。

  1. 使用addEventListener()方法

addEventListener()方法是W3C标准推荐的事件绑定方式，它具有更好的兼容性和灵活性。

<button id="btn">点击我</button><script>
var btn = document.getElementById("btn");
btn.addEventListener("click", function() {alert("Hello, world!");
});
</script>

addEventListener()方法接受三个参数：

  • 事件类型：要绑定的事件类型，例如 “click”、“mouseover”、“mouseout” 等。
  • 事件处理函数：事件发生时要执行的函数。
  • 使用捕获阶段还是冒泡阶段来处理事件：可选参数，默认为false，表示在冒泡阶段处理事件。

b.事件绑定的注意事项

  • 事件处理函数中的this关键字指向触发事件的元素。
  • 可以使用多个事件处理函数来处理同一个事件。
  • 可以使用removeEventListener()方法来移除事件绑定。

c.事件代理

事件代理是一种优化事件绑定的技术，它可以减少事件处理函数的数量，提高代码的性能。

事件代理的基本思想是将事件处理函数绑定到父元素上，而不是子元素上。当子元素发生事件时，会沿着DOM树向上冒泡，最终到达父元素。在父元素的事件处理函数中，可以根据事件的目标元素来判断具体的事件类型。

事件代理的优势在于：

  • 可以减少事件处理函数的数量，提高代码的性能。
  • 可以更方便地处理动态添加的元素。

d.总结

事件绑定是JavaScript中非常重要的概念，掌握事件绑定可以使我们的代码更加交互。

案例1：添加信息

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><input type="button" value="点击添加" onclick ="addCityInfo();"><ul id="city"></ul><script type="text/javascript">function  addCityInfo(){var newTag = document.createElement("li");newTag.innerText = "你好";var parentTag = document.getElementById("city");parentTag.appendChild(newTag);}</script></body>
</html>

24gif

案例2：输入信息，然后添加

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><input type="text" placeholder="请输入内容" id="txtUser"/><input type="button" value="点击添加" onclick ="addCityInfo();"><ul id="city"></ul><script type="text/javascript">function  addCityInfo(){// 1.先获取输入框中用户输入的数据var txtTag = document.getElementById("txtUser");// 2.获取用户输入的内容var newString = txtTag.value;// 判断用户输入是否为空，若不为空才能继续。if (newString.length >0){// 3.创建标签,<li></li> 中间的文本信息就是用户输入的内容var newTag = document.createElement("li");newTag.innerText = newString;//4.把标签添加到ul中var parentTag = document.getElementById("city");parentTag.appendChild(newTag);// 5.将input输入框内容清空txtTag.value = "";}else {alert("输入不能为空");}}</script></body>
</html>

25gif

注意：DOM中还有很多操作。

DOM可以实现很多功能，但是比较繁琐。
页面上的效果：jQuery来实现 / vue.js /react.js
3、Python基础和前端三组件----总结和回顾
  • ①编码相关
文件存储时，使用某种编码，打开时就需要使用相同的编码，否则就会乱码。
字符底层存储时本质上都是010101010101010101。
字符和二进制的对应关系(编码):
- ASCII编码，只有256种对应关系。
- GB2312，GBK，中文和亚洲一些国家。【中文 2个字节】
- Unicode，ucs2/ucs4，包括现在发现所有文明。
- utf-8编码。【中文是用几个字节？3个字节】
Python默认解释器编码（utf-8）python.exe 代码文件如果你将代码文件保存成了gbk编码，将python默认解释器编码修改成gbk

# -*- coding: utf-8 -*-            
# @Time : 2024-02-26 22:29
data = "中"
res = data.encode('utf-8')
print(res) #b'\xe4\xb8\xad' 三个字节data = "国"
res = data.encode('gbk')
print(res) #b'\xb9\xfa' 两个字节
  • ②计算机中的单位
位 / 字节 / KB / M / G /T...流量 / 硬盘 / 内存
  • ③字符串格式化（三种）
v1 = "我是{},张三{}".format("李四",22)v2 = "我是%s，今年%d岁" %("李四",22,)name = "李四"
age = 19
v3 = f"我是{name}，今年{age}岁"
  • ④数据类型
常见的数据类型：int、bool、str、list、tuple、dict、set、float、None
- 哪些转化布尔值为False：空、None、0
- 可变和不可变划分，可变的有哪些：list、set、dict
- 可哈希和不可哈希，不可哈希的有哪些：
- 字典的键/集合的元素，必须是可哈希的类型(list、set、dict不能做字典的键和集合元素)主要的数据类型：
#1.字符串
- str- 独有功能：upper/lower/startswith/split/strip/join- 注意：str不可变，不会对原数据字符串进行修改，新的内容。- 公共功能：len/索引/切片/for循环/判断是否包含
#2.列表
- list- 独有功能：append、insert、remove、pop...注意：list可变，功能很多都是对原数据的操作。- 公共功能：len/索引/切片/for循环/判断是否包含
#3.字典
- dict	- 独有功能：get/keys/items/values- 公共功能：len/索引 for循环/判断是否包含（判断键效率高）
  • ⑤运算符
基本运算符：加减乘除...一般： 1>2 and 3<10
特殊的逻辑运算(整体的结果取决于谁？)：v1 = 99  and 88   # 88v2 = [] or 10     # 10     v3 = "联通" or []  # "联通"
  • ⑥推导式（简化生成数据）
data = []
for i in range(10):data.append(i)data = [i for i in range(10)]
data = [i for i  in range(10) if  i<5] #[0,1,2,3,4]
  • ⑦函数编程
函数的基础知识
- 定义
- 参数，概念：位置传参/关键字传参/参数默认值/动态参数 *args,**kwargs
- 返回值- 函数中一旦遇到return就立即返回，后续代码不再执行。- 如果函数没有返回值默认返回None函数的进阶：- python中是以函数为作用域的。- 全局变量和局部变量，规范：全局变量（一般大写）、局部变量（一般小写）。- 在局部变量中可以使用global关键字，global的作用是什么？引用的全局的变量，而非局部新建的变量。内置函数（python内部提供的函数）：- bin/hex/odc/max/min/divmod/sorted/oepn文件操作文件操作：- 基本操作：打开、操作、关闭，为了防止忘记关闭文件，可以怎么做？with- 打开文件时有模式：- r/rb，读         【文件不存在，报错】、【文件夹不存在，报错】- w/wb，写（清空）  【文件不存在，自动新建】【文件夹不存在，报错】- a/ab，追加       【文件不存在，自动新建】【文件夹不存在，报错】注意：os.makedirs/os.path.exists 是否存在，不存在则新建目录
  • ⑧模块
模块的分类：- 自定义模块- os.path，导入模块时python内部都回去那个目录找。- 自己写py文件时，不要与python内置模块同名- 导入方式：import、from xxx import xxx- 内置模块：time/datatime/json/re/random/os...- 第三方模块：requests、openpyxl、python-docx、flask、bs4
查看当前目录下所有文件：os.listdir / os.walk
关于时间模块：时间戳 / datetime格式 / 字符串，三种时间格式可以相互转化。
关于json模块：- json模块本质上是字符串，有一些自己格式要求，例如：无元组 / 无单引号。- json.dumps序列化时，只能序列化Python常用数据类型：--------------------------Python				JSONdict				objectlist, tuple			arraystr, unicode		stringint, long, float	numberTrue				trueFalse				falseNone				null---------------------------
关于re正则模块：- 正则：\d \w- 贪婪匹配和非贪婪匹配（默认），若想让他不贪婪，个数后面+?- 正则：re.search/re.match/re.findall
第三方模块，都有哪些方式可以让我们安装第三方模块:- pip管理工具- 源码- wheel包
  • ⑨面向对象
目标：不是为了用面向对编程（推荐使用函数编程，面向对象要能看懂）面向对象三大特性：封装、继承、多态。
  • 前端开发
- 前端知识点分为三部分：- HTML，框架- CSS，装饰- JavaScript，让装饰好的框架动起来
- HTML标签- div / span / a / img / input / form / table /ul...- 块级和行内标签，例如：div span 默认情况下谁是块级标签？div注意：CSS样式，发现行内标签设置高度、宽度、内边距、外边距均无效。- form + input / select / textarea 数据框- action，提交地址- method，提交方式- form标签中有一个submit- 内部标签都需要设置name属性（form提交的数据通常都是键值对格式，name主要就是充当key）
- CSS样式- 局部一定会用到的样式：div + float（脱离文档流，clear:both; / clearfix解决）- 高度和宽度- 边距- 内边距，padding- 外边距，margin- 字体大小/颜色- 边框- 背景颜色- hover，鼠标放上去就会触发CSS样式
4、综合案例

为了综合运用你学到的HTML、CSS和JavaScript的核心知识点，我们将创建一个简单的网页，它将包含以下功能：

  • 一个欢迎消息
  • 一个按钮，当点击时会改变背景颜色
  • 动态显示当前时间

这个示例将展示如何结构化HTML文档，使用CSS进行样式设计，以及用JavaScript添加交互性。

①HTML

首先，我们创建网页的结构。这包括一个标题、一个显示时间的段落、一个用于触发颜色改变的按钮。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>综合练习</title><link rel="stylesheet" href="style.css">
</head>
<body><h1>欢迎来到我的网页！</h1>
<p id="time"></p>
<button id="changeColor">改变背景颜色</button><script src="script.js"></script>
</body>
</html>

在这里插入图片描述

②CSS

接下来，我们为网页添加一些基本的样式。这包括背景颜色、文本对齐方式和按钮样式。

/* style.css */
body {font-family: Arial, sans-serif;text-align: center;padding: 20px;
}button {padding: 10px 20px;font-size: 16px;cursor: pointer;margin-top: 20px;
}

在这里插入图片描述

③JavaScript

最后，我们通过JavaScript添加交互性。这包括一个函数来改变背景颜色和一个函数来实时更新时间。

// script.js
document.getElementById('changeColor').addEventListener('click', function() {// 随机生成颜色var randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);document.body.style.backgroundColor = randomColor;
});function updateTime() {var currentTime = new Date();document.getElementById('time').textContent = '当前时间: ' + currentTime.toLocaleTimeString();
}// 每秒更新时间
setInterval(updateTime, 1000);// 初始化时间
updateTime();

在这里插入图片描述

在这个例子中，我们实现了以下几点：

  • HTML 提供了网页的结构。
  • CSS 定义了网页的样式，包括文本对齐和按钮样式。
  • JavaScript 添加了动态功能：能够通过按钮点击改变背景颜色，并且每秒更新显示当前时间。

这个综合练习覆盖了之前学到的一些核心知识点，可以更好地理解如何将HTML、CSS和JavaScript结合起来创建动态且互动的网页。

在学习完三大组件后，我们将会学习jQuery，它能帮助我们更便捷地进行Web开发。

很感谢你能看到这里，如有相关疑问，还请下方评论留言。
笔记记录来源：B站 python的web开发全家桶（django+前端+数据库）
Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊）
如果对大家有帮助的话，希望大家能多多点赞+关注！这样我的动力会更足！

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

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

相关文章

postman访问k8s api

postman访问k8s api

第一种方式&#xff1a; kubectl -n kubesphere-system get sa kubesphere -oyaml apiVersion: v1 kind: ServiceAccount metadata:annotations:meta.helm.sh/release-name: ks-coremeta.helm.sh/release-namespace: kubesphere-systemcreationTimestamp: "2023-07-24T07…
阅读更多...
Unity（第十部）时间函数和文件函数

Unity（第十部）时间函数和文件函数

时间函数 using System.Collections; using System.Collections.Generic; using UnityEngine;public class game : MonoBehaviour {// Start is called before the first frame updatefloat timer 0;void Start(){//游戏开始到现在所花的时间Debug.Log(Time.time);//时间缩放值…
阅读更多...
alembic

alembic

alembic是sqlalchemy的作者开发的。 用来做OMR模型与数据库的迁移与映射。 第一个&#xff0c;alembic的所有命令都是以alembic开头 第二&#xff0c;alembic的迁移文件也是通过版本进行控制的。首先&#xff0c;通过pip install alembic进行安装。以下将解释alembic的用法 方…
阅读更多...
【Go-Zero】测试API查询信息无法返回数据库信息与api、rpc文件编写规范

【Go-Zero】测试API查询信息无法返回数据库信息与api、rpc文件编写规范

【Go-Zero】测试API查询信息无法返回数据库信息与api、rpc文件编写规范 大家好 我是寸铁&#x1f44a; 总结了一篇测试API查询信息无法返回数据库信息与api、rpc文件编写规范的文章✨ 喜欢的小伙伴可以点点关注 &#x1f49d; 问题背景 大家好&#xff0c;我是寸铁&#xff01…
阅读更多...
ARM系列 -- 虚拟化（四）

ARM系列 -- 虚拟化（四）

今天来看看虚拟中断。 在一个非虚拟化的系统中&#xff0c;操作系统可以直接访问GIC的寄存器&#xff0c;并且处理GIC的物理中断接口&#xff08;physical interrupt interface&#xff09;。 但是在一个虚拟化的系统中&#xff0c;不是这样。Guest OS并不知道它运行在虚拟系…
阅读更多...
日更【系统架构设计师知识总结2】指令系统（结合真题）

日更【系统架构设计师知识总结2】指令系统（结合真题）

【原创精华】结合老师的讲授、耗费三个小时的精华总结对正在备考的你一定有用&#xff01;&#xff01;自己一点点手打、总结的脑图&#xff0c;把散落在课本以及老师讲授的知识点合并汇总&#xff0c;反复提炼语言&#xff0c;形成知识框架。希望能给同样在学习的伙伴一点帮助…
阅读更多...
数据结构与算法(数组,栈,队列,链表,哈希表,搜索算法,排序算法,查找算法,策略算法,递归算法,二叉搜索树BST,动态规划算法)

数据结构与算法(数组,栈,队列,链表,哈希表,搜索算法,排序算法,查找算法,策略算法,递归算法,二叉搜索树BST,动态规划算法)

文章目录 1 课程介绍1.1 前置知识1.2 为什么要学习算法1.3 大厂面试常见数据结构题目(基础)1.4 数据结构和算法的关系 2 数据结构2.1 数据结构概述2.1.1 数据结构是什么2.1.2 数据结构分类2.1.2.1 线性结构2.1.2.2 非线性结构2.1.2.3 小总结 2.1.3 数据结构范围 2.2 数组Array2…
阅读更多...
前端sql条件拼接js工具

前端sql条件拼接js工具

因为项目原因&#xff0c;需要前端写sql&#xff0c;所以弄了一套sql条件拼接的js工具 ​ /*常量 LT : " < ", LE : " < ", GT : " > ", GE : " > ", NE : " ! ", EQ : " ", LIKE : " like &qu…
阅读更多...
【突发】MDPI再出事！23本期刊84篇论文存在“审稿人工厂”问题，4本被中科院预警！

【突发】MDPI再出事！23本期刊84篇论文存在“审稿人工厂”问题，4本被中科院预警！

毕业推荐 SCIE&#xff1a; • 计算机类&#xff0c;6.5-7.0&#xff0c;JCR1区&#xff0c;中科院2区 • 2个月19天录用&#xff0c;6天见刊&#xff0c;36天检索 SCIE&#xff08;CCF-C类&#xff09; • 算法类&#xff0c;2.0-3.0&#xff0c;JCR3区&#xff0c;中科院…
阅读更多...
后台与接口测试demo 查数据

后台与接口测试demo 查数据

pom 里引入 mybatis 依赖 2.添加 entity 实体类 3.添加 Mapper 添加SQL语句、接口 SpringbootApplicants.Java 添加 RestController接口 标识 SpringbootApplication 是一个接口&#xff0c;可以通过 GetMapping(“/”) 查询所有数据。 GetMapping(“/”) 依赖于 RestCon…
阅读更多...
SpringCloud微服务-Eureka注册中心

SpringCloud微服务-Eureka注册中心

Eureka注册中心 文章目录 Eureka注册中心前言1、Eureka的作用2、搭建EurekaServer3、服务注册4、启动多个实例5、服务拉取 -实现负载均衡 前言 在服务调用时产生的问题&#xff1a; //2. 利用RestTemplate发起HTTP请求&#xff0c;查询user String url "http://localho…
阅读更多...
【力扣hot100】刷题笔记Day15

【力扣hot100】刷题笔记Day15

前言 今天要刷的是图论&#xff0c;还没学过&#xff0c;先看看《代码随想录》这部分的基础 深搜DFS理论基础 深搜三部曲 确认递归函数、参数确认终止条件处理目前搜索节点出发的路径 代码框架 void dfs(参数) {if (终止条件) {存放结果;return;}for (选择&#xff1a;本节点…
阅读更多...
DVWA 靶场之 Command Injection（命令执行）middlehigh

DVWA 靶场之 Command Injection（命令执行）middlehigh

对于 middle 难度的 我们直接先看源码 <?phpif( isset( $_POST[ Submit ] ) ) {// Get input$target $_REQUEST[ ip ];// Set blacklist$substitutions array(&& > ,; > ,);// Remove any of the characters in the array (blacklist).$target str_rep…
阅读更多...
通过一个栗子来看看创建和运行servlet

通过一个栗子来看看创建和运行servlet

通过前面一篇文章的介绍&#xff08;搞着搞着对web project是不是有点迷糊&#xff1f;先关注几个问题-CSDN博客&#xff09;大家对于servlet作为中间层接收请求和反馈响应有了概念上的认知&#xff0c;接下来通过一个栗子来加深一下理解&#xff0c;还是基于前面的jsp项目&…
阅读更多...
水电表远程集中抄表管理系统

水电表远程集中抄表管理系统

水电表远程集中抄表管理系统是当前水电行业智能化发展的关键技术之一&#xff0c;为水电企业和用户提供了便捷、高效的抄表管理解决方案。该系统结合了远程监控、自动抄表、数据分析等多种功能&#xff0c;实现了水电抄表的智能化和精准化&#xff0c;为用户节省了大量人力物力…
阅读更多...
智慧公厕让社区生活更美好

智慧公厕让社区生活更美好

随着科技的迅猛发展&#xff0c;城市管理、城市服务均使用科技化的手段进行升级改造&#xff0c;社区生活更美好赋予全新的智慧效能&#xff0c;其中智慧公厕也成为了城市环卫设施的新宠。智慧公厕以物联网、互联网、大数据、云计算、5G通信、自动化控制等技术为核心&#xff0…
阅读更多...
浅谈 Linux fork 函数

浅谈 Linux fork 函数

文章目录 前言fork 基本概念代码演示示例1&#xff1a;体会 fork 函数返回值的作用示例2&#xff1a;创建多进程&#xff0c;加深对 fork 函数的理解 前言 本篇介绍 fork 函数。 fork 基本概念 pid_t fork(void) fork 的英文含义是"分叉"&#xff0c;在这里就是 …
阅读更多...
UE4c++ ConvertActorsToStaticMesh

UE4c++ ConvertActorsToStaticMesh

UE4c ConvertActorsToStaticMesh ConvertActorsToStaticMesh UE4c ConvertActorsToStaticMesh创建Edior模块&#xff08;最好是放Editor模块毕竟是编辑器代码&#xff09;创建UBlueprintFunctionLibraryUTestFunctionLibrary.hUTestFunctionLibrary.cpp:.Build.cs 目标:为了大量…
阅读更多...
【QT+QGIS跨平台编译】之五十一：【QGIS_CORE跨平台编译】—【qgsexpressionparser.cpp生成】

【QT+QGIS跨平台编译】之五十一：【QGIS_CORE跨平台编译】—【qgsexpressionparser.cpp生成】

文章目录 一、Bison二、生成来源三、构建过程一、Bison GNU Bison 是一个通用的解析器生成器，它可以将注释的无上下文语法转换为使用 LALR (1) 解析表的确定性 LR 或广义 LR (GLR) 解析器。Bison 还可以生成 IELR (1) 或规范 LR (1) 解析表。一旦您熟练使用 Bison，您可以使用…
阅读更多...
【严格递增】2972统计移除递增子数组的数目 II

【严格递增】2972统计移除递增子数组的数目 II

作者推荐 动态规划的时间复杂度优化 本文涉及知识点 严格递增 子数组 LeetCode2972. 统计移除递增子数组的数目 II 给你一个下标从 0 开始的 正 整数数组 nums 。 如果 nums 的一个子数组满足&#xff1a;移除这个子数组后剩余元素 严格递增 &#xff0c;那么我们称这个子…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023