【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、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 文件中

  1. head中
    在这里插入图片描述

  2. body中(推荐)
    在这里插入图片描述

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

2.2 在其他 js 文件中

  1. 创建目录:
    在这里插入图片描述

  2. 导入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 那个标签的里面 DOM
            var 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"的标签里面 DOM
         tag.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 来实现

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

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

相关文章

【树上倍增】【内向基环树】【 图论 】2836. 在传球游戏中最大化函数值

本文涉及知识点 树上倍增 内向基环树 图论 LeetCode2836. 在传球游戏中最大化函数值 给你一个长度为 n 下标从 0 开始的整数数组 receiver 和一个整数 k 。 总共有 n 名玩家&#xff0c;玩家 编号 互不相同&#xff0c;且为 [0, n - 1] 中的整数。这些玩家玩一个传球游戏&am…

ideaSSM图书借阅管理系统VS开发mysql数据库web结构java编程计算机网页源码maven项目

一、源码特点 SSM 图书借阅管理系统是一套完善的信息管理系统&#xff0c;结合SSM框架和bootstrap完成本系统&#xff0c;对理解JSP java编程开发语言有帮助系统采用SSM框架&#xff08;MVC模式开发&#xff09;&#xff0c;系统具有完整的源代码 和数据库&#xff0c;系统主…

【爬虫+数据清洗+数据分析+可视化】“淄博烧烤”现象热评舆情python数据分析大屏

一、开发背景 您好&#xff0c;我是马哥小迷弟132 &#xff0c;一枚10年程序猿。 自从2023.3月以来&#xff0c;"淄博烧烤"现象持续占领热搜流量&#xff0c;体现了后疫情时代众多网友对人间烟火气的美好向往&#xff0c;本现象级事件存在一定的数据分析实践意义。…

Java零基础入门-java8新特性(上篇)

一、本期教学目标 java8有哪些新特性什么是函数式接口什么是Lambda表达式掌握Stream ApiStream和Collect集合区别Stream创建方式Stream操作三步骤 二、概述 上几期&#xff0c;我们是完整的学完了java异常类的学习及实战演示、以及学习了线程进程等基础概念&#xff0c;而这一…

Cache多核之间的一致性MESI

快速链接: 【精选】ARMv8/ARMv9架构入门到精通-[目录] &#x1f448;&#x1f448;&#x1f448; 思考: 1、为什么要学习MESI协议&#xff1f; 哪里用到了&#xff1f;你确定真的用到了&#xff1f; 2、MESI只是一个协议&#xff0c;总得依赖一个硬件去执行该协议吧&#xff0c…

电商技术揭秘一:电商架构设计与核心技术

文章目录 引言一、电商平台架构概述1.1 架构设计原则与架构类型选择1.2 传统电商平台架构与现代化架构趋势分析 二、高并发处理与负载均衡2.1 高并发访问特点分析与挑战2.2 负载均衡原理与算法选择 三、分布式数据库与缓存技术3.1 分布式数据库设计与一致性考量3.2 缓存策略与缓…

C++实现二叉搜索树的增删查改(非递归玩法)

文章目录 一、二叉搜索树的概念结构和时间复杂度二、二叉搜索树的插入三、二叉搜索树的查找四、二叉搜索树的删除&#xff08;最麻烦&#xff0c;情况最多&#xff0c;一一分析&#xff09;3.1首先我们按照一般情况下写&#xff0c;不考虑特殊情况下4.1.1左为空的情况&#xff…

分享:搭建企微知识库简单易学步骤

说起企微知识库&#xff0c;可能有些人还不太清楚&#xff0c;为什么现在很懂企业选择搭建企微知识库&#xff1f;其实&#xff0c;企微知识库就是一个装满了企业的各种知识、经验和资料的载体。目的是为了方便员工随时查找和学习、有助于知识的传承和共享、加强团队协作和沟通…

自然语言处理: 第二十一章大模型基底之llama2

文章地址: LLaMA:OpenandEfficient Foundation Language Models 项目地址: meta-llama/llama: Inference code for Llama models (github.com) 前言 在LLaMa1的基础之上有兴趣的可以看看我上一篇博客自然语言处理: 第二十一章大模型基底之llama1。Meta 又继续推出了LLaMa2&a…

windows安装OpenUSD

一、下载OpenUSD git clone https://github.com/PixarAnimationStudios/OpenUSDOpenUSD&#xff0c;原名USD&#xff08;Universal Scene Description&#xff0c;通用场景描述&#xff09;&#xff0c;是由皮克斯动画工作室开发的一种开放数据格式。OpenUSD主要用于在虚拟世界…

