El bucle se podría traducir por Para…De. Y tiene la siguiente sintaxis.

// Bucle For ... Of
for(var variable of objeto_iterable) {
  Acción1;
  Acción2;
  AcciónN...;
}

El funcionamiento del bucle seria el siguiente, al entrar al bucle se define una variable, normalmente con var, de esta forma la variable queda disponible de forma local a toda la función donde se encuentra el bucle, a continuación se especifica el objeto sobre el cual se quiere realizar la iteración, en cada iteración a diferencia del bucle for…in en vez de leerse la propiedad se lee el valor de la misma y el valor es asignado a la variable definida anteriormente, el bucle finaliza cuando no encuentra más valores de las propiedades que leer del objeto.

Se ha de tener en cuenta que este tipo de bucle funciona correctamente sobre algunos objetos nativos como pueden ser Array o Map, ya que estos tienen un comportamiento de iteración por defecto, hay otro tipo de objetos como Object que no incorporan este iterador. Para que se puedan iterar este ultimo tipo de objeto este ha de implementar un metodo iterador, el cual ya explicaremos.

El siguiente ejemplo muestra el funcionamiento del bucle for…of, visualizando los valores de una matriz (array).

// se crea la matriz (array) de elementos
var nombresPersonas = new Array();
// se insertan elementos en el array utilizando el metodo push
nombresPersonas.push("Mar");
nombresPersonas.push("Nacho");
nombresPersonas.push("Lucía");
nombresPersonas.push("Pedro");
// Ordenamos el array de A-Z utilizando el metodo sort por defecto
nombresPersonas.sort();
// visualizar titulo
document.write('<h2>Vector A-Z</h2>');
// Recorrer el array utilizando for...of
for(let nombreLeido of nombresPersonas) {
  document.write('<br>' + nombreLeido);
}
// Invertimos los valores del array utilizando el metodo reverse
// de esta forma obtenemos el array ordenado de Z-A
nombresPersonas.reverse();
// visualizar titulo
document.write('<h2>Vector Z-A</h2>');
// Volvemos a visualizar los datos del vector
for(let nombre of nombresPersonas) {
  document.write('<br>' + nombre);
}

Ejercicios JavaScript, bucle for of.

Al ejecutar el programa, el resultado que ha de mostrar el navegador en su consola, ha de ser similar al que se muestra a continuación.

Prácticas JavaScript, Bucle For Of

Gracias por vuestra visita y  un saludo!!!

Busca tu Articulo

Utiliza este buscador para encontrar el articulo que te interesa, si no existe la practica o ejercicio, deja un comentario proponiendo que realicemos un articulo sobre el, gracias por vuestra visita y un saludo!!

En JavaScript cualquier expresión también se puede considerar una sentencia.

Sentencia de bloque

La sentencia de bloque es el tipo de sentencia más básico y se utiliza para realizar agrupaciones de sentencias, es decir nos permite delimitar un conjunto de acciones englobando las mismas dentro de un bloque compacto. Para delimitar el bloque de sentencias se han de utilizar las llaves “{ }”, al principio y al final de bloque.

El siguiente ejemplo muestra el agrupamiento de varias sentencias en un bloque.

// Ejemplo de sentencia de bloque.
{
   var paginaWeb = "www.aprendoencasa.com";
   var descripcion = "ejercicios y practicas de programacion";
   var edad = 8;
}
// Ejemplo de sentencia de bloque utilizando orden de control de flujo
   var precio = 0;
   if ( precio == 0 ) {
      console.log("ejercicios y practicas gratis");
      console.log("en tu sitio web www.aprendoencasa.com");
   }

Se ha de tener en cuenta que en versiones anteriores a ECMAScript 6, las variables que se hayan definido dentro de un bloque de sentencia, pertenecen a la función donde esté definido el bloque de sentencia, mientras que a partir de la versión de JavaScript especificada, las variables definidas dentro de un bloque de sentencia, pertenecen a dicho bloque y no a la función completa. Siempre y cuando no se definan de otra forma las variables creadas serán de ámbito de bloque.

Observe el siguiente ejemplo.

// Ejercicios y Prácticas de Programación JavaScript
// Ejemplo de ámbito de bloque
// Declaración de variable
var numero = 10;
var numerodos = 20;
{
   var numero = 20;
   let numerodos = 40;
}
console.log(numero);
console.log(numerodos);

El resultado del ejemplo anterior, muestra un valor 20 para número y un valor 20 para númerodos, como se puede apreciar la variable “númerodos”, no cambia su valor a 40, ya que está definida dentro de una sentencia de bloque y por tanto el ámbito de la misma es solo el bloque en el cual está definida. Mientras que la variable número, aunque se ha vuelto a definir dentro del bloque, al utilizar “var” en lugar de “let”, pertenece a la función completa y por tanto cambia su valor.

Sentencias condicionales

Una sentencia condicional es un conjunto de sentencias que se ejecutan en base a que una condición se cumpla o sea verdadera.

Una de las sentencias condicionales de control de flujo, es la sentencia “if”, a la cual también se le puede denominar “Si Condicional” en castellano. La otra sentencia condicional que utiliza JavaScript es “switch”.

If – Si Condicional

La sentencia if se utiliza para comprobar si la evaluación de una condición es verdadera o falsa y en base a dicha evaluación se ejecutan una serie de sentencias.

Esta sentencia tiene diferentes variantes en su sintaxis. Siendo las siguientes.

// acción simple cuando se cumple la condición
if ( condición ) acción;
// acción simple cuando se cumple la condición y acción simple
// cuando la condición no se cumple
if ( condición ) acción; else acción;
// varias acciones cuando se cumple la condición
if ( condición ) {
    acción;
    acción;
    ...
}
// varias acciones cuando se cumple la condición y varias
// acciones cuando no se cumple la condición
if ( condición ) {
    acción;
    acción;
    ...
} else {
    acción;
    acción;
    ...
}
// acción simple cuando se cumple la condición y varias
// acciones cuando no se cumple la condición
if ( condición ) acción;
else {
    acción;
    acción;
    ...
}
// varias acciones cuando se cumple la condición y
// acción simple cuando no se cumple la condición
if ( condición ) {
   acción;
   acción;
   ...
} else acción;

El funcionamiento de la sentencia es el mismo para todas las variantes de sintaxis, en resumen, se realiza la evaluación de la condición, la expresión de condición se evalúa con un resultado “true” o “false”, verdadero o falso, si el resultado es verdadero se ejecutan las sentencias del bloque pertenecientes al “if”, si el resultado es falso se ejecutan las sentencias pertenecientes al bloque “else”, que se puede traducir por sino o en caso contrario.

La condición que se especifica puede ser simple o compuesta y los operadores de comparación que se pueden utilizar son los siguientes.

Para especificar condiciones compuestas se pueden utilizar los operadores lógicos siguientes:

Utilizando los operadores anteriores se pueden realizar condiciones compuestas de tipo Y o de tipo O, e incluso mezclar ambos operadores en la misma condición. Observe el siguiente ejemplo.

