Exemple vu en classe
Transcription
Exemple vu en classe
24/03/2015 html-ex In [11]: %%HTML <style> .gras {font-weight: bold; font-size:12pt;} </style> <ul> <li class="gras"> Premier item </li> <li> Deuxième item </li> </ul> Premier item Deuxième item In [12]: %%HTML <script> function myFunction() { var x = document.getElementById("demo"); x.style.fontSize = "25px"; x.style.color = "red"; } </script> <style> .gras {font-weight: bold;} </style> <ul> <li class="gras"> Premier item </li> <li class="gras" id="demo"> Deuxième item </li> </ul> <button type="button" onclick="myFunction()">Un bouton</button> Premier item Deuxième item Un bouton http://localhost:8888/notebooks/html-ex.ipynb# 1/8 24/03/2015 html-ex In [14]: %%HTML <script> function myFunction() { document.getElementById("demo2").innerHTML = "<li> Troisième item </ } </script> <style> .gras {font-weight: bold;} </style> <ul> <li class="gras" onmouseover="myFunction()"> Premier item </li> <li id="demo"> Deuxième item </li> <div id="demo2"></div> </ul> <button type="button" onclick="myFunction()">Ajout</button> Premier item Deuxième item Ajout http://localhost:8888/notebooks/html-ex.ipynb# 2/8 24/03/2015 html-ex In [4]: %%HTML <script> function loadXMLDoc() { var xmlhttp; xmlhttp=new XMLHttpRequest(); xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("demo3").innerHTML=xmlhttp.responseText } document.getElementById("demo4").innerHTML="<li> réponse : " + xmlhttp "<br/>ready: " + xmlhttp.readyState + "<br/>statut: " + xmlhttp.status } //xmlhttp.open("GET","http://www.w3schools.com/Ajax/demo_get.asp",true xmlhttp.open("GET","http://localhost/~michel/LOG2420/Seances/Web/demo-aj xmlhttp.send(); } </script> <ul> <h2>AJAX / HXMLHttpRequest</h2> <li class="gras"> Premier item </li> <li id="demo"> Deuxième item </li> <div id="demo3"></div> <div id="demo4"></div> </ul> <button type="button" onclick="loadXMLDoc()">Requête</button> AJAX / HXMLHttpRequest Premier item Deuxième item Requête In [18]: %%HTML <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"> <html> <head> <script> function menu(elem, type) { var noeudUL =document.getElementById(elem); var liElem = noeudUL.getElementsByTagName('li'); document.getElementById("messages").innerHTML="Trouvé <" + liElem for(var i = 0; i < liElem.length; i++) { liElem[i].style.cssFloat=type; } document.getElementById("messages").innerHTML=("Modifié " + liElem } http://localhost:8888/notebooks/html-ex.ipynb# 3/8 24/03/2015 html-ex } </script> <style> ul { list-style-type:none; margin:0; padding:0; overflow:hidden; } li { float:left; } a{ display:block; width:100px; background-color:#dddddd; } #adapt { background-color:#ddffff; } </style> </head> <body> <h2>Navigation horizontale ou verticale</h2> <ul id="menuex"> <li><a href="#HTML">HTML</a></li> <li><a href="#XML">XML</a></li> <li><a href="#JavaScript">JavaScript</a></li> <li><a href="#XSL">XSL</a></li> </ul> <div id="adapt"> <p style="font-weight: bold;"> Propriété float des éléments de navigatio <p>Éléments <LI> :</p> <button type="button" onclick="menu('li', 'left')">Gauche</button> <button type="button" onclick="menu('li', 'right')">Droite</button> <br> <button type="button" onclick="menu('li', 'none')">Vertical</button <p>Éléments <LU> :</p> <button type="button" onclick="menu('menuex', 'left')">Gauche</button <button type="button" onclick="menu('menuex', 'right')">Droite</button <br> <button type="button" onclick="menu('menuex', 'none')">Vertical</button </div> <div id="messages"> </div> <h3 id="HTML">HTML</h3> <p>La structure du document est en HTML.</p> http://localhost:8888/notebooks/html-ex.ipynb# 4/8 24/03/2015 html-ex <p>La structure du document est en HTML.</p> <h3 id="XML">XML</h3> <p>La syntaxe du HTML est décrite en XML-DTD.</p> <h3 id="JavaScript">JavaScript</h3> <p>Le comportement est implémenté en JavaScript.</p> <h3 id="XSL">XSL</h3> <p>XSL est une option d'adaptation de contenu.</p> <p style="margin-bottom:1000px"> </body> Navigation horizontale ou verticale HTML XML JavaScript XSL Propriété float des éléments de navigation : Éléments <LI> : Gauche Droite Vertical Éléments <LU> : Gauche Droite Vertical HTML La structure du document est en HTML. XML La syntaxe du HTML est décrite en XMLDTD. JavaScript Le comportement est implémenté en JavaScript. XSL XSL est une option d'adaptation de contenu. http://localhost:8888/notebooks/html-ex.ipynb# 5/8 24/03/2015 http://localhost:8888/notebooks/html-ex.ipynb# html-ex 6/8 24/03/2015 html-ex In [17]: %%HTML <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.m <script> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); </script> <p> Un paragraphe </p> <p> Un paragraphe 1 </p> <p> Un paragraphe 2</p> <p> Un paragraphe 3</p> Un paragraphe Un paragraphe 1 Un paragraphe 2 Un paragraphe 3 In [18]: %%HTML <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.m <script> $(document).ready(function(){ $("#p1").click(function(){ $("#p2").hide(); }); }); </script> <p id="p1"> Un premier paragraphe </p> <p id="p2"> Un second paragraphe </p> Un premier paragraphe Un second paragraphe La requête cidessus ne fonctionne pas et retourne un statut de 0. Il y a une interaction avec le IPythonNotebook et les requêtes. Mais la requête locale avec le même code fonctionne : localhost/~michel/demoajax.html http://localhost:8888/notebooks/html-ex.ipynb# 7/8 24/03/2015 http://localhost:8888/notebooks/html-ex.ipynb# html-ex 8/8