JavaScript is de standaard programmeertaal voor webapplicaties. Maar voor liefhebbers van Python is er goed nieuws: dankzij PyScript kun je ook in je favoriete programmeertaal webapplicaties bouwen. Hierdoor krijg je toegang tot een breed scala aan populaire Python-bibliotheken. Bovendien kun je de Python-code moeiteloos communiceren met JavaScript-code.

Webapplicaties maken doorgaans gebruik van een drie-eenheid van (programmeer)talen: HyperText Markup Language (html), Cascading Style Sheets (css) en JavaScript. Html is een opmaaktaal waarmee je de structuur en inhoud van een webpagina definieert. Met css definieer je stijlen die de vormgeving van de pagina beschrijven. En JavaScript is een programmeertaal waarmee je het gedrag van de pagina bepaalt.

Hoewel JavaScript de dominante programmeertaal is in de wereld van webapplicaties, heeft het erbuiten niet dezelfde populariteit kunnen winnen. Python daarentegen is een populaire programmeertaal in diverse domeinen, onder andere voor data-analyse, machine learning, wetenschappelijke projecten, scripting en de serverkant van webapplicaties. Hoe handig zou het zijn als je jouw kennis van Python ook in de webbrowser kunt toepassen?

1 PyScript

Dat is precies wat PyScript mogelijk maakt: Python-toepassingen ontwikkelen die in de webbrowser werken. Net zoals je JavaScript-code in een html-pagina kunt opnemen, kun je dat dankzij PyScript ook met Python-code doen. Bovendien kunnen Python- en JavaScript-objecten probleemloos met elkaar communiceren, zodat je niet gebonden bent aan PyScript, maar je Python-code kunt combineren met bestaande JavaScript-bibliotheken.

Je kunt met PyScript ook gebruikmaken van heel wat populaire Python-pakketten, zoals Beautiful Soup, Matplotlib, NumPy, Pandas of Scikit-learn. Op die manier kun je dus niet alleen je kennis van de programmeertaal Python meenemen naar je webapplicaties, maar ook die van het uitgebreide Python-ecosysteem. Als je dus vertrouwder bent met Python dan met JavaScript en je webapplicaties wilt bouwen, dan is PyScript een logische keuze.

2 Hallo wereld

Een PyScript-webapplicatie heeft drie bestanden nodig. Eerst en vooral een html-bestand, bijvoorbeeld index.html, met de structuur van je webpagina, verwijzingen naar PyScript zelf en je eigen Python-script. Een tweede bestand beschrijft de Python-omgeving waarin je applicatie draait. Hierin geef je bijvoorbeeld aan welke extra Python-pakketten je script gebruikt. Dit bestand heet pyscript.toml of pyscript.json. Tot slot is er je Python-script zelf, dat je in een Python-bestand als main.py opslaat.

Een eenvoudig html-bestand voor een PyScript-applicatie ziet er als volgt uit:

Je verwijst hier in het element head naar de css-stylesheet en JavaScript-code van PyScript. In het element script van de body verwijs je dan naar je Python-script.

3 Python-script

In de body van de html-pagina vind je het element button met een attribuut py-click dat de waarde "generate_text" heeft. Hiermee geef je aan dat bij een klik op die knop de Python-functie generate_text wordt aangeroepen. In het element script verwijs je vervolgens naar je Python-script main.py. Met type="py" geef je aan dat het om een Python-script gaat in plaats van een JavaScript-bestand. En met het attribuut config verwijs je naar het configuratiebestand waarin je definieert welke Python-pakketten PyScript voor je applicatie moet installeren. Als je bijvoorbeeld het pakket lorem-text wilt gebruiken, dan ziet het bestand pyscript.toml er als volgt uit:

Het Python-script main.py heeft de volgende inhoud:

We importeren hier dus de module lorem uit lorem-text, het pakket dat we hebben geïnstalleerd. Vervolgens importeren we ook document uit PyScript. In de functie generate_text, die wordt aangeroepen wanneer je in de webpagina op de knop klikt, krijg je via document toegang tot het volledige Document Object Model (DOM) van de webpagina. Hiermee selecteer je het element met de id output. De functie roept dan lorem.paragraph() aan om een alinea met willekeurige tekst te genereren en kent die toe aan de tekst van het geselecteerde element.