// Ejemplos de Si Condicional con condiciones compuestas y simples
// Definición de variables
var vehiculo = "Coche";
var edad = 47;
var web = "www.aprendoencasa.com";
// Evaluación de condiciones
if ( vehiculo=="Coche" || vehiculo =="Moto" ) {
 console.log("El vehiculo elegido utiliza energia no renovable.");
}
if ( edad>=18 && edad<=50 ) {
 console.log("Todavia no tiene que renovar su permiso.")
}
if ( web == "www.aprendoencasa.com" ) {
 console.log("Gracias por su visita, espero que vuelva.");
}

El resultado del ejercicio anterior ha de ser similar al que se muestra a continuación.

Ejercicios JavaScript – IF Sí Condicional

Ejercicios para realizar prácticas de programación con JavaScript.

Intente realizar los siguientes ejercicios que se proponen a continuación. Si tiene dudas puede utilizar los comentarios para expresarlas y que el administrador del curso y otros usuarios puedan ayudarle. Un saludo y gracias por su visita.

Ejercicio 1 – Si Condicional

Realizar un ejercicio en el cual se definan las variables necesarias para solicitar una “edad”, un “nombre” y “país”. Una vez definidas las
variables se ha de visualizar un mensaje en la consola que diga “Mayor de Edad” o “Menor de Edad”, dependiendo de que la edad introducida sea mayor o menor de 18 años.

Visualizar un mensaje
que diga “Hola” y visualice también el nombre introducido en la variable, siempre y cuando la variable sea distinta de nada.

Ejercicio 2 – Si Condicional

Realizar un ejercicio en el cual se definan las siguientes variables “precio_kilometro”, “vehiculo”, “kms_recorridos”, “litros_consumidos”. A continuación, defina y realice los cálculos para obtener el total a pagar, teniendo en cuenta las siguientes consideraciones.

Si el vehículo es “coche”, el precio kilometro ha de ser 0.10, si es “moto” ha de ser 0.20 y si es “autobús” 0.5. si los litros consumidos están entre 0 y 100 se ha de añadir 1 al total, si es mayor la cantidad de litros consumidos se ha de añadir 2 al total.

Ejercicio 3 – Si Condicional

Intenta realizar un ejercicio en el cual se definan las variables que consideres necesarias y utilizar el sí condicional para obtener un resultado. Este ejercicio es de libre elección, ¡prueba tu inventiva!

Gracias por tu visita y un saludo!!!

Posibles soluciones al ejercicio 1

A continuación planteamos las posibles soluciones a los tres ejercicios solicitados anteriormente, es preferible que si estas empezando en este mundillo, no copies las soluciones e intentes plantear tu mismo las respuesta.

/*
    Creación de las variables a utilizar
*/
var Nombre = "";
var Edad = 0;
var Pais = "";
/*
    Solicitar utilizando el navegador y la orden prompt
    los valores de las tres variables
*/
Nombre = prompt("Teclee Nombre ");
Edad = prompt("Teclee Edad ");
Pais = prompt("Teclee País ");
/*
    Comprobar si es mayor de edad o no, y visualizar un
    mensaje en la CONSOLA
*/

if(Nombre!="") {
    console.log("Hola "+Nombre);
}

if( Edad>=18 ) {
    console.log(" Desde "+Pais+" Eres mayor de edad");
} else {
    console.log(" Desde "+Pais+" Eres menor de edad");
}

Posibles soluciones al ejercicio 2

/*
    Declaracion de variables
*/
var precio_kilometro = 0;
var vehiculo = "";
var kms_recorridos = 0;
var litros_consumidos = 0;
/*
    Solicitar datos por navegador
*/
vehiculo = prompt("Vehiculo ");
kms_recorridos = parseFloat(prompt("Kms. Recorridos "));
litros_consumidos = parseFloat(prompt("Litros Consumidos "));
/*
    Realizar los calculos una vez solicitados los datos
*/
if( vehiculo == "coche" ) {
    precio_kilometro = 0.10;
}
if( vehiculo == "moto" ) {
    precio_kilometro = 0.20;
}
if( vehiculo == "autobus" ) {
    precio_kilometro = 0.50;
}
var totalkms = 0;
var total = 0;
totalkms = kms_recorridos * precio_kilometro;
if( litros_consumidos <=100 ) {
    total = totalkms + 1;
} else {
    total = totalkms + 2;
}
/*
    Visualizar resultados por consola
*/
console.log("Vehiculo -> "+vehiculo);
console.log("Kms x Precio Km. = "+kms_recorridos+" x "+precio_kilometro+" = "+totalkms );
console.log("Total Presupuesto -> "+total);

Posibles soluciones al ejercicio 3

Este es a tu elección!!! la solución la tienes tu.

El bucle se podría traducir por Para…En. Y tiene la siguiente sintaxis.

// Bucle for...in
for(var variable in objeto) {
  Acción/es...;
  Acción/es...;
}

El funcionamiento del bucle seria el siguiente, al entrar al bucle se define una variable, normalmente con var, de esta forma la variable queda disponible de forma local a toda la función donde se encuentra el bucle, a continuación se especifica el objeto sobre el cual se quiere realizar la iteración, en cada iteración se lee una de las propiedades del objeto y el nombre de la misma es asignado a la variable definida anteriormente, el bucle finaliza cuando no encuentra más propiedades que leer del objeto.

El siguiente ejemplo muestra el funcionamiento del bucle for…in, visualizando el nombre de todas las propiedades de un objeto definido previamente.

// Declaración de objeto
var objeto = new Object();
// Declaración de propiedades del objeto
objeto.propiedad1 = "valor_propiedad_1";
objeto.propiedad2 = "valor_propiedad_2";
objeto.propiedad3 = "valor_propiedad_3";
objeto.propiedad4 = "valor_propiedad_4";
// Iterar sobre todas las propiedades del objeto
for ( var leepropiedad in objeto ) {
  console.log(leepropiedad);
}

Ejercicios JavaScript – Bucles FOR…IN

Al ejecutar el programa, el resultado que ha de mostrar el navegador en su consola, ha de ser similar al que se muestra a continuación. Como se puede apreciar se muestra el nombre de la propiedad y no el valor de la misma.

Prácticas JavaScript – Bucles For…In

A continuación se visualiza otro ejemplo de utilización del bucle, en el que se itera sobre todas las propiedades del objeto, mostrando su nombre y valor.

// Declaracion del objeto
var coche = new Object();
// Declaracion de propiedades del objeto
coche.numero_ruedas = 4;
coche.color = "rojo";
coche.combustible = "diesel";
coche.ocupantes = 2;
coche.marca = "cualquiera";
coche.modelo = "indiferente";
// Bucle for...in que itera sobre todas las propiedades
// del objeto mostrando en esta ocasión el nombre de la
// propiedad y su valor.
for(var propiedad in coche) {
  console.log(propiedad + " = " + coche[propiedad]);
}

Ejercicios JavaScript – Bucle For…In

Gracias por vuestra visita y  un saludo!!!

En varios lenguajes de programación se establecen diferencias entre las diferentes sentencias para realizar bucles, distinguiéndolas principalmente en bucles condicionales y bucles incondicionales.

En JavaScript no se aprecia tal distinción ya que las sentencias que sirven para realizar iteraciones, tienen todo un factor de condición.

