Startseite>Webdesign-Tutorial>Javascript-Tutorial

Darum geht es bei JavaScript (Zusammenstellung von JS-Grundkenntnissen)

Autor：Eve Cole Aktualisierungszeit：2009-06-11 16:26:36

1 Erstellen Sie einen Skriptblock,

um auf den Inhaltsprogrammcode zu verweisen
<script language="JavaScript">
Hier wird JavaScript-Code geschrieben
</script>

2 Skriptcode ausblenden
Referenzinhaltsprogrammcode
<script language="JavaScript">
<!--
document.write(“Hallo”);
// -->
</script>
Relevanter Code wird in Browsern, die JavaScript 3 nicht unterstützen, nicht ausgeführt

. Wird angezeigt, wenn der Browser dies nicht unterstützt.
Referenzinhaltsprogrammcode
<noscript>
Hallo an den Nicht-JavaScript-Browser.
</noscript>

4 Verknüpfen Sie externe Skriptdateien
Referenzinhaltsprogrammcode
<script language="JavaScript" src="/"filename.js""></script>

5 Kommentarskript
Referenzinhaltsprogrammcode
// Dies ist ein Kommentar
document.write(“Hallo”); // Dies ist ein Kommentar
/*
Das alles
ist ein Kommentar
*/

6 Ausgabe an Browser
Referenzinhaltsprogrammcode
document.write(“<strong>Hallo</strong>“);

7 Variablen definieren
Referenzinhaltsprogrammcode
var myVariable = „some value“;

8-String-Addition
Referenzinhaltsprogrammcode
var myString = „String1“ + „String2“;

9 String-Suche
Referenzinhaltsprogrammcode
<script language="JavaScript">
<!--
var myVariable = „Hallo“;
var therePlace = myVariable.search("there");
document.write(therePlace);
// -->
</script>

10 String-Ersetzung
Referenzinhaltsprogrammcode
thisVar.replace(„Montag“, „Freitag“);

11 Formatzeichenfolge
Referenzinhaltsprogrammcode
<script language="JavaScript">
<!--
var myVariable = „Hallo“;
document.write(myVariable.big() + „<br>“);
document.write(myVariable.blink() + „<br>“);
document.write(myVariable.bold() + „<br>“);
document.write(myVariable.fixed() + „<br>“);
document.write(myVariable.fontcolor(„red“) + „<br>“);
document.write(myVariable.fontsize(„18pt“) + „<br>“);
document.write(myVariable.italics() + „<br>“);
document.write(myVariable.small() + „<br>“);
document.write(myVariable.strike() + „<br>“);
document.write(myVariable.sub() + „<br>“);
document.write(myVariable.sup() + „<br>“);
document.write(myVariable.toLowerCase() + „<br>“);
document.write(myVariable.toUpperCase() + „<br>“);
var firstString = "Mein String";
var finalString = firstString.bold().toLowerCase().fontcolor("red");
// -->
</script>

12 Array erstellen
Referenzinhaltsprogrammcode
<script language="JavaScript">
<!--
var myArray = neues Array(5);
myArray[0] = „Erster Eintrag“;
myArray[1] = „Zweiter Eintrag“;
myArray[2] = „Dritter Eintrag“;
myArray[3] = „Vierter Eintrag“;
myArray[4] = „Fünfter Eintrag“;
var anotherArray = new Array("Erster Eintrag", "Zweiter Eintrag", "Dritter Eintrag", "Vierter Eintrag", "Fünfter Eintrag");
// -->
</script>

13 Array-Sortierung
Referenzinhaltsprogrammcode
<script language="JavaScript">
<!--
var myArray = neues Array(5);
myArray[0] = "z";
myArray[1] = "c";
myArray[2] = "d";
myArray[3] = "a";
myArray[4] = "q";
document.write(myArray.sort());
// -->
</script>

14 Zeichenfolge teilen
Referenzinhaltsprogrammcode
<script language="JavaScript">
<!--
var myVariable = "a,b,c,d";
var stringArray = myVariable.split(",");
document.write(stringArray[0]);
document.write(stringArray[1]);
document.write(stringArray[2]);
document.write(stringArray[3]);
// -->
</script>

