Javascript: Responsive Navigation Bar

Gestern war ich länger am Lesen und Üben, doch irgendwie sah ich die Zeit nicht, endlich mal eine Navigationsleiste zu erstellen, die sich auf alle Seitenverhältnisse anpassen kann. Ich hatte ja schon mal eine Responsive-Navigation von w3schools
eingebaut, doch irgendwie war da der Wurm drin, das Menü funktionierte nur dann, wenn man das Fenster zusammenzog, ansonsten blieb die Seite leer. Damals war ich echt am Verzweifeln, weil ich nicht verstand, welcher Befehl auf meiner Seite mit dem Responsive-Menü in Konflikt kam. Man muss extremst aufpassen, dass sich gewisse Befehle nicht beißen^^ teufel_smiley
Naja, gestern hab ich bei Null wieder angefangen und die Navbar funktioniert, is ja auch kein Wunder, ich musste lediglich copy+past anwenden 😀 …was mich extremst ärgert, da ich mein altes, simples Button-Menü immer noch lieber mag, als diese Responsive Navigationsleiste. Es war mein eigens erstelltes Menü! Doch was will man machen, diese verdammten Smartphones machen das komplette Design kaputt, es ist unmöglich ein schönes und gleichzeitig einfaches Design zu erstellen, ohne auf Javascript zurückgreifen zu müssen. Mir persönlich wäre es lieber mit einfachen Mitteln zu arbeiten, denn je weniger zusätzliche Funktionen eingebaut werden umso besser ist es und umso schneller lädt auch die Seite. Na, ich werde im Herbst nicht ohne Grund diesen Fachlehrgang besuchen, weil ich genau das lernen möchte…wie man trotz Responsive-Kacke eine schöne, einfache Seite erstellen kann -.-

Hier mal der Link zur gestern eingefügten Responsive Navigation:
Responsive Inns_Web

Ich hab das Menü etwas umgebaut und versucht es meinem einfachen Button-Menü anzupassen. Links sind noch keine gesetzt worden, weil ja ohnehin alles noch ein Test ist.
Es ist natürlich nur eine Testseite, deswegen sieht sie auch dementsprechend aus… auch die Farben, sowie der Banner oder das Logo dienen nur zu Testzwecken. Es geht im Moment mal nur darum, die Seite mit Responsive Menü funktionsfähig zu machen. Nebenbei muss ich noch checken, wie ich die Abstände der aufgeklappten Menüleisten – im minimierten Fenster – minimieren kann. Hier fehlt nämlich ein zusätzlicher CSS-Befehl, den ich noch herausfinden muss, denn ansonsten verstellt sich die Navbar in der Normalansicht -.-
Ich muss ja auch noch ein weiteres Menü einfügen und ich bin mir sicher, dass es da dann wieder Probs geben wird…AHHHHHHHHHHHHH!übel_smiley

 

… das zusätzliche menü funktioniert!!! ätsch_smiley Allerdings hab ich nun das Problem, dass ich es über Lima-City nicht hochladen kann, irgendwie gibt es da ein Problem mit der Javascript-Datei grins_smiley staun_smileymies_smiley
Problem gelöst, ich hab einfach über Lima-City die Js-Datei direkt ins HTML eingefügt…finde ich zwar blöde, aber nun läuft es grins_smiley. Zumindest in der Normalansicht teufel_smiley, denn wenn man das Fenster verkleinert, öffnet sich dann nur das Menü in der Mitte…es ist zum Kotzen! kotz_smiley grün_smiley

Die Menü´s beißen sich und ich hab noch nicht die nötige Erfahrung um zu wissen, wie man so ein Problem löst. …DOCH ICH FINDE ES NOCH HERAUS -.- mies_smiley

 

Javascript Zusammenfassung

Ich fasse für mich zusammen, weil ich auf diese Weise leichter bzw. schneller lerne. Außerdem muss ich zuerst mal verstehen, WARUM gewisse Befehle angegeben werden müssen und welche Funktion sie haben, weil ansonsten verstehe ich nur Bahnhof. hm_smileyWobei ich natürlich einiges schon kenne, aber trotzdem aufschreiben möchte.
Es wird eine Weile dauern, doch ich werde versuchen diese Zusammenfassung nach und nach zu erweitern.

Einstieg in Javascript

Javascript Anweisungen müssen zunächst in den HTML-Code eingebunden werden. Das Script kann entweder im Header- oder im Bodybereich eingefügt werden. Wird das Script bspw. im Header eingebunden, so wird es bevor sich die Website öffnet ausgeführt.
Das Script ist mittels eines -Tags anzugeben und all das was sich in diesen Container befindet scriptist ein Script. Damit verständlich wird, um welche Scriptsprache es sich handelt, kann man dies über den Parameter „language“ angeben, wodurch der Befehl lautet:

