【Django学习笔记(四)】JavaScript 语言介绍

article/2024/4/20 0:05:43

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 那个标签的里面 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 来实现


http://www.ngui.cc/article/show-2002333.html

相关文章

搜维尔科技:TechViz 虚拟现实在工业项目中沉浸式体验

TechViz虚拟现实在工业项目中沉浸式体验 搜维尔科技&#xff1a;TechViz 虚拟现实在工业项目中沉浸式体验

docker------docker入门

&#x1f388;个人主页&#xff1a;靓仔很忙i &#x1f4bb;B 站主页&#xff1a;&#x1f449;B站&#x1f448; &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 &#x1f917;收录专栏&#xff1a;Linux &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#…

C#多页面共用一个实例

C#多页面共用一个实例 案例&#xff1a; C#与硬件设备交互&#xff0c;交互类里面有打开设备、数据接发等1操作&#xff0c;在其他许多地方需要调用该设备兼顾各代码的耦合度 采用单例模式&#xff0c;eg.CAN设备&#xff1a; private CANClass(){}/// <summary>/// 获…

3d代理模型怎么转换成标准模型---模大狮模型网

在当今的虚拟世界中&#xff0c;3D建模技术被广泛运用于游戏开发、电影制作、工业设计等领域。在3D建模过程中&#xff0c;有时会遇到需要将代理模型转换成标准模型的情况。模大狮将从理论和实践两方面&#xff0c;介绍如何将3D代理模型转换成标准模型&#xff0c;以帮助读者更…

acwing算法提高之图论--最小生成树的扩展应用

目录 1 介绍2 训练 1 介绍 本专题用来记录使用最小生成树算法&#xff08;prim或kruskal&#xff09;解决的扩展题目。 2 训练 题目1&#xff1a;1146新的开始 C代码如下&#xff0c; #include <iostream> #include <cstring> #include <algorithm>usin…

数据转换 | Matlab基于GASF格拉姆角和场一维数据转二维图像方法

目录 效果分析基本介绍程序设计参考资料获取方式 效果分析 基本介绍 基于GASF&#xff08;Gramian Angular Summation Field&#xff09;的方法&#xff0c;将一维数据转换为二维图像的步骤描述 标准化数据&#xff1a; 首先&#xff0c;对一维时序数据进行标准化处理&#xf…

​如何使用ArcGIS Pro进行洪水淹没分析

洪水淹没分析是一种常见的水文地理信息系统应用&#xff0c;用于模拟和预测洪水事件中可能受到淹没影响的地区&#xff0c;这里为大家介绍一下ArcGIS Pro进行洪水淹没分析的方法&#xff0c;希望能对你有所帮助。 数据来源 教程所使用的数据是从水经微图中下载的DEM数据&…

企业微信企业主体变更认证介绍

企业微信变更主体有什么作用&#xff1f; 说一个自己亲身经历的事情&#xff0c;当时我在一家教育公司做运营&#xff0c;公司所有客户都是通过企业微信对接的。后来行业整顿&#xff0c;公司不得不注销&#xff0c;换了营业执照打算做技能培训&#xff0c;但发现注销后原来的企…

【Django学习笔记(五)】JQuery介绍

JQuery介绍 前言正文1、JQuery 快速上手1.1 下载 JQuery1.2 应用 JQuery 2、寻找标签&#xff08;直接&#xff09;2.1 ID选择器2.2 样式选择器2.3 标签选择器2.4 层级选择器2.5 多选择器2.5 属性选择器 3、寻找标签&#xff08;间接&#xff09;3.1 找到上一个兄弟3.2 找父子 …

Python学习笔记-Flask接收post请求数据并存储数据库

1.引包 from flask import Flask, request, jsonify from flask_sqlalchemy import SQLAlchemy 2.配置连接,替换为自己的MySQL 数据库的实际用户名、密码和数据库名 app Flask(__name__) #创建应用实列 app.config[SQLALCHEMY_DATABASE_URI] mysqlpymysql://ro…