CÉSAR ALEJANDRO TREVIÑO MARQUEZ
ALEJANDRO FEREZ
4 A V PROGRAMACIÓN
MANUAL DE JAVASCRPICT
javascript:lenguaje interactivo para dinamizar la web
y ahora tambien aprende a programar en c++ con aprende web c++
Qué es Javascript?
Javascript es una forma de complementar una página web, mediante aplicaciones dinámicas. Las páginas Web que podemos hacer usando sólo los lenguajes HTML y CSS son páginas estáticas; es decir, podemos poner texto, imágenes, colores, etc. pero el usuario lo único que puede hacer es verlas, leerlas, ir a otra página con los enlaces, o como mucho rellenar un formulario.
Con javascript cambia el concepto de la página. Podemos hacer la página más interactiva, de forma que tanto el programador como el usuario puedan realizar más acciones dentro de la página.
Veamos alguna de las cosas que podemos realizar con Javascript:
Slide 4
Dar mensajes de alerta.
Incluir botones para mostrar u ocultar elementos.
incluir botones para cambiar colores, estilos, etc de los elementos.
incluir un reloj o cronómetro en la página.
Incluir calculadoras o tablas de cálculo.
Mostrar ventanas emergentes.
Dar movimiento a algunos elementos de la página.
Comprobar los datos de un formulario antes de enviarlo.
Slide 5
Con javascript la página se vuelve más dinámica. Sin embargo Javascript también tiene sus limitaciones, estas vienen dadas por el hecho de que éste es un lenguaje de programación del lado del cliente.
Esto quiere decir que Javascript es un lenguaje de programación que es interpretado por el navegador. Es decír, todas las acciones indicadas por javascript las realiza el navegador del usuario sin comunicarse con el programador o el servidor.
En javascript el programador da una serie de instrucciones para que la página se comporte de una determinada manera. Estas instrucciones son enviadas al navegador del usuario junto con la página cuando ésta se carga, y es el propio navegador el encargado de ejecutarlas. Se dice por eso que javascript es un lenguaje de programación del lado del cliente, a diferencia de otros lenguajes que se ejecutan en el servidor o distribuidor de las páginas.
Slide 6
Esto tiene la ventaja de que el usuario no tiene que enviar las instrucciones, y que éstas sean devueltas para interactuar (por ejemplo para ver un menú desplegable), lo cual da rapidez a las acciones, por otro lado tiene el inconveniente de que el usuario no puede guardar los cambios que realiza en la página con javascript, ya que al volver a cargar la página, esta muestra su estado inicial.
Otro inconveniente derivado de ser un lenguaje de lado del cliente, es que el diseñador o propietario de la página, no puede saber lo que está haciendo el usuario con la página, que botones ha activado, ni recoger ningún dato del usuario, ni siquiera usando formularios. (los formularios deben mandarse por e-mail o usar otros lenguajes de programación como PHP).
No debemos confundir javascript con java, ya que ambos son dos lenguajes de programación totalmente diferentes. Mientras que javascript puede ejecutarse desde cualquier navegador, Java, al igual que otros lenguajes de programación del lado del servidor, necesita que el servidor tenga instalado el soporte o plugin para poder ejecutarlo.
Por qué javascript?
Javascript es el siguiente paso, después del HTML y CSS, que puede dar un programador de la web que decida mejorar sus páginas y la potencia de sus proyectos. Es un lenguaje de programación bastante sencillo y pensado para hacer las cosas con rapidez. Incluso las personas que no tengan una experiencia previa en la programación podrán aprender este lenguaje con facilidad. Aquí procuraremos explicar los temas de manera sencilla y con ejemplos.
Slide 8
Es aconsejable a la vez que seguimos el curso, ir practicando con los mismos ejemplos que ponemos, ya que la práctica es una parte esencial para comprender como funciona este lenguaje.
El lenguaje javascript esta diseñado para ser interpretado por los navegadores, por lo que su utilidad casi exclusiva es la de implementar las páginas web, con él no pueden construirse programas independientes.
Es sencillo y bastante comprensible, por otra parte es secuencial, esto es, al igual que el HTML o CSS interpreta las instrucciones una detras de otra, en un cierto orden dado por su posición de escritura.Con Javascript el programador controla cada opción de lo que puede ocurrir en la página cuando la está visualizando el usuario.
Al igual que con HTML y CSS podemos visualizar en nuestro propio ordenador cómo va quedado la página a medida vamos añadiendole instrucciones, y no necesitamos haber subido la página al servidor para saber si ésta va a funcionar correctamente.
Qué necesitamos?
Básicamente lo primero que necesitamos es saber diseñar páginas Web mediante los lenguajes HTML y CSS, ya que al ser javascript un complemento para las páginas web, mal podremos añadir el código para crear elementos dinámicos si no entendemos la base sobre la que estamos trabajando.
Slide 10
Por tanto, si no sabes diseñar páginas Web mediante los lenguajes CSS y HTML te recomiendo que sigas primero el Manual de HTAML, con la opción de aprender CSS al mismo tiempo; ya que ésta es la base de la que partimos
Lo siguiente que necesitaremos es básicamente lo mismo que para el los manuales de HTML y de CSS, es decir, un editor de textos para escribir el código (el block de notas, o el HTML-Kit), y varios navegadores para comprobar los resultados.
Slide 11
1. Primeros pasos (I)
1.1 Preparar la página.
El lenguaje javascript
Aprenderemos aquí a aplicar el lenguaje de programación javascript.
Javascript permite crear páginas dinámicas. Este lenguaje es leído e interpretado por el navegador del usuario, de forma que es un lenguaje de programación del lado del cliente.
Slide 12
Como se ha dicho en la introducción, para poder seguir este manual debemos saber ya previamente los lenguajes HTML y CSS. No necesitamos nada más, ni debemos asustarnos al oir hablar de "lenguaje de programación", ya que javascript es más fácil de lo que parece. Programar es decirle al ordenador lo que queremos que éste haga, y en este caso es decirle a la página que está viendo el usuario las acciones que queremos que se muestren en la página.
Para saber más sobre javascript, puedes consultar en Wikipedia: Javascript donde encontrarás la definición, y el origen y desarrollo de este lenguaje.
La pagina web
Javascript es un lenguaje que se aplica a las páginas web. Por lo tanto para aplicar el lenguaje javascript debemos diseñar primero una página Web, debemos tener primero la página, o por lo menos sus partes estáticas, con el código HTML y CSS necesario para poder visualizarla
Una vez tengamos la página podemos aplicar direfentes scripts o codigo javascript para poder realizar las acciones dinámicas.
Slide 14
El código javascript se integra dentro de la página, haciendo referencia a partes de la página en donde debe aplicarse, de ahí la importancia de tener una página bien construida, ya que las instrucciones de javascript se aplican sobre el documento construido en código HTML y CSS.
El Doctype
Es importante que la página tenga siempre la instrucción Doctype correcta. Mediante el elemento Doctype el navagador interpretará la página y el código javascript correctamente. La falta del elemento Doctype, o si éste no esta escrito correctamente, puede provocar que el código javascript no funcione bien o simplemente no funcione, ya que el navegador puede interpretarlo de forma distinta.
Slide 16
Sobre cómo escribir correctamente el elemento Doctype puedes consultar la página 8.1. La etiqueta Doctype del manual de HTML.
Hay varios tipos de etiqueta Doctype, veamos cuál debemos usar. Antes de la aparición del HTML5, y si no vamos a hacer una página con frames, debemos usar el modo transicional o el estricto. Respecto al lenguaje podemos usar tanto el HTML 4.01 como el XHTML 1.0, aunque es más recomendable usar el XHTML 1.0. Esta etiqueta en modo transicional es la siguiente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Actulmente el HTML5 es admitido ya por la mayoría de los navegadores, por lo que usaremos el Doctype para HTML5, el cual es mucho mas simple. Con HTML5 podemos remplazar el Doctype anterior por lo siguiente:
<!DOCTYPE HTML>
Slide 17
Validación
Ya hemos destacado la importancia de que la página esté bien construida. Una de las maneras de asegurarnos de que esto es así es validar el código HTML. Validar la página es comprobar que está bien construida de acuerdo con las normas del W3C (World Wide Web Consortium), tal como se ha explicado en el manual de HTML, página 11.1 Validación hay varias formas de validar la página. Las más habituales son usar el validador del W3C, en la pagina http://validator.w3.org/, o usar el plugin del navegador Mozilla Firefox "HTML Validator". Sobre cómo usarlos puedes encontrar más información en el página antes mencionada del curso HTML-CSS.
Slide 18
Hay algunas etiquetas que no son reconocidas por el validador, como la etiqueta embed. En este caso la página no quedará validada. En realidad no es tan importante que la página esté o no validada sino que esté bien construida; sin etiquetas sin cerrar o que se solapen unas a otras, así por ejemplo un código como el siguiente:
<p>El siguiente <b><i>código</b></i> no está bien construido. </p>
Aunque el navegador lo lea perfectamente, tendría problemas para aplicarle código javascript, ya que las etiquetas <b> y <i> están solapadas.