| # Día | Temas |
|---|---|
| 01 | Introducción |
| 02 | Tipos de datos |
| 03 | Booleanos, operadores, fecha |
| 04 | Condicional |
| 05 | Matrices |
| 06 | Bucles |
| 07 | Funciones |
| 08 | Objetos |
| 09 | Funciones de orden superior |
| 10 | Conjuntos y mapas |
| 11 | Destructación y difusión |
| 12 | Expresiones regulares |
| 13 | Métodos de objetos de consola |
| 14 | Manejo de errores |
| 15 | Clases |
| 16 | Json |
| 17 | Almacenamiento web |
| 18 | Promesas |
| 19 | Cierre |
| 20 | Escribir código limpio |
| 21 | Domina |
| 22 | Manipulando el objeto DOM |
| 23 | Oyentes de eventos |
| 24 | Mini Proyecto: Sistema Solar |
| 25 | Mini Proyecto: Visualización de datos de los países mundiales 1 |
| 26 | Mini Proyecto: Visualización de datos de los países mundiales 2 |
| 27 | Mini Proyecto: Portafolio |
| 28 | Mini proyecto: tabla de clasificación |
| 29 | Mini Proyecto: Personajes de animación |
| 30 | Proyectos finales |
???? Feliz codificación ???
Autor: Asabeneh Yetayeh
Enero de 2020
? Inglés ?? Español ?? Italiano ?? ¿Ruso ?? Turco ?? Azerbaiyán? Coreano ?? Vietnamita ?? Polaco ?? portugués
Día 2 >>
Felicitaciones por decidir participar en 30 días de desafío de programación de JavaScript. En este desafío, aprenderá todo lo que necesita para ser un programador de JavaScript y, en general, todo el concepto de programación. Al final del desafío, obtendrá un certificado de finalización del desafío de programación JavaScript de 30 días. En caso de que necesite ayuda o si desea ayudar a otros, puede unirse al grupo de telegrama dedicado.
Un desafío 30daysofjavaScript es una guía tanto para principiantes como para desarrolladores avanzados de JavaScript. Bienvenido a JavaScript. JavaScript es el idioma de la web. Disfruto usando y enseñando a JavaScript y espero que tú también lo hagas.
En este desafío de JavaScript de paso a paso, aprenderá JavaScript, el lenguaje de programación más popular en la historia de la humanidad. JavaScript se utiliza para agregar interactividad a los sitios web, para desarrollar aplicaciones móviles, aplicaciones de escritorio, juegos y hoy en día JavaScript se puede utilizar para la programación del lado del servidor , el aprendizaje automático y la IA .
JavaScript (JS) ha aumentado en popularidad en los últimos años y ha sido el lenguaje de programación líder durante los últimos diez años y es el lenguaje de programación más utilizado en GitHub.
Este desafío es fácil de leer, escrito en inglés conversacional, atractivo, motivador y al mismo tiempo, es muy exigente. Necesitas asignar mucho tiempo para terminar este desafío. Si es un aprendiz visual, puede obtener la lección de video en Washera YouTube Channel. Suscríbase el canal, comente y haga preguntas en YouTube Vides y sea proactivo, el autor eventualmente lo notará.
Al autor le gusta escuchar su opinión sobre el desafío, comparta al autor expresando sus pensamientos sobre el desafío 30daysofjavaScript. Puedes dejar tu testimonio en este enlace
No se requiere conocimiento previo de la programación para seguir este desafío. Solo necesitas:
Creo que tienes la motivación y un fuerte deseo de ser un desarrollador, una computadora e Internet. Si los tienes, entonces tienes todo para comenzar.
Es posible que no necesite Node.js en este momento, pero es posible que lo necesite para más tarde. Instalar node.js.
Después de descargar doble clic e instalar
Podemos verificar si el nodo está instalado en nuestra máquina local abriendo nuestro terminal de dispositivo o símbolo del sistema.
asabeneh $ node -v
v12.14.0Al hacer este tutorial, estaba usando el nodo versión 12.14.0, pero ahora la versión recomendada de Node.js para descargar es v14.17.6, para cuando use este material, puede tener una versión Node.js más alta.
Hay muchos navegadores por ahí. Sin embargo, recomiendo Google Chrome.
Instale Google Chrome si aún no tiene uno. Podemos escribir un pequeño código JavaScript en la consola del navegador, pero no usamos la consola del navegador para desarrollar aplicaciones.
Puede abrir la consola de Google Chrome haciendo clic en tres puntos en la esquina superior derecha del navegador, seleccionando más herramientas -> Herramientas para desarrolladores o utilizando un atajo de teclado. Prefiero usar atajos.
Para abrir la consola Chrome con un atajo de teclado.
Mac
Command+Option+J
Windows/Linux:
Ctl+Shift+J
Después de abrir la consola de Google Chrome, intente explorar los botones marcados. Pasaremos la mayor parte del tiempo en la consola. La consola es el lugar donde va su código JavaScript. El motor Google Console V8 cambia su código JavaScript a código de máquina. Vamos a escribir un código JavaScript en la consola de Google Chrome:
Podemos escribir cualquier código JavaScript en la consola de Google o cualquier consola del navegador. Sin embargo, para este desafío, solo nos centramos en la consola de Google Chrome. Abra la consola usando:
Mac
Command+Option+I
Windows:
Ctl+Shift+I Para escribir nuestro primer código JavaScript, utilizamos una función incorporada console.log () . Pasamos un argumento como datos de entrada, y la función muestra la salida. Pasamos 'Hello, World' como datos o argumentos de entrada en la función console.log ().
console . log ( 'Hello, World!' ) La función console.log() puede tomar múltiples parámetros separados por comas. La sintaxis se parece de la siguiente manera: console.log(param1, param2, param3)
console . log ( 'Hello' , 'World' , '!' )
console . log ( 'HAPPY' , 'NEW' , 'YEAR' , 2020 )
console . log ( 'Welcome' , 'to' , 30 , 'Days' , 'Of' , 'JavaScript' ) Como puede ver en el código de fragmento anterior, console.log() puede tomar múltiples argumentos.
¡Felicidades! Escribió su primer código JavaScript usando console.log() .
Podemos agregar comentarios a nuestro código. Los comentarios son muy importantes para hacer que el código sea más legible y dejar comentarios en nuestro código. JavaScript no ejecuta la parte de comentarios de nuestro código. En JavaScript, cualquier línea de texto que comienza con // en JavaScript es un comentario, y cualquier cosa encerrada como este // también es un comentario.
Ejemplo: comentario de una sola línea
// This is the first comment
// This is the second comment
// I am a single line commentEjemplo: comentario multiline
/*
This is a multiline comment
Multiline comments can take multiple lines
JavaScript is the language of the web
*/ Los lenguajes de programación son similares a los idiomas humanos. El inglés o muchos otros idiomas usan palabras, frases, oraciones, oraciones compuestas y otros más para transmitir un mensaje significativo. El significado en inglés de la sintaxis es el arreglo de palabras y frases para crear oraciones bien formadas en un idioma . La definición técnica de sintaxis es la estructura de las declaraciones en un lenguaje informático. Los lenguajes de programación tienen sintaxis. JavaScript es un lenguaje de programación y, como otros lenguajes de programación, tiene su propia sintaxis. Si no escribimos una sintaxis que JavaScript entienda, planteará diferentes tipos de errores. Exploraremos diferentes tipos de errores de JavaScript más adelante. Por ahora, veamos errores de sintaxis.
Cometí un error deliberado. Como resultado, la consola aumenta los errores de sintaxis. En realidad, la sintaxis es muy informativa. Informa qué tipo de error se cometió. Al leer la guía de comentarios de errores, podemos corregir la sintaxis y solucionar el problema. El proceso de identificación y eliminación de errores de un programa se llama depuración. Solucionemos los errores:
console . log ( 'Hello, World!' )
console . log ( 'Hello, World!' ) Hasta ahora, vimos cómo mostrar texto usando console.log() . Si estamos imprimiendo texto o cadena usando console.log() , el texto debe estar dentro de las citas individuales, cotizaciones dobles o un retroceso. Ejemplo:
console . log ( 'Hello, World!' )
console . log ( "Hello, World!" )
console . log ( `Hello, World!` ) Ahora, practiquemos más códigos JavaScript usando console.log() en la consola de Google Chrome para los tipos de datos de números. Además del texto, también podemos hacer cálculos matemáticos usando JavaScript. Hagamos los siguientes cálculos simples. Es posible escribir el código JavaScript en Google Chrome Console puede directamente sin la función console.log() . Sin embargo, se incluye en esta introducción porque la mayor parte de este desafío se llevará a cabo en un editor de texto donde el uso de la función sería obligatorio. Puedes jugar directamente con instrucciones en la consola.
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 * 3Podemos escribir nuestros códigos en la consola del navegador, pero no será para proyectos más grandes. En un entorno de trabajo real, los desarrolladores usan diferentes editores de código para escribir sus códigos. En estos 30 días de desafío de JavaScript, utilizaremos el código Visual Studio.
Visual Studio Code es un editor de texto de código abierto muy popular. Recomendaría descargar el código Visual Studio, pero si está a favor de otros editores, no dude en seguir con lo que tiene.
Si instaló el código Visual Studio, comencemos a usarlo.
Abra el código de Visual Studio haciendo doble clic en su icono. Cuando lo abra, obtendrá este tipo de interfaz. Intente interactuar con los iconos etiquetados.
JavaScript se puede agregar a una página web de tres maneras diferentes:
Las siguientes secciones muestran diferentes formas de agregar código JavaScript a su página web.
Cree una carpeta de proyecto en su escritorio o en cualquier ubicación, asígnele 30daysofjs y cree un archivo index.html en la carpeta del proyecto. Luego pegue el siguiente código y ábralo en un navegador, por ejemplo, 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 > Ahora, acabas de escribir tu primer script en línea. Podemos crear un mensaje de alerta emergente utilizando la función incorporada alert() .
El script interno se puede escribir en la head o en el body , pero se prefiere colocarlo en el cuerpo del documento HTML. Primero, escribamos en la parte principal de la página.
<!DOCTYPE html >
< html lang =" en " >
< head >
< title > 30DaysOfScript:Internal Script </ title >
< script >
console . log ( 'Welcome to 30DaysOfJavaScript' )
</ script >
</ head >
< body > </ body >
</ html > Así es como escribimos un script interno la mayor parte del tiempo. Escribir el código JavaScript en la sección del cuerpo es la opción más preferida. Abra la consola del navegador para ver la salida de 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 > Abra la consola del navegador para ver la salida de console.log() .
Similar al script interno, el enlace de script externo puede estar en el encabezado o el cuerpo, pero se prefiere ponerlo en el cuerpo. Primero, debemos crear un archivo JavaScript externo con la extensión .js. Todos los archivos que terminan con la extensión .js son archivos JavaScript. Cree un archivo llamado Introduction.js dentro de su directorio de proyecto y escriba el siguiente código y vincule este archivo .js en la parte inferior del cuerpo.
console . log ( 'Welcome to 30DaysOfJavaScript' )Scripts externos en la cabeza :
<!DOCTYPE html >
< html lang =" en " >
< head >
< title > 30DaysOfJavaScript:External script </ title >
< script src =" introduction.js " > </ script >
</ head >
< body > </ body >
</ html >Scripts externos en el cuerpo :
<!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 > Abra la consola del navegador para ver la salida de la console.log() .
También podemos vincular múltiples archivos de JavaScript externos a una página web. Cree un archivo helloworld.js dentro de la carpeta 30daysofjs y escriba el siguiente código.
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 >Su archivo Main.js debe estar debajo de todos los demás scripts . Es muy importante recordar esto.
En JavaScript y también en otros lenguajes de programación, existen diferentes tipos de tipos de datos. Los siguientes son tipos de datos primitivos de JavaScript: cadena, número, booleano, indefinido, nulo y símbolo .
Una colección de uno o más caracteres entre dos citas individuales, citas dobles o backticks.
Ejemplo:
'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'Un valor booleano es verdadero o falso. Cualquier comparación devuelve un valor booleano, que es verdadero o falso.
Un tipo de datos booleanos es un valor verdadero o falso.
Ejemplo:
true // if the light is on, the value is true
false // if the light is off, the value is falseEn JavaScript, si no asignamos un valor a una variable, el valor está indefinido. Además de eso, si una función no devuelve nada, devuelve indefinido.
let firstName
console . log ( firstName ) // undefined, because it is not assigned to a value yetNULL en JavaScript significa un valor vacío.
let emptyValue = null Para verificar el tipo de datos de una determinada variable, utilizamos el operador typeof . Vea el siguiente ejemplo.
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 Recuerde que comentar en JavaScript es similar a otros lenguajes de programación. Los comentarios son importantes para hacer que su código sea más legible. Hay dos formas de comentar:
// commenting the code itself with a single comment
// let firstName = 'Asabeneh'; single line comment
// let lastName = 'Yetayeh'; single line commentComentario multiline:
/*
let location = 'Helsinki';
let age = 100;
let isMarried = true;
This is a Multiple line comment
*/ Las variables son contenedores de datos. Las variables se utilizan para almacenar datos en una ubicación de memoria. Cuando se declara una variable, se reserva una ubicación de memoria. Cuando se asigna una variable a un valor (datos), el espacio de memoria se llenará con esos datos. Para declarar una variable, usamos palabras clave VAR , LET o const .
Para una variable que cambia en un momento diferente, usamos LET . Si los datos no cambian en absoluto, usamos const . Por ejemplo, PI, el nombre del país, la gravedad no cambian, y podemos usar const . No usaremos VAR en este desafío y no le recomiendo que lo use. Es una forma propensa a errores de declarar variable, tiene mucha fuga. Hablaremos más sobre VAR, Let y Const en detalle en otras secciones (alcance). Por ahora, la explicación anterior es suficiente.
Un nombre de variable JavaScript válido debe seguir las siguientes reglas:
Los siguientes son ejemplos de variables de JavaScript válidas.
firstName
lastName
country
city
capitalCity
age
isMarried
first_name
last_name
is_married
capital_city
num1
num_1
_num_1
$num1
year2020
year_2020La primera y segunda variables en la lista siguen la convención de Camelcase de declarar en JavaScript. En este material, utilizaremos variables de camelcase (camelwithonehump). Utilizamos CamelCase (Camelwithwohump) para declarar clases, discutiremos sobre clases y objetos en otra sección.
Ejemplo de variables no válidas:
first - name
1 _num
num_ # _1Declaramos variables con diferentes tipos de datos. Para declarar una variable, debemos usar la palabra clave LET o const antes del nombre de la variable. Después del nombre de la variable, escribimos un signo igual (operador de asignación) y un valor (datos asignados).
// Syntax
let nameOfVariable = valueEl nombre de Vriable es el nombre que almacena diferentes datos de valor. Consulte a continuación los ejemplos de detalles.
Ejemplos de variables declaradas
// 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 FinlandCuando ejecuta el archivo index.html en la carpeta de 01 días, debe obtener esto:
? ¡Eres increíble! Acabas de completar el desafío del Día 1 y te diriges a la grandeza. Ahora haga algunos ejercicios para su cerebro y músculo.
Escriba un comentario de una sola línea que dice que los comentarios pueden hacer que el código sea legible
Escribe otro comentario único que dice: Bienvenido a 30daysofjavaScript
Escriba un comentario multilínea que dice que los comentarios pueden hacer que el código sea legible, fácil de reutilizar e informativo
Cree un archivo variable.js y declare variables y asigne tipos de datos de cadena, boolean, indefinido y nulo
Cree el archivo Datatypes.js y use el operador de tipos de JavaScript para verificar diferentes tipos de datos. Verifique el tipo de datos de cada variable
Declarar cuatro variables sin asignar valores
Declarar cuatro variables con valores asignados
Declarar variables para almacenar su primer nombre, apellido, estado civil, país y edad en múltiples líneas
Declarar variables para almacenar su primer nombre, apellido, estado civil, país y edad en una sola línea
Declare dos variables Myage y YouGe y asignarles valores iniciales y registrar la consola del navegador.
I am 25 years old.
You are 30 years old.? ¡Felicitaciones! ?
Día 2 >>
