13

Click here to load reader

T1 trabajo1navarrozuaraelisaramosruizpedro

Embed Size (px)

DESCRIPTION

Introducción a JavaScript

Citation preview

Page 1: T1 trabajo1navarrozuaraelisaramosruizpedro

IES Gran Capitán

Módulo: Desarrollo Web en entorno clienteCiclo Formativo de Grado Superior “Desarrollo de aplicaciones Web”

Lenguajes de programación:JavaScript

Fecha entrega: 08-10-2014

Autores: Elisa Navarro Zuara

Pedro J. Ramos Ruiz

IES Gran Capitán. C/. Arcos de la Frontera, S/N. 14014 – Córdoba. http://www.iesgrancapitan.org http://informatica.iesgrancapitan.org [email protected]

Page 2: T1 trabajo1navarrozuaraelisaramosruizpedro

Lenguajes de programación: JavaScript2

1 INTRODUCCIÓN

JavaScript es un lenguaje de programación interpretado y orientado a objetos, por lo que no esnecesario compilar los programas para ejecutarlos. En otras palabras, los programas escritos conJavaScript se pueden probar directamente en cualquier navegador sin necesidad de procesos intermedios.

JavaScript es un lenguaje de programación que se utiliza principalmente para crear páginas webdinámicas. Una página web dinámica es aquella que incorpora efectos como texto que aparece ydesaparece, animaciones, acciones que se activan al pulsar botones y ventanas con mensajes de aviso alusuario.

JavaScript se diseñó con una sintaxis similar al C, aunque adopta nombres y convenciones dellenguaje de programación Java. Sin embargo, JavaScript no guarda ninguna relación directa con ellenguaje de programación Java.

IES Gran Capitán. C/. Arcos de la Frontera, S/N. 14014 – Córdoba.http://www.iesgrancapitan.org http://www.iesgrancapitan.org/blog04/ [email protected]

Page 3: T1 trabajo1navarrozuaraelisaramosruizpedro

Lenguajes de programación: JavaScript3

2 HISTORIA

En 1995, Brendan Eich trabajaba en Netscape Communications Corporation, la compañía quepublicó el famoso Netscape Navigator, entonces principal competidor de Internet Explorer. Brendandesarrolló LiveScript un lenguaje de script que se basa en el lenguaje Java. Netscape inició el desarrollode una versión del cliente LiveScript, que pasó a llamarse JavaScript, en homenaje al lenguaje Javacreado por Sun Microsystems.

En ese momento, el lenguaje Java era cada vez más popular, y Brendan Eich, el padre deJavaScript, al llamarlo JavaScript en lugar de LiveScript era una forma de publicidad de Java y JavaScripten sí. Atención, al final, estos dos lenguajes son radicalmente diferentes, no vayas a confundir Java yJavaScript, pues operan de forma diferente.

JavaScript fue lanzado en diciembre de 1995 y estaba integrado en Netscape Navigator 2. Ellenguaje fue tan exitoso, que Microsoft desarrolló una versión similar llamada JScript, que se instalaba enInternet Explorer 3, en 1996. Netscape decidió enviar su versión de JavaScript a ECMA International(European Computer Manufacturers Association, la Asociación Europea de Normalización) para que ellenguaje fuera normalizado, es decir para que se creara una referencia del lenguaje y que así pudiera serutilizado por otras personas y embebidos en otro software. ECMA International estandarizó el lenguajecon el nombre de ECMAScript. La versión más conocida es utilizada en todo el mundo, es la versiónECMAScript 3, publicado en diciembre de 1999

En enero de 2009, el proyecto CommonJS fue fundado con el objetivo de especificar una libreríapara uso de tareas comunes principalmente para el desarrollo fuera del navegador web.

IES Gran Capitán. C/. Arcos de la Frontera, S/N. 14014 – Córdoba.http://www.iesgrancapitan.org http://www.iesgrancapitan.org/blog04/ [email protected]

Page 4: T1 trabajo1navarrozuaraelisaramosruizpedro

Lenguajes de programación: JavaScript4

3 CARACTERÍSTICAS DE JAVASCRIPT

Las siguientes características son comunes a todas las implementaciones que se ajustan alestándar ECMAScript, salvo que se indique expresamente lo contrario.

3.1 Imperativo y estructurado

JavaScript soporta gran parte de la sintaxis de la programación estructurada de C. Con unasalvedad: en C, el ámbito de las variables alcanza al bloque en el cual fueron definidas; sin embargo, enJavaScript esto no es soportado, puesto que el ámbito de las variables es el de la función en la cual fuerondeclaradas.