4 Webserver

Je PyScript-applicatie is nu klaar, maar je kunt het html-bestand niet gewoonweg in je webbrowser openen als een lokaal bestand. Je moet het bestand via een webserver aanbieden. Als je Python lokaal (op je computer) hebt geïnstalleerd, kun je eenvoudig de ingebouwde webserver van Python opstarten. Navigeer in een terminalvenster of opdrachtprompt naar de directory waarin je PyScript-bestanden staan en voer de volgende opdracht uit:

Dit start een webserver op poort 8000 die de inhoud van de huidige directory aanbiedt. Bezoek vervolgens in je webbrowser de url http://127.0.0.1:8000/, die verwijst naar poort 8000 op je computer zelf. Je krijgt nu een webpagina te zien met als titel Hallo wereld en een knop met als label Lorem ipsum.

Wacht even tot de hele PyScript-omgeving is ingeladen. Klik dan op de knop wanneer die niet meer grijs is. Eronder verschijnt vervolgens een alinea met willekeurige tekst. Elke keer dat je op de knop drukt, verschijnt er een nieuwe tekst omdat de functie generate_text weer wordt aangeroepen.

5 Grafieken plotten

Nu kun je ook in je webapplicaties gebruikmaken van het krachtige ecosysteem van Python-pakketten voor bijvoorbeeld datavisualisatie, zoals Matplotlib. Het principe is hetzelfde als het eerste voorbeeld met de lorem ipsum-tekst: je creëert een html-bestand met de structuur van je webpagina, een bestand met de Python-pakketten die je nodig hebt, en uiteindelijk een bestand met je Python-code. Het bestand met de afhankelijkheden, pyscript.toml, vermeldt eenvoudigweg het pakket Matplotlib:

Het html-bestand index.html ziet er als volgt uit:

In dit voorbeeld laten we de gebruiker een amplitude en periode kiezen, om vervolgens een grafiek van de sinusfunctie met die ingestelde amplitude en periode te plotten.

6 Schuifbalken

In de html-code definiëren we twee elementen input van het type range. Je webbrowser toont die als schuifbalken. We stellen voor elk element een minimum en maximum in, een stap (de waarde waarmee de schuifbalk per eenheid wordt verschoven) en een standaardwaarde. We geven beide elementen ook een label, met diezelfde standaardwaarde, zodat de gebruiker niet alleen een bolletje op een schuifbalk ziet, maar ernaast ook de waarde die daardoor wordt ingesteld.

Eronder plaatsen we dan een element div waarin de grafiek komt. We definiëren hier ook een script dat naar het Python-bestand en de configuratie met de te installeren pakketten verwijst. In de elementen input verwijzen we ook naar de in dit Python-bestand gedefinieerde functie plot_sine die wordt uitgevoerd bij elke wijziging van de invoer in het element. De webapplicatie roept de functie daardoor aan telkens als je aan de schuifbalk sleept.

7 Sinus plotten

Dan volgt uiteindelijk de code in main.py om de sinusfunctie te plotten:

De functie plot_sine haalt allereerst de waarde op van het element met de id amplitude en wijzigt de tekst van het label voor dat element naar die waarde. Daarna doet de functie hetzelfde voor het element met de id period. Deze eerste regels code synchroniseren dus elke keer de getoonde waarde met de ingestelde waarde, zodat de gebruiker onmiddellijk feedback krijgt bij het schuiven.

Daarna creëren we met NumPy’s functie arange een reeks x-waarden en vervolgens berekenen we voor elk van die x-waarden de sinusfunctie met NumPy’s functie sin. Door het argument van de sinusfunctie te vermenigvuldigen met 2π en te delen door de periode, berekenen we de sinus met de gewenste periode: de kromme wordt zo breder of smaller geplot. Door het resultaat van de sinusfunctie met de amplitude te vermenigvuldigen, wordt de kromme hoger of lager geplot.

