pythonweb day11

程序员文章站 2022-06-13 12:25:57

...

pythonweb day11

其他内置对象

1.正则表达式对象

创建正则对象
RegExp(Regular Expression)
语法：
1. var reg1 = /匹配模式/ig
2. var reg2 = new RegExp('匹配模式','修饰符');
  et:
  var reg = new RegExp('microsoft','ig');
  var reg3 = RegExp('垃圾'，'ig');

正则对象的方法
test(param)
验证字符串中是否存在满足正则格式的内容，满足就返回True 不满足就返回False
参数就是要验证的字符串

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script>
	//1. 创建正则对象
	var reg1 = /microsoft/;
	var reg2 = /\d{6}/g;
	//匹配以6为数字开头 格式
	//     /^\d{6}/
	var reg3 = new RegExp('^\\d{6}','ig');

	//2. 验证字符串是否满足匹配模式
	var str = "hello123456789";
	var str2 = "12345678hello";
	var str3 = "12345678";
	var r1 = reg2.test(str);
	var r2 = reg2.test(str2);
	var r3 = reg2.test(str3);
	console.log(str,r1);
	console.log(str2,r2);
	console.log(str3,r3);

	console.log(str2,reg3.test(str2));
	console.log(str3,reg3.test(str3));





  </script>
 </head>
 <body>
  
 </body>
</html>

pythonweb day11

2.Math 对象

作用：执行与数学相关的运算
属性：
Math.PI 表示 π
Math.E 表示自然对数

方法：

三角函数
Math.sin(x)
Math.cos(x)
Math.tan(x)
参数x为角度
计算函数
Math.sqrt(x) 开平方
Math.log(x) 求对数
Math.pow(x,y) 求x的y次方

数值函数（较常用）
Math.abs(x); 求x的绝对值
Math.max(a,b,c,d,e,...) 求一组数据中的最大值
Math.min(a,b,c,d,e,...) 求一组数据中的最小值
Math.random() 获取随机数[0,1)
Math.round(x) 四舍五入取整数
Math.ceil(x) 向上取整舍弃小数位，整数位+1
Math.floor(x) 向下取整舍弃小位数保留整数位

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script>
	//1. 数学常量
	console.log(Math.PI);
	console.log(Math.E);

	//2. 三角函数
	var res = Math.sin(45 * (Math.PI/180))
	console.log(res);

	//3. 计算函数
	var res2 = Math.sqrt(9);
	console.log(res2);
	console.log(Math.log(10));
	console.log(Math.pow(5,2));

	//4. 常用的函数
	console.log(Math.abs(-123));
	console.log(Math.max(10,24,65,678,9));
	console.log(Math.min(10,24,65,678,9));

	console.log(Math.random());
	console.log(Math.round(3.999));
	console.log(Math.ceil(3.001));
	console.log(Math.floor(3.99));
  </script>
 </head>
 <body>
  
 </body>
</html>

pythonweb day11

3.Date 日期对象

作用：获取客户端的日期时间
创建Date对象
1. 获取当前的日期时间
  var currentTime = new Date();
2. 初始化自定义的时间
  var date = new Date('2018/09/13 17:10:55');

方法

读取或设置当前时间的毫秒数
1. getTime()
  获取的毫秒数是从 1970 -01-01 00:00:00 开始计算的
  返回当前日期对象与 1970 -01-01 00:00:00 之间的毫秒数
2. 设置 setTime(毫秒数)
  根据指定的毫秒数，结合1970-01-01 00:00:00 计算日期

读取时间分量

getFullYear()
获取当前日期对象的年份四位年份数字
/*
getVear() 已弃用
返回当前日期对象1900年之间的年数
*/
getMonth()
获取当前日期对象的月份信息
返回0 - 11 表示 1 - 12 月
getDate()
返回具体的天日期
getDay()
返回当前日期对象对应的星期数
返回 0 - 6 表示星期日 - 星期六
返回时间
getHours() 返回小时数
getMinutes() 返回分钟数
getSeconds() 返回秒数

日期显示方式（转换字符串）