Esto cambia con la versión de JavaScript 1.7, ya que soporta block scoping por medio de lapalabra clave let.

Como en C, JavaScript hace distinción entre expresiones y sentencias. Una diferencia sintácticacon respecto a C es la inserción automática de punto y coma, es decir, en JavaScript los puntos y comasque finalizan una sentencia pueden ser omitidos.

3.2 Dinámico

3.2.1 Tipado dinámico

Como en la mayoría de lenguajes de scripting, el tipo está asociado al valor, no a la variable. Porejemplo, una variable x en un momento dado puede estar ligada a un número y más adelante, religada auna cadena. JavaScript soporta varias formas de comprobar el tipo de un objeto. Una forma de saberlo espor medio de la palabra clave typeof.

3.2.2 Objetual

JavaScript está formado casi en su totalidad por objetos. Los objetos en JavaScript son arraysasociativos, mejorados con la inclusión de prototipos. Las propiedades y sus valores pueden ser creados,cambiados o eliminados en tiempo de ejecución. JavaScript tiene un pequeño número de objetospredefinidos como son Function y Date.

3.2.3 Evaluación en tiempo de ejecución

JavaScript incluye la función eval que permite evaluar expresiones como expresadas comocadenas en tiempo de ejecución. Por ello se recomienda que eval sea utilizado con precaución y que seopte por utilizar la función JSON.parse() en la medida de lo posible, pues resulta mucho más segura.

3.3 Funcional

A las funciones se les suele llamar ciudadanos de primera clase; son objetos en sí mismos. Comotal, poseen propiedades y métodos, como .call() y .bind(). Una función anidada es una función definidadentro de otra.

3.4 Prototípico

3.4.1 Prototipos

JavaScript usa prototipos en vez de clases para el uso de herencia. Es posible llegar a emularmuchas de las características que proporcionan las clases en lenguajes orientados a objetos tradicionalespor medio de prototipos en JavaScript.

IES Gran Capitán. C/. Arcos de la Frontera, S/N. 14014 – Córdoba.http://www.iesgrancapitan.org http://www.iesgrancapitan.org/blog04/ [email protected]

Page 5: T1 trabajo1navarrozuaraelisaramosruizpedro

Lenguajes de programación: JavaScript5

3.4.2 Funciones como constructores de objetos

Las funciones también se comportan como constructores. ECMAScript 5 ofrece el métodoObject.create, permitiendo la creación explícita de una instancia sin tener que heredar automáticamentedel prototipo de Object. Se pueden añadir nuevos métodos modificando el prototipo del objeto usadocomo constructor. Constructores predefinidos en JavaScript, como Array u Object, también tienenprototipos que pueden ser modificados. Aunque esto sea posible se considera una mala práctica modificarel prototipo de Object ya que la mayoría de los objetos en JavaScript heredan los métodos y propiedadesdel objeto prototype.

3.5 Otras características

3.5.1 Entorno de ejecución

JavaScript normalmente depende del entorno en el que se ejecute (por ejemplo, en un navegadorweb) para ofrecer objetos y métodos por los que los scripts pueden interactuar con el "mundo exterior".De hecho, depende del entorno para ser capaz de proporcionar la capacidad de incluir o importar scripts(por ejemplo, en HTML por medio del tag <script>).

3.5.2 Funciones variádicas

Un número indefinido de parámetros pueden ser pasados a la función. La función puede accedera ellos a través de los parámetros o también a través del objeto local arguments. Las funciones variádicastambién pueden ser creadas usando el método .apply().

3.5.3 Funciones como métodos

A diferencia de muchos lenguajes orientados a objetos, no hay distinción entre la definición defunción y la definición de método. Más bien, la distinción se produce durante la llamada a la función; unafunción puede ser llamada como un método. Cuando una función es llamada como un método de unobjeto, la palabra clave this, representa al objeto que invocó dicha función.

3.5.4 Arrays y la definición literal de objetos

Al igual que muchos lenguajes de script, arrays y objetos pueden ser creados con una sintaxisabreviada. De hecho, estos literales forman la base del formato de datos JSON.

3.5.5 Expresiones regulares

JavaScript también soporta expresiones regulares de una manera similar a Perl, que proporcionanuna sintaxis concisa y poderosa para la manipulación de texto que es más sofisticado que las funcionesincorporadas a los objetos de tipo string.

IES Gran Capitán. C/. Arcos de la Frontera, S/N. 14014 – Córdoba.http://www.iesgrancapitan.org http://www.iesgrancapitan.org/blog04/ [email protected]

