Ejercicios y prácticas Diseño Web, Acceso a base de datos y visualización de registros

Ejercicios y prácticas Diseño Web, Acceso a base de datos y visualización de registros

No. 23 de 23 de articulos. HTML5

El siguiente ejercicio y práctica resuelta, muestra la utilización del lenguaje PHP, para acceder a una base de datos MySQL, leer registros de una tabla de datos y mostrarlos en el navegador. El ejercicio y práctica resuelta se ha realizado con dos soluciones, una utilizando solo el lenguaje HTML y PHP, otra utilizando el lenguaje HTML, PHP y JavaScript.

Primer Ejercicio. Realizar el acceso a la base de datos y mostrar los registros utilizando HTML y PHP.

 

1º Crear la estructura del sitio web.

En primer lugar, se ha de crear la estructura de carpetas para el sitio web que se desea crear. Obviamente la estructura de carpetas que se crean para albergar un sitio web, depende muchas veces del propio criterio del programador o diseñador web, para este ejercicio se ha planteado una estructura simple.

Los ejercicios están realizados en un ordenador que corre Windows 10 y que, para poder probar las aplicaciones web, tiene instalado el programa XAMPP, el cual realiza las funciones de servidor HTTP y servidor MySQL. En este programa como sabemos, para poder probar los sitios web que diseñamos, se ha de crear una carpeta por cada sitio web, en el directorio o carpeta htdocs, que normalmente se encuentra situado en la ruta C:\xampp\.

Por lo tanto, estando situados en el directorio o carpeta htdocs, se ha de crear una primera carpeta, la cual vamos a denominar “ejercicio1”, y dentro de la misma, se han de crear las carpetas o subdirectorios: css, php, img, html y js. La estructura ha de quedar de forma similar a la que se muestra en la imagen.

2º Crear la base de datos.

Para crear la base de datos se pueden utilizar varios programas, como por ejemplo MySQL WorkBench, que permite realizar la gestión de las bases de datos MySQL, en mi caso yo utilizo un programa diferente, pero el concepto para todos es similar. El programa que utilizo es Navicat.

En Primer lugar, se ha de acceder con el programa al servidor de MySQL estableciendo la conexión necesaria y a continuación indicar que se quiere crear una base de datos, la cual se va a denominar “Ejercicio1”.

Una vez abierta la conexión una forma simple con el programa de crear una base de datos, es realizar un clic con el botón derecho del ratón. Y seleccionar la opción denominada “New Database”

Al pulsar sobre la opción, se ha de presentar un cuadro de dialogo en el cual se ha de especificar, el nombre de la base de datos, el juego de caracteres a utilizar y la intercalación del juego de caracteres a utilizar. En el nombre de la base de datos “Database Name”, especificamos “Ejercicio1” como nombre, en el juego de caracteres “Character Set”, se ha de seleccionar la opción denominada “utf8 – UTF-8 Unicode”, y para la opción de intercalación “Collation”, se ha de especificar la opción denominada “utf8_spanish_ci””

Para finalizar la creación se ha de pulsar sobre el botón “Ok”, y en la parte izquierda del programa se puede observar como aparece la base de datos recién creada.
Seguidamente se ha de crear la tabla de datos que se quiere utilizar posteriormente. Para realizar esta acción en primer lugar se ha de indicar que se quiere abrir la base de datos, para realizar este proceso se ha de hacer un doble clic sobre el nombre de la base de datos, se puede observar que el icono de la misma, adopta un color verde indicando de esta forma que está abierta y activa.

Como se puede observar en la imagen anterior, al abrir la base de datos, en la parte izquierda aparece una nueva sección denominada Tablas “Tables”, y en la barra de herramientas, aparece un botón que permite crear una nueva tabla denominado “New Table”. Al pulsar el botón se entra en la sección del programa correspondiente a la edición de los campos de la tabla

Ahora se han de definir los campos que se quieren crear en la tabla, en este ejercicio se plantea la creación de una tabla que contenga información sobre usuarios. La cual ha de tener los campos y tipos que se especifican a continuación

Los campos especificados son: identificador, nombre, apellidos, fecha_nacimiento, localidad y provincia, como se puede apreciar el tipo de dato para todos es varchar (carácter variable), con una longitud variable dependiendo del campo, a excepción del campo fecha_nacimiento, el cual es de tipo date (fecha).
Se puede ver también que, sobre el campo identificador, en la última columna se ha realizado un clic, de esta forma se indica que el campo es la clave principal de la tabla y se comprueba ya que aparece un símbolo correspondiente a una llave.
Una vez especificados los campos y sus tipos, se cierra la pestaña de creación de la base de datos o se pulsa el botón Save, en la barra de herramientas, para que se solicite el nombre de la tabla e indicar de esta forma que el nombre que se quiere asignar es usuarios.

Ahora para poder posteriormente comprobar que el ejercicio y práctica a realizar funciona correctamente, se han de introducir en la tabla 4 o 5 registros de datos. Para ejecutar esta acción se ha de realizar un doble clic sobre el nombre de la tabla

Crear los archivos del sitio

