Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Programmiergrundlagen

SAE Institute
by

Sebastian Eicker

on 19 August 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Programmiergrundlagen

Bedingung
var
x = 0;

while

(
x < 3
)
{
x++;
// Anweisung wird 3 mal
// wiederholt
}
Bedingung
?
PROGRAMMIERGRUNDLAGEN
Was ist Informationsverarbeitung?
Einfaches Konzept im Web
Verarbeitung von Daten mit dem Ziel Informationen über diese Daten zu erlangen oder weiter zu verarbeiten.
Meist ausgelöst durch die Interaktion eines Users.
Eingabe, Verarbeitung, Ausgabe
Eingabe
Verarbeitung
Ausgabe
Klick auf einen Link
Abrufen der Daten
Im Browser anzeigen
Allgemeines
Die Programmiersprache
Werden erteilt
Befehle
Syntax
Keywords
Quelltext
Schreibweise & Grammatik
Vokabeln
Lesbare Maschienensprache
Übersicht der Sprachen
Assemblersprachen
Hochsprachen
Skriptsprachen
Assemblersprachen
sind spezielle Programmiersprachen, welche die Maschinensprache einer spezifischen Prozessorarchitektur in einer für den Menschen lesbareren Form repräsentieren.
10110000 01100001
mov

al
,
61h
Maschienensprache
Assemblerspreache (Intel)
Hochsprachen
(bzw. "Höhere Programmiersprachen") sind komplexe, aber für den Menschen besser lesbare Programmiersprachen. Dienen der Entwicklung von Computerprogrammen.
BASIC, C, C++, Java, etc.
Beispiele

.START ST
ST:
MOV

R1
,#
2

MOV

R2
,#
1
M1:
CMP

R2
,#
20

BGT

M2

MUL

R1
,
R2

INI

R2

JMP

M1
M2:
JSR
PRINT
.END
Assemblersprache
Hochsprache
A
:=
2
;
FOR

I
:=
1

TO

20

LOOP
A
:=
A
*
I
;
END LOOP
;
PRINT
(
A
);
Skriptsprachen
sind meist für spezielle, kleine Einsatzzwecke (z.B. Webseiten) gedacht. Syntax ähnelt stark den Hochsprachen, ist aber weniger komplex.
Beispiele
JavaScript, ActionScript, PHP, Perl, etc.
Compiliert
Interpretiert
Geschichte
Ein bisschen
Mitte des 19. Jahrhunderts
Über
Lochkarten
programmierbar
Der Webstuhl
Dienen lange bis in die Moderne für verschiedenste Einsatzzwecke
1942 bis 1946: Konrad Zuse entwickelt auf Basis von Lambada Kalkül die Sprache "Plankalkül" und entsprechende Hardware.
Problem: Keine Möglichkeit auf bestimmte Bedingungen zu reagieren
1930er & 1940er Jahre
Sprache „Lambda Kalkül“ von Alonzo Church und Stephen Kleene
Mächtige Programmiersprache ohne Hardware
Erste moderne Sprachen
FOTRAN
LISP
COBOL
1950er Jahre
Erster Compiler
Grace Hopper
1960er & 1970er Jahre
Gründung einflussreicher Unternehmen wie Apple & Microsoft
Ken Thompson und Dennis Ritchie entwickeln C
1990er Jahre bis heute
Das Internetzeitalter
HTML
CSS
JAVA
PHP
JavaScript
Uvm.
C
Diverse „Dialekte“
C++, C#, C Sharp, Objective-C
#include <stdio.h>
#inculde <stdlib.h>

int
main
(
void
)
{
printf
(
"
Halo Welt!
\n
"
)
;
return

EXIT_SUCCESS
;
}

/* end main) */
Beeinflusste PHP, Java, JavaScript u.w.
Systemprogrammierung von Unix
Abkürzung & Dateiendung:
js
Javascript
<
script
type
="
text/javascript
"
>
document
.
write
(
'
<b>Hallo Wordl</b>
'
)
;
</
script
>
Die verbreiteste Sprache der Welt!
Ressourcen des Clients = Geschwindigkeit
Clientseitige Ausführung
Abkürzung und Dateiendung:
php
Populärste Sprache zur Datenverarbeitung und Datenbankkommunikation
Ressourcen des Server = Geschwindigkeit
Serverseitige Ausführung
Hypertext Preprocessor
echo
'
Hello World
';
Grundbestandteile
von Programmiersprachen
VARIABLEN
var
name = wert
Schlüsselwort
Bezeichner
Zuweisung
Wertzuweisung
// Erstellen der Variablen
var
alter =
28