Page 6: T1 trabajo1navarrozuaraelisaramosruizpedro

Lenguajes de programación: JavaScript6

3.6 Extensiones específicas del fabricante

JavaScript se encuentra oficialmente bajo la organización de Mozilla Foundation, y nuevascaracterísticas del lenguaje son añadidas periódicamente. Sin embargo, sólo algunos motores JavaScriptsoportan estas características:

• Las propiedades get y set.

• Cláusulas catch condicionales.

• Protocolo iterador adoptado de Python.

• Corrutinas también adoptadas de Python.

• Generación de listas y expresiones por comprensión también adoptado de Python.

• Establecer el ámbito a bloque a través de la palabra clave let.

• Desestructuración de arrays y objetos.

• Expresiones concretas en funciones (function(args) expr).

• ECMAScript para XML (E4X), una extensión que añade soporte nativo XML a ECMAScript.

IES Gran Capitán. C/. Arcos de la Frontera, S/N. 14014 – Córdoba.http://www.iesgrancapitan.org http://www.iesgrancapitan.org/blog04/ [email protected]

Page 7: T1 trabajo1navarrozuaraelisaramosruizpedro

Lenguajes de programación: JavaScript7

4 SINTAXIS Y SEMÁNTICA

La sintaxis de un lenguaje de programación se define como el conjunto de reglas que debenseguirse al escribir el código fuente de los programas para considerarse como correctos para ese lenguajede programación.

La sintaxis de JavaScript es muy similar a la de otros lenguajes de programación como Java y C.Las normas básicas que definen la sintaxis de JavaScript son las siguientes:

• No se tienen en cuenta los espacios en blanco y las nuevas líneas: el intérprete de JavaScriptignora cualquier espacio en blanco sobrante, por lo que el código se puede ordenar de formaadecuada para entenderlo mejor (tabulando las líneas, añadiendo espacios, creando nuevaslíneas, etc.).

Código JavaScript:

instruccion_1;

instruccion_1_1;

instruccion_1_2;

instruccion_2;

• Se distinguen las mayúsculas y minúsculas: al igual que sucede con la sintaxis de las etiquetasy elementos XHTML. Sin embargo, si en una página XHTML se utilizan indistintamentemayúsculas y minúsculas, la página se visualiza correctamente, siendo el único problema la novalidación de la página. En cambio, si en JavaScript se intercambian mayúsculas y minúsculas elscript no funciona.

• Se pueden incluir comentarios: los comentarios se utilizan para añadir información en elcódigo fuente del programa. Aunque el contenido de los comentarios no se visualiza porpantalla, si que se envía al navegador del usuario junto con el resto del script, por lo que esnecesario extremar las precauciones sobre la información incluida en los comentarios.

Hay dos tipos de comentarios:

• Comentarios de fin de línea. Se utilizan para comentar una instrucción. Comienza con dosbarras de división.

• Comentarios multilínea. Este tipo permite saltos de línea. Un comentario multilíneacomienza con /* y termina con */.

Código JavaScript:

//A continuación se muestra un comentario

