eclipse可以写前端吗_Python 竟然也可以写网页前端了!
Python作为胶水语言,真的是无所不能。这不,最近又出现一个基于 Python3,目标是替代 JavaScript 的前端开发工具 —Brython
好用吗?咱今天来试试用它写一个计算器:
不过,我们首先要知道它作为 Python 的客户端 Web 编程工具,和 JS 有什么区别呢?
1. 特点
1. 可轻易地在页面中内嵌 Python 终端进行测试
2. 运行速度接近于 CPyhon
3. 写法方便,社区强大,可进行敏捷开发
如果 Python 和 JS 你都写过,那大概率会觉得相同的功能,用 Python 写起来比 JS 更方便。
4.和 JS 一样,你不用安装任何东西就可以开始编写
下面就用Brython做一些简单的实验吧。
2. 实验
0. 安装
与通常的 Python 库一样,可以通过 pip install brython 进行安装。
然后在一个空目录下执行:
python -m brython --install
1. 在页面上显示 Hello !:
<
将这份代码保存为index.html,双击在浏览器中打开,即可看到Hello !字样:
原理:
代码的 head 中,引入了一个 Brython 引擎附带的 brython.min.js 模块,用于使用 Python 控制页面。
而在 <script type="text/python"> 和 </script> 之间就是相应的 Python 代码。
可以看到,想在 document 中显示文本,只需要直接输入:
document <= "你所需要显示的文本"
后续你将会看到用 Brython 使用标准化的 DOM 语法和页面交互的例子。
2. 用 HTML 标签来做文本格式化:
如果要加粗文本:
from browser import document, html
document <= html.B("Hello !")
部分加粗、部分不加粗:
from browser import document, html
document <= html.B("Hello, ") + "world !"
i 标签:
document <= html.UL(html.LI(i) for i in range(5))
超链接:
document <= html.A("Python实用宝典", href="https://pythondict.com")
以上例子如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/brython@3.8.9/brython.min.js">
</script>
</head>
<body onload="brython()">
<script type="text/python">
from browser import document, html
document <= html.B("Hello !")
document <= html.UL(html.LI(i) for i in range(5))
document <= html.A("Python实用宝典", href="https://pythondict.com")
</script>
</body>
</html>
效果:
3. 写一个简单的计算器
先写好简单的图形架构,用th和tr标签即可:
from browser import document, html
calc = html.TABLE()
calc <= html.TR(html.TH(html.DIV("0", id="result"), colspan=3) +html.TH("C", id="clear"))
lines = ["789/","456*","123-","0.=+"]
calc <= (html.TR(html.TD(x) for x in line) for line in lines)
document <= calc
然后加上一些 CSS 样式就可以把这个简单的图形架构变漂亮了
<style>
*{
font-family: sans-serif;
font-weight: normal;
font-size: 1.1em;
}
td{
background-color: #ccc;
padding: 10px 30px 10px 30px;
border-radius: 0.2em;
text-align: center;
cursor: default;
}
#result{
border-color: #000;
border-width: 1px;
border-style: solid;
padding: 10px 30px 10px 30px;
text-align: right;
}
</style>
最后只需要做运算符的事件触发器即可,从下面这行代码:
calc <= (html.TR(html.TD(x) for x in line) for line in lines)
可以看出,所有的按钮都被创建为 td 标签,因此我们要获得所有这些按钮是否被点击,仅需要:
for button in document.select("td"):button.bind("click", action)
意思是,按钮被点击后便执行 action 操作,action 操作定义如下:
def action(event):"""Handles the "click" event on a button of the calculator."""# The element the user clicked on is the attribute "target" of the# event objectelement = event.target# The text printed on the button is the element's "text" attributevalue = element.textif value not in "=C":# update the result zoneif result.text in ["0", "error"]:result.text = valueelse:result.text = result.text + valueelif value == "C":# resetresult.text = "0"elif value == "=":# execute the formula in result zonetry:result.text = eval(result.text)except:result.text = "error"
如果不是 = 号或 C 号,则进行 字符串拼接。
如果是 C 号,则清空 result。
如果是 = 号,则需要计算出结果,直接对字符串用 eval() 函数 即可完成目的。
这边是全部核心代码了,写起来真的极其方便。
你可以访问如下地址体验这个 Python 写的计算器:
https://pythondict.com/calculator.html
完整源码:https://pan.baidu.com/s/1d4ndpN1Lpzb6fpgqKJ7acQ
提取码:v36f
作者:Ckend
eclipse可以写前端吗_Python 竟然也可以写网页前端了!相关推荐
- python怎么写绝对路径_python绝对路径怎么写
1. python中的"绝对路径"和"相对路径"如何理解 相对路径是相对脚本文件来的. 比如脚本在C:/python目录下,相同目录下有一个文件叫test.tx ...
- python写文件自动换行_python怎么换行继续写脚本
推荐手册:Python 基础入门教程 在python中,Python用反斜线 ("\") 作为续行符(换行符),这里以python3.5为例.首先运行终端或者cmd命令行(wind ...
- web前端网页设计作业_如何学习网页前端设计培训?
学习网页的前端设计分为几个步骤或者说几个网页设计教程大类. 一个是熟练掌握各种网页设计需要的操作软件,然后就是WEB界面设计与项目设计,最后还有WEB整站设计实训. 如何学习网页的前端设计呢? 许多零 ...
- 前端中标签页的手写方法
虽然流行用框架写出来 这里也可以用手写方法写出来 也并不是这么复杂 首先为了实现如下效果的标签 我们可以在前端把两个表直接输出出来 <table class = "tag char&q ...
- 微信小程序 手写签名_你竟然还不知道在微信上就可以手写签名、签文件了~
原标题:你竟然还不知道在微信上就可以手写签名.签文件了~ 你是否遇到以下问题: 正在休假却收到公司的夺命连环call,说有重要文件需要你签字确认? 正在上班,却有孩子学校.小区.甚至居委会各种需要通知 ...
- 前端程序员福利 利用node写接口
Code is never die ! 前端程序员为什么要自己写接口?
- 写好CSS代码的70个专业建议-前端开发博客
写好CSS代码的70个专业建议-前端开发博客 CSS 并不总是容易处理. 在你的能力和经验不够的时候,CSS编程会成为一个噩梦,特别是你不确定为页面元素中选择哪种选择器的时候.使用一个不常见的CSS属 ...
- 使用 Vscode 编写 HTML 文档竟然可以自动写代码(2)
作者简介 作者名:1_bit 简介:CSDN博客专家,2020年博客之星TOP5,蓝桥签约作者.15-16年曾在网上直播,带领一批程序小白走上程序员之路.欢迎各位小白加我咨询我相关信息,迷茫的你会找到 ...
- 计算机原始程序,原始程序员竟然是这样写代码的?
原标题:原始程序员竟然是这样写代码的? 如今我们大部分人眼中编程是这样的:一台电脑,一个编辑器,几串代码.彩色的页面,自动缩进,智能联想,隐隐觉得这是一件很艺术的事情. 不过,在几十年前,原始程序员更 ...
最新文章
- boke例子: freermarker:在使用ajax传递json数据的时候多出冒号
- l usr bin mysql,解决/usr/bin/ld: cannot find -lmysqlclient错误
- 关于华为x2中的外置SDCard的使用
- WinForm立体饼状图实现(附源码示例) 之配餐系统的开发
- checkbox对齐排列
- 关于scanf和的问题
- Poj_1325 Machine Schedule -最大匹配性质题目
- awk文本处理总结(入门,中级,高级)
- 海龟交易法则02_揭秘海龟思维
- [Easyui - Grid]为easyui的datagrid、treegrid增加表头菜单,用于显示或隐藏列
- autotools工具介绍
- Python 爬虫实例(10)—— 四行代码实现刷 博客园 阅读数量
- mysql 定义游标_mysql 游标的使用
- C语言实现九九乘法表(四种情况)
- Vue项目整体添加加载中Loading页面
- python遗传算法工具箱的使用_Deap: python中的遗传算法工具箱
- C语言实现简单 词法分析程序(编译原理)
- 行为金融(二):行为金融的心理学基础
- 超全 | 基于纯视觉Multi-Camera的3D感知方法汇总!
- git branch -a查看不了所有远程分支
热门文章
- 浅析「扣减库存」的方案设计
- 这么流行的ZooKeeper,原来是这样设计的!
- 深入探究 RocketMQ 事务机制的实现流程,为什么它能做到发送消息零丢失?
- 【系统缓慢、CPU 100%、频繁Full GC问题】的定位排查思路!
- 超详细教你10分钟搭建一个高端的B2B2C模式的综合性商城|含来客推V3源码下载
- 网易云音乐消息队列改造之路
- 在Leangoo里怎么修改昵称,简称,头像?
- Windows10~python和tensorflow配置
- 分布式架构的对比-3Par InServ
- gitlab mysql devel_服务器搭建gitlab+mysql+nginx+redis+Jekins