// Person altert 1 Jahr
var
alter = alter +
1
Die Wertzuweisung erfolgt von rechts nach links
Beispiel
Sollte eine
Variable
mit einer Zahl oder einem anderen Sonderzeichen beginnen wird dies einen Fehler verursachen.
var
bezeichner = wert;
var
_bezeichner = wert;
var
$bezeichner = wert;
Variablen
dürfen nur mit einem Buchstaben, einem Unterstrich oder einem Dollar-zeichen beginnen.
var
bezeichner13 = wert;
var
bezeichner_13 = wert;
var
bezeichner 13 = wert;
var
bezeichner"13" = wert;
Nur
alphanumerische Bezeichner
sind erlaubt:
var
meinNameIst = wert;
Üblich sind der sog.
Camel Case Style
Feste Laufweite zur Ordnung nutzen
// Unübersichtlich
var
auto = wert;
var
lkw = wert;
var
pitstop = wert;

// Besser
var
auto = wert;
var
lkw = wert;
var
pitstop = wert;
Eine
Variable
kann sowohl nur
deklariert
als auch direkt
definiert
werden. Eine Deklaration besteht ausschließlich aus der Angabe des Bezeichners.
//
Deklaration
var
bezeichner;

//
Deklaration
&
Definition
var
bezeichner = wert;
DATENTYPEN
Welchen
Datentyp
enthält eine
Variable
?
Primitive Datentypen
String
Zeichenkette in doppelten oder einfachen Anführungszeichen:
'wert'
/
“wert“
.
Integer
Ganzzahlen (positiv & negativ):
-1
/
23
.
Float
Kommazahlen (werden mit einem Punkt getrennt ) :
3.14
Boolean
Wahrheitswert (zwei Zustände):
true
/
false
Komplizierte Datentypen
Object
Objekte mit verschiedenen Charakteristiken und Eigenschaften
Array
Datenliste, kann alle anderen Datentypen und sich selber beinhalten
var
liste
= [];
liste
[
'vorname'
]
= 'Markus';
liste
[
'nachname'
]
= 'Müller';
liste
[
'alter'
]
=
34
;

// Zugriff auf vorname
liste
[
'vorname'
]
;

// Zugriff auf alter
liste
[
'alter'
]
;
var
liste
=
[
'E1', 'E2', 'E3'
]
;

// Zugriff auf E1
liste
[
0
]
;

// Zugriff auf E2
liste
[
1
]
;
Inidziertes Array
Das
indizierte Array
führt seine Elemente unter einem
Index
Assoziatives Array
Das
assoziative Array
führt seine Elemente unter einem
Key
OPERATOREN
Arithmetische Operatoren
Plus
+
Additions-operator
var
ergebnis =
15

+

4

+

1
;
Verknüpfungs-operator
var
vorname = 'Markus';
var
nachname = 'Müller';

var
vollerName = vorname
+
' '
+
nachname;
Minus
-
Subtraktions-operator
var
ergebnis =
15

-

4

+

1
;
Mal
*
Multiplikations-operator
var
ergebnis =
4

+

2
*
15
;
Geteilt
/
Divisions-operator
var
ergebnis =
10
/
2
;
var
zahl = 10;
var
rest = zahl % 2;
Rest
%
Modulo-operator
=
Wertzuweisung


==
Vergleich
===
Exakter

Vergleich

!
Negation
!=
Ungleich
!==
Exaktes

Ungleich

<
Kleiner als
>
Größer als
<=
Kleiner gleich
>=
Größer gleich
Vergleichsoperatoren
var
zahlA = '
12
';
var
zahlB =
12
;

zahlA == ZahlB
zahlA === ZahlB


ZahlA != ZahlB
ZahlA !== ZahlB

ZahlA < ZahlB
ZahlA > ZahlB
ZahlA <= ZahlB
ZahlA >= ZahlB
Logische Operatoren
Und Operator
&&
var
zahlA =
9
;
var
zahlB =
12
;
zahlA ==
9

&&
ZahlB ==
1
Gesamtbedingung nur
true
wenn beide Teilbedingen
true
sind
Oder Operator
||
var
zahlA =
9
;
var
zahlB =
12
;
zahlA ==
9