language javascript

Der Script-Typ wird mittels“type“ angegeben.

Beispiel:

type javascript

Wird zum Beispiel eine separate Scriptdatei verwendet, so muss man das ebenfalls im Code angeben und zwar durch das Attribut „src„, das auf den Pfad zur separaten Datei hinweist:
<script language=“javascript“ type=“text/javascript“ src=“meineFunktion.js“>

Elementare Grundstrukturen von Javascript

Variablen
Arrays
Datentypen
Operatoren
Ausdrücke
Anweisungen
Kommentare

Weiterlesen

Javascript Tutorial – Schleifen und Funktionen

Ich bin mittlerweile bei Teil 4 angekommen und stoße bereits auf erste Schwierigkeiten.
Ich verstehe zwar was hier gemacht wird und warum der Browser die Befehle so und nicht anders ausführt, doch es fehlt mir an Erklärungen. Um mir Befehle merken zu können, muss ich wissen, warum beispielsweise ein + oder eine bzw. zwei geschwungene Klammern verwendet werden. Ich muss mir merken, dass ++ den Variablenwert um 1 erhöht,  dass != ungleich und ! eine Negation bedeutet. Es gibt Einiges, was man sich hier einprägen muss und daher werde ich mir Teil 3 und 4 noch mehrmals anschauen bange_smileyund viel üben müssengrins_smiley.
Doch es macht Spaß, zu sehen, wie viel man bereits mit so wenigen Befehlen machen kann.

Naja, heute habe ich gelernt, wie man eine Endlosschleife und eine Schleife mit mehreren Anläufen ausführt. Wie ich meinem Browser befehle, dass er den Code 5 mal ausführen- und dann beenden  soll.

fünfmal Schleife

2 mal schleife usw…

Um dies zu bewerkstelligen, wird dieser Code in einer .js Datei abgespeichert:

js schleifencode

So, bis hier hin bin ich gekommen grins_smiley
Werde das aber nun mit verschiedenen Beispielen durchprobieren, ansonsten merke ich mir die Befehle nicht^^

Javascript: Hallo Welt!

Heute habe ich mein erstes Javascript in meinem HTML-Code eingefügt.
Es handelt sich dabei um eine einfache Funktion, bei der sich beim Laden der Seite, eine Meldung öffnet, in der „Hallo Welt!“ steht.

javascript_hallo_welt

HTML:

html javascript

Dadurch, dass es sich um ein einfaches Text-Script handelt, sollte der Befehl korrekterweise so lauten:

textscript

Wenn das Script separat abgespeichert wird, dann lautet der Befehl im HTML-Code so, insofern die js-Datei im selben Ordner liegt wie die html-Datei:

separater js code

und in der .js Datei wird nur die Funktion eingegeben:

js textscript

CSS:

css javascript

Als Texteditor verwende ich immer Notepad++ , da ich damit die Dateien nebeneinander legen und gleichzeitig anschauen kann. Ein einfaches aber sehr cooles Programm verliebt_smiley

Und hier das JavaScript Tutorial von listenwhatisayoh aus YouTube, welches ich mir in der nächsten Zeit zum Lernen ansehen werde:

Javascript

In den nächsten Tagen möchte ich mit der Scriptsprache „Javascript“ beginnen, da ich mich bis zum Herbst mit HTML, CSS, PHP und eben Javascript einigermaßen gut auskennen möchte, um für den Lehrgang – den ich besuchen werde – gut vorbereitet zu sein.
Ich hatte ja schon mit unserer Testwebsite begonnen und bin dabei auf ein paar Schwierigkeiten gestoßen. Zum Beispiel die Anpassung auf unterschiedliche Bildschirmgrößen, war für mich eine große Herausforderung.  Ich konnte – in dem Fall – das Menü nicht auf alle Seitengrößen anpassen, wodurch ich die Testseite auf Eis legte.
Nun jedoch möchte ich mich in Javascript versuchen, weil jene Scriptsprache im Webdesign auch eine wichtige Rolle spielt. Sie ist für das Verhalten sowie die Interaktivität der Webseite verantwortlich und deswegen auch recht interessant, was die Gestaltung des Menüs betrifft.
Ich werde demnächst meine ersten Versuche posten, insofern sie hinhauen. Mal gucken grins_smiley

The Elder Scrolls V: Skyrim

 

59e5d9e55bafe3d58b59917b