Una vez creada la base de datos, se ha de crear la primera página que compone el sitio web, el nombre que se suele dar a esta página es index.htm, index.html o index.php, se utiliza este nombre, ya que por defecto normalmente el servidor busca estos nombres y si los encuentra carga la página automáticamente, sin tener que especificar en la url el nombre de la página a la que acceder.

Como la página que se quiere crear va a tener acceso a la base de datos y ha de mostrar los registros que lea de la tabla de usuarios, esta primera página se va a denominar index.php.

En esta primera página se ha de realizar la conexión con la base de datos, por ello se incluyen llamadas a dos archivos configuración.php y acceso.php, ambos se han de crear en el subdirectorio php de nuestro sitio. El primer archivo se encarga de establecer los valores necesarios para poder realizar la conexión con el servidor MySQL, mientras que el segundo realiza la conexión con MySQL según los datos de configuración especificados.

El archivo index.php, ha de contener el siguiente código.

<?php
    // realizar el enlace con el archivo de configuración
    require_once("./php/configuracion.php");
    // realizar el enlace con el archivo de conexión
    require_once("./php/acceso.php");
?>
<!DOCTYPE HTML>
<html>
<head>
  <title>Ejercicio 1 - MySQL</title>
  <meta charset="utf-8">
  <meta name="author" content="José Sáez">
  <meta name="generator" content="www.aprendoencasa.com">
</head>
<body>
<h1 class="titulo">Ejercicio 1 - Acceso BD MySQL</h1>
<!-- acceso a los registros de la tabla de usuarios y visualización de los mismos
 utilizando una tabla html -->
 <table>
     <thead>
         <tr>
               <th>Id.</th>
               <th>Nombre</th>
               <th>Apellidos</th>
               <th>Localidad</th>
               <th>Provincia</th>
               <th>F. Nacimiento</th>
         </tr>
     </thead>
     <tbody>
         <?php
            // crear la consulta de acceso a los datos de usuarios
            $consulta = "SELECT * FROM usuarios";
            // a continuación se envia la consulta al servidor MySQL
            $resultado = mysqli_query($conexion,$consulta);
            // se recorren los registros visualizando una fila de tabla
            // por cada uno de los registros existentes.
            while( $fila = mysqli_fetch_assoc($resultado) ) {
                echo "<tr>";
                    echo "<td>".$fila['Identificador']."</td>";
                    echo "<td>".$fila['Nombre']."</td>";
                    echo "<td>".$fila['Apellidos']."</td>";
                    echo "<td>".$fila['Localidad']."</td>";
                    echo "<td>".$fila['Provincia']."</td>";
                    echo "<td>".$fila['Fecha_Nacimiento']."<td>";
                echo "</tr>";
            }
         ?>
     </tbody>
 </table>
</body>
</html>

 

En la primera sección del código anterior.

<?php
    // realizar el enlace con el archivo de configuración
    require_once("./php/configuracion.php");
    // realizar el enlace con el archivo de conexión
    require_once("./php/acceso.php");
?>

Se realiza el enlace con dos archivos en php, que son los encargados de realizar la configuración de los datos de acceso al servidor MySQL y la conexión con el motor de base de datos.
El primer archivo con el que se realiza el enlace, es con configuracion.php, el cual se ha de guardar en el directorio o carpeta php, y el contenido del mismo ha de ser el siguiente.

<?php
// Se establecen las variables con los datos de acceso
$servidor = "localhost";
$usuario = "root";
$contra = "";
$basedatos = "ejercicio1";
?>

En este archivo se establecen las variables que sirven para realizar la conexión con el motor de MySQL del programa servidor XAMPP, los valores que se han de indicar por defecto son: localhost, para el nombre del servidor que se almacena en $servidor, root para el nombre de usuario, que se almacena en $usuario, “” (nada) como valor de contraseña, ya que por defecto el programa XAMPP no la establece, este valor se asigna a $contra, y por último ejercicio1 como nombre de la base de datos que se almacena en la variable $basedatos.
Seguidamente y volviendo al archivo index.php, se establece el enlace con el archivo que realiza la conexión con la base de datos de MySQL, el cual se denomina acceso.php, y ha de contener el siguiente código.

<?php
// se establece la conexion con la base de datos.
$conexion = mysqli_connect($servidor,$usuario,$contra,$basedatos);
// se evalua si no se ha producido la conexión en ese caso se finaliza
// la ejecución del programa
if( !$conexion ) {
    die("Error en la conexión con la base de datos");
}
?>

El código que se ha tecleado, permite la conexión con la base de datos, para esta acción se utiliza el comando de PHP, mysqli_connect, el cual tiene la siguiente sintaxis.
$variable_enlace = mysqli_connect(“servidor”,”usuario”,”contraseña”,”basedatos”);
La orden realiza el establecimiento de conexión según la configuración de datos especificadas y en caso de tener éxito en la conexión se utiliza $variable_enlace, como acceso a la misma, en caso de no producirse la conexión la variable de enlace contendrá un valor falso.
Debido al valor devuelto por la orden anterior, se utiliza posteriormente un si condicional, el cual pregunta si “no es verdadera” la variable de enlace, y en caso de no serlo produce la parada del programa utilizando el comando die.
Una vez obtenida la conexión, analizamos el siguiente código dentro de la página index.php, que es el encargado de acceder a la base de datos y leer los registros de datos.

