bruno-js

[bruno-js]

Online Javascript

petit snippet rapide qui permet de savoir si votre navigateur est connecté ou non à internet, et ainsi adapter le contenu de la page en fonction

if(window.navigator.onLine){

console.log("you are online"); }

else{

console.log("you are offfline");

}

[bruno-js]

Quelle utilisation pour Javascript

Je vais vous parler ici des différentes utilisations que l'on peut faire du JS :)

Tout d'abord, JavaScript peut être utilisé pour ajouter du contenu dynamique et interactif à une page HTML. Cela peut être une simple alerte en popup, ou bien en plus complexe un jeu interactif qui s’exécute dans le navigateur. Pour coder du JavaScript dans une page HTML, il faut utiliser une balise HTML « text/javascript ». Cet élément peut alors contenir du code JavaScript qui sera exécuté lorsque la page HTML est chargée.

L'exécution du code se fait en fonction de son placement dans la page. Si le code est placé dans le head, alors l'exécution se fera avant le chargement du body. Inversement, si le code est placé en fin de body, alors le navigateur affichera les éléments de la page avant d'exécuter le code JS.

JavaScript est l’un des langages de programmation les plus populaires pour coder des applications web. Il est utilisé pour créer des fonctionnalités d’interface utilisateur interactive telles que la validation des formulaires, des menus déroulants et des mises à jour de contenu dynamiques, entre autres. Le code JavaScript est généralement intégré dans le code HTML, et est le plus souvent inclus dans une balise de script. JavaScript peut également être utilisé avec d’autres technologies, comme AJAX, pour créer des interfaces utilisateur plus complexes.

Pour coder le front d'applications web, il existe des frameworks, les plus populaires sont que React, Angular et Vue.js. Ces frameworks sont outillés grâce à des bibliothèques qui facilitent la création d’interfaces utilisateur (UIs) dans le frontend. Vous pouvez écrire du code qui est plus organisé, plus lisible et plus efficace pour le chargement dans le navigateur. Lorsqu’il est combiné avec HTML et CSS, JavaScript peut produire des expériences web visuellement attrayantes et interactives.

JavaScript peut être aussi être utilisé pour coder la partie backend des applications web et des webservices.

Cela est dû à la popularité croissante des frameworks basés sur JavaScript tels que Node.js et Express.js qui facilitent le développement d’applications back-end utilisant JavaScript.

Node.js fournit un environnement d’exécution pour les applications écrites en JavaScript ainsi que des dizaines de bibliothèques supportées par la communauté qui facilitent le développement de puissants services et applications web. Express.js offre quand à lui un cadre d’application facile à utiliser qui permet aux développeurs de créer rapidement et facilement des applications et des webservices en utilisant JavaScript. Ensemble, Node.js et Express.js fournissent aux développeurs les outils dont ils ont besoin pour créer des applications backend puissantes, évolutives et abordables.

Voilà pour une rapide overview de l'utilisation de Javascript dans le développement web :)

[bruno-js]

JS snippet

si on veut changer la taille de police de tout le texte contenu dans des paragraphes (<p>)

var pTags = document.querySelectorAll("p");

for (var i=0; i < pTags.length;i++) { pTags[i].style.fontSize = "16px"; }

[bruno-js]

Apprendre le JS

Changer la couleur d'un élément dont l'id est "example"..

// Select the element by its ID var exampleElement = document.getElementById("example");

// Change the font color to red exampleElement.style.color = "red";

simple non :) ?

[bruno-js]

apprendre le Javascript

Voici un autre exemple simple de manipulation de CSS en Javascript pour changer le contenu html d'une balise.

document.getElementById("myHeader").style.fontSize = "20px"; document.getElementById("myHeader").style.color = "green";

<h1 id="myHeader">This is a Header</h1>

Dans cet exemple, le script trouve l'élément avec l'id "myHeader" et change la taille de la police en 20 pixels en ajoutant la couleur verte sur le contenu de cette balise html

[bruno-js]

apprendre Javascript querySelector

Illustration de manipulation de CSS en JavaScript

// On selectionne l'élément avec l'id "title" let titleElement = document.querySelector('#title');

// On change la taille de la police à 19px titleElement.style.fontSize = '19px';

// On change la couleur de cet élément en #cc0000 titleElement.style.color = '#cc0000';

[bruno-js]

apprendre Javascript les bases

Pour commencer, voici une instruction simple en javascript pour récupérer le DOM d'un élément d'une page par son Id avec la méthode getElementById

var demo = document.getElementById("demo"); demo.innerHTML = "Hello World!";

Dans cet exemple, l'objet document est utilisé pour accéder au DOM. La méthode getElementById() est ensuite utilisée pour obtenir une référence à l'élément avec l'identifiant spécifié. Enfin, la propriété innerHTML de l'élément est défini sur une chaîne contenant le texte "Hello World!" (on remplace le contenu de l'élément par la chaine de caractère Hello World)

[bruno-js]

Welcome here !

salut, je suis Bruno

alors je vais me servir de ce blog pour partager des snippets en JS et CSS car je suis dev front, s'est ma passion et je vais vous la faire découvrir