The Elder Scrolls V: Skyrim ist ein Rollenspiel, welches von Bethesda Game Studios entwickelt wurde.
Es handelt sich hierbei um den fünften Teil der Rollenspielreihe The Elder Scrolls, der sich in der Provinz Skyrim (Himmelsrand), im nördlichen Land des fiktiven Kontinents Tamriel abspielt, deswegen auch der Titel „Skyrim“.
In diesem Teil des bekannten Rollenspiels, geht es um eine Weissagung, die die Rückkehr der Drachen prophezeit.

Der Spieler begibt sich in ein raues, winterliches Land, welches von Wäldern und Bergen dominiert wird. Dabei trifft er auf zahlreiche Geschöpfe, wie Trolle, Baumwesen oder auch Banditen, die er mit Pfeil und Bogen, Schwert oder Magie bekämpfen muss.
Nebenbei muss der Protagonist herausfinden, wie es zur Rückkehr der Drachen kam, denn eigentlich sollten diese Fabelwesen gar nicht existieren.

 

Mortal Kombat Komplete Edition – Arcade Leiter mit Skarlet

mk9_skarlet_by_25credo-d8yyjq7

Mit Skarlet spiele ich sehr gerne, weil sie ein echt cooler Charakter ist und da mir mit ihr das Kämpfen etwas leichter fällt.
Hier ein paar Einblicke schüchtern_smiley

250px-Skarlet_renderfinal

Mortal Kombat Komplete Edition

mortal-kombat

Mortal Kombat ist aus meiner Sicht eines der coolsten Fighting-Games, weil es neben hammerharten Arcade-Fights, auch den Turm der Herausforderungen, einen Story Modus, einen Mehrspielermodi, sowie die Crypta bietet. Zudem hat der Spieler eine riesen Auswahl an unterschiedlichen Charaktern, die er nach Lust und Laune wechseln kann.
Ein sehr blutiges und umfangreiches Game, das richtig Spaß macht, insofern man die Uncut-Version besitzt grins_smiley

Aggro-Time

 

 

Hidden Folks

hiddenfolks1

Mit „Hidden Folks“ erwirbt man ein Rätselspiel der besonderen Art. Das interaktive Wimmelbild-Game bezaubert nämlich mit handgezeichneten Hintergründen des französischen Animationskünstlers Sylvain Tegroeg. Gamedesigner Adriaan de Jongh war dabei für die Animation zuständig, die dem Spiel Leben einhaucht und mit Sicherheit bei jedem Spieler ein Schmunzeln hervorruft.
Hidden Folks stellt vier verschiedene Welten zur Verfügung, die in 14 Level unterteilt sind. Dabei handelt es sich um die Welten Wald, Ödland, Stadt und Fabrik. Natürlich muss man die jeweiligen Welten freischalten, indem man verschiedene Objekte, Personen und seltsame Geschöpfe mittels Maus und relativ gutem Sehvermögen ausfindig macht. Es geht dabei nicht nur darum offensichtliche Objekte zu finden, der Spieler muss nämlich die kunstvoll gestaltete Spielwelt manipulieren, indem er sich beispielsweise durch das Klicken auf Baumkronen einen Einblick hinter das Blattwerk verschafft. Diverse Löcher im Boden oder in Baumstämmen, verstecken nebenbei Reptilien, Insekten oder auch Müll, den die süßen Bewohner von Hidden Folks hinterlassen. Auch die Bewohner sind oftmals gut versteckt, sie befinden sich hinter geschlossenen Türen, unter Heuballen, in Plumpsklos, in geschlossenen Zelten oder manchmal fallen sie auch aus Bäumen, wobei jeder Klick auf das jeweilige Objekt lustige Geräusche ertönen lässt.

Hidden Folks fasziniert mit seiner Einzigartigkeit! Ein spaßiger Zeitvertreib, der sich allemal lohnt schüchtern_smiley verliebt_smiley

The Room Two

tr2

 

The Room Two ist die Fortsetzung des spannenden Rätselspiels The Room.
Es präsentiert sich in einer sehr schönen 3D-Grafik, die mittels unterschiedlicher Mausbewegungen und Klicks erkundet werden kann. Dabei eröffnen sich dem Spieler spannende Rätsel, die durch das Lösen der jeweiligen Denkaufgabe zum nächsten Raum führen, denn der Spieler muss einen Weg nach Draußen finden.
Von der Spielart her, kann man The Room Two ein wenig mit dem wunderschönen Erkundungs-Puzzleabenteuer Leaves vergleichen.
Auch in diesem Spiel benutzt der Spieler eine Lupe, mittels der er versteckte Symbole aufdecken kann. Hinweise erhält er durch nicht offenkundige Briefe eines Geistes, die nebenbei die Handlung, bzw. die Hintergrundgeschichte näher bringen.

Ich habe es vor Kurzem begonnen, hier ein kleiner Einblick zu meinen Anfängen: