| # Jour | Sujets |
|---|---|
| 01 | Introduction |
| 02 | Types de données |
| 03 | Booléens, opérateurs, date |
| 04 | Conditionnels |
| 05 | Tableaux |
| 06 | Boucles |
| 07 | Fonctions |
| 08 | Objets |
| 09 | Fonctions d'ordre supérieur |
| 10 | Ensembles et cartes |
| 11 | Destructeur et de propagation |
| 12 | Expressions régulières |
| 13 | Méthodes d'objet de console |
| 14 | Gestion des erreurs |
| 15 | Classes |
| 16 | Json |
| 17 | Stories sur le Web |
| 18 | Promesses |
| 19 | Fermeture |
| 20 | Écrire du code propre |
| 21 | Dom |
| 22 | Manipuler l'objet DOM |
| 23 | Auditeurs d'événements |
| 24 | Mini projet: système solaire |
| 25 | Mini projet: Visualisation des données des pays mondiaux 1 |
| 26 | Mini projet: Visualisation des données des pays mondiaux 2 |
| 27 | Mini projet: Portfolio |
| 28 | Mini projet: classement |
| 29 | Mini projet: Animer les personnages |
| 30 | Projets finaux |
??? Codage heureux ???
Auteur: Asabeneh YEAYEH
Janvier 2020
?? Anglais ?? Espagnol ?? Italien ?? Russe ?? Turc ?? Azerbaïdjan ?? Coréen ?? Vietnamien ?? Polonais ?? portugais
Jour 2 >>
Félicitations pour avoir décidé de participer à 30 jours de défi de programmation JavaScript. Dans ce défi, vous apprendrez tout ce dont vous avez besoin pour être un programmeur JavaScript, et en général, tout le concept de programmation. À la fin du défi, vous obtiendrez un certificat d'achèvement du défi de programmation de 30 jours. Dans le cas où vous auriez besoin d'aide ou si vous souhaitez aider les autres, vous pouvez rejoindre le groupe de télégramme dédié.
Un défi de 30 joursofjavascript est un guide pour les débutants et les développeurs JavaScript avancés. Bienvenue à JavaScript. JavaScript est la langue du Web. J'aime utiliser et enseigner JavaScript et j'espère que vous le ferez aussi.
Dans ce défi JavaScript étape par étape, vous apprendrez JavaScript, le langage de programmation le plus populaire de l'histoire de l'humanité. JavaScript est utilisé pour ajouter de l'interactivité aux sites Web, pour développer des applications mobiles, des applications de bureau, des jeux et de nos jours JavaScript peut être utilisé pour la programmation côté serveur , l'apprentissage automatique et l'IA .
JavaScript (JS) a augmenté en popularité ces dernières années et est le principal langage de programmation depuis dix ans et est le langage de programmation le plus utilisé sur Github.
Ce défi est facile à lire, écrit en anglais conversationnel, engageant, motivant et en même temps, il est très exigeant. Vous devez allouer beaucoup de temps pour terminer ce défi. Si vous êtes un apprenant visuel, vous pouvez obtenir la leçon vidéo sur la chaîne YouTube Washera. Abonnez-vous à la chaîne, commentez et posez des questions sur les vides YouTube et soyez proactif, l'auteur finira par vous remarquer.
L'auteur aime entendre votre opinion sur le défi, partager l'auteur en exprimant vos réflexions sur le défi de 30 jours de lajavascript. Vous pouvez laisser votre témoignage sur ce lien
Aucune connaissance préalable de la programmation n'est nécessaire pour suivre ce défi. Vous avez besoin seulement:
Je crois que vous avez la motivation et un fort désir d'être un développeur, un ordinateur et Internet. Si vous en avez, vous avez tout pour commencer.
Vous n'avez peut-être pas besoin de node.js pour le moment, mais vous en aurez peut-être besoin pour plus tard. Installez Node.js.
Après avoir téléchargé le double clic et l'installation
Nous pouvons vérifier si le nœud est installé sur notre machine locale en ouvrant notre borne de périphérique ou notre invite de commande.
asabeneh $ node -v
v12.14.0Lors de la réalisation de ce tutoriel, j'utilisais le Node version 12.14.0, mais maintenant la version recommandée de Node.js pour le téléchargement est V14.17.6, au moment où vous utilisez ce matériel, vous pouvez avoir une version Node.js plus élevée.
Il existe de nombreux navigateurs. Cependant, je recommande fortement Google Chrome.
Installez Google Chrome si vous n'en avez pas encore. Nous pouvons écrire un petit code JavaScript sur la console du navigateur, mais nous n'utilisons pas la console du navigateur pour développer des applications.
Vous pouvez ouvrir Google Chrome Console soit en cliquant sur trois points dans le coin supérieur droit du navigateur, en sélectionnant plus d'outils -> des outils de développeur ou à l'aide d'un raccourci clavier. Je préfère utiliser les raccourcis.
Pour ouvrir la console Chrome à l'aide d'un raccourci clavier.
Mac
Command+Option+J
Windows/Linux:
Ctl+Shift+J
Après avoir ouvert la console Google Chrome, essayez d'explorer les boutons marqués. Nous passerons la plupart du temps sur la console. La console est l'endroit où va votre code JavaScript. Le moteur Google Console V8 modifie votre code JavaScript en code machine. Écrivons un code JavaScript sur la console Google Chrome:
Nous pouvons écrire n'importe quel code JavaScript sur la console Google ou n'importe quelle console de navigateur. Cependant, pour ce défi, nous nous concentrons uniquement sur la console Google Chrome. Ouvrez la console en utilisant:
Mac
Command+Option+I
Windows:
Ctl+Shift+I Pour écrire notre premier code JavaScript, nous avons utilisé une fonction de fonction intégrée.log () . Nous avons passé un argument en tant que données d'entrée et la fonction affiche la sortie. Nous avons passé 'Hello, World' en tant que données d'entrée ou argument dans la fonction console.log ().
console . log ( 'Hello, World!' ) La fonction console.log() peut prendre plusieurs paramètres séparés par des virgules. La syntaxe ressemble à ce qui suit: console.log(param1, param2, param3)
console . log ( 'Hello' , 'World' , '!' )
console . log ( 'HAPPY' , 'NEW' , 'YEAR' , 2020 )
console . log ( 'Welcome' , 'to' , 30 , 'Days' , 'Of' , 'JavaScript' ) Comme vous pouvez le voir dans le code d'extrait ci-dessus, console.log() peut prendre plusieurs arguments.
Félicitations! Vous avez écrit votre premier code JavaScript à l'aide de console.log() .
Nous pouvons ajouter des commentaires à notre code. Les commentaires sont très importants pour rendre le code plus lisible et pour laisser des remarques dans notre code. JavaScript n'exécute pas la partie commentaire de notre code. Dans JavaScript, toute ligne de texte commençant par // dans JavaScript est un commentaire, et tout ce qui est enfermé comme celui-ci // est également un commentaire.
Exemple: commentaire à ligne unique
// This is the first comment
// This is the second comment
// I am a single line commentExemple: commentaire multiligne
/*
This is a multiline comment
Multiline comments can take multiple lines
JavaScript is the language of the web
*/ Les langages de programmation sont similaires aux langages humains. L'anglais ou bien d'autres langues utilisent des mots, des phrases, des phrases, des phrases composées et autres pour transmettre un message significatif. La signification anglaise de la syntaxe est la disposition des mots et des phrases pour créer des phrases bien formées dans une langue . La définition technique de la syntaxe est la structure des instructions dans un langage informatique. Les langages de programmation ont une syntaxe. JavaScript est un langage de programmation et, comme les autres langages de programmation, il a sa propre syntaxe. Si nous n'écrivons pas une syntaxe que JavaScript comprend, elle augmentera différents types d'erreurs. Nous explorerons différents types d'erreurs JavaScript plus tard. Pour l'instant, voyons les erreurs de syntaxe.
J'ai fait une erreur délibérée. En conséquence, la console augmente les erreurs de syntaxe. En fait, la syntaxe est très informative. Il informe le type d'erreur. En lisant la directive de rétroaction des erreurs, nous pouvons corriger la syntaxe et résoudre le problème. Le processus d'identification et de suppression des erreurs d'un programme est appelé débogage. Corrigeons les erreurs:
console . log ( 'Hello, World!' )
console . log ( 'Hello, World!' ) Jusqu'à présent, nous avons vu comment afficher du texte à l'aide de la console.log() . Si nous imprimons du texte ou de la chaîne à l'aide de console.log() , le texte doit être à l'intérieur des citations simples, des citations doubles ou une backtick. Exemple:
console . log ( 'Hello, World!' )
console . log ( "Hello, World!" )
console . log ( `Hello, World!` ) Maintenant, pratiquons plus d'écriture de codes JavaScript à l'aide de console.log() sur Google Chrome Console pour les types de données numériques. En plus du texte, nous pouvons également effectuer des calculs mathématiques à l'aide de JavaScript. Faisons les calculs simples suivants. Il est possible d'écrire du code JavaScript sur la console Google Chrome peut directement sans la fonction console.log() . Cependant, il est inclus dans cette introduction, car la plupart de ce défi aurait lieu dans un éditeur de texte où l'utilisation de la fonction serait obligatoire. Vous pouvez jouer directement avec des instructions sur la console.
console . log ( 2 + 3 ) // Addition
console . log ( 3 - 2 ) // Subtraction
console . log ( 2 * 3 ) // Multiplication
console . log ( 3 / 2 ) // Division
console . log ( 3 % 2 ) // Modulus - finding remainder
console . log ( 3 ** 2 ) // Exponentiation 3 ** 2 == 3 * 3Nous pouvons écrire nos codes sur la console du navigateur, mais ce ne sera pas pour les plus grands projets. Dans un environnement de travail réel, les développeurs utilisent différents éditeurs de code pour écrire leurs codes. Dans ce défi 30 jours de JavaScript, nous utiliserons le code Visual Studio.
Visual Studio Code est un éditeur de texte open source très populaire. Je recommanderais de télécharger Visual Studio Code, mais si vous êtes en faveur d'autres éditeurs, n'hésitez pas à suivre ce que vous avez.
Si vous avez installé Visual Studio Code, commençons à l'utiliser.
Ouvrez le code Visual Studio en double-cliquant sur son icône. Lorsque vous l'ouvrez, vous obtiendrez ce type d'interface. Essayez d'interagir avec les icônes étiquetées.
JavaScript peut être ajouté à une page Web de trois manières différentes:
Les sections suivantes montrent différentes façons d'ajouter du code JavaScript à votre page Web.
Créez un dossier de projet sur votre bureau ou dans n'importe quel emplacement, nommez-le de 30 jours et créez un fichier index.html dans le dossier du projet. Collez ensuite le code suivant et ouvrez-le dans un navigateur, par exemple Chrome.
<!DOCTYPE html >
< html lang =" en " >
< head >
< title > 30DaysOfScript:Inline Script </ title >
</ head >
< body >
< button onclick =" alert('Welcome to 30DaysOfJavaScript!') " > Click Me </ button >
</ body >
</ html > Maintenant, vous venez d'écrire votre premier script en ligne. Nous pouvons créer un message d'alerte pop-up à l'aide de la fonction intégrée alert() .
Le script interne peut être écrit dans la head ou le body , mais il est préféré le mettre sur le corps du document HTML. Tout d'abord, écrivons sur la partie de la page de la page.
<!DOCTYPE html >
< html lang =" en " >
< head >
< title > 30DaysOfScript:Internal Script </ title >
< script >
console . log ( 'Welcome to 30DaysOfJavaScript' )
</ script >
</ head >
< body > </ body >
</ html > C'est ainsi que nous écrivons un script interne la plupart du temps. L'écriture du code JavaScript dans la section Body est l'option la plus préférée. Ouvrez la console du navigateur pour voir la sortie de la console.log() .
<!DOCTYPE html >
< html lang =" en " >
< head >
< title > 30DaysOfScript:Internal Script </ title >
</ head >
< body >
< button onclick =" alert('Welcome to 30DaysOfJavaScript!'); " > Click Me </ button >
< script >
console . log ( 'Welcome to 30DaysOfJavaScript' )
</ script >
</ body >
</ html > Ouvrez la console du navigateur pour voir la sortie de la console.log() .
Semblable au script interne, le lien de script externe peut être sur l'en-tête ou le corps, mais il est préféré le mettre dans le corps. Tout d'abord, nous devons créer un fichier JavaScript externe avec l'extension .js. Tous les fichiers se terminant par l'extension .js sont des fichiers JavaScript. Créez un fichier nommé introduction.js dans votre répertoire de projet et écrivez le code suivant et liez ce fichier .js au bas du corps.
console . log ( 'Welcome to 30DaysOfJavaScript' )Scripts externes dans la tête :
<!DOCTYPE html >
< html lang =" en " >
< head >
< title > 30DaysOfJavaScript:External script </ title >
< script src =" introduction.js " > </ script >
</ head >
< body > </ body >
</ html >Scripts externes dans le corps :
<!DOCTYPE html >
< html lang =" en " >
< head >
< title > 30DaysOfJavaScript:External script </ title >
</ head >
< body >
<!-- JavaScript external link could be in the header or in the body -->
<!-- Before the closing tag of the body is the recommended place to put the external JavaScript script -->
< script src =" introduction.js " > </ script >
</ body >
</ html > Ouvrez la console du navigateur pour voir la sortie de la console.log() .
Nous pouvons également lier plusieurs fichiers JavaScript externes sur une page Web. Créez un fichier helloworld.js à l'intérieur du dossier de 30 jours et écrivez le code suivant.
console . log ( 'Hello, World!' ) <!DOCTYPE html >
< html lang =" en " >
< head >
< title > Multiple External Scripts </ title >
</ head >
< body >
< script src =" ./helloworld.js " > </ script >
< script src =" ./introduction.js " > </ script >
</ body >
</ html >Votre fichier main.js doit être inférieur à tous les autres scripts . Il est très important de s'en souvenir.
Dans JavaScript et également d'autres langages de programmation, il existe différents types de types de données. Voici les types de données primitifs JavaScript: chaîne, numéro, booléen, indéfini, nul et symbole .
Une collection d'un ou plusieurs caractères entre deux citations simples, citations doubles ou backticks.
Exemple:
'a'
'Asabeneh'
"Asabeneh"
'Finland'
'JavaScript is a beautiful programming language'
'I love teaching'
'I hope you are enjoying the first day'
`We can also create a string using a backtick`
'A string could be just as small as one character or as big as many pages'
'Any data type under a single quote, double quote or backtick is a string'Une valeur booléenne est vraie ou fausse. Toute comparaison renvoie une valeur booléenne, qui est vraie ou fausse.
Un type de données booléen est soit une valeur vraie ou fausse.
Exemple:
true // if the light is on, the value is true
false // if the light is off, the value is falseDans JavaScript, si nous n'attribuons pas de valeur à une variable, la valeur n'est pas définie. En plus de cela, si une fonction ne renvoie rien, il renvoie indéfini.
let firstName
console . log ( firstName ) // undefined, because it is not assigned to a value yetNull dans JavaScript signifie une valeur vide.
let emptyValue = null Pour vérifier le type de données d'une certaine variable, nous utilisons le type d'opérateur. Voir l'exemple suivant.
console . log ( typeof 'Asabeneh' ) // string
console . log ( typeof 5 ) // number
console . log ( typeof true ) // boolean
console . log ( typeof null ) // object type
console . log ( typeof undefined ) // undefined N'oubliez pas que le commentaire en JavaScript est similaire à d'autres langages de programmation. Les commentaires sont importants pour rendre votre code plus lisible. Il existe deux façons de commenter:
// commenting the code itself with a single comment
// let firstName = 'Asabeneh'; single line comment
// let lastName = 'Yetayeh'; single line commentCommentaires multilines:
/*
let location = 'Helsinki';
let age = 100;
let isMarried = true;
This is a Multiple line comment
*/ Les variables sont des conteneurs de données. Les variables sont utilisées pour stocker des données dans un emplacement de mémoire. Lorsqu'une variable est déclarée, un emplacement de mémoire est réservé. Lorsqu'une variable est affectée à une valeur (données), l'espace mémoire sera rempli de ces données. Pour déclarer une variable, nous utilisons VAR , LET ou CONS MOTS CLÉS.
Pour une variable qui change à un moment différent, nous utilisons LET . Si les données ne changent pas du tout, nous utilisons const . Par exemple, PI, le nom du pays, la gravité ne changent pas, et nous pouvons utiliser Const . Nous n'utiliserons pas VAR dans ce défi et je ne vous recommande pas de l'utiliser. C'est la façon de déclarer la variable, il a beaucoup de fuite. Nous parlerons davantage de VAR, LET et const en détail dans d'autres sections (portée). Pour l'instant, l'explication ci-dessus est suffisante.
Un nom de variable JavaScript valide doit suivre les règles suivantes:
Voici des exemples de variables JavaScript valides.
firstName
lastName
country
city
capitalCity
age
isMarried
first_name
last_name
is_married
capital_city
num1
num_1
_num_1
$num1
year2020
year_2020Les première et deuxième variables de la liste suivent la convention Camelcase de déclarer en JavaScript. Dans ce matériau, nous utiliserons des variables de camelcase (camelwithoneHump). Nous utilisons CamelCase (camelwithtwoHump) pour déclarer des classes, nous discuterons des classes et des objets dans une autre section.
Exemple de variables non valides:
first - name
1 _num
num_ # _1DÉCLARDONS les variables avec différents types de données. Pour déclarer une variable, nous devons utiliser le mot-clé LET ou const ou const du nom de variable. Suivant le nom de la variable, nous écrivons un signe égal (opérateur d'affectation) et une valeur (données attribuées).
// Syntax
let nameOfVariable = valueLe nomofvriable est le nom qui stocke différentes données de valeur. Voir ci-dessous pour des exemples de détail.
Exemples de variables déclarées
// Declaring different variables of different data types
let firstName = 'Asabeneh' // first name of a person
let lastName = 'Yetayeh' // last name of a person
let country = 'Finland' // country
let city = 'Helsinki' // capital city
let age = 100 // age in years
let isMarried = true
console . log ( firstName , lastName , country , city , age , isMarried ) Asabeneh Yetayeh Finland Helsinki 100 true // Declaring variables with number values
let age = 100 // age in years
const gravity = 9.81 // earth gravity in m/s2
const boilingPoint = 100 // water boiling point, temperature in °C
const PI = 3.14 // geometrical constant
console . log ( gravity , boilingPoint , PI ) 9.81 100 3.14 // Variables can also be declaring in one line separated by comma, however I recommend to use a seperate line to make code more readble
let name = 'Asabeneh' , job = 'teacher' , live = 'Finland'
console . log ( name , job , live ) Asabeneh teacher FinlandLorsque vous exécutez le fichier index.html dans le dossier de 01 jours, vous devez l'obtenir:
? Vous êtes incroyable! Vous venez de terminer le défi du jour 1 et vous êtes en route pour la grandeur. Maintenant, faites des exercices pour votre cerveau et votre muscle.
Écrivez un commentaire unique qui dit, les commentaires peuvent rendre le code lisible
Écrivez un autre commentaire unique qui dit, bienvenue dans 30daysofjavascript
Écrivez un commentaire multiliné qui dit, les commentaires peuvent rendre le code lisible, facile à réutiliser et informatif
Créez un fichier variable.js et déclarez les variables et attribuez une chaîne, des types de données booléens, indéfinis et nuls
Créez un fichier datatypes.js et utilisez l'opérateur JavaScript Typeof pour vérifier différents types de données. Vérifiez le type de données de chaque variable
Déclarez quatre variables sans attribuer des valeurs
Déclarez quatre variables avec des valeurs attribuées
Déclarez les variables pour stocker votre prénom, nom de famille, état matrimonial, pays et âge en plusieurs lignes
Déclarer les variables pour stocker votre prénom, nom de famille, état matrimonial, pays et âge en une seule ligne
Déclarez deux variables Myage et Yourage et attribuez-leur des valeurs initiales et se connectez à la console du navigateur.
I am 25 years old.
You are 30 years old.? Félicitations! ?
Jour 2 >>
