😎 κ³΅λΆ€ν•˜λŠ” μ§•μ§•μ•ŒνŒŒμΉ΄λŠ” μ²˜μŒμ΄μ§€?

HTMLμ—μ„œ Python을 μ‚¬μš©ν•  수 μžˆλŠ” PyScript (1) λ³Έλ¬Έ

πŸ‘©‍πŸ’» λ°±μ—”λ“œ(Back-End)/Node js

HTMLμ—μ„œ Python을 μ‚¬μš©ν•  수 μžˆλŠ” PyScript (1)

μ§•μ§•μ•ŒνŒŒμΉ΄ 2022. 11. 25. 10:26
728x90
λ°˜μ‘ν˜•

<λ³Έ λΈ”λ‘œκ·ΈλŠ” itadventrue λ‹˜μ˜ λΈ”λ‘œκ·Έλ₯Ό μ°Έκ³ ν•΄μ„œ κ³΅λΆ€ν•˜λ©° μž‘μ„±ν•˜μ˜€μŠ΅λ‹ˆλ‹€ :-)>

https://itadventure.tistory.com/542

 

파이슀크립트 도전기(1) - ꡬꡬ단

μ›ΉλΈŒλΌμš°μ €μ—μ„œ μž‘λ™ν•˜λŠ” μƒˆλ‘œμš΄ μŠ€ν¬λ¦½νŠΈλΌμ„œ κΌ­ μ‹œλ„ν•΄λ³΄κ³  μ‹Άμ—ˆλŠ”λ° 이제 μ‹œμž‘ν•΄ 보렀 ν•©λ‹ˆλ‹€ :) μ§€λ‚œ κ²Œμ‹œκΈ€μ— 잠깐 μ„€λͺ…λ“œλ Έλ“― νŒŒμ΄μŠ€ν¬λ¦½νŠΈλŠ” μ›ΉλΈŒλΌμš°μ €μ—μ„œ 파이썬 슀크립트둜 μž‘λ™ν•˜

itadventure.tistory.com

 

 

 

πŸŽ„ PyScript

μœ μ €κ°€ ν‘œμ€€ HTMLκ³Ό λͺ¨λ˜ μ›Ή κΈ°μˆ μ„ μ‚¬μš©ν•˜μ—¬ λΈŒλΌμš°μ €μ—μ„œ λ‹€μ–‘ν•œ 파이썬 기반 μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ λ§Œλ“€ 수 μžˆλ„λ‘ μ§€μ›ν•˜λŠ” ν”„λ ˆμž„μ›Œν¬

 

  • μ—°κ²°μ½”λ“œ
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  • λΈŒλΌμš°μ €μ—μ„œ μ‹€ν–‰ (νƒœκ·Έ μ•ˆ or 파일 뢈러였기)
<py-script>print('Hello, World')</py-script>
<py-script src="./python_file.py"> </py-script>

 

 

πŸŽ„ PyScript κ°„λ‹¨ν•œ 예제

  • Hello, World! μ‹€ν–‰
<html>
  <head>
    <!-- <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /> -->
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
    <py-script> print('Hello, World!') </py-script> 
  </body>
</html>

 

  • js 와 python 의 μ‹œκ°„ λΉ„κ΅ν•˜κΈ°
<!DOCTYPE html>
<html>
  <head>
    <title>Js VS Python Clock</title>
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    <py-env>
    - paths:
      - ./utils.py
    </py-env>
  </head>

  <body>
    <div >js clock time: <label id="jsClock"></label></div>
    <div >py clock time: <label id="pyClock"></label></div>

    <py-script>
        import utils
        <!-- sync ν•¨μˆ˜λŠ” awaitμ—μ„œ suspend되고, await λŒ€μƒμ˜ 값이 μ€€λΉ„λ˜λ©΄ resumeλ˜μ–΄ 싀행을 이어간닀 -->
        import asyncio
        
        <!-- async def둜 λ„€μ΄ν‹°λΈŒ 코루틴을 λ§Œλ“¦ -->
        async def foo():
          while True:
            <!-- # asyncio(Asynchronous I/O)λŠ” 비동기 ν”„λ‘œκ·Έλž˜λ°μ„ μœ„ν•œ λͺ¨λ“ˆ -->
            await asyncio.sleep(1)
            output = utils.now()
            pyscript.write("pyClock", output)
        
        <!-- # fooκ°€ 끝날 λ•ŒκΉŒμ§€ κΈ°λ‹€λ¦Ό -->
        pyscript.run_until_complete(foo())         
    </py-script>
  </body>
</html>

<script>
  setInterval(()=>{
      var timer = new Date();
      var h = timer.getHours();
      var m = timer.getMinutes();
      var s = timer.getSeconds();
      document.getElementById('jsClock').innerHTML = `${h} : ${m} : ${s}`;
  },1000);
</script>
from datetime import datetime as dt


def format_date(dt_, fmt="%H : %M : %S"):
    return dt_.strftime(fmt)


def now(fmt="%H : %M : %S"):
    return format_date(dt.now(), fmt)


def remove_class(element, class_name):
    element.element.classList.remove(class_name)


def add_class(element, class_name):
    element.element.classList.add(class_name)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

728x90
λ°˜μ‘ν˜•
μ €μž‘μžν‘œμ‹œ

'πŸ‘©β€πŸ’» λ°±μ—”λ“œ(Back-End) > Node js' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€

HTMLμ—μ„œ Python을 μ‚¬μš©ν•  수 μžˆλŠ” PyScript (3)  (0) 2022.11.25
HTMLμ—μ„œ Python을 μ‚¬μš©ν•  수 μžˆλŠ” PyScript (2)  (0) 2022.11.25
μ›Ήμ—μ„œ κ·Έλž˜ν”„ λ§Œλ“œλŠ” Plot.js μ•Œμ•„λ³΄κΈ°  (0) 2022.11.22
μ›Ήμ—μ„œ κ·Έλž˜ν”„ λ§Œλ“œλŠ” Google Chart API μ•Œμ•„λ³΄κΈ°  (0) 2022.11.21
μ›Ήμ—μ„œ κ·Έλž˜ν”„ λ§Œλ“œλŠ” d3.js μ•Œμ•„λ³΄κΈ°  (0) 2022.11.21
'πŸ‘©‍πŸ’» λ°±μ—”λ“œ(Back-End)/Node js' Related Articles more
Comments