Python Web/Brython

[Python web] 2. Brython DOM 객체 가져오는 방법(Brython)

1. Brython DOM

Brython 에서는 간단한 방법으로 객체를 가져오고 사용하는 방법을 제공하고 있다

 

변화주려는 객체 <= 객체에 적용시킬 속성

 

2. 실행

1. 간단한 실행 방법 

 

3. 파일구조

<folder>

Folder─┬─ index.htm
             ├─ style.css
             └─ script ─┬─ brython.js
                                 ├─ brython.min.js
                                 ├─ brython_stdlib.min.js
                                 └─ python.py

<index.html>

<!DOCTYPE html>
<html>
<head>
	<!-- brython 가져오기 -->
	<script type="text/javascript" src="script/brython.min.js"></script>
	<script type="text/javascript" src="script/brython_stdlib.min.js"></script>
	
	<!-- python 파일 사용하기 -->
	<script type="text/python" src="script/python.py"></script>
	
	<!-- css 파일 가져오기 -->
	<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

<body onload="brython()">
	<div class="butten_list">
		<button id="test_button1">document &lt;= "Hello !"</button>
		<button id="test_button2">document &lt;= html.B("Hello !")</button>
		<button id="test_button3">document &lt;= html.B(html.I("Hello !"))</button>
		<button id="test_button4">document &lt;= html.B("Hello, ") + "world !"</button>
		<button id="test_button5">document &lt;= html.UL(html.LI(i) for i in range(5))</button>
		<button id="test_button6">html.A("Brython", href="http://brython.info")</button>		
	</div>
</body>
</html>

<css/style.css>

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}


html {
	height:100%;
	border-style: solid ;
	border-color: white;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 25px;
	padding: 30px;
	line-height: 1.6;
	overflow:hidden;
	color: white;
	font-size: 15px;
}
h1 {
	text-align: center;
	margin-bottom: 30px;
	border-bottom: 1px #ccc solid;
}

h2 {
	margin-top: 20px;
}

button {
	cursor: pointer;
	display: block;
	background: #333;
	color: #fff;
	border: 0;
	border-radius: 5px;
	padding: 10px 20px;
	margin: 20px 0;
}

input[type="text"] {
	border: 1px #ccc solid;
	width: 300px;
	padding: 4px;
	height: 35px;
	margin-top: 20px;
}

a {
	color: white;
}

ul {
	font-size: 10px;
}
.card {
	margin: 20px 0;
	border: #ccc 1px solid;
	padding: 20px;
}

.box {
	background: steelblue;
	width: 1.6em;
	height: 1.6em;
}

.brython-dialog-main {
	position:absolute;
	border-style: solid;
	border-width: thin;
	border-radius: 15px;
	background: white;
	border-color: black;
	width: 230px;
}
.brython-dialog-title {
	color: black;	
	margin: 5px 10px 10px 10px;
	border-bottom: 2px solid ;
}
.brython-dialog-close {
	color: black;
	float: right;
}
.brython-dialog-close:hover {
	cursor:pointer;
	color : gray;
	transition: 1s ease-in;
}
div.brython-dialog-panel div{
	text-align: center;
}

.brython-dialog-button {
	display: inline-block;
	vertical-align: center;
	cursor:pointer;
	
}
.butten_list{
	float:right;
	top : 10px;
	right: 10px;
	border: 1px solid;
	padding: 0px 10px 0px 10px;
	border-radius: 5px;
}

@media (max-width: 230px){
	.brython-dialog-main {
		width: 100%;
	}
}

<script/python.py>

from browser import document ,html
from browser.widgets.dialog import InfoDialog


def alert(event):
    document <= "Hello !"

def alert2(event):
    document <= html.B("Hello !")

def alert3(event):
    document <= html.B(html.I("Hello !"))

def alert4(event):
    document <= html.B("Hello, ") + "world !"

def alert5(event):
    document <= html.UL(html.LI(i) for i in range(3))

def alert6(event):
    document <= html.A("Brython", href="http://brython.info")
    
document["test_button1"].bind("click", alert)
document["test_button2"].bind("click", alert2)
document["test_button3"].bind("click", alert3)
document["test_button4"].bind("click", alert4)
document["test_button5"].bind("click", alert5)
document["test_button6"].bind("click", alert6)

4.  끝

객체를 불러오고 입력하는 방식이 <= 으로 넣고 싶은 속성을 넣어줄 수 있어 좀더 간결하고 보기 편하게 되었다

 

html을 불러오게 되면 html 의 기본속성을 사용할 수 있게 된다

 

'Python Web > Brython' 카테고리의 다른 글

[Python web] 6. FileReader(), rotate(), window.sessionStorage 파일 불러오기 및 객체 속성 적용(Brython)  (3) 2021.03.25
[Python web] 5. Template(), ajax() html글 객체 가져오기 (Brython)  (0) 2021.03.23
[Python web] 4. document 사용법 객체 불러오기 (Brython)  (0) 2021.03.22
[Python web] 3. 특성 (이벤트) 적용해보기(Brython)  (0) 2021.03.19
[Python web] 1. 웹 만들기 (Brython)  (0) 2021.03.18