1660656900
Creación De Una Aplicación De Contador Con Javascript
JavaScript le permite crear sitios web dinámicos. Es la parte final de la trinidad de desarrollo web con HTML y CSS, y la usas para hacer que tus páginas estáticas sean dinámicas.
Probablemente comenzará a aprender JavaScript tan pronto como haya cubierto los conceptos básicos de HTML y CSS. Luego, después de un tiempo, puede caer en una de las siguientes categorías:
- Has aprendido toda la elegante sintaxis de JavaScript, pero no puedes entenderla.
- Entiende la sintaxis pero no puede aplicarla a sus proyectos personales.
- Quiere renunciar o está pensando en cambiar de carrera.
Adoptaremos un enfoque práctico para aprender JavaScript en este artículo y en los siguientes. Prometo no aburriros mucho con la sintaxis, sino que aprenderemos construyendo proyectos.
Voy a suponer que conoce los fundamentos de HTML y CSS para este artículo y cualquiera que pueda seguir. Pero si no lo hace, puede sumergirse en este curso para principiantes para aprender o refrescar sus conocimientos antes de continuar con este tutorial.
¿Qué herramientas necesito para aprender JavaScript?
JavaScript no requiere una configuración elaborada o costosa. Todo lo que realmente necesita es una computadora con lo siguiente:
- Un editor de texto (como Visual Studio Code)
- Un navegador web moderno (como Chrome, Edge, Firefox, etc.)
Si no tiene una computadora, aún puede seguir la lección usando un editor de código en línea como codepen.io .
Cómo empezar con JavaScript
Como se indicó anteriormente, todo lo que necesita es un editor de texto y un navegador para comenzar. Inicie su editor de texto, en mi caso, VSCode, en el directorio donde desea que se coloquen sus archivos de código.
Cree un nuevo archivo llamado index.html. Si está utilizando VS Code, la configuración de su proyecto debería verse así:
Cómo obtener una vista previa de su código en el navegador
Una vez que haya terminado de crear su archivo HTML, querrá ver el producto terminado en su navegador.
Para facilitar este proceso, debemos instalar la extensión "servidor en vivo" en VS Code. Esta extensión hará que la página web se actualice inmediatamente cada vez que hagamos cambios en nuestro archivo HTML.
Haga clic en el icono de la extensión en el lado derecho de VSCode.
Busque e instale la extensión del servidor en vivo. Regrese a su archivo HTML y elija "Abrir con servidor en vivo" en el menú contextual.
Su página web ahora debería estar visible en su navegador.
Cómo incrustar JavaScript en su página HTML
Puede incluir código JavaScript en su HTML colocándolo directamente en la etiqueta del script.
<!DOCTYPE html>
<html lang="en">
<head>
...
<script>
let my_variable = "hello JavaScript";
// any JavaScript can go in here
</script>
</head>
<body>
<h1>Hello world</h1>
</body>
</html>Pero tenga en cuenta que no se recomienda el método anterior. En su lugar, debe generar un archivo JavaScript externo con la .jsextensión.
Cree un nuevo archivo con el nombre script.jsen el directorio de su proyecto y luego vincúlelo a su archivo HTML usando la URL de su código JavaScript externo, así:
<!DOCTYPE html>
<html lang="en">
<head>
...
<script src="script.js"></script>
<title>Counter</title>
</head>
<body>
...
</body>
</html>El JavaScript se ejecutará antes que cualquier HTML. Esto suele causar problemas, ya que los elementos HTML que seleccione con JavaScript no estarán definidos porque el navegador lee el código HTML de arriba a abajo.
Usaremos el deferatributo del elemento script para corregir eso, lo que le indica al navegador que primero cargue HTML antes de ejecutar el código JavaScript.
<script defer src="script.js"></script>Ahora que estamos listos, profundicemos en algunos aspectos básicos de JavaScript.
Cómo usar variables en JavaScript
Una variable es un marcador de posición para valores que podría necesitar usar en el futuro. Con JavaScript, todo se almacena en variables.
Para declarar una variable, puede usar la palabra clave leto const.
let first_variable
const last_variable`Usas el signo de igualdad para asignar un valor a una variable.
let first_variable = “hello world”Si declara una variable con let, puede modificarla. Por otro lado, si declara variables con const, no puede cambiar sus valores, de ahí el nombre.
En JavaScript, puede almacenar múltiples tipos de datos en variables:
- Cadenas: cualquier valor que sea simple o doble y entre comillas es una cadena.
let my_string = "Hello world" // string
let my_second_string = "24" // string- Números: estos números no están entre comillas.
let my_number = 15 // number
let my_second_number = "15" // string- Matrices: la matriz es su mejor opción si desea almacenar varios valores en una sola variable.
let my_array = [1, "hello", "4", "world"]
- Booleano: no necesita encerrar un valor booleano entre comillas porque es un valor verdadero o falso y no una cadena.
let my_boolean = true;
- Objetos: los objetos le permiten almacenar datos en pares clave-valor.
let my_obj = {
name: "John snow",
aim: "Learning JavaScript",
age: 20,
}
Dado que JavaScript interpreta todo como un objeto, incluso puede guardar referencias a elementos HTML en variables.
let my_button = document.querySelector("#id")
Estamos seleccionando elementos en una página web en función de su identificación cuando usamos el document.querySelector("#id"). No se preocupe, entraremos en más detalles sobre esto más adelante.
Para usar una variable en JavaScript, simplemente llame al nombre de la variable así:
my_button
Para demostrar cómo funcionan las variables en JavaScript, construyamos una aplicación de contador básica. Agregue el siguiente código al archivo HTML que creó anteriormente:
...
<body>
<div class="counter_conatiner">
<button id="subtract">-</button><span id="output">0</span
><button id="add">+</button>
</div>
</body>
...
Cree un style.cssarchivo y agregue los siguientes estilos para darle vida usando CSS:
*,
*::after,
*::before {
padding: 0px;
margin: 0px;
font-family: inherit;
}
html,
body {
height: 100vh;
}
body {
font-family: sans-serif;
font-size: 16px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: aliceblue;
}
.counter_conatiner {
display: flex;
align-items: center;
justify-content: center;
padding: 6px;
margin-top: 1rem;
}
span {
font-size: 3rem;
background-color: #00bb00;
padding: 2px 12px;
margin-left: 16px;
margin-right: 16px;
border-radius: 4px;
color: #fff;
}
button {
font-size: 3rem;
cursor: pointer;
background-color: transparent;
border: 0px;
}
No olvide vincular el archivo CSS a su HTML de esta manera:
<head>
...
<link rel="stylesheet" href="style.css" />
<title>Counter</title>
</head>Y ahí lo tienes: una aplicación de contador básica creada con HTML y CSS.
Tenga en cuenta que las variables pueden contener referencias a elementos HTML. Guardemos ahora las referencias a nuestros botones en variables. Abra el archivo script.js que hicimos antes y agregue el siguiente código:
let add = document.querySelector("#add");
let subract = document.querySelector("#subtract");
console.log(add, subract);
Espera un minuto, las variables son divertidas, ¿verdad? Aunque pueden contener cualquier cosa, hay algunas pautas fundamentales que debe tener en cuenta antes de usar variables:
- Evite el uso de guiones bajos al principio de los nombres de las variables, como
_my_variable, ya que son muy confusos. - JavaScript no le permitirá comenzar nombres de variables con números, como
8_variable. my_variable,MY_VARIABLEymy_Variableson cosas completamente diferentes en JavaScript debido a la distinción entre mayúsculas y minúsculas.- Y bajo ninguna circunstancia debe usar palabras reservadas de JavaScript , incluidas let, const, true, false, function y cualquier otra.
Oye, no rompas estas pautas fundamentales. Así que pasemos a otras cosas interesantes que podemos hacer usando JavaScript.
Cómo usar operadores en JavaScript
Sin matemáticas, ¿qué sería del mundo? ¿Y qué sería de JavaScript sin algunas matemáticas?
En JavaScript, tenemos un conjunto de símbolos matemáticos que puede usar para realizar operaciones matemáticas simples.
No se preocupe, es probable que ya esté familiarizado con la mayoría de ellos:
- Suma: en JavaScript, usa el signo más (+) para concatenar (unir) cadenas o agregar números.
let addition = 1 + 1 // 2
let addition = 1 + "1" // "11"
let addition = "hello" + "world" // "hello world"
- Resta: utiliza el signo menos (-) para restar números.
let subtraction = 10 - 9 // 1
- Multiplicación: utiliza un asterisco para la multiplicación en JavaScript al multiplicar números.
let multiplication = 2 * 2 // 4
- División: utiliza el signo de división (/) para dividir números.
let division = 4 / 2 // 2
- Igualdad: usa el signo igual doble (==) para verificar si dos valores son iguales en JavaScript.
let if_true = 2 + 4 == 6 // true
let if_false = 5 + 6 == 10 // false
Hay otros operadores de JavaScript disponibles, pero no los analizaré aquí.
Ahora que estamos familiarizados con los operadores, regresemos a nuestra aplicación de contador y modifíquela para que aumente cada vez que hacemos clic en el botón "+" en la página.
Declaramos algunas variables y guardamos una referencia a los botones HTML como valores en la sección anterior.
let add = document.querySelector("#add");
let subract = document.querySelector("#subtract");
...
Ahora, todo lo que tenemos que hacer para usar nuestra addvariable es llamarla por su nombre.
addPero esto es insuficiente. Necesitamos saber si se ha hecho clic, y JavaScript nos proporciona lo que llamamos Eventos. Los usamos para escuchar eventos que ocurren en una página web, como cuando un usuario hace clic en un botón o se desplaza hacia abajo en la página, entre otras cosas.
Esto es lo que parece:
add.addEventListener("click", function () {
// Every time the add button is pressed, this code will execute.
});No es necesario que esto tenga sentido de inmediato. En este caso, usamos addEventListenerpara agregar un evento de clic al botón. Hablaremos exclusivamente de eventos en otra sección.
Ahora, cualquier código que esté dentro de la devolución de llamada del oyente se llama cuando se hace clic en el botón.
Ahora que somos conscientes de esto, aumentemos el valor de salida. Para hacer esto, simplemente obtenga el valor de salida y luego auméntelo en uno cada vez que presione el botón. Aquí está el código para hacer eso:
let add = document.querySelector("#add");
add.addEventListener("click", function () {
let output = document.querySelector("#output");
let result = output.innerText + 1;
output.innerText = result;
});Con la excepción de innerText, que se usa en JavaScript para obtener el texto de los elementos HTML en una página web y también puede modificar el texto de un elemento HTML como se ve arriba, la mayoría de la sintaxis anterior ahora debería ser reconocible.
En el siguiente ejemplo, haga clic en el botón Agregar (+) para ver el incremento del contador.
No es lo que esperabas, ¿verdad? Debido a que el valor de let output = document.querySelector("#output")es una cadena y JavaScript no le permite agregar cadenas y números, debe convertir la salida en un número antes de agregar.
let result = Number(output.innerText) + 1;En el código anterior, cambiamos nuestra cadena a un número usando el Number()método.
Probemos el ejemplo anterior nuevamente después de haber realizado los cambios.
Ahora funciona tal como estaba previsto.
Cómo usar condicionales en JavaScript
Y si...? Los condicionales se usan para resolver preguntas como "¿Qué pasa si queremos que nuestra aplicación de contador deje de contar en 10?" o "¿Qué pasa si queremos saltarnos un número?" Cuando te enfrentas a preguntas condicionales como estas, necesitas un condicional.
Los únicos condicionales que veremos hoy en JavaScript son declaraciones if...else.
if (condition) {
/* code to run if condition is true */
} else {
/* run some other code instead */
}
Los condicionales nos permiten ejecutar código solo cuando se cumple una condición determinada. Por ejemplo, si nuestro contador es mayor que 10, podemos restablecerlo a cero (0).
let add = document.querySelector("#add");
add.addEventListener("click", function () {
let output = document.querySelector("#output");
let result = output.innerText + 1;
if (result > 10) {
result = 0;
}
output.innerText = result;
});
Si el resultado es mayor que 10, la instrucción if del código anterior devuelve el resultado a 0. En el siguiente ejemplo, intente aumentar el contador a un número mayor que 10.
Verá que omitimos la instrucción else. Eso es porque es opcional.
Cómo usar funciones en JavaScript
Finalmente estamos terminando nuestra pequeña aplicación de contador. Sumemos la habilidad de restar. Todo lo que tenemos que hacer es deducir 1 de la salida.
let add = document.querySelector("#add");
let subract = document.querySelector("#subtract");
add.addEventListener("click", function () {
let output = document.querySelector("#output");
let result = Number(output.innerText) + 1;
if (result > 10) {
result = 0;
}
output.innerText = result;
});
subract.addEventListener("click", function () {
let output = document.querySelector("#output");
let result = Number(output.innerText) - 1;
if (result < 0) {
result = 0;
}
output.innerText = result;
});
Y ahí lo tienes, una aplicación básica de contador de JavaScript.
Eche un vistazo al código completo del bolígrafo de arriba y describa lo que observa.
Bueno, noto mucho código duplicado, lo cual no es bueno. Debe evitar la repetición en su código.
Y por esa razón, usamos funciones. Podemos escribir un fragmento de código y luego usarlo tantas veces como queramos con funciones.
Puede usar la palabra clave function en JavaScript para crear una función.
function add() {
alert("hello world")
}
Las funciones también pueden tomar parámetros.
function add(number1, number2) {
return number1 + number2
}Estos parámetros se usan de la misma manera que las variables en una función. Son esencialmente marcadores de posición.
Las funciones, como las variables, se llaman por sus nombres. La única diferencia es que al invocar una función, debe incluir paréntesis – ().
add(2,4) // 6Es posible que también haya visto funciones declaradas de esta manera:
const add = (number1, number2) => number1 + number2;Lo anterior es equivalente a la add()función formal. Se conocen como funciones de flecha, y así es como declararemos nuestras funciones de ahora en adelante.
Creo que esta es suficiente información para la introducción en este momento, así que los dejo con esta tarea.
Desafío semanal de JavaScript
Creamos una aplicación de conteo simple en esta lección, pero contiene mucho código repetitivo, así que aquí hay un desafío para usted:
- Cree una sola función llamada
addAndSubtract()que pueda manejar operaciones de suma y resta sin tener que repetir ningún código.
Conclusión
En esta publicación, aprendimos a usar JavaScript, desarrollamos una pequeña aplicación de contador y aprendimos sobre variables, condicionales y funciones.
Además, ¡feliz codificación!
Fuente: https://www.freecodecamp.org/news/learn-javascript-by-building-a-project/
What is GEEK
Buddha Community
1660656900
Creación De Una Aplicación De Contador Con Javascript
JavaScript le permite crear sitios web dinámicos. Es la parte final de la trinidad de desarrollo web con HTML y CSS, y la usas para hacer que tus páginas estáticas sean dinámicas.
Probablemente comenzará a aprender JavaScript tan pronto como haya cubierto los conceptos básicos de HTML y CSS. Luego, después de un tiempo, puede caer en una de las siguientes categorías:
- Has aprendido toda la elegante sintaxis de JavaScript, pero no puedes entenderla.
- Entiende la sintaxis pero no puede aplicarla a sus proyectos personales.
- Quiere renunciar o está pensando en cambiar de carrera.
Adoptaremos un enfoque práctico para aprender JavaScript en este artículo y en los siguientes. Prometo no aburriros mucho con la sintaxis, sino que aprenderemos construyendo proyectos.
Voy a suponer que conoce los fundamentos de HTML y CSS para este artículo y cualquiera que pueda seguir. Pero si no lo hace, puede sumergirse en este curso para principiantes para aprender o refrescar sus conocimientos antes de continuar con este tutorial.
¿Qué herramientas necesito para aprender JavaScript?
JavaScript no requiere una configuración elaborada o costosa. Todo lo que realmente necesita es una computadora con lo siguiente:
- Un editor de texto (como Visual Studio Code)
- Un navegador web moderno (como Chrome, Edge, Firefox, etc.)
Si no tiene una computadora, aún puede seguir la lección usando un editor de código en línea como codepen.io .
Cómo empezar con JavaScript
Como se indicó anteriormente, todo lo que necesita es un editor de texto y un navegador para comenzar. Inicie su editor de texto, en mi caso, VSCode, en el directorio donde desea que se coloquen sus archivos de código.
Cree un nuevo archivo llamado index.html. Si está utilizando VS Code, la configuración de su proyecto debería verse así:
Cómo obtener una vista previa de su código en el navegador
Una vez que haya terminado de crear su archivo HTML, querrá ver el producto terminado en su navegador.
Para facilitar este proceso, debemos instalar la extensión "servidor en vivo" en VS Code. Esta extensión hará que la página web se actualice inmediatamente cada vez que hagamos cambios en nuestro archivo HTML.
Haga clic en el icono de la extensión en el lado derecho de VSCode.
Busque e instale la extensión del servidor en vivo. Regrese a su archivo HTML y elija "Abrir con servidor en vivo" en el menú contextual.
Su página web ahora debería estar visible en su navegador.
Cómo incrustar JavaScript en su página HTML
Puede incluir código JavaScript en su HTML colocándolo directamente en la etiqueta del script.
<!DOCTYPE html>
<html lang="en">
<head>
...
<script>
let my_variable = "hello JavaScript";
// any JavaScript can go in here
</script>
</head>
<body>
<h1>Hello world</h1>
</body>
</html>Pero tenga en cuenta que no se recomienda el método anterior. En su lugar, debe generar un archivo JavaScript externo con la .jsextensión.
Cree un nuevo archivo con el nombre script.jsen el directorio de su proyecto y luego vincúlelo a su archivo HTML usando la URL de su código JavaScript externo, así:
<!DOCTYPE html>
<html lang="en">
<head>
...
<script src="script.js"></script>
<title>Counter</title>
</head>
<body>
...
</body>
</html>El JavaScript se ejecutará antes que cualquier HTML. Esto suele causar problemas, ya que los elementos HTML que seleccione con JavaScript no estarán definidos porque el navegador lee el código HTML de arriba a abajo.
Usaremos el deferatributo del elemento script para corregir eso, lo que le indica al navegador que primero cargue HTML antes de ejecutar el código JavaScript.
<script defer src="script.js"></script>Ahora que estamos listos, profundicemos en algunos aspectos básicos de JavaScript.
Cómo usar variables en JavaScript
Una variable es un marcador de posición para valores que podría necesitar usar en el futuro. Con JavaScript, todo se almacena en variables.
Para declarar una variable, puede usar la palabra clave leto const.
let first_variable
const last_variable`Usas el signo de igualdad para asignar un valor a una variable.
let first_variable = “hello world”Si declara una variable con let, puede modificarla. Por otro lado, si declara variables con const, no puede cambiar sus valores, de ahí el nombre.
En JavaScript, puede almacenar múltiples tipos de datos en variables:
- Cadenas: cualquier valor que sea simple o doble y entre comillas es una cadena.
let my_string = "Hello world" // string
let my_second_string = "24" // string- Números: estos números no están entre comillas.
let my_number = 15 // number
let my_second_number = "15" // string- Matrices: la matriz es su mejor opción si desea almacenar varios valores en una sola variable.
let my_array = [1, "hello", "4", "world"]
- Booleano: no necesita encerrar un valor booleano entre comillas porque es un valor verdadero o falso y no una cadena.
let my_boolean = true;
- Objetos: los objetos le permiten almacenar datos en pares clave-valor.
let my_obj = {
name: "John snow",
aim: "Learning JavaScript",
age: 20,
}
Dado que JavaScript interpreta todo como un objeto, incluso puede guardar referencias a elementos HTML en variables.
let my_button = document.querySelector("#id")
Estamos seleccionando elementos en una página web en función de su identificación cuando usamos el document.querySelector("#id"). No se preocupe, entraremos en más detalles sobre esto más adelante.
Para usar una variable en JavaScript, simplemente llame al nombre de la variable así:
my_button
Para demostrar cómo funcionan las variables en JavaScript, construyamos una aplicación de contador básica. Agregue el siguiente código al archivo HTML que creó anteriormente:
...
<body>
<div class="counter_conatiner">
<button id="subtract">-</button><span id="output">0</span
><button id="add">+</button>
</div>
</body>
...
Cree un style.cssarchivo y agregue los siguientes estilos para darle vida usando CSS:
*,
*::after,
*::before {
padding: 0px;
margin: 0px;
font-family: inherit;
}
html,
body {
height: 100vh;
}
body {
font-family: sans-serif;
font-size: 16px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: aliceblue;
}
.counter_conatiner {
display: flex;
align-items: center;
justify-content: center;
padding: 6px;
margin-top: 1rem;
}
span {
font-size: 3rem;
background-color: #00bb00;
padding: 2px 12px;
margin-left: 16px;
margin-right: 16px;
border-radius: 4px;
color: #fff;
}
button {
font-size: 3rem;
cursor: pointer;
background-color: transparent;
border: 0px;
}
No olvide vincular el archivo CSS a su HTML de esta manera:
<head>
...
<link rel="stylesheet" href="style.css" />
<title>Counter</title>
</head>Y ahí lo tienes: una aplicación de contador básica creada con HTML y CSS.
Tenga en cuenta que las variables pueden contener referencias a elementos HTML. Guardemos ahora las referencias a nuestros botones en variables. Abra el archivo script.js que hicimos antes y agregue el siguiente código:
let add = document.querySelector("#add");
let subract = document.querySelector("#subtract");
console.log(add, subract);
Espera un minuto, las variables son divertidas, ¿verdad? Aunque pueden contener cualquier cosa, hay algunas pautas fundamentales que debe tener en cuenta antes de usar variables:
- Evite el uso de guiones bajos al principio de los nombres de las variables, como
_my_variable, ya que son muy confusos. - JavaScript no le permitirá comenzar nombres de variables con números, como
8_variable. my_variable,MY_VARIABLEymy_Variableson cosas completamente diferentes en JavaScript debido a la distinción entre mayúsculas y minúsculas.- Y bajo ninguna circunstancia debe usar palabras reservadas de JavaScript , incluidas let, const, true, false, function y cualquier otra.
Oye, no rompas estas pautas fundamentales. Así que pasemos a otras cosas interesantes que podemos hacer usando JavaScript.
Cómo usar operadores en JavaScript
Sin matemáticas, ¿qué sería del mundo? ¿Y qué sería de JavaScript sin algunas matemáticas?
En JavaScript, tenemos un conjunto de símbolos matemáticos que puede usar para realizar operaciones matemáticas simples.
No se preocupe, es probable que ya esté familiarizado con la mayoría de ellos:
- Suma: en JavaScript, usa el signo más (+) para concatenar (unir) cadenas o agregar números.
let addition = 1 + 1 // 2
let addition = 1 + "1" // "11"
let addition = "hello" + "world" // "hello world"
- Resta: utiliza el signo menos (-) para restar números.
let subtraction = 10 - 9 // 1
- Multiplicación: utiliza un asterisco para la multiplicación en JavaScript al multiplicar números.
let multiplication = 2 * 2 // 4
- División: utiliza el signo de división (/) para dividir números.
let division = 4 / 2 // 2
- Igualdad: usa el signo igual doble (==) para verificar si dos valores son iguales en JavaScript.
let if_true = 2 + 4 == 6 // true
let if_false = 5 + 6 == 10 // false
Hay otros operadores de JavaScript disponibles, pero no los analizaré aquí.
Ahora que estamos familiarizados con los operadores, regresemos a nuestra aplicación de contador y modifíquela para que aumente cada vez que hacemos clic en el botón "+" en la página.
Declaramos algunas variables y guardamos una referencia a los botones HTML como valores en la sección anterior.
let add = document.querySelector("#add");
let subract = document.querySelector("#subtract");
...
Ahora, todo lo que tenemos que hacer para usar nuestra addvariable es llamarla por su nombre.
addPero esto es insuficiente. Necesitamos saber si se ha hecho clic, y JavaScript nos proporciona lo que llamamos Eventos. Los usamos para escuchar eventos que ocurren en una página web, como cuando un usuario hace clic en un botón o se desplaza hacia abajo en la página, entre otras cosas.
Esto es lo que parece:
add.addEventListener("click", function () {
// Every time the add button is pressed, this code will execute.
});No es necesario que esto tenga sentido de inmediato. En este caso, usamos addEventListenerpara agregar un evento de clic al botón. Hablaremos exclusivamente de eventos en otra sección.
Ahora, cualquier código que esté dentro de la devolución de llamada del oyente se llama cuando se hace clic en el botón.
Ahora que somos conscientes de esto, aumentemos el valor de salida. Para hacer esto, simplemente obtenga el valor de salida y luego auméntelo en uno cada vez que presione el botón. Aquí está el código para hacer eso:
let add = document.querySelector("#add");
add.addEventListener("click", function () {
let output = document.querySelector("#output");
let result = output.innerText + 1;
output.innerText = result;
});Con la excepción de innerText, que se usa en JavaScript para obtener el texto de los elementos HTML en una página web y también puede modificar el texto de un elemento HTML como se ve arriba, la mayoría de la sintaxis anterior ahora debería ser reconocible.
En el siguiente ejemplo, haga clic en el botón Agregar (+) para ver el incremento del contador.
No es lo que esperabas, ¿verdad? Debido a que el valor de let output = document.querySelector("#output")es una cadena y JavaScript no le permite agregar cadenas y números, debe convertir la salida en un número antes de agregar.
let result = Number(output.innerText) + 1;En el código anterior, cambiamos nuestra cadena a un número usando el Number()método.
Probemos el ejemplo anterior nuevamente después de haber realizado los cambios.
Ahora funciona tal como estaba previsto.
Cómo usar condicionales en JavaScript
Y si...? Los condicionales se usan para resolver preguntas como "¿Qué pasa si queremos que nuestra aplicación de contador deje de contar en 10?" o "¿Qué pasa si queremos saltarnos un número?" Cuando te enfrentas a preguntas condicionales como estas, necesitas un condicional.
Los únicos condicionales que veremos hoy en JavaScript son declaraciones if...else.
if (condition) {
/* code to run if condition is true */
} else {
/* run some other code instead */
}
Los condicionales nos permiten ejecutar código solo cuando se cumple una condición determinada. Por ejemplo, si nuestro contador es mayor que 10, podemos restablecerlo a cero (0).
let add = document.querySelector("#add");
add.addEventListener("click", function () {
let output = document.querySelector("#output");
let result = output.innerText + 1;
if (result > 10) {
result = 0;
}
output.innerText = result;
});
Si el resultado es mayor que 10, la instrucción if del código anterior devuelve el resultado a 0. En el siguiente ejemplo, intente aumentar el contador a un número mayor que 10.
Verá que omitimos la instrucción else. Eso es porque es opcional.
Cómo usar funciones en JavaScript
Finalmente estamos terminando nuestra pequeña aplicación de contador. Sumemos la habilidad de restar. Todo lo que tenemos que hacer es deducir 1 de la salida.
let add = document.querySelector("#add");
let subract = document.querySelector("#subtract");
add.addEventListener("click", function () {
let output = document.querySelector("#output");
let result = Number(output.innerText) + 1;
if (result > 10) {
result = 0;
}
output.innerText = result;
});
subract.addEventListener("click", function () {
let output = document.querySelector("#output");
let result = Number(output.innerText) - 1;
if (result < 0) {
result = 0;
}
output.innerText = result;
});
Y ahí lo tienes, una aplicación básica de contador de JavaScript.
Eche un vistazo al código completo del bolígrafo de arriba y describa lo que observa.
Bueno, noto mucho código duplicado, lo cual no es bueno. Debe evitar la repetición en su código.
Y por esa razón, usamos funciones. Podemos escribir un fragmento de código y luego usarlo tantas veces como queramos con funciones.
Puede usar la palabra clave function en JavaScript para crear una función.
function add() {
alert("hello world")
}
Las funciones también pueden tomar parámetros.
function add(number1, number2) {
return number1 + number2
}Estos parámetros se usan de la misma manera que las variables en una función. Son esencialmente marcadores de posición.
Las funciones, como las variables, se llaman por sus nombres. La única diferencia es que al invocar una función, debe incluir paréntesis – ().
add(2,4) // 6Es posible que también haya visto funciones declaradas de esta manera:
const add = (number1, number2) => number1 + number2;Lo anterior es equivalente a la add()función formal. Se conocen como funciones de flecha, y así es como declararemos nuestras funciones de ahora en adelante.
Creo que esta es suficiente información para la introducción en este momento, así que los dejo con esta tarea.
Desafío semanal de JavaScript
Creamos una aplicación de conteo simple en esta lección, pero contiene mucho código repetitivo, así que aquí hay un desafío para usted:
- Cree una sola función llamada
addAndSubtract()que pueda manejar operaciones de suma y resta sin tener que repetir ningún código.
Conclusión
En esta publicación, aprendimos a usar JavaScript, desarrollamos una pequeña aplicación de contador y aprendimos sobre variables, condicionales y funciones.
Además, ¡feliz codificación!
Fuente: https://www.freecodecamp.org/news/learn-javascript-by-building-a-project/
1622207074
What is JavaScript - Stackfindover - Blog
Who invented JavaScript, how it works, as we have given information about Programming language in our previous article ( What is PHP ), but today we will talk about what is JavaScript, why JavaScript is used The Answers to all such questions and much other information about JavaScript, you are going to get here today. Hope this information will work for you.
Who invented JavaScript?
JavaScript language was invented by Brendan Eich in 1995. JavaScript is inspired by Java Programming Language. The first name of JavaScript was Mocha which was named by Marc Andreessen, Marc Andreessen is the founder of Netscape and in the same year Mocha was renamed LiveScript, and later in December 1995, it was renamed JavaScript which is still in trend.
What is JavaScript?
JavaScript is a client-side scripting language used with HTML (Hypertext Markup Language). JavaScript is an Interpreted / Oriented language called JS in programming language JavaScript code can be run on any normal web browser. To run the code of JavaScript, we have to enable JavaScript of Web Browser. But some web browsers already have JavaScript enabled.
Today almost all websites are using it as web technology, mind is that there is maximum scope in JavaScript in the coming time, so if you want to become a programmer, then you can be very beneficial to learn JavaScript.
JavaScript Hello World Program
In JavaScript, ‘document.write‘ is used to represent a string on a browser.
<script type="text/javascript">
document.write("Hello World!");
</script>
How to comment JavaScript code?
- For single line comment in JavaScript we have to use // (double slashes)
- For multiple line comments we have to use / * – – * /
<script type="text/javascript">
//single line comment
/* document.write("Hello"); */
</script>
Advantages and Disadvantages of JavaScript
#javascript #javascript code #javascript hello world #what is javascript #who invented javascript
1616670795
Hire Dedicated JavaScript Developers -Hire JavaScript Developers
It is said that a digital resource a business has must be interactive in nature, so the website or the business app should be interactive. How do you make the app interactive? With the use of JavaScript.
Does your business need an interactive website or app?
Hire Dedicated JavaScript Developer from WebClues Infotech as the developer we offer is highly skilled and expert in what they do. Our developers are collaborative in nature and work with complete transparency with the customers.
The technology used to develop the overall app by the developers from WebClues Infotech is at par with the latest available technology.
Get your business app with JavaScript
For more inquiry click here https://bit.ly/31eZyDZ
Book Free Interview: https://bit.ly/3dDShFg
#hire dedicated javascript developers #hire javascript developers #top javascript developers for hire #hire javascript developer #hire a freelancer for javascript developer #hire the best javascript developers
1589255577
The essential JavaScript concepts that you should understand
As a JavaScript developer of any level, you need to understand its foundational concepts and some of the new ideas that help us developing code. In this article, we are going to review 16 basic concepts. So without further ado, let’s get to it.
#javascript-interview #javascript-development #javascript-fundamental #javascript #javascript-tips
1626321063
JS Development Company India | JavaScript Development Services
PixelCrayons: Our JavaScript web development service offers you a feature-packed & dynamic web application that effectively caters to your business challenges and provide you the best RoI. Our JavaScript web development company works on all major frameworks & libraries like Angular, React, Nodejs, Vue.js, to name a few.
With 15+ years of domain expertise, we have successfully delivered 13800+ projects and have successfully garnered 6800+ happy customers with 97%+ client retention rate.
Looking for professional JavaScript web app development services? We provide custom JavaScript development services applying latest version frameworks and libraries to propel businesses to the next level. Our well-defined and manageable JS development processes are balanced between cost, time and quality along with clear communication.
Our JavaScript development companies offers you strict NDA, 100% money back guarantee and agile/DevOps approach.
#javascript development company #javascript development services #javascript web development #javascript development #javascript web development services #javascript web development company