C'est ce qu'est JavaScript (compilation des connaissances de base JS)

Auteur：Eve Cole Date de mise à jour：2009-06-11 16:26:36

1 Créez un bloc de script

pour référencer le code du programme de contenu
<langage de script="JavaScript">
Le code JavaScript est écrit ici
</script>

2 Masquer le code du script
Code du programme de contenu de référence
<langage de script="JavaScript">

</script>
Le code pertinent ne sera pas exécuté dans les navigateurs qui ne prennent pas en charge JavaScript

3. Affiché lorsque le navigateur ne le prend pas en charge.
Code du programme de contenu de référence
<noscript>
Bonjour au navigateur non-JavaScript.
</noscript>

4 Lier des fichiers de script externes
Code du programme de contenu de référence
<script language="JavaScript" src="/"filename.js""></script>

Script à 5 commentaires
Code du programme de contenu de référence
// Ceci est un commentaire
document.write("Bonjour"); // Ceci est un commentaire
/*
Tout cela
est un commentaire
*/

6 Sortie vers le navigateur
Code du programme de contenu de référence
document.write(“<strong>Bonjour</strong>”);

7 Définir les variables
Code du programme de contenu de référence
var myVariable = « une valeur » ;

ajout de 8 chaînes
Code du programme de contenu de référence
var maChaîne = « Chaîne1 » + « Chaîne2 » ;

9 Recherche de chaîne
Code du programme de contenu de référence
<langage de script="JavaScript">

</script>

10 Remplacement de chaîne
Code du programme de contenu de référence
thisVar.replace("Lundi", "Vendredi");

11 Chaîne de formatage
Code du programme de contenu de référence
<langage de script="JavaScript">

</script>

12 Créer un tableau
Code du programme de contenu de référence
<langage de script="JavaScript">

</script>

13 Tri des tableaux
Code du programme de contenu de référence
<langage de script="JavaScript">

</script>

14 Chaîne divisée
Code du programme de contenu de référence
<langage de script="JavaScript">

</script>

15 Message d'avertissement contextuel
Code du programme de contenu de référence
<langage de script="JavaScript">

</script>

16 Boîte de confirmation contextuelle
Code du programme de contenu de référence
<langage de script="JavaScript">

</script>

17 Fonction personnalisée
Code du programme de contenu de référence
<langage de script="JavaScript">

</script>

18 Appeler la fonction JS
Code du programme de contenu de référence
<a href="#" onClick="functionName()">Texte du lien</a>
<a href="/”javascript:functionName"()”>Texte du lien</a>

19 Exécuter la fonction après le chargement de la page
Code du programme de contenu de référence
<body onLoad="functionName();">
Corps de la page
</body>

20 Jugement conditionnel
Code du programme de contenu de référence
<script>

</script>

21 Spécifiez le nombre de boucles
Code du programme de contenu de référence
<script>

</script>

22 Définir l'exécution future
Code du programme de contenu de référence
<script>

</script>

23 Fonction d'exécution planifiée
Code du programme de contenu de référence
<script>

</script>

24 Annuler l'exécution planifiée
Code du programme de contenu de référence
<script>

</script>

25 Exécuter la fonction lorsque la page est déchargée
Code du programme de contenu de référence
<body onUnload="functionName();">
Corps de la page
</body>

JavaScript est comme ceci 2 : Sortie du navigateur

26 Accéder à l'objet document
Code du programme de contenu de référence
<langage de script="JavaScript">
var monURL = document.URL;
window.alert(monURL);
</script>

27 Sortie HTML dynamique
Code du programme de contenu de référence
<langage de script="JavaScript">
document.write("<p>Voici quelques informations sur ce document :</p>");
document.write("<ul>");
document.write("<li>Document référent : " + document.referrer + "</li>");
document.write("<li>Domaine : " + document.domain + "</li>");
document.write("<li>URL : " + document.URL + "</li>");
document.write("</ul>");
</script>

28 Sortie de nouvelle ligne
Code du programme de contenu de référence
document.writeln("<strong>a</strong>");
document.writeln("b");

29 date de sortie
Code du programme de contenu de référence
<langage de script="JavaScript">
var thisDate = new Date();
document.write(thisDate.toString());
</script>