||
ZahlB ==
1
Gesamtbedingung
true
wenn eine der Teilbedingen
true
ist
1995
1995
1994
1995
1989
KONTROLL
STRUKTUREN
if
if
(
name == '
Peter
'
)
{
// es ist Peter!
}
else
{
// es ist NICHT Peter!
}
/else
if
(
name == '
Peter
'
)
{
// es ist Peter!
}
else if
(
name == '
Markus
'
)
{
// es ist Markus!
}
else
{
// keiner von beiden!
}
switch

(
name
)
{
case
'
Peter
':
// es ist Peter
break
;

case
'
Markus
':
// es ist Markus
break
;

default:
// Keiner von beiden
break
;
}
switch/case Anweisung
Überprüft die Fälle (
case
s)
Sollte kein
case
zutreffen wird
default
abgearbeitet (default ist optional)
Ablauf läuft solange bis ein
break
kommt
wert wird mit
case
s verglichen
Komfortabel für einfachen Vergleich
Simpler Vergleich wie
if

(
name == '
Peter
'
)
if
(
name == '
Peter
'
)
{
// es ist Peter!
}
else if
(
name == '
Markus
'
)
{
// es ist Markus!
}
else if
(
name == '
Herbert
'
)
{
// es ist Herbert!
}
else
{
// keiner von beiden!
}
switch

(
name
)
{
case
'
Peter
':
// es ist Peter
break
;

case
'
Markus
':
// es ist Markus
break
;

case
'
Herbert
':
// es ist Herbert
break
;

default:
// Keiner von beiden
break
;
}
if/else oder switch/case???
SCHLEIFEN
Schleifen
können mit dem Schlüsselwort
break
abgebrochen werden
Sie wiederholen sich solange wie eine bestimmte Bedingung zutrifft
Schleifen
wiederholen einen bestimmten

Ablauf
Man kann einen
Schleifendurchgang
überspringen, indem man das Schlüsselwort
continue
einfügt
// Beliebiger Code
wird von oben nach unten ausgeführt
var
lorem = '
ipsum
';
var
dummi = '
leer
';
document.write
(
lorem + ' ' + ipsum
)
;
zahl_A +
round
(
zahlA

* i
)
;
var
liste =
new

Array
()
;
// Beliebiger Code
wird erst ausgeführt wenn die Schleife beendet wurde
var
lorem = '
ipsum
';
var
dummi = '
leer
';
document.write
(
lorem + ' ' + ipsum
)
;
zahl_A +
round
(
zahlA

* i
)
;
var
liste =
new

Array
()
;
// Schleife
wiederholt sich so lange bis die Bedingung nicht mehr erfüllt ist
for(var i = 0; i > 0; i++)
{
doAgainAndAgain('something');
}
Ablauf einer Schleife
for Schleife
Kopfgesteuerte Zählerschleife
for

(
var
i =
0
; i <
5
; i++
)
{
// Anweisung wird 5 mal // wiederholt
}
Zählervariable
Inkrementierung
while Schleife
Kopfgesteuerte Schleife
Zählervariable
Inkrementierung
ACHTUNG
Keine Endlosschleifen produzieren!
var
zahl;

do
{
zahl =
wuerfeln
()
;
}
while

(
zahl != 6
)
do while Schleife
Fußgesteuerte Schleife
Wird mindestens ein mal ausgeführt
FUNKTIONEN
KOMMENTARE
// Aufruf einer Funktion
alert
()
;
Grundlegendes
Sammlung von Anweisungen
Sprachen liefern vorgefertigte
Funktionen
für verschiedene Aufgaben
Wiederverwendbar
Es können auch eigene
Funktionen
erstellt werden
// Definition einer Funktion
function

do_something
()
{
//Anweisungen
}
// Add Funktion
function

add
(
zahlA
,
zahlB
)
{
zahlA
+
zahlB
;
}

// Aufruf der Funktion
add
(
16
,
8
)
Parameter
Funktionen
können mit
Werten
von außen arbeiten
Sogenannte
Parameter
bzw.
Argumente
// Multiply Funktion
function

multiply
(
zahlA
,
zahlB

=

2
)
{
zahlA
*
zahlB
;
}
Optionale Parameter
Eine
Funktion
kann neben den
Pflichtparametern
auch
optionale Parameter
enthalten, die einen
Standardwert
hinterlegt haben.

Optionale Parameter
immer nach hinten!
// Add Funktion
function