toString();
toLocaleString(); 根据本地时间将date对象转换为字符串，返回以本地规则格式之后的日期
本地时间区表示
toLocaleTimeString() 上下午时分秒

toLocaleDateString() 年月日

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script>
	//1. 创建日期对象 默认显示格式就是客户端的日期格式
	var date1 = new Date();
	console.log(date1);

	var date2 = new Date('2018-10-10');
	var date3 = new Date("2018/11/11 11:11:11");
	console.log(date2);
	console.log(date3);

	//获取毫秒数
	var s = date1.getTime();
	console.log(s);

	//2. 读取时间分量
	var year = date1.getFullYear();
	var month = date1.getMonth(); //month默认0-11，手动+1
	var date = date1.getDate(); //天数
	var day = date1.getDay(); //星期数
	console.log(year,month+1,date,day);
	
	var hour = date1.getHours();
	var min = date1.getMinutes();
	var sec = date1.getSeconds();
	console.log(hour,min,sec);

	//转换字符串
	console.log(date1.toString());
	console.log(date1.toLocaleString());
	console.log(date1.toLocaleTimeString());
	console.log(date1.toLocaleDateString());



  </script>
 </head>
 <body>
  
 </body>
</html>

练习：

获取当前系统的日期时间

按照以下格式输入
xxxx年xx月xx日 xx时 xx分 xx秒星期x

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<script type="text/javascript">
		var date1 = new Date();
		console.log(date1);
		var year = date1.getFullYear();
		var month = date1.getMonth();
		var date = date1.getDate();


		var hour = date1.getHours();
		var min = date1.getMinutes();
		var second = date1.getSeconds();
		var day = date1.getDay();
		console.log(year+'年'+month+'月'+date+'日',hour+'时'+min+'分'+second+'秒','星期'+day);


	</script>
</head>
<body>

</body>
</html>

外置对象

1.BOM 和 DOM

BOM：Bowser Object Model 浏览器对象模型，主要提供了操作浏览器的一系列与方法
BOM的核心对象 window 对象，JS的顶层对象
window对象在网页初始化的过程中自动创建，每打开一个窗口，都对应一个window对象
DOM：Document Object Model 文档对象模型，主要提供了操作HTML文档的属性和方法
核心对象 document对象，其本身也是window对象的属性使用时，可以省略window
et：
document.write();
window.document.write();

2.window对象

作用：浏览器窗口对象
全年局变量和全局函数，都是window对象的属性和方法，window在使用时可以省略
et：
var a = 10；
window.b = 10；
conson.log(a,window.b)；

function sum(a,b) {
}
window.sum = function () {};
sum();
window.sum();

对话框

alert(' ');
警告框 window.alert()；
prompt(' ');
输入框 window.prompt();

confirm('是否确定');
确认框返回布尔值，只有当用户点击'确定'时，才返回true，其他都返回时false

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script>
	//全局变量和函数都是window对象的属性和方法
	var a = 100;
	function sum(a,b){
		return a + b;
	}
	console.log(a,sum(10,20));
	console.log(window.a,window.sum(10,20));
	console.log(window);

	//对话框
	alert('window的方法alert');
	var res = window.confirm("是否确认");
	console.log(res);



	

  </script>
 </head>
 <body>
  
 </body>
</html>

定时器方法
作用：按照指定的周期或者时间间隔，来调用函数或者计算表达式

周期性定时器 / 间歇调用

特点：每隔一段时间就执行一遍代码
语法：
var timer = setInterval(fun,duration);
window.setInterval();
参数：
fun：表示要执行的操作，可以是函数，也可以直接使用匿名函数
duration：时间间隔，隔多少次时间执行一次代码，单位是ms（毫秒）
返回值：
timer：表示当前定时器的ID，就是一个整数，可以区分不同的定时器，清除定时器时使用

清除定时器
clearInterval(timer);
参数：定时器的ID

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script>
	//1. 间歇调用
	var timer;
	function startInterval(){
		//开启定时器
		timer = setInterval(function (){
			alert("不要急，后面还有");
		},1000);
	}
	function stopInterval(){
		clearInterval(timer);
	}

  </script>
 </head>
 <body>
	<button onclick="startInterval()">开始</button>
	<button onclick="stopInterval()">结束</button>
 </body>
