├── README.md ├── images ├── 2024-12-23.png ├── boucle.png ├── doc.png └── dom.png ├── index.html ├── js ├── lesson 1-7.js ├── lesson 10.js ├── lesson 11.js ├── lesson 12.js ├── lesson 13.js ├── lesson 14.js ├── lesson 8.js └── lesson 9.js ├── main.js └── styles.css /README.md: -------------------------------------------------------------------------------- 1 | # 🟣 Projet d’apprentissage des bases de JavaScript 🟣 2 | 3 | ## Ce projet a été conçu pour apprendre et pratiquer les concepts fondamentaux de JavaScript, le langage incontournable du web moderne. 🖥️✨ 4 | 5 | Objectifs du projet 6 | • Découvrir les bases du langage (variables, types, opérateurs, etc.). 7 | • Explorer les structures de contrôle (conditions, boucles). 8 | • Comprendre les fonctions et leur rôle essentiel dans JavaScript. 9 | • Travailler avec les tableaux et les objets. 10 | • Manipuler le DOM pour des interactions dynamiques avec les pages web. 11 | 12 | Public cible 13 | 14 | Ce dépôt est parfait pour : 15 | • Les débutants qui souhaitent se lancer dans JavaScript. 16 | • Ceux qui veulent renforcer leurs bases avant d’explorer des frameworks comme React, Vue ou Angular. 17 | • Les curieux du développement web ! 18 | 19 | Contenu 20 | 21 | Le projet est divisé en plusieurs modules : 22 | 1. Introduction : Premiers pas avec JavaScript. 23 | 2. Les bases : Variables, types de données, opérateurs. 24 | 3. Structures de contrôle : `If/else, boucles`. 25 | 4. Fonctions : Définition et utilisation. 26 | 5. Tableaux et Objets : Comprendre et manipuler les collections de données. 27 | 6. Manipulation du DOM : Apporter du dynamisme aux pages web. 28 | 29 | 30 | --- 31 | 32 | ## JS Basics 01 - Qu'est-ce que JavaScript 33 | 34 | JavaScript est un langage de programmation haut-niveau 35 | 36 | ECMAScript est le standard qui définit les règles et spécifications de JavaScript 37 | 38 | Tu peux utiliser JavaScript côté frontend et backend (grâce à NodeJS) 39 | 40 | --- 41 | 42 | 43 | ## JS Basics 02 - Syntaxe et concepts de base 44 | 45 | ### Comment ajouter du JS dans une page web? 46 | 47 | La première chose dont tu as besoin est une page HTML. Ouvre ton IDE préféré et crée un nouveau document HTML. À la fin de ce document, juste avant de fermer le tag ``, ajoutes un tag ` 62 | 63 | 64 | ``` 65 | C'est à cet endroit précis, entre les deux ` 72 | ``` 73 | Bien joué ! Tu as juste créé ton premier code Javascript! Si tu ouvres ton fichier index.html dans ton navigateur, tu ne dois rien voir de particulier. 74 | C'est normal, le message que tu as créé est uniquement visible dans la console du navigateur. 75 | 76 | ### Ajouter un fichier externe 77 | 78 | Comme avec CSS, il est recommandé d'écrire du Javascript dans un fichier `.js` séparé. 79 | 80 | Crée un nouveau fichier appelé `script.js`. Tu peux utiliser le nom de ton choix, mais par convention les fichiers JavaScript sont appelés `script.js`, `main.js` ou `index.js`. 81 | 82 | Ensuite, à l'intérieur de ce fichier , tu peux directement écrire du… Javascript ! (obviously 😏) 83 | ```bash 84 | console.log("Hello, World"); 85 | ``` 86 | Une fois que cela est fait, ajoute l'attribut src (comme tu ferais pour une image) à ta balise script et donne lui le chemin de ton fichier JS. 87 | 88 | ```bash 89 | 90 | ``` 91 | ### La console du navigateur 92 | 93 | Nos navigateurs web ont beaucoup d'outils tous plus fantastiques les uns que les autres, qui sont là pour nous aider à comprendre ce qui se passe dans nos applications. 94 | 95 | L'un d'eux est la console. 96 | La console va certainement être ton meilleur ami pour debugger tes programmes. C'est là où tu pourras voir les messages d'erreurs, les avertissements ou même des choses que tu essaies par toi même pour vérifier une hypothèse (par example : "je ne suis plus très sûr si "1" == 1 vaut true ou false" --> "je tape simplement cette expression dans la console de mon navigateur pour vérifier !") 97 | 98 | ### Syntaxe de base 99 | 100 | Le code Javascript se termine avec un point-virgule (semi-colon 🇬🇧 ) 101 | Le point-virgule indique la fin de la commande. 102 | 103 | Si tu oublies ce point-virgule, Javascript va automatiquement l'ajouter pour chaque retour à la ligne. C'est le mécanisme ASI (Automatic Semicolon Insertion). Mais il faut faire attention, en te fiant à ce mécanisme, tu peux rencontrer des erreurs qui seront alors difficile à repérer. 104 | 105 | ```bash 106 | console.log("Hello, world!"); 107 | console.log("Hi, world!"); 108 | ``` 109 | 110 | ### String 111 | 112 | Les strings en Javascript sont des chaînes de caractères. Elles doivent être entourées de guillemets (quotes 🇬🇧) (simple ou double)Les strings en Javascript sont des chaînes de caractères. Elles doivent être entourées de guillemets (quotes 🇬🇧) (simple ou double) 113 | ```bash 114 | console.log("Hello, world"); 115 | console.log('Hello, world'); 116 | ``` 117 | 118 | ### Console.log 119 | 120 | 121 | `console.log` est une fonction Javascript (on parlera un peu plus des fonctions dans un futur proche) 122 | 123 | Une fonction en Javascript est un bout de code réutilisable que l'on peut appeler pour effectuer certaines opérations. 124 | 125 | Le Javascript et le navigateur viennent avec tout un tas de fonctions intégrées, mais tu verras un peu plus tard que tu peux écrire tes propres fonctions. 126 | 127 | console.log est une de ces fonctions apportées par le navigateur à travers ce qu'on appelle les APIs web. 128 | Ces APIs web ne font pas partie des standards ECMAScript. 129 | 130 | Pour utiliser console.log, tu as juste besoin de mettre ton message entre les parenthèses. Et parce que ton message est un String, il doit être entre des guillemets. 131 | ```bash 132 | console.log("your message") 133 | ``` 134 | 135 | ### Différents types de messages 136 | 137 | On peut écrire du Javascript directement dans la console du navigateur pour tester du code. 138 | Il y a différents types de message de console. 139 | console.log est celui qu'on va utiliser le plus souvent, il affiche le message de la manière la plus simple. 140 | 141 | Mais il y a aussi: 142 | 143 | `console.info` ⇒ pour afficher des informations 144 | `console.error` ⇒ pour afficher des erreurs 145 | `console.warn` ⇒ pour afficher des avertissements 146 | 147 | ### Sensibilité à la casse 148 | 149 | Javascript est sensible à la casse. Écrire `console.log` et `console.Log` n'est pas la même chose ! 150 | Souviens-t'en pour éviter des erreurs bêtes 😏 151 | 152 | ### Écrire des commentaires 153 | 154 | Une chose importante en développement est de documenter ton code. 155 | Documenter ton code va le rendre plus lisible pour toi, mais aussi pour les autres développeurs qui peuvent être amenés à travailler dessus. 156 | Une façon de documenter est d'écrire des commentaires. 157 | 158 | Les commentaires de code ne seront pas affichés dans la page; Ils sont là juste pour toi, te permettre de prendre quelques notes ou pour expliquer ton code aux autres. 159 | 160 | Commentaire simple ligne: 161 | ```bash 162 | // This is a comment 163 | ``` 164 | Commentaire multiple lignes: 165 | ```bash 166 | /* This comment 167 | is on multiple lines */ 168 | ``` 169 | Commentaire pour documentation: 170 | ```bash 171 | /** 172 | * This comment 173 | * is used for 174 | * documentation 175 | */ 176 | ``` 177 | 178 | ### Opérations arithmétiques 179 | 180 | Javascript nous permet d'écrire des operations arithmétiques. 181 | Faisons un peu de maths avec Javascript (oui oui des maths !) 182 | 183 | Addition: 184 | ```bash 185 | 1 + 1 186 | // => 2 187 | ``` 188 | 189 | Soustraction: 190 | ```bash 191 | 2 - 2 192 | // => 0 193 | ``` 194 | 195 | Multiplication: 196 | ```bash 197 | 2 * 3 198 | // => 6 199 | ``` 200 | 201 | Division: 202 | ```bash 203 | 6 / 2 204 | // => 3 205 | ``` 206 | 207 | Modulo (donne le reste d'une division euclidienne): 208 | ```bash 209 | 6 % 2 210 | // => 0 211 | ``` 212 | 213 | ### Opération logiques : comparaisons (booléen) 214 | 215 | Tu peux aussi utiliser Javascript pour comparer des valeurs. 216 | Javascript te donnera une réponse qui vaudra soit true, soit false (on appelle cela un `booléen`). 217 | 218 | Valeur égale et type égal 219 | Dans ce cas, on va regarder si les valeurs sont strictement égales. 220 | Cela signifie que les valeurs et types sont les mêmes: 221 | ```bash 222 | 1 === 1; // true ✅ 223 | "Bob" === "Bob"; // true ✅ 224 | "Bob" === "bob"; // false ❌ 225 | 1 === "1"; // false ❌ 226 | ``` 227 | 228 | Valeur égale 229 | Dans ce cas, on regarde seulement si les valeurs sont égales: 230 | ```bash 231 | 1 == 1; // true ✅ 232 | 1 == "1"; // true ✅ 233 | ``` 234 | 235 | Différentes valeurs 236 | Dans ce cas, on regarde si les valeurs sont différentes: 237 | ```bash 238 | 1 != 2; // true ✅ 239 | 1 != "1"; // false ❌ 240 | ``` 241 | 242 | Valeur différente ou type différent 243 | 244 | Dans ce cas, nous vérifions si les valeurs ou le type sont différents: 245 | ```bash 246 | 1 !== "1" ; 247 | // true ✅ 248 | 249 | 1 !== 1 ; 250 | // faux ❌ 251 | ``` 252 | 253 | Supérieur à, supérieur ou égal 254 | Ici, on vérifie que la valeur est supérieure à une autre 255 | en ajoutant le symbole d'égalité `=` juste après le `>`, on peut vérifier si la valeur est supérieure ou égale: 256 | ```bash 257 | 2 > 1; // true ✅ 258 | 2 >= 2; // true ✅ 259 | ``` 260 | 261 | Ça fonctionne aussi dans l'autre sens avec le symbole inférieur `<`: 262 | ```bash 263 | 2 < 3; // true ✅ 264 | 2 <= 2; // true ✅ 265 | ``` 266 | 267 | Parfois, ton IDE (Integrated development environment, comme VSCode) va automatiquement indenter ton code pour toi. 268 | Cela dit, il est essentiel de savoir formater son code correctement ! 269 | Généralement, en JS, à chaque fois que tu ouvres des accolades (curly braces 🇬🇧), tu ajoutes une tabulation (ou deux espaces). 270 | ```bash 271 | const person = { 272 | name: "Bob", 273 | age: 30, 274 | sayHello: function(){ 275 | console.log("Hello"); 276 | } 277 | } 278 | ``` 279 | 280 | ### Résumé 281 | 282 | 283 | Tu peux écrire du Javascript dans une page HTML en utilisant les tags ` 11 | 12 | -------------------------------------------------------------------------------- /js/lesson 1-7.js: -------------------------------------------------------------------------------- 1 | //document.write("Hello world!"); text 2 | //console.log("Hello world!"); text 3 | //console.info("Hello world!"); info 4 | //console.error("Hello world!"); alert rouge 5 | //console.warn("Hello world!"); alert jeune 6 | 7 | //var num; 8 | //num = 5; 9 | /* 10 | const num = 5; 11 | //num = 7; 12 | console.log("Number: " + num + "."); 13 | 14 | var number; 15 | number = true; 16 | 17 | var num_1 = 5; 18 | var num_2 = "5";*/ 19 | /* 20 | var num_1 = 5; 21 | var num_2 = 15; 22 | 23 | var res = num_1 + num_2; 24 | 25 | console.log("Number: " + res); 26 | 27 | console.log("Math: " + Math.PI); 28 | console.log("Math: " + Math.E); 29 | console.log("Math: " + Math.min(2, 4, 7, 8, -9)); 30 | console.log("Math: " + Math.max(2, 4, 7, 8, -9));*/ 31 | 32 | /*var number = 15; 33 | 34 | if(number > 5) { 35 | console.log("Ok"); 36 | }*/ 37 | /* lesson 6 peremennie 38 | var stroka = "word23"; 39 | 40 | switch(stroka) { 41 | case "4": 42 | console.log("chifre 4"); 43 | break; 44 | case "45": 45 | console.log("chifre 45"); 46 | break; 47 | case "word": 48 | console.log("chifre word"); 49 | break; 50 | default: 51 | console.log("Default"); 52 | break; 53 | } */ 54 | 55 | //lesson 7 massif dannih 56 | 57 | var arr = [5, true, "stroka", 5.7, 0, -100]; 58 | arr[2] = "word"; 59 | console.log(arr.length); 60 | 61 | var matrix = [ 62 | [4, 6, 8], ["stroka", 5.7], [0, -100] 63 | ]; 64 | 65 | matrix[1][0] = 90; 66 | console.log(matrix); 67 | 68 | 69 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /js/lesson 10.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | function info() { 4 | console.log("Bonjour"); 5 | console.log("!"); 6 | } 7 | 8 | info(); 9 | 10 | */ 11 | /* 12 | function info(word) { 13 | console.log(word + "!"); 14 | 15 | } 16 | 17 | function summa(a, b) { 18 | var res = a + b; 19 | console.log(res); 20 | info(res); 21 | } 22 | 23 | summa(5, 7); 24 | 25 | */ 26 | 27 | function summma(arr) { 28 | var sum = 0; 29 | 30 | for(var i = 0; i < arr.length; i++) 31 | sum += arr[i]; 32 | 33 | console.log(sum); 34 | } 35 | 36 | var array = [6, 8, 1]; 37 | var array_2 = [6, 8, 1, 7]; 38 | var array_3 = [6, 8, 1, 90]; 39 | 40 | 41 | summma(array); 42 | summma(array_2); 43 | summma(array_3); 44 | -------------------------------------------------------------------------------- /js/lesson 11.js: -------------------------------------------------------------------------------- 1 | var counter = 0; 2 | 3 | function onClickButton(el) { 4 | counter++; 5 | el.innerHTML = "Vous avez appuer:" + counter; 6 | // el.style.background = "red"; 7 | // el.style.color = "blue"; 8 | 9 | el.style.cssText = "border-radius: 5px; border: 0; font-size: 20px"; 10 | } -------------------------------------------------------------------------------- /js/lesson 12.js: -------------------------------------------------------------------------------- 1 | 2 | /* 3 | var text = document.getElementById("text"); 4 | 5 | text.style.color = "red"; 6 | text.style.backgroundColor = "blue"; 7 | 8 | text.innerHTML = "New"; 9 | 10 | //let spans = document.getElementsByTagName("span"); 11 | 12 | let spans = document.getElementsByClassName("simple"); 13 | 14 | for (let i = 0; i < spans.length; i++) { 15 | console.log(spans[i].innerHTML); 16 | } 17 | 18 | */ 19 | 20 | function checkForm(el) { 21 | 22 | let name = el.name.value; 23 | let pass = el.pass.value; 24 | let repass = el.repass.value; 25 | let state = el.state.value; 26 | 27 | let fail = ""; 28 | 29 | if(name == "" || pass == "" || state == "") 30 | error = "Invalid"; 31 | else if(name.length <= 1 || name.length > 50) 32 | error = "Name incorrect"; 33 | else if(pass != repass) 34 | error = "Pass incorrect"; 35 | else if(pass.split("&").length > 1) 36 | error = "Pass incorrect"; 37 | 38 | if(error != "") { 39 | document.getElementById("error").innerHTML = error; 40 | 41 | return false; 42 | } else { 43 | alert("Ok"); 44 | // window.location = 'http://localhost'; adress cite 45 | return true; 46 | } 47 | } -------------------------------------------------------------------------------- /js/lesson 13.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | setInterval(my_func, 1000); 4 | 5 | let counter = 0; 6 | function my_func() { 7 | counter++; 8 | console.log("Counter: " + counter); 9 | } 10 | */ 11 | 12 | /* 13 | let counter = 0; 14 | setInterval(function() { 15 | counter++; 16 | console.log("Counter: " + counter); 17 | 18 | }, 1000); 19 | */ 20 | 21 | setTimeout(function() { 22 | console.log("Timer is working"); 23 | 24 | }, 2000); 25 | -------------------------------------------------------------------------------- /js/lesson 14.js: -------------------------------------------------------------------------------- 1 | /* 2 | let date = new Date(); 3 | 4 | console.log(date.getHours() + ':' + date.getMinutes()); 5 | 6 | */ 7 | /* 8 | let arr = [8, 90, 5, 7, 8, 9]; 9 | 10 | //console.log(arr.join("")); 11 | 12 | console.log(arr.sort()); 13 | */ 14 | 15 | class Person { 16 | constructor(name, age, happiness) { 17 | this.name = name; 18 | this.age = age; 19 | this.happiness = happiness; 20 | } 21 | } 22 | 23 | const alex = new Person("Alex", 45, true); 24 | const bob = new Person("Bob",25, false); 25 | console.log(alex.name, bob.name); 26 | -------------------------------------------------------------------------------- /js/lesson 8.js: -------------------------------------------------------------------------------- 1 | // lesson 8 cikli 2 | /* 3 | for(var i = 100; i > 5; i /= 2) { 4 | console.log(i); 5 | } 6 | */ 7 | /* 8 | var j = 1000; 9 | while(j >= 100) { 10 | console.log(j); 11 | j -= 100; 12 | } 13 | 14 | var isHasCar = true; 15 | while(isHasCar) { 16 | beskonechnii cikl warning 17 | } 18 | */ 19 | /* 20 | var x = 0; 21 | do { 22 | console.log(x); 23 | x ++; 24 | } while(x < 10); 25 | */ 26 | /* 27 | for(var i = 10; i <= 20; i ++) { 28 | if(i % 2 == 0) 29 | continue; 30 | // break; 31 | console.log(i); 32 | } 33 | */ 34 | 35 | var arr = [5, 7, 3, 8, 9, "stroka"]; 36 | 37 | for(var i = 0; i < arr.length; i++) { 38 | console.log("Element " + i + ": " + arr[i]); 39 | } -------------------------------------------------------------------------------- /js/lesson 9.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | alert("La méteo est exellente."); 4 | 5 | */ 6 | /* 7 | var data = confirm("Recrutez-moi"); 8 | if (data) { 9 | alert("Vous avez gagnier!"); 10 | }*/ 11 | /* 12 | var data = prompt("Quelle age vous avez"); 13 | console.log(data); 14 | */ 15 | 16 | var person = null; 17 | if(confirm("Vous etes sur?")) { 18 | person = prompt("Votre nom"); 19 | alert("Bonjour, " + person); 20 | } else { 21 | alert("Vous aves annulé"); 22 | } -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | 2 | // let myName; 3 | 4 | // myName = "Alex"; 5 | 6 | // console.log(myName); 7 | 8 | // const herName = "Bogdan"; 9 | 10 | // console.log(herName); 11 | 12 | // const objectA = { 13 | // a: 10, 14 | // b: true 15 | // } 16 | // const copyOfA = objectA; 17 | 18 | // copyOfA.c = "abc"; 19 | 20 | // const myCity = { 21 | // city: "New York", 22 | // info: { 23 | // isPopular: true, 24 | // country: "United States", 25 | // } 26 | // } 27 | 28 | // console.log(myCity.info.isPopular); 29 | 30 | // delete myCity.info["isPopular"]; 31 | // console.log(myCity); 32 | 33 | 34 | // const myCity = { 35 | // city: "New York", 36 | // cityGreeting () { 37 | // console.log("Greetings!!!"); 38 | // } 39 | // } 40 | 41 | // myCity.cityGreeting (); 42 | 43 | 44 | // const post = { 45 | // title: "My post", 46 | // likeQty: 5 47 | // } 48 | 49 | // JSON.stringify(post); 50 | 51 | 52 | // const a = 10 53 | // let b = a 54 | 55 | // console.log (a, b); 56 | // b = 30 57 | 58 | // console.log(a, b); 59 | 60 | // const person = { 61 | // name: "Bob", 62 | // age: 21 63 | // } 64 | 65 | // person.age = 30 66 | // person.inAdult = true 67 | 68 | // console.log(person.age) 69 | // console.log(person.inAdult); 70 | 71 | // function myFn(a, b) { 72 | // let c; 73 | // a = a + 1; 74 | // c = a + b; 75 | // return c; 76 | // } 77 | 78 | // let d; 79 | // d = myFn(10, 3); 80 | 81 | // console.log(d); 82 | 83 | // let a 84 | // let b 85 | // function myFn() { 86 | // let b 87 | // a = true 88 | // b = 10 89 | // console.log(b) 90 | // } 91 | 92 | // myFn() 93 | 94 | // console.log(a) 95 | // console.log(b) 96 | 97 | // // "use strict"; 98 | 99 | // let a, b 100 | 101 | // a = 10 102 | // b = a 103 | 104 | // let c = a + b 105 | 106 | // console.log(c) 107 | 108 | // let b = 10 109 | // b && console.log("Ok") 110 | 111 | // let c 112 | // c && console.log("Error"); 113 | 114 | // const buttonInfo = { 115 | // text: "OK", 116 | // width: 50000 117 | // } 118 | 119 | // const buttonStyle = { 120 | // color:"yellow", 121 | // width: 200, 122 | // height: 300 123 | // } 124 | 125 | // const button = { 126 | // ...buttonStyle, 127 | // ...buttonInfo 128 | // } 129 | 130 | // console.log(button) 131 | 132 | // const myFunction = function (a, b) { 133 | // let c; 134 | // a = a + 1; 135 | // c = a + b; 136 | // return c; 137 | // } 138 | 139 | // console.log(myFunction(5, 3)); 140 | 141 | // -----4:56----- 142 | 143 | // function multByFactor(value, mltiplier = 1) { 144 | // return value * mltiplier; 145 | // } 146 | // console.log(multByFactor(10, 2)); 147 | // console.log(multByFactor(5)); 148 | 149 | // ----5:40---- 150 | // const myArray = [1, 2, 3, 4, 5, 6, 7, 8] 151 | // console.log(myArray) 152 | 153 | // const myArray2 = new Array(1, 2, 3) 154 | // console.log(myArray2) 155 | 156 | 157 | // ---5:47--- 158 | // const myArray = [1, true, "a"] 159 | // console.log(myArray) 160 | 161 | // console.log(myArray[0]) 162 | // console.log(myArray[1]) 163 | 164 | // console.log(myArray.length) 165 | 166 | // const myArray = [1, true, "a"] 167 | // console.log(myArray) 168 | // console.log(myArray.length) 169 | 170 | // myArray[1] = 2 171 | // console.log(myArray) 172 | 173 | // //------PUSH, POP, UNSHIFT--- 5:59---- 174 | 175 | // const myArray = [1, true, "a"] 176 | // console.log(myArray) 177 | 178 | // myArray.push(4) 179 | // console.log(myArray) 180 | 181 | // myArray.push(true) 182 | // console.log(myArray) 183 | 184 | // myArray.pop() 185 | // console.log(myArray) 186 | 187 | 188 | //-----forEach----6:06---- 189 | 190 | // const myArray = [1, 2, 3] 191 | // console.log(myArray) 192 | 193 | // myArray.forEach(el => console.log(el * 2)) 194 | // console.log(myArray) 195 | 196 | //----MAP---6:13--- 197 | 198 | // const myArray = [1, 2, 3] 199 | // console.log(myArray) 200 | 201 | // const newArray = myArray.map(el => el * 3) 202 | // console.log(newArray) 203 | // console.log(myArray) 204 | 205 | //----if, else, switch---6:35--- 206 | 207 | // let val = 10 208 | 209 | // if (val > 5) { 210 | // val += 20 211 | // } 212 | // console.log(val) 213 | 214 | //----if, else---6:43-- 215 | 216 | // let val = 10 217 | 218 | // if (val < 5) { 219 | // val += 20 220 | // } else { 221 | // val -= 20 222 | // } 223 | // console.log(val) 224 | 225 | //----if, else, if -----6:46 226 | 227 | // const age = 7 228 | 229 | // if (age >= 18) { 230 | // console.log("Is adult") 231 | // } else if (age>= 12){ 232 | // console.log("Is teenager") 233 | // }else { 234 | // console.log("Is child") 235 | // } 236 | 237 | // ----switch--- 238 | // const month = 12 239 | 240 | // switch (month) { 241 | // case 12: 242 | // console.log("December") 243 | // break 244 | // case 1: 245 | // console.log("Jan") 246 | // break 247 | // case 2: 248 | // console.log("Feb") 249 | // break 250 | // default: 251 | // console.log("C'est n'a pas l'hiver") 252 | // } 253 | 254 | //----i++----7:22---- 255 | // ---for--- 256 | 257 | // for (let i = 0; i < 5; i++) { 258 | // console.log(i) 259 | // } 260 | 261 | //----while---7:37--- 262 | 263 | // let i = 0 264 | 265 | // while (i<5) { 266 | // console.log(i) 267 | // i++ 268 | // } 269 | 270 | //---do while---7:40--- 271 | 272 | //----for of---7:54--- 273 | 274 | // const myString = "Hey" 275 | 276 | // for(const letter of myString) { 277 | // console.log(letter) 278 | // } 279 | 280 | //----class---8:40--- 281 | 282 | // class Comment { 283 | // constructor(text) { 284 | // this.text = text 285 | // this.votesQty = 0 286 | // } 287 | // upvote() { 288 | // this.votesQty += 1 289 | // } 290 | // } 291 | 292 | //----Promise----9:44---- 293 | 294 | // const myPromise = new Promise((resolve, reject) => { 295 | 296 | // }); 297 | 298 | // fetch("https://jsonplaceholder.typicode.com/todos") 299 | 300 | // .then((response => response.json()) 301 | // .then(json => console.log(json)) 302 | // .catch((error) => console.error(error)) 303 | 304 | //----ASYNC/AWAIT---10:23--- 305 | 306 | // const asyncsFn = async () => { 307 | // return "Succes!" 308 | // } 309 | 310 | // asyncsFn() 311 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlexNesvit/Javascript-lessons/5257f48bbba19bc85d9b0a0de1ac727c1f7b3d3b/styles.css --------------------------------------------------------------------------------