Aun así, es conveniente saber aplicar un tipo u otro y esto dependerá en gran medida de que se sepa el principio y final de un bucle, o el bucle dependa de una condición. Dependiendo de esta medida a tomar se utilizará una sentencia u otra.

La primera sentencia para realizar bucles, es el bucle denominado For (“Para”), el cual tiene la siguiente sintaxis:

for ( variable = valor_inicial ; condición_a_evaluar ; incremento ) {
     acción/es a realizar ;
     acción/es a realizar ;
};

El funcionamiento de la sentencia For, es el siguiente, cuando el flujo del programa entra en el bucle, se asigna en primer lugar “valor_inicial”, a la “variable” especificada, a continuación se realiza la evaluación de la condición especificada en “condición_a_evaluar”, si la condición se cumple, es decir es verdadera se ejecutan las acciones especificadas dentro del bloque correspondiente al bucle, otra forma de expresarlo es que se ejecutan las ordenes que estén situadas entre las llaves { } del bucle, una vez ejecutadas las sentencias del bloque, se aplica a “variable” el incremento especificado por “incremento” y se vuelve a evaluar la condición, repitiéndose el proceso de nuevo si es verdadera y finalizando la ejecución del bucle en caso de ser falsa.

A este tipo de bucle se les denomina incondicionales, aunque como se ha comentado anteriormente tengan condición, y normalmente se han de utilizar cuando se conoce el principio y el final de repetición del bucle.

Teniendo en cuenta la sintaxis anterior, el siguiente ejercicio práctico con solución, plantea un algoritmo que visualice los números del 1 al 10.

/*
  Algoritmo que visualiza los números del 1 al 10
*/

var numeros = 0;
for( numeros = 1 ; numeros < 11 ; numeros++ ) {
    console.log(numeros);
}

/*
  Algoritmo que visualiza los números del 10 al 1
*/

for (let contar = 10 ; contar > 0 ; contar-- ) {
    console.log(contar);
}

/*
  Ejercicios y prácticas de programación en JavaScript
  Gracias por visitar www.aprendoencasa.com
*/

Poco a poco iremos incrementado la dificultad de los ejercicios y es por eso que intercalaremos explicaciones de otros temas. En esta ocasión el bucle For, que hemos utilizado en el ejemplo anterior, utiliza para aplicar el incremento de valor a la unidad el operador ++.

Se puede utilizar para incrementar o decrementar el valor de la variable el operador unario “Incremento” ( ++ ), y el operador unario “Decremento”.

La función del operador ++ es la de aumentar en una unidad el valor del operando, dependiendo de donde se situa respecto al operando se denomina preIncremento o posIncremento. Observe el siguiente ejemplo:

/*
  Ejemplo práctico operador Incremento y Decremento
*/
var NumeroA = 10;
var NumeroB = 10;
var NumeroC = 0;
var NumeroD = 0;
NumeroC = NumeroA++;
NumeroD = ++NumeroB;
console.log("A = "+NumeroA);
console.log("B = "+NumeroB);
console.log("C = "+NumeroC);
console.log("D = "+NumeroD);

El resultado una vez ejecutado en el navegador es el siguiente.

Ejercicios JavaScript – Bucles FOR

Como se puede ver en el ejemplo la variable “NumeroC”, contiene como valor 10, esto es mientras que el resto contiene como valor 11, es debido a que se ha utilizado el operador como postincremento y por tanto primero se realiza en primer lugar la asignación y posteriormente se aumenta el valor de la variable “NumeroA”, en una unidad.

Volviendo a la sentencia For para realizar bucles, el incremento no necesariamente ha de ser de una unidad, ya que se puede utilizar el concepto de acumulador para el incremento, variable=variable+valor.

El siguiente ejemplo práctico muestra un ejercicio en el cual se realiza la visualización de los números pares entre 2 y 20.

/*
 Ejercicios y prácticas resueltas en JavaScript
 Sentencia For - Bucles
 www.aprendoencasa.com
 
 Ejercicio: Visualizar los números pares entre 2 y 20
 
*/

for(let numero=2; numero<=20 ; numero=numero+2 ) {
  console.log( numero );
}

El resultado en el navegador ha de ser el siguiente.

Prácticas en JavaScript – Bucles FOR

El siguiente ejercicio resuelto que se muestra solicita mediante un formulario html, los valores de inicio y final del bucle for, y visualiza como quedaría el bucle generado y el resultado que se obtendría del mismo.

Ejercicios JavaScript – Bucles FOR

Archivo index.html

<!DOCTYPE HTML>
<html>
<head>
  <title>Bucle For - Javascript</title>
  <meta charset="utf-8">
  <meta name="author" content="José Sáez">
  <meta name="generator" content="www.aprendoencasa.com">
  <link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
    <!-- Titulo -->
    <h3>Bucle For - Javascript</h3>
    <!-- Parrafos explicación -->
    <p>Ejercicios y prácticas de programación en JavaScript con solución</p>
    <p>El siguiente ejercicio muestra el uso del bucle For en JavaScript permitiendo la introducción de los valores iniciales y finales del bucle, mostrando el resultado en el navegador.</p>
    <!-- Formulario de petición de datos -->
    <form action="#" name="formulario1" id="formulario1">
        <label for="Inicio">Inicio</label><br>
        <input type="text" name="Inicio" id="Inicio" /><br>
        <label for="Final">Final</label><br>
        <input type="text" name="Final" id="Final" /><br><br>
        <!-- Botones -->
        <button id="generar" name="generar">Generar</button>
        <button id="ejecutar" name="ejecutar">Ejecutar</button>
    </form>
    <br>
    <!-- Ventana previsualización Orden -->
    <label for="generado">Previsualizar Sentencia</label><br>
    <textarea name="generado" id="generado" cols="60" rows="5" readonly></textarea>
    <br>
    <!-- Ventana previsualización resultado -->
    <label for="resultado">Resultado</label><br>
    <textarea name="resultado" id="resultado" cols="60" rows="5" readonly></textarea>
    <!-- Inserción de script javascript -->
    <script src="principal.js"></script>
</body>
</html>

Archivo estilos.css

/*
    FUENTES GOOGLE FONTS
    ====================
    Importar fuentes del servidor google
*/

@import url('https://fonts.googleapis.com/css?family=Sansita');
@import url('https://fonts.googleapis.com/css?family=PT+Sans');
@import url('https://fonts.googleapis.com/css?family=Nova+Mono');


/* Establecer la fuente del titulo */
body h3 {
    font-family: 'Sansita', sans-serif;
}

/* Establecer la fuente de los parrafos */
body p {
    font-family: 'PT Sans', sans-serif;
}


/* Establecer estilos para el area de texto de previsualizacion de la sentencia For */
#generado {
    background-color: #EEEEEE;
    color: #ffffff;
    font-family: 'Nova Mono', monospace;
}

Archivo principal.js

