Curso de Javascript: Comentarios y Variables

Comentarios

Como todo lenguaje de programación en JS existen los comentarios, es decir aquella manera de definir líneas o conjuntos de líneas que nos permitan evitar que el intérprete o compilador tenga en cuenta para su posterior ejecución. JS evidentemente no es una excepción.

Comentarios de una línea

Simplemente colocando dos barras seguidas conseguirmos evitar que se ejecute nada de lo que esté colocado desde ahí hasta el fin de línea.
//Comentario de una línea

Comentario de varias líneas, empezará por un /* y terminará con un */. Todo lo que esté entre estos dos conjuntos de caracteres será ignorado por en el programa.

/*
 * Comentario de varias líneas
 */

En JS son muy importantes los comentarios debido a la falta de definición de tipos de variables que veremos más adelante.

Variables

Una de las cuestiones principales de cualquier lenguaje de programación son las variables para ello será necesario saber como declararlas, inicializarlas y utilizarlas.
A continuación veremos varios tipos de declaraciones de variables JS. Pero antes debemos indicar que toda variable Js será un objeto y que no tendrán en su inicialización un tipo de datos fijo, como en otros lenguaje más estructurados, sino que el tipo de la variable cambiará dependiendo del valor que le asignemos, por lo que es un lenguaje muy flexible en el uso de variables.

Declaración

Para declarar una variable será suficiente con anteponer la palabra reservada var antes del nombre de la variable. En el caso de que queramos declarar una variable global, no antepondremos la aplanar reservada var.
                        vari;
var variable;
var variable1, variable2;

Para asignarle un valor podremos hacer colocando el operador de asignación = y luego el valor antes del ;
Dependiendo del valor que pongamos a la derecha así será el tipo de variable, veamos varios ejemplos de asignaciones de valor en la declaración de la variable:

                       var numero_1 = 2;
numero_1=3;
var numero_2 = 3;
var resultado = numero_1 + numero_2;

Para aprender cómo funcionan las variables utilizaremos la consola de JS del navegador, para sacar esta consola, en firefox o chrome, será necesario pulsar el botón derecho del ratón en cualquier punto de una página y seleccionar la opción inspeccionar elemento. En las pestañas que salgan a continuación seleccionaremos Console.

//esto permite sacar un mensaje por la consola JS en el navegador
console.log(resultado);


/*
* las variables pueden contener letras números y los caracteres $ y _
* las variables no pueden empezar por un número
*/

var uno;
//eso no sería válido
//var 1coche;

Los tipos de datos base de JS son: números, booleanos, cadenas de caracteres, nulos y valores sin definir (undefined). En el siguiente ejemplo veremos sus inicializaciones:

/*
* Tipos de datos primitivos en JS
*/
var numero = 1;
var booleano = true;
booleano=false;
var cadena = “Caracteres alfanumericos 234”;
var nulo = null;
var sindefinir;
//tipo undefined

Aunque en JS casi no se tienen en cuenta los tipos hay veces que nos puede interesar cambiar el tipo de una variable, para ello será necesario realizar un casting.
/*
* Casting de variables
*/

var entero = 7;

Paso a cadena desde número

var enterocadena = parseInt(entero);
console.log(enterocadena);

Paso de Float a cadena

var flotante = 2.8;
var floatcadena = parseFloat(flotante);
console.log(floatcadena);

Paso de booleano a Cadena

var booleano_2 = false;
console.log(booleano_2.toString());

Las cadenas de caracteres es uno de los tipos más usados en JS a continuación veremos cómo se utilizan.

//Cadenas de caracteres
var cadenai = new String(“Hola”);
var cadena2 = “Cadena”;

//imprime la longitud de la cadena
console.log(cadena2.length);

//concatenación
var concatenada = “hola” + ” mundo!”;
console.log(concatenada);

concatenada = “hola ” + cadena;
console.log(concatenada);

