initiation js

Initiation Javascript

BeCode Liège

Par Monsieur Nico

Qu'est ce que Javascript ?

JavaScript est un langage de programmation puissant orienté objet, utilisé pour l'interactivité des pages web et améliorant grandement l'expérience utilisateur. Il est présent sur tous les supports et navigateurs d'aujourd'hui. JavaScript peut aussi bien s'utilisé côté client, que côté serveur.

NB : Ne pas confondre Javascript et Java !

Quelques exemples :

• Kikk festival

• Google Earth

• Cookie clicker

• https://play.gl/

• Projet réalisé par des apprenants de BeCode : https://mwenbwa-jepsens-4-27.herokuapp.com/

Le programme

04. Le DOM

01. Premier hack !

07. Les arrays

05. Les conditions

02. Orga ses fichiers

08. Les fonctions

09. Les objets

06. Les loops

03. Les variables

01. premier hack !

Utilise la console

• mathématiques
• afficher string
• alert()
• console.log()
• prompt()
• document.write()

Ouvrir la console : CTRL + Shift + J

+ info

02. Organiser ses fichiers

Plusieurs fichiers

Comment lier le html avec le JS ?

Quand tu crées une page web, il n'y a pas qu'un seul fichier à afficher. Il y en a plusieurs qui intéragissent ensemble pour donner le rendu et les fonctionnalités de la page web.

On lie un fichier JavaScript à un document HTML via la balise <script>

• Utilise un éditeur de texte
• crée un fichier .html
• crée un dossier assets
• crée un dossier js et css
• insère des fichiers .js et .css dedans
• lie les 2 fichiers au .html

03. Variables

Définition

Une variable est un conteneur qui permet de stocker des données dans votre programme

Types de variables

• number
• boolean
• string
• array
• object
• function

+ info

04. Le DOM

Définition

Le Document Object Model représente le document HTML comme un ensemble de nœuds et d'objets possédant des propriétés et des méthodes. Les nœuds peuvent également avoir des gestionnaires d'événements qui se déclenchent lorsqu'un événement se produit. Cela permet de manipuler des pages web grâce à du JavaScript.

+ info

04. Le DOM

Manipuler le DOM

La méthode querySelector() de l'interface Document retourne le premier Element dans le document correspondant au sélecteur - ou groupe de sélecteurs - spécifié(s).

Exemple :const el = document.querySelector("#id");

+ info

05. Les conditions

Exemple :

En résumé

const answer = prompt("Quelle est la réponse à tout ?")If (answer == "?") {console.log("C'est correct!")}

On peut résumer une condition ainsi :"Si c'est vrai, fais ceci.."

+ info

06. Les boucles

Définition

En programmation, une boucle ou loop permet de répéter une action un certain nombre de fois jusqu'à ce qu'une certaine condition soit atteinte.

+ info

07. Les Arrays

J'adore cette variable

Elle permet de stocker plusieurs données dans un tableau.

+ info

08. Les fonctions

Définition

Les fonctions sont une collection de code. Elles vous permettent de créer du code que vous pourrez ré-utiliser, encore et encore. Elles rendent les programmes + simple et + petits à écrire.

+ info

09. Les objets

Définition

Un objet est une collection de clés et de valeurs (string, number, array..). Si cette valeur est une fonction, elle est appelée méthode.

+ info

10. Conclusion

JavaScript, c'est cool !

Il y a encore beaucoup de choses à découvrir...Formez-vous sur des plateformes en ligne (OpenClassroom, Code Academy, Udemy, justjavascript.com ...) et réalisez des petits projets.

Thanks for you attention

Any question?