<?php
            // crear la consulta de acceso a los datos de usuarios
            $consulta = "SELECT * FROM usuarios";
            // a continuación se envia la consulta al servidor MySQL
            $resultado = mysqli_query($conexion,$consulta);
            // se recorren los registros visualizando una fila de tabla
            // por cada uno de los registros existentes.
            while( $fila = mysqli_fetch_assoc($resultado) ) {
                echo "<tr>";
                    echo "<td>".$fila['Identificador']."</td>";
                    echo "<td>".$fila['Nombre']."</td>";
                    echo "<td>".$fila['Apellidos']."</td>";
                    echo "<td>".$fila['Localidad']."</td>";
                    echo "<td>".$fila['Provincia']."</td>";
                    echo "<td>".$fila['Fecha_Nacimiento']."<td>";
                echo "</tr>";
            }
         ?>

En primer lugar, se ha de establecer la consulta que se quiere ejecutar en lenguaje SQL y asignarla a la variable $consulta. La consulta ha de ser “SELECT * FROM usuarios”. Que significa “SELECCIONA todosloscampos DE latablausuarios”.

Seguidamente, se envía la consulta al servidor de MySQL para realizar esta acción se ha de ejecutar el comando mysqli_query, el cual tiene la siguiente sintaxis.

$variable_resultado = mysqli_query($variable_enlace,$consulta_a_ejecutar);

El comando anterior envía al servidor MySQL la orden a ejecutar, si la orden no tiene la sintaxis correcta, el servidor MySQL, devuelve un error o advertencia, en caso de que la orden sea correcta el servidor MySQL, devuelve un objeto que contiene los registros que han sido afectados por la orden y los almacena en la variable $variable_resultado. Se ha de tener en cuenta que no se puede acceder directamente a un objeto de tipo result, por lo que se han de utilizar comandos para extraer la información del resultado.

Los comandos que se pueden utilizar para extraer los registros del resultado son mysqli_fetch_array y mysqli_fetch_assoc, la sintaxis y explicación de los mismos es la siguiente.

$variable = myqsli_fetch_array($variable_resultado)

$variable = mysqli_fetch_assoc($variable_resultado)

En ambos casos, la orden extrae un registro del objeto result obtenido y lo asigna a $variable, la cual se convierte de forma automática en un array o matriz que contiene todos los datos del registro leído. En el caso de mysqli_fetch_array, la matriz que se crea, se crea aplicando valores numéricos a los índices, mientras que en el caso de mysli_fetch_assoc, la matriz que se crea contiene índices alfanuméricos que se corresponderán con los nombres de campos de la tabla MySQL leida. A este último tipo de array se les conoce como arrays asociativos, por no manejar índices numéricos y si alfanuméricos.

Una vez ejecuta la orden en $variable, se habran almacenado los datos correspondientes al registro leído y estos datos pueden ser accedidos utilizando los índices correspondientes, como se muestra en los siguientes ejemplos.

echo $variable[0];

echo $variable[‘nombrecampotabla’];

                En el primer caso se accede al dato utilizando el índice numérico y en el segundo el índice asociativo. En el caso de que las ordenes de extracción no consigan leer un registro de la variable objecto de tipo result, bien porque no existen registros que leer o bien porque se ha leído ya el último de los registros del resultado, la variable que se utilice para guardar los datos tomara un valor FALSO.

Es por este motivo que se utiliza un bucle WHILE para recorrer todos los registros del resultado, de esta forma es como preguntar. “Mientras que haya registros en resultado, lo extraes, lo guardas y lo visualizas”. Cuando se llegue al final al no leerse ningún registro se almacena un valor FALSO y el bucle evalúa su condición MIENTRAS QUE SEA VERDADERO, que al no cumplirse hace que finalice el bucle.

Dentro del bucle, se intercala el código HTML y PHP necesario para visualizar con una estructura de página web, los datos obtenidos. En este ejercicio se puede apreciar que se ha utilizado mysqli_fetch_assoc y por dicho motivo en el bucle se utiliza para rescatar los datos el nombre de la variable especificando como índice el nombre que tiene el campo en la base de datos.

Control de flujo – If (Si Condicional)

Control de flujo – If (Si Condicional)

No. 7 de 10 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 10 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 );

 

Gramatica – JavaScript

Gramatica – JavaScript

No. 4 de 10 de articulos. JavaScript

Como cualquier otro lenguaje de programación, se han de conocer en primer lugar, la forma en la que se han de escribir las sentencias u ordenes que se quieren ejecutar, ya que estas han de cumplir una estructura a la hora de teclearlas, también es necesario conocer los tipos de datos que se pueden gestionar con el lenguaje, numéricos, alfabéticos, etc.

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 = 47;

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.

 

 

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.

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.

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

 

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.

 

 

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 ejecucion del programa por asignacion 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.

Hola Mundo JavaScript

Hola Mundo JavaScript

No. 3 de 10 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 10 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