/*
    Funcion a ejecutar al cargar la página
*/
window.onload = function() {
    /* Asignar evento al botón generar sentencia */
    document.getElementById('generar').addEventListener("click",function(e){
        e.preventDefault();
        var areagenerado = document.getElementById("generado");
        areagenerado.innerHTML = "for (let x = "+document.getElementById("Inicio").value +
        " ; x <= "+document.getElementById("Final").value + " ; x++) {\n" +
        " console.log( '-' + x  );\n" +
        "}";
    });
    /* Asignar evento al botón generar previsualización */
    document.getElementById("ejecutar").addEventListener("click",function(e){
        e.preventDefault();
        var arearesultado = document.getElementById("resultado");
        var mensaje = "";
        var inicio = document.getElementById("Inicio").value;
        var final = document.getElementById("Final").value;
        for(let x=inicio; x<=final; x++) {
            mensaje=mensaje+"-"+x;
        }
        arearesultado.innerHTML = mensaje;
    });
}

Si quieres seguir practicando puedes plantearte realizar los siguientes ejercicios y prácticas propuestas.

Ejercicio 1 – Bucle For

Realizar un ejercicio que visualice los números del 1 al 10 en orden inverso.

Ejercicio 2 – Bucle For

Vamos a complicar los ejercicios. Realizar un ejercicio en el cual se visualice una cuenta de 1 a 10, y a la vez, una cuenta inversa de 10 a 1.

Ejercicio 3 – Bucle For

Más complicación!!, realizar un ejercicio en el cual se visualicen los números primos del 1 al 20.

Gracias por visitarnos y un saludo!!!

Existen seis tipos de datos denominados primitivos, los tipos de datos primitivos son aquellos que el lenguaje gestiona directamente, mientras que existe un tipo de dato más denominado objeto, los cuales son construidos por el usuario, utilizando los datos primitivos y formando un nuevo tipo compuesto, el cual el lenguaje no gestiona directamente, sino que lo hace el programador.

Los seis tipos de datos primitivos son:

• Boolean : un tipo de dato booleano es un dato lógico el cual solo puede contener los valores true (verdadero) o false (falso).
• null: un valor null representa una referencia que apunta casi siempre de forma intencionada, a un objeto invalido o a una dirección de referencia inexistente.
• undefined : un valor primitivo, asignado automáticamente a las variables definidas, pero no inicializadas.
• Number : en JavaScript Number, es un tipo de dato numérico, el cual se corresponde con un valor de doble precisión de 64 bits. En otros lenguajes existen tipos diferenciados como enteros, flotantes, dobles, etc. En javascript solo se especifica este tipo y dependiendo del valor el lenguaje lo trata automáticamente.
• String: en cualquier lenguaje de programación el tipo string, se denomina cadena de texto y su valor es una secuencia de caracteres usados para representar un texto.
• Symbol: es un tipo de datos cuyos valores son únicos e immutables. Dichos valores pueden ser utilizados como identificadores (claves) de las propiedades de los objetos.

El otro tipo de dato es el tipo Object, el tipo object se refiere a una estructura de datos que contiene datos e instrucciones para trabajar con los datos.

Conversión de tipos

El lenguaje JavaScript es un lenguaje de tipo dinámico, es decir no hace falta indicar el tipo de dato de una variable cuando se crea su declaración, y los datos se convierten automáticamente de un tipo a otro dependiendo de las necesidades del código que se está ejecutando.

El siguiente ejemplo muestra como el lenguaje realiza automáticamente la conversión de tipos entre número y cadena de texto, al utilizar los datos en una instrucción, independientemente de haber declarado inicialmente las variables según un tipo.

// Declaración de variable
var antiguedadWeb = 12;
// conversión automática
antiguedadWeb = "es bastante joven";

En conversiones en las cuales intervenga cadenas de texto con valores numéricos y el operador de suma +, javascript realiza la conversión de los tipos numéricos a cadenas de texto. En conversiones en las cuales intervengan otros operadores que no sea la suma, javascript no realiza la conversión a cadena de texto y mantiene el valor numérico.

// Declaración de variables
var numeroA = 100;
var numeroB = 120;
var mensaje1 = "Hola Mundo Soy ";
var mensaje2 = " Adios Mundo Soy ";
var resultadoA = mensaje1 + numeroA;
var resultadoB = mensaje1 + numeroB + mensaje2;
console.log(resultadoA);
console.log(resultadoB);

Ejercicios JavaScript -Tipos en JavaScript

Conversión de string (cadena de texto) a números

Función parseInt()

La función parseInt(), permite realizar la conversión de un string a número, con esta función se realiza la conversión a un tipo de dato entero. La sintaxis de la función es la siguiente.

parseInt( string , base )

Los parámetros especificados son los siguientes:

string: el valor a convertir, que ha de ser una cadena de texto (string).

base (radix) : también se denomina radix, es la base matemática de conversión que se quiere aplicar. Normalmente para especificar la base de numeración decimal, se ha de especificar el valor 10.

La función devuelve como resultado un valor numérico de tipo entero, si no se puede realizar la conversión de la cadena de texto a número se devuelve como resultado NaN.

El siguiente ejemplo muestra el uso de la función:

// Declaración de variables
var A = "100";
var B = "Hola";
var C = "200 Unidades";
var D = 0;
var E = 0;
var F = 0;
D = parseInt(A,10);
E = parseInt(B,10);
F = parseInt(C,10);
console.log("D Contiene : " + D );
console.log("E Contiene : " + E );
console.log("F Contiene : " + F );

Prácticas JavaScript – Tipos en JavaScript

Función parseFloat()

La función parseFloat(), permite realizar la conversión de un string a número con decimales, con esta función se realiza la conversión a un tipo de dato flotante o decimal. La sintaxis de la función es la siguiente.

parseFloat( string )

Los parámetros especificados son los siguientes:

string: el valor a convertir, que ha de ser una cadena de texto (string).

La función devuelve como resultado un valor numérico de tipo flotante, si no se puede realizar la conversión de la cadena de texto a número se devuelve como resultado NaN.

El siguiente ejemplo muestra el uso de la función:

// Declaración de variables
var A = "100.342";
var B = "FF2";
var C = "3.14";
var D = 0;
var E = 0;
var F = 0;
D = parseFloat(A);
E = parseFloat(B);
F = parseFloat(C);
console.log("D Contiene : " + D );
console.log("E Contiene : " + E );
console.log("F Contiene : " + F );

Gracias por vuestra visita y un saludo!!!

La sintaxis que se ha de utilizar para la sentencia switch, es la siguiente.

switch ( variable_a_evaluar ) {
  case Valor :
    acción/es a realizar …;
    break;
  case Valor :
    acción/es a realizar …;
    break;
  default:
    acción/es a realizar;
    break;
}

Para comprender su funcionamiento mejor, vamos a plantear un caso en el cual se solicita el “estado civil” de una persona, las opciones posibles serán “casado”, “separado”, “soltero” y “viudo”, a las distintas opciones le asignaremos un valor a cada una desde 1 a 4, y la sentencia switch ha de evaluar el valor y según cual sea visualizar un mensaje u otro. El ejercicio planteado podría ser el siguiente.

var estadocivil = 1;
switch ( estadocivil ) {
case 1:
    document.write(“El  usuario/a está casado/a”);
    break;
  case 2:
    document.write(“El usuario/a está separado/a”);
    break;
  case 3:
    document.write(“El usuario/a está soltero/a”);
    break;
case 4:
    document.write(“El usuario/a está viudo/a”);
    break;
default:
    document.write(“El usuario/a  no ha tecleado una opción válida”);
    break;
}

