1.Brython document
document는 DOM 기본적인 것을 모두 수용하며
document.select( '객체 속성 + 객체 이름')으로 불러올수도 있다
속성 표
속성 | 속성기호 | 예제 |
tag | 없음 | div |
class | . | .class_element |
id | # | #id_element |
tag+tag | [] | div[h1] |
tag+element | 기호 | div.class_element |
불러온 객체는 리스트 형태로 되어있어 원하는 객체를 선택해 추출해야한다
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()">
<!-- tag -->
<div>
<div>tag</div>
<button type="button">tag</button>
</div>
<!-- class -->
<div class="div_class">
<p>class</p>
<button type="button" class="btn_class">class</button>
</div>
<!-- id -->
<div id="div_id">
<p>id</p>
<button type="button" id="btn_id">id</button>
</div>
<!-- tag + tag -->
<div div="tag+tag">
<div>tag + tag</div>
<button type="button">tag + tag</button>
</div>
<!-- tag + element -->
<div>
<div class="div_class">div + element</div>
<button type="button" class="btn_class">div + element</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, console, alert, bind
''' tag '''
def btn_div(self):
console.log(self)
document.select('div')[0].get(selector='div')[0].textContent += ' is changed'
document.select('button')[0].bind('click',btn_div)
''' class '''
def btn_class(self):
console.log(self)
document.select('.div_class')[0].get(selector='p')[0].textContent += ' is changed'
document.select('.btn_class')[0].bind('click',btn_class)
''' id '''
def btn_id(self):
console.log(self)
document.select('#div_id')[0].get(selector='p')[0].textContent += ' is changed'
document.select('#btn_id')[0].bind('click',btn_id)
''' tag + tag'''
def btn_tag(self):
console.log(self)
document.select('div[div]')[0].get(selector='div')[0].textContent += ' is changed'
document.select('button')[3].bind('click', btn_tag)
''' tag + element'''
def btn_element(self):
console.log(self)
document.select('div.div_class')[1].textContent += ' is changed'
document.select('button')[4].bind('click',btn_element)
4. 끝
생각보다 속성을 불러오는 곳에서 리스트 형식으로 여러개가 있다는 것을 찾지 못하여 해매였다
그리하여 console.log 를 이용해 분해하여 bind() 함수가 작동할 수 있는 형태를 찾아내었고
그후로는 빠르게 진행이 되었다
궁금한 점과 질문이 있다면 밑에 뎃글을 달아주시고 아는 만큼 답변을 달아 주겠습니다
'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] 3. 특성 (이벤트) 적용해보기(Brython) (0) | 2021.03.19 |
[Python web] 2. Brython DOM 객체 가져오는 방법(Brython) (0) | 2021.03.18 |
[Python web] 1. 웹 만들기 (Brython) (0) | 2021.03.18 |