skip to content

Zurück  zum Start

Tutorial 1: Los gehts (mit JavaScript, HTML und CSS)

Unsere Programmiersprache ist JavaScript. Der Vorteil von JavaScript besteht darin, dass man damit Programme für das Internet - also zum Beispiel für eine Website - schreiben kann. Dabei muss man ganz einfach in eine HTML-Datei den entsprechenden JavaScript-Block hineinschreiben.

 

Was ist eine HTML-Datei?

Internetseiten sind HTML-Dateien. Nimm einmal einen Texteditor (z.B. Notepad) und schreibe dort folgendes hinein:

 

<!-- Du kannst es natürlich einfach auch hier raus kopieren -->
<html>
<head>
</head>
<body>
<h1>Hallo Welt!</h1>
</body>
</html>
<!-- Ende  -->

 

Das speicherst du nun ab als meinedatei.htm ab. Nachdem du das gemacht hast, öffnest du die Datei mit deinem Browser - z.B. Google Chrome.

 

Gratulation: Du hast eine Internetseite gemacht. Aber wahrscheinlich wusstest du das ohnehin schon.

 

HTML dient uns hier vorerst nur dazu, eine Struktur zu bekommen, in die wir nun später unsere Javascript-Programme hineinschreiben. HTML ist sehr einfach und selbsterklärend; für unsere Zweckse brauchen wir hier einmal nicht mehr zu wissen.

 

CSS ist ein zusätzlicher Teil von Internetseiten. Dieser bestimmt, wie die Seiten aussehen. Unser schlichtes Hallo Welt könnte damit farbig, unterstrichen oder blinkend verschönert werden. Hier gehts also nur um die Optik. Beim Programmieren betrifft uns CSS vorerst überhaupt nicht. Man muss nur wissen, dass es das gibt.. und dass wir später eine Zeile CSS beim Implementieren des CANVAS benötigen.

 

 

Mit der Tastenkombination [Strg]+ [Umschalt]+j kommt man in den meisten Browsern (z.B. Google Chrome) in eine Darstellung, die du noch wahrscheinlich noch nicht kennt. Hier hast du Zugriff auf die CONSOLE. Darin werden alle Fehlermeldungenund die Seitenstruktur angezeigt. Da kannst auch direkt dort mit JavaScript herumprogrammieren. Versuche es mal und schreibe dort hinein 3+4 und drücke dann [ENTER]. Als Ergebnis sollte nun 7 stehen.

 

Firefox: Tastenkombination [Strg] + [Umschalt] + K

 

 

Rechte Maustaste: sicher weißt du, dass durch Drücken der rechten Maustaste über einem Seitenabschnitt, der gesamte Seitenquellcode - also die HTML-Codes und JavaScript - angezeigt wird. So kannst du dort einfach Code rauskopieren und in dein Notepad oder Webeditor einfügen.

 

Link zur nächsten Lektion: Hallo Welt - mit Javascript

K