Javascript Anfänger braucht Hilfe

DarkEmperor

Hallo,
wie manche evtl. schon gelesen haben bin ich mit 1-3Anderen an einem etwas größeren Projekt, das ist erstmal alles so ok. php, mysql, html, css, Grafikdesign alles ok
mein einziges Problem ist nur dass wir das ganze mal etwas Userfreundlicher gestalten wollen, in Hinsicht Seiten-Reloads. Es nervt schon immer neu laden zu müssen um zu sehen ob wer geschrieben hat!
...
Ich weiß auch schon so ungefähr im Kopf wie sowas gehen könnte, aber wie ich es umsetzen soll ... kein Plan!^^
Meine Idee um das auch allgemein anwenden zu können ist, ein php/mysql Script durch ein JavaScript regelmäßig auszuführen, also z.b. aller 5Sekunden oder bei onchange, ...
Und das zweite Problem ist das wir evtl. wenn es halbwegs "einfach" umzusetzen ist ein Drag'n'Drop einzufügen!

So jetzt zu den Praxis nahen Beispielen^^

Zitat

Es gibt persönliche Nachrichten und Ne Schaltfläche über die man zu der Liste kommt, so und um immer gleich zu sehen ob es etwas neues gibt soll daneben dann halt 0, 1, 5, 12, ... je nachdem wie viele neue PNs da sind kommen, aber nicht nur beim Seiten-Reload sondern z.b. im 5Sekunden Takt aktualisiert.
Meine Idee:

php/mysql-Script welches schaut ob es ungelesene PNs gibt und dieses Script über ein JS aller 5Sekunden ausführen und dann am Ende immer die neue Anzahl eintragen, oder eine Grafik einblenden, sollte ja vom Script kein wirklichen Unterschied machen!?

Zitat

Dann das nächste bei Formularen ein sofortiger Vergleich ob das so ok ist. z.B. ob das wirklich eine E-Mail Adresse ist oder ob der Name nicht schon vergeben ist, ...

Selber Lösungsansatz meiner Mainung nach, über php/mysql das ganze Vergleichen und über JS immer bei onchange ausführen lassen!?

Zitat

So und jetzt das Letzte wo ich absolut kein Plan habe, ein Drag'n'Drop System. Der User soll z.B. Items "nehmen" können mit dem Mauszeiger und diese dann auf den Charakter ziehen der es verwenden soll.

Hier wirklich nur eine Lösung wenn sie relativ einfach umzusetzen ist, ansonsten mach ich es über jQuerys und blende dann Buttons bei onclick ein! Wäre halt nur schöner wenn es so ginge!

Ich danke schon einmal im Vorraus!
Und eh sowas kommt wie google, ich habe mir schon JSs angeschaut und wenn ich es alleine verwende und nur sowas wie "Hallo Welt!" ist alles ok und jQuerys habe ich auch begriffen aber sobald ich es mit php Scripts irgendwie kombinieren will oder so ... funktioniert nix mehr!^^

Wäre also echt toll wenn es wer schafft mir das doch mal zu erklären wie ich das auch mit html, mysql, php, ... verknüpfen kann!^^ Weil ich wollte das ganze nicht nur in JS schreiben!

Mit freundlichen Grüßen
Tom

Dodo

1) Benutze aussagekräftige Thread-Titel. "Javascript Anfänger braucht Hilfe" kann man sich denken, wenn jemand postet. Das sagt nichts über dein Problem aus.

2) Das Nachladen der Nachrichten:
Dafür benötigst du AJAX. Hier hast du ein gutes Tutorial: http://www.admin-wissen.de/tutorials/eige…/ajax-tutorial/

3) Der Mail-Adresse-Check:
Siehe SelfHTML Aktuell: http://aktuell.de.selfhtml.org/artikel/progra…email/index.htm
Ich würde dir zu einer Kombination aus JavaScript und PHP raten.
JavaScript ist benutzerfreundlicher. PHP ist sicherer.

4) Drag & Drop:
Viel Spaß^^ Mit deinen JavaScript-Kenntnissen könne eine Lösung (auf Standards bsierend) ziemlich unmöglich sein.
jQuery hat aber (glaub ich), eine Drag-'n'-Drop Bibliothek - hab mich mit jQuery noch nie beschäftigt.

SinnlosS

JQuery hat ein Drag-and-Drop-Widget, das ist ziemlich unproblematisch.

Von der Nachrichtenaktualisierung würde ich abraten, wieviel soll denn da geschrieben werden, dass alle 5 Sekunden auf neue Nachrichten gecheckt wird? Ein PN-System ist kein Chat, wenn überhaupt eine regelmäßige Aktualisierung per JS dann maximal 1x pro Minute. Ich halte das aber an dieser Stelle für vollkommen unnötig. Resourcen-Verschwendung durch ständige HTTP-Requests die vermutlich in weit über 90% der Fälle unnötig sind.

Validitätschecks für Formulare mittels JavaScript sind prima, da damit unnötige Requests gespart werden können. Es darf aber selbstverständlich lediglich eine Ergänzung zu der Validierung der Eingaben mittels PHP sein. Serverseitige Überprüfung ist immer Pflicht.

Wenn du Probleme mit dem Zusammenspiel von HTML, CSS, JS auf der einen Seite, und PHP, MySQL auf der anderen Seite, dann hast du vermutlich den Ablauf eines HTTP-Requests noch nicht ganz verstanden, bzw. noch nicht wirklich verinnerlicht.
HTML/CSS/JS und PHP/MySQL haben im direkten Sinne nichts miteinander zu tun. Deswegen sollte der Code für beide Parteien auch strikt voneinander getrennt sein.
Am HTML/CSS/JS-Code verändert sich exakt Null wenn man server-seitig noch mit PHP und MySQL arbeitet. Für den Besucher einer Seite macht es absolut keinen Unterschied, ob der Code der auf einen Request an seinen Browser zurückgeschickt wird statisch ist oder dynamisch vom Server generiert wurde.

Für konkretere Tipps/Hilfen müsstest du erstmal auch konkrete eigene Lösungsversuche zeigen.
Nur zu beschreiben was du machen willst und dann ganz allgemein "Aber das Zusammenspiel zwischen client- und serverseitigen abläufen verstehe ich nicht ganz" bietet leider keine besonders guten Ansatzpunkte für weitere/konkretere Hilfe.

Pion

Wenn dann

http://en.wikipedia.org/wiki/Comet_%28programming%29

Mööp

DarkEmperor

HTML

<script>
function checkEmail(email) {
  var proto  = "(mailto:)?";
  var usr    = "([a-zA-Z0-9][a-zA-Z0-9_.-]*|\"([^\\\\\x80-\xff\015\012\']|\\\\[^\x80-\xff])+\")";
  var domain = "([a-zA-Z0-9][a-zA-Z0-9._-]*\\.)*[a-zA-Z0-9][a-zA-Z0-9._-]*\\.[a-zA-Z]{2,5}";
  var regex  = "^" + proto + "?" + usr + "\@" + domain + "$";


  var rgx    = new RegExp(regex);
  return rgx.exec(email) ? true : false;
}</script>


<form action="input_email.php">
  <p>Name: <input name="name" type="text" size="30"></p>
  <p>E-Mail: <input name="email" type="text" size="30" onchange="checkEmail(email)">
<script>
if(rgx.exec(email)==true) {
  echo "E-Mail ist gültig!"
}
</script>
</p>
</form>

Alles anzeigen

Ist das dann die Lösung für den E-Mail check!?^^
Antwort ... Nein ... weil wird wenn ich meine E-Mail eintrage nicht angezeigt das die gültig ist!
Wo liegt der Fehler!?

...

So, wegen Drag'n'Drop, ich nutze dann mal die slidedown und hide und fades von jQuery für die Buttons!^^
Ist mir doch etwas einfacher, das kann ich wenigstens!!!

