• 【Python Web】Flask框架（六）JavaScript基础

    文章目录

    JavaScript基础

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

    • DOM和BOM，相当于编程语言内置的一些模块。python中的re，random之类

    • jquery相当于编程语言的第三方模块。例如request是，openpyxl。

    • JavaScript就是让程序实现一些动态的效果。

      • 点击出现弹出
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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("yes or no")
    }

script>

body>
html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38

    代码位置

    • 推荐放到位置2，HTML页面是从上到下逐一进行解析的，如果放在上面 它会先执行js，把JavaScript的执行完才能显示页面，如果JavaScript比较耗时，会长时间无法显示页面，写在后面则是先展示页面。
      在这里插入图片描述

    js代码的存在形式

    • 可以写在当前HTML文件中，也可以单独写在一个文件中进行导入。
    • 文件创建在static中，以.js为后缀,一般导入的位置也放在后面。

    注释

    • HTML的注释
    

    • 1
    • css的注释，style代码块中
    /* 注释 */

    • 1
    • JavaScript的注释，script代码块中
    // 注释
/* 注释 */

    • 1
    • 2

    变量

    JavaScript也是一门编程语言，也有变量。

        <script type="text/javascript">
        var name = "bkys";
        
        console.log(name) //打印
    </script>

    • 1
    • 2
    • 3
    • 4
    • 5

    字符串类型

    // 声明
var name = "bkys";

var name = "bkys";

    • 1
    • 2
    • 3
    • 4
    // 常见功能
var name = "bkys";

var v1 = name.lenth;  // 获取字符串长度
var v2 = name[0]  // 获取name字符串的第一个字
var v3 = name.trim();  //  去除空白
var v3 = name.substring(2);  //前取后不取

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    案例：跑马灯
    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;

            // 动态起来，把第一个放在最后面
            var firstChar = dataString[0];
            var otherString = dataString.substring(1, dataString.length);
            var newText = otherString + firstChar;

            // 在HTML中更新
            tag.innerText = newText;
        }

        //JavaScript中的定时器,每500ms执行一次
        setInterval(show,500)

    script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33

    数组

    • 定义
    var v1 = [1,2,3,4];
var v2 = Array(1,2,3,4);

    • 1
    • 2
    • 操作
    var v1 = [1,2,3,4];

v1[1]  
v[0] = "2";  // 修改
v1.push("5");  // 尾部追加
v1.unshift("0");  // 前面追加
v1.splice(索引位置,0,元素); // 把元素放在索引的位置

v1.pop(); // 尾部删除
v1.shift(); //头部删除 
v1.splice(索引位置,1);  // 指定位置删除


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 循环
    var v1 = [1,2,3,4];

for (var idx in v1) {

}


for(var i=0; i<v1.lenth; i++) {

}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 跳出循环
      break和continue
    案例：动态数据
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态创建数据title>
head>
<body>

<ul id="city">
    
ul>


<script type="text/javascript">
    //发送网络请求，获取数据，显示在页面上
    var cityList = [" 北京", "上海", "深圳"];

    for(var idx in cityList){
        var text = cityList[idx];

        //创建li标签
        var tag = document.createElement("li");
        // 在li标签中写入内容
        tag.innerText = text;

        var parentTag = document.getElementById("city");
        parentTag.append(tag);
    }
    
script>

body>
html> 

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33

    对象

    • 类似python中的字典
    info = {
	name:"bkys",
	age:18
}

// 操作值
info.age
info.name = "bkys"

info["age"]
info["name"] = "bkys"

delete info["age"] 

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 循环
    info = {
	name:"bkys",
	age:18
}

for(var key in info){

}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    动态表格
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>
</head>
<body>

<table border="1">
    <thead>
    <tr>
        <th>id</th>
        <th>name</th>
        <th>age</th>
    </tr>
    </thead>

    <tbody id="body">


    </tbody>
</table>

<script type="text/javascript">
    //发送网络请求，获取数据，显示在页面上
    var datalist = [
        {id: 1, name: "bkys", age: 19},
        {id: 1, name: "bkys", age: 19},
        {id: 1, name: "bkys", age: 19},
        {id: 1, name: "bkys", age: 19},
    ];

    for (var idx in datalist) {

        var info = datalist[idx];

        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);
        }
        var bodyTag = document.getElementById("body");
        bodyTag.appendChild(tr);

    }
</script>

</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53

    条件语句

    if (条件) {

} else{

}

if (条件) {

} else if{

} else if{

}else{

}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    函数

    function func(){

}

func()

    • 1
    • 2
    • 3
    • 4
    • 5

    DOM

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

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

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    // 创建标签
var tag = document.createElement('td');

// 标签写内容
tag.innerText = "bkys";

// 将newtag写入tag
tag.appendChild(newtag);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    事件的绑定
    • 单击添加和双击添加
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击添加</title>
</head>
<body>

<input type="button" value="单击点击添加" onclick="addCityInfo()">
<input type="button" value="双击点击添加" ondblclick="addCityInfo()">
    <ul id="city">

    </ul>


<script type="text/javascript">

    function  addCityInfo(){
        var newtag = document.createElement("li");
        newtag.innerText = "bkys";

        var parentTag = document.getElementById("city");
        parentTag.appendChild(newtag);
    }

</script>

</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    输入内容添加
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>
</head>
<body>

<input type="text" placeholder="请输入内容" id="txt">
<input type="button" value="单击点击添加" onclick="addCityInfo()">

<ul id="city">

</ul>


<script type="text/javascript">

    function addCityInfo() {

        // 先获取输入框用户输入的数据
        var txt = document.getElementById("txt");

        // 读取标签的内容
        var newString = txt.value;

        // 判断字符串是否为零
        if(newString.length > 0) {
            // 创建标签
            var newtag = document.createElement("li");
            newtag.innerText = newString;

            // 把标签添加到ul中
            var parentTag = document.getElementById("city");
            parentTag.appendChild(newtag);
        }else{
            alert("输入不能为空");
        }
    }

</script>

</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 注意：DOM中还有很多操做。但是比较繁琐，我们页面中的效果一般都是用jQuery，以后包括vue.js / react.js
  • 相关阅读:
    MARKDOWN 文档图片编码嵌入方案
    [附源码]计算机毕业设计中小学课后延时服务管理系统Springboot程序
    ansible自动化运维详解（六）ansible中的任务执行控制及实例演示：循环、条件判断、触发器、处理失败任务
    Flink学习第六天——Flink常见的运行部署模式介绍和运行流程浅析
    web网页大作业——基于HTML+CSS+JavaScript制作摄影之家网站
    计算机毕业设计ssm校园快递代取管理系统t914g系统+程序+源码+lw+远程部署
    Spring项目-前端问题：Can‘t find variable:$
    关于VITS和微软语音合成的效果展示（仙王的日常生活第1-2209章）
    C语言技术, 有云控经验最好
    基于真实场景解读 K8s Pod 的各种异常
  • 原文地址：https://blog.csdn.net/qq_51670115/article/details/126908813