Hoy hemos estado todo el día con ejercicios de javascript, yo además tuve que hacer el resumen que no hice ayer y ponerme al día con los ejercicios, pero ya he cogido más o menos el ritmo.
En diseño presenté las dos imágenes con el fondo modificado, pero he tenido que corregirlas y ahora están algo mejor
viernes, 14 de noviembre de 2014
jueves, 13 de noviembre de 2014
JAVASCRIPT II
Estructuras de control en Javascript
Para realizar cosas más complejas en nuestros scripts se utilizan las estructuras de control.
Con ellas podemos realizar tomas de decisiones y bucles.
5.1.- Toma de decisiones
Nos sirven para ejecutar unas instrucciones u otras dependiendo de lo que esté ocurriendo en ese instante en nuestros programas.
Por ejemplo, dependiendo si el usuario que entra en nuestra página es mayor de edad o no lo es, podemos permitirle o no ver los contenidos de nuestra página
En Javascript podemos tomar decisiones utilizando dos enunciados distintos.
• IF
• SWITCH
5.2.- Bucles
Los bucles se utilizan para realizar ciertas acciones repetidamente. Con un bucle podemos por ejemplo imprimir en una página los números del 1 al 100 sin necesidad de escribir cien veces el la instrucción imprimir.
En javascript existen varios tipos de bucles, cada uno está indicado para un tipo de iteración distinto y son los siguientes:
• FOR
• WHILE
• DO WHILE
5.3- Estructura IF en Javascript
IF es una estructura de control utilizada para tomar decisiones. Es un condicional que sirve para realizar unas u otras operaciones en función de una expresión. primero se evalúa una expresión, si da resultado positivo se realizan las acciones relacionadas con el caso positivo.
Todas las estructuras de control se escriben en minúsculas en Javascript. Aunque algunas veces para destacar el nombre de la estructura la podamos escribir en el texto del manual con letras mayúsculas, en el código de nuestros scripts siempre tenemos que ponerlo en
minúsculas. En caso contrario recibiremos un mensaje de error
La sintaxis de la estructura IF es la siguiente.
if (expresión) {
//acciones a realizar en caso positivo
//...
}
Opcionalmente se pueden indicar acciones a realizar en caso de que la evaluación de la sentencia devuelva resultados negativos.
if (expresión) {
//acciones a realizar en caso positivo
//...
} else {
//acciones a realizar en caso negativo
//...
}
Para empezar vemos como con unas llaves engloban las acciones que queremos realizar en caso de que se cumplan o no las expresiones. Estas llaves han de colocarse siempre, excepto en el caso de que sólo haya una instrucción como acciones a realizar, que son opcionales.
Aunque las llaves para englobar las sentencias a ejecutar tanto en el caso positivo como negativo sean opcionales cuando queremos,la recomendación es colocarlas siempre, porque obtendremos así un código fuente más claro.
Veamos el código siguiente:
if (llueve)
alert("Cae agua");
Sería exactamente igual que este código:
if (llueve){
alert("Cae agua");
}
O incluso, igual a este otro:
if (llueve) alert("Cae agua");
Perfectamente podríamos colocar toda la instrucción IF en la misma línea de código, pero eso no ayudará a que las cosas estén claras.
Veamos algún ejemplo de condicionales IF.
if (dia == "lunes")
document.write ("Que tengas un feliz comienzo de semana")
Si es lunes nos deseará una feliz semana. No hará nada en caso contrario.
if (credito >= precio) {
document.write("has comprado el artículo " + nuevoArtículo) //enseño compra
carrito += nuevoArticulo //introduzco el artículo en el carrito de la compra
credito -= precio //disminuyo el crédito según el precio del artículo
} else {
document.write("se te ha acabado el crédito") //informo que te falta dinero
window.location = "carritodelacompra.html" //voy a la página del carrito
}
Este ejemplo Lo que hago es comprobar si tengo crédito para realizar una supuesta compra. Para ello miro si el crédito es mayor o igual que el precio del artículo, si es así informo de la compra, introduzco el artículo en el carrito y resto el precio al crédito acumulado. Si el precio del artículo es superior al dinero disponible informo de la situación y mando al navegador a la página donde se muestra su carrito de la compra.
La expresión a evaluar se coloca siempre entre paréntesis y está compuesta por variables que se combinan entre si mediante operadores condicionales. Los operadores condicionales relacionaban dos variables y devolvían siempre un resultado boleano.
Para hacer estructuras condicionales más complejas podemos anidar sentencias IF, es decir, colocar estructuras IF dentro de otras estructuras IF. Con un solo IF podemos evaluar y realizar una acción u otra según dos posibilidades, pero si tenemos más posibilidades que evaluar debemos anidar IFs para crear el flujo de código necesario para decidir correctamente.
Ejemplo:
var numero1=23
var numero2=63
if (numero1 == numero2){
document.write("Los dos números son iguales")
}else{
if (numero1 > numero2) {
document.write("El primer número es mayor que el segundo")
}else{
document.write("El primer número es menor que el segundo")
}
}
El flujo del programa es como comentábamos antes, primero se evalúa si los dos números son iguales. En caso positivo se muestra un mensaje informando de ello. En caso contrario ya sabemos que son distintos, pero aun debemos averiguar cuál de los dos es mayor. Para eso se hace otra comparación para saber si el primero es mayor que el segundo. Si esta
comparación da resultados positivos mostramos un mensaje diciendo que el primero es mayor que el segundo, en caso contrario indicaremos que el primero es menor que el segundo.
Un ejemplo de uso del operador IF se puede ver a continuación.
Variable = (condición) ? valor1 : valor2
Este ejemplo no sólo realiza una comparación de valores, además asigna un valor a una variable. Lo que hace es evaluar la condición (colocada entre paréntesis) y si es positiva asigna el valor1 a la variable y en caso contrario le asigna el valor2.
Veamos un ejemplo:
momento = (hora_actual < 12) ? "Antes del mediodía" : "Después del mediodía"
Este ejemplo mira si la hora actual es menor que 12. Si es así, es que ahora es antes del mediodía, así que asigna "Antes del mediodía" a la variable momento. Si la hora es mayor o igual a 12 es que ya es después de mediodía, con lo que se asigna el texto "Después del mediodía" a la variable momento.
5.4.- Estructura SWITCH de Javascript
Esta expresión se utiliza cuando tenemos múltiples posibilidades como resultado de la evaluación de una sentencia.
switch (expresión) {
case valor1:
Sentencias a ejecutar si la expresión tiene como valor a valor1
break
case valor2:
Sentencias a ejecutar si la expresión tiene como valor a valor2
break
case valor3:
Sentencias a ejecutar si la expresión tiene como valor a valor3
break
default:
Sentencias a ejecutar si el valor no es ninguno de los anteriores
}
La expresión se evalúa, si vale valor1 se ejecutan las sentencias relacionadas con ese caso. Si la expresión vale valor2 se ejecutan las instrucciones relacionadas con ese valor y así sucesivamente, por tantas opciones como deseemos. Finalmente, para todos los casos no contemplados anteriormente se ejecuta el caso por defecto.
La palabra break es opcional, pero si no la ponemos a partir de que se encuentre coincidencia con un valor se ejecutarán todas las sentencias relacionadas con este y todas las siguientes.
También es opcional la opción default u opción por defecto.
Veamos un ejemplo de uso de esta estructura. Supongamos que queremos indicar que día de la semana es. Si el día es 1 (lunes) sacar un mensaje indicándolo, si el día es 2 (martes) debemos sacar un mensaje distinto y así sucesivamente para cada día de la semana, menos en el 6 (sábado) y 7 (domingo) que queremos mostrar el mensaje "es fin de semana". Para días mayores que 7 indicaremos que ese día no existe.
switch (dia_de_la_semana) {
case 1:
document.write("Es Lunes")
break
case 2:
document.write("Es Martes")
break
case 3:
document.write("Es Miércoles")
break
case 4:
document.write("Es Jueves")
break
case 5:
document.write("Es viernes")
break
case 6:
case 7:
document.write("Es fin de semana")
break
default:
document.write("Ese día no existe")
}
5.5.- Bucle FOR
El bucle FOR se utiliza para repetir mas instrucciones un determinado número de veces. De entre todos los bucles, el FOR se suele utilizar cuando sabemos seguro el número de veces que queremos que se ejecute.
for (inicialización; condición; actualización) {
//sentencias a ejecutar en cada iteración
}
El bucle FOR tiene tres partes incluidas entre los paréntesis, que nos sirven para definir cómo deseamos que se realicen las repeticiones. La primera parte es la inicialización, que se ejecuta solamente al comenzar la primera iteración del bucle. En esta parte se suele colocar la variable que utilizaremos para llevar la cuenta de las veces que se ejecuta el bucle.
La segunda parte es la condición, que se evaluará cada vez que comience una iteración del bucle. Contiene una expresión para decidir cuándo se ha de detener el bucle, o mejor dicho, la condición que se debe cumplir para que continúe la ejecución del bucle.
Por último tenemos la actualización, que sirve para indicar los cambios que queramos ejecutar en las variables cada vez que termina la iteración del bucle, antes de comprobar si se debe seguir ejecutando. Después del for se colocan las sentencias que queremos que se ejecuten en cada iteración, acotadas entre llaves.
Ejemplo:
var i
for (i=0;i<=10;i++) {
document.write(i)
document.write("<br>")
}
En este caso se inicializa la variable i a 0. Como condición para realizar una iteración, se tiene que cumplir que la variable i sea menor o igual que 10. Como actualización se incrementará en 1 la variable i.
Otro detalle, no utilizamos las llaves englobando las instrucciones del bucle FOR porque sólo tiene una sentencia y en este caso no es obligado, tal como pasaba con las instrucciones del IF.
Si queremos contar descendentemente del 343 al 10 utilizaríamos este bucle.
for (i=343;i>=10;i--)
document.write(i)
5.6.- Bucle WHILE
Estos bucles se utilizan cuando queremos repetir la ejecución de unas sentencias un número indefinido de veces, siempre que se cumpla una condición.
while (condición){
//sentencias a ejecutar
}
Ejemplo:
var color = ""
while (color != "rojo"){
color = prompt("dame un color (escribe rojo para salir)","")
}
Lo que hace es pedir que el usuario introduzca un color y lo hace repetidas veces, mientras que el color introducido no sea rojo. Para ejecutar un bucle como este primero
tenemos que inicializar la variable que vamos utilizar en la condición de iteración del bucle. Con la variable inicializada podemos escribir el bucle, que comprobará para ejecutarse que la variable color sea distinto de "rojo". En cada iteración del
bucle se pide un nuevo color al usuario para actualizar la variable color y se termina la iteración, con lo que retornamos al principio del bucle, donde tenemos que volver a evaluar si lo que hay en la variable color es "rojo" y así sucesivamente mientras que no se haya introducido como color el texto "rojo".
5.7.- Bucle DO...WHILE
El bucle do...while es la última de las estructuras para implementar repeticiones de las que dispone en Javascript y es una variación del bucle while visto anteriormente. Se utiliza generalmente cuando no sabemos cuantas veces se habrá de ejecutar el bucle, igual que el bucle WHILE, con la diferencia de que sabemos seguro que el bucle por lo menos se ejecutará una vez.
La sintaxis es la siguiente.
do {
//sentencias del bucle
} while (condición
El bucle se ejecuta siempre una vez y al final se evalúa la condición para decir si se ejecuta otra vez el bucle o se termina su ejecución.
Ejemplo:
do {
color = prompt("dame un color (escribe rojo para salir)","")
} while (color != "rojo")
Este ejemplo funciona exactamente igual que el anterior, excepto que no tuvimos que inicializar la variable color antes de introducirnos en el bucle. Pide un color mientras que el color introducido es distinto que "rojo".
5.8.- Break
Se detiene un bucle utilizando la palabra break. Detener un bucle significa salirse de él y dejarlo todo como está para continuar con el flujo del programa inmediatamente después del bucle.
for (i=0;i<10;i++){
document.write (i)
escribe = prompt("dime si continuo preguntando...", "si")
if (escribe == "no")
break
}
Este ejemplo escribe los números del 0 al 9 y en cada iteración del bucle pregunta al usuario si desea continuar. Si el usuario dice cualquier cosa continua, excepto cuando dice "no", situación en la cual se sale del bucle y deja la cuenta por donde se había quedado.
5.9.- Continue
Sirve para volver al principio del bucle en cualquier momento, sin ejecutar las líneas que haya por debajo de la palabra continue.
var i=0
while (i<7){
incrementar = prompt("La cuenta está en " + i + ", dime si incremento", "si")
if (incrementar == "no")
continue
i++
}
Este ejemplo, en condiciones normales contaría hasta desde i=0 hasta i=7, pero cada vez que se ejecuta el bucle pregunta al usuario si desea incrementar la variable o no. Si introduce "no" se ejecuta la sentencia continue, con lo que se vuelve al principio del bucle sin llegar a incrementar en 1 la variable i, ya que se ignorarían las sentencia que hayan por debajo del continue.
5.10.- Bucles anidados en Javascript
Anidar un bucle consiste en meter ese bucle dentro de otro. La anidación de bucles es necesaria para hacer determinados procesamientos un poco más complejos que los que hemos visto en los ejemplos anteriores.
Ejemplo:
for (i=0;i<10;i++){
for (j=0;j<10;j++) {
document.write(i + "-" + j)
}
}
La ejecución funcionará de la siguiente manera. Para empezar se inicializa el primer bucle, con lo que la variable i valdrá 0 y a continuación se inicializa el segundo bucle, con lo que la variable j valdrá también 0. En cada iteración se imprime el valor de la variable i, un guión ("-") y el valor de la variable j, como las dos variables valen 0, se imprimirá el texto "0-0" en la página web.
Funciones
6.1. ¿Qué son?
Una función es una serie de instrucciones que englobamos dentro de un mismo proceso. Este proceso se podrá luego ejecutar desde cualquier otro sitio con solo llamarlo.
6.2.¿Para qué se utilizan?
Las funciones se utilizan constantemente, no sólo las que escribes tú, sino también las que ya están definidas en el sistema, pues todos los lenguajes de programación suelen tener un montón de funciones para realizar procesos habituales, como por ejemplo obtener la hora, imprimir un mensaje en la pantalla o convertir variables de un tipo a otro.
Una función se debe definir con una sintaxis especial que vamos a conocer a continuación.
function nombrefuncion ()
{
instrucciones de la función
...
}
Primero se escribe la palabra function, reservada para este uso. Seguidamente se escribe el nombre de la función, que como los nombres de variables puede tener números, letras y algún carácter adicional como en guión bajo. A continuación se colocan entre llaves las distintas instrucciones de la función. Las llaves en el caso de las funciones no son opcionales, además es útil colocarlas siempre como se ve en el ejemplo, para que se reconozca fácilmente la estructura de instrucciones que engloba la función.
Veamos un ejemplo de función para escribir en la página un mensaje de bienvenida dentro de etiquetas <H1> para que quede más resaltado.
function escribirBienvenida()
{
document.write("<H1>Hola a todos</H1>")
}
6.3¿Cómo invocarla?
Para ejecutar una función la tenemos que invocar en cualquier parte de la página. Con eso conseguiremos que se ejecuten todas las instrucciones que tiene la función entre las dos llaves.
Para ejecutar la función utilizamos su nombre seguido de los paréntesis. Por ejemplo, así llamaríamos a la función escribirBienvenida() que acabamos de crear.
escribirBienvenida()
6.4.¿Dónde colocarla?
En principio, podemos colocar las funciones en cualquier parte de la página, siempre entre etiquetas <SCRIPT>, claro está. No obstante existe una limitación a la hora de colocarla con relación a los lugares desde donde se la llame. Te adelantamos que lo más fácil es colocar la función antes de cualquier llamada a la misma y así seguro que nunca nos equivocaremos.
Existen dos opciones posibles para colocar el código de una función:
a) Colocar la función en el mismo bloque de script:
En concreto, la función se puede definir en el bloque <SCRIPT> donde esté la llamada a la función, aunque es indiferente si la llamada se encuentra antes o después del código de la función, dentro del mismo bloque <SCRIPT>.
<SCRIPT>
miFuncion()
function miFuncion(){
//hago algo...
document.write("Esto va bien")
}
</SCRIPT>
Este ejemplo funciona correctamente porque la función está declarada en el mismo bloque que su llamada.
b) Colocar la función en otro bloque de script:
También es válido que la función se encuentre en un bloque <SCRIPT> anterior al bloque donde está la llamada.
<HTML>
<HEAD>
<TITLE>MI PÁGINA</TITLE>
<SCRIPT>
function miFuncion(){
//hago algo...
document.write("Esto va bien")
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
miFuncion()
</SCRIPT>
</BODY>
</HTML>
6.5. Parámetros
Los parámetros se usan para mandar valores a las funciones. Una función trabajará con los parámetros para realizar las acciones. Por decirlo de otra manera, los parámetros son los valores de entrada que recibe una función.
Por poner un ejemplo sencillo de entender, una función que realizase una suma de dos números tendría como parámetros a esos dos números. Los dos números son la entrada, así como la salida sería el resultado de la suma.
Veamos un ejemplo anterior en el que creábamos una función para mostrar un mensaje de bienvenida en la página web, pero al que ahora le vamos a pasar un parámetro que contendrá el nombre de la persona a la que hay que saludar.
function escribirBienvenida(nombre){
document.write("<H1>Hola " + nombre + "</H1>")
}
Como podemos ver en el ejemplo, para definir en la función un parámetro tenemos que poner el nombre de la variable que va a almacenar el dato que le pasemos. Esa variable, que en este caso se llama nombre, tendrá como valor el dato que le pasemos a la función cuando la llamemos. Además, la variable donde recibimos el parámetro tendrá vida durante la ejecución de la función y dejará de existir cuando la función termine su ejecución.
Para llamar a una función que tiene parámetros se coloca entre paréntesis el valor del parámetro. Para llamar a la función del ejemplo habría que escribir:
escribirBienvenida("Alberto García")
Al llamar a la función así, el parámetro nombre toma como valor "Alberto García" y al escribir el saludo por pantalla escribirá "Hola Alberto García" entre etiquetas <H1>.
Una función puede recibir tantos parámetros como queramos y para expresarlo se colocan los nombres de los parámetros separados por comas, dentro de los paréntesis. Veamos rápidamente la sintaxis para que la función de antes, pero hecha para que reciba dos parámetros, el primero el nombre al que saludar y el segundo el color del texto.
function escribirBienvenida(nombre,colorTexto){
document.write("<FONT color='" + colorTexto + "'>")
document.write("<H1>Hola " + nombre + "</H1>")
document.write("</FONT>")
}
Al hilo del uso de parámetros en nuestros programas Javascript, tenemos que saber que los parámetros de las funciones se pasan por valor. Esto quiere decir que estamos pasando valores y no variables. En la práctica, aunque modifiquemos un parámetro en una función, la variable original que habíamos pasado no cambiará su valor. Se puede ver fácilmente con un ejemplo.
function pasoPorValor(miParametro){
miParametro = 32
document.write("he cambiado el valor a 32")
}
var miVariable = 5
pasoPorValor(miVariable)
document.write ("el valor de la variable es: " + miVariable)
En el ejemplo tenemos una función que recibe un parámetro y que modifica el valor del parámetro asignándole el valor 32. También tenemos una variable, que inicializamos a 5 y posteriormente llamamos a la función pasándole esta variable como parámetro. Como dentro de la función modificamos el valor del parámetro podría pasar que la variable original cambiase de valor, pero como los parámetros no modifican el valor original de las variables, ésta no cambia de valor.
De este modo, una vez ejecutada la función, al imprimir en pantalla el valor de miVariable se imprimirá el número 5, que es el valor original de la variable, en lugar de 32 que era el valor con el que habíamos actualizado el parámetro.
En Javascript sólo se pueden pasar las variables por valor.
Las funciones en Javascript también pueden retornar valores. De hecho, ésta es una de las utilidades más esenciales de las funciones, que debemos conocer, no sólo en Javascript sino en general en cualquier lenguaje de programación. De modo
que, al invocar una función, se podrá realizar acciones y ofrecer un valor como salida.
Por ejemplo, una función que calcula el cuadrado de un número tendrá como entrada a ese número y como salida tendrá el valor resultante de hallar el cuadrado de ese número. La entrada de datos en las funciones la vimos anteriormente en el artículo sobre parámetros de las funciones. Ahora tenemos que aprender acerca de la salida.
Veamos un ejemplo de función que calcula la media de dos números. La función recibirá los dos números y retornará el
valor de la media.
function media(valor1,valor2){
var resultado
resultado = (valor1 + valor2) / 2
return resultado
}
Para especificar el valor que retornará la función se utiliza la palabra return seguida de el valor que se desea devolver. En este caso se devuelve el contenido de la variable resultado, que contiene la media calculada de los dos números.
Quizás nos preguntemos ahora cómo recibir un dato que devuelve una función. Realmente en el código fuente de nuestros programas podemos invocar a las funciones en el lugar que deseemos. Cuando una función devuelve un valor simplemente se sustituye la llamada a la función por ese valor que devuelve. Así pues, para almacenar un valor de devolución de una función, tenemos que asignar la llamada a esa función como contenido en una variable, y eso lo haríamos con el operador de
asignación =.
Para ilustrar esto se puede ver este ejemplo, que llamará a la función media() y guardará el resultado de la media en una variable para luego imprimirla en la página.
var miMedia
miMedia = media(12,8)
document.write (miMedia)
En realidad en Javascript las funciones sólo pueden devolver un valor, por lo que en principio no podemos hacer funciones que devuelvan dos datos distintos.
Ahora bien, aunque sólo podamos devolver un dato, en una misma función podemos colocar más de un return. Como decimos, sólo vamos a poder retornar una cosa, pero dependiendo de lo que haya sucedido en la función podrá ser de un tipo u otro, con unos datos u otros.
En esta función podemos ver un ejemplo de utilización de múltiples return. Se trata de una función que devuelve un 0 si el parámetro recibido era par y el valor del parámetro si este era impar.
function multipleReturn(numero){
var resto = numero % 2
if (resto == 0)
return 0
else
return numero
}
Para averiguar si un número es par hallamos el resto de la división al dividirlo entre 2. Si el resto es cero es que era par y devolvemos un 0, en caso contrario -el número es impar- devolvemos el parámetro recibido.
Dentro de las funciones podemos declarar variables. Sobre este asunto debemos de saber que todas las variables declaradas en una función son locales a esa función, es decir, sólo tendrán validez durante la ejecución de la función.
Podría darse el caso de que podemos declarar variables en funciones que tengan el mismo nombre que una variable global a la página. Entonces, dentro de la función, la variable que tendrá validez es la variable local y fuera de la función tendrá validez la variable global a la página.
En cambio, si no declaramos las variables en las funciones se entenderá por javascript que estamos haciendo referencia a una variable global a la página, de modo que si no está creada la variable la crea, pero siempre global a la página en lugar de local a la función.
Veamos el siguiente código.
function variables_glogales_y_locales(){
var variableLocal = 23
variableGlobal = "qwerty"
}
En este caso variableLocal es una variable que se ha declarado en la función, por lo que será local a la función y sólo tendrá validez durante su ejecución. Por otra parte variableGlobal no se ha llegado a declarar (porque antes de usarla no se ha
utilizado la palabra var para declararla). En este caso la variable variableGlobal es global a toda la página y seguirá existiendo aunque la función finalice su ejecución. Además, si antes de llamar a la función existiese la variable variableGlobal, como resultado de la ejecución de esta función, se machacaría un hipotético valor de esa variable y se sustituiría por "qwerty".
Epílogo
que Javascript es un lenguaje muy dinámico y que ha sido implementado poco a poco, a
medida que salían nuevos navegadores. ellos. Javascript ha cambiado por lo menos tanto como los navegadores y eso representa un problema para los programadores, porque tienen que estar al tanto de las distintas versiones y la manera de funcionar que tienen.
Consejos para hacer un código sencillo y fácil de mantener
Utiliza comentarios habitualmente para que lo que estás haciendo en los scripts pueda ser recordado por ti y cualquier persona que tenga que leerlos más adelante.
• Ten cuidado con el ámbito de las variables, recuerda que existen variables globales y locales, que incluso pueden tener los mismos nombres y conoce en cada momento la variable que tiene validez.
• Escribe un código con suficiente claridad, que se consigue con saltos de línea después de cada instrucción, un sangrado adecuado (poner márgenes a cada línea para indicar en qué bloque están incluidas), utilizar las llaves {} siempre, aunque no sean obligatorias y en general mantener siempre el mismo estilo a la hora de programar.
• Aplica un poco de consistencia al manejo de variables. Declara las variables con var. No cambies el tipo del dato que contiene (si era numérica no pongas luego texto, por ejemplo). Dales nombres comprensibles para saber en todo momento qué contienen. Incluso a la hora de darles nombre puedes aplicar una norma, que se trata de que indiquen en sus nombres el tipo de dato que contienen. Por ejemplo, las variables de texto pueden empezar por una s (de String), las variables numéricas pueden empezar por una n o las boleanas por una b.
• Prueba tus scripts cada poco a medida que los vas programando. Puedes escribir un trozo de código y probarlo antes de continuar para ver que todo funciona correctamente. Es más fácil encontrar los errores de código en bloques pequeños que en bloques grandes.
Utilizar = en expresiones condicionales en lugar de == es un error difícil de detectar cuando se comete, si utilizamos un solo igual lo que estamos haciendo es una asignación y no una comparación para ver si dos valores son iguales.
No conocerse la precedencia de operadores y no utilizar paréntesis para agrupar las operaciones que se desea realizar. En este caso nuestras operaciones pueden dar resultados no deseados.
Usar comillas dobles y simples erróneamente. Recuerda que se pueden utilizar comillas dobles o simples indistintamente, con la norma siguiente: dentro de comillas dobles se deben utilizar comillas simples y viceversa.
Olvidarse de cerrar una llave o cerrar una llave de más.
Colocar varias sentencias en la misma línea sin separarlas de punto y coma. Esto suele ocurrir en los manejadores de eventos, como onclick, que veremos más adelante.
Utilizar una variable antes de inicializarla o no declarar las variables con var antes de utilizarlas también son errores comunes.
Recuerda que si no la declaras puedes estar haciendo referencia a una variable global en lugar de una local.
Contar las posiciones de los arrays a partir de 1. Recuerda que los arrays empiezan por la posición 0.
Errores comunes
Errores de sintaxis ocurren por escribir de manera errónea las líneas de código, equivocarse a la hora de escribir el nombre de una estructura, utilizar incorrectamente las llaves o los paréntesis o cualquier cosa similar. Estos errores los indica javascript a medida que está cargando los scripts en memoria.
Cuando el analizador sintáctico de javascript detecta un error de estos se presenta el mensaje de error.
Errores de ejecución ocurren cuando se están ejecutando los scripts. Por ejemplo pueden ocurrir cuando llamamos a una función que no ha sido definida. javascript no indica estos errores hasta que no se realiza la llamada a la función.
También podemos cometer fallos en la programación que hagan que los scripts no funcionen tal y como deseábamos y que javascript no detecta como errores y por lo tanto no muestra ningún mensaje de error.
Por dejarlo claro vamos a ver un ejemplo en el que nuestro programa puede no funcionar como deseamos sin que javascript ofrezca ningún mensaje de error. En este ejemplo trataríamos de sumar dos cifras pero si una de las variables es de tipo texto podríamos encontrarnos con un error.
var numero1 = 23
var numero2 = "42"
var suma = numero1 + numero2
¿Cuánto vale la variable suma? Como muchos ya sabéis, la variable suma vale "2342" porque al intentar sumar una variable numérica y otra textual, se tratan a las dos como si fueran de tipo texto y por lo tanto, el operador + se aplica como una concatenación de cadenas de caracteres. Si no estamos al tanto de esta cuestión podríamos tener un error en nuestro script ya que el resultado no es el esperado y además el tipo de la variable suma no es numérico sino cadena de caracteres.
Depurar errores
Para todo tipo de errores, unos más fáciles de detectar que otros, debemos utilizar alguna técnica de depuración que nos ayude a encontrarlos.
Se trata de utilizar una función predefinida, la función alert() que recibe entre paréntesis un texto y lo muestra en una pequeña ventana que tiene un botón de aceptar.
Con la función alert() podemos mostrar en cualquier momento el contenido de las variables que estamos utilizando en nuestros scripts. Para ello ponemos entre paréntesis la variable que deseamos ver su contenido. Cuando se muestra el contenido de la variable el navegador espera a que apretemos el botón de aceptar y cuando lo hacemos continúa con las siguientes instrucciones del script.
var n_actual = 0
var suma = 0
while (suma<300){
n_actual ++
suma += suma + n_actual
alert("n_actual vale " + n_actual + " y suma vale " + suma)
}
Con la función alert() se muestra el contenido de las dos variables que utilizamos en el script. Algo similar a esto es lo que tendremos que hacer para mostrar el contenido de las variables y saber cómo están funcionando nuestros scripts, si todo va bien o hay algún error.
Conserva la sintaxis y estructura de tu código limpia y ordenada
Esto significa que guardes por ejemplo un límite de longitud de línea (80 caracteres) y que programes funciones razonablemente pequeñas. Un fallo es pensar que en una función larga lo podemos hacer todo.
Tener un tamaño razonable para tus funciones significa que las podrás reutilizar cuando amplies el código, tampoco seas extremista y hagas funciones de una o dos líneas esto puede llegar a ser más confuso que usar una única función.
Este es un ejemplo que muestra cual es la justa medida en cuanto al tamaño de las funciones y la división de las tareas:
function toolLinks(){
var tools = document.createElement('ul');
var item = document.createElement('li');
var itemlink = document.createElement('a');
itemlink.setAttribute('href', '#');
itemlink.appendChild(document.createTextNode('close'));
itemlink.onclick = function(){window.close();}
item.appendChild(itemlink);
tools.appendChild(item);
var item2 = document.createElement('li');
var itemlink2 = document.createElement('a');
itemlink2.setAttribute('href', '#');
itemlink2.appendChild(document.createTextNode('print'));
itemlink2.onclick = function(){window.print();}
item2.appendChild(itemlink2);
tools.appendChild(item2);
document.body.appendChild(tools);
}
Puedes optimizar esta función separando cada tarea con su propia función:
function toolLinks(){
var tools = document.createElement('ul');
var item = document.createElement('li');
var itemlink = createLink('#', 'close', closeWindow);
item.appendChild(itemlink);
tools.appendChild(item);
var item2 = document.createElement('li');
var itemlink2 = createLink('#', 'print', printWindow);
item2.appendChild(itemlink2);
tools.appendChild(item2);
document.body.appendChild(tools);
}
function printWindow(){
window.print();
}
function closeWindow() {
window.close();
}
function createLink(url,text,func){
var temp = document.createElement('a');
temp.setAttribute('href', url);
temp.appendChild(document.createTextNode(text));
temp.onclick = func;
return temp;
}
Utiliza inteligentemente los nombres de variables y funciones
Esta es un técnica esencial de programación, utiliza nombres de variables y funciones que sean totalmente descriptivos e incluso otra persona pueda llegar a plantearse que función realizan antes de ver el código.
Recuerda que es correcto el uso de guiones o mayúsculas para concatenar diferentes palabras, en este caso concreto de es más típico el uso de mayúsculas debido a la sintaxis del lenguaje, (ej. getElementsByTagName()).
Comenta el código
Gracias a los comentarios puedes librarte de más de un quebradero de cabeza, es mejor resolver el problema una única vez.
Los comentarios es mejor ponerlos antes de la línea de código a la que corresponden en vez de en ella misma y dar cierto espacio para que no estén pegados al propio código.
Diferencia las variables dependiendo de su importancia
Este paso es simple: Coloca aquellas variables que son usadas durante todo el script en la cabecera del código, de esta maneras siempre sabrás donde encontrar estas variables que son las que determinan el resultado de nuestro código.
function toolLinks(){
var tools, closeWinItem, closeWinLink, printWinItem, printWinLink;
// variables temporales
var printLinkLabel = ?print?;
var closeLinkLabel = ?close?;#
tools = document.createElement(?ul?);
closeWinItem = document.createElement(?li?);
closeWinLink = createLink(?#', closeLinkLabel, closeWindow);
closeWinItem.appendChild(closeWinLink);
tools.appendChild(closeWinItem);
printWinItem = document.createElement(?li?);
printWinLink = createLink(?#', printLinkLabel, printWindow);
printWinItem.appendChild(printWinLink);
tools.appendChild(printWinItem);
document.body.appendChild(tools);
}
Separa el texto del código
Puedes separar el texto del código, utilizando un documento llamado texto.js en formato JSON.
Documenta el código
Escribe una buena documentacion de tu script / librería o efecto. Una buena documentación da calidad al código.
DIA CIENTO SIETE 13/11/2014
Ho yo no fui a clase porque estuve enferma,pero por lo que sé, tendré que ponerme al día con el resumen del punto cinco y con dos ejercicios nuevos
miércoles, 12 de noviembre de 2014
DIA CIENTO SEIS 12/11/2014
Hoy hemos recibido las notas del examen, en el test saqué un 6,5 y en el código un 8, cabe destacar que parece que los exámenes tipo test no son lo mío.
En diseño seguimos con las imágenes, que por mi parte ya están finalizadas y subidas al blog.
Tuvimos,a demás asamblea en la cual nos presentamos al compañero nuevo y dialogamos sobre las distintas cuestiones que se presentaron en la junta de evaluación y cómo solventarlas.
Por lo demás, ya comenzamos con el siguiente temario de javascript que son las estructuras de control.
En diseño seguimos con las imágenes, que por mi parte ya están finalizadas y subidas al blog.
Tuvimos,a demás asamblea en la cual nos presentamos al compañero nuevo y dialogamos sobre las distintas cuestiones que se presentaron en la junta de evaluación y cómo solventarlas.
Por lo demás, ya comenzamos con el siguiente temario de javascript que son las estructuras de control.
martes, 11 de noviembre de 2014
ELIMINAR FONDOS PHOTOSHOP
Este es el resultado del ejercicio de diseño basado en eliminar los fondos de las imágenes y sustituirlos por otros.
Antes
Después
DIA CIENTO CINCO 11/11/2014
Hoy estuvimos toda la mañana de prueba de validación , la cuál ya está subida al drive, que ha sido algo desesperante esta vez. En diseño seguimos con los ejercicios que teníamos y, como noticia nueva, tenemos un nuevo compañero
SEGUNDA PRUEBA DE VALIDACION UF1305
Examen
<P>Fecha: Módulo: MF0951_2 Unidad Formativa: UF1305.1
Nombre: fecha de inicio: Horas empleadas:
</P>
<BODY>
<H2><U>INSTRUCCIONES:</U>Esta prueba de validación se compone de una batería de preguntas tipo test y unos ejercicios de código en Java<b>ESTA PRUEBA ES PERSONAL </b></H2> El objetivo de esta prueba es validar todos los conocimientos de la Unidad de competencia y demostrar que se ha asimilado correctamente.
El resultado de la prueba será la media de las dos partes, no pudiendo hacer media si una de las partes esta suspensa.
La batería de preguntas se encuentran más abajo. Pregunta correcta 0,5 puntos, incorrecta o vacia -0,2 puntos.
Requisito para esta prueba entregar el código de los ejercicios comentado impreso para poder empezar.
Respuestas:
1.-
|
2.-
|
3.-
|
4.-
|
5.-
|
6.-
|
7.-
|
8.-
|
9.-
|
10.-
|
11.-
|
12.-
|
13.-
|
14.-
|
15.-
|
16.-
|
17.-
|
18.-
|
19.-
|
20.-
|
Preguntas del test:
1.- ¿Qué es JavaScript?
a)Javascript es un lenguaje de programación utilizado para crear pequeños programitas encargados de realizar acciones dentro del ámbito de una página web.
b)Javascript es un método de programación para dar apariencia visual a un HTML.
c)Javascript es un sistema a través del cual solo se pueden abrir ventanas emergentes.
d)Javascript es una forma de programación sólo para resolver problemas matemáticos.
2.- ¿Que se debe hacer en programación Javascript para los navegadores que no lo leen?
a)Introducir una etiqueta<p></p> con el texto que indique que el navegador está obsoleto.
b)Introducir una serie de enlaces a los navegadores que están preparados para leer el código dentro de la etiqueta <NOSCRIPT>
c)No hacer nada, el navegador sabe el solo que debe hacer.
d)Poner una foto que diga que está obsoleto.
3.- ¿Cual es es codigo para abrir una ventana en Javascript?
a)<script>
window.open("http://www.google.com","","width=550,height=420,menubar=no")
</script>
b)<script>
window.alert("Bienvenido a mi sitio web. Gracias...")
</script>
C)<input type=button value=Atrás onclick="history.go(-1)">
menubar=no")
4.- ¿Cuál es la línea correcta para introducir un acceso a un archivo externo Javascript en el HTML?
a)<link href="Javascript.css" rel="stylesheet" type="text/css">
b)<script type="text/javascript" src="1305.2.js"></script>
c)<meta name="keywords" content="Java Script">
d)<meta http-equiv="content-type" content="text/html; ">
5.- De qué tipo es esta variable: nombre=prompt('Introduzca Nombre :','')
a)Numérica.
b)Texto/Cadena
c)Float
d)Booleana
6.- ¿Qué significa: parseInt(Variable)?
a)Que la línea se convierte en variable del tipo cadena.
b)Que la variable es booleana.
c)Es un comando que no sirve para nada.
d)Pasa la variable a tipo numérica sin decimales.
7.- ¿Cómo escribimos el nombre de una variable?
a)Tiene que comenzar con un carácter alfabético.
b)Con espacios.
c)Con mayusculas y minusculas.
d)Ninguna es correcta.
8.- ¿Que son operadores aritméticos?
a)Sirven para asignar valores a las variables.
b)Sirven para realizar operaciones lógicas.
c)Sirven para la realización de operaciones matemáticas simples.
d)Todas son correctas.
9.- ¿Qué significa esta expresión !=?
a)Comprueba si dos datos no son iguales.
b)Mayor igual.
c)Comprueba si dos números son distintos.
d)Menor igual.
10.- ¿Como se escribe una avance de página en caracteres especiales?
a) \r.
b) \b.
c) \f.
d)Ninguna es correcta.
11.- Variables globales: Que pasa si declaramos dos variables y las inicializamos con el mismo nombre con VAR en una función externa y en el HTML:
a) Nada
b) Que el dato en el HTML permanece sobre los dos.
c) Que el dato del fichero externo permanece sobre los dos.
d) Que durante la función externa utiliza su dato y en el html el suyo.
12.- Contadores: Cómo incrementamos una variable numérica en uno de la manera más eficiente posible.
a)Variable=Variable+1
b)Variable+=1
c)Variable++
d)Variable
13.- Resultado de sumar 2 cadenas con el siguiente contenido Num1=’hola’ y Num2=’soy yo’. Num2+Num1
a)hola + soy yo
b)holasoyyo
c)soy yohola
d)soy yo hola
14.- Cual es el resultado de esta expresión condicional (12 == 12 || 12 != 12)
a) True
b) False
c)Mal expresado
d)Ninguna de las anteriores
15.- Cual es el resultado de esta operación 25 * 5 + 8 - 10 / 2 % 3
a)72
b)156
c)131
d)108
16.- Línea de botón correcta con ejecución de código onlick
a) <INPUT TYPE="button" VALUE="\n" onClick="window.alert(Toma Intro \n Salto de Línea')">
b) <INPUT TPE="button" VALUE="\n" onClick="window.alert('Toma Intro \n Salto de Línea')">
c) <INPUT TYPE="button" VALUE="\n" onClick="window.alert'Toma Intro \n Salto de Línea')>
d)<INPUT TYPE="button" VALUE="\n" onClick="window.alert('Toma Intro \n Salto de Línea')">
17.- Una Variable global se lee...
a)Durante la ejecución de la página en el navegador
b)Desde cualquier parte del código HTML
c)Desde el archivo externo .js
d)Todas son correctas
18.- ¿Que hay dentro de texto3 al cargar el HTML?
<script>function mostrar(texto2,texto3,texto) {}</script>
<INPUT TYPE="button" VALUE="\n" onClick="mostrar(“1”,”2”,”3”)">
a)1
b)2
c)3
d)nada
19.- Cual es la línea correcta de llamada a esta función declarada.
function prueba(texto,numero,boolean,objeto){}
a)<script>prueba()</script>
b)<script>prueba(1,2,3,4)</script>
c)<script>prueba(“1”,”2”,”3”,”4”)</script>
d)<INPUT TYPE="button" VALUE="\n" onClick="prueba(“abc”,”33”,”true”)">
20.- Orden de cierre de la ventana actual
a)self.close()
b)window.close()
c)<INPUT VALUE="\n" onClick="self.close()">
d)Todas las anteriores
Ejercicio de código: En el archivo html y css adjuntado desarrollar lo siguiente:
- En el PRIMER div 2 botones; el primero que haga referencia a una función en el mismo div, que pida 2 variables globales de tipo numérico con decimales. Y otro botón llamando a una función en archivo externo que utilice las variables definidas anteriormente para hacer suma, resta, multiplicación, división y += para después mostrar las operaciones de manera coherente.
- En el SEGUNDO Div 2 botones; el primero que haga referencia a una función en el mismo div, que pida 2 variables globales de tipo cadena/texto. Y otro botón llamando a una función en archivo externo que utilice las variables definidas anteriormente para hacer suma, resta, += y una comparación que sea recogida en una variable de true/false para después mostrar las operaciones de manera coherente.
- Apartado de <NOSCRIPT> colocado y completado.
- Código comentado en HTML y en el .js
- Después de los botones mostrar el texto de las funciones en el espacio restante de los Div.
Visualización
HTML
<!DOCTYPE html><html lang="es"> <head> <title>Prueba 1305.2</title> <meta content="text/html; charset=iso-8859-1"> <script type="text/javascript" src="prueba.js"></script><!--llamamos desde aquí al nuevo archivo externo, esta vez js para las funciones de javascript--> <NOSCRIPT>Este navegador no comprende los scripts que se están ejecutando, debe actualizar su versión de
navegador a una más reciente.
<br><br>
<a href=http://netscape.com>Netscape</a>.<br>
<a href=http://microsoft.com>Microsoft</a>.
</NOSCRIPT> <meta name="Description" content="descripción de la página"> <LINK REL="stylesheet" HREF="prueba.css" TYPE="text/css"> <SCRIPT language=javascript src=".js"></script> </head> <body> <h1>Prueba de validación 1305.2</h1> <img class="trebol" src="suerte.png" alt="Trebol" /> <h2>Nombre y apellidos</h2> <h3>Melani Abascal</h3> <h3>Números</h3> <div class="caja1"><br/> <script> var num1;//creamos las variables globales y las llamamos num1 y num2 para que el usuario pueda introducir los números que desee var num2; function nume()//creamos una función dentro del div para el primer botón { num1=prompt('Introduzca el primer número:','')//pedimos el primer número num2=prompt('Introduzca el segundo número:','')//pedimos el segundo número num1= parseFloat(num1)//números decimales num2= parseFloat(num2)//números decimales } </script> <input type="button" value="dime dos números decimales" onClick="nume()"><br><br> <input type="button" value="Vamos a operar, doctor" onClick="op()"> <!--llamamos a una función del archivo externo al hacer click--> <p><b>Éste es el código que hay dentro de los scripts del div:</b></p> <p>var num1;//creamos las variables globales y las llamamos num1 y num2 para que el usuario pueda introducir los números que desee</p> <p>var num2;</p> <p>function nume()//creamos una función dentro del div para el primer botón</p> <p>{</p> <p>num1=prompt('Introduzca el primer número:','')//pedimos el primer número</p> <p>num2=prompt('Introduzca el segundo número:','')//pedimos el segundo número</p> <p>num1= parseFloat(num1)//números decimales</p> <p> num2= parseFloat(num2)//números decimales</p> <p>} </p> <p><b>Éste es el código que hay en el archivo externo, al que llama el segundo botón de este div:</b></p> <p>function op()</p><p>{</p><p>rsuma= num1 + num2 //sumamos</p><p>rresta= num1 - num2 //restamos</p><p>rmultiplicacion= num1 * num2 //multiplicamos</p><p>rdivision= num1 / num2 //dividimos</p><p>resul= num1+= 3; //resul=num1+3, es decir, el primer número se incrementa en 3</p><p>window.alert('El resultado de la suma es: '+rsuma+'\nEl resultado de la resta es: '+rresta+' \nEl resultado de la multiplicación es: '+rmultiplicacion+' \nEl resultado de la división es: '+rdivision+'\nEl resultado del primer número incrementado en 3 es: '+resul)</p><p>//mostramos cada resultado en una cadena de letras con saltos de línea, además añadimos los resultados gracias a las variables, dado que sus nombres nos permiten colocar los resultados independientemente de cuales sean y cuantas veces cambien</p><p>}</p>
</div> <h3>Cadenas</h3> <div class="caja2"> <script> var tex1; var tex2; function texto(){ tex1=prompt('Introduzca un nombre:','')//esta vez las variables van a ser de texto, vamos a pedir texto para luego hacer una cadena con el segundo botón tex2=prompt('Introduzca un apellido:','') } </script> <input type="button" value="dime lo que tengo que escribir" onClick="texto()"><p></p> <input type="button" value="Vamos a ver qué sale" onClick="te()"><!--aquí, como en el anterior, llamamos al archivo externo--> <p><b>Éste es el código que hay dentro de los scripts del div:</b></p> <p>var tex1;</p> <p>var tex2;</p> <p>function texto(){</p> <p>tex1=prompt('Introduzca un nombre:','')//esta vez las variables van a ser de texto, vamos a pedir texto para luego hacer una cadena con el segundo botón</p> <p>tex2=prompt('Introduzca un apellido:','')</p> <p>}</p> <p><b>Éste es el código que hay en el archivo externo, al que llama el segundo botón de este div:</b></p><p>function te()</p><p>{</p><p>te1= tex1 + tex2//aquí se juntan las dos palabras</p><p>te2= tex1 - tex2//el texto en cadena no se puede restar</p><p>incre= tex2+= 3//y le ponemos un tres detrás</p><p>com= (tex1!= tex2)//vamos a ver si son diferentes</p><p>window.alert('El otro día me encontre a '+te1+' \njugando con una pelota en el/la '+te2+' \n Vamos a incrementar en tres '+incre+' \n ¿Las dos palabras son diferentes? '+com )</p><p>}</p> </div> </body></html>
JS
//Función en archivo externo del ejercicio 2
function te(){te1= tex1 + tex2//aquí se juntan las dos palabraste2= tex1 - tex2//el texto en cadena no se puede restarincre= tex2+= 3//y le ponemos un tres detráscom= (tex1!= tex2)//vamos a ver si son diferenteswindow.alert('El otro día me encontre a '+te1+' \njugando con una pelota en el/la '+te2+' \n Vamos a incrementar en tres '+incre+' \n ¿Las dos palabras son diferentes? '+com )}
CSS
body{ padding: 40px;}h1 { float: left; color: #9be663; margin-left: 425px; font-family: verdana; margin-top: 60px; font-size: 30pt;}.trebol { position: relative; left: 200px;}h2 { color:#fc9720; font-family: verdana; margin-top: 20px;}h3 { color:#9be663; font-family: verdana; margin-top: 80px; font-size: 18pt;}.caja1 { position: relative; margin-left: 340px; margin-top: 40px; width: 800px; height: 900px; border: solid #fc9720 5px; Border-radius: 5%;}.caja2 { position: relative; margin-left: 340px; margin-top: 40px; width: 800px; height: 700px; border: solid #fc9720 5px; Border-radius: 5%;}
Suscribirse a:
Entradas (Atom)