Uiteindelijk maken we de huidige figuur leeg, plotten we de x- en y-waardes in het blauw, voegen we een raster toe en stellen we het bereik voor de x- en y-as in. Daarna tonen we de plot in het target sine, dat verwijst naar de id van het desbetreffende element div in het html-bestand. Helemaal op het einde van het Python-bestand roepen we de functie ook expliciet op. Zo wordt de grafiek ook getoond nadat de pagina is geladen, zonder dat de gebruiker eerst met een van de schuifbalken moet schuiven.

8 JavaScript in Python aanroepen

Er bestaat uiteraard al een heel ecosysteem van JavaScript-bibliotheken voor webapplicaties. Je hoeft het wiel niet opnieuw uit te vinden in Python of een Python-alternatief te zoeken als je er al een in JavaScript bij de hand hebt. Zoals we eerder al schreven, biedt PyScript volledige interoperabiliteit tussen Python- en JavaScript-code in je webapplicaties. Om JavaScript-functies in je Python-code aan te roepen, importeer je de globale JavaScript-namespace met:

Daarna gedraagt js zich in je Python-code als een Python-module en kun je alle globale JavaScript-functies aanroepen met js.naamvanfunctie.

Als je asynchrone JavaScript-functies wilt aanroepen, moet je ook de module asyncio in je Python-code importeren en de functies aanroepen met await ervoor.

9 Alles in één

Laten we dit eens illustreren met een eenvoudig voorbeeld dat de JavaScript Fetch API gebruikt om je publieke ip-adres via de website ipify op te vragen. We tonen meteen een alternatieve manier om PyScript te gebruiken door de Python-code rechtstreeks in het html-bestand te plaatsen in plaats van een afzonderlijk Python-bestand. Zo heeft onze webapplicatie maar één bestand nodig, het html-bestand:

We creëren hier in de body een element py-script met daarin de Python-code. Merk op dat dit element een attribuut async heeft, omdat we in de Python-code een asynchrone functie met await aanroepen. Zonder het attribuut async zou de code niet werken.

10 Webpagina ophalen

De code roept de globale JavaScript-functie fetch aan met als argument de url van de API van ipify. Dit is een asynchrone JavaScript-functie, vandaar dat we die aanroepen met awaitjs.fetch(url). Van het resultaat vragen we de tekst op. Omdat dit ook een asynchrone JavaScript-functie is, moeten we dit in onze Python-code ook met await aanroepen.

Als dit succesvol is, bevat de variabele public_ip het antwoord van de webserver van ipify, namelijk je publieke ip-adres. We creëren dan een f-string met de boodschap “Mijn publieke IP-adres:” gevolgd door het betreffende ip-adres. Met de functie display (die je niet mag vergeten te importeren uit de module pyscript) toon je deze string in het html-element waarin deze Python-code wordt uitgevoerd, namelijk het paragraaf-element p. En zo krijg je wanneer je deze webpagina laadt na een korte pauze je ip-adres te zien.

11 Python REPL

Met PyScript kun je zelfs een Python REPL (read-eval-print loop) in je webpagina toevoegen: een terminalvenster waarin je Python-opdrachten uitvoert, volledig client-side in je webbrowser. De html-code hiervoor ziet er als volgt uit:

De attributen terminal en worker voor het element script zijn hier belangrijk. Het eerste attribuut toont een terminal waarin de uitvoer van de Python-functie print komt, en het tweede attribuut maakt de terminal interactief (bijvoorbeeld om de gebruiker invoer te vragen met de Python-functie input).

Als je deze webapplicatie zo zou uitvoeren, zou je in de JavaScript-console een foutmelding krijgen: “Error: Unable to use SharedArrayBuffer due insecure environment.” Om je webpagina in een veilige context te plaatsen, moet je de HTTP-headers Cross-Origin-Opener-Policy, Cross-Origin-Embedder-Policy en Cross-Origin-Resource-Policy instellen.

De eenvoudige ingebouwde webserver van Python die we in dit artikel gebruiken, doet dat niet. Maar als je het bestand mini-coi.js via deze GitHub-pagina downloadt en in dezelfde directory als je html-bestand opslaat, en in het element head van je html-pagina vóór alle scripts, links en styles hiernaar verwijst met <script src="./mini-coi.js" scope="./"></script>, werkt dit wel. Laad de pagina, wacht even tot de Python-omgeving is opgestart, en je kunt aan de slag in je interactieve Python-terminal.

