Einführung Javascript Programmierung

10/07/2011 01:21 Kalior#1
Einführung Javascript Programmierung

1. Was machen wir im TuT genau?
2 .Was ist JavaScript?
3 .Wie binde ich JavaScript in denn html Code ein?
4.Was ist beim Programmieren zu beachten?
5. Die if-Anweisung
6. Variablen Werte zuweisen und mit if-Anweisung abfragen
7.Operatoren
8.Schleifen
9.Zeichenketten
10.Arrays
11.Einfache Spiele Aktionen


1. In diesem TuT möchte ich euch die Programmierersprache Javascript näher bringen.
Wir werden am ende erste einfache Spiele Aktionen mithilfe von JavaScript Programmieren.


2. Javascript ist eine Client seitige Sprache das bedeutet das der Anwender das Programm abspielt dieses kann man Browser einsehen.
Hier noch einmal ausführlicher wer es nicht verstanden hat:


3. Javascript kann inmitten eurer HTML-Seite eingebaut werden.
Code:
<script type=“text/javascript“>


</Script>
Dies geschieht mit einem einfachen HTML Tag indem wir denn Script Typ festlegen und gewohnt das Script beenden können.
Kleiner Hinweis

4.Beim schreiben einer Javascriptanwendung müssen wir 4 Punkte beachten:


- N4m3n setzten sich aus Buchstaben und Zahlen zusammen und dürfen keine Sonderzeichen beinhalten, ausgenommen dem unterstrich
- Man darf keine Namen vergeben die schon für befehle vergeben werden
- Namen dürfen keine L e e r z e i c h e n enthalten
- Man muss Penibel auf klein/GROß Schreibung achten im Code

Wenn man diese Punkte beachtet dürfte bei unserem Projekt nichts schief gehen.


5.Wenn man eine „Fallunterscheidung“ durchführen möchte kann man die if-else-Anweisung dafür benutzen:

Code:
if	(Bedienung)
	{Anweisungsfolge}
else
	{Anweisungsfolge}
Die else Anweisung ist nicht zwingend, jedoch nur wenn man 100% sicher ist das man alle Möglichkeiten mit der If Anweisung abgedeckt hat.
man kann auch mehrere Anweisungen auswerten:
Code:
if	(Bedingung)
	{Anweisungsfolge}
else if	(Bedienung)
	{Anweisungsfolge}
else
	{Anweisungsfolge}
Ausführliche Erklärung


6.Variablen sind wie der Name schon sagt Variabel und dies in Wert und Name wir müssen hierbei nur auf die 4 Grundregeln achten aber das ist euch höchstwahrscheinlich auch selber klar.
Variablen bestimme ich mit dem „var“ Befehl folgender Massen
Code:
var Name = “Wert_von_Name“;
Ich denke das klar ist was ich hier gemacht habe.
Nun ein kleiner Code indem ich mit if-Anweisung und Variablen Arbeite


Code:
<html><head><title>Test</title>
<script type="text/javascript">
function Geheim () {
  var Passwort = "Epvp";
  var Eingabe = window.prompt("Bitte geben Sie das Passwort ein", "");
  if (Eingabe != Passwort) {
    alert("Falsches Passwort!");
  } else {
    location.href = "http://ww.google.de/";
  }
}
</script>
</head><body onload="Geheim()">
<h1>Bitte passwort eingeben</h1>
</body></html>
In diesem Code wird in der Funktion „Geheim“ die variable Passwort,mit dem Wert „Epvp“ abgefragt
mit dem Code:

Code:
if (Eingabe != Passwort)
Dieser besagt wenn die Variable Eingabe nicht,warum nicht wird in 7 besprochen, mit der Variabelen Passwort übereinstimmt

Code:
   
