Zoorta

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <style> .infoBox { border:solid 1px #BBCCDD; width:15em; } .
infoBoxHeader { background:#DAEAF0; cursor:pointer; text-align:center; font-weight:bold; } .infoBoxBody { background:#F0F7F4; } </style> <script> function toggle(idDetail) { var style = document.getElementById(idDetail).style; style.display = (style.display == "none") ? "" : "none"; } </script> </head> <body> <h1>Afficher/masquer</h1> <div class="infoBox"> <div class="infoBoxHeader" onclick="toggle('details')"> La mto </div> <div id="details" class="infoBoxBody" style="display:none"> Ici les donnes Mto <br />Temprature, ciel, vent </div> </div> </body> </html> +++++++++++++++++++++++++++++++++++ <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Calques et position</title> <meta http-equiv="Content-type" content="iso-8859-1" /> <style> div { border:solid 1px black; margin:1ex; padding:1ex; width:200px; } fieldset { padding:3px; } </style>
</head> <body onload="update()"> <form action="javascript:update()"> <table border="1" cellpadding="1" cellspacing="0"> <tr> <th>Position</th> <th>top</th> <th>left</th> <th>Visibility</th> <th>Display</th> <th>Div englobant</th> </tr> <tr> <td> <select id="position" onchange="update()" size="3"> <option value="static">static</option> <option value="relative">relative</option> <option value="absolute">absolute</option> </select> </td> <td> <input type="text" id="top" value="50" size="3" onchange="up date()" /> </td> <td> <input type="text" id="left" value="200" size="3" onchange=" update()" /> </td> <td> <select id="visibility" onchange="update()" size="2"> <option value="visible">visible</option> <option value="hidden">hidden</option> </select> </td> <td> <select id="display" onchange="update()" size="3"> <option value="block">block</option> <option value="inline">inline</option> <option value="none">none</option> </select> </td> <td> <select id="positionEnglobant" onchange="update()"> <option value="static">static</option> <option value="relative">relative</option> <option value="absolute">absolute</option> </select> </td> </tr> </table> <input type="button" value="Modifier" onclick="update()" /> </form> <div id="englobant" style="width:300px;left:100px;"> <div>1er div. avec du contenu</div> <div id="leDiv" style="background:#EEEEEE">2e div. avec son texte</div> <div>3e div. avec du contenu</div> </div> <script> function value(idChamp) { return document.getElementById(idChamp).value;
} function update() { var div = document.getElementById("leDiv"); div.style.position = value("position"); div.style.visibility = value("visibility"); div.style.display = value("display"); div.style.top = value("top"); div.style.left = value("left"); var containingBlock = document.getElementById("englobant"); containingBlock.style.position = value("positionEnglobant"); } </script> </body> </html> ++++++++++++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++++++++++++++++++++++++++ <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> #suggestion { border:solid 1px black; padding: 2px; background:white; position:absolute; display:none; } </style> </head> <body> Station : <input type="text" id="depart" size="10" /> <input type="button" value="Suggerer" onclick="suggerer()" /> <div id="suggestion"></div> <script> var values = ["Chatelet", "Gare de Lyon", "Orsay-Ville"]; function suggerer() { var suggest = document.getElementById("suggestion"); suggest.innerHTML = ""; var i, ele; for (i = 0; i < values.length; i++) { ele = document.createElement("div"); ele.innerHTML = values[i]; suggest.appendChild(ele); } suggest.style.display = "block"; } function positionner() { var suggest = document.getElementById("suggestion"); var champ = document.getElementById("depart"); suggest.style.left = getLeft(champ) + "px"; suggest.style.top = (getTop(champ) + champ.offsetHeight) + "px"; } function getLeft(element) { var offsetLeft = 0;
while (element != null) { offsetLeft += element.offsetLeft; element = element.offsetParent; } return offsetLeft; } function getTop(element) { var offsetTop = 0; while (element != null) { offsetTop += element.offsetTop; element = element.offsetParent; } return offsetTop; } positionner(); </script> </body> </html> ++++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++++++++++++++++++ <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> #suggestion { border:solid 1px black; padding: 2px; background:white; position:absolute; display:none; } </style> </head> <body> Dpart : <input type="text" id="depart" size="10" /> <input type="button" value="Suggerer" onclick="suggerer()" /> <select id="suggestion"></select> <script> var values = ["Chatelet", "Gare de Lyon", "Orsay-Ville"]; function suggerer() { var suggest = document.getElementById("suggestion"); while (suggest.childNodes.length > 0) { suggest.removeChild(suggest.firstChild); } // suggest.innerHTML = ""; var i, ele; for (i = 0; i < values.length; i++) { option = document.createElement("option"); option.innerHTML = values[i]; suggest.appendChild(option); } suggest.setAttribute("size", suggest.options.length); suggest.style.display = "block"; } function positionner() {
var suggest = document.getElementById("suggestion"); var champ = document.getElementById("depart"); suggest.style.left = getLeft(champ) + "px"; suggest.style.top = (getTop(champ) + champ.offsetHeight) + "px"; } function getLeft(element) { var offsetLeft = 0; while (element != null) { offsetLeft += element.offsetLeft; element = element.offsetParent; } return offsetLeft; } function getTop(element) { var offsetTop = 0; while (element != null) { offsetTop += element.offsetTop; element = element.offsetParent; } return offsetTop; } positionner(); </script> </body> </html> +++++++++++++++++++++++++++++++++++++++++++++++++++++ +++++++++++++++++++++++++++++++++++++++++++++++++++++ <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body onkeydown="setKey('down',event)" onkeyup="setKey('up',event)" onkeypress="setKey('press',event)" onload="document.getElementById('saisie').focus()"> <h1>Savoir quelle touche a t enfonce</h1> Champ pour tester la saisie : <input type="text" id="saisie" /> <table border="1" cellpadding="4" cellspacing="0"> <tr> <th>Evnement</th> <th>charCode</th> <th>keyCode</th> <th>Modifieurs</th> <th>Valeur du champ</th> </tr> <tr id="down"> <td>onKeyDown</td> <td></td> <td></td> <td></td> <td></td> </tr> <tr id="press"> <td>onKeyPress</td>
<td></td> <td></td> <td></td> <td></td> </tr> <tr id="up"> <td>onKeyUp</td> <td></td> <td></td> <td></td> <td></td> </tr> </table> <script> function setKey(eventName, aEvent) { var event = aEvent ? aEvent : window.event; var cells = document.getElementById(eventName).getElementsByTagName( "td"); var character = ""; if (event.charCode) { character = " : " + String.fromCharCode(event.charCode); } cells[1].innerHTML = event.charCode + character; character = ""; if (event.keyCode) { character = " : " + String.fromCharCode(event.keyCode); } cells[2].innerHTML = event.keyCode + character; var s = (event.ctrlKey) ? " Ctrl" : ""; s += (event.altKey) ? " Alt" : ""; s += (event.shiftKey) ? " Maj" : ""; cells[3].innerHTML = s; cells[4].innerHTML = document.getElementById("saisie").value; } </script> </body> </html> +++++++++++++++++++++++++++++++++++++++++++++++ +++++++++++++++++++++++++++++++++++++++++++++++ function inverse(zoba){ var n=zoba.length; var result=""; for (var i=0;i<n;i++) { result+=charAt(zoba,n-i); } return result; } log(inverse("CRAZY HORSE")); +++++++++++++++++++++++++++++++++++++++++++++ function Personne(prenom,nom){ this.prenom=prenom; this.nom=nom; } Personne.prototype.nomComplet=function(){ return this.prenom+" "+this.nom;}; Personne.prototype.envers=function(){ return inverse(this.nomComplet);};
function inverse(zoba){ var n=zoba.length; var result=""; for (var i=0;i<n;i++) { result+=zoba.charAt(n-i); } return result; } p1=new Personne("Tryphon", "Tournesol"); log(p1.envers); log(inverse("CRAZY HORSE")); ++++++++++++++++++++++++++++++++++ <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> <script type="text/javascript"> document.write('<table border="1">'); for (y = 0; y <= 5; y++) { document.write("<tr>"); for (x = 1; x <= 10; ++x) { if (y == 0) { document.write("<th>" + (x * (y+1)) + "</th>"); } else { document.write("<td>" + (x * y) + "</td>"); } } document.write("</tr>"); } document.write("</table>"); </script> <br /> Some text after the Javascript </body> </html> +++++++++++++++++++++++++++++++++++++++ +++++++++++++++++++++++++++++++++++++++ <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> <script type="text/javascript"> if (confirm("This is a confirmation box")) alert("You clicked OK"); else alert("You clicked cancel"); </script> <br /> Some text after the Javascript </body> </html> ++++++++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++++++++++++++++++++++ <html xmlns="http://www.w3.org/1999/xhtml">
<head> </head> <body> <script type="text/javascript"> var name = prompt("Please enter your name", ""); document.write("Welcome " + name); </script> <br /> Some text after the Javascript </body> </html> +++++++++++++++++++++++++++++++++++++++++++++++ +++++++++++++++++++++++++++++++++++++++++++++++ <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> <a href="http://mykb.com" onclick="return confirm('Really navigate away from this page?');"> Knowlege Base software </a> <br /> Some text after the Javascript </body> </html> ++++++++++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++++++++++++++++++++++++ <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> <img src="images/ArrowRight.gif" onclick="alert(this.src);" /> <br /> Some text after the Javascript </body> </html> +++++++++++++++++++++++++++++++++++++++++++++++++++++++ +++++++++++++++++++++++++++++++++++++++++++++++++++++++ <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script> var isColorBleu = true; function ChangeMe(target) { isColorBleu = !isColorBleu; if (isColorBleu) target.src = "images/Bleu.gif"; else target.src = "images/Vert.gif"; } </script> </head> <body> <img src="images/Bleu.gif" onclick="ChangeMe(this);" /> <br /> Some text after the Javascript </body> </html> +++++++++++++++++++++++++++++++++++++++++++++++++++ +++++++++++++++++++++++++++++++++++++++++++++++++++
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript"> function addOption(optionText) { var objSelect = document.getElementById("mySelect"); var xx=""; for (i = 0; i < optionText.length; i++) { xx += optionText.charAt(i); objSelect[objSelect.length] = new Option(xx); } } </script> </head> <body> <select id="mySelect"></select><tb/> <input type="text" id="newOption" /> <input type="button" value="Add a new option to the drop-down" onclick="addOption(document.getElementById('newOption').value);" /> </body> </html> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++++++++++++++++++++++++++++++++++ <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript"> function ShowHide(elementId) { var element = document.getElementById(elementId); if (element.style.display != "block") { element.style.display = "block"; } else { element.style.display = "none"; } } function UpdateText(element) { if (element.innerHTML.indexOf("Show")!=-1) { element.innerHTML="Hide Details"; } else{ element.innerHTML="Show Details"; } } </script> </head> <body> <a href="javascript:void(0);" onclick="ShowHide('divDetails');UpdateText(this);"> Show Details </a> <div id="divDetails" style="display:none;"> Details Panel </div> </body> </html> ++++++++++++++++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++++++++++++++++++++++++++++++
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript"> function contextMenuClick(){ var objContextMenu=document.getElementById("contextMenu"); objContextMenu.style.left=event.clientX; objContextMenu.style.top=event.clientY; objContextMenu.style.visibility="visible"; } </script> </head> <body onload="window.status='It\'s a beautiful day';" oncontextmenu="contextMenuClick();return false;"> <div id="contextMenu" style="position:absolute;z-index:999; visibility:hidden;border:3px solid #000080; background-color:#4000C0;color:#FFFF00"> My excellent context menu </div> </body> </html> ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Great page</title> <script type="text/javascript"> var featuresLevel1 = ["HTML","XML"]; var featuresLevel2 = ["Core","HTML","XML","Stylesheets","CSS","CSS2","Views","Events","UI Events","MouseEvents","HTMLEvents","MutationEvents","Range","Traversal"]; document.write("<br />*** DOM Level 1 ***<br />"); showFeatureSupport(featuresLevel1,"1.0"); document.write("<br />*** DOM Level 2 ***<br />"); showFeatureSupport(featuresLevel2,"2.0"); // Generic function to loop through features and output feature supp ort test result function showFeatureSupport(featureArray,version) { for (var featCnt=0; featCnt < featureArray.length; featCnt++) { var feature = featureArray[featCnt]; var supportedFlag = document.implementation.hasFeature(featu re,version); document.write("Feature '" + feature + "': " + supportedFlag ); document.write("<br />"); } } </script> </head> <body> <script type="text/jscript"> document.write(featuresLevel1); document.write(featuresLevel2); </script>
</body> </html> +++++++++++++++++++++++++++++++++++++++++++++++++ +++++++++++++++++++++++++++++++++++++++++++++++++ <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DOM Tree Attributes</title> </head> <body> <h1>Atrribute Listing</h1> <p id="p1" align="center" width="90%">This is some paragraph text</p> <script type="text/javascript"> var p = document.getElementById("p1"); var attrCnt = p.attributes.length; document.write("<br />Number of attributes: #" + attrCnt + "<br />"); for (var cnt=0; cnt < attrCnt; cnt++) { var attr = p.attributes[cnt]; var val; if (attr.value == "") val = "[EmptyString]"; else val = attr.value; document.write("<br />Attribute: <i><b>" + attr.nodeName + "</b></i> has a value of <b>" + val + "</b>"); } </script> </body> </html> +++++++++++++++++++++++++++++++++++++++++++++++++++ +++++++++++++++++++++++++++++++++++++++++++++++++++ <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DOM Styles - Example 2</title> <style type="text/css"> p { text-align: center; } body { color: blue; } </style> </head> <body> <p id="p1" >Some paragraph Text</p> <div>This is some body text</div> <hr /> <script type="text/javascript"> document.write("Number of styleSheets: #" + document.styleSheets.len gth); var stylesheet = document.styleSheets[0]; // Check to see if we are operating in Internet Explorer if (stylesheet.rules) { document.write("<br />Internet Explorer detected.<br />"); // Map the standard DOM attributes and methods to the internet e xplorer // equivalents stylesheet.cssRules = stylesheet.rules; stylesheet.insertRule = function(ruleText, ruleIndex) {
this.addRule(ruleText, ruleIndex); }; stylesheet.deleteRule = function(ruleIndex) { this.removeRul e(ruleIndex); }; } // The p style rule document.write("<br /><br /> 1st Style rule (text-Align) value: " + stylesheet.cssRules[0].style.textAlign); // The body style rule document.write("<br /> 2nd Style rule (color) value: " + stylesheet.cssRules[1].style.color); alert("Deleting the body color style rule."); stylesheet.deleteRule(1); </script> </body> </html> ++++++++++++++++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++++++++++++++++++++++++++++++

Zoorta

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Zoorta

Hochgeladen von

Copyright:

Verfügbare Formate

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <style> .infoBox { border:solid 1px #BBCCDD; width:15em; } .

Das könnte Ihnen auch gefallen