Dette indlæg er alene udtryk for skribentens egen holdning.

Lær Python med interaktiv programudførelse - ELEGANT!!!

Af Peter Toft14. august 2013 kl. 21:4719
Artiklen er ældre end 30 dage

Jeg holder meget af hjemmesider, der giver en introduktion med et givet programmeringssprog.
De fleste hjemmesider jeg har anvendt består af flad HTML evt. krydret med statiske billeder. For et par uger siden faldt jeg over http://pythontutor.com/ - en Python-intro side, der sætter overlæggeren solidt opad.

Det første man mødes med at et relativt enkelt Python program, man kan single-steppe igennem og mens man trykker "Forward" udføres koden til højre i billedet. Meget velfungerende.
Tryk på billedet for at få det i bedre opløsning.

Den særlige elegance for denne Python-hjemmeside kommer nu. På http://pythontutor.com/visualize.html kan man selv skrive et Python program ind og single-steppe koden - fremad og tilbage. Wauv!

Jeg har valgt den kode, fordi der i Python er forskel på håndteringen af lig-med operatoren for simple typer såsom et heltal og f.eks. lister.
Det ses, at når jeg trykker "Last >>" eller single-stepper frem med "Forward" vil "x" og "y" ende på forskellige steder i hukommelsen, mens "a" og "b" er pointere til samme sted. Retter man elementer i "a" rammer det også "b".

Artiklen fortsætter efter annoncen

Sejt - nu kan vi køre Python-kode fra en vilkårlig browser.

For lige at sætte prikken over i-et kan nævnes, at man på samme hjemmeside kan generere en URL netop til ens egen kode. I mit tilfælde er det denne URL og man kan endda selv vælge Python-version...

Jeg er vildt imponeret over dette - flot udført!

Kender I lignende for andre programmeringssprog?

/pto

P.S. Tak til Palle Raabjerg som fandt over denne hjemmeside :-)

19 kommentarer.  Hop til debatten
Denne artikel er gratis...

...men det er dyrt at lave god journalistik. Derfor beder vi dig overveje at tegne abonnement på Version2.

Digitaliseringen buldrer derudaf, og it-folkene tegner fremtidens Danmark. Derfor er det vigtigere end nogensinde med et kvalificeret bud på, hvordan it bedst kan være med til at udvikle det danske samfund og erhvervsliv.

Og der har aldrig været mere akut brug for en kritisk vagthund, der råber op, når der tages forkerte it-beslutninger.

Den rolle har Version2 indtaget siden 2006 - og det bliver vi ved med.

Debatten
Log ind eller opret en bruger for at deltage i debatten.
settingsDebatindstillinger
19
19. august 2013 kl. 21:41

Gode gamle Eloquent Javascript bruger Code Mirror, en nem online editor. Bogen (gratis html udgave) er godt skrevet, og man kan sagtens lære ret meget om programmering fra scratch ved denslags (@Palle).

16
16. august 2013 kl. 22:17

Over i Scala lejren har de lavet Scala Worksheet: https://github.com/scala-ide/scala-worksheet/wiki/Getting-Started

Det er en integreret REPL i din editor (findes til Eclipse og IntelliJ). Du skriver kode og det bliver straks udført. Da det er en fil kan du gå tilbage og rette, hvorefter det hele bliver kørt forfra.

Alle objekter og klasser fra dit program er tilgængelig. Det er derfor meget praktisk til at hurtigt lige at prøve nogle ting af imod dit program.

Det er mest et begynderværktøj men kan også bruges af mere erfarende. Og når man har fået noget til at fungere, så kan man jo hurtigt omdanne koden til unit tests.

Det er indrømmet ikke helt ligeså blæret som PythonTutor. Blæreeffekt er ikke alt, så jeg tror at værktøjer som Worksheet er en stor hjælp til begyndere der er lidt længere. Tutor virker mest som noget der er godt til helt grønne begyndere og måske til at visualisere algoritmer.

14
16. august 2013 kl. 16:09

Den er er virkelig også ret sej, både til python, node og ruby: c9.io

13
16. august 2013 kl. 15:29

For dælen da, den side ville jeg godt have kendt i vinters da jeg tog 1. semesters datalogi/programmering på MIT/edX online, med python som programmeringsredskab. Øv øv øv - for os der ikke er benhårde programmører er den slags visualisering guld værd når man nu for 117. gang ikke kan regne ud hvorfor ens robotstøvsuger-simulation vender den forkerte vej hver gang den rammer en væg. Selvfølgelig kan man også følge de variable i Visual studio el lign, men ikke så let og tilgængeligt som det ser ud til man kan her...

12
16. august 2013 kl. 14:08

