学习 Python 的Day16，关于JavaScript的操作

最新推荐文章于 2024-05-30 11:27:58 发布
最新推荐文章于 2024-05-30 11:27:58 发布
阅读量445 收藏
点赞数 1
分类专栏： HTML 初级Python 文章标签： javascript 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_67780151/article/details/125749942
版权

Day16 JavaScript

1. 什么是JS（JavaScript）？

1.1 认识JS

JS(JavaScript)控制网页的行为；JS是互联网中最流行的脚本语言，网页、小程序、APP等。
1.JS是脚本语言.
2.JS是轻量级的编程语言.
3.JS是可插入HTML页面的编程代码.
4.所有现代浏览器均可执行JS代码

1.2 引入JS到body标签中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 第一种JS引入方式 -->
		<script type="text/javascript">
			//JS代码的单行注释
			
			/*
			JS代码的多行注释
			*/
			
		   // document --> 指代 HTML
		   //write --> 写入
		   document.write("<h1>这是一个标题</h1>")
		   document.write("<p>这是一个标题</p>")
		</script>
		
		<!-- 第二种JS引入方式 -->
		<script type="text/javascript" src="js/demo1.js"></script>
	</body>
</html>

2.JS小案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 修改标签的内容 -->
		<span>请输入姓名：</span><span id="name">张三丰</span>
		<br>
		<input type="text" name="" id="info">
		<!-- onclick -- 点击事件 -->
		<input type="submit" value="提交" 
		onclick="document.getElementById('name').innerText = document.getElementById('info').value">
		
		<!-- 修改图片 -->
		<img src="img/cat_open.png" alt="" id="photo">
		<input type="submit" value="更改图片"
		onclick="document.getElementById('photo').src='./img/cat_close.png'">
		
		<!-- 修改文字样式 -->
		<p id="style">段落</p>
		<input type="submit" value="华丽的" 
		onclick="document.getElementById('style').style = 'color:pink;font-size:20px'">
		<input type="submit" value="朴素的" 
		onclick="document.getElementById('style').style = ''">
		
		<!-- JS的循环代码，插入HTML代码 -->
		<script type="text/javascript">
			// Python的列表在其他编程语言中叫做数组。
			titles = ['四川','云南','贵州','湖北']
			for (x in titles){
				title = titles[x]
				html_str = "<span id='one'>" + title + "</span><span>|</span>"
				document.write(html_str)
			}
			document.getElementById('one').style = 'color:red;'
			// 错误写法
			// for (x in titles):
			// 	title = titles[x]
			// 	html_str = "<span>" + title + "</span><span>|</span>"
			// 	document.write(html_str)
		</script>
	</body>
</html>

运行结果
在这里插入图片描述

3.JavaScript基础

3.1 定义变量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			// 变量名 = 变量值(全局变量)
			num = 1
			// cansole:控制台
			// log:日志
			console.log(num)
			
			// var 变量名 = 值{函数中的局部变量}
			var age = 18
			console.log(age)
			
			// let 变量名 = 值({}中的局部变量)
			let gender = '男'
			console.log(gender)
			
			// const 变量名 = 值(常量)
			const stu_id = 'python001'
			console.log(stu_id)
		</script>
	</body>
</html>

运行结果
在这里插入图片描述

3.2 运算符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			// 1）数值运算符：+ - * / % **
			console.log(1 + 1)
			console.log(1 * 2)
			console.log(2 / 3)
			console.log(2 % 3)   //在HTML中没有整除，答案为2
			
			// 2）比较运算符：> < >= <= == != === !==
			console.log(10 > 20)    // false
			console.log(5 == 3)     //false,两边的元素转换成字符串以后是否相等
			console.log('5' == 5)   //true
			console.log('5' != 5)   //false
			
			// ===直接判断两边数据是否相等
			// !==直接判断两边的数据是否不相等
			
			// 3）赋值运算符：= += -= *= /= **= %=
			num_1 = 3
			num_2 = 6
			num_1 += num_2
			// 和 python 同理
			console.log(num_1)
			
			// 4）逻辑运算符：&&（逻辑与运算）、||（逻辑或运算）、!（逻辑非运算）
			console.log(4 > 3 && 4 < 5)
			console.log(4 > 3 && 4 > 5)
			console.log(4 > 3 || 4 > 5)
			console.log(!4 > 3 || 4 > 5)
		</script>
	</body>