Op zoek naar de ultieme verbinding? Acer onthult tijdens CES vier nieuwe netwerkproducten met de nieuwste wifi 7- en 5G-technologie. Van een krachtige Predator-router voor gamers tot slimme mesh-systemen en een mobiele hotspot.

Acer heeft tijdens CES in Las Vegas het assortiment aan netwerk- en connectiviteitsproducten uitgebreid met vier nieuwe apparaten. Het gaat om een 5G CPE-router gericht op gaming, twee wifi 7 mesh-routers voor thuis en kleine kantoren, en een draagbare 5G-hotspot voor mobiel gebruik. Met deze introducties speelt de fabrikant in op de eeuwige vraag naar snellere en stabielere verbindingen, zowel binnenshuis als onderweg. Alle aangekondigde producten maken gebruik van de laatste wifi 7- en 5G-technologieën en zijn bedoeld voor diverse gebruiksscenario's, zoals vaste thuisnetwerken tot flexibel werken op locatie.

©Acer

5G en wifi 7 in één router

De Predator Connect X7S 5G CPE is een router voor gebruikers die hoge eisen stellen aan netwerkprestaties, zoals gamers en streamers. Het apparaat combineert mobiele 5G-connectiviteit met tri-band wifi 7, waarbij gebruik wordt gemaakt van de 2,4GHz-, 5GHz- en 6GHz-banden. Hierdoor kan de router volgens Acer downloadsnelheden tot 4,67 Gbps via 5G ondersteunen, wat vooral relevant is op locaties waar glasvezel ontbreekt of beperkt beschikbaar is. Door meerdere banden tegelijk te benutten, kan de verbinding stabiel blijven wanneer meerdere apparaten actief zijn.

Naast de draadloze mogelijkheden beschikt de Predator Connect X7S over functies die gericht zijn op het beheren van netwerkverkeer. Via Hybrid Quality of Service en ondersteuning voor Intel Killer Prioritization Engine kan bandbreedte worden toegewezen aan toepassingen die gevoelig zijn voor vertraging, zoals online games of videostreaming. De router ondersteunt zowel 5G als 4G LTE via een nano-SIM en kan daarnaast overschakelen naar een bekabelde 2,5 Gbps Ethernet WAN-verbinding als back-up. Daarmee is het apparaat bedoeld als centrale netwerkoplossing voor vaste én mobiele internetverbindingen binnen één huishouden.

©Acer

Mesh-routers voor woningen en kleine kantoren

Voor vaste netwerken introduceert Acer de Connect Ovia T360 en T520, twee wifi 7 mesh-routers met verschillende configuraties. De T360 is een dual-band model dat gebruikmaakt van 2,4 GHz en 5 GHz en per knooppunt een dekking tot circa 90 vierkante meter biedt. Deze uitvoering richt zich vooral op appartementen en kleinere woningen waar een stabiele basisdekking volstaat. De T520 voegt daar een extra 6GHz-band aan toe en vergroot de dekking per knooppunt tot ongeveer 110 vierkante meter, wat deze router geschikter maakt voor grotere woningen of omgevingen met veel gelijktijdige verbindingen.

Beide mesh-systemen zijn ontworpen om dode zones in huis of kantoor te verminderen door meerdere knooppunten te laten samenwerken. Ondersteuning voor wifi 7-functies zoals Multi-Link Operation maakt het mogelijk om meerdere frequentiebanden tegelijk te gebruiken, wat kan bijdragen aan lagere latentie en een hogere doorvoersnelheid. Extra knooppunten kunnen eenvoudig worden toegevoegd, waarbij apparaten automatisch overschakelen naar het sterkste signaal wanneer gebruikers zich door de ruimte bewegen. Naast draadloze verbindingen bieden de routers ook snelle LAN- en WAN-poorten voor apparaten die je liever bekabeld gebruikt.

©Acer

Mobiele hotspot voor onderweg