Los arrays son otro de los principales tipos de datos, a continuación veremos su utilización básica

//definición de un array
var array=[1,2,3,4];
var arraycadenas=[“una”,”dos”,”tres”];
//capturar el valor de la primera posición del array
console.log(array[0]);
                        //Segunda posición
console.log(arraycadenas[1]);
                        //longitud del array
console.log(array.length);

Nos puede interesar en un determinado momento saber el tipo de una variable o bien saber si una variable es de un determinado tipo, para ello utilizaremos respectivamente typeof y instanceof.
Aquí podremos ver el uso principal de estas dos palabras reservadas.

var entero=7;
//typeof devuelve el tipo de la variable que usamos
console.log( typeof entero);
//instanceof devuelve un booleano con valor true si acertamos con el tipo del dato
var cadena_9=new String(“cadenad de caracteres”);
console.log(cadena_9 instanceof String);

Palabras Reservadas

Como en todos los lenguajes contamos con un conjunto de palabras reservadas que no podremos utilizar. 
  •     abstract
  •     boolean break byte
  •     case catch char class const continue
  •     debugger default delete do double
  •     else enum export extends
  •     false final finally float for function
  •     goto
  •     if implements import in instanceof int interface
  •     long
  •     native new null
  •     package private protected public
  •     return
  •     short static super switch synchronized
  •     this throw throws transient true try typeof
  •     var volatile void
  •     while with

Curso de Javascript: Introducción a Javascript

Introducción

Javascript es un lenguaje de Scripting, es decir es un lenguaje interpretado, no se compila por lo tanto, se interpreta línea a línea.  El intérprete principal suele estar colocado en el navegador web por lo que se ejecuta en el cliente web.

El navegador web es el responsable de la ejecución y el análisis de la sintaxis del lenguaje por lo que siempre que vayamos a ejecutar el programa que hayamos hecho en Javascript (JS a partir de ahora)  deberemos probarlo con el navegador.

Es un lenguaje puramente orientado a objetos, por lo que prácticamente todas las variables serán objetos y salvo las sentencias de control, casi siempre trabajaremos con los objetos como variables en las sentencias.

Otras caraterísticas del lenguaje es su orientación a Eventos, dichos eventos tienen una serie de comportamientos por defecto en el navegador. Sobre todo reconoceremos aquellas acciones por defecto que puede realizar el usuario, tales como, pulsar un enlace, que nos llevará a otra página web, o bien enviar un formulario con un botón dentro del mismo. Desde JS podremos modificar e incluso anular estos comportamientos por defecto en el navegador.

Desde JS podemos también modificar la página en la que nos encontramos, esto formalmente se denomina, Modificar el DOM, es decir, desde JS podemos cambiar el contenido y el aspecto de la página dinámicamente, por este hecho se puede considerar a JS un lenguaje que permite la creación de interfaces dinámicos para los usuarios o GUI’s en el navegador.

Finalmente podemos utilizar también JS como un cliente web, deseo cual podemos consultar servicios web en búsqueda de información, tales como RSS/ATOM, en búsqueda de noticias.

¿Cómo introducir Código Javascript en HTML?

Lo primero que debemos saber es cómo incluir el código JS en el html. Para ello utilizaremos la etiqueta <script>. Esta etiqueta contendrá el código JS.

Pongamos un ejemplo sobre HTML4 y XHTML1:

<script type="text/javascript">
//Aqui va el código JS
</script>

De esta manera podemos ver cómo incluir código en cualquier parte del HTML.
Aunque también podemos incluir un fichero externo mediante una URL, por ejemplo:

<script type="text/javascript" src="fichero.js"></script>

De esta manera incluimos todo el contenido del fichero.js como si lo hubiéramos escrito dentro del HTML.