</html>

运行结果
在这里插入图片描述

3.3 分支结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			// 分支结构
			/* 语法一：
			if(条件语句){
				代码块
			}else{
				代码块
			}
			*/
			 
			 /*
			 语法二：
			 if(条件){
						   代码块
			 }else if(条件){
						   代码块
			 }else{
						   
			 }
			 */
			
			// 分支结构：else可以省略不写
			
			// 三目运算符：
			// python版本：结果1 if 条件 else 结果2
			// Java、C、js版本：条件?结果1:结果2 - 条件成立，结果1；反之结果2
			
			age = 18
			if (age >= 18){
						  console.log('成年')
			}else{
						  console.log('未成年')
			}
			
			console.log(age >= 18?'成年':'未成年')
			
			year = 2000
			if(year % 4 === 0 && year % 100 !== 0){
						  console.log('闰年')
			}else if(year % 400 === 0){
						  console.log('闰年')
			}else{
						  console.log('平年')
			}
			
			height = 1.75
			weight = 128
			if(18.5 <= weight/(height**2) && weight/(height**2) <= 24.9){
						  console.log(true)
			}else{
						  console.log(false)
			}
			
			a = height / weight**2
			console.log(18.5 < a && a < 24.9?'正常':'不正常')
		</script>
	</body>
</html>

运行结果
在这里插入图片描述

4. JS的循环

  1. for-in循环
    for(变量 in 序列){
    代码块
    }
  2. while循环
    while(条件语句){
    代码块
    }
  3. 传统循环
    for(表达式1;表达式2;表达式3){
    代码块
    }
  4. 传统for循环改while循环
    表达式1
    while(表达式2){
    代码块
    表达式3
    }
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			// 计算1-100的和
			// while循环
			i = 1
			total = 1
			while (i <= 100){
				total += i
				i += 1
			}
			console.log(total)
			
			// 传统for循环
			total = 0
			for(i=1;i<=100;i+=1){
				total += i
				
			}
			console.log(total)
			
			// for-in循环取得是序列中每个元素的下标
			// 通过 序列[下标]的形式再将元素取出
			list1 = [10, 20, 30, 40]
			for (i in list1){
				console.log(list1[i])
			}
			
			// document.cookie ---> 获取用户的账号密码信息的cookie
			
			str1 = 'abc123'
			for (i in str1){
				console.log(str1[i])
			}
		</script>
	</body>
</html>

运行结果
在这里插入图片描述

5. 函数

5.1 认识函数

  1. 函数：将重复的代码封装起来，以便重复调用。
  2. 作用：降低代码的冗余度。2.将执行某一功能的代码封装起来，更容易让人理解。

5.2 定义和调用函数

  1. 定义函数
    function函数名(形参列表){
    函数体
    }
  2. 调用函数
    函数名(实参列表){
    }

5.3 应用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		   // 计算1-n的值
		   function num_total(n){
			   total = 0
			   for(i=1;i<=n;i+=1){
				   total += i
			   }
			   console.log(total)
		   }
			
			num_total(100)
			num_total(50)
			
			// 计算 10 和 20 的和，计算 100 和 30 的和
			function sum(a,b){
				console.log(a + b)
				}
				
				sum(10,20)
				sum(100,30)
				sum(100,20)
		</script>
	</body>
</html>

运行结果
在这里插入图片描述