Met de Connect M4D 5G Mobile WiFi richt Acer zich op gebruikers die ook buiten huis of kantoor een fatsoenlijke internetverbinding willen. Deze compacte hotspot kan een 5G-verbinding delen met maximaal zestien apparaten tegelijk via dual-band wifi 6. Dat maakt het apparaat geschikt voor zakelijk reizen, woon-werkverkeer of situaties waarin tijdelijk een eigen netwerk nodig is. De ingebouwde batterij heeft volgens Acer een gebruiksduur tot 15 uur, wat genoeg moet zijn voor een volledige werkdag zonder opladen.

De M4D ondersteunt verschillende SIM-opties, waaronder nano-SIM, eSIM en virtuele SIM, waardoor gebruikers tussen providers en regio's kunnen wisselen zonder van hardware te veranderen. Je kunt het apparaat ook inzetten als wifi-extender of via usb-tethering koppelen aan laptops met verschillende besturingssystemen. Met het optionele dockingstation verander je de hotspot in een compacte vaste router met een bekabelde LAN-aansluiting. Op het gebied van beveiliging zijn onder meer WPA2- en WPA3-codering, firewallfuncties en vpn-ondersteuning aanwezig, terwijl software-updates automatisch via het netwerk worden uitgevoerd.

Centraal beheer en beveiliging

Alle nieuwe Predator- en Acer Connect Ovia-producten maken gebruik van dezelfde Acer Connect-app voor installatie en beheer. Via deze app kun je mesh-knooppunten configureren, verbonden apparaten beheren en gastnetwerken instellen via een smartphone. Daarnaast biedt Acer een uniforme set beveiligingsopties, waaronder WPA3-versleuteling, ouderlijk toezicht en firewall-instellingen.

Alle hierboven genoemde apparaten worden in juni in de Benelux verwacht. Exacte prijzen en definitieve specificaties volgen. Volgens Acer wordt aanvullende informatie over lokale beschikbaarheid en configuraties later via de regionale verkoopkanalen bekendgemaakt.

Bij ID.nl zijn we gek op producten waar je niet de hoofdprijs voor betaalt. Daarom speurt de redactie een aantal keer per week naar zulke deals. Na de kerstvakantie gaat iedereen weer naar school en werk en is het misschien wel tijd voor eenieuwe laptop. Wij vonden voor de start van 2026 vijf uiteenlopende laptops voor niet meer dan 600 euro.

Op zoek naar een nieuwe laptop, bijvoorbeeld voor school of studie? Er is ruime keuze, maar welke laptop moet je nu hebben zonder teveel geld uit te geven? Wij vonden een vijftal betaalbare laptops met uitstekende prestaties.

MSI Modern 15 F13MG-473NL 

Met zijn comfortabele 15,6‑inch scherm biedt de MSI Modern 15 een fijne werkruimte voor wie graag overzicht houdt. Perfect voor multitasken, tekstverwerken of genieten van een film zonder in te leveren op draagbaarheid. De Intel Core i3-processor is van de recente 13e generatie, waardoor deze laptop in tegenstelling tot oudere modellen helemaal bij de tijd is qua efficiëntie. Dit maakt het voor dagelijks gebruik en studie een heel aantrekkelijke laptop. Wat wel iets is om rekening mee te houden: het werkgeheugen is standaard 8 GB; dit kan bij veel open tabbladen of zwaardere programma's al snel aan de krappe kant zijn, maar gelukkig kun je het geheugen uitbreiden tot 16 GB.

Processor: Intel Core i3-1315U (13e generatie)
Werkgeheugen: 8 GB (uitbreidbaar)
Opslag: 512 GB SSD
Beeldscherm: 15,6 inch

HP  15‑fd0951nd

De HP 15‑fd0951nd combineert moderne prestaties met een strak ontwerp. Binnenin draait een Intel Core i5‑processor van de 13e generatie, aangevuld met 8 GB RAM en een snelle 512 GB SSD. Ideaal voor werken met documenten, browsen en videobellen in hoge kwaliteit. Het 15,6‑inch Full HD‑beeldscherm biedt voldoende scherpte en ruimte voor comfortabel gebruik, en extra’s zoals een webcam met privacy-schuifje, ruisonderdrukking en een vingerafdrukscanner maken deze laptop net iets slimmer dan de gemiddelde allrounder. Wil je meer werkgeheugen, dan kun je de interne geheugenmodule vervangen door een 16 GB SO-DIMM-module, er is één enkel slot aanwezig. De SSD-opslag is tot 1 TB uit te breiden.