add
(
zahlA
,
zahlB
)
{
return
zahlA
+
zahlB
;
}

// Ergebnis von add speichern
var
ergebnis

=
add
(
10
,
20
)
Rückgabewerte
Eine
Funktion
kann eine Antwort geben

Über das Schlüsselword
return

Der Rückgabewert einer
Funktion
kann direkt in einer Variablen gespeichert werden
// Divide Funktion
function

divide
(
zahlA
,
zahlB
)
{
if
(
ZahlB
==
0
)
{
return
false
;
}

return
zahlA
/
zahlB
;
}

// Ergebnis: false
divide
(
7
,
0
)
;

// Ergebnis:

15
divide
(
30
,
2
)
;
Funkionen abbrechen
return
bedeutet automatisch auch, dass die
Funktion
anschließend abgebrochen wird.
/*
Mehrzeiliger
Kommentar
*/
// Einzeiliger Kommentar
Code innerhalb der
{
...
}
wird nur ausführen wenn die
if-Bedingung
zutrifft
=
var
name = '
Markus
';
// Aufruf: Ergibt 20
multiply
(
10
);
// Aufruf: Ergibt 40
multiply
(
10
,
4
);
// Ergebnis weiter verarbeiten
var
ergebnis

=
add
(ergebnis,
5
)
JAVASCRIPT
hat NIX mit Java zu tun!
Wo kommt Javascript her?
Entwickelt von
Brandan Eich
unter dem Namen
LiveScript
Diese Kooperation mündet in
Javascript 1.0
mit dem Ziel die Interaktion von
LiveScript
direkt in
Java
Applets zur Verfügung zu stellen
Ende des Jahres
1995
war
Javascript
bereits in der Lage noch vor dem Absenden eines Formulares, die
Nutzereingaben auf Fehler zu überprüfen
.
Seitdem ist
Javascript
eine Marke des Unternehmens
Sun Microsystems
welches heutzutage zu
Oracle
gehört
Ende des Jahres
1995
kommt eine Kooperation zwischen
Sun Microsystems
(Java Entwickler) und
Netscape
zustande
Erste Veröffentlichung
1995
mit dem
Netscape Navigator 2.0
Wie gings weiter?
Anfang
1996
erschien die erste Beta Version des
Navigator 3.0
mit
Javascript 1.1
1996
und
97
versucht
Microsoft
mit dem
IE 3
/
4
die Funktionalitäten

von
Javascript
abzudecken
1997
wird der erste
ECMA Skript Standard
entwickelt und
Javascript
diesem angepasst
JS 1.1
konnte nun auf Bilder zugreifen und beispielsweise
Rollover Effekte
erzeugen
Eine DOM ähnliche Syntax kommt auf. Diese erlaubt es
auf alle Elemente einer Website zuzugreifen
und diese zu
manipulieren
Es werden Erweiterungen entwickelt, die zu Kompatibilitätsunterschieden zwischen
Netscape
und
IE
führen
1998 bis heute
Ende
1998
stellt
Netscape

Javascript 1.4
vor welches nun komplett mit dem
ECMA Skript Standard
einhergeht.
2005
:
Javascript 1.6

(nun auch im
Safari 3.0
)
2000
:
Javascript 1.5
(
Firefox

1.0
,
IE 5.5
,
Opera 6.0
)
Es erscheint jedoch kein Browser der diese
JS
Version implementiert
2006
:
Javascript 1.7
(
Chrome 1.0
)
2007
:
Javascript 1.8
Weitere Fakten
Javascript
existiert um
Websites dynamisch zu verändern
ohne das Dokument dafür neu zu laden
Javascript
ist eine
Skriptsprache
Javascript
kann dirket im HTML Dokument untergebracht werden
Sowohl im
<head>
als auch im
<body>
Sollte aber im Optimalfall
extern ausgelagert
werden
Es steht im HTML Quelltext innerhalb des
<script>
Tags
Javascript
ist eine
interpretierte Sprache
, wir sehen Fehler also erst zur
Laufzeit
Javascript
funktioniert in jedem Browser (sofern es nicht abgeschaltet wurde)
Javascript
wird (meist)
clientseitig
ausgeführt (im Gegensatz zu z.B.
PHP
)
Für
Javascript
gibt es
zahlreiche

