Javascript

Welcher Film Zu Sehen?
 

Javascript ist eine Programmiersprache, mit der Websites zum Leben erweckt werden. Sie sehen es jedes Mal in Aktion, wenn Sie eine Website besuchen, auf der Interaktionen stattfinden. Das Erlernen von Javascript ist schnell, einfach und macht Spaß, da Sie bereits alle erforderlichen Tools auf Ihrem Computer haben und die Ergebnisse sofort sehen. Probieren Sie das einfache Schritt-für-Schritt-Beispiel unten aus und Sie werden auf dem Weg sein!

Software herunterladen:Keiner benötigt

Kosten:Kostenlos

Anweisungen zum Einrichten der Software:Keiner benötigt

Hardware-Anforderungen:PC, Mac, Roboter, Mobilgerät

Unterstützte Betriebssysteme:Win, Mac, Linux

Schwierigkeitsgrad:1 von 5


VERSUCH ES!

1. Erstellen Sie einen Ordner auf Ihrer Festplatte - nennen Sie ihn 'JS Demo'.

2. Kopieren Sie diesen Javascript-Code:

 // JavaScript Document // Note: lines that start with two backslashes are comments - not code!  var bePrepared = function () {        // = = = = = = = declare all the variables = = = = = = = =         var tempF, tempC, myActionText, newText;        //get the temp (F) from the HTML page        tempF = document.getElementById('MyInputTemp').value;         // = = = = = = = convert the temp to Celsius (with only one decimal place)        tempC = (5 / 9 * (tempF - 32)).toFixed(1);        // = = = = = = = evaluate the temp (three categories) = = = = = = =         if (tempF = 60) && (tempC = 75) {                 myActionText = ' Take Sunscreen!';             }        // = = = = = = = build a complete sentence = = = = = = =         newText = 'If the temperature is ' + tempF + ' °F (' + tempC + ' °C): ' + myActionText;       //push the sentence back to the HTML page (using the ID of the markup element: 'myAnswer')       document.getElementById('myAnswer').innerHTML = newText;     }; 

Und fügen Sie es in Ihren bevorzugten Texteditor ein. Windows Notepad funktioniert gut.

3. Speichern Sie die Datei als 'JS-Example.js' in dem neuen Ordner, den Sie in Schritt 1 erstellt haben.

4. Kopieren Sie nun diesen HTML-Code:

       Example Javascript Program for Boy Scout Merit Badge       	 	

Javascript Programming Example

Enter Temperature (°F):

Und fügen Sie es in Ihren bevorzugten Texteditor ein. Windows Notepad funktioniert gut.

5. Speichern Sie diesen HTML-Code im selben Ordner und nennen Sie ihn 'JS-HTML.htm'.

6. Doppelklicken Sie auf die JS-HTML-Datei, um einen Browser zu starten. Geben Sie eine Temperatur ein und klicken Sie auf die Schaltfläche GO, um das Ergebnis anzuzeigen. Probieren Sie verschiedene Temperaturen aus.


ÜBER DAS PROGRAMM - EIN WEG DURCH

1. Die HTML-Datei definiert den Text und die Formatierungsinformationen für eine einfache Webseite. Sie können alles ändern, um zu sehen, wie sich dies auf die Formatierung der Seite auswirkt. Dies ist keine wirkliche Programmierung, aber es macht Spaß, damit zu spielen. Es:

ein. Erstellt einen Titel für die Website
b. Weist den HTML-Code an, Javascript zu verwenden und wo der Code zu finden ist
c. Formatiert den angezeigten Text
d. Gibt ein Texteingabefeld mit der ID = 'MyInputTemp' an (Javascript benötigt dies).
e. Gibt eine Schaltfläche mit der Bezeichnung 'Los!' An.
f. Wenn die Maustaste gedrückt wird, wird die Javascript-Funktion bePrepared () ausgeführt
G. Zeigt die Zeichenfolge in 'myAnswer' an, die im Javascript-Programm erstellt wird.

2. Die Javascript-Datei hat eine einzige Funktion namens 'bePrepared ()'. Es wird jedes Mal ausgeführt, wenn auf die Schaltfläche GO geklickt wird (sehen Sie sich die Methode 'onclick' für das Tag 'input' = 'Button' in der HTML-Datei an, um den Funktionsaufruf anzuzeigen.)

3. Die Funktion „bePrepared ()“

ein. Ruft den im Tag 'Eingabe' - 'Text' eingegebenen Wert mithilfe der ID 'MyInputTemp' ab.
b. Der Wert wird in Celcius konvertiert (mit einer einzelnen Dezimalstelle).
c. Der Celsius-Wert wird mit einer Reihe von IF-Anweisungen ausgewertet, und der Variablen wird eine vorgeschlagene Aktionsphrase zugewiesen: 'myActionText'
d. Ein Satz wird erstellt, indem statischer Text zusammen mit den Temperaturwerten (Grad F und Grad C) und der Aktionsphrase kombiniert oder „verkettet“ wird.
e. Die neue Phrase wird in die letzte Zeile der HTML-Seite eingefügt, indem die ID des Tags in dieser Zeile verwendet wird: 'myAnswer'


VERSUCHE DIES

1. Ändern Sie die in den Entscheidungen verwendeten Temperaturen - ändern Sie beispielsweise die niedrigere Temperatur von 60 auf 30 Grad. Stellen Sie sicher, dass Sie es an zwei Stellen ändern! Speichern Sie die Datei, aktualisieren Sie den Browser (oder starten Sie die Webseite neu) und geben Sie neue Zahlen ein. Haben sich die Antworten bei der neuen Temperatur geändert?

2. Erstellen Sie einen neuen Temperaturbereich von 30 bis 60 Grad und lassen Sie ihn anzeigen - 'Hut und Handschuhe mitbringen!'

3. Ändern Sie den Wortlaut der Sätze.

4. Fügen Sie eine weitere Texteingabe hinzu - fragen Sie beispielsweise nach der Windgeschwindigkeit.

5. Fügen Sie einige bedingte Anweisungen hinzu, die den Windchill-Faktor bewerten.

6. Fügen Sie Text hinzu, um das Ergebnis der Windkälte anzuzeigen.


ERFAHREN SIE MEHR

W3schools.com - Ein gut organisiertes Tutorial mit vielen Arbeitsbeispielen und Quellcode

Webmonkey - Ein fünfteiliges Javascript-Tutorial


RESSOURCEN, TIPPS, TRICKS UND TIPPS

1. Google Chrome hat eine nette Funktion.

- Installieren Sie Google Chrome, falls Sie es noch nicht haben.

- Öffnen Sie das obige JS-HTML-Beispiel in Google Chrome (Klicken Sie mit der rechten Maustaste auf die oben erstellte JS-HTML-Datei, wählen Sie 'Öffnen mit ...' und wählen Sie 'Chrome').

- Klicken Sie auf Einstellungen >> Extras >> Javascript Console

Dies öffnet ein Konsolenfenster, in dem Fehlermeldungen (und eine Reihe anderer Tools) angezeigt werden, mit denen Sie Ihren Code debuggen können.

Diese Konsole ist sehr hilfreich beim Debuggen von Javascript-Fehlern. Die meisten Browser haben Plugins, die ähnliche Dinge tun.

2. Notepad ++ ist ein großartiger Freitext-Editor, der speziell für Programmierer entwickelt wurde. Schau es dir hier an .