En este caso el fichero.js estará localizado en el mismo directorio que el fichero html. Lo que se denomina una URL relativa al HTML, si la ruta cambiara, cambiaría también la URL. También podríamos llamar a ficheros JS localizados en otros servidores incluyendo en el valor asignado al atributo src una ruta URL absoluta, indicando el http://servidor/ruta/nombre_de_fichero.js

En el fichero.js (o cómo queramos llamarlo) simplemente incluirá el código JS, sin necesidad de incluir la etiqueta <script> por lo que seremos libres de empezar a declarar variables y sentencias a placer.

Hola Mundo

Para realizar nuestro primer Hola Mundo en JS pondríamos en dentro del código HTML lo siguiente:
<script type=”text/javascript”>
//Hola mundo
alert(“Hola Mundo!”);
</script>
Esto debería sacar un cuadro de diálogo por pantalla con el mensaje que hemos puesto entre comillas y un botón de aceptar. 

Ejercicios propuestos

  • Ejercicio 1: Crea un HTML que incluya el código del Hola mundo en JS, ejecútalo y comprueba que sale el mensaje por pantalla. 

Referencias:

Licencia Creative Commons

Curso de Javascript

Curso de Javascript

Javascript es una de las principales herramientas que disponemos a la hora de realizar páginas interactivas que ayuden a los visitantes de una web a tener una mejor experiencia de usabilidad. En el curso aprenderemos este lenguaje de programación, desde la perspectiva de alguien que tiene conocimientos básicos de fundamentos de programación.

Destinatarios

 Diplomados, licenciados y graduados en informática, o cualquier persona con conocimientos básicos en fundamentos de programación. Se recomienda tener conocimientos en programación o maquetación web.

Objetivos

  • Conocer los fundamentos del protocolo HTTP/S
  • Conocer los distintos agentes que forman parte del protocolo HTTP y su función
  • Conocer los fundamentos de Javascript
  • Saber construir y reutilizar funciones
  • Conocer los objetos principales de Javascript
  • Saber utilizar los objetos de JS para funciones definidas en unos requisitos
  • Conocer las distintas clases básicas de JS
  • Saber modificar el DOM según unos requisitos previos
  • Conocer las buenas prácticas de uso de JS 

Temario

Curso de Javascript: Introducción

Introducción al Protocolo Web

Una de las cuestiones principales cuando empezamos a hacer web es entender exactamente cuales son las tecnologías y programas que intervienen en el proceso de generación de un sitio o una página web.
Para ello tenemos esta introducción que nos servirá para 

Glosario de términos