Jetzt zu den NAchrichten, es soll ein browsergame werden und das läd man halt nicht immer neu. Das mit den 5Sekunden war ein Bsp. weil meiner Meinung ist das dann ja eh nur eine Zahl wo man dann 5 durch 60 oder so im Script ersetzen kann!^^
Es ging allgemein darum wie ich regelmäßig eine mysql abfrage durchführen kann!

...

So alle Fragen bis hier geklärt!?^^

MfG und DANKE

Pion

Wo hast den du das Herr, echo ?

Dodo

Lieber DarkEmperor,
wenn ich deinen Code sehe, möchte ich dir doch stark ans Herz legen die Grundlagen von JavaScript zu lernen.
Stichwort: Event-Handler

http://de.selfhtml.org/javascript/index.htm

DarkEmperor

So ich verzweifel hier gleich ...
ich probiere hin und her und rum und num ... aber es will einfach nicht gehen!!!
...
Das ist der aktuelle überarbeitete Script:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>E-Mail Test</title>
<meta name="author" content="User">
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">


<form action="input_email.php">
  Name: <input name="name" type="text" size="30"></br>
  E-Mail: <input name="email" type="text" size="30" onkeydown="checkEmail(this.form.email.value)">
<input name="status" type="text" size="30" value="E-Mail ist ungültig!">


<script text="JavaScript">
function checkEmail(email) {
  var proto  = "(mailto:)?";
  var usr    = "([a-zA-Z0-9][a-zA-Z0-9_.-]*|\"([^\\\\\x80-\xff\015\012\']|\\\\[^\x80-\xff])+\")";
  var domain = "([a-zA-Z0-9][a-zA-Z0-9._-]*\\.)*[a-zA-Z0-9][a-zA-Z0-9._-]*\\.[a-zA-Z]{2,5}";
  var regex  = "^" + proto + "?" + usr + "\@" + domain + "$";


  var rgx    = new RegExp(regex);
  return rgx.exec(email) ? true : false;


if(rgx.exec(email)=="true") {
  document.this.form.status.value = "E-Mail ist gültig!";
}
else {
  document.this.form.status.value = "E-Mail ist ungültig!";
}
}
</script>


</form>
</body>
</html>

Alles anzeigen

Wo liegt der Fehler, ich habe schon mit getElementById probiert und so ... es will einfach nicht!

MfG

Tobse

Zitat

document.this.form.status.value = "E-Mail ist gültig!";

document.this ?!? Das kann beim besten willen nicht klappen. Hast du Dodo´s Rat befolgt? Eher nicht.
Den inhalt von DOM-Elementen in JS ändert man über .innerHTML bzw. .firstChild.data.

EDIT:
OT:

Zitat

der aktuelle überarbeitete Script

ein Skrpt ist ein Neutrum, sprich das Skript.

DarkEmperor

Zitat

Hast du Dodo´s Rat befolgt? Eher nicht.

Doch habe ich, sonst hätte ich das ganze document. und so garnicht!^^

Zitat

ein Skrpt ist ein Neutrum, sprich das Skript.

Es tut mir herzlich leid, dass auch meine Rechtschreibung manchmal Fehler hat!
Im Satz halt umgedacht und nicht alles noch einmal gelsen und korrigiert.

Zitat

Den inhalt von DOM-Elementen in JS ändert man über .innerHTML bzw. .firstChild.data.

Danke für den Tip, ich werde mich gleich mal daran setzen und weiter versuchen!^^

MfG

DarkEmperor

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>E-Mail Test</title>
</head>
<body text="#000000" bgcolor="#FFFFFF">


<script text="JavaScript">
function checkemail(email) {
  alert(email);


  var meldung = "";


  var proto   = "(mailto:)?";
  var usr     = "([a-zA-Z0-9][a-zA-Z0-9_.-]*|\"([^\\\\\x80-\xff\015\012\']|\\\\[^\x80-\xff])+\")";
  var domain  = "([a-zA-Z0-9][a-zA-Z0-9._-]*\\.)*[a-zA-Z0-9][a-zA-Z0-9._-]*\\.[a-zA-Z]{2,5}";
  var regex   = "^" + proto + "?" + usr + "\@" + domain + "$";


  var rgx     = new RegExp(regex);
  return rgx.exec(email) ? true : false);


