Détecte le support d'une fonctionnalité par le navigateur
🔎 <nom_fonctionalité> polyfill <navigateur_cible>Permet de faire fonctionner une version récente de javascript (ES6) sur un navigateur qui ne le supporte.
https://babeljs.io/<html>
<head>
<title>Ma Page</title>
<!-- Fichier de style qui sera chargé puis pris en compte -->
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div>Le contenu de ma page</div>
<!-- Fichier JavaScript qui sera chargé puis exécuté -->
<script type="text/javascript" src="main.js"></script>
<!-- JavaScript intégré au html, exécuté immédiatement -->
<script type="text/javascript">
// ici mon code javascript
</script>
</body>
</html>href="css/styles.css" pour accéder à styles.css depuis index.htmlsrc="js/main.js" pour accéder à main.js depuis index.htmlbackground-image: url(../images/header.jpg) pour accéder à une image depuis styles.css
- projet/index.html
- projet/js/main.js
- projet/css/styles.css
- projet/images/<fichiers images>
var domElement = document.querySelector('#someId'); pour obtenir la référence d'un nœud du DOM.#id, .class).domElement.addEventListener('click', nomDUneFonction); pour qu'une fonction soit appelée automatiquement lors d'un clic. La fonction devra être déclarée pour que cela
fonctionne.
domElement.addEventListener('click', function() {/* instruction */}); pour exécuter des instructions sans nommer une fonction.node.classList.toggle("myClassName");body {
background-color: white;
color: black;
}
body.dark {
background-color: black;
color: white;
}function toggleTheme() {
document.body.classList.toggle('dark');
}
document.querySelector('.themeButton').addEventListener('click', toggleTheme);<button class="themeButton">Changer de thème</button>.fromLeft {
opacity:0;
transform: translate(-100px, 0);
transition: transform 150ms ease-out, opacity 150ms ease-out;
}
.fromLeft.visible {
opacity:1;
transform: translate(0, 0);
}function slideFromLeft() {
var elementArray = document.querySelectorAll('.fromLeft');
for (var i = 0; i < elementArray.length; i++) {
elementArray[i].classList.toggle('visible');
}
}
document.querySelector('.slideButton').addEventListener('click', slideFromLeft);<button class="slideButton">Slide des éléments</button>
<!-- Ailleurs -->
<div class="fromLeft">Mon élément</div>
<div><img class="fromLeft" src="uneImage.jpg" alt=""></div>.spinButton {
transition: transform 0.5s ease-in;
}
.spinButton:active {
transform: rotate(270deg);
}
.spinButton.easeout {
transition: transform 0.5s ease-out;
}<button class="spinButton">Click me ! Ease-in</button>
<button class="spinButton easeout">Click me ! Ease-out</button>@keyframes alwaysSpinButtonAnimation {
from {transform: rotate(0deg);}
50% {transform: rotate(90deg);}
to {transform: rotate(360deg);}
}
.alwaysSpinButton {
animation-name: alwaysSpinButtonAnimation;
animation-duration: 1s;
animation-iteration-count: 10;
animation-timing-function: linear;
}<button class="alwaysSpinButton">Click me !</button>