AI论文速读 |【综述】 时序分析基础模型:教程与综述

论文标题&#xff1a;Foundation Models for Time Series Analysis: A Tutorial and Survey 作者&#xff1a; Yuxuan Liang&#xff08;梁宇轩&#xff09;, Haomin Wen&#xff08;温浩珉&#xff09;, Yuqi Nie&#xff08;PatchTST一作&#xff09;, Yushan Jiang, Ming J…

机器学习全攻略:概念、流程、分类与行业应用案例集锦

目录 1.引言 2.从零开始认识机器学习&#xff1a;基本概念与重要术语 3.五步走&#xff1a;掌握机器学习项目执行的完整流程 3.1.问题定义与数据收集 3.2.数据预处理与特征工程 3.3.模型选择与训练 3.4.模型评估与优化 3.5.模型部署与监控 4.深入了解各类机器学习方法…

计算机网络—TCP协议详解:特性、应用(2)

&#x1f3ac;慕斯主页&#xff1a;修仙—别有洞天 ♈️今日夜电波&#xff1a;マリンブルーの庭園—ずっと真夜中でいいのに。 0:34━━━━━━️&#x1f49f;──────── 3:34 &#x1f504; ◀️…

基于卷积神经网络的苹果等级分类系统(pytorch框架)【python源码+UI界面+前端界面+功能源码详解】

功能演示&#xff1a; 苹果等级分类系统&#xff0c;基于vgg16&#xff0c;resnet50卷积神经网络&#xff08;pytorch框架&#xff09;_哔哩哔哩_bilibili &#xff08;一&#xff09;简介 基于卷积神经网络的苹果等级分类系统是在pytorch框架下实现的&#xff0c;系统中有两…

LangChain-05 RAG Conversational 增强检索会话

安装依赖 pip install --upgrade --quiet langchain-core langchain-community langchain-openai编写代码 from langchain_core.messages import AIMessage, HumanMessage, get_buffer_string from langchain_core.prompts import format_document from langchain_core.runn…

腾讯云轻量服务器8核16G服务器价格1668元一年送3个月,18M大带宽

腾讯云轻量应用服务器8核16G配置租用优惠价格1668元15个月&#xff0c;买一年送3个月&#xff0c;配置为&#xff1a;轻量8核16G18M、270GB SSD盘、3500GB月流量、18M带宽&#xff0c;腾讯云优惠活动 yunfuwuqiba.com/go/txy 活动链接打开如下图&#xff1a; 腾讯云8核16G服务器…

基于java+SpringBoot+Vue的网上订餐系统设计与实现

基于javaSpringBootVue的网上订餐系统设计与实现 开发语言: Java 数据库: MySQL技术: Spring Boot JSP工具: IDEA/Eclipse、Navicat、Maven 系统展示 前台展示 菜品浏览与选择&#xff1a;用户可以浏览不同的菜品分类&#xff0c;并选择心仪的菜品。 订单创建与管理&…

多线程--深入探究多线程的重点,难点以及常考点线程安全问题

˃͈꒵˂͈꒱ write in front ꒰˃͈꒵˂͈꒱ ʕ̯•͡˔•̯᷅ʔ大家好&#xff0c;我是xiaoxie.希望你看完之后,有不足之处请多多谅解&#xff0c;让我们一起共同进步૮₍❀ᴗ͈ . ᴗ͈ აxiaoxieʕ̯•͡˔•̯᷅ʔ—CSDN博客 本文由xiaoxieʕ̯•͡˔•̯᷅ʔ 原创 CSDN 如…

SpringBoot登录校验(四)过滤器Filter

JWT令牌生成后&#xff0c;客户端发的请求头中会带有JWT令牌&#xff0c;服务端需要校验每个请求的令牌&#xff0c;如果在每个controller方法中添加校验模块&#xff0c;则十分复杂且冗余&#xff0c;所以引入统一拦截模块&#xff0c;将请求拦截下来并做校验&#xff0c;这块…

100道面试必会算法-18-岛屿问题(数量、周长、面积)

100道面试必会算法-18-岛屿问题&#xff08;数量、周长、面积&#xff09; 题目描述 给你一个由 1&#xff08;陆地&#xff09;和 0&#xff08;水&#xff09;组成的的二维网格&#xff0c;请你计算网格中岛屿的数量。 岛屿总是被水包围&#xff0c;并且每座岛屿只能由水平…