La sentencia “break”, que incluye cada grupo de instrucciones, hace que el programa solo ejecute las acciones que corresponden al valor evaluado, si se omite el programa continuara ejecutando las sentencias de los diferentes casos expresados en la sentencia switch.

Aprovechando esta circunstancia, se puede utilizar “break” o no para examinar “rangos” de valores, supongamos que se quiere realizar un programa en el cual se solicita un valor de 1 a 10 y dependiendo de si el valor introducido es de 1 a 4, el descuento de un artículo será del 2%, si es de 5 a 8 será del 3% y si es de 9 a 10 será del 4%. Teniendo en cuenta los parámetros anteriores puede quedar así su programación.

var tipo = 7;
switch( tipo ) {
  case 1:
  case 2:
  case 3:
  case 4:
       descuento = 2/100;
       break;
  case 5:
  case 6:
  case 7:
  case 8:
       descuento = 3/100;
       break;
  case 9:
  case 10:
       descuento = 4/100;
       break;
  default:
       descuento = 0;
       break;
}

Gracias por vuestra visita y un saludo!!!

// Ejercicios de programación JavaScript
// sintaxis del bucle condicional while
while( condicion ) {
  acción/es...;
  acción/es...;
}

El funcionamiento del bucle se puede interpretar de la siguiente forma. En primer lugar al entrar al bucle se evalúa la condición, y en caso de que la misma de una evaluación positiva se ejecutan las instrucciones contenidas en el ámbito del bucle, una vez ejecutadas las sentencias del bucle se vuelve a evaluar la condición repitiéndose de nuevo el ciclo.

La diferencia entre el bucle while y el bucle do…while, es que en el primero se evalúa la condición y en caso de no cumplirse no se realiza ninguna acción, mientras que en el segundo como mínimo se ejecutan una vez las acciones interiores del bucle.

El primer ejercicio que se propone con solución en JavaScript, es realizar un bucle que visualice los números del 1 al 10, en orden creciente y decreciente a la vez.

// Ejercicios de programación en JavaScript
// https://www.aprendoencasa.com
var numero = 1;
while( numero < 11 ) {
  console.log( numero + " - " + (11-numero) );
  numero++;
}

Ejercicios JavaScript – Bucle While

Una vez ejecuta el programa el resultado que se ha de obtener en la consola del navegador, ha de ser similar al que se muestra en la imagen siguiente.

Prácticas JavaScript – Bucle While

El siguiente ejercicio que se propone es indicar un numero entero y realizar el desglose del mismo por dígitos, es decir mostrar millares, centenas, decenas, etc. Utilizando para realizar el ejercicio bucles de tipo while.

// Ejercicios de programación en JavaScript
// Desglosar valor numerico en millares, decenas, etc.
// https://www.aprendoencasa.com
var numero = 123456;
while( numero>0 ) {
  resto = numero%10;
  numero = parseInt(numero/10);
  console.log(resto);
}

Ejercicios JavaScript – bucle While

Una vez que se ha ejecutado el programa, el resultado que se ha de obtener en la consola del navegador, ha de ser similar al que muestra en la imagen siguiente.

Prácticas JavaScript – Bucle While

Gracias por vuestra visita y un saludo!!!

Esperamos vuestros comentarios!!!

Los “literales” se utilizan para representar valores en JavaScript. Son valores fijos, no variables, que como su nombre indica son literalmente proporcionados por el programador en el código. El término “literal” uno de sus significados es “Que reproduce exactamente lo que se ha dicho o se ha escrito “, en el código se utiliza para expresar los valores que se desea que tengan las variables, objectos, etc.

Supongamos el siguiente ejemplo de código en el cual se realiza la definición de variables inicializando las mismas con un valor.

var saludo = “Hola Mundo”;
var edad = 47;

Pues los dos valores expresados “Hola Mundo” y 47, es lo que denominamos literales.

Los diferentes tipos de literales que se pueden encontrar son:

Literales Array

un literal de tipo array es una lista entre corchetes “[ ]” de cero o más expresiones, las cuales cada una de ellas representan un valor del array (la traducción de array, puede ser tabla, conjunto, formación, tabla, matriz, vector, etc.).

Cuando se crea un array utilizando un literal de tipo array, el array se inicializa con los valores especificados en la lista y la longitud del array viene determinada por el número de elementos de la lista.

El siguiente ejemplo muestra la creación de un array denominado personas el cual se inicializa a cuatro valores con un literal de tipo array.

var nombresPersonas = ["Mar","José","Lucía"];

No se tienen porque especificar todos los valores del array, para realizar esta acción se ponen las comas que delimitan el elemento, pero no el valor del mismo, esa posición del array será inicializada con un valor undefined.

// Ejemplo de inicialización de array con literales
var animales = ["Perro", ,"Gato"];

Se ha de tener en cuenta que los índices que se utilizan para acceder a los elementos de un array, comienzan en el valor 0. Supongamos el siguiente ejemplo.

// Creación de array con elementos separados con comas adicionales.
var nombresPersonas = [ , "Mar" , , "Lucía" ];

El ejemplo anterior crea un array de cuatro elementos 0, 1, 2 y 3, los elementos 0 y 2 tendrán un valor “undefined”.

Literales Booleanos

Los literales booleanos tienen dos valores posibles true y false, no se han de confundir con los valores true y false del objeto Booleano.

Literales Enteros

Los enteros se pueden expresar en binario (“en base 2”), en octal (“en base 8”), en decimal (“en base 10”), y en hexadecimal (“en base 16”).

• Los literales enteros en decimal son una secuencia de dígitos del 0 al 9, que no han de comenzar por el digito 0, ya que expresaría un cambio de base.
• El literal 0 al principio del literal indica que el literal está en base octal y solo se pueden utilizar los dígitos del 0 al 7.
• Si el literal se inicia con 0x, se está indicando que el literal está en base hexadecimal y puede incluir los dígitos del 0 al 9 y los caracteres de la “a” a la “f”, o de la “A” a la “F”.

Los siguientes ejemplos muestra el uso de literales enteros en distintas bases.

// Ejemplos de literales enteros en distintas bases 
var edad_Persona1 = 30: 
var edad_Persona2 = 036;
var edad_Persona3 = 0x1E;

Literales de punto flotante

Los literales de punto flotante expresan valores numéricos que contienen decimales. y puede estar compuesto por las siguientes partes.

• Un entero en decimal que puede estar precedido por el símbolo “+” o “-“.
• Un símbolo “.” Que expresa el valor decimal y se utiliza el punto decimal.
• Puede estar compuesto por una fracción
• Puede tener un exponente. En caso de especificarse se ha de anteponer el carácter “e” o “E” al número entero que representa el exponente.

Algunos ejemplos de literales en punto flotante pueden ser los siguientes:

// Ejemplos de literales en punto flotante
var dato_1 = 3.1415;
var dato_2 = -3.1E12;
var dato_3 = .1e12;

Literales de tipo Objeto

Un literal de tipo objeto es una lista compuesta de 0 o más parejas de valores. Cada elemento de la lista este compuesto por una propiedad y un valor. Los elementos de la lista se han de encerrar entre llaves “{ }”.

