Python Web/Brython

[Python web] 5. Template(), ajax() html글 객체 가져오기 (Brython)

1.Brython document 

속성 표

함수 설명 예제
Template() html글 안의 {}로 묶인 객체를 변환할수 있다 Template(document['아이디']).render(name='글에{여기부분} 이름입력')
ajax() web 상의 정보를 가져오고 불러올 수 있다 req = ajax.ajax()
req.open('GET', url, True)
req.bind('complete', 실행함수)
json web의 text 정보를 분석 추출하는데 사용한다 data = json.loads(req.responseText)
targettext = data['특정속성']
set_timeout() sleep을 사용할 수 없어 대신 사용한다 timer.set_timeout(실행함수, 3000)

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>
    <meta charset="utf-8">
    <!-- brython 가져오기  오프라인 -->
    <script type="text/javascript" src="script/brython.js"></script>
    <script type="text/javascript" src="script/brython_stdlib.min.js"></script>

    <!-- css 가져오기 -->
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <!-- python 파일 사용하기 -->
    <script type="text/python" src="script/python.py"></script>
</head>
<body onload="brython()">
    <h1>Brython</h1>
    <!-- Template and variable -->
    <h2 id="h2_hello">Hello {name}</h2>
    
    <button id="btn_jax" class="btn_jax">눌러주세요</button>
    
</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, console, ajax, timer
from browser.template import Template



def make_bye():
  Template(document['h2_hello']).render(name='bye')

timer.set_timeout(make_bye, 3000);


url = 'https://api.chucknorris.io/jokes/random'

def on_complete(req):
    import json
    data = json.loads(req.responseText)
    joke = data['value']
    console.log(data['value'])
    document['h2_hello'].text = joke
    
    
def get_jax(self):
    req = ajax.ajax()
    req.open('GET', url, True)
    req.bind('complete', on_complete)
    document['h2_hello'].text = 'Loading...'
    req.send()

document['btn_jax'].bind('click', get_jax)

4.  끝

파이썬의 장점인 웹 크롤링과 글을 쉽게 변환하고 사용할 수 있는 함수들이다

아쉽게도 sleep 함수가 되지않아 set_timeout을 사용하게 되었다.

조금 이상한 부분이 있다 set_timeout 의 변수를 불러오면 시간과 관계없이 바로 적용되지만 화면상은 정한 시간에 적용되는걸 볼 수 있다.

아직 심도있게 분해하지 못하였지만 나중에 쓸일이 있으면 더 분해하여 sleep처럼 사용해볼 예정이다

 

궁금한 점과 질문이 있다면 밑에 뎃글을 달아주시고 아는 만큼 답변을 해드리겠습니다

 

 

 

 

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

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