if(return rgx.exec(email)==true) {
  var meldung = "E-Mail ist gültig!";
}
else {
  var meldung = "E-Mail ist ungültig!";
}
document.all.status.innerHTML = meldung;
}
</script>


<form action="input_email.php">
  E-Mail: <input name="email" type="text" size="30" onkeyup="checkemail(this.form.email.value)">
</form>


<div id="status"></div>


</body>
</html>

Alles anzeigen

So, also ich glaube ich bin einfach viel zu doof für JS!!!
Was mache ich falsch???
Jetzt macht er nicht einmal mehr das alert am Anfang der function!
Achja, den Part habe ich bei selfhtml nur kopiert, könnte da auch noch ein fehler sein!? Weil ich bekomm absolut kein true oder false irgendwie zurück gegeben!

Code

var proto   = "(mailto:)?";
  var usr     = "([a-zA-Z0-9][a-zA-Z0-9_.-]*|\"([^\\\\\x80-\xff\015\012\']|\\\\[^\x80-\xff])+\")";
  var domain  = "([a-zA-Z0-9][a-zA-Z0-9._-]*\\.)*[a-zA-Z0-9][a-zA-Z0-9._-]*\\.[a-zA-Z]{2,5}";
  var regex   = "^" + proto + "?" + usr + "\@" + domain + "$";


  var rgx     = new RegExp(regex);
  return rgx.exec(email) ? true : false);

MfG

Tobse

Wenn schon das alert() nicht ausgeführt wird, tritt er erst garnicht in die Funktion ein.

Zitat von DarkEmperor