Los valores constan de una “propiedad” y un valor para dicha propiedad. La propiedad se expresa como un literal de tipo texto, y han de cumplir con los nombres validos que se pueden utilizar en javascript. El valor para la propiedad puede ser de cualquier tipo, incluso puede ser otro literal de tipo objeto.

Si el nombre de la propiedad no cumple con los nombres válidos, la propiedad no podrá ser accedida utilizando la notación “.” Para acceder a las propiedades de objeto, pero si se puede acceder a la misma utilizando la notación de índices para arrays.

El siguiente ejemplo muestra el uso de literales de tipo objeto en javascript.

// Definición del objeto en javascript
var Coche = {
  ruedas : 4,
  color: "rojo",
  "max velocidad" : 120,
  combustible : "Diesel"
}
console.log( Coche.ruedas );
console.log( Coche.color );
console.log( Coche[2] );
console.log( Coche.combustible );

Literales String

Un literal de tipo string se corresponde con cero o más caracteres encerrados dentro de unas comillas dobles “” o comillas simples ‘’.  En caso de realizar la delimitación de los caracteres con un tipo concreto de comillas, no se pueden mezclar las comillas simples y dobles.

Javascript permite utilizar cualquiera de las funciones del objeto String, aplicándolas sobre un literal, ya que javascript crea temporalmente con el literal un objeto de tipo cadena. Se recomienda utilizar literales string en vez de objetos string, a no ser que sea necesario crear un objeto.

Dentro de los literales string se pueden especificar un conjunto de caracteres especiales, normalmente denominados caracteres de escape, siendo estos los siguientes.

• \b (Retroceso)
• \f (Avance de página)
• \n (Nueva línea)
• \r (Retorno de línea)
• \t (Tabulador)
• \v (Tabulador Vertical)
• \’ (Apóstrofe o comillas sencillas)
• \” (Comillas Dobles)
• \\ (Carácter BackSlash)
• \XXX (Caracteres con codificación latin-1, siendo XXX el código en octal del carácter, entre 0 y 377)
• \xXX (Caracteres con codificación latin-1, siendo XX dos dígitos hexadecimales entre 00 y FF)
• \uXXXX (Caracteres Unicode, siendo XXXX cuatro dígitos hexadecimales)

Los siguientes datos son ejemplos de literales de string.

// Ejemplos de literales string
var nombrePersona = "José Sáez";
var direccionWeb = 'https://www.aprendoencasa.com';
var mensaje = "Hola \"Mundo\", Que tal!";

Gracias por vuestra visita y un saludo!!!

Este bucle es el denominado do…while, el cual se puede traducir por haz…mientras, el bucle tiene la siguiente sintaxis.

do {
  Acción/es…;
  Acción/es…;
} while ( condición_a_evaluar );

Teniendo en cuenta la sintaxis anterior realizar un ejercicio en el cual se muestren los valores de 1 a 10.

// Ejercicios y prácticas de programación en JavaScript
// Crear variables auxiliares
var contador=0;
// Inicializar el contador 
contador=1;
// repetir mientras que el contador tenga
// un valor inferior a 10
do {
  // visualizar el valor de contador
  console.log(contador);
  // incrementar contador en una unidad
  contador=contador+1;
} while(contador<11);
// Se ha de tener en cuenta que el no incrementar
// el contador puede tener como consecuencia
// la ejecución de un bucle infinito y por tanto
// el bloqueo del programa.
// Gracias por su visita a www.aprendoencasa.com

El resultado que se ha de obtener en la consola del navegador ha de ser similar al que se muestra a continuación.

Ejercicios JavaScript – Bucles

¡¡ Otro ejercicio con más dificultad !!, no desesperéis si no os sale, intentar realizar ejercicios más simples, hasta lograr entender el que se os plantea a continuación. Recordar que, para un programador, la paciencia y constancia no son virtudes, ¡son obligaciones! 🙂

El ejercicio que se plantea es rellenar una lista de un formulario con los números del 1 al 20 y traspasar a otra lista los números primos de la primera lista.

Para realizar estas acciones se han insertado tres botones, uno que genera los números del 1 al 20 en la primera lista, un segundo botón que permite borrar los números generados de la primera lista y por último otro botón que lee los números de la primera lista y traspasa a la segunda solo aquellos que sean primos.

Ejercicios JavaScript – Bucles do…while

Archivo: index.html

<!DOCTYPE HTML>
<html>
<head>
  <title>Bucle Do...While</title>
  <meta charset="utf-8">
  <meta name="author" content="josé sáez">
  <meta name="generator" content="www.aprendoencasa.com">
  <link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
<!-- titulo -->
<h3>Bucle Do...While</h3>
<!-- formulario -->
<form action="#" name="formulario1" id="formulario1">
    <!-- seccion izquierda con lista de números -->
    <section class="izquierda">
        <label for="lista1">Lista con números generados</label>
        <br>
        <select name="lista1" id="lista1" size="20"></select>
    </section>
    <!-- seccion central con los botones de acción -->
    <section class="centro">
        <button id="generar_numeros" name="generar_numeros" id="generar_numeros">Generar Números</button>
        <button id="borrar_lista" name="borrar_lista" id="borrar_lista">Borrar Lista</button>
        <button id="generar_primos" name="generar_primos" id="generar_primos">Generar Primos</button>
    </section>
    <!-- sección derecha con la lista de números primos -->
    <section class="derecha ultimo">
        <label for="lista2">Lista con números primos</label>
        <br>
        <select name="lista2" id="lista2" size="20"></select>
    </section>
    <div class="limpiar"></div>
</form>
<!-- cargar archivo de javascript -->
<script src="principal.js"></script>
</body>
</html>

Archivo: estilos.css

/*
    Incluir fuentes de google
*/
@import url('https://fonts.googleapis.com/css?family=Sansita');
/* fuente para todo el documento */
body {
    font-family: 'Sansita', sans-serif;
}
/* Formulario */
body form {
    width: 90%;
    margin: 0 auto;
    padding: 1%;
    box-sizing: border-box;
    border: 1px solid grey;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}
/* Sección izquierda del formulario */
.izquierda, .centro, .derecha {
    box-sizing: border-box;
    float: left;
    margin-right: 5%;
    width: 30%;
}
label {
    margin-bottom: 5px;
    display: block;
    text-align: center;
}
select {
    width: 100%;
    background-color: #66CC99;
    color: #ffffff;
}
button {
    border: none;
    background-color: #0099CC;
    padding: 5px;
    width: 100%;
    color: #ffffff;
    height: 40px;
    margin: 5px;
}
.ultimo {
    margin-right: 0px;
}
.limpiar {
    clear: both;
}

Archivo: principal.js