</html>

练习：

创建按钮开始和结束
点击开始时，开启定时器，每隔一秒在控制台输出当前的系统时间

点击结束时，停止打印

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script>
	var timer;
	function startInterval(){
		function showTime(){
			//创建日期对象并输出
			var date = new Date();
			console.log(date);
		}
		timer = setInterval(showTime,1000);
	}
	function stopInterval(){
		clearInterval(timer);
	}
  </script>
 </head>
 <body>
	<button onclick="startInterval()">开始</button>
	<button onclick="stopInterval()">结束</button>
 </body>
</html>

一次性定时器 / 超时调用

特点：在指定的时间间隔之后，执行一次性操作
语法：
var timer = setTimeout(fun,delay);
参数：
fun：要执行的操作
delay：时间间隔，隔多久再执行响应操作
返回值：
timer：定时器ID，在清除定时器时使用

清除定时器：
clearTimeout(timer);

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script>
	var timerID ;
	function startTimeout(){
		//开启超时调用
		timerID = setTimeout(function(){
			alert("已经三秒了");
		},3000);
	}
	function stopTimeout(){
		clearTimeout(timerID);
	}
  </script>
 </head>
 <body>
	<button onclick="startTimeout()">开始</button>
	<button onclick="stopTimeout()">结束</button>
 </body>
</html>

练习：

网页中创建一个按钮

点击按钮时，弹出确认框，询问用户是否需要关闭网页，如果点击确定，就在3秒之后关闭网页
window.close();

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<script type="text/javascript">
		function closeWindow(){
			var res = confirm('真的要关闭吗');
			if (res){
				setTimeout(function(){
					window.close();
				},3000);
			}
		}
	</script>
</head>
<body>
	<button onclick="closeWindow()">确认</button>
</body>
</html>

window中的属性
window中的属性，本身又是一个对象

screen对象
访问屏幕对象：console.log(screen);
console.log(window.screen);
作用：获取客户端显示器相关的信息
属性：

width / height 获取屏幕的宽高

availWidth / availHeight
获取屏幕实际可用的宽高（减去任务栏之后的值）

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script>
	console.log(screen);
	console.log(screen.width,screen.height);
	console.log(screen.availWidth,screen.availHeight);
  </script>
 </head>
 <body>
  
 </body>
</html>

history 对象
作用：包含当前窗口访问过的所有URL
属性&方法：

length属性：获取当前窗口访问过的url的数量

方法：

back() 后退
forward() 前进

go() 跳转几步
num 取值为整数，可正可负
在当前的网页的基础上前进/后退几步

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script>
	function getLength(){
		console.log(history.length);
	}
  </script>
 </head>
 <body>
	<h1><a href="#">Index</a></h1>
	<button onclick="getLength()">获取length</button>
	<button onclick="history.forward()">前进</button>
	<button onclick="history.back()">后退</button>
	<button onclick="history.go(1)">go前进</button>
	<button onclick="history.go(-1)">go后退</button>


 </body>
</html>

location 对象
作用：location 保存的是浏览器地址栏的信息
属性：
href：获取当前窗口正在浏览的网页url
如果给href属性赋值，就相当于页面跳转
方法：
reload() 重载，相当于刷新
reload(true) : 忽略缓存，从服务端加载
reload(false) : 从缓存中加载（默认）

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script>
  
  </script>
 </head>
 <body>
	<button onclick="console.log(location.href);">获取当前url</button>
	<button onclick="location.href='http://www.baidu.com';">百度</button>
	<button onclick="location.reload(true);">重新加载</button>
 </body>
</html>

练习：
创建按钮，点击时跳转 https://blog.****.net/qq_42584444

navigator 对象
作用：保存浏览器相关的信息
属性：
userAgent：显示信息

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script>
	console.log(navigator);
  </script>
 </head>
 <body>
  
 </body>
</html>

3.DOM（document对象）