15 Popup-Warnmeldung
Referenzinhaltsprogrammcode
<script language="JavaScript">
<!--
window.alert(“Hallo”);
// -->
</script>

16 Popup-Bestätigungsfeld
Referenzinhaltsprogrammcode
<script language="JavaScript">
<!--
var result = window.confirm(“Klicken Sie auf OK, um fortzufahren”);
// -->
</script>

17 Benutzerdefinierte Funktion
Referenzinhaltsprogrammcode
<script language="JavaScript">
<!--
Funktion multiple(Anzahl1,Anzahl2) {
var result = Zahl1 * Zahl2;
Ergebnis zurückgeben;
}
// -->
</script>

18 JS-Funktion aufrufen
Referenzinhaltsprogrammcode
<a href=“#“ onClick=“functionName()“>Linktext</a>
<a href="/“javascript:functionName"()“>Linktext</a>

19 Führen Sie die Funktion aus, nachdem die Seite geladen wurde
Referenzinhaltsprogrammcode
<body onLoad="functionName();">
Hauptteil der Seite
</body>

20 Bedingtes Urteil
Referenzinhaltsprogrammcode
<Skript>
<!--
var userChoice = window.confirm(“OK oder Abbrechen wählen”);
var result = (userChoice == true) ? „OK“ : „Abbrechen“;
document.write(result);
// -->
</script>

21 Geben Sie die Anzahl der Schleifen an
Referenzinhaltsprogrammcode
<Skript>
<!--
var myArray = neues Array(3);
myArray[0] = "Element 0";
myArray[1] = "Element 1";
myArray[2] = "Element 2";
for (i = 0; i < myArray.length; i++) {
document.write(myArray[i] + „<br>“);
}
// -->
</script>

22 Legen Sie die zukünftige Ausführung fest
Referenzinhaltsprogrammcode
<Skript>
<!--
Funktion hallo() {
window.alert(“Hallo”);
}
window.setTimeout("hello()",5000);
// -->
</script>

23 Geplante Ausführungsfunktion
Referenzinhaltsprogrammcode
<Skript>
<!--
Funktion hallo() {
window.alert(“Hallo”);
window.setTimeout("hello()",5000);
}
window.setTimeout("hello()",5000);
// -->
</script>

24 Geplante Ausführung abbrechen
Referenzinhaltsprogrammcode
<Skript>
<!--
Funktion hallo() {
window.alert(“Hallo”);
}
var myTimeout = window.setTimeout("hello()",5000);
window.clearTimeout(myTimeout);
// -->
</script>

25 Führen Sie die Funktion aus, wenn die Seite entladen wird
Referenzinhaltsprogrammcode
<body onUnload="functionName();">
Hauptteil der Seite
</body>

JavaScript sieht folgendermaßen aus: 2: Browser-Ausgabe

26 Greifen Sie auf das Dokumentobjekt zu
Referenzinhaltsprogrammcode
<script language="JavaScript">
var myURL = document.URL;
window.alert(myURL);
</script>

27 HTML dynamisch ausgeben
Referenzinhaltsprogrammcode
<script language="JavaScript">
document.write(“<p>Hier sind einige Informationen zu diesem Dokument:</p>”);
document.write(“<ul>”);
document.write(“<li>Referenzdokument: „ + document.referrer + „</li>“);
document.write(“<li>Domain: „ + document.domain + „</li>“);
document.write(“<li>URL: „ + document.URL + „</li>“);
document.write(“</ul>”);
</script>

28 Zeilenumbruch ausgeben
Referenzinhaltsprogrammcode
document.writeln(“<strong>a</strong>“);
document.writeln(„b“);

29 Ausgabedatum
Referenzinhaltsprogrammcode
<script language="JavaScript">
var thisDate = new Date();
document.write(thisDate.toString());
</script>