/*
    Bucle do ... while ejercicios y prácticas de programación aprendoencasa.com
*/
window.onload = function() {
    document.getElementById("generar_numeros").addEventListener("click",function(e){
        e.preventDefault();
        var lista = document.getElementById("lista1");
        lista.options.length = 0;
        var contar=1;
        do {
            let opcion = document.createElement("option");
            opcion.text = contar;
            lista.add(opcion);
            contar=contar+1;
        } while(contar<=20);
    });
    document.getElementById("borrar_lista").addEventListener("click",function(e){
        e.preventDefault();
        var lista = document.getElementById("lista1");
        lista.options.length = 0;
    });
    document.getElementById("generar_primos").addEventListener("click",function(e){
        e.preventDefault();
        let listap = document.getElementById("lista1");
        let listas = document.getElementById("lista2");
        let cuantoslistap = listap.options.length;
        if(cuantoslistap>0) {
            let contar=0;
            do {
                let numero = 0;
                numero = listap.options[contar].text;
                let divisor_inicial = 2;
                let divisor_final = numero;
                let divisores = divisor_inicial;
                let primo = "si";
                for(let d = divisor_inicial; d < divisor_final && primo=="si" ; d++ ) {
                    if( numero%d == 0 ) {
                        primo="no";
                    }
                }
                if(primo=="si") {
                    let opcion = document.createElement("option");
                    opcion.text = numero;
                    listas.add(opcion);
                }
                contar++;
            } while(contar<cuantoslistap);
        }
    })
}

Gracias por vuestra visita y un saludo!!!

la sintaxis del lenguaje JavaScript esta influenciada por otros lenguajes de programación, como pueden ser C, Java, Perl, Python, Etc. Por esta razón los programadores acostumbrados a estos lenguajes tendrán mas fácil su aprendizaje.

Las ordenes o instrucciones que tiene el lenguaje para ser ejecutadas, los programadores normalmente las denominamos “SENTENCIAS”, estas sentencias cuando son escritas en javascript para diferenciarlas unas de otras han de estar separadas por un punto y coma, resumiendo cualquier orden que se exprese en el editor de código ha de finalizar en punto y coma (;)

El lenguaje de javascript, al igual que en otros lenguajes, se utilizan palabras reservadas, también denominadas palabras clave o keywords, estas solo se pueden utilizar para expresar las sentencias, pero el programador no puede utilizarlas como le convenga, ya que el interprete del lenguaje las considera reservadas por el propio lenguaje.

Como es lógico se pueden utilizar para escribir nuestros programas, espacios en blanco, tabulaciones, saltos de lineas, etc. De esta forma se podrá dar una estructura visual al programa escrito y facilitar su lectura y modificación.

Comentarios

La mayoría de lenguajes de programación, incluyen la opción de poder insertar comentarios en el código mientras se esta realizando un programa, de esta forma se pueden insertar anotaciones en el texto, que permiten aclarar la legibilidad del código y ayudar al programador a diferenciar los diferentes algoritmos en su programa.

Cuando se quiera insertar comentarios en el código, javascript permite utilizar comentarios de una sola linea y comentarios de varias lineas.

Para insertar un comentario de una sola linea se ha de utilizar la estructura “//” antes del comentario, de esta forma se especifica que es un comentario de una sola linea.

Para insertar un comentario de varias lineas se ha de utilizar la estructura “/*” para comenzar el comentario y terminar con la estructura “*/”, todo lo que quede encerrado dentro del principio y fin de estas etiquetas se considera un comentario que no sera procesado ni ejecutado por el interprete de javascript.

// Esta linea es un comentario de una sola linea
/* Este es un ejemplo
 de un comentario compuesto
por varias lineas de texto */

Declaraciones

Los programadores denominados declaración a la creación de una variable o una constante para su utilización en el programa. En javascript existen tres variantes para poder realizar una declaración de variable, para realizar esta acción se puede utilizar las sentencias: var , let y const .

Variables

Pero que es eso de una ¡VARIABLE!, puede ser que nos estemos preguntando. Una definición formal de una variable puede ser la siguiente:

En programación, una variable está formada por un espacio en el sistema de almacenaje (memoria principal de un ordenador) y un nombre simbólico (un identificador) que está asociado a dicho espacio. Ese espacio contiene una cantidad o información conocida o desconocida, es decir un valor.

Una definición más informal, es que podemos imaginar una variable como una caja o contenedor, donde se puede almacenar un contenido (valor), y que ese contenido se puede cambiar en cualquier momento de la ejecución del programa, es decir puede variar el contenido de caja, de ahí la definición de variable.

El muchos lenguajes de programación hay que especificar el “tipo” a la variable, que no es mas que indicar que es lo que va a almacenar la variable, si va a ser solo numérica o va a ser alfanumérica, la declaración de tipo, permite realizar una mejor reserva del espacio de memoria que se quiere utilizar.

Para poder identificar a las variables, estas se han de crear por el programador, especificando un nombre para cada una de ellas, este nombre que se asigna se suele llamar “identificador”, pues bien este identificador ha de cumplir una serie de reglas, no se puede escribir cualquier nombre para una variable.

Un identificador en JavaScript tiene que empezar con una letra, un guión bajo ( _ ) o un símbolo de dólar ($). los caracteres siguientes del identificador puede ser números. Ya que JavaScript diferencia entre mayúsculas y minúsculas, las letras incluyen tanto desde la “A” hasta la “Z” (mayúsculas) como de la “a” hasta la “z”.

Es conveniente asignar un identificador a las variables que exprese lo que va a contener, es decir si se quiere almacenar por ejemplo, el nombre y apellidos de una persona, puede resultar incomodo llamar a la variable “XJ43”, ya que no da ninguna pista de su contenido, pero si la identificamos como “NombreCompleto”, nos dará mas pistas sobre su contenido.

Muchos programadores también tienen la costumbre o manía, según se mire, de anteponer una letra que indica el tipo de dato que va a contener la variable, por ejemplo una variable que va contener un texto, por ejemplo una dirección, se puede denominar la variable “sDireccion”, la “s” indicaría string o lo que es lo mismo cadena de texto.

Creando (“Declarando”) Variables

A la acción de crear una variable se le denomina “Declaración”, para declarar una variable en el programa que se esta escribiendo, se puede realizar de las siguientes formas:

Con la palabra reservada var que permite realizar una declaración de variable tanto global como local. ¡Ya estamos con términos raros!, que no cunda el pánico, a continuación explicaremos el concepto de ámbito global y ámbito local.

Otra forma de declarar una variable es asignarle directamente su valor, por ejemplo edad = 47, el problema de este tipo de declaración es que crea una variable global, que no puede ser modificada en un ámbito local, por lo que esta forma de declaración se aconseja no utilizarla.

La tercera forma de declaración es con la palabra clave let, que permite declarar una variable local, en lo que se denomina un bloque de ámbito.

// Declaración de variables Ejemplos
var Edad = 49;
Nombre = "Nacho Sáez - Aprendoencasa.com";
let direccionWeb = "www.aprendoencasa.com";

Si una variable es declarada con “let” o “var”, y no se le asigna un valor inicial, la variable toma el valor predefinido “undefined”.

Si se intenta acceder al contenido de una variable no declarada anteriormente se produce el error “ReferenceError”, que indica que no existe referencia sobre la variable. El siguiente ejemplo muestra el resultado de este error.

Ejercicios JavaScript – Gramática del lenguaje

