LigneWeb : création de site web 3D : programmes3 JavaScript(spéciaux) pour XHTML.

Programmes JavaScript de LigneWeb...3

© LigneWeb ... /programmes 3.
© design : LigneWeb

© : alain jean deligne - LigneWeb

Programmes en JavaScript 3 :

Suivez-nous.

Le JavaScript est un language qui s'exécute sur votre ordinateur ...

... il faut donc activer ... le JavaScript ... sur votre ordinateur ...
... une aide existe sur le site ... MaBoite.qc.ca ...

   ©

Recherche sur : www.ligneweb.net

Remarque : ... en CSS2 et CSS3 ... :

pour cette page et non visible ... :
le fichier ... ligne21.css ... qui mélange du CSS 2 avec du CSS 3 ...
... et ceci grâce aux sélecteurs spécifiques ... expliqués au ... Cours CSS 3

Script 7 : recherche.

Un petit programme JavaSript :......pour ceux qui ont déjà les connaissances suffisantes ...
... vous pouvez demander des explications supplémentaires ...

... ici commence ... le script en application : ......C'est celui utilisé dans ce site......

Entrez votre recherche :
Google Yahoo Both

... ici se termine ... le script.
... Une alerte existe si nous ne choisissons pas de moteur de recherche ...
... ainsi que si nous ne choisissons pas de terme de recherche, ... cela est inclus dans le script ...

Passons à l'écriture dans un traitement de texte spécial, comme Smultron qui est un logiciel libre, ou TextWrangler pour Mac ... ou Notepad++ pour PC ...

Cette partie doit être mise à part appellé ... recherche.js
... c'est un fichier js qui n'est pas dans la page html ...
/* Created by: Ivan Iraola :: http://www.cybexmag.com */ function DoSearch() { var Flag = 0; if (document.ToolBox.SearchOption[0].checked==true) { var Flag = 1; var Engine = document.ToolBox.SearchOption[0].value; var Query = document.ToolBox.SearchBox.value; var locName = "http://www.google.com/search?hl=en&q="; if (Query == "") { alert("Marquez un terme de recherche, s'il vous plait. Merci."); return; } location.href = (locName + Query) } if (document.ToolBox.SearchOption[1].checked==true) { var Flag = 1; var Engine = document.ToolBox.SearchOption[1].value; var Query = document.ToolBox.SearchBox.value; var locName = "http://search.yahoo.com/search?p="; if (Query == "") { alert("Marquez un terme de recherche, s'il vous plait. Merci."); return; } location.href = (locName + Query) } if (document.ToolBox.SearchOption[2].checked==true) { var Flag = 1; var Engine = document.ToolBox.SearchOption[2].value; var Query = document.ToolBox.SearchBox.value; if (Query == "") { alert("Marquez un terme de recherche, s'il vous plait. Merci."); return; } var searchPage = "<HTML>"; searchPage += "\n"; searchPage += "<FRAMESET ROWS=\"50%,50%\">"; searchPage += "\n"; searchPage += "<FRAME SRC=\"http://www.google.com/search?hl=en&q=" + Query + "\">"; searchPage += "\n"; searchPage += "<FRAME SRC=\"http://search.yahoo.com/search?p=" + Query + "\">"; searchPage += "\n"; searchPage += "</FRAMESET>"; searchPage += "\n"; searchPage += "</HTML>"; document.write(searchPage); } if (Flag == 0) { alert("Merci de bien vouloir choisir un moteur de recherche."); } }

... Il sera appelé par cette phrase mise dans head : ...
<script type="text/javascript" src="date.js"> </script>

... et le reste du programme, sera placé ou il doit apparaître : ...
<div align="center"> <form name="ToolBox" style="line-height: 2em;"> Entrez votre recherche : <input type="text" name="SearchBox" size="22"> <br /> <input type="radio" name="SearchOption" value="Google">Google <input type="radio" name="SearchOption" value="Yahoo">Yahoo <input type="radio" name="SearchOption" value="Both">Both <button type="button" onclick="DoSearch()">Recherche</button> </form> </div> <p> <span style="color:black;">Ce petit programme est ... <b><em>protégé</em></b> ... par ce copyright :</span><br /><br /> ... <a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/2.0/be/deed.fr" title="contrat Ã voir" target="_blank">  © ... contrat Creative Commons  </a> ... </p> </div>

