FAQ - Frequently Asked Questions (JavaScript)

[Prophet]

Frequently Asked Questions (JavaScript)

In dieser FAQ will ich häufig gestellte Fragen zusammenfassen und möglichst präzise beantworten. Wer vorrschläge hat kann mir diese gerne per PN mitteilen. Andere FAQs: HTML, CSS, PHP, Sonstiges;

-> Passwortschutz mit JavaScript?
-> Element-Eigenschaften ändern?

 

[Prophet]

Passwortschutz mit JavaScript?

Passwortschutz mit JavaScript?

Man kann mit JavaScript einen Passwortschutz erstellen, jedoch muss ich im voraus sagen das dieser nicht sicher ist und in der Regel leicht zu knacken. Dazu gibt es mehrere Varianten.

Passwort und Namen vom User holen:

1. Eingabefenster
JS-Code:

var name = prompt("Bitte geben sie ihren Accountnamen ein:");
var passwort = prompt("Bitte geben sie ihr Passwort ein:");
/* PW und Name prüfen */

2. HTML Forumlar
HTML- & JS-Code:

<script type="text/javascript">
<!--
   function Pruefen()
   {
      var name = document.getElementById('name').value;
      var passwort = document.getElementById('passwort').value;
      /* PW und Name prüfen */
   }
//-->
</script>
<input type="text" name="name" id="name" />
<input type="password" name="passwort" id="passwort" />
<input type="button" name="login" id="login" OnClick="Pruefen();" />

Passwort und Namen überprüfen:
Die Prüf-Code an diesen Stellen: '/* PW und Name prüfen */' oben einsetzen.

1. if-Variante
JS-Code:

if(name == 'testname' && passwort == 'testpasswort')
{
   document.write('Zugriff gewährt');
}

Diese Variante hat den Nachteil das es nicht mehr als eine User geben kann, ausser man man weiter abfragen mit else if. Das Sicherheits manko ist hier das jeder die Abfrage im Quelltext nachlesen kann.

2. array-Variante
JS-Code:

var account = Array();
account['name1'] = 'passwort1';
account['name2'] = 'passwort2';
account['name3'] = 'passwort3';
account['name4'] = 'passwort4';
if(account[name] == passwort)
{
   document.write('Zugriff gewährt');
}

Diese Variante eignet sich schon mehr für eine Multi-User verwaltung ist jedoch immer noch sehr statisch und leicht einsehbar.

3. datei-Variante
JS-Code:

document.URL = "user_" + name + "_" + passwort + ".htm";

Diese Variante hat den nachteil das jeder User eine eigene Datei erhalten muss. Jedoch kann man sie nur schlecht ausspionieren.

 

[Prophet]

Element-Eigenschaften ändern?

Element-Eigenschaften ändern?

Man kann die Eigentschaften jedes HTML-Elements ganz einfach über JavaScript manipulieren und verändern. Dazu muss das zu verändernde Element nur eine Namen oder eine ID besitzten (name- und id-Attribut).

1. ID-Variante:
Beispiel:

<a href="#" onMouseOver="document.getElementById('id_des_elements').innerHTML = '<b> Fetter Text</b>'">Dünnen Text fett machen</a>

<span id="id_des_elements">Dünner Text</span>

Dabei haben wir einen "toten" Link welcher über den Event-Handler OnMouseOver den JavaScript-Code ausführt. Dabei greifen wir mit Document auf das aktuelle Dokument zu. Im Dokument wählen wir das Element mit der Id 'id_des_elements' aus und verändern die Eigenschaft innerHTML. Sobad man nun über den Link fährt wird der HTML-Code im Element verändert. Aber achtung IDs müssen eindeutig sein, also keine doppelt vergeben!

2. Name-Variante:
Beispiel:

<a href="#" onMouseOver="document.getElementByName('name_des_elements').innerHTML = '<b> Fetter Text</b>'">Dünnen Text fett machen</a>

<span name="name_des_elements">Dünner Text</span>

Nocheinmal das selbe Beispiel nur das wir dieses mal nicht auf die ID sondern auf den Namen zugreifen. Dabei ist vor allem zu beachten das Namen auch mehrfach vergeben werden können. Daher auch der Array-Index am ende des aufrufs. Wir greifen also in diesem Fall auf das erste Element zu (wobei die Zählung bei 0 beginnt) und verändern wieder dessen Eigenschaften.

3. Element-Variante:
Beispiel:

<a href="#" onMouseOver="document.getElementByTag('span').innerHTML = '<b> Fetter Text</b>'">Dünnen Text fett machen</a>

<span>Dünner Text</span>

Diese variante nutzt keinen Identifer es sucht einfach nach sämtlichen Elementen eines bestimmten Tags. Wobei diese wieder wie bei einem Array abgerufen werden können.



Über diese 3 simplen Varianten kann man ganz leicht die Eigenschaften anderer Elemente manipulieren. Dabei gibt es natürlich nicht nur innerHTML sondern auch innerText, width, style, src und noch viele mehr.

Hier findet ihr eine übersicht der Event-Handler unter selfHTML.

Ihr müsst natürlich nicht Event-Handler dafür verwenden. Man kann das ganze genauso in Funktionen einbauen...