Apprendre

Question

paoli

22 Sep 2020 à 10:36

Bonjour à toutes et à tous, autodidacte je voudrais apprendre le javascript, quelqu'un aurait un tuyau à me donner pour bénéficier d' un tuto gratos et bien fait.
Tous ceux que j' ai vu sont payants au bout de 10mn
Merci

Bongota

22 Sep 2020 à 11:13

Non, il y en a beaucoup, sans restrictions. Par exemple :
https://www.pierre-giraud.com/javascript-apprendre-coder-cours/introduction/
Un cours complet est un gros travail pour celui qui le propose. Le vendre ne serais-ce que 10 Euros n'est pas anormal. Maintenant, beaucoup laissent leurs idées en libre téléchargement, c'est leur choix.

parsimonhi

Modérateur

22 Sep 2020 à 15:27

Bonjour,

Débutant mais sachant déjà programmer ou pas ?

Connaissant l'anglais ou pas ?

Connaissant html et css ou pas ?

Sinon, tuto minimal ci-dessous :

1) Le code javascript se met entre les balises <script> et </script> à peu près n'importe où dans une page html.

<script>
// Mettre ici du code javascript
</script>

On peut aussi le mettre dans un fichier à part (appelé par exemple monCode.js) et l'insérer dans la page html via :

<script src="monCode.js"></script>

On peut aussi le mettre comme valeur de certains attributs de balises html, comme par exemple, pour déclencher une action après un click sur un bouton :

<button onclick="alert(coucou);">Cliquez moi</button>

2) Dans un code javascript, on déclare essentiellement des variables et des fonctions, et le code sert à manipuler ces variables et ces fonctions. Il y a aussi des fonctions prédéfinies.

Pour déclarer des variables :

var a,b;

Pour leur donner des valeurs :

a=1;
b=2;

Pour déclarer une fonction :

function ajouter(a,b){return a+b;}

Pour utiliser une fonction :

var c;
c=ajouter(a,b);

3) Le javascript sert essentiellement à modifier quelque chose dans la page (il peut aussi servir du côté du serveur, mais c'est un autre sujet).

Pour cela on manipule ce que l'on appelle le DOM (c'est à dire en simplifiant un peu les éléments html qui sont dans la page). Pour accéder à un élément dont on connait l'id (par exemple "contenu"), on utilise :

var e;
e=document.getElementById("contenu");

La variable e est un objet qui contient alors une référence vers l'élément HTML ayant comme id "contenu".

Supposons que l'on ait dans la page l'élément html suivant :

<div id="contenu"></div>

Si l'on veut afficher le résultat d'une addition dans ce <div>, on met en fin de page le code javascript suivant :

var a,b,c,e;
a=1;
b=2;
function ajouter(a,b){return a+b};
c=ajouter(a,b);
e=document.getElementById("contenu");
e.innerHTML=c;

La propriété innerHTML de l'objet e représente le contenu de l'objet e (qui lui-même est une référence vers l'élément HTML d'id "contenu".

Et voilà ! On peut maintenant dire qu'on connait le Javascript. Le reste, ce n'est que du bonus. On le découvre au fur et à mesure des besoins en allant chercher dans les documentations et les exemples déjà publiés sur le web pour résoudre les problèmes qu'on se pose à un instant donné !

Un page complète :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Test</title>
<style>
#contenu
{
	font-size:20em;
	text-align:center;
}
</style>
</head>
<body>
<div id="contenu"></div>
<script>
var a,b,c,e;
a=1;
b=2;
function ajouter(a,b){return a+b;}
c=ajouter(a,b);
e=document.getElementById("contenu");
e.innerHTML=c;
</script>
</body>
</html>

Amicalement,
Modifié par parsimonhi (22 Sep 2020 - 15:32)

Sujet clos

JavaScript, DOM et API Web HTML5

Apprendre