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

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.

Illustration: Privatfoto

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".

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 :-)

Kommentarer (19)
sortSortér kommentarer
  • Ældste først
  • Nyeste først
  • Bedste først
Palle Raabjerg

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 :)

  • 0
  • 0
Palle Simonsen

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.

  • 0
  • 0
Lasse Hillerøe Petersen

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?

  • 0
  • 0
Peter Müller

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.

  • 0
  • 0
Palle Simonsen

@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.

  • 0
  • 0
Palle Simonsen

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.

  • 0
  • 0
Mona Holm

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...

  • 0
  • 0
Baldur Norddahl

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.

  • 0
  • 0
Log ind eller Opret konto for at kommentere