docExemple vu en classe
download 
Plainte 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
