Manual de JavaScript
1
JavaScript
(Manual)
Prepara tus exámenes
Prepara tus exámenes y mejora tus resultados gracias a la gran cantidad de recursos disponibles en Docsity
Consigue puntos base para descargar
Gana puntos ayudando a otros estudiantes o consíguelos activando un Plan Premium
Orientación Universidad
Prepara tus exámenes
Prepara tus exámenes y mejora tus resultados gracias a la gran cantidad de recursos disponibles en Docsity
Busca documentos
Prepara tus exámenes con los documentos que comparten otros estudiantes como tú en Docsity
Busca tu universidad
Encuentra los documentos específicos para los exámenes de tu universidad
Video Cursos
Estudia con lecciones y exámenes resueltos basados en los programas académicos de las mejores universidades
Quiz
Responde a preguntas de exámenes reales y pon a prueba tu preparación
Consigue puntos base para descargar
Gana puntos ayudando a otros estudiantes o consíguelos activando un Plan Premium
Comunidad
Pregúntale a la comunidad
Pide ayuda a la comunidad y resuelve tus dudas de estudio
Ebooks gratuitos
¡Nuestros e-books salva-estudiantes!
Descarga nuestras guías gratuitas sobre técnicas de estudio, métodos para controlar la ansiedad y consejos para la tesis preparadas por los tutores de Docsity
prácticas de javascript para mejorar la lógica y agregar a tus paginas web
Tipo: Apuntes
2019/2020
1 / 95
Esta página no es visible en la vista previa
¡No te pierdas las partes importantes!
En oferta
Documentos relacionados
Vista previa parcial del texto
¡Descarga curso de javascript con ejercicios resueltos y sin resolver y más Apuntes en PDF de Informática solo en Docsity!
JavaScript
(Manual)
Antes de empezar:
- Manual F.V. Significa “manual práctico de informática”, pero realmente realmente PRÁCTICO.
- En el texto me refiero continuamente a TuCarpeta , esto es un subdirectorio de tu ordenador donde es conveniente que grabes todos los programas de este “tu manual”.
- Todos los programas y ejercicios del manual han sido probados sin problema en el Microsoft Internet Explorer 5.
- Mi consejo, es que escribas de nuevo tal como te indico en el texto, cada uno de los programas utilizando el Bloc de Notas del Windows. Sólo en el caso de que el programa no te funcione y no descubras cuál es el error, cópialo a partir del Word en el Bloc de Notas y grábalo con otro nombre; para poder compararlo con el tuyo y así descubrir el error. Piensa que se aprende más descubriendo los propios errores, que avanzar sin hacer ningún error.
ÍNDICE
- Introducción a la programación en JavaScript .................................................................................... 3
Ejercicios de autoevaluación 1 ............................................................................................................... 18
- Estructuras de Programación .............................................................................................................. 23
Ejercicios de autoevaluación 2 ............................................................................................................... 46
- Funciones y Arrays ............................................................................................................................. 51
Ejercicios de autoevaluación 3 ............................................................................................................... 74
- Programación Visual .......................................................................................................................... 79
Ejercicios de autoevaluación 4 ............................................................................................................... 93
- Programación en HTML..................................................................................................................... 95
Ejercicios de autoevaluación 5 ............................................................................................................... 136
- Programación Orientada a Objetos .....................................................................................................
- JavaScript y la Web ............................................................................................................................ 173
Soluciones autoevaluación 1 .................................................................................................................. 191
Soluciones autoevaluación 2 .................................................................................................................. 199
Soluciones autoevaluación 3 .................................................................................................................. 211
Soluciones autoevaluación 4 .................................................................................................................. 227
Soluciones autoevaluación 5 .................................................................................................................. 237
- Ejecuta el ―Bloc de Notas‖ , es decir: [Inicio] Programas Accesorios Bloc de Notas
- Escribe:
**
PROG000.HTM
Esto aparecerá en el navegador porque es un párrafo
Esto es otro párrafo
Observa lo que aparece en la línea de título
La línea de título es la frase que aparece en el marco del navegador, línea superior
¿Está claro para qué sirven los tags P, /P?
**
- Graba el fichero anterior con el nombre PROG000.HTM en TuCarpeta
- Ejecuta el “Explorador de Windows”. Sitúate en TuCarpeta y haz un doble click en PROG000.HTM De esta forma, se ejecuta el navegador de tu ordenador (supondré que es el Internet Explorer ) y se “carga” la página PROG000.HTM
El navegador nos muestra la página HTML “visualmente”, para ver su código debes hacer: Menú Ver Código fuente
- La programación en HTML no tiene ninguna utilidad para un usuario normal, ya que en el mercado existen herramientas que evitan la necesidad de tener que introducir manualmente los “tags”: HotMetal, FontPage, Word, etc. Lo que sí tienen sentido es el estudio de la programación en JavaScript.
- JavaScript es un lenguaje de programación creado por la empresa Netscape (creadora de uno de los navegadores más conocido) Es el lenguaje de programación más utilizado en Internet para añadir interactividad a las páginas Web
- No confundir el JavaScript con el Java. El Java es un lenguaje de programación de propósito general como lo son el C++ o el Visual Basic.
- Un programa en JavaScript se integra en una página Web (entre el código HTML) y es el navegador el que lo interpreta (ejecuta). Es decir el JavaScript es un lenguaje interpretado , no compilado (no se genera ningún tipo de fichero objeto o exe).
- Para programar en JavaScript sólo necesitamos un editor de texto (utilizaremos el Bloc de Notas del Windows) y un navegador (utilizaremos el Microsoft Internet Explorer ) para ejecutarlo.
- ¿Porqué el JavaScript y no otro lenguaje de programación? Porque: Es moderno (tiene pocos años) Es sencillo (su hermano mayor: el Java , es bastante más complejo) Es útil (el desarrollo de Internet, se prevé muy rápido en los próximos años) Es potente: permite la moderna POO (programación orientada a objetos) Es barato: sólo necesitamos un editor de textos (el “Bloc de Notas” está incluido en el Windows) y un navegador (es gratuito, ya sea el “Internet Explorer” o el “Netscape”).
Es visual: permite la moderna “programación visual” (ventanas, botones, colores, formularios, etc.).
En definitiva: es ideal para un primer curso de introducción a la programación. Y has de tener en cuenta que hay un “dicho” en informática, que afirma: ―Si dominas un lenguaje de programación, los conoces todos‖.
2.- Sintaxis básica
- Escribe, utilizando el “Bloc de Notas” del Windows, el siguiente programa:
**
PROG001.HTM
Programa 1 en JavaScript
**
- Graba el fichero anterior en TuCarpeta con el nombre Prog001.htm
- Ejecuta el programa Prog001.htm , es decir: Ejecuta el “Explorador de Windows” Sitúate en TuCarpeta Clic-Click en Prog001.htm
- Estudio del Prog001.htm : Un programa “JavaScript” se escribe integrado en una página HTML, por lo tanto no es más que un fichero de texto que contiene una serie de pares de tags correspondientes a la página Web (como mínimo el par: , ), además del par de tags característico de un programa JavaScript. Dicho fichero se ha de grabar necesariamente con la extensión HTM (característica de una página HTML). Un programa “JavaScript” no es más que una secuencia de ordenes, que deben terminar en punto y coma , entre los tags: **** En nuestro Prog001.htm , hemos incluido el programa en la cabecera (HEAD) de la página, pero podríamos colocarlo en cualquier parte del fichero htm Nuestro primer programa JavaScript contiene una única sentencia: alert(―‖¡Hola Mundo!‖); Que “abre” una ventana con el mensaje que tenemos entre comillas. Al hacer clic en el [Aceptar] de la ventana ―alert‖ , se acaba el programa JavaScript (se encuentra el tag ) y continua ejecutándose la página HTML.
- Utilizando el “Bloc de Notas” escribe el siguiente programa:
*var base,altura; base=prompt("Escribe la base del Rectángulo",""); altura=prompt("Escribe la altura del Rectángulo",""); alert("El área del Rectángulo es = "+(basealtura));
**
- Grábalo en TuCarpeta con el nombre Prog003.htm
- Ejecútalo varias veces. Sería conveniente utilizar números enteros y también decimales (5.72, 0.531: observa que has de utilizar el punto decimal inglés).
- Si has ejecutado el programa una vez, para volverlo a ejecutar, no es necesario que "cierres" el navegador, basta que hagas: Menú Ver Actualizar o si quieres ir más rápido, pulsa la tecla [F5]
- Es importante que tengas claro este programa: Declaramos dos variables ( var ), que necesitamos para introducir la base y la altura del rectángulo, a través de dos "prompts": base= prompt...... altura= prompt..... Por último necesitamos dos "alerts" que nos muestre el resultado del programa, que es simplemente el producto base * altura
- El único elemento nuevo que aparece en el Prog003.htm es: /Programa que sirve para calcular* el área de un rectángulo / Todo lo que aparece escrito entre / y / no es más que un comentario para el programador, igual que pasaba con las líneas que empezaban por // La diferencia entre // y / */ está en que esta última forma de incluir un comentario, nos permite colocarlo de forma que ocupe más de una línea.
3.- Variables
- Declaración de variables Una variable se puede declarar en JavaScript , de dos formas: Forma Explícita: var nombre Variable; Forma Implícita: var nombre Variable= valor;
En el último caso no es imprescindible escribir var , pero es conveniente, ya que de esta forma localizamos rápidamente todas las variables del programa.
El "JavaScript" es un lenguaje de programación "Case Sensitive" , esto es: no es lo mismo las mayúsculas que las minúsculas. Es decir, para el JavaScript: pepe es distinto de Pepe y distinto de pEpe.
- Escribe el siguiente programa:
**
// PROG004.HTM
/ Programa que utiliza una variable explícita y dos implícitas /
var Expli; var pi=3.141592; var radio=7; Expli=piradioradio; alert("Área del Círculo = "+Expli);**
** **
- Grábalo en TuCarpeta con el nombre Prog004.htm
- Ejecútalo
4.- Tipos de Datos
Cuando declaramos una variable, ésta no pertenece a ningún tipo de dato en concreto, se dice que es Undefined. Es al asignarle un valor cuando pasa a ser de uno u otro tipo, según el dato que albergue.
Existen 6 tipos de datos: String : cadenas de texto Object : objetos Number : valores numéricos Null : nulo Boolean : true o false Undefined : no definido. Podemos averiguar el tipo de dato que contiene una variable si utilizamos la función incorporada typeof
Escribe el siguiente programa:
** **
Grábalo en TuCarpeta con el nombre Prog005.htm
Ejecútalo tantas veces como quieras.
Dígitos del sistema decimal : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 Dígitos del sistema hexadecimal : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A (que corresponde al 10 en base decimal), B (que corresponde al 11 en decimal), C (12), D (13), E (14), F (15)
Ejemplo: FF32 en base 16 es 2 + 316 + 1516^2 + 15*16^3 = 65330 en sistema decimal Es decir: 0xFF32 (número en base 16, según notación de JavaScript) = FF32 16 = 65330 10
123458 = 5 + 48 + 38^2 + 28^3 + 18^4 = 5349 10 Es decir: 012345 (número en base 8, según notación de JavaScript) = 12345 8 = 5349 10
- Escribe el siguiente programa:
**
**
- Grábalo en TuCarpeta con el nombre Prog007.htm y ejecútalo.
En el programa anterior aparecen 3 “alerts”, uno para cada uno de los tres números. No hay ningún problema para incluir los tres “alerts” en uno solo....
- En efecto, escribe el siguiente programa:
**
**
- Grábalo en TuCarpeta con el nombre Prog007b.htm y ejecútalo.
- Observa que la solución de nuestro problema está: Unir texto (entre comillas) y variables (sin comillas), con el signo “+” Cada vez que deseemos un cambio de línea, incluimos “\n”
Veamos otra forma de incluir en un “alert” muchos datos ...
- Escribe:
**
**
- Grábalo en TuCarpeta con el nombre Prog007bb.htm y ejecútalo.
- Observa de qué forma acumulamos muchos datos en un solo “alert” (ésta será la forma de proceder, cuando necesitemos una “salida” con muchos valores): definimos una variable “vacía”: var salida=‖‖; acumulamos a la variable salida todo lo que queramos: salida=salida+ lo que sea “lo que sea” puede ser una cadena (un texto) o una variable (sea numérica o de texto). salida=salida + x1 + “ “ + y1; salida=salida + “ya me he cansado”; Para acabar, un solo “alert”: alert(salida);
Variables nulas
Cuando una variable no contiene ningún valor, su contenido es nulo Ejemplo: miVariable = "Hola"; miVariable= null; // la vaciamos para que no ocupe memoria.
Valores especiales para variables numéricas
NaN : no es un número. Infinity: infinito, por ejemplo 3/
8.- Conversión entre tipos de datos
- Conversión implícita de tipos Observa: var var1 = "75"; var var2 = 25; var var3, var4; var3 = var1 + var2; var4 = var2 + var1; Las varibles var3 y var4 contienen ¿números o textos? Cuando se suman cadenas de texto con cualquier otra cosa, los otros tipos de datos se convierten en cadenas de texto. Pero si restamos, multiplicamos o dividimos "cadenas de texto", ¿sucede lo mismo?. Vamos a descubrirlo en los siguientes programas.
- Escribe el siguiente programa:
**
**
- Graba el programa en TuCarpeta con el nombre Prog010.htm
- Ejecútalo.
- La conclusión está clara: Si sumamos dos cadenas (aunque contengan números) de texto se produce la concatenación (unión) de los dos textos. Si multiplicamos (o hacemos cualquier operación aritmética que no sea la suma ), dos cadenas de texo que en realidad contienen números, se produce una conversión implícita de las cadenas a números y aparece el producto aritmético de los números.
- ¿Qué sucede si introducimos dos números a través de la función prompt ?. Vamos a verlo:
- Escribe el siguiente programa:
**
**
- Grábalo en TuCarpeta , con el nombre Prog011.htm
- Ejecútalo. No funciona como deseamos debido a que el resultado de un prompt , siempre es una cadena de texto.
El problema que tenemos pendiente, es ¿cómo sumar en JavaScript?
- Conversión explícita de tipos
parseFloat(cadena) Toma la "cadena" y la transforma en un número en coma flotante, si es posible. parseFloat ("123.456") = 123. parseFloat ("123ABC") = 123 parseFloat ("ABC") = NaN
parseInt(cadena, número) Devuelve números enteros, el segundo argumento nos permite escoger la base de numeración (entre 2 y 36) parseInt ("ABC",16) = 2748 ABC 16 = 2748 10 Si no especificamos el segundo argumento, por defecto es 10. Si la cadena empieza por 0x y no existe el segundo argumento, se entiende que es 16. Si la cadena empieza por 0 y no existe el segundo argumento, se entiende que es 8
toString(argumento) Si argumento = número Devuelve una cadena que contiene el número Puede haber un argumento opcional: (13).toString(16) =”d” siendo 1310 = d 16 (13).toString(2) = “1101” siendo 1310 = 1101 2
- Vamos a hacer un programa que sume números en JavaScript. Escribe:
**
**
- Grábalo en TuCarpeta con el nombre Prog012.htm
- Ejecútalo, utilizando números enteros, naturales y decimales.
A partir de este momento hemos de tener claro si los “prompts” corresponden a números enteros, decimales o de texto:
n =parseInt(m,16) La variable “n” guardará el número en base 10 Es decir: parseInt(cadena, 16) , transforma la “cadena”, en nuestro ejemplo un número escrito en base 16, en el correspondiente número (no cadena) pero en base decimal.
Vamos a ver si el procedimiento sirve para cualquier otra base...
Antes de todo veamos unos cuantos números en diferentes bases:
367 = 6 + 3.7 = 27 en base 10 1234 = 3 + 2.4 + 1.4^2 = 27 en base 10 51346 = 4 + 3.6 + 1.6^2 + 5.6^3 = 1138 en base 10
- Escribe:
**
**
- Grábalo con el nombre Prog012bbb.htm y ejecútalo, probándolo con los números anteriores.
Veamos el problema inverso: dado un número en base 10, nos interesa convertirlo a base 7, por ejemplo.
Matemáticamente:
Sea 593 un número en base 10
59310 = 1505 7 , porque:
En JavaScript deberíamos hacerlo de la siguiente forma, escribe:
** **
- Grábalo con el nombre Prog012bbbb.htm y ejecútalo, probando su funcionamiento con el número 593
- Haz un programa de nombre Eval1I.htm , que has de grabar en TuCarpeta , que funcione de la siguiente forma:
- El programa nos pide nuestro nombre.
- El programa nos pide nuestro primer apellido.
- El programa nos pide en qué población vivimos.
El programa presenta una pantalla aproximadamente igual a la siguiente:
Hola nombre Apellido
Adiós habitante de Población ==================================
- Haz un programa de nombre Eval1J.htm , que has de grabar en TuCarpeta , que funcione de la siguiente forma:
- El programa nos pide un número.
- Utiliza tres contadores: Un contador: suma 5 Otro contador: suma 21 Otro contador: resta 4
- El programa nos presenta los 4 números de la siguiente forma: La primera línea: el número introducido. La segunda línea: los tres números tabulados, que han resultado de los tres contadores. De forma que si introducimos el nº 5 debería aparecer:
- Haz un programa de nombre Eval1K.htm , que has de grabar en TuCarpeta , que funcione de la siguiente forma:
- El programa nos pide un número entero.
- El programa nos da como resultado el mismo número pero en base 16
- Y por último nos lo escribe en base 5 Comprueba el programa para el número 52. Deberás calcular en primer lugar matemáticamente el valor de 52 en base 16 y en base 5.
- Haz un programa de nombre Eval1L.htm , que has de grabar en TuCarpeta , que funcione de la siguiente forma:
- El programa nos pide un número en base ocho
- El programa nos lo escribe en base decimal.
- Y por último en base 2. Comprueba el programa para el número 6561 8. Deberás resolver en primer lugar el problema matemáticamente.
- Haz un programa de nombre Eval1M.htm que has de grabar en TuCarpeta , que funcione de la siguiente forma:
- El programa nos pide un número entero.
- El programa nos pide la base
- El programa nos escribe el número introducido en la "base" deseada.
Comprueba el programa para el número 100, en base 2, 3 y 11. Deberás resolver en primer lugar el problema matemáticamente.
¿Qué es la WWW?
Cuáles son los "browsers" más conocidos.
Escribe un fichero HTML (que no sea un programa JavaScript), que presente la frase: "Hola que tal" y debajo tu nombre y apellidos.
¿Qué encierra el par de tags: , ?
¿Qué relación hay entre el Java y el JavaScript?
¿Quién creó el lenguaje de programación JavaScript?
¿Cuáles son las características del JavaScript?
El JavaScript es un lenguaje ¿compilado o interpretado?. ¿Qué programa hace de compilador o interprete?
¿Porqué decimos que el JavaScript es un lenguaje de programación barato?
¿Qué indican las siglas POO?
¿Cómo se llaman y cómo funcionan las dos formas de definir una variable en JavaScript?
¿Porqué el JavaScript es un lenguaje "Case Sensitive"?
Nombra todos los tipos de datos que existen en JavaScript.
¿Para qué sirve la función typeof ?. Inventa un par de ejemplos.
¿Qué es el carácter de escape? ¿Qué es un caráter de control?. Escribe dos caracteres de control e indica para qué sirven.
¿Qué dará por resultado el siguiente programa, y porqué?