Frameworks
die die Entwicklung nicht nur beschleunigen, sondern auch komfortabler und performanter gestalten (z.B.
jQuery
).
Sicherheit und die Sandbox
Javascript
wird im Browser innerhalb einer sog.
Sandbox
ausgeführt
Dadurch hat
Javascript
im allgemeinen
nur Zugriff auf die Objekte des Browsers.
Also
nicht auf das Dateisystem
etc.
Zum Zugriff auf
Startseite
,
History
,
Zwischenablage
etc. benötigt
Javascript
die explizite Erlaubnis des Benutzers
Jede Website wird
isoliert
behandelt.
Das bedeutet, dass eine bösartige Website
keine Daten von einer anderen geöffneten Website
(z.B. Online-banking)
beziehen
kann.

Der Datenaustausch wird unterbunden
Was kann Javascript?
dynamisch den
Quelltext eines HTML Dokuments verändern
. Es kann also beispielsweise ein Tag entfernen und ein neues einfügen
auf Events reagieren
: Beipielsweise auf das Klicken eines Buttons
HTML Elemente
lesen
und
schreiben
Daten
validieren
Informationen über den Benutzer auslesen
: Zum Beipsiel welcher Browser

verwendet wird
mit
Cookies
arbeiten
mit der
Adresszeile
und dem
Seitentitel
arbeiten
Javascript

kann
Wo schreiben wir Javascript?
Wir können
Javascript
mit dem
<script>
Tag sowohl im
<head>
als auch im
<body>
eines
HTML Dokuments
einbetten
Außerdem kann
Javascript
in einer externen Datei mit der Dateiendung
.js
ausgelagert werden.
<html>
<head>

<script

type
="
text/javascript
"
>

// code goes here

</script>


</head>
<body>

<script

type
="
text/javascript
"
>

// code goes here

</script>

</body>
</html>
Sog. „
Best Practice
“ ist es
Javascript
in eine externe Dateien auszulagern und erst am Ende der Seite, vor dem schließenden
</body>
Tag, ein- zubinden
<html>
<head>
<script

type
="
text/javascript
"
src
="
script.js
"
></script>

</head>
<body>

<script

type
="
text/javascript
"
src
="
script.js
"
></script>

</body>
</html>
JS in externe Datei auslagern
In der externen
script.js
wird das
<script>
Tag nicht erneut benötigt. Es kann direkt gecodet werden.
ECMA Skript Standard
Javascript
basiert auf dem
ECMA Skript Standard
Ecma International
ist eine private, internationale
Normungsorganisation
zur Normung von Informations- und Kommunikationssystemen
Der
ECMA Skript Standard
bestimmt die
Syntax
der darauf basierten Programmiersprachen (z.B.
JavaScript
&
Actionscript
).
http://www.ecma-international.org/publications/standards/Ecma-262.htm
Javascript Events
Click
Loading
Mouseover / out
Selection (z.B. Input Feld)
Form Submit
Und viele weitere
Beispielevents
Events
werden in Verbindung mit Funktionen eingesetzt.

Wobei die zugehörige
Funktion
erst nach Eintreten des jeweiligen
Events
ausgeführt wird.
// Beim Klicken auf diesen Anchor wird eine alert Nachricht erscheinen
<a

href
="
#
"
onclick
="
alert
(
'
Hello World
'
)
;"
>
Click me!
</a>

// Beim Mouseover wird eine Nachricht in der Konsole angezeigt werden
<a

href
="
#
"
onmouseover
="
console
.
log
(
'
mouseover
'
)
"
>
Click me!
</a>
Dialogfelder
Javascript
kennt drei Typen von
Dialogfeldern
(Popups), die für verschiedene Zwecke genutzt werden können / wurden:
alert
(
'
My script loaded
'
)
;
Einfache Box mit einem OK Button
confirm
(
'
Aur you sure you want to delete the Internet?
'
)
;
OK und Abbrechen
prompt
(
'
Please enter your name
'
)
;
Eingabefeld
Das Document Object Model
Wird ein
HTML Dokument
in einen Browser geladen so wird es automatisch zu einem
Document Object
welches ein
Modell
aller beninhalteter Elemente zur Verfügung stellt.

Dieses Modell nennt man
Document Object Model
oder kurz
DOM
<html>
<head>
<title>
DOM
</title>
</head>
<body>
<h1>
Headline
</h1>
<a
href
="
#
"
>
Link
</a>
</body>
</html>
Document
html
head
title
body
h1
a
var
mein_name_ist = wert;
Oder der sog.
Underscore Style
Full transcript