Unsere ersten Übungen mit JavaScript

27. Februar 2015 - 23:57 - CAG

Bevor wir an unserem Roboter weiter arbeiten, schieben wir noch ein paar Programmierübungen ein. Da unser Roboter über eine Web-Oberfläche gesteuert werden soll, müssen wir uns mit html, JavaScript und PHP auseinander setzen.

Wir haben uns in mehrere Gruppen aufgeteilt. Nicht jeden interessiert jede Programmiersprache. Einige von uns arbeiten mit JavaScript und html, andere mit C/C++ und die dritte Gruppe arbeitet an PHP.

Um uns mit JavaScript und seinen Eigenheiten vertraut zu machen, haben wir uns ein paar kleine Beispiele ausgedacht.

Das erste war ein kleines Formular welches Benutzername und Passwort abfragt. Hier haben wir gelernt, dass es kaum möglich ist sichere Login-Bereiche mit reinem JavaScript zu schreiben. In diesem Beispiel konnten wir unsere HTML-Kentnise weiter ausbauen und uns mit Funktionen, Variablen und if else Entscheidungen in JavaScript vertraut machen.

<form name="login_form">
<p>Name<br><input name="name" type="text" size="50" placeholder="Bitte Benutzername eintragen." /></p>
<p>Passwort<br><input name="kennwort" type="password" size="50" /></p>
<p><input name="senden" type="button" value="senden" onClick="button()"/></p>
</form>
<script type="text/javascript">
function button(){var Benutzername=document.forms.login_form.elements.name.value;
var Kennwort=document.forms.login_form.elements.kennwort.value;
var pw = "1234";
var bn = "minecraft";

if (pw == Kennwort && bn == Benutzername){
alert("Hallo " + Benutzername + "Dein Passwort ist richtig!!!");

}
else{
alert("Hallo dein Passwort oder Benutzername ist falsch!!!");
}

}
</script>

Hier der Code in Aktion

Name

Passwort

Die zweite Übung war ein kleiner Passwortgenerator. Dieser gibt, beim drücken des Button, ein 8 stelliges zufälliges Passwort aus. Es beinhaltet Sonderzeichen, Zahlen, Großbuchstaben und Kleinbuchstaben.

<div style="width:50%; margin:2em auto; text-align:center;">
<form name="pw_generator">
<input type="button" name="button" value="Passwort erstellen" onclick="erstellen()" />
<div id="info" style="margin-top:1em; font-size:1.5em; letter-spacing:0.5em;" ></div>
</form>
</div>

<script type="text/javascript">

function erstellen(){

var password = new Array();
var final_pw = "";

var Zufallszahl;
var min = 33;
var max = 126;

for(i=0; i<8; i++){
Zufall = Math.random();
Zufallszahl = min + parseInt (Zufall * ((max+1)-min));

password[i] = String.fromCharCode(Zufallszahl);
var final_pw = final_pw + password[i];
}
document.getElementById("info").innerHTML = final_pw;
}
</script>

Hier der Code in Aktion

So konnten wir das Wissen über Funktionen weiter vertiefen, Variablen und Arrays nutzen, sowie mit einer FOR-Schleife Zufallszahlen erstellen. Ein weiteres HighLight war das Umformen von Zahlen in richtige Buchstaben und Zeichen.

»