Control de Flujo – Switch

Control de Flujo – Switch

No. 8 de 9 de articulos. JavaScript

La sentencia switch al igual que la anterior sentencia “si condicional” permite realizar ciertas acciones dependiendo del valor y evaluación de una variable. Es decir, realiza la comprobación del valor de una variable y según su valor ejecuta unas ordenes u otras.

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;
}

 

Control de flujo – If (Si Condicional)

Control de flujo – If (Si Condicional)

No. 7 de 9 de articulos. JavaScript

El lenguaje JavaScript al igual que muchos otros lenguajes, soporta la utilización de sentencias u órdenes para el control de flujo del programa, el control de flujo permite realizar la estructura del programa y dar orden a las acciones a realizar, así como también la toma de decisiones.

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.

Operador Significado
> Mayor que
< Menor que
>= Mayor o igual que
<= Menor o igual que
== Igualdad
!= Desigualdad
=== Estrictamente Igual
!== Estrictamente Desigual

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

Operador Uso Significado
&& Condición && condición Operador lógico Y, devuelve “true” si ambas expresiones son verdaderas, “false” en cualquier otro caso.
|| Condición || Condición Operador lógico O, devuelve “true” si cualquier expresión es verdadero, “false” si todas las expresiones son falsas.
! !expresión Operador No, devuelve “false” si el operando no puede ser convertido a “true”, en caso contrario devuelve “false”

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 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.

 

j

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.

j

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.

j

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!

Tipos – JavaScript

Tipos – JavaScript

No. 5 de 9 de articulos. JavaScript

La última versión de JavaScript que se utiliza a fecha de hoy, tiene definidos siete tipos de datos. ¡Que son los tipos de datos!, básicamente los tipos de datos de un lenguaje, son los diferentes formatos numéricos, alfanuméricos, booleanos, cadenas de texto, etc. Que puede manejar el lenguaje, para ello define una serie de palabras clave que sirven para identificar el tipo de dato y especificar de esta forma cuando se almacene el tipo de dato, en que sitio y de qué forma se realiza dicho proceso.

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);

 

 

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 );

 

 


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 );

 

Hola Mundo JavaScript

Hola Mundo JavaScript

No. 3 de 9 de articulos. JavaScript

Para poder realizar el ejercico yexperimentar con las herramientas comentadas, y como es obvio también, porque
en casi todos los temarios correspondientes a cursos, ninguno de estos se podría llamar curso si no contiene el tan famoso “Hola Mundo”, que no es ni más ni menos que la introducción al lenguaje expresado en código y que de esta
forma nos iniciemos en el “maravilloso mundo de la programación”. :O)




En esta ocasión para realizar el ejercicio, vamos a utilizar el navegador Mozilla Firefox, una vez ejecutado el programa, se ha de pulsar en el botón correspondiente al menú y seleccionar la opción “Desarrollador”, al pulsar sobre esta opción se presenta un menú de opciones, en el cual se ha de seleccionar la opción “Borrador”, también es posible pulsar la combinación de teclas Mayúsculas + F4.

Al realizar esta acción se ha de presentar en pantalla la siguiente ventana.

ventana borrador mozilla firefox, ejercicios y prácticas de javascript



Una vez situados en la ventana Borrador, se ha de teclear el código que se muestra en la imagen siguiente. la primera parte de código que se ha de teclear es lo que se denomina una función, la cual esta compuesta por la palabra reservada “function”, seguida del nombre que se quiere asignar a la función, a continuación se abren paréntesis y si la función ha de recibir algún parámetro, se teclean los nombres de los parámetros separados por comas, en esta ocasión el nombre del parámetro que se quiere recibir es una cadena de texto, y se ha denominado sNombre, se antepone la letra “s” en esta ocasión para indicar que el tipo de dato que se recibe es una cadena de texto, esta es una buena costumbre de programación, pero no es obligatorio seguirla. Seguidamente se abren llaves y se teclea el código que queremos contenga la función, en este caso se especifica la orden “return”, la cual hace que la función devuelva un resultado, que es un mensaje seguido del valor del parámetro que se haya especificado en la llamada a la función.

Una vez finalizada la función, y fuera de la misma se especifica la orden de llamada a la misma, para realizar esta acción se ha de teclear el nombre de la función, pasando entre los parámetros la cadena de texto que se quiere enviar a la función.

Tecleado el código, para ejecutar la función se  puede pulsar el botón “Mostrar”, en la ventana “Borrador”, el cual al pulsarlo ha de mostrar el siguiente resultado.

ventana borrador mozilla firefox, ejercicios y prácticas de javascript
Introducción a JavaScript

Introducción a JavaScript

No. 1 de 9 de articulos. JavaScript