30 Geben Sie die Zeitzone des Datums an
Referenzinhaltsprogrammcode
<script language="JavaScript">
var myOffset = -2;
var currentDate = new Date();
var userOffset = currentDate.getTimezoneOffset()/60;
var timeZoneDifference = userOffset - myOffset;
currentDate.setHours(currentDate.getHours() + timeZoneDifference);
document.write(“Die Uhrzeit und das Datum in Mitteleuropa sind: „ + currentDate.toLocaleString());
</script>

31 Datumsausgabeformat festlegen
Referenzinhaltsprogrammcode
<script language="JavaScript">
var thisDate = new Date();
var thisTimeString = thisDate.getHours() + „:“ + thisDate.getMinutes();
var thisDateString = thisDate.getFullYear() + „/“ + thisDate.getMonth() + „/“ + thisDate.getDate();
document.write(thisTimeString + „ on „ + thisDateString);
</script>

32 URL-Parameter lesen
Referenzinhaltsprogrammcode
<script language="JavaScript">
var urlParts = document.URL.split("?");
var parameterParts = urlParts[1].split(“&“);
for (i = 0; i < parameterParts.length; i++) {
varpairParts = parameterParts[i].split(“=");
var paarName = paarTeile[0];
varpairValue =pairParts[1];
document.write(pairName + " : " +pairValue );
}
</script>
Denken Sie immer noch, dass HTML zustandslos ist?

33 Öffnen Sie ein neues Dokumentobjekt
Referenzinhaltsprogrammcode
<script language="JavaScript">
Funktion newDocument() {
document.open();
document.write(“<p>Dies ist ein neues Dokument.</p>”);
document.close();
}
</script>

34 Seitensprung
Referenzinhaltsprogrammcode
<script language="JavaScript">
window.location = „http://www.x-force.cn/“;
</script>

35 Fortschrittsfenster für das Laden der Webseite hinzufügen
Referenzinhaltsprogrammcode
<html>
<Kopf>
<script language='javaScript'>
var placeHolder = window.open('holder.html','placeholder','width=200,height=200');
</script>
<title>Die Hauptseite</title>
</head>
<body onLoad='placeHolder.close()'>
<p>Dies ist die Hauptseite</p>
</body>
</html>

Das ist es für JavaScript 3: Bild

36 Bildattribute lesen
Referenzinhaltsprogrammcode
<img src="/“image1.jpg"“ name="myImage">
<a href=“# ” onClick=“window.alert(document.myImage.width)“>Breite</a>

37 Dynamisches Laden von Bildern
Referenzinhaltsprogrammcode
<script language="JavaScript">
myImage = neues Bild;
myImage.src = „Tellers1.jpg“;
</script>

38 Einfache Bildersetzung
Referenzinhaltsprogrammcode
<script language="JavaScript">
rollImage = neues Bild;
rollImage.src = „rollImage1.jpg“;
defaultImage = neues Bild;
defaultImage.src = „image1.jpg“;
</script>
<a href="/"myUrl"" onMouseOver="document.myImage.src = rollImage.src;"
onMouseOut=“document.myImage.src = defaultImage.src;“>
<img src="/"image1.jpg"" name="myImage" width=100 height=100 border=0>

39 Zufällige Anzeige von Bildern
Referenzinhaltsprogrammcode
<script language="JavaScript">
var imageList = neues Array;
imageList[0] = "image1.jpg";
imageList[1] = "image2.jpg";
imageList[2] = "image3.jpg";
imageList[3] = "image4.jpg";
var imageChoice = Math.floor(Math.random() * imageList.length);
document.write('<img src="' + imageList[imageChoice] + '">');
</script>

40 Bildersetzung durch Funktion implementiert
Referenzinhaltsprogrammcode
<script language="JavaScript">
var Quelle = 0;
Var-Ersetzung = 1;
Funktion createRollOver(originalImage,replacementImage) {
var imageArray = neues Array;
imageArray[Quelle] = neues Bild;
imageArray[Quelle].src = originalImage;
imageArray[replacement] = neues Bild;
imageArray[replacement].src = replacementImage;
return imageArray;
}
var rollImage = createRollOver("image1.jpg","rollImage1.jpg");
</script>
<a href=“#“ onMouseOver=“document.myImage1.src = rollImage1[replacement].src;“
onMouseOut=“document.myImage1.src = rollImage1[source].src;“>
<img src="/"image1.jpg"" width=100 name="myImage1" border=0>
</a>

41 Erstellen Sie eine Diashow
Referenzinhaltsprogrammcode
<script language="JavaScript">
var imageList = neues Array;
imageList[0] = neues Bild;
imageList[0].src = „image1.jpg“;
imageList[1] = neues Bild;
imageList[1].src = „image2.jpg“;
imageList[2] = neues Bild;
imageList[2].src = „image3.jpg“;
imageList[3] = neues Bild;
imageList[3].src = „image4.jpg“;
Funktion slideShow(imageNumber) {
document.slideShow.src = imageList[imageNumber].src;
Bildnummer += 1;
if (imageNumber < imageList.length) {
window.setTimeout(“slideShow(“ + imageNumber + “)”,3000);
}
}
</script>
</head>
<body onLoad="slideShow(0)">
<img src="/“image1.jpg"“ width=100 name=“slideShow“>

42 zufällige Werbebilder
Referenzinhaltsprogrammcode
<script language="JavaScript">
var imageList = neues Array;
imageList[0] = "image1.jpg";
imageList[1] = "image2.jpg";
imageList[2] = "image3.jpg";
imageList[3] = "image4.jpg";
var urlList = neues Array;
urlList[0] = "http://some.host/";
urlList[1] = "http://another.host/";
urlList[2] = "http://somewhere.else/";
urlList[3] = "http://right.here/";
var imageChoice = Math.floor(Math.random() * imageList.length);
document.write('<a href="' + urlList[imageChoice] + '"><img src="' + imageList[imageChoice] + '"></a>');
</script>

Das ist es für JavaScript 4: Form

43 Formularkomposition
Referenzinhaltsprogrammcode
<form method=“post“ action=“target.html“ name=“thisForm“>
<input type=“text“ name=“myText“>
<select name="mySelect">
<option value="1">Erste Wahl</option>
<option value=“2“>Zweite Wahl</option>
</select>
<br>
<input type=“submit“ value=“Submit Me“>
</form>

44 Greifen Sie auf den Inhalt des Textfelds im Formular zu
Referenzinhaltsprogrammcode
<form name="myForm">
<input type=“text“ name=“myText“>
</form>
<a href='#' onClick='window.alert(document.myForm.myText.value);'>Textfeld prüfen</a>

45 Kopieren Sie den Inhalt des Textfelds dynamisch
Referenzinhaltsprogrammcode
<form name="myForm">
Geben Sie einen Text ein: <input type=“text“ name=“myText“><br>
Text kopieren: <input type=“text“ name=“copyText“>
</form>
<a href=“#“ onClick=“document.myForm.copyText.value =
document.myForm.myText.value;“>Textfeld kopieren</a>

46 Erkennen Sie Änderungen im Textfeld
Referenzinhaltsprogrammcode
<form name="myForm">
Geben Sie einen Text ein: <input type=“text“ name=“myText“ onChange=“alert(this.value);“>
</form>

47 Greifen Sie auf die ausgewählte Auswahl zu
Referenzinhaltsprogrammcode
<form name="myForm">
<select name="mySelect">
<option value=“First Choice“>1</option>
<option value=“Second Choice“>2</option>
<option value=“Third Choice“>3</option>
</select>
</form>
<a href='#' onClick='alert(document.myForm.mySelect.value);'>Auswahlliste prüfen</a>

48 Ausgewählte Elemente dynamisch hinzufügen
Referenzinhaltsprogrammcode
<form name="myForm">
<select name="mySelect">
<option value=“First Choice“>1</option>
<option value=“Second Choice“>2</option>
</select>
</form>
<script language="JavaScript">
document.myForm.mySelect.length++;
document.myForm.mySelect.options[document.myForm.mySelect.length - 1].text = „3“;
document.myForm.mySelect.options[document.myForm.mySelect.length - 1].value = „Dritte Wahl“;
</script>

49 Formularfelder validieren
Referenzinhaltsprogrammcode
<script language="JavaScript">
Funktion checkField(field) {
if (field.value == "") {
window.alert(„Sie müssen einen Wert in das Feld eingeben“);
field.focus();
}
}
</script>
<form name="myForm" action="target.html">
Textfeld: <input type="text" name="myField" onBlur="checkField(this)">
<br><input type=“submit“>
</form>

50 Überprüfen Sie die ausgewählten Elemente
Referenzinhaltsprogrammcode
Funktion checkList(selection) {
if (Auswahl. Länge == 0) {
window.alert(„Sie müssen eine Auswahl aus der Liste treffen.“);
return false;
}
return true;
}

51 Ändern Sie die Aktion des Formulars dynamisch
Referenzinhaltsprogrammcode
<form name="myForm" action="login.html">
Benutzername: <input type=“text“ name=“username“><br>
Passwort: <input type=“password“ name=“password“><br>
<input type=“button“ value=“Login“ onClick=“this.form.submit();“>
<input type="button" value="Register" onClick="this.form.action = 'register.html'; this.form.submit();">
<input type="button" value="Passwort abrufen" onClick="this.form.action = 'password.html'; this.form.submit();">
</form>

52 Bildschaltflächen verwenden
Referenzinhaltsprogrammcode
<form name="myForm" action="login.html">
Benutzername: <input type=“text“ name=“username“><br>
Passwort: <input type=“password“ name=“password“><br>
<input type="image" src="/"login.gif"" value="Login">
</form>

53 Verschlüsselung von Formulardaten
Referenzinhaltsprogrammcode
<SCRIPT LANGUAGE='JavaScript'>
<!--
Funktion encrypt(item) {
var newItem = '';
for (i=0; i < item.length; i++) {
newItem += item.charCodeAt(i) + '.';
}
return newItem;
}
Funktion encryptForm(myForm) {
for (i=0; i < myForm.elements.length; i++) {
myForm.elements[i].value = encrypt(myForm.elements[i].value);
}
}

//-->
</SCRIPT>
<form name='myForm' onSubmit='encryptForm(this); window.alert(this.myField.value);'>
Geben Sie etwas Text ein: <input type=text name=myField><input type=submit>
</form>

Das ist alles für JavaScript 5: Fenster und Frame

54 Ändern Sie die Textaufforderung in der Statusleiste des Browsers
Referenzinhaltsprogrammcode
<script language="JavaScript">
window.status = „Eine neue Statusmeldung“;
</script>

55 Popup-Bestätigungsfeld
Referenzinhaltsprogrammcode
<script language="JavaScript">
var userChoice = window.confirm(“Klicken Sie auf „OK“ oder „Abbrechen“);
if (userChoice) {
document.write(“Sie haben „OK“ gewählt“);
} anders {
document.write(“Sie haben „Abbrechen“ gewählt“);
}
</script>

56 Eingabeaufforderung
Referenzinhaltsprogrammcode
<script language="JavaScript">
var userName = window.prompt("Bitte geben Sie Ihren Namen ein", "Geben Sie hier Ihren Namen ein");
document.write(“Ihr Name ist „ + Benutzername);
</script>

57 Öffne ein neues Fenster
Zitierter Inhalt //Öffnen Sie einen neuen Programmcode für ein Browserfenster mit dem Namen myNewWindow
<script language="JavaScript">
window.open("http://www.liu21st.com/","myNewWindow");
</script>

58 Legen Sie die Größe des neuen Fensters fest
Referenzinhaltsprogrammcode
<script language="JavaScript">
window.open("http://www.liu21st.com/","myNewWindow",'height=300,width=300');
</script>

59 Legen Sie die Position des neuen Fensters fest
Referenzinhaltsprogrammcode
<script language="JavaScript">
window.open("http://www.liu21st.com/","myNewWindow",'height=300,width=300,left=200,screenX=200,top=100,screenY=100');
</script>

60 Ob die Symbolleiste und die Bildlaufleiste angezeigt werden sollen
Referenzinhaltsprogrammcode
<script language="JavaScript">
window.open("http://www.x-force.cn/",toolbar=no, menubar=no);
</script>

61 Ist es möglich, die Größe des neuen Fensters zu skalieren?
Referenzinhaltsprogrammcode
<script language="JavaScript">
window.open('http://www.x-force.cn/', 'myNewWindow', 'resizable=yes' );</script>

62 Laden Sie ein neues Dokument in das aktuelle Fenster
Referenzinhaltsprogrammcode
<a href='#' onClick='document.location = '125a.html';' >Neues Dokument öffnen</a>

63 Legen Sie die Scrollposition der Seite fest
Referenzinhaltsprogrammcode
<script language="JavaScript">
if (document.all) { //Wenn es sich um einen IE-Browser handelt, verwenden Sie das scrollTop-Attribut
document.body.scrollTop = 200;
} else { //Wenn es sich um einen NetScape-Browser handelt, verwenden Sie das pageYOffset-Attribut
window.pageYOffset = 200;
</script>

64 Öffnen Sie ein Vollbildfenster im IE
Referenzinhaltsprogrammcode
<a href='#' onClick=“window.open('http://www.devdao.com/','newWindow','fullScreen=yes');“>Öffnen Sie ein Vollbildfenster</a>

65 Bedienung neuer Fenster und übergeordneter Fenster
Referenzinhaltsprogrammcode
<script language="JavaScript">
//Neues Fenster definieren
var newWindow = window.open("128a.html","newWindow");
newWindow.close(); //Das neue Fenster schließen, das im übergeordneten Fenster geöffnet wurde
</script>Schließen Sie den Programmcode des übergeordneten Fensters in einem neuen Fenster
window.opener.close()

66 Inhalt in das neue Fenster schreiben
Referenzinhaltsprogrammcode
<script language="JavaScript">
var newWindow = window.open("","newWindow");
newWindow.document.open();
newWindow.document.write(„Dies ist ein neues Fenster“);
newWINdow.document.close();
</script>

67 Laden Sie die Seite in die Frame-Seite
Referenzinhaltsprogrammcode
<frameset cols="50%,*">
<frame name="frame1" src="/"135a.html"">
<frame name="frame2" src="/"about:blank"">
</frameset>
Laden Sie die Seite in Frame2 in Frame1
parent.frame2.document.location = „135b.html“;

68 Skripte zwischen Frame-Seiten teilen
Inhalt zitieren Wenn die HTML-Datei in Frame1 einen Skriptcode enthält
Funktion doAlert() {
window.alert(“Frame 1 wird geladen”);
}

Dann kann der

Methodenprogrammcode

in Frame2 wie folgt aufgerufen werden


<body onLoad="parent.frame1.doAlert();">
Das ist Bild 2.
</body>

69 Daten öffentlich
Referenzinhalte können Datenelemente in einer Frameseite definieren, sodass die Daten vom Seitendienstprogrammcode in mehreren Frames verwendet werden können.
<script language="JavaScript">
var persistentVariable = „Dies ist ein persistenter Wert“;
</script>
<frameset cols="50%,*">
<frame name="frame1" src="/"138a.html"">
<frame name="frame2" src="/"138b.html"">
</frameset>

Auf diese Weise kann die Variable persistentVariable sowohl in Frame1 als auch in Frame2

70 Framework Code Library

verwendet werden


Zitierter Inhalt Gemäß einigen der oben genannten Ideen können wir eine versteckte Frame-Seite als Codebasis-Programmcode

des

gesamten Frame-Sets verwenden


<frameset cols=“0,50%,*“>
<frame name="codeFrame" src="/"140code.html"">
<frame name="frame1" src="/"140a.html"">
<frame name="frame2" src="/"140b.html"">
</frameset>
Ähnliche Artikel