Til daglig bruger jeg TFS til source control, men når jeg arbejder med nogen der bruger Git har jeg altid været en kegle til at finde ud af hvad jeg skal gøre. Det her "spil" var ret godt til at visualisere hvordan Git-branching fungerer:

Learn Git Branching

... men jeg er stadig en kegle til det! :-)

6
15. august 2013 kl. 09:25

Jeg tænker ofte på, hvorfor pokker der ikke er mere af den slags, ikke bare som tutorials men som generelle værktøjer. Når jeg tænker tilbage til da jeg startede med at bruge Mac i 1989 - med THINK Pascal, HyperCard og SuperCard (og ja - før det var der LISP maskiner og SmallTalk) så fornemmer jeg egentlig ikke der har været meget udvikling i programudvikling. (Jo, jeg ved godt der findes Eclipse etc...)

Jeg kunne virkelig godt tænke mig et webudviklingsmiljø der som minimum understøttede JavaScript, men også gerne andre sprog, og som var lige så dynamisk og interaktivt/grafisk som SuperCard. Findes der overhovedet noget der ligner?

9
15. august 2013 kl. 18:40

@Lasse Der er såvidt jeg ved ikke noget miljø, der emulerer hverken Hypercard eller Supercard. Et professionelt webudviklingsmiljø som Dreamweaver giver dog en rimelig WYSIWYG.

For Interaktiv Javascript, CSS etc. debugging / småkodning kommer man ganske langt med 'F12' i Chrome eller den tilsvarende facilitet i FF.

11
16. august 2013 kl. 11:28

Re. Hybercard:

Tog fejl mht. Hypercard emulator. Der er åbenbart en MacOS-8 emulator for windows - Basilisk II - der kan køre Hybercard.

Her er en hurtig gennemgang http://www.loper-os.org/?p=568 inklusive en interessant betragtning hvorfor Hypercard ikke passer ind i det ny Apple.

Re. Online læring: Utvivlsomt god, hvis man i forvejen kan programmerer i et eller andet 'fornuftigt' sprog. Jeg tvivler på, at man kan lære sig 'real programming' fra scratch ad den vej.

7
15. august 2013 kl. 11:48

Jeg kunne virkelig godt tænke mig et webudviklingsmiljø der som minimum understøttede JavaScript, men også gerne andre sprog, og som var lige så dynamisk og interaktivt/grafisk som SuperCard. Findes der overhovedet noget der ligner?

Nu har jeg ikke kendskab til SuperCard, og det er et lidt for overloadet søgeord til at jeg kan finde noget relevant materiale om det. Men der er et antal initiativer til at kunne lave javascript mere interaktivt.

LightTable forsøger at lave et IDE som forstår kontekst meget bedre, giver live previews osv.

Emmet LiveStyle giver dig tovejs interaktion mellem browser dev tools og sublime text.

JSBin er en legeplads til at teste små web snippets, ligeledes med live interaktion.

Bret Victor har lavet nogle yderst interessante demoer i Inventing on pronciple, hvor nogle af idéerne blandt andet kan ses i LightTable.

5
15. august 2013 kl. 08:58

Xerox' Interlisp-d IDE (som reelt var hele OS'et) gav mulighed for visuel inspektion af strukturer m.m. i et kørende program samt at skrive koden om fra debuggeren, køre runtime stack et passende antal steps tilbage og prøve igen.

Det blev ikke brugt til læring per se, men det var ganske effektivt at kunne 'what if'e' (af og til wtf'e ) i et kørende program - forfine / rette fejl og med det samme visuelt eller på anden vis se resultatet. Editoren understøttede selvfølgelig Interlisp's syntax med syntaks markering og forhindring af de værste dummerter.

Når det er sagt så er det en ganske god ide der her er implementeret i Python oa sprog på en for alle lettere tilgængelig vis.

2
14. august 2013 kl. 22:49

Hvis man kigger i nederste højre hjørne på http://www.pythontutor.com/ , så findes der faktisk et par links til andre, lignende tutors til Java, Ruby og Javascript, som alle er baseret på Python Tutor.

Lidt bonus-info: Grunden til at jeg selv faldt over det, var at jeg skulle bruge noget til et introduktionskursus i programmering. Jeg arbejder tilfældigvis også med at udvikle et nyt præsentations-framework gearet til dataloger (som en slags erstatning til LaTeX-Beamer). Det tog mig ikke mere end en dag at integrere Python Tutor, og de andre tutors kan sikkert også føres ind relativt nemt, engang efter jeg har kørt det live på kurset. Koden publicerer jeg nok om et par måneder, efter kurset. Og så kan det jo være man kan crashe Open Source Days med det næste år, når det er blevet endnu vildere :)

3
15. august 2013 kl. 08:33

Ha - den er sjov på en 80'er måde :) Jeg tror ikke moderne "unger" vil fatte joken i det - men cool