alert("Falsches Passwort!");
  } else {
    location.href = "http://ww.google.de/";
wird ein Alarm bzw eine Messagebox gesendet die Besagt „Falsches Passwort“
und die angewählte URL wird auf [Only registered and activated users can see links. Click Here To Register...] geändert.


7.Wie ihr eben schon gemerkt hat gibt es andere Operatoren als nur == Hier sind sie alle:

Operatoren

== gleich

!= nicht gleich

< größer als

> kleiner als

<= kleiner als oder gleich

>= größer als oder gleich

! nicht

|| oder

&& und

+ Addition

- Subtraktion

* Multiplikation

/ Division

++ Inkrement / zuwachs

-- Dekrement / niedergehend


Möchtest du zum Beispiel eine Messaggebox ausgeben wenn der wer größer oder gleich 4 ist schreibst du es folgendermaßen:
Code:
if (a  >=  4) {alert(“Richtig“);}
Operatoren wie „&&“ kann man gebrauchen wenn man in einer if-anweisung 2 Bedingungen setzten will ungefär so:

Code:
if (x == 5 && b <= 7)

nun habe ich 2 Bedingungen gestellt:
x ist gleich 5
und
b ist kleiner oder gleich 7


8.Schleifen dienen dazu das sich Anweisungen wiederholen.
Im Javascript haben wir die Möglichkeit von for- und while- schleifen.
Die for- schleife oder auch Zählschleife diese ist folgendermaßen aufgebaut:
Code:
for (Startwert; Bedingung ; Änderung)
	{Anweisungsfolge}
Die for Schleife sieht denn Beispielsweise so aus

Code:
<script type= “text/javascript“>
for (i=1;i<=5;i++)
{document.write (“i hat den Wert“ + i + “<br>“);}
</script>
Die while-schleife ist ohne Startwert und Änderung

Code:
while (Bedingung)
	{Anweisungsfolge}
so sieht die while schleife dann im gebrauch aus:
Code:
<table border = “1“>
<script type= “text/javascript“>
var i = 0;
var x = 0;
while (i<10)
{x=x+i; document.write (“<tr><td>“+ i +“</td<td>“+ x +“</td></tr>“);i++;}
</script>
</table>

9.Zeichenketten sind wie man hört aneinander gereihte Namen diese sind relativ einfach zu schreiben

+ Verkettung von Zeichenketten

+= Zeichenkette erweitern

So wird eine Zeichenkette gebildet
Code:
<script type= “text/javascript>
x = vorname “Ole“; nachname = “Richter“;
x = vorname +  “ “ + nachname;
x += “, das ist mein vollername“
document.write (x) ;
</script>
10.Arrays kann man mit zahlen und Normalen bilden.
Als erstes die Version Zahlen:
Code:
<script type= “text/javascript“>
a = new Array ();
a[0] = ´x´;
a[1] = ´c´;
a[2] = ´b´;
a[3] = ´a´;
document.write(“Array:<br>);
for (i=0;i<a.length;i++)
{document.write(“a(“ +  i +  “) hat denn wert:“+a[i] +“<br>“);}
</script>
Diese ist besser um php Dateien zu sortieren
Die Version die ich nun zeige kann mit ganzen Namen versehen werden was ich persönlich einfach besser Managen kann
Code:
<script type=  “text/javascript“>
a = new objekt () ;
a[“Name“] =  `Richter`;
a[“Vorname“] =  `Ole`;
a[“Ort“] =  `Hamburg`;

document.write(“Array:<br>“);
for (var x in a)
{document.write(“a(“ + x + “) hat den Wert: “
a [x] + “<br>“);}
</script>
11.Einfache Spiele Aktionen hier werde ich zeigen wie man eine Grafik über dem Hintergrund bewegen kann, was in fast jedem Spiel erforderlich ist.
Code:
<html>
<head>
<title> Grafik auf Hintergrund bewegen </title>
<script language=“javascript1.2“
type= “text/javascript“>

//Anfangsposition festlegen
var xpos=10;
var ypos=10;

document.onekeydown = TasteGedruekt;
function TasteGedrueckt (Ereignis) 
{
if (!Ereignis)
	Ereignis = window.event;
if (Ereigniss.wich)	{
	nr = Ereignis.wich;
} else if (Ereignis.keyCode) {
	nr = Ereignis.keyCode;
}
if (nr==65) xpos -=5;
if (nr==68) xpos +=5;
if (nr==87) ypos -=5;
if (nr==83) ypos +=5;

document.getElementById(“Grafik“) .style.left
=xpos;
document.getElementById(“Grafik“) .style.top
=ypos;

</script>
</head>
<body bgcolor=´#2222ff´ background=´hintergrund.jpg´>
<font color=´#ff0000´ size´4´><br>
<br>Steuerung mit w,a,s,d <br></font>

<div id=´Grafik´ style=´position:absolute;
z-index:1;left:10;top:10;visibility:visible;´>
<img border=´0´ src=´Grafik.jpg´> 
</div>
</body>
</html>
so oder ähnlich kann man eine Grafik über einen Hintergrund bewegen.

Falls etwas unverständlich ist bitte in denn Kommentaren Eintragen werde es innerhalb einiger tage versuchen besser zu beschreiben.

Für Rechtschreibfehler möchte ich mich entschuldigen.

Ps: Falls Interesse vorhanden ist kann ich ein kompletten Spiele Code erklären hierzu bitte ebenfalls ein Kommentar dalassen

Mit freundlichen Grüßen Kalior
10/07/2011 06:48 alg0r!thm#2
Ist echt gut geworden.
Respekt!


So far,
Daniiel'
10/07/2011 08:11 sava#3
Quote:
3. Javascript kann inmitten eurer HTML-Seite eingebaut werden (im body teil).
Kann auch im Head Teil stehen. Haste doch selber gemacht...
10/07/2011 08:42 Kalior#4
Ah mist war da wohl gedanklich beim Code denn ich derzeit mach habs verbessert Thx
Hinzugefügt was die unterschiedlichen Positionierung bringen