30 Spécifiez le fuseau horaire de la date
Code du programme de contenu de référence
<langage de script="JavaScript">
var monOffset = -2 ;
var date actuelle = nouvelle date ();
var userOffset = currentDate.getTimezoneOffset()/60;
var timeZoneDifference = userOffset - myOffset ;
currentDate.setHours(currentDate.getHours() + timeZoneDifference);
document.write(« L'heure et la date en Europe centrale sont : « + currentDate.toLocaleString());
</script>

31 Définir le format de sortie de la date
Code du programme de contenu de référence
<langage de script="JavaScript">
var thisDate = new Date();
var thisTimeString = thisDate.getHours() + « : » + thisDate.getMinutes();
var thisDateString = thisDate.getFullYear() + «/» + thisDate.getMonth() + «/» + thisDate.getDate();
document.write(thisTimeString + " sur " + thisDateString);
</script>

32 Lire les paramètres d'URL
Code du programme de contenu de référence
<langage de script="JavaScript">
var urlParts = document.URL.split("?");
var paramètreParts = urlParts[1].split("&");
pour (i = 0; i < paramètreParts.length; i++) {
var paireParts = paramètreParts[i].split("=");
var pairName = paireParts[0];
var paireValue = paireParts[1];
document.write(pairName + " : " +pairValue );
}
</script>
Pensez-vous toujours que HTML est sans état ?

33 Ouvrir un nouvel objet document
Code du programme de contenu de référence
<langage de script="JavaScript">
fonction nouveauDocument() {
document.open();
document.write("<p>Ceci est un nouveau document.</p>");
document.close();
}
</script>

saut de 34 pages
Code du programme de contenu de référence
<langage de script="JavaScript">
window.location = « http://www.x-force.cn/ » ;
</script>

35 Ajouter une fenêtre de progression du chargement de la page Web
Code du programme de contenu de référence
<html>
<tête>
<langage de script='javaScript'>
var placeHolder = window.open('holder.html','placeholder','width=200,height=200');
</script>
<title>La page principale</title>
</tête>
<body onLoad='placeHolder.close()'>
<p>Voici la page principale</p>
</corps>
</html>

C'est tout pour JavaScript 3 : Image

36 Lecture des attributs de l'image
Code du programme de contenu de référence
<img src="/”image1.jpg"” name="monImage">
<a href=”# ” onClick=”window.alert(document.myImage.width)”>Largeur</a>

37 Chargement dynamique des images
Code du programme de contenu de référence
<langage de script="JavaScript">
monImage = nouvelle Image ;
monImage.src = « Tellers1.jpg » ;
</script>

38 Remplacement simple d'images
Code du programme de contenu de référence
<langage de script="JavaScript">
rollImage = nouvelle image ;
rollImage.src = « rollImage1.jpg » ;
defaultImage = nouvelle image ;
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 Affichage aléatoire des images
Code du programme de contenu de référence
<langage de script="JavaScript">
var imageList = nouveau tableau ;
imageListe[0] = "image1.jpg";
imageListe[1] = "image2.jpg";
imageListe[2] = "image3.jpg";
imageListe[3] = "image4.jpg";
var imageChoice = Math.floor(Math.random() * imageList.length);
document.write('<img src="' + imageList[imageChoice] + '">');
</script>

40 Remplacement d'image implémenté par la fonction
Code du programme de contenu de référence
<langage de script="JavaScript">
var source = 0 ;
var remplacement = 1 ;
fonction createRollOver (image originale, image de remplacement) {
var imageArray = nouveau tableau ;
imageArray[source] = nouvelle image ;
imageArray[source].src = originalImage;
imageArray[remplacement] = nouvelle image ;
imageArray[remplacement].src = remplacementImage;
renvoyer 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 Créer un diaporama
Code du programme de contenu de référence
<langage de script="JavaScript">
var imageList = nouveau tableau ;
imageList[0] = nouvelle image ;
imageList[0].src = « image1.jpg »;
imageList[1] = nouvelle image ;
imageList[1].src = « image2.jpg »;
imageList[2] = nouvelle image ;
imageList[2].src = « image3.jpg »;
imageList[3] = nouvelle image ;
imageList[3].src = « image4.jpg »;
fonction slideShow (numéro d'image) {
document.slideShow.src = imageList[imageNumber].src;
numéroimage += 1 ;
if (imageNumber < imageList.length) {
window.setTimeout("slideShow(" + imageNumber + ")",3000);
}
}
</script>
</tête>
<body onLoad="slideShow(0)">
<img src="/”image1.jpg"” width=100 name=”slideShow”>

42 images publicitaires aléatoires
Code du programme de contenu de référence
<langage de script="JavaScript">
var imageList = nouveau tableau ;
imageListe[0] = "image1.jpg";
imageListe[1] = "image2.jpg";
imageListe[2] = "image3.jpg";
imageListe[3] = "image4.jpg";
var urlList = nouveau tableau ;
urlList[0] = "http://some.host/";
urlList[1] = "http://un autre.hôte/";
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>

C'est tout pour JavaScript 4 : Formulaire

43 Composition du formulaire
Code du programme de contenu de référence
<form method=”post” action=”target.html” name=”thisForm”>
<input type="text" name="myText">
<select name="mySelect">
<option value="1">Premier choix</option>
<option value="2">Deuxième choix</option>
</sélectionner>
<br>
<input type="submit" value="Soumettez-moi">
</form>

44 Accéder au contenu de la zone de texte dans le formulaire
Code du programme de contenu de référence
<nom du formulaire="monFormulaire">
<input type="text" name="myText">
</form>
<a href='#' onClick='window.alert(document.myForm.myText.value);'>Vérifier le champ de texte</a>

45 Copier dynamiquement le contenu de la zone de texte
Code du programme de contenu de référence
<nom du formulaire="monFormulaire">
Entrez du texte : <input type="text" name="myText"><br>
Copier le texte : <input type="text" name="copyText">
</form>
<a href=”#” onClick=”document.myForm.copyText.value =
document.myForm.myText.value;”>Copier le champ de texte</a>

46 Détecter les modifications dans la zone de texte
Code du programme de contenu de référence
<nom du formulaire="monFormulaire">
Entrez du texte : <input type="text" name="myText" onChange="alert(this.value);">
</form>

47 Accéder au Select sélectionné
Code du programme de contenu de référence
<nom du formulaire="monFormulaire">
<select name="mySelect">
<option value="Premier choix">1</option>
<option value="Deuxième choix">2</option>
<option value="Troisième choix">3</option>
</sélectionner>
</form>
<a href='#' onClick='alert(document.myForm.mySelect.value);'>Vérifier la liste de sélection</a>

48 Ajouter dynamiquement des éléments de sélection
Code du programme de contenu de référence
<nom du formulaire="monFormulaire">
<select name="mySelect">
<option value="Premier choix">1</option>
<option value="Deuxième choix">2</option>
</sélectionner>
</form>
<langage de script="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 = « Troisième choix » ;
</script>

49 Valider les champs du formulaire
Code du programme de contenu de référence
<langage de script="JavaScript">
fonction checkField(champ) {
if (field.value == "") {
window.alert("Vous devez saisir une valeur dans le champ");
champ.focus();
}
}
</script>
<form name="myForm" action="target.html">
Champ de texte : <input type="text" name="myField" onBlur="checkField(this)">
<br><input type="submit">
</form>

50 Vérifier les éléments sélectionnés
Code du programme de contenu de référence
fonction checkList (sélection) {
if (sélection. longueur == 0) {
window.alert("Vous devez faire une sélection dans la liste.");
renvoie faux ;
}
renvoie vrai ;
}

51 Modifier dynamiquement l'action du formulaire
Code du programme de contenu de référence
<form name="myForm" action="login.html">
Nom d'utilisateur : <input type="text" name="username"><br>
Mot de passe : <input type="password" name="password"><br>
<input type=”button” value=”Connexion” onClick=”this.form.submit();”>
<input type="button" value="Register" onClick="this.form.action = 'register.html'; this.form.submit();">
<input type="button" value="Récupérer le mot de passe" onClick="this.form.action = 'password.html'; this.form.submit();">
</form>

52 Utiliser les boutons d'image
Code du programme de contenu de référence
<form name="myForm" action="login.html">
Nom d'utilisateur : <input type="text" name="username"><br>
Mot de passe : <input type="password" name="password"><br>
<input type="image" src="/"login.gif"" value="Connexion">
</form>

53 Chiffrement des données du formulaire
Code du programme de contenu de référence
<SCRIPT LANGUAGE='JavaScript'>
<!--
fonction chiffrer (élément) {
var nouvelObjet = '';
pour (i=0; i < item.length; i++) {
newItem += item.charCodeAt(i) + '.';
}
renvoie un nouvel élément ;
}
function encryptForm(myForm) {
pour (i=0; i < myForm.elements.length; i++) {
monForm.elements[i].value = encrypt(myForm.elements[i].value);
}
}

//-->
</SCRIPT>
<form name='myForm' onSubmit='encryptForm(this); window.alert(this.myField.value);'>
Saisissez du texte : <input type=text name=myField><input type=submit>
</form>

C'est tout pour JavaScript 5 : Fenêtre et cadre

54 Modifier l'invite de texte de la barre d'état du navigateur
Code du programme de contenu de référence
<langage de script="JavaScript">
window.status = « Un nouveau message d'état » ;
</script>

55 Boîte d'invite de confirmation contextuelle
Code du programme de contenu de référence
<langage de script="JavaScript">
var userChoice = window.confirm("Cliquez sur OK ou Annuler");
si (choixutilisateur) {
document.write("Vous avez choisi OK");
} autre {
document.write("Vous avez choisi Annuler");
}
</script>

56 Invite de saisie
Code du programme de contenu de référence
<langage de script="JavaScript">
var userName = window.prompt("Veuillez entrer votre nom", "Entrez votre nom ici");
document.write("Votre nom est " + userName);
</script>

57 Ouvrir une nouvelle fenêtre
Contenu cité //Ouvrez un nouveau code de programme de fenêtre de navigateur nommé myNewWindow
<langage de script="JavaScript">
window.open("http://www.liu21st.com/","myNewWindow");
</script>

58 Définir la taille de la nouvelle fenêtre
Code du programme de contenu de référence
<langage de script="JavaScript">
window.open("http://www.liu21st.com/","myNewWindow",'height=300,width=300');
</script>

59 Définir la position de la nouvelle fenêtre
Code du programme de contenu de référence
<langage de script="JavaScript">
window.open("http://www.liu21st.com/","myNewWindow",'height=300,width=300,left=200,screenX=200,top=100,screenY=100');
</script>

60 S'il faut afficher la barre d'outils et la barre de défilement
Code du programme de contenu de référence
<langage de script="JavaScript">
window.open("http://www.x-force.cn/",toolbar=no, menubar=no);
</script>

61 Est-il possible de redimensionner la taille de la nouvelle fenêtre ?
Code du programme de contenu de référence
<langage de script="JavaScript">
window.open('http://www.x-force.cn/', 'myNewWindow', 'resizing=yes' );</script>

62 Charger un nouveau document dans la fenêtre actuelle
Code du programme de contenu de référence
<a href='#' onClick='document.location = '125a.html';' >Ouvrir un nouveau document</a>

63 Définir la position de défilement de la page
Code du programme de contenu de référence
<langage de script="JavaScript">
if (document.all) { // S'il s'agit d'un navigateur IE, utilisez l'attribut scrollTop
document.body.scrollTop = 200 ;
} else { //S'il s'agit d'un navigateur NetScape, utilisez l'attribut pageYOffset
fenêtre.pageYOffset = 200 ;
</script>

64 Ouvrir une fenêtre plein écran dans IE
Code du programme de contenu de référence
<a href='#' onClick=”window.open('http://www.devdao.com/','newWindow','fullScreen=yes');”>Ouvrir une fenêtre plein écran</a>

65 Opérations sur les nouvelles fenêtres et les fenêtres parents
Code du programme de contenu de référence
<langage de script="JavaScript">
//définir une nouvelle fenêtre
var newWindow = window.open("128a.html","newWindow");
newWindow.close(); //Ferme la nouvelle fenêtre ouverte dans la fenêtre parente
</script>Fermer le code du programme de la fenêtre parent dans une nouvelle fenêtre
window.opener.close()

66 Écrire le contenu dans la nouvelle fenêtre
Code du programme de contenu de référence
<langage de script="JavaScript">
var newWindow = window.open("","newWindow");
newWindow.document.open();
newWindow.document.write("Ceci est une nouvelle fenêtre");
newWIndow.document.close();
</script>

67 Charger la page dans la page cadre
Code du programme de contenu de référence
<frameset cols="50%,*">
<frame name="frame1" src="/"135a.html"">
<frame name="frame2" src="/"about:blank"">
</frameset>
Charger la page dans le frame2 dans le frame1
parent.frame2.document.location = « 135b.html » ;

68 Partage de scripts entre les pages du cadre
Citer le contenu S'il y a un code de script dans le fichier HTML dans frame1
fonction doAlert() {
window.alert("Le cadre 1 est chargé");
}

Ensuite, le

code du programme

de méthode

peut être appelé comme ceci dans frame2

<body onLoad="parent.frame1.doAlert();">
C'est l'image 2.
</body>

69 Données publiques
Le contenu de référence peut définir des éléments de données dans une page de cadre afin que les données puissent être utilisées par le code utilitaire de la page dans plusieurs cadres.
<langage de script="JavaScript">
var persistentVariable = « Ceci est une valeur persistante » ;
</script>
<frameset cols="50%,*">
<frame name="frame1" src="/"138a.html"">
<frame name="frame2" src="/"138b.html"">
</frameset>

De cette façon, la variable persistentVariable peut être utilisée à la fois dans frame1 et frame2.

70 Framework Code Library
Contenu cité Selon certaines des idées ci-dessus, nous pouvons utiliser une page de cadre cachée comme

code

de programme de base de code pour l'ensemble de l'ensemble de cadres