A continuación se detallan un glosario de términos que permiten entender mejor la arquitectura Web:
  • HTML: Hyper Text Markup Language. Lenguaje que permite definir el contenido y su presentación para que el cliente web permita visualizar la información que contiene. Dicho lenguaje permite la inclusión de medios (gráficos, sonidos, vídeos, etc.).
  • Etiqueta o TAG: Unidad mínima de representación en el Lenguaje HTML. Permite definir: párrafos, tablas, enlaces, imágenes, etc…
  • CSS: (Cascading Style Sheets) Hojas de Estilo en Cascada . Permiten generar clases de estilo que se pueden aplicar a etiquetas HTML. Dichas hojas de estilo se pueden definir dentro de los ficheros HTML o incluso referenciarlos. Los TAG permiten agrupar cambios en las propiedades de un determinando TAG.
  • Java Script (JS): Lenguaje de programación que permite en la parte cliente procesar y realizar cambios en la presentación. Dichos Scripts suelen estar referenciados desde el fichero HTML.
  • Página Web: Unidad de contenido de un servidor web. Normalmente está compuesta de un fichero formateado en HTML y sus referencias.
  • Sitio Web: Conjunto de reglas del Servidor Web y las páginas Web que lo componen.
  • Servicio DNS: Servidor que entre otras funciones permite traducir nombres de máquinas en Internet a direcciones IP.
  • Navegador Web: Cliente que permite consultar a Servidores Web y presentar la información HTML. Ejemplos: Firefox, Konqueror, Opera, Internet Explorer, etc.
  • Plugin Web: Extensión de un navegador web que permite añadir una funcionalidad a un navegador web, por ejemplo la visualización de elementos no estándar. Ejemplos: Flash Player, JVM, etc.
  • Apache: Servidor Web Libre. Dicho servidor es altamente flexible y actualmente el 60% de los sitios web funcionan con Apache.
  • Módulo de Apache: Conjunto de funcionalidades agrupadas que permiten extender el tratamiento de la información por parte del servidor Web Apache.
  • URL: Uniform Resource Locator. Definición del acceso a un recurso. El concepto de URL ha sido incorporado dentro del más general de URI (Uniform Resource Identifier – Identificador Uniforme de Recurso), pero el término URL aún se utiliza ampliamente. La URL está dividida en tres partes: Nombre del Servidor Web, Recurso a acceder y Parámetros GET.
  • Método GET: Forma de paso de parámetros mediante URL.
  • Método POST: Forma de paso de parámetros mediante formulario (normalmente)
  • Contenedor de Aplicaciones Web: es el encargado de almacenar y gestionar las distintas aplicaciones web que estén instaladas, dependiendo de cada tecnología o Stack podremos disponer de distintos contenedores de aplicaciones para tecnologías como PHP, ASP, JEE, etc…
  • PHP: PHP Hypertext Pre-processor. es un lenguaje de programación usado generalmente para la creación de contenido para sitios web. PHP está preparado para funcionar como un módulo de Apache (y otros servidores Web).
  • Dirección IP: Identificativo único de un interfaz de red basado en el Protocolo IP.
  • SGBD: Sistema de Gestión de Bases de Datos. Son un tipo de software muy específico, dedicado a servir de interfaz entre la base de datos, el usuario y las aplicaciones que la utilizan. Se compone de un lenguaje de definición de datos, de un lenguaje de manipulación de datos y de un lenguaje de consulta. En los textos que tratan este tema, o temas relacionados, se mencionan los términos SGBD y DBMS, siendo ambos equivalentes, y acrónimos, respectivamente, de Sistema Gestor de Bases de Datos y DataBase Management System, su expresión inglesa.
  • SQL: Lenguaje de Consulta Estructurado (Structured Query Language). Es un lenguaje declarativo de acceso a bases de datos relacionales que permite especificar diversos tipos de operaciones sobre las mismas. Auna características del álgebra y el cálculo relacional permitiendo lanzar consultas con el fin de recuperar información de interés de una base de datos, de una forma sencilla.

Arquitectura de la Web

Una vez conocidos estos nuevos conceptos es necesario que nos hagamos una idea de la como encajan todas estas piezas dentro de la arquitectura, para ello nos ayudaremos del siguiente gráfico.

Como puede verse en el gráfico dichos componentes se conectan formando un procedimiento que indica la secuencia de llamadas entre los distintos componentes. A continuación detallaremos todos los componentes:

  • Cliente Web/DNS: Navegador Web. Por ejemplo: Firefox, Internet Explorer, Safari, Chrome, …
  • Servidor DNS: Conversor de nombres a IP’s. Por ejemplo: BIND.
  • Servidor Web: Almacén y procesador de la Información Web. Por ejemplo, Apache,  IIS…
  • Contenedor de Aplicaciones: Componente que permite la ejecución de aplicaciones web, por ejemplo PHP, ASP o JEE
  • Aplicación Web: Conjunto de ficheros o empaquetado que incluye todos los ficheros de nuestra aplicación web. PHP, ASP, JEE, etc…
  • SGBD: Sistema de gestión de bases de datos que permitirá almacenar la información dinámicamente. Por ejemplo,  Mysql.

Proceso de carga de una página web

