Prompt - Devtools - Editor

Das Pendant zum input-Befehl in Python ist der Prompt-Befehl in JS:

"use strict";
let userName = prompt("What's your name?");
alert("Hello " + userName + "!"); // alert opens an "hint-window"

Prompt fordert den Benutzer auf, eine Eingabe zu machen. Der eingegebene Wert wird mittels der Variable userName gespeichert.

Alert öffnet ein Hinweis-Fenster und gibt den Text aus, der innerhalb der Klammern von alert angegeben wird. Eine andere Möglichkeit der Ausgabe, die eher für Überwachungs- bzw. Kontrollzwecke verwendet wird, ist ein "Logging" auf der Konsole: 

"use strict";
let userName = prompt("What's your name?");
console.log("Hello " + userName + "!");


Öffnen der Developertools

Im Browser gibt es im Menü (...) den Punkt Weitere Tools , Entwicklungstools (je nachdem, ob man Firefox, Chrome, Edge oder Safari verwendet, lautet das Menü etwas anders). Diese Developertools kann man auch mittels der Tastenkombination Strg + Umschalt + I (Ctrl + Shift + I) aufrufen. Im Reiter (Tab) Konsole kann man nun JS-Befehle eingeben, z .B.:

let nr_1 = 5;
let nr_2 = 7;
let sum = nr_1 + nr_2;
console.log(sum);

Damit am Ende einer Eingabezeile nicht sofort der Befehl ausgeführt wird, muss man anstatt Enter Umschalt + Enter (Zeilenumbruch) verwenden und am Ende des Eingabeblocks ENTER, um die JS-Befehle auszuführen:

screenshot_console

Zum Löschen der Konsole in den Dev-Tools einfach den Befehl console.clear() eingeben!

Beispiel mit prompt

let color = prompt("What's your favorite colour?");
console.log("I see, " + color + " is your favorite colour!");

screenshot_prompt_ask_favorite_color

screenshot_console_ask_favorite_color

Verwenden eines Editors für HTML/JS

Mein persönlicher Favorit unter den Editoren ist Visual Studio Code (von Microsoft). Er hat äußerst gute Unterstützung für HTML, CSS, JS, ..., (Python, C, Java, PHP, Go, Rust, u.s.w.). Es gibt für alle möglichen Programmiersprachen Erweiterungen, die sich installieren lassen, damit die Unterstützung beim Kodieren (Coden) gegeben ist: Code (color) highlighting, Code completion, Warnings, Errors, ...

screenshot_vs_code

Beispiel mit prompt

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JS-Demo</title>
    </head>
    <body>        
        <script>
            let message = "Wie heißt Du?";
            let userName = prompt(message);
            alert("Hallo " + userName);
        </script>
    </body>
</html>

Beispiel mit document.write()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JS-Demo</title>
    </head>
    <body>        
        <script>
            let strAge = prompt("Wie alt bist Du?"); //prompt delivers a variable of typ string!
            document.write("You are " + strAge + " years old!");
        </script>
    </body>
</html>