--- title: Bac à sable slug: Sandbox tags: - Entraînement - Pratique translation_of: Sandbox ---

Ceci est ma première modification!! Ceci est un test. 

<p id="demo">The Date is: </p>

document.getElementById("demo").innerHTML = Date();

{{EmbedLiveSample('jsdatesample')}}

Échantillon de contenu HTML

{{EmbedLiveSample('file')}}

exemple de code

HTML

<div id="kiki"></div>

CSS

#kiki { background-color: #FD0; }

JavaScript

let madiv= document.getElementById("kiki"); madiv.appendChild(document.createTextNode("Salut"));

Résultat

{{EmbedLiveSample('exemple_de_code')}}

Mettre en gras un élément

Mettre en gras un élément avec HTML

<p>Je suis en <strong>gras</strong></p>

{{ EmbedLiveSample("Mettre_en_gras_un_élément_avec_HTML") }}

Contenu CSS

@ Compteur de style fisheye {
  système: cyclique;
  symboles: ◉;

<h1>CSS font-family</h1>
<p class="serif">Ceci est un paragraphe, affiché dans la fonte Times New Roman.</p>
<p class="sansserif">Ceci est un paragraphe, affiché dans la fonte Arial.</p>
.liste {
    list-style: fisheye, cercle;
}

Bonjour le monde

HTML

<p>Bonjour <strong>le monde</strong></p>

{{EmbedLiveSample ( 'Linux is life')}}

Linux logo

logo couleur MDN (bleu)

Des trucs

Une note 

Un avertissement dans une note

Une note dans un avertissement dans une note

Ceci est un example de comment utiliser le MDN!

π×1=1×π=2π÷π=π\ Pi \ times 1 = 1 \ times \ pi = 2 \ pi \ div \ pi = \ pi

ππππππ\ Pi \ frac {\ pi} {\ pi} \ frac {\ frac {\ pi} {\ pi}} {\ pi}

ππππππ\ Pi \ frac {\ pi} {\ pi} \ frac {\ frac {\ pi} {\ pi}} {\ pi}

∫limjets13e3/XX2réX\ Int \ limits_ {1} ^ {3} \ frac {e ^ 3 / x} {x ^ 2} \, dx

∫ln(x) dx = x[ln(x) - 1]l\ Int \ limits_ {1} ^ {3} \ frac {e ^ 3 / x} {x ^ 2} \, d+x

abcdefghijklmnopqrstuvwxyz\alphabet

πest un nombre irrationnel, et cela est le rapport entre la circonférence d'un cercle à son diamètre. Il est communément approchée comme 3,14159.\ pifacts {3}

contenu

Tester un échantillon en direct

Contenu HTML

<p>Bonjour le monde coochie</p>

Resultat

{{ EmbedLiveSample('Test live sample') }}

Orienter le curseur dans le champ de texte

Contenu HTML

<input type="text" id="monChampDeTexte" value="Champ de texte.">
<p></p>
<button type="button" onclick="focusMethod()">Clique moi pour orienter le curseur sur le champ de texte!</button>

Contenu CSS

Échantillon de Contenu CSS

Contenu JavaScript

focusMethod = function getFocus() {
  document.getElementById("monChampDeTexte").focus();
}

Result

{{ EmbedLiveSample('Focus_on_a_text_field') }}

Cliquer un  bouton

Contenu HTML

<button type="button" id="monBouton">Clique Moi!</button>
<p></p>
<button type="button" onclick="focusMethod()">Clique moi pour orienter le curseur vers !</button>

Contenu CSS

Échantillon de contenu CSS

Contenu JavaScript

focusMethod = function getFocus() {
  document.getElementById("monBouton").focus();
}

Resultat

{{ EmbedLiveSample('Focus_on_a_button') }}