A continuación se detallarán los pasos que realizan el cliente y el servidor de una arquitectura web:
0. Todo el procedimiento empieza cuando el usuario ha introducido una URL en el navegador web. Por ejemplo: www.google.es
  1. El Cliente Web solicita una conversión del nombre de una máquina al Servidor DNS. En este caso actúa como un cliente DNS.
  2. El Servidor DNS recibe la solicitud. Una vez recibida la petición realiza las consultas necesarias para resolver y obtener la dirección IP.
  3. El Servidor DNS devuelve la dirección IP correspondiente al navegador Web.
  4. El Navegador Web conecta contra el Servidor Web mediante la dirección IP y el Puerto (normalmente el 80) y realiza la solicitud de información mediante una URL de página (Método GET) o un formulario (Método POST). Dicha solicitud incluye: la dirección del servidor web, el puerto del servidor web, URL y parámetros POST(esta sólo en el caso de formularios normalmente).
  5. El Servidor Web realiza el Control de Acceso, el Análisis de la petición y localización del recurso. El Servidor Web determina que es necesario obtener la web desde el contenedor de aplicaciones web. 
  6. El Servidor Web llama al Contenedor de aplicaciones web para que resuelva él la petición.
  7. El contenedor de aplicaciones web localiza la aplicación requerida mediante la URL.
  8. El contenedor de aplicaciones web traspasa el control a la aplicación web elegida.
  9. Aplicación Web: Recoge los parámetros y la URL y la interpreta para localizar la funcionalidad que resolverá finalmente la petición. 
  10. La aplicación web conecta y realiza una consulta  SQL al Servidor de SGBD.
  11. El SGBD recoge la petición SQL y la procesa.
  12. El SGBD devuelve los resultados a la aplicación web.
  13. La Aplicación Web procesa de los datos devueltos por el SGBD y genera del HTML resultante.
  14. La aplicación web devuelve el  HTML resultante al contenedor de aplicaciones web.
  15. El contenedor de aplicaciones devuelve el HTML al Servidor Web.
  16. El servidor Web devuelve el HTML al cliente Web.
  17. Cliente Web: Presentación del HTML resultante, CSS y elementos relacionados y ejecución del Javascript.

Dentro del Navegador Web

Como se ha explicado en el punto anterior es necesario que el navegador web interprete los datos que recibe y se los presente al usuario.
Para ello es necesario conocer un poco los componentes básicos que tienen todos los navegadores y el proceso que sucede internamente de gestión de la información de cara a entender el funcionamiento de Javascript (JS a partir de ahora). 
Para ello incorporaremos el siguiente gráfico:
Como puede observarse después de haber lanzado la petición web en el paso 4 del anterior diagrama es necesario que el navegador esté a la espera de una respuesta, tal como sucede en el paso 16
Para ello está escuchando en el socket al flujo de información que proviene del servidor web. 
Según va recibiendo los datos 17.1, los va traspasando al Parser DOM 17.2, el parser va interpretando el flujo 17.3 y lo va convirtiendo dentro del DOM o el objeto document 17.4, si se encuentra código JS será necesario que lo ejecute 17.5, el motor lo interpreta y realiza los cambios sobre el  DOM si es necesario 17.6, a cada cambio ocurrido en el DOM se invoca al motor de Render 17.7, que es el responsable de dibujar sobre la ventana 17.8, el objeto window.
A partir de ese momento el navegador estará pendiente del las distintas acciones que pueda realizar el usuario sobre la ventana y sus distintos elementos a fin de ejecutar las funciones estándar  asociadas a dichos eventos. Esta parte la explicaremos en más profundidad en el apartado de Eventos JS.

Resumen

En este primer punto hemos podido observar cuáles son los elementos principales del a web y el procedimiento de carga de una página web, tanto desde la perspectiva del protocolo http como internamente dentro del propio navegador. 
Licencia Creative Commons

Suscríbete al Boletín

Si quieres estar al tanto de las novedades del blog, ya sabes :)
* = campo obligatorio

powered by MailChimp!

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

Aviso de cookies