Processor: Intel Core i5-1334U
Werkgeheugen: 8 GB (uitbreidbaar tot 16 GB)
Opslag: 512 GB SSD (uitbreidbaar tot 1 TB)
Beeldscherm: 15,6 inch

ASUS Vivobook Go 14 E1404FA

De ASUS Vivobook Go 14 is een handige, compacte laptop die opvallend makkelijk mee te nemen is. Met zijn lichte behuizing en 14‑inch scherm is hij gemaakt voor onderweg of flexibel thuiswerken. De prestaties zijn prima afgestemd op dagelijkse taken zoals tekstverwerking, internetten en streamen, en dankzij het efficiënte ontwerp werk je stil en zonder afleiding. De vormgeving is modern en praktisch, zonder overbodige franje – gewoon een betrouwbare laptop die doet wat je ervan verwacht. Geheugen uitbreiden is niet mogelijk, wel kun je de interne M.2-ssd vervangen door een exemplaar van maximaal 2 TB.

Processor: AMD Ryzen 5 7520U
Werkgeheugen: 8 GB (niet uitbreidbaar)
Opslag: 512 GB SSD (uitbreidbaar tot max 2 TB)
Beeldscherm: 14 inch

HP 15-fd0651nd

De HP 15-fd0651nd is een budgetvriendelijke, betrouwbare keuze voor dagelijks gebruik, zoals administratie, studie en het streamen van media. Het apparaat beschikt over een 15,6 inch Full HD-scherm, wat zorgt voor scherp beeld bij het werken of video's kijken. Dankzij het matte scherm heb je minder last van reflecties, en de helderheid van 300 nits is netjes voor deze prijsklasse. De laptop wordt aangedreven door een Intel Core i5-1334U processor uit de 13e generatie. Samen met 8 GB werkgeheugen en een 512 GB SSD biedt dit vlotte prestaties voor multitasken en snelle opstarttijden. Voor zware grafische taken of zware games is hij minder geschikt vanwege de geïntegreerde videokaart, maar voor huis-tuin-en-keukengebruik is hij krachtig genoeg. Een pluspunt is de focus op duurzaamheid: de behuizing bevat gerecycled plastic en de laptop is Energy Star-gecertificeerd. Ook handig zijn de ondersteuning voor snelladen (HP Fast Charge: 50% in ca. 45 min) en de aanwezigheid van een numeriek toetsenblok.

Processor: Intel Core i5-1334U
Werkgeheugen: 8 GB (niet uitbreidbaar)
Opslag: 512 GB PCIe NVMe M.2 SSD
Beeldscherm: 15,6 inch

Asus Vivobook 17

De Asus Vivobook 17 is een solide laptop voor thuisgebruik en alledaagse kantoortaken, met als meest opvallende eigenschap het grote 17,3 inch Full HD-scherm. Dankzij het IPS-paneel heb je goede kijkhoeken en kleurweergave, wat prettig is voor het kijken van films of werken in spreadsheets. Onder de motorkap zit een Intel Core i5-1235U processor van de 12e generatie. In combinatie met de 512 GB SSD zorgt dit ervoor dat de laptop vlot opstart en programma's snel reageren. Het werkgeheugen van 8 GB is voldoende voor standaard multitasking, maar kan voor zwaardere gebruikers wat krap aanvoelen (gelukkig is dit uitbreidbaar tot 16 GB).

Het design is afgewerkt in de kleur 'Quiet Blue' en beschikt over praktische functies zoals een fysiek schuifje voor de webcam (privacy), een scharnier dat 180 graden open kan, en een verlicht toetsenbord.

Processor: Intel Core i5-1235U
Werkgeheugen: 8 GB (uitbreidbaar tot 16 GB)
Opslag: 512 GB SSD
Beeldscherm: 17,3 inch