alert("Hola Mundo”);

/* Los comentarios de varias líneas son muy útiles

cuando se necesita incluir bastante información

en los comentarios */

alert("Hola Mundo”);

• No se define el tipo de las variables: al crear una variable, no es necesario indicar el tipo dedato que almacenará. De esta forma, una misma variable puede almacenar diferentes tipos dedatos durante la ejecución del script.

• No es necesario terminar cada sentencia con el carácter de punto y coma (;): en la mayoríade lenguajes de programación, es obligatorio terminar cada sentencia con el carácter (;). AunqueJavaScript no obliga a hacerlo, es conveniente seguir la tradición de terminar cada sentencia conel carácter del punto y coma (;).

IES Gran Capitán. C/. Arcos de la Frontera, S/N. 14014 – Córdoba.http://www.iesgrancapitan.org http://www.iesgrancapitan.org/blog04/ [email protected]

Page 8: T1 trabajo1navarrozuaraelisaramosruizpedro

Lenguajes de programación: JavaScript8

Ejemplo de un programa escrito en JavaScript:

function mayor()

{

//En primer lugar se declaran las variables.

var num1,num2;

//Se piden los valores por pantalla.

num1=parseInt(prompt("Introduce un número",""));

num2=parseInt(prompt("Introduce un número",""));

//Se comparan los números introducidos por pantalla.

if (num1>num2)

{

document.write("El número "+num1+" es mayor que el número "+num2);

}

else

{

if (num2>num1)

{

document.write("El número "+num2+" es mayor que el número "+num1);

}

else

{

document.write("El número "+num1+" es igual que el número "+num2);

}

}

}

IES Gran Capitán. C/. Arcos de la Frontera, S/N. 14014 – Córdoba.http://www.iesgrancapitan.org http://www.iesgrancapitan.org/blog04/ [email protected]

Page 9: T1 trabajo1navarrozuaraelisaramosruizpedro

Lenguajes de programación: JavaScript9

5 PROS Y CONTRAS

Ventajas• JavaScript se ejecuta en el lado del cliente. Esto significa que el código se ejecuta en el

procesador del usuario en lugar de un servidor web con el consiguiente ahorro de ancho debanda y la tensión en el servidor web.

• JavaScript es un lenguaje relativamente fácil. El lenguaje JavaScript es relativamentefácil de aprender y se compone de sintaxis que está en Inglés. Utiliza el modelo DOM queproporciona un montón de funcionalidad, escrito previamente, a los diversos objetos en laspáginas que hacen que sea muy fácil para desarrollar un script para resolver un objetivopersonalizado.

• JavaScript es relativamente rápido para el usuario final. A medida que se ejecuta elcódigo en la computadora, los resultados de los usuarios y el procesamiento se hacompletado casi al instante en función de la tarea, ya que no tiene que ser procesado en elservidor web del sitio y se envía de vuelta al usuario local, así como el ancho de banda delservidor.

• Extensión de funciones a las páginas web. Add-ons como Greasemonkey permiten a losdesarrolladores de JavaScript escribir fragmentos de JavaScript que se pueden ejecutar enlas páginas web que desee para ampliar su funcionalidad. Podemos escribir y utilizar unadd-on como Greasemonkey para implementarlo en la página web.

Inconvenientes• Cuestiones de seguridad. Fragmentos de JavaScript se ejecutan en servidores del cliente

inmediatamente y por lo tanto también se pueden utilizar para explorar el sistema delusuario. Si bien, se establece una cierta restricción para los estándares web modernos en losnavegadores, el código malicioso todavía se puede ejecutar por encima de las restriccionesestablecidas.

• Prestación JavaScript. Diferentes motores de diseño pueden hacer JavaScript diferente queresulta en falta de coherencia en términos de funcionalidad y la interfaz. Mientras que lasúltimas versiones de JavaScript se han orientado hacia un estándar universal, todavía existenciertas variaciones.

IES Gran Capitán. C/. Arcos de la Frontera, S/N. 14014 – Córdoba.http://www.iesgrancapitan.org http://www.iesgrancapitan.org/blog04/ [email protected]

Page 10: T1 trabajo1navarrozuaraelisaramosruizpedro

Lenguajes de programación: JavaScript10

6 CONCLUSIÓN

En conclusión:

• JavaScript es un lenguaje de programación interpretado y orientado a objetos, que se utilizaprincipalmente para crear páginas web dinámicas.

• Además, JavaScript no guarda ninguna relación directa con el lenguaje de programaciónJava.

• JavaScript está normalizado por ECMA International como el nombre ECMAScriptLanguage Reference.

• Imperativo y estructurado.

• Débilmente tipado, está formado casi en su totalidad por objetos y se evalúa en tiempo deejecución.

• A las funciones se les suele llamar ciudadanos de primera clase; son objetos en sí mismos.

• JavaScript usa prototipos en vez de clases para el uso de herencia.

• El entorno de ejecución de JavaScript normalmente es el navegador web.

• Un número indefinido de parámetros pueden ser pasados a la función.

• A diferencia de muchos lenguajes orientados a objetos, no hay distinción entre la definiciónde función y la definición de método.

• Al igual que muchos lenguajes de script, arrays y objetos pueden ser creados con unasintaxis abreviada.

• JavaScript también soporta expresiones regulares de una manera similar a Perl, queproporcionan una sintaxis concisa y poderosa para la manipulación de texto.

• JavaScript se encuentra oficialmente bajo la organización de Mozilla Foundation.

• La sintaxis de JavaScript es muy similar a la de otros lenguajes de programación como Javay C. Las normas básicas que definen la sintaxis de JavaScript son las siguientes:

• No se tienen en cuenta los espacios en blanco y las nuevas líneas.

• Se distinguen las mayúsculas y minúsculas.

• Se pueden incluir comentarios.

• No se define el tipo de las variables.

• No es necesario terminar cada sentencia con el carácter de punto y coma (;).

• Ventajas de JavaScript:

• JavaScript se ejecuta en el lado del cliente.

• JavaScript es un lenguaje relativamente fácil.

• JavaScript es relativamente rápido para el usuario final.

• Extensión de funciones a las páginas web.

• Inconvenientes de JavaScript:

• Cuestiones de seguridad.

• Prestación JavaScript.

IES Gran Capitán. C/. Arcos de la Frontera, S/N. 14014 – Córdoba.http://www.iesgrancapitan.org http://www.iesgrancapitan.org/blog04/ [email protected]

Page 11: T1 trabajo1navarrozuaraelisaramosruizpedro

Lenguajes de programación: JavaScript11

7 CONCEPTOS CLAVE

• Script: cada uno de los programas, aplicaciones o trozos de código creados con el lenguaje deprogramación JavaScript. Unas pocas líneas de código forman un script y un archivo de miles delíneas de JavaScript también se considera un script. A veces se traduce al español directamente como"guión", aunque script es una palabra más adecuada y comúnmente aceptada.

• Sentencia: cada una de las instrucciones que forman un script.

• Palabras reservadas: son las palabras (en inglés) que se utilizan para construir las sentencias deJavaScript y que por tanto no pueden ser utilizadas libremente. Las palabras actualmente reservadaspor JavaScript son: break, case, catch, continue, default, delete, do, else, finally, for, function, if, in,instanceof, new, return, switch, this, throw, try, typeof, var, void, while, with.

• Interpretado: es ejecutado por medio de un intérprete.

• Orientado a objetos: usa los objetos en sus interacciones para diseñar aplicaciones y programasinformáticos.

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

• Prototipos: son un estilo en el cual los objetos son creados mediante la clonación de otros objetos omediante la escritura de código por parte del programador. De esta forma los objetos ya existentespueden servir de prototipos para los que el programador necesite crear.

• Herencia: la herencia facilita la creación de objetos a partir de otros ya existentes e implica que unasubclase obtiene todo el comportamiento (métodos) y eventualmente los atributos (variables) de susuperclase.

• Arrays: es una zona de almacenamiento continuo, que contiene una serie de elementos del mismotipo.

• JSON: es un formato ligero para el intercambio de datos, además es un subconjunto de la notaciónliteral de objetos de JavaScript que no requiere el uso de XML.

• Expresiones regulares: son una secuencia de caracteres que forman un patrón de búsqueda,principalmente utilizadas para la búsqueda de patrones de cadenas de caracteres u operaciones desustituciones.

• Modelo DOM: es una interfaz de programación de aplicaciones para acceder, añadir y cambiardinámicamente contenido estructurado en documentos con lenguajes como ECMAScript(JavaScript).

IES Gran Capitán. C/. Arcos de la Frontera, S/N. 14014 – Córdoba.http://www.iesgrancapitan.org http://www.iesgrancapitan.org/blog04/ [email protected]

Page 12: T1 trabajo1navarrozuaraelisaramosruizpedro

Lenguajes de programación: JavaScript12

8 BIBLIOGRAFIA

• Rafael Menéndez-Barzanallana Asensio. Lenguaje de programación JavaScript.Consultado en: http://www.um.es/docencia/barzana/DAWEB/Lenguaje-de-programacion-JavaScript-1.pdf

• Libros Web. Introducción a JavaScript.Consultado en: http://librosweb.es/javascript/capitulo_1.html

• W3Schools. Tutorial de JavaScript.Consultado en: http://www.w3schools.com/js/default.asp

IES Gran Capitán. C/. Arcos de la Frontera, S/N. 14014 – Córdoba.http://www.iesgrancapitan.org http://www.iesgrancapitan.org/blog04/ [email protected]

Page 13: T1 trabajo1navarrozuaraelisaramosruizpedro

Lenguajes de programación: JavaScript13

9 ÍNDICE

1INTRODUCCIÓN ..................................................................................................................................... 2

2HISTORIA .................................................................................................................................................. 3

3CARACTERÍSTICAS DE JAVASCRIPT ............................................................................................... 4

4SINTAXIS Y SEMÁNTICA ...................................................................................................................... 7

5PROS Y CONTRAS ................................................................................................................................... 9

6CONCLUSIÓN ........................................................................................................................................ 10

7CONCEPTOS CLAVE ............................................................................................................................. 11

8BIBLIOGRAFIA ...................................................................................................................................... 12

9ÍNDICE ..................................................................................................................................................... 13

IES Gran Capitán. C/. Arcos de la Frontera, S/N. 14014 – Córdoba.http://www.iesgrancapitan.org http://www.iesgrancapitan.org/blog04/ [email protected]