So, also ich glaube ich bin einfach viel zu doof für JS!!! [Blockierte Grafik: http://www.forum-hilfe.../images/smilies/icon_wink.gif] [Blockierte Grafik: http://www.forum-hilfe.../images/smilies/icon_sad.gif]
Was mache ich falsch??? [Blockierte Grafik: http://www.forum-hilfe.../images/smilies/icon_redface.gif] [Blockierte Grafik: http://www.forum-hilfe.../images/smilies/icon_question.gif] [Blockierte Grafik: http://www.forum-hilfe.../images/smilies/icon_sad.gif]

Das habe ich mir auch shcon oft gedacht Der Schlüssel liegt darin, dass JS im Gegensatz zu allem anderen auftretende fehler einfach für sich behält und den surfer nicht belästigt.
Dass er erst garnicht in die Funktion eintritt, liegt mit ziemlicher Sicherheit an einem Syntaxfehler. Wenn du FF benutzt, versuch mal die Fehlerkonsole (Strg+Umschalt+J). Da sollte es stehen.

SinnlosS

Probier es mal so:

HTML

E-Mail: <input name="email" type="text" size="30" onkeyup="checkemail(this.value);">

Desweiteren ist deine Funktion in der Form sowieso Unfug.

Code

var proto   = "(mailto:)?";

Ich wage zu bezweifeln, dass jemand seine email-Adresse mit dem Präfix "mailto:" einträgt. Man muss nicht immer alles selber neu schreiben, natürlich kann man sich nützliche Code-Schnippsel zusammensuchen und verwenden. Dann sollte man sich aber auch soweit damit auseinandersetzen, dass man versteht was da überhaupt passiert und welchem Zweck sie überhaupt dienen. Irgendwelche Code-Schnippsel blind zusammenwürfeln und dann in Foren von anderen an die eigenen Bedürfnissen anpassen lassen ist weder die feine englische Art, noch hat das irgendetwas mit Programmieren zu tun.

Code

return rgx.exec(email) ? true : false);

Wozu steht danach noch Code? Der wird niemals ausgeführt werden. Du weißt was return macht, oder?

Also, "var proto" gehört nicht in die regexp und es gehört nur ein return in deine Funktion, und zwar ans Ende. Pass das erstmal an und schau dann weiter.

SinnlosS

Ergänzung:
Mit Goolge Chrome kann man Javascript recht gut debuggen.
Strg+Shift+J öffnet auch hier die entsprechende Fehlerkonsole und dort werden dir auch beide Fehler angezeigt, die dafür sorgen, dass dein Code nicht funktioniert. Die schaust du aber bitte selber nach, damit du beim nächsten Mal direkt selber weißt wo du gucken mußt.

DarkEmperor

So, ich habe jetzt endlich in eigner Arbeit das Proble gefunden und gelöst!^^
Aber trotzdem ein RIESEN dankeschön für eure Hilfe!!!
...
vollständiger funktionierender Code:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>E-Mail Test</title>
</head>
<body text="#000000" bgcolor="#FFFFFF">


<form action="input_email.php">
  E-Mail: <input name="email" type="text" size="30" onkeyup="checkMail(this.form.email.value)">
</form>
<div id="status"></div>


<script text="JavaScript">
function checkEmail(email) {


  var proto  = "(mailto:)?";
  var usr    = "([a-zA-Z0-9][a-zA-Z0-9_.-]*|\"([^\\\\\x80-\xff\015\012\']|\\\\[^\x80-\xff])+\")";
  var domain = "([a-zA-Z0-9][a-zA-Z0-9._-]*\\.)*[a-zA-Z0-9][a-zA-Z0-9._-]*\\.[a-zA-Z]{2,5}";
  var regex  = "^" + proto + "?" + usr + "\@" + domain + "$";
  var rgx    = new RegExp(regex);


  return rgx.exec(email) ? true : false;
}


function checkMail(mail) {


  var meldung    = "";
  var mailadress = mail;
  var mailreturn = checkEmail(mailadress);


if(mailreturn==true) {
  var meldung = "E-Mail ist gültig!"; }
else {
  var meldung = "E-Mail ist ungültig!"; }


document.getElementById('status').innerHTML = meldung;
}
</script>


</body>
</html>

Alles anzeigen

Live-Version: http://ready4future.comxa.com/email.html

Danke nochmal für eure Hilfe!^^

Abgesehen von den arrays habe ich es jetzt auch verstanden was da was macht!^^
Nur wie die arrays geschrieben sind irgendwie noch nicht wirklich!
wenn ich das auch begriffen habe kann ich alle Formularfelder checken lassen!^^

MfG

SinnlosS

Ok bei dem Punkt mit dem "mailto:" in der RegExp muss ich mich wohl für meinen etwas harschen Ton entschuldigen, ich bin nicht so der RegExp-Experte und habe nicht daran gedacht, dass das ? ja für Menge {0,1} steht.
Ich nehme an du wirst deine Gründe haben das in zwei Funktionen zu splitten. Deine Benennung ist aber nicht sehr glücklich, daraus lässt sich absolut nicht schließen was nun der Unterschied ist.
Du könntest die z.B. mit checkEmail_Bool() und checkEmail_String() benennen, nach dem Typ des Rückgabewertes. Das wäre schon aussagekräftiger. Glaub mir, Tipp-Faulheit bei der Vergabe von Variablen- und Funktions-/Methodennamen wird fast immer spätestens dann bestraft, wenn man sich nach einigem Abstand nochmal damit beschäftigen muss.

checkMail() bzw. checkEmail_String() könntest du übrigens gut um einen Parameter erweiterern. Nämlich die id des Elements in dem die Meldung ausgegeben werden soll. Damit machst du die Funktion universeller nutzbar.
Das könnte dann so aussehen:

Code

function checkEmail_String(mail,output_id) {
	meldung = checkEmail_Bool(mail) ? "E-Mail ist gültig!" : "E-Mail ist ungültig!"
	document.getElementById(output_id).innerHTML = meldung;
}
// und falls du jquery benutzt:
function checkMail(mail,output_id) {
	meldung = checkEmail_Bool(mail) ? "E-Mail ist gültig!" : "E-Mail ist ungültig!"
	$("#"+output_id).html(meldung);
}

DarkEmperor

Zitat

Deine Benennung ist aber nicht sehr glücklich, daraus lässt sich absolut nicht schließen was nun der Unterschied ist.

Jap, ich war nur erstmal überglücklich das es überhaupt geht!^^
Ich setze mich gleich noch einmal daran das ganze zu verfeinern!^^
...

Zitat

checkMail() bzw. checkEmail_String() könntest du übrigens gut um einen Parameter erweiterern. Nämlich die id des Elements in dem die Meldung ausgegeben werden soll. Damit machst du die Funktion universeller nutzbar.
Das könnte dann so aussehen:

Naja, universeller würde es erst werden wenn ich die function für jedes Formularfeld verwenden könnte!^^ Sprich sich auch die Kontrollkriterien ändern!
Da müsste ich dann glaub sowas machen, oder?

Code

check_String(control, output_id, type) {
if(type == 'mail') {
*emailcode*
}
else if(type == 'name') {
*namecode*
}
else ...

und in den speziellen codes dann immer die Kritierien ändern!?
Was ich absolut noch nicht gerafft habe auf welche Art und Weise die Arrays geschrieben sind!^^
Habe mir gerade die verschiedenen JS-Array Schreibweisen angeschaut und es war nirgends so eine mit dabei!!!
...
Kann mir jemand helfen, das zu verstehen!?^^
Damit ich das Script dann wirklich verallgemeinern kann!?

MfG

SinnlosS

Wenn du schreibst "Habe mir gerade die verschiedenen JS-Array Schreibweisen angeschaut und es war nirgends so eine mit dabei", was meinst du dann mit "so eine"? Was für eine? Ich verstehe nicht so ganz an welcher Stelle du nicht weiterkommst.
Das einzige was gegenüber PHP z.B. wirklich großartig anders ist, dass assoziative Arrays in JS als new Object() erstellt werden.

Code

numerisches_array = new Array();
numerisches_array[0] = "Hallo";
numerisches_array[1] = " Welt!";
alert(numerischer_array[0]+numerischer_array[1]);


assoziatives_array = new Object();
assoziatives_array['hello'] = "Hallo";
assoziatives_array['world'] = " Welt!";
alert(assoziatives_array['hello']+assoziatives_array['world']);

Wenn du übrigens vorhast an vielen Stellen JavaScript/Ajax einzusetzen würde ich dir zur Verwendung eines JS-Frameworks raten. Ich nutze JQuery und kann das nur weiterempfehlen.

P.S.: Schöne Grüße nach Freital, sehe ich grade. Mein Vater hat lange in Dölzschen gewohnt, da war ich häufiger. (oder ist das nicht das Freital bei Dresden? ^^)

DarkEmperor

Das was du da gerade geschrieben hast habe ich alles schon verstanden!
Ich hänge an der Stelle des obigen Scriptes:

Code

var usr    = "([a-zA-Z0-9][a-zA-Z0-9_.-]*|\"([^\\\\\x80-\xff\015\012\']|\\\\[^\x80-\xff])+\")";
  var domain = "([a-zA-Z0-9][a-zA-Z0-9._-]*\\.)*[a-zA-Z0-9][a-zA-Z0-9._-]*\\.[a-zA-Z]{2,5}";

Die Schreibweise verwirrt mich irgendwie!^^
Ich kann mir zwar denken das:
a-z Bedeutet das alle Kleinbuchstaben verwendet werden dürfen, aber weshalb das doppelt und drei-fach geschrieben ist?

HELP PLEAS!!!^^

Achja, ja das ist das Freital bei Dresden!^^ Danke für die Grüße!

synaptic

also die schreibweise sollte dich nich verwirren.. das sind regular expressions... lerne sie, liebe sie, nutze sie und gib dein wissen dann weiter

Tags