el termino “undefined” se puede interpretar en si mismo, como un valor, y se puede utilizar para realizar una acción dependiendo de que la variable tenga valor o sea indefinida, el siguiente ejemplo muestra como se puede utilizar “undefined” para visualizar un mensaje u otro dependiendo del valor de la variable. En este ejemplo, en vez de pulsar en la ventana “Borrador” de Firefox, el botón “Mostrar”, se ha pulsado el botón “Ejecutar”, y como se puede observar los mensajes que se visualizan se ven en la consola de desarrollador de mozilla firefox.

Prácticas JavaScript – Gramática del lenguaje

Si una variable no ha sido definido su valor, sabemos que contiene “undefined”, el valor undefined se puede interpretar de diferentes formas dependiendo de como se utilice.

La variable que contenga “undefined” se puede comportar como un “false” (Falso), cuando se utiliza en un contexto booleano (Verdadero o Falso), por ejemplo cuando se pregunta por algo que no ha sido definido.

El valor undefined se convierte en un valor NaN (Not a Number – No es numérico), cuando se utiliza la variable en un contexto en el que se utilice una expresión numérica.

Ejercicios JavaScript – Gramática del lenguaje

Ámbito de las variables

¡Por fin!, vamos a explicar el dichoso “Ámbito”, esa palabra que tanto ha aparecido anteriormente.

Cuando se escribe un programa en javascript al igual que en muchos otros lenguajes, las ordenes que se quieren ejecutar se suelen estructurar en bloques, a los cuales se les suele denominar funciones, de esta forma el programador estructura el programa en módulos que puede reutilizar y no tener que volver a escribir. Supongamos un programa en el cual se pide varias veces el código de una cuenta bancaria, si se programase de forma secuencial, cada vez que se pide la cuenta se tendría que comprobar el código de control y tendríamos que especificar las sentencias para realizar dicha comprobación, si pidiéramos tres veces la cuenta bancaria tendríamos que volver a escribir el código de comprobación tres veces, utilizando una función, solo seria necesario realizar una llamada a la función cada vez que se quiera utilizar sin tener que volver a escribir todo el código de comprobación.

El siguiente ejemplo muestra un programa que utiliza una función para realizar varias sumas y devolver su resultado, de esta forma se puede comprobar visualmente como seria un programa estructurado por módulos de función.

// Declaración de la funcion a utilizar para
// realizar las sumas que se soliciten.
function Sumar(numeroA,numeroB) {
  let Resultado = 0;
  Resultado = numeroA+numeroB;
  return Resultado;
}
// Realizar las llamadas a la función
var X = 10;
var Y = 20;
var R = 0;
R = Sumar(X,Y);
console.log("El resultado es : "+R);
X = 20;
Y = 30;
R = Sumar(X,Y);
console.log("El resultado es : "+R);
// Gracias por visitar www.aprendoencasa.com, tu web de ejercicios y prácticas de programación gratuitas.

Prácticas JavaScript – gramática del lenguaje

Bien, el ámbito no es más que el lugar donde se realiza en un programa la declaración de la variable, y donde esa variable puede ser utilizada en el programa.

Cuando se realiza una declaración de una variable en el programa principal, es decir no está incluida en ninguna de las funciones que puedan estar creadas en el programa. Se está indicando que la variable creada es una variable global, porque podrá ser accedida por cualquier otro código dentro del documento actual, resumiendo la variable se ha declarado a nivel global y todo el programa puede acceder a ella.

Si la variable se declara dentro de una función, se denomina como una variable local, y solo se podrá acceder o consultar la misma en el código que compone la función, no siendo accesible desde otra función o programa general. Es decir, solo se puede utilizar dentro de la función donde se ha creado.

En JavaScript hasta la nueva versión ECMAScript 6, no existe el ámbito de sentencias de bloque, por ejemplo, al declarar una variable dentro de una función, esta variable es una variable local respecto a todo el programa, pero se puede considerar que es una variable global respecto a la función donde está declarada ya que es accesible dentro de la función por todas las instrucciones que conforman la función.

En la nueva versión de JavaScript, se puede utilizar ya el ámbito de sentencias de bloque, esto no significa más que, algunas instrucciones pueden estar compuestas por varias líneas de código y otras sentencias, normalmente estas sentencias irán agrupadas en bloque, el cual viene determinado por los símbolos { }, si para declarar una variable se utiliza la instrucción let, y esta declaración se realiza en el interior de un bloque, la variable se está definiendo con ámbito de sentencias de bloque, y aunque el bloque de sentencias contenga otras instrucciones no podrán acceder a la nueva variable definida.

El siguiente ejemplo expresa una sentencia condicional, en la que se ejecuta una serie de instrucciones, observe la variable soylocalabloque, y donde está situada, de esta forma podrá obtener una visión de cuál es su ámbito.

if(true) {
  var soylocalafuncion = 10;
  let soylocalabloque = 20;
}
console.log(soylocalafuncion);
console.log(soylocalabloque);
/*
Exception: ReferenceError: soylocalabloque is not defined
@Scratchpad/2:8:1
*/

La siguiente imagen muestra el resultado del código anterior.

Ejercicios JavaScript – Gramática del lenguaje

Este otro ejemplo muestra el mismo funcionamiento que el anterior, estudie cuales son variables locales y globales.

// Declaracion de variables del programa
var soyunavariableglobal = 10;
var soyotravariableglobal = 20;
var soyotravariableglobalmas = "Sumar";
// Declaracion de funcion
function Operacion(soylocalamifuncionA, soylocalamifuncionB,soylocalamifuncionC) {
  var soyunavariablelocalamifuncion = 0;
  if(soylocalamifuncionC=="Sumar") {
    var Resultado = soylocalamifuncionA+soylocalamifuncionB;
  } else {
    let soylocalabloque = 10;
    console.log("Variable dentro del bloque = "+soylocalabloque);
  }
  
  console.log(Resultado);
  console.log(soylocalabloque);
  
}
// llamadas a la funcion
var ResultadoGlobal = Operacion(soyunavariableglobal,soyotravariableglobal,soyotravariableglobalmas);
soyotravariableglobalmas = "Restar";
var ResultadoGlobalDos = Operacion(soyunavariableglobal,soyotravariableglobal,soyotravariableglobalmas);
// Resultado del programa
/*
Exception: ReferenceError: soylocalabloque is not defined
Operacion@Scratchpad/1:17:3
@Scratchpad/1:22:23
*/

Constantes

A diferencia de las variables, se puede crear una constante, la definición viene a ser la misma que la de una variable con la diferencia de que como su nombre indica, estas no cambian de valor son constantes en su valor durante la ejecución del programa.

Una constante no puede cambiar de valor durante la ejecución del programa por asignación de un valor a la misma, ni volver a declararse mientras se ejecuta el script.

Las reglas de ámbito para las constantes son las mismas que las de las variables let en un ámbito de bloque. Si la palabra clave const es omitida, el identificador  se asume que representa una variable.

No puedes declarar una constante con el mismo nombre que una función o una variable en el mismo ámbito. Por ejemplo:

Las reglas para crear un nombre de constante son las mismas que para la definición de una variable. Para definir una constante se ha de utilizar la palabra reservada const, el siguiente ejemplo muestra el uso de una constante en un script.

Prácticas JavaScript – Gramática del lenguaje

Gracias por vuestra visita y un saludo!!! hasta el próximo articulo.