6.数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			// js中的数组就是python中的列表
			// 数组只有正向下标
			list1 = ['Python','JavaScript','C','HTML']
			// 数组的增删改查
			// 增加：push - 向数组末尾添加新元素
			list1.push('C++')
			console.log(list1)
			
			// 删除：pop() - 删除数组中最后一个元素
			list1.pop()
			console.log(list1)
			list1.pop()
			console.log(list1)
			
			// 修改
			list1[1] = 'Java'
			console.log(list1)
			
			// 删除：splice(下标,个数) - 从指定的下标开始，删除指定个数的数据
			list1.splice(0,2)
			console.log(list1)
			
			// 查找：
			console.log(list1.length)
			console.log(list1[0])
		</script>
	</body>
</html>

运行结果
在这里插入图片描述

7. 字符串

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			// 字符串：'' 或者 ""
			
			a = 'abcd'
			b= '1234'
			// 字符串的拼接
			console.log(a + b)
			
			// 字符串的重复
			console.log(a + a)
			// console.log(a * 2)（不可用）
			
			// 字符串比较大小符合编码值比较大小规则
			console.log(a > b)
			
			// 字符串的长度
			console.log(a.length)
			
			// 格式化输出
			age = 18
			name = 'KathAmy'
			str1 = `${name}今年${age}岁`
			console.log(str1)
		</script>
	</body>
</html>

运行结果
在这里插入图片描述

8. 字典

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			list1 = ['小红',20,100,50,170]
			// 字典:{}表示容器
			// {key:value} -- key:说明；value:值
			stu_info_dict = {name:'小红',age:20,score:100,weight:50,height:170}
			console.log(stu_info_dict)
			// key:value
			// key:可以用引号引起来，也可以不使用引号;
			// python中key如果是字符串，必须使用引号引起来
			
			// 2.调用字典中的元素
			// 方法一：字典[key] - []中的key必须加''（python只能使用 字典[key]）
			// 方法二：字典.key - .key不需要加''
			console.log(stu_info_dict['name'])
			console.log(stu_info_dict.name)
			
			// 3.字典的长度（字典中没有长度，JS和Python都一样）
			console.log(stu_info_dict.length)
			
			// 4.字典的实际应用
			stu = [
				{name:'李华',age:20},
				{name:'李刚',age:25},
				{name:'小明',age:17}
			]
			// 将成年的学生的名字打印出来
			for(x in stu){
				if(stu[x].age >= 18){
					console.log(stu[x].name)
				}
			}
		</script>
	</body>
</html>

运行结果
在这里插入图片描述
Day 16 over!

KathAmy
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Python Web开发记录 Day4：JavaScript（脚本语言，功能与行为）
流苏的博客
02-27 1017
Python Web开发记录 Day4：JavaScript
Python —— UI自动化之使用JavaScript进行元素点亮、修改、点击元素
南夏一木子的博客
10-22 524
修改元素主要体现在设置和移除元素中，如下：设置属性：setAttribute移除属性：removeAttribute使用JavaScript设置元素举例说明：使用JavaScript移除元素举例说明：setattribute方法详解_笔记大全_设计学院使用场景：使用selenium的click()方法去点击一些按钮时，会出现：Other element would receive the click 提示，为了解决这个问题，可以使用JavaScript的点击解决。
pythonjavascript开发_Python开发【前端】：JavaScript
weixin_39534978的博客
12-03 90
一、JavaScript的基础1、JS的引入方式1 直接编写alert('hello yuan')2 导入文件二、JavaScript常用数据类型2.1 变量JavaScript中变量的声明是一个非常容易出错的点，局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量// 全局变量name = 'James';function func(){// 局部变量var age =...
python的学习day_05
m0_74304371的博客
12-10 1578
python的学习day_05
【Python100天学习笔记】Day26 JavaScript-JQuery
码农-Vax天道的时间宝藏
02-11 889
客户端存储 - localStorage和sessionStorage localStorage.colorSetting = '#a4509b'; localStorage['colorSetting'] = '#a4509b'; localStorage.setItem('colorSetting', '#a4509b'); 获取位置信息 - geolocation navigator.geolocation.getCurrentPosition(function(pos) { ..
Python入门学习——DAY01
qq_64663104的博客
04-11 737
Python入门学习——DAY01 计算机语言基础 编程基本概念 Python安装
python-pip 学习
m0_73708511的博客
10-15 1240
pip 是python的包管理器，它支持安装不包含在该语言标准库中的包，它等价于JavaScript的npm java中maven。
Python - json 操作 - 进阶之路 - Day03
lixiang5453的博客
09-09 6578
1.什么是Json? JSON(JavaScript Object Notation)是一种轻量级的数据交换格式，它是JavaScript的子集，易于人阅读和编写。 前端和后端进行数据交互，其实就是JS和Python进行数据交互。 JSON注意事项： （1）名称必须用双引号（即：””）来包括 （2）值可以是双引号包括的字符串、数字、true、false、null、JavaScript数组，或子对象。 2. python数据类型与json数据类型的映射关系 Python ...
python day 03
m0_59882269的博客
03-14 589
目录 1.什么是编程，什么是编程语言？ 2.编程语言分类 机器语言： 汇编语言： 高级语言： 3.什么是python？优缺点？ 4.安装python 5.安装pycharm 6.python和pycharm区别 7.编写第一个程序HelloWorld 8、运行python程序的两种方式 9、一个python应用程序的运行的三个步骤（******） 10,注释 1.什么是编程，什么是编程语言？ 编程：用代码编写程序 编程语言：用某种语法规则来编写程序 a=10=====..
Python廖雪峰教程学习笔记：Day14
12-22
养成一个好的习惯只需要坚持21天，Day14 什是JSON？ JSON是轻量级的文本数据交换格式，指的是 JavaScript 对象表示法（JavaScript Object Notation），类似XML但又比 XML 更小、更快，更易解析。 JSON语法 JSON数据...
python 13、JAVASCRIPT基础4-1_DOM操作、事件处理_Day04_AM.mp4
03-14
python 13、JAVASCRIPT基础4-1_DOM操作、事件处理_Day04_AM.mp4
Python 13、JAVASCRIPT基础 5-2_JAVASCRIPT_Day05_PM.mp4
02-19
Python 13、JAVASCRIPT基础 5-2_JAVASCRIPT_Day05_PM.mp4
Python 13、JAVASCRIPT基础 1-2_JAVASCRIPT_Day01_PM.mp4
02-19
Python 13、JAVASCRIPT基础 1-2_JAVASCRIPT_Day01_PM.mp4
Python 13、JAVASCRIPT基础 2-2_JAVASCRIPT_Day02_PM.mp4
02-19
Python 13、JAVASCRIPT基础 2-2_JAVASCRIPT_Day02_PM.mp4
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1085
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
`“use strict“`在JavaScript中是什么？它背后的原理是什么？
Jerry学长
05-27 1061
JavaScript的严格模式（strict mode）是ECMAScript 5引入的一项特性。如果你在脚本或函数的顶部声明 ，你就启用了严格模式： 当JavaScript引擎看到这个指令时，它将开始以一种特殊的模式解释代码。在这种模式下，当检测到某些可能导致潜在错误的编码实践时，会抛出错误。这就是严格模式背后的基本原理。考虑下面这个例子： 开发者可能因为强迫症而对齐数值字面量，但这样会无意中使变量 初始化为八进制字面量。在非严格模式下，这将被解释为值 （十进制）。然而，在严格模式下，这样的代码会抛出错
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
最新发布
山花的博客
05-30 334
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
Vue3 - 实现一个雨水滴落的动画效果
良月柒
05-29 144
在 Vue 3 中实现一个雨水滴落的动画效果，可以使用 HTML5 的元素和 JavaScript 来绘制和控制动画。
尚硅谷python爬虫
08-15
尚硅谷是一个提供在线教育的学习平台，他们提供了Python爬虫的相关教学课程。通过学习这些课程，你可以获得Python基础知识、前端基础知识、计算机网络基础以及爬虫原理等方面的知识。Python基础教学可以参考B站...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值