介绍：
document对象，是DOM中的顶层对象，封装了所有的HTML元素相关的属性，方法以及事件
节点（对象）
网页在加载过程中，会自动生成一颗节点数（DOM树），DOM树会封装网页上所有的内容，网页中的每一个元素，每一段文本，甚至注释，都会被封装成DOM树中单独的一个节点
1. 节点分类
  1. 元素节点 - 网页中的一个元素（标签）
  2. 属性节点 - 标签中的一个标签属性
  3. 文本节点 - 表示标签中的文本内容
    ---------------------------------------------
  4. 注释节点 - 网页中的注释
  5. 文档节点 - 表示整个文档
2. 节点操作
  1. 获取节点
  2. 读取节点
  3. 修改节点
  4. 删除节点
  5. 创建节点
3. 获取元素节点
  1. document.getElementByTagName('a');
    通过制定的标签名获取元素节点，返回节点列表（数组），可以根据下标获取具体的元素节点对象
  2. document.getElementsByClassName(' ');
    根据元素class属性值查找，返回节点列表
  3. document.getElementsByName(' ');
    根据元素name属性值查找，返回节点列表，一般用户查找表单元素
  4. document.getElementById(' ');
    根据元素id属性值查找，返回具体的元素节点对象
    注意：
    脚本标签的书写位置，要放在body之后
```
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
	<h1 class="c1">杨超越</h1>
	<h1 id="wxy">吴宣仪</h1>
	<h1 class="c1">应采儿</h1>
	<p class="c1">谢娜</p>
	兴趣 ：<input type="checkbox" name="hobby" class="c1">抽烟
		<input type="checkbox" name="hobby">喝酒
	
 </body>
 <script>
	//1. 获取元素节点对象
	var elems = document.getElementsByTagName('h1');
	console.log(elems,elems[0]);
	//2. 根据class属性值获取元素节点列表
	var elems2 = document.getElementsByClassName('c1');
	console.log(elems2);
	//3. 根据name属性值获取元素节点
	var elems3 = document.getElementsByName('hobby');
	console.log(elems3);
	//4. 通过id获取元素节点
	var h1 = document.getElementById('wxy');
	console.log(h1);

	//修改元素节点的内容
	elems[0].innerHTML = "<span>就是pick吴宣仪</span>";
	elems[1].innerText = "<span>就是pick吴宣仪</span>";

 </script>
</html>
```
    DOM属性：
    1. innerHTML：修改/获取元素节点的HTML文本，可识别标签
    2. innerText：修改/获取元素节点中的普通文本，不能识别标签
    3. value：该属性只针对表单控件，允许获取或修改表单控件的值

作业：

创建网页，添加div，文本框，按钮，

点击按钮时，实现将文本框输入的内容以一级标题的形式显示在div中

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
	<div></div>
	<input type="text" name="utext">
	<button onclick="showText()">显示</button>
 </body>
 <script>
	 function showText(){
		//1. 获取元素节点
		var div = document.getElementsByTagName('div')[0];
		var input = document.getElementsByName('utext')[0];
		//2. 传值
		div.innerHTML = "<h1>"+ input.value + "</h1>";
		
	 }
 </script>
</html>

上一篇： Oracle 中的类型转换函数

下一篇： Hibernate整合C3P0实现连接池_MySQL

pythonweb day11

其他内置对象

1.正则表达式对象

2.Math 对象

3.Date 日期对象

外置对象

1.BOM 和 DOM

2.window对象

3.DOM（document对象）

pythonweb框架有哪些（全面了解pythonweb主流框架）

pythonweb框架有哪些（全面了解pythonweb主流框架）

Python——day11 函数（对象、名称空间、作用域、嵌套、闭包）

百万年薪python之路 -- day11 -- 函数名的第一类对象及使用

java自学 day11

day11总结-匿名函数、实参高阶函数及变量作用域

PythonWeb框架Django搭建过程

pythonWeb框架创建app模块以及虚拟环境管理工具

python学习day11（公共操作合并，复制，存在，长度，删除）

PythonWeb项目Django部署在Ubuntu18.04腾讯云主机上