encodage du texte en ... utf-8 ...

Ce petit programme est ... protégé ... par ce copyright :

  © ... contrat Creative Commons

... Il faut faire un copier-coller sur votre page html à l'endroit voulu....
... les balises h3 et div doivent être adaptées ...

retour on/off | Retour au menu
Fin du septième script

Script 8 : menu On Off.

Un petit programme JavaSript :......pour ceux qui ont déjà les connaissances suffisantes ...
... vous pouvez demander des explications supplémentaires ...

... ici commence ... le script en application : ......C'est celui utilisé dans ce site......

... je ne peux pas le placer ici ... mais il est présent sur cette page ...
... dans l'en-tête sous l'image ... menu On ... qu'il faut cliquer pour le faire apparaître ...
... venant de la gauche ... et qu'on peut faire disparaître en recliquant sur l'image ... menu Off ...

... ici se termine ... le script.
... la place de ce script doit impérativement être placé après le contenu ...
... de la zone ... menu ... donc entre les balises ...</menu>... (balise sortante) et ... <corps> ... (balise entrante) ...

... passons à l'écriture dans un traitement de texte spécial, ...
... comme Smultron qui est un logiciel libre, ou TextWrangler pour Mac ... ou Notepad++ pour PC ...

... ce script demande ... deux images, ... je vous donne les miennes ... ou vous en faites d'autres ...
... il faut les prendrent en cliquant dessus et les faire glisser sur votre bureau ...
... les images qui sont sur cette page ... ( il n'y a pas de © ) ...

Cette partie doit être mise dans ... head ...
<style> #menuShow{ color: #ffff80; border: 1px solid #000066; background-color: #3399bb; padding: 13px; font-size: 13px; font-family: Verdana, Arial; position: absolute; width: auto; height: auto; } #menuSelect{ border: 0px solid #000066; background-color: #3399bb; padding: 13px; font-size: 13px; font-family: Verdana, Arial; position: absolute; width: auto; height: auto; } </style>

... actuellement, on fait appel à ce script ... menuonoff.css ... placé en externe ...
... appel se mettant dans le head ...
<link rel="stylesheet" type="text/css" href="menuonoff.css" />

... cette deuxième partie sera placée à la fin de toutes les données ...et ...
... juste après la zone ... menu ... après la balise ... </menu> ... imparérativement ...
... et avant la balise ... <corps> ...
... l'appel de menu.js se fait en final de cette partie ...
<div id="menuSelect" align="center"><a href="#" onClick="moveOnMenu();moveOffSelector()"><img src="icone1.gif" width="36" height="38" border="0"></a> </div> <div id="menuShow" style="color:#ffff80;"> <a href="#" onClick="moveOffMenu();moveOnSelector()"><img src="icone2.gif" width="36" height="38" border="0"></a> <br /> <br /> * Tous les scripts ...<br /> * <a href="programmes.html#script1">script 1: écriture de texte.</a><br /> * <a href="programmes.html#script2">script 2: défilement de texte.</a><br /> * <a href="programmes.html#script3">script 3: défilement de texte.<;/a><br /> * <a href="programmes2.html#script4">script 4: votre navigateur.</a><br /> * <a href="programmes2.html#script5">script 5: défilement de nouvelles.</a><br /> * <a href="programmes2.html#script6">script 6: la date.</a><br /> * <a href="programmes3.html#script7">script 7: recherche.</a><br /> * <a href="programmes3.html#script8">script 8: menu On Off.</a><br /> </div> <script type="text/javascript" langage="JavaScript" src="menu.js"> </script> <noscript>ceci est un menu pour le cours html</noscript>

... cette troisième partie est un fichier extérieur à la page html ...
... son nom est ...menu.js ... pour notre site


... cette dernière partie n'est plus actuellement placée en fin ... mais sur le côté droit ...

... cette dernière partie sera placée juste avant le pied de page ...
... pour faire un retour au menu On Off dans l'en-tête ...
<p align="left"><a href="programmes3.html"> <img src="icone1.gif" /> retour </a> </p>

encodage du texte en ... utf-8 ...

Ce petit programme est ... protégé ... par ce copyright :

  © ... contrat Creative Commons

... Il faut faire un copier-coller sur votre page html à l'endroit voulu....
... ce menu se montrera au dessus des zones définies ...
... voir les astuces et remarque ci-dessous ...

... dernière partie remplacée par celle-ci ...
... juste placée après l'ouverture de la balise ...body ...
... nous avons ici en deuxième lieu ... le lien ... down ...

<body id="haut">  <div class="on" style="margin-top:300px;"><a href="#haut"><img src="icone1.gif" /></a> </div> <div class="on" style="margin-top:440px;"><a href="#pied_de_page" title="Contenu essentiel du site"><img src="bas.gif" /></a> </div> ...

... voir aussi les ... astuces ... suivi de la remarque ...

retour on/off | Retour au menu
Fin du huitième script

Script 9 : vérification Formulaire.

Un petit programme JavaSript :......pour ceux qui ont déjà les connaissances suffisantes ...
... vous pouvez demander des explications supplémentaires ...

... ici commence ... le script en application : ......C'est celui utilisé dans ce site......

... nous proposons le script qui permet ... d'envoyer un formulaire par E-Mail ...
... il n'est pas visible mais se trouve sur la page ... contact ... ou se trouve le formulaire ...

... on appelle ce fichier en poussant sur le bouton ... envoyer ...
... il vérifie si l'E-Mail est bien écrit ...

... ici se termine ... le script ...

... passons à l'écriture dans un traitement de texte spécial, ...
... comme Smultron qui est un logiciel libre, ou TextWrangler pour Mac ... ou Notepad++ pour PC ...

... ce script est externe à la page ... il est donc appelé ...
...pour l'envoi, on vérifie que l'E-Mail est correct ...
...si non, une alerte est donnée ... et si oui, le formlaire ouvre l'application Mail dans laquelle se trouve le formulaire remplis avec l'adresse mail ...

Cette partie doit être mise dans ... head ...
<script type="text/javascript" language="JavaScript" src="formulaire.js"> </script>

... le nom du fichier ... .js ... est ... formulaire.js ...
... le nom de la ... fonction ... demandée est ... formulaire1 ...

Le fichier externe :


encodage du texte en ... utf-8 ...

Ce petit programme est ... protégé ... par ce copyright :

  © ... contrat Creative Commons

... le nom du fichier de ce script est ... formulaire.js ...
... c'est lui qu'on appelle dans ...head ...

...l'appel de la fonction ... VerifForm ... se fait dans la balise ... input ...type ... submit ... du formulaire ...
... avec le ...name ... de la fonction du formulaire qui est ... formulaire1 ...
...et qui donne (pour rappel) ...

<input type="button" value="Envoyez !" onClick="VerifForm(formulaire1);" />

retour on/off | Retour au menu
Fin du neuvième script

Des astuces pour le menu on/off :

... qu'elle est la logique dans cette position ? ... ce menu ne dépend pas des différentes zones ...
... il est définit par rapport aux côtés de la page ... voire même de l'écran ...
... ces données peuvent être changées ... dans le script ... menu.js ...
... les mesures étant prises par rapport au coin supérieur gauche ...

... pour que ce script puisse fonctionner correctement, ...
... il faut impérativement placer ... la partie texte suivi de l"appel du script ...
... entre le menu et le corps de la page web ...

Retour au menu

Remarque :

... dans le menu ... On/Off ...
... nous avons à faire à un script spécial ... car sa place est particulière ...

... design 3 D ...
... fenêtre sur l'univers ...             © design : LigneWeb - © Apple

⬅ Page précédente | Retour au menu

Des logiciels en
téléchargement :

Présentation :

Programmes JavaScript de LigneWeb...3

Programmes en JavaScript 3 :

Script 7 : recherche.

Script 8 : menu On Off.

Script 9 : vérification Formulaire.

Des astuces pour le menu on/off :

Remarque :

... design 3 D ...

Des logiciels en téléchargement :