Introducción a JavaScript

JavaScript fue desarrollado originalmente por Brendan Eich de Netscape con el nombre de Mocha, el cual fue renombrado posteriormente a LiveScript, para finalmente quedar como JavaScript.

El cambio de nombre coincidió aproximadamente con el momento en que Netscape agregó compatibilidad con la tecnología Java en su navegador web Netscape Navigator en la versión 2.002 en diciembre de 1995.

La denominación produjo confusión, dando la impresión de que el lenguaje es una prolongación de Java, y se ha caracterizado por muchos como una estrategia de mercadotecnia de Netscape para obtener prestigio e innovar en el ámbito de los nuevos lenguajes de programación web.

«JAVASCRIPT» es una marca registrada de Oracle Corporation. Es usada con licencia por los productos creados por Netscape Communications y entidades actuales como la Fundación Mozilla.

Microsoft dio como nombre a su dialecto de JavaScript «JScript», para evitar problemas relacionadas con la marca. JScript fue adoptado en la versión 3.0 de Internet Explorer, liberado en agosto de 1996, e incluyó compatibilidad con el  con las funciones de fecha, una diferencia de los que se basaban en ese momento. Los dialectos pueden parecer tan similares que los términos «JavaScript» y «JScript» a menudo se utilizan indistintamente, pero la especificación de JScript es incompatible con la de ECMA en muchos aspectos.

Para evitar estas incompatibilidades, el World Wide Web Consortium diseñó el estándar Document Object Model (DOM, o Modelo de Objetos del Documento en español), que incorporan Konqueror, las versiones 6 de Internet Explorer y Netscape Navigator, Opera la versión 7, Mozilla Application Suite y Mozilla Firefox desde su primera versión.

En 1997 los autores propusieron JavaScript para que fuera adoptado como estándar de la European Computer Manufacturers ‘Association ECMA, que a pesar de su nombre no es europeo sino internacional, con sede en Ginebra. En junio de 1997 fue adoptado como un estándar ECMA, con el nombre de ECMAScript. Poco después también como un estándar ISO.

JavaScript en el lado servidor

Netscape introdujo una implementación de script del lado del servidor con Netscape Enterprise Server, lanzada en diciembre de 1994 (poco después del lanzamiento de JavaScript para navegadores web). A partir de mediados de la década de los 2000, ha habido una proliferación de implementaciones de JavaScript para el lado servidor. Node.js es uno de los notables ejemplos de JavaScript en el lado del servidor, siendo usado en proyectos importantes.

Desarrollos posteriores

JavaScript se ha convertido en uno de los lenguajes de programación más populares en internet. Al principio, sin embargo, muchos desarrolladores renegaban del lenguaje porque el público al que va dirigido lo formaban publicadores de artículos y demás aficionados, entre otras razones.

La llegada de Ajax devolvió JavaScript a la fama y atrajo la atención de muchos otros programadores. Como resultado de esto hubo una proliferación de un conjunto de frameworks y librerías de ámbito general, mejorando las prácticas de programación con JavaScript, y aumentado el uso de JavaScript fuera de los navegadores web, como se ha visto con la proliferación de entornos JavaScript del lado del servidor. En enero de 2009, el proyecto CommonJS fue inaugurado con el objetivo de especificar una librería para uso de tareas comunes principalmente para el desarrollo fuera del navegador web.

En junio de 2015 se cerró y publicó el estándar ECMAScript 6 con un soporte irregular entre navegadores y que dota a JavaScript de características avanzadas que se echaban de menos y que son de uso habitual en otros lenguajes como, por ejemplo, módulos para organización del código, verdaderas clases para programación orientada a objetos, expresiones de flecha, iteradores, generadores o promesas para programación asíncrona.

La versión 7 de ECMAScript se conoce como ECMAScript 2016 , y es la última versión disponible, publicada en junio de 2016. Se trata de la primera versión para la que se usa un nuevo procedimiento de publicación anual y un proceso de desarrollo abierto .

Desde esta tu web www.aprendoencasa.com , pretendemos ofrecerte una introducción a la programación con JavaScript, de forma que aprendas gradualmente y a través de ejercicios prácticos. Obviamente si el usuario tiene conocimientos ya avanzados del lenguaje, quizas este blog le resulte aburrido, pero hemos de recordar nuestros principios en la programación, y pensar que si podemos aportar comentarios constructivos para las personas que comienzan en este mundo fantastico de la programación, quizas hagamos nuestra “buena obra del día”, y nos permita poner una sonrisa en la cara, que tal como esta el mundo, buena falta hace… Un saludo y gracias por tu visita a este primer articulo del curso práctico de programación en JavaScript.







Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies