Hoy hemos dedicado el día de nuevo a ejercicios, leer, resumir, subir al blog etc, la diferencia fue que en diseño gráfico hemos visto los distintos trabajos presentados y nos ha comunicado las distintas notas que tenemos así como nuestra media. Por lo general mis notas son buenas, oscilan entre 8 y 9, exceptuando los exámenes tipo test.
De 2 a 3 tuvimos una asamblea para comunicar a nuestro compañero que nos representara en la junta de evaluación de mañana lo que queremos que transmita. Mañana sabremos quienes serán contratados y quienes no, por lo tanto es de esperar que el ambiente es poco a poco más tenso.
jueves, 6 de noviembre de 2014
miércoles, 5 de noviembre de 2014
DIA CIENTO UNO 5/11/2014
Hoy hemos dedicado el día a leer, resumir subir al blog y hacer los ejercicios de javascript. En diseño casi acabé con la fotografía, pasaré después a restaurar otra fotografía antigua. Mañana tenemos asamblea.
martes, 4 de noviembre de 2014
DIA CIEN 04/11/2014
Hoy hemos dedicado completamente el día a los ejercicios de java y a ver tutoriales de photoshop, a parte de las presentaciones de las imágenes antiguas restauradas de los compañeros.
lunes, 3 de noviembre de 2014
DIA NOVENTA Y NUEVE 03/11/2014
Hoy hemos estado toda la mañana con javascript, con teoría y ejercicios que iremos subiendo en la plantilla que hemos diseñado. En diseño tenemos un ejercicio de photoshop, consistente en enfocar y mejorar la luminosidad de dos fotografías.
PLANTILLA PARA EJERCICIOS DE JAVA
Explicación
Se trata de una página elaborada específicamente para contener ejercicios de javascript, divididos todos en dos partes. La primera, su visualización, y la segunda, su código.
En la parte superior está localizado el menú con los distintos ejercicios que, al hacer click en cada uno de ellos, te lleva a la parte de la página donde está el susodicho.
Durante todo el desplazamiento por la página, nos acompaña la imagen de un gato, al hacer click en él, volvemos al inicio o parte superior de la página. De momento sólo hay ocho ejercicios,pero irá ampliándose. Aquí lo presento ya con el primer ejercicio acabado.
Cógigo html
<!Doctype html><html lang="es"><head><TITLE>index</TITLE><LINK REL="stylesheet" HREF="index.css" TYPE="text/css"><meta name= Description content="ejercicios de java"><meta charset"utf-8" /></head><body> <a name="arriba"></a><div id="menu" ><h1 class="nombre">Melani</h1> <div id="contenedor"><div id="menu1"> <ul> <a href="#uno" title="Ir Arriba"><li>Ejercicio uno</li></a> <p></p> <a href="#dos" title="Ir Arriba"><li>Ejercicio dos</li></a> <p></p> <a href="#tres" title="Ir Arriba"><li>Ejercicio tres</li></a> <p></p> <a href="#cuatro" title="Ir Arriba"><li>Ejercicio cuatro</li></a> </ul> </div> <div id="menu2"> <ul> <a href="#cinco" title="Ir Arriba"><li>Ejercicio cinco</li></a> <p></p> <a href="#seis" title="Ir Arriba"><li>Ejercicio seis</li></a> <p></p> <a href="#siete" title="Ir Arriba"><li>Ejercicio siete</li></a> <p></p> <a href="#ocho" title="Ir Arriba"><li>Ejercicio ocho</li></a> </ul> </div> </div> <a name="uno"><h1>Ejercicio uno</h1></a> <h2>Visualización</h2> <div id="menu3"> <script> window.open("http://www.google.com","","width=550,height=420,menubar=no") </script> <script> window.alert("Bienvenido") </script> <script> document.write (new Date()) </script> <input type=button value=Atrás onclick="history.go(-1)"> </div> <h2 class="dos">Código</h2> <div id="menu4"> <p> Colocamos éstas líneas de código entre etiquetas "script", exceptuando la línea que tiene "input", eso sí, añadimos el corchete que le falta</p>window.open("http://www.google.com","","width=550,height=420,menubar=no") <p></p> window.alert("Bienvenido") <p></p> document.write (new Date()) <p></p> input type=button value=Atrás onclick="history.go(-1)"> </div> <a name="dos"><h1>Ejercicio dos</h1></a> <h2>Viasualización</h2> <div id="menu3"> </div> <h2 class="dos">Código</h2> <div id="menu4">
</div> <a name="tres"><h1>Ejercicio tres</h1></a> <h2>Visualización</h2> <div id="menu3"> </div> <h2 class="dos">Código</h2> <div id="menu4">
</div> <a name="cuatro"><h1>Ejercicio cuatro</h1></a> <h2>Visualización</h2> <div id="menu3"> </div> <h2 class="dos">Código</h2> <div id="menu4">
</div> <a name="cinco"><h1>Ejercicio cinco</h1></a> <h2>Visualización</h2> <div id="menu3"> </div> <h2 class="dos">Código</h2> <div id="menu4"> </div> <a name="seis"><h1>Ejercicio seis</h1></a> <h2>Viasualización</h2> <div id="menu3"> </div> <h2 class="dos">Código</h2> <div id="menu4">
</div> <a name="siete"><h1>Ejercicio siete</h1></a> <h2>Visualización</h2> <div id="menu3"> </div> <h2 class="dos">Código</h2> <div id="menu4">
</div> <a name="ocho"><h1>Ejercicio ocho</h1></a> <h2>Visualización</h2> <div id="menu3"> </div> <h2 class="dos">Código</h2> <div id="menu4">
</div> </div><a class="ir" href="#arriba"><img src="gato.gif"/></a></body></html>
Código css
body{ background-image: url( "gatito.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
#menu
{ background-color: #CEF6F5;
width: 1310px;
height:3900px;
margin-top: 5%;
margin-right: 10%;
margin-left: 7%;
border-radius: 15px;
opacity: 0.7;
padding: 20px;
}
h1{
text-align: center;
font-family: "Segoe Script";
position: relative;
top: 50px;
}
.nombre{
text-align: center;
font-family: "Segoe Script";
position: relative;
top:5px;
font: bold 90%;
}
#menu1{width: 500px;
height: 200px;
border: solid 1px black;
float: left;
margin-left: 25px;
}
#menu2{width: 500px;
height: 200px;
border: solid 1px black;
float: left;
margin-left: 250px;
}
li{font-size: 26px;
}
h2{position: relative;
top: 60px;
left: 200px;
}
#menu3{width: 500px;
height: 250px;
border: solid 1px black;
float: left;
margin-left: 25px;
position: relative;
top: 50px;
left: 3px;
}
.dos{ position: relative;
top: 5px;
left: 450px;
}
#menu4{width: 500px;
height: 250px;
border: solid 1px black;
float: left;
margin-left: 250px;
position: relative;
}
#contenedor{ width: 100%;
height: 300px;
position: relative;
}
.ir{position:fixed;
right:0;
top:0;
}
Visualización
TUTORIALES DE PHOTOSHOP
Enfoque y mejora de nitidez
- Enfocar fotos borrosas (Máscaras de enfoque)
- Mejorar nitidez (Canales Alfa)
Correción de luces y sombras
- Oscurecer, Contrastar y Aclarar partes de una fotografía.
- Corregir sombras e iluminaciones
- Separacion de frecuencias. Eliminar altas luces
Restaurar fotos antiguas
- Mejora de tono general
- Borrar fondos
- Recorte perfecto
- Mejora de contraste
- Mejora de la piel del rostro
- Colorear una foto
- Montaje de figura sobre fondo diferente
- Diseño fantasia
-Crear acciones
-enfoque progresivo
-Crear acciones
-enfoque progresivo
-Máscara de luminancia
-Colocar textos de forma integrada
Y un montón de video tutoriales de los diversos efectos de Photoshop...
http://www.fotografodigital.
ENFOQUE Y AJUSTES DE LUMINOSIDAD Y SOMBRAS EN PHOTOSHOP
Foto original
- Paso 1: Duplicar la capa
- paso 2: Sleccionar la capa superior y desaturar (imagen>ajustes>desaturar)
- Paso 3: Aplicamos un filtro de paso alto (Filtro>otro>paso alto)
- Paso 4: Graduar al 3% y dar al OK
- Paso 5: Creamos una máscara de capa en negro (capa>máscara de capa>ocultar todo)
- Paso 6: Seleccionamos un pincel suave, en color blanco y, con la opacidad al 50% vamos pintando las zonas que queremos que se vean más enfocadas en la máscara de capa negra.
- Paso 7: Acoplar capas (Capa>acoplar imagen)
Foto enfocada
- Paso 8: Duplicamos la capa tres veces
- Paso 9: Una de las copias la llamaremos oscurecer, puesta en modo multiplicar y le añadimos una máscara de capa negra
- Paso 10: Otra la llamamos contrastar, la ponemos en modo superponer y también creamos una máscara de capa negra
- Paso 11: La siguiente capa la llamamos aclarar, la ponemos en modo trama y creamos otra máscara de capa negra
- Paso 12: Con el pincel blanco y en opacidad 50%, trabajamos en las máscaras negras.
- Paso 13: Aplicar desenfoque gaussiano en las partes que deseemos más difuminadas o disimuladas, como en el fondo o las sombras y luces. (Filtro>desenfocar>desenfoque gaussiano)
- Paso 14: Acoplamos la imagen (Capa>acoplar imagen)
Foto final
Foto original
- Paso 1: Hacer cuatro copias de la imagen (capas>duplicar capa)
- Paso 2: En la primera capa, la ponemos en modo luminosidad, con opacidad del 100%, vamos a filtro, enfoque, máscara de enfoque y le damos Cantidad 100, radio 0,5 y umbral 0.
- Paso 3: En la segunda capa, también en modo luminosidad, con opacidad al 50%, vamos a filtro, enfoque, máscara de enfoque y le damos cantidad 500, radio 1 y umbral 0.
- Paso 4: En la tercera capa, también en modo luminosidad, con opacidad al 25%, vamos a filtro, enfoque, máscara de enfoque y le damos cantidad 500, radio 2 y umbral 0.
- Paso 5: En la cuarta capa, también en modo luminosidad, con opacidad al 15%, vamos a filtro, enfoque, máscara de enfoque y le damos cantidad 500, radio 4 y umbral 0.
- Paso 6: Seleccionamos las cuatro capas, las agrupamos con control+g y al nuevo grupo le ajustamos la opacidad donde veamos que quede mejor la foto (en cada imagen es diferente)
Foto enfocada
- Paso 7: Seleccionamos el grupo, le damos desenfoque de superficie con radio 10 y umbral 50
- Paso 8: Creamos una nueva capa transparente
- Paso 9: seleccionamos la capa anterior y hacemos click en imagen, calcular
- Paso 10: en origen 1 y 2 dejamos el nombre del archivo como está
- Paso 11: En origen uno le damos a capa y seleccionamos ahi el nombre de la primera capa que habíamos creado (y posteriormente desenfocado) y en canal dejamos el canal gris
- Paso 12: En el origen 2 seleccionamos la capa fondo y el canal gris
- Paso 13: En fusión, clicamos la opción restar
- Paso 14: En resultado le pedimos que genere un nuevo canal y clicamos ok.
- Paso 15: Nos situamos en los canales, seleccionando el canal nuevo y clicamos imagen, ajustes, y curvas
- Paso 16: Ajustamos su luminosidad algo como esto y clicamos OK
- Paso 17: Seleccionamos el canal que habíamos creado, vamos a las capas y seleccionamos el fondo.
- Paso 18: Clicamos en imagen y calcular. Esta vez en el origen uno seleccionamos la capa fondo con el canal gris. En el origen 2 seleccionamos la capa que creamos al principio y canal alfa1, es decir, el canal que habíamos creado.
- Paso 19: En vez de restar, le damos a añadir y el resultado se aplique sobre un nuevo canal
- Paso 20: Volvemos a canales, veremos que ahora está el canal alfa 2, teniéndolo seleccionado hacemos control+a, seleccionamos la imagen y hacemos control+c
- Paso 21: Vamos a capas y seleccionamos la transparente y hacemos click en edición y pegar.
- Paso 22: Eliminamos la capa que habíamos creado al principio,ya que no la necesitaremos
- Paso 23: A la capa que era transparente le cambiamos el modo a multiplicar y le bajamos la opacidad
Foto con mejor nitidez
- Paso 26: Acoplamos las capas
Foto con luminosidad y sombras ajustadas
- Paso 27: Arreglamos la luz molesta y la eliminamos con la tirita
- Paso 28: usando la herramienta de corrección, corregimos la rojez de los ojos (herramienta pincel de ojos rojos)
- Paso 29: Para solventar el problema de los brillos exagerados por el flash, seleccionamos con la herramienta lazo la zona que queramos quitar el brillo, le hacemos click a la máscara rápida, le aplicamos un filtro de desenfoque gaussiano a uno 2, algo o 3 como mucho. Quitamos la máscara y aplicamos otro desenfoque gaussiano esta vez un poco más alto. Deseleccionamos y repetimos hasta quitar todos los brillos no deseados.
Foto final
JAVASCRIPT
1.1.- Que es 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. Con Javascript podemos crear efectos especiales en las páginasy definir interactividades con el usuario. El navegador del cliente es el encargado de interpretar las instrucciones Javascript y ejecutarlas para realizar estos efectos e interactividades.
Por otro lado, nos permite ejecutar instrucciones como respuesta a las acciones del usuario, con lo que podemos crear páginas interactivas. A parte, permite la programación de pequeños scripts o de programas más grandes.
1.2.- Algo de historia sobre Javascript
En Internet se han creado multitud de servicios para realizar muchos tipos de comunicaciones, como correo, charlas, búsquedas de información, etc. Pero ninguno de estos servicios se ha desarrollado tanto como el Web.
El Web es un sistema Hipertexto, una cantidad de dimensiones gigantes de textos interrelacionados por medio de enlaces. Cada una de las unidades básicas donde podemos encontrar información son las páginas web. En un principio, para diseñar este sistema de páginas con enlaces se pensó en un lenguaje que permitiese presentar cada una de estas informaciones junto con unos pequeños estilos, este lenguaje fue el HTML.
Al poco tiempo quedó patente que HTML se había quedado corto ya que sólo sirve para presentar el texto en un página, definir su estilo y poco más.
Al complicarse los sitios web, una de las primeras necesidades fue que las páginas respondiesen a algunas acciones del usuario, para desarrollar pequeñas funcionalidades más allá de los propios enlaces. El primer ayudante para cubrir las necesidades que estaban surgiendo fue Java.
A través de la tecnología de los Applets, se podía crear pequeños programas que se ejecutaban en el navegador dentro de las propias páginas web, pero que tenían posibilidades similares a los programas de propósito general.
Netscape, por aquel entonces el navegador más popular, había roto la primera barrera del HTML al hacer posible la programación dentro de las páginas web.
1.2.1.- Llega Javascript
Netscape, después de hacer sus navegadores compatibles con los applets, comenzó a desarrollar un lenguaje de programación al que llamó LiveScript que permitiese crear pequeños programas en las páginas y que fuese mucho más sencillo de utilizar que Java, pero no duró mucho ese nombre, pues antes de lanzar la primera versión del producto se forjó una alianza con Sun Microsystems, creador de Java, para desarrollar en conjunto ese nuevo lenguaje.
La alianza hizo que Javascript se diseñara como un hermano pequeño de Java, solamente útil dentro de las páginas web y mucho más fácil de utilizar.
Netscape 2.0 fue el primer navegador que entendía Javascript y su estela fue seguida por otros clientes web como Internet Explorer a partir de la versión 3.0. Sin embargo, la compañía Microsoft nombró a este lenguaje como JScript y tenía ligeras diferencias con respecto a Javascript.
1.2.2.- Diferencias entre distintos navegadores
El propio lenguaje fue evolucionando a medida que los navegadores presentaban sus distintas versiones y a medida que las páginas web se hacían más dinámicas y más exigentes las necesidades de funcionalidades.
A día de hoy, siguen habiendo muchas diferencias y para solucionarlo han surgido
muchos productos como los Frameworks Javascript, que ayudan a realizar funcionalidades avanzadas de DHTML sin tener que preocuparse en hacer versiones distintas de los scripts, para cada uno de los navegadores posibles del mercado.
1.3.- Diferencias entre Java y Javascript
Realmente Javascript se llamó así porque Netscape, que estaba aliado a los creadores de Java en la época, quiso aprovechar el conocimiento y la percepción que las personas tenían del popular lenguaje. Se creó un producto que tenía ciertas similitudes, se hizo entender que era un hermano pequeño y orientado específicamente para hacer cosas en las páginas web, pero también se hizo caer a muchas personas en el error de pensar que son lo mismo.
Javascript no tiene nada que ver con Java
salvo sus orígenes. Principales diferencias:
| Java | Javascript | |
| Compilador | -Es necesario un kit de desarrollo y un compilador | -Su lenguaje es interpretado por los navegadores |
| Orientado a objetos | -Está orientado a objetos | -No está orientado a objetos, por lo tanto,podremos programar sin necesidad de clases |
| Propósito | -Propósito general | -Sólo podemos escribir programas que se ejecuten en páginas web |
| Estructuras fuertes | -Lenguaje fuertemente tipado, es decir, no podemos cambiar la información de un tipo de variable | -Podremos cambiar el tipo de información de una variable cuando queramos |
| Otras características | -Más complejo,potente, seguro y robusto | -Menos funcionalidades |
1.4.- ¿Qué se necesita?
Para programar en Javascript necesitamos un editor de textos y un navegador compatible con Javascript.
Los conocimientos previos para programar en Javascript realmente no son necesarios, se puede aprender siguiendo una guía, no obstante, es recomendable comprender HTML y CSS para no tener complicaciones con la estructura y estética de las páginas.
1.5.- Versiones de navegadores y de Javascript
• Javascript 1: nació con el Netscape 2.0 y soportaba gran cantidad de instrucciones y funciones, casi todas las que existen ahora ya se introdujeron en el primer estandar.
• Javascript 1.1: Es la versión de Javascript que se diseñó con la llegada de los navegadores 3.0. Implementaba poco más que su anterior versión, como por ejemplo el tratamiento de imágenes dinámicamente y la creación de arrays.
• Javascript 1.2: La versión de los navegadores 4.0. Esta tiene como desventaja que es un poco distinta en plataformas Microsoft y Netscape, ya que ambos navegadores crecieron de distinto modo y estaban en plena lucha por el mercado.
• Javascript 1.3: Versión que implementan los navegadores 5.0. En esta versión se han limado algunas diferencias y asperezas entre los dos navegadores.
• Javascript 1.5: Implementa Netscape 6.
• Por su parte, Microsoft también ha evolucionado hasta presentar su versión 5.5 de JScript (así llaman al javascript utilizado por los navegadores de Microsoft).
2.1.- El lenguaje Javascript
La programación de Javascript se realiza dentro del propio documento HTML, dentro de las etiquetas <SCRIPT> y </SCRIPT>.
En una misma página podemos introducir varios scripts, cada uno que podría introducirse dentro de unas etiquetas <SCRIPT> distintas. La colocación de estos scripts no es indiferente.
También se puede escribir Javascript dentro de determinados atributos de la página, como el atributo onclick. Estos atributos están relacionados con las acciones del usuario y se llaman manejadores de eventos.
Existen dos maneras fundamentales de ejecutar scripts en la página. La primera de estas maneras se trata de ejecución directa de scripts, la segunda es una ejecución como respuesta a la acción de un usuario.
Ejecución directa:
Es el método de ejecutar scripts más básico. En este caso se incluyen las instrucciones dentro de la etiqueta <SCRIPT>. Cuando el navegador lee la página y encuentra un script va interpretando las líneas de código y las va ejecutando una después de otra.
Respuesta a un evento:
Es la otra manera de ejecutar scripts.
Los eventos son acciones que realiza el usuario. Los programas como Javascript están preparados para atrapar determinadas acciones realizadas, en este caso sobre la página, y realizar acciones como respuesta. De este modo se pueden realizar programas interactivos, ya que controlamos los movimientos del usuario y respondemos a ellos.
Las acciones que queremos realizar como respuesta a un evento se han de indicar dentro del mismo código HTML, pero en este caso se indican en atributos HTML que se colocan dentro de la etiqueta que queremos que responda a las acciones del usuario.
Si queremos que un botón realizase acciones cuando se pulsase sobre él, debemos indicarlas dentro del atributo "onclick" del botón.
No todos los navegadores que puedan utilizar los usuarios que visiten nuestra página comprenden Javascript. En los casos en los que no se interpretan los scripts, los navegadores asumen que el código de éstos es texto de la propia página y como consecuencia, presentan los scripts en el cuerpo del documento, como si de texto normal se tratara. Para evitar que el texto de los scripts se escriba en la página cuando los navegadores no los entienden se tienen que ocultar los con comentarios HTML (<!-comentario HTML -->).
Ejemplo:
<SCRIPT>
<!--
Código Javascript
//-->
</SCRIPT>
Vemos que el inicio del comentario HTML es idéntico a cómo lo conocemos en el HTML, pero el cierre del comentario presenta una particularidad, que empieza por doble barra inclinada. Esto es debido a que el final del comentario contiene varios caracteres que Javascript reconoce como operadores y al tratar de analizarlos lanza un mensaje de error de sintaxis. Para que Javascript no lance un mensaje de error se coloca antes del comentario HTML esa doble barra, que no es más que un comentario Javascript.
El inicio del comentario HTML no es necesario comentarlo con la doble barra, dado que Javascript entiende bien que simplemente se pretende ocultar el código. Una aclaración a este punto: si pusiésemos las dos barras en esta línea, se verían en navegadores antiguos por estar fuera de los comentarios HTML. Las etiquetas <SCRIPT> no las entienden los
navegadores antiguos, por lo tanto no las interpretan, tal como hacen con cualquier etiqueta que desconocen.
Existe la posibilidad de indicar un texto alternativo para los navegadores que no entienden Javascript, para informarles de que en ese lugar debería ejecutarse un script y que la página no está funcionando al 100% de sus capacidades. También podemos sugerir a los visitantes que actualicen su navegador a una versión compatible con el lenguaje. Para ello utilizamos la etiqueta <NOSCRIPT> y entre esta etiqueta y su correspondiente de cierre podemos colocar el texto alternativo al script.
Ejemplo:
<SCRIPT>
código javascript
</SCRIPT>
<NOSCRIPT>
Este navegador no comprende los scripts que se están ejecutando, debes actualizar tu versión denavegador a una más reciente.
<br><br>
<a href=http://netscape.com>Netscape</a>.<br>
<a href=http://microsoft.com>Microsoft</a>.
</NOSCRIPT>
La etiqueta <SCRIPT> tiene un atributo que sirve para indicar el lenguaje que estamos utilizando, así como la versión de este.
El atributo en cuestión es language y lo más habitual es indicar simplemente el lenguaje con el que se han programado los scripts. El lenguaje por defecto es Javascript, por lo que si no utilizamos este atributo, el navegador entenderá que el lenguaje con el que se está programando es Javascript.
Otra manera de incluir scripts en páginas web, implementada a partir de Javascript 1.1, es incluir archivos externos donde se pueden colocar muchas funciones que se utilicen en la página. Los ficheros suelen tener extendión .js y se incluyen de esta manera.
<SCRIPT language=javascript src="archivo_externo.js">
//estoy incluyendo el fichero "archivo_externo.js"
</SCRIPT>
Dentro de las etiquetas <SCRIPT> se puede escribir cualquier texto y será ignorado por el navegador, sin embargo, los navegadores que no entienden el atributo SRC tendrán a este texto por instrucciones, por lo que es aconsejable poner un comentario Javascript antes de cada línea con el objetivo de que no respondan con un error. El archivo que incluimos (en este caso archivo_externo.js) debe contener tan solo sentencias Javascript.
Sintaxis
El lenguaje Javascript tiene una sintaxis muy parecida a la de Java por estar basado en él. También es muy parecida a la del lenguaje C.
*Comentarios:
Un comentario es una parte de código que no es interpretada por el navegador y cuya utilidad radica en facilitar la lectura al programador. El programador, a medida que desarrolla el script, va dejando frases o palabras sueltas, llamadas comentarios,
que le ayudan a él o a cualquier otro a leer mas fácilmente el script a la hora de modificarlo o depurarlo. Existen dos tipos de comentarios en el lenguaje. Uno de ellos, la doble barra, sirve para comentar una línea de código. El otro comentario lo podemos utilizar para comentar varias líneas y se indica con los signos /* para empezar el comentario y */ para terminarlo.
Ejemplo:
<SCRIPT>
//Este es un comentario de una línea
/*Este comentario se puede extender
por varias líneas.
Las que quieras*/
</SCRIPT>
*Mayúsculas y minúsculas:
En Javascript se han de respetar las mayúsculas y las minúsculas. Si nos equivocamos al utilizarlas el navegador responderá con un mensaje de error, ya sea de sintaxis o de referencia indefinida.
Por regla general, los nombres de las cosas en Javascript se escriben siempre en minúsculas, salvo que se utilice un nombre con más de una palabra, pues en ese caso se escribirán con mayúsculas las iniciales de las palabras siguientes a la primera.
También se puede utilizar mayúsculas en las iniciales de las primeras palabras en algunos casos, como los nombres de las clases.
Ejemplo1:
No es lo mismo la función alert() que la función Alert(). La primera muestra un texto en una caja de diálogo y la segunda (con la primera A mayúscula) simplemente no existe, a no ser que la definamos nosotros.
Ejemplo2:
Otro claro ejemplo lo veremos cuando tratemos con variables, puesto que los nombres que damos a las variables también son sensibles a las mayúsculas y minúsculas.
Ejemplo3:
document.bgColor (que es un lugar donde se guarda el color de fondo de la página web), se escribe con la "C" de color en mayúscula, por ser la primera letra de la segunda palabra.
3. Variables y tipos de datos
Una variable es un espacio en memoria donde se almacena un dato, un espacio donde podemos guardar cualquier tipo de información que necesitemos para realizar las acciones de nuestros programas. Las variables son uno de los elementos fundamentales a la hora de realizar los programas, en Javascript y en la mayoría de los lenguajes de programación existentes.
Los nombres de las variables han de construirse con caracteres alfanuméricos y el carácter subrayado (_). Tienen que comenzar por un carácter alfabético o el subrayado. No podemos utilizar caracteres raros como el signo +, un espacio o un $.
Ejemplo:
Edad
paisDeNacimiento
_nombre
También hay que evitar utilizar nombres reservados como variables, por ejemplo no podremos llamar a nuestra variable palabras como return o for, que ya veremos que son utilizadas para estructuras del propio lenguaje.
Ejemplo a no usar:
12meses
tu nombre
return
pe%pe
Declarar variables consiste en definir y de paso informar al sistema de que vas a utilizar una variable. Javascript cuenta con la palabra "var" que utilizaremos cuando queramos declarar una o varias variables. Como es lógico, se utiliza esa palabra para definir la variable antes de utilizarla.
También se puede asignar un valor a la variable cuando se está declarando.
Ejemplo:
var operando1 = 23
var operando2 = 33
También se permite declarar varias variables en la misma línea, siempre que se separen por comas.
Se le llama ámbito de las variables al lugar donde estas están disponibles. Por lo general, cuando declaramos una variable hacemos que esté disponible en el lugar donde se ha declarado, esto ocurre en todos los lenguajes de programación y como Javascript se define dentro de una página web, las variables que declaremos en la página estarán accesibles
dentro de ella.
En Javascript no podremos acceder a variables que hayan sido definidas en otra página. Por tanto, la propia página donde se define es el ámbito más habitual de una variable y le llamaremos a este tipo de variables globales a la página.
Variables globales:
Son las que están declaradas en el ámbito más amplio posible, que en Javascript es una página web. Para declarar una variable global a la página simplemente lo haremos en un script, con la palabra var.
Ejemplo:
<SCRIPT>
var variableGlobal
</SCRIPT>
Las variables globales son accesibles desde cualquier lugar de la página, es decir, desde el script donde se han declarado y todos los demás scripts de la página, incluidos los manejadores de eventos, como el onclick, que ya vimos que se podía incluir dentro de determinadas etiquetas HTML.
Variables locales:
También podremos declarar variables en lugares más acotados, como por ejemplo una función. A estas variables les llamaremos locales. Cuando se declaren variables locales sólo podremos acceder a ellas dentro del lugar donde se ha declarado
Las variables pueden ser locales a una función, pero también pueden ser locales a otros ámbitos, como por ejemplo un bucle.
Ejemplo:
<SCRIPT>
function miFuncion (){
var variableLocal
}
</SCRIPT>
No hay problema en declarar una variable local con el mismo nombre que una global, en este caso la variable global será visible desde toda la página, excepto en el ámbito donde está declarada la variable local ya que en este sitio ese nombre de variable está ocupado por la local y es ella quien tiene validez.
Un consejo para los principiantes podría ser no declarar variables con los mismos nombres, para que nunca haya lugar a confusión sobre qué variable es la que tiene validez en cada momento.
Diferencias entre declarar variables con var o no declararlas:
Como hemos dicho, en Javascript tenemos libertad para declarar o no las variables con la palabra var, pero los efectos que conseguiremos en cada caso serán distintos. En concreto, cuando utilizamos var estamos haciendo que la varible que estamos declarando sea local al ámbito donde se declara. Por otro lado, si no utilizamos la palabra var para declarar una
variable, ésta será global a toda la página, sea cual sea el ámbito en el que haya sido declarada.
Cualquier variable declarada fuera de un ámbito es global a toda la página.
Utilizamos var la variable será local a la función y si no lo utilizamos, la variable será global a la página.
Ejemplo:
<SCRIPT>
function miFuncion (){
var variableLocal
}
</SCRIPT>
No hay problema en declarar una variable local con el mismo nombre que una global, en este caso la variable global será visible desde toda la página, excepto en el ámbito donde está declarada la variable local ya que en este sitio ese nombre de variable está ocupado por la local y es ella quien tiene validez.
Un consejo para los principiantes podría ser no declarar variables con los mismos nombres, para que nunca haya lugar a confusión sobre qué variable es la que tiene validez en cada momento.
Diferencias entre declarar variables con var o no declararlas:
Como hemos dicho, en Javascript tenemos libertad para declarar o no las variables con la palabra var, pero los efectos que conseguiremos en cada caso serán distintos. En concreto, cuando utilizamos var estamos haciendo que la varible que estamos declarando sea local al ámbito donde se declara. Por otro lado, si no utilizamos la palabra var para declarar una
variable, ésta será global a toda la página, sea cual sea el ámbito en el que haya sido declarada.
Cualquier variable declarada fuera de un ámbito es global a toda la página.
Utilizamos var la variable será local a la función y si no lo utilizamos, la variable será global a la página.
Ejemplo:
<SCRIPT>
var numero = 2
function miFuncion (){
numero = 19
document.write(numero) //imprime 19
}
document.write(numero) //imprime 2
//llamamos a la función
miFuncion()
document.write(numero) //imprime 19
</SCRIPT>
En este ejemplo, tenemos una variable global a la página llamada numero, que contiene un 2. También tenemos una función que utiliza la variable numero sin haberla declarado con var, por lo que la variable numero de la funcion será la misma variable global numero declarada fuera de la función. En una situación como esta, al ejecutar la función se sobreescribirá la variable numero y el dato que había antes de ejecutar la función se perderá.
En una variable podemos introducir varios tipos de información. Por ejemplo podríamos introducir simple texto, números enteros o reales, etc. A estas distintas clases de información se les conoce como tipos de datos. Cada uno tiene características y usos distintos.
Números
Para empezar tenemos el tipo numérico, para guardar números como 9 o 23.6
En este lenguaje sólo existe un tipo de datos numérico, al contrario que ocurre en la mayoría de los lenguajes más conocidos. Independientemente de si son números reales
o enteros. Los números enteros son números que no tienen coma, como 3 o 339. Los números reales son números fraccionarios, como 2.69 o 0.25.
Con Javascript también podemos escribir números en otras bases, como la hexadecimal. Las bases son sistemas de numeración que utilizan más o menos dígitos para escribir los números. Existen tres bases con las que podemos trabajar
• Base 10, es el sistema que utilizamos habitualmente, el sistema decimal. Cualquier número, por defecto, se entiende que está escrito en base 10.
• Base 8, también llamado sistema octal, que utiliza dígitos del 0 al 7. Para escribir un número en octal basta con escribir ese número precedido de un 0, por ejemplo 045.
• Base 16 o sistema hexadecimal, es el sistema de numeración que utiliza 16 dígitos, los comprendidos entre el 0 y el 9 y las letras de la A a la F, para los dígitos que faltan. Para escribir un número en hexadecimal debemos escribirlo precedido de un cero y una equis, por ejemplo 0x3EF.
Cadenas
El tipo cadena de carácter guarda un texto. Siempre que escribamos una cadena de caracteres debemos utilizar las comillas (").
Hay una serie de caracteres especiales que sirven para expresar en una cadena de texto determinados controles como puede ser un salto de línea o un tabulador. Estos son los caracteres de escape y se escriben con una notación especial que comienza por una contra barra (una barra inclinada al revés de la normal '') y luego se coloca el código del carácter a mostrar.
Un carácter muy común es el salto de línea, que se consigue escribiendo n. Otro carácter muy habitual es colocar unas comillas, pues si colocamos unas comillas sin su carácter especial nos cerrarían las comillas que colocamos para iniciar la cadena de caracteres. Las comillas las tenemos que introducir entonces con " o ' (comillas dobles o simples).
Tabla con los caracteres:
Salto de línea: \n
Comilla simple: \'
Comilla doble: \"
Tabulador: \t
Retorno de carro: \r
Avance de página: \f
Retroceder espacio: \b
Contrabarra: \\
Boleanos
También contamos con el tipo boleano, que guarda una información que puede valer si (true) o no (false). Por último sería relevante señalar aquí que nuestras variables pueden contener cosas más complicadas, como podría ser un objeto, una función, o vacío (null) pero ya lo veremos más adelante.
En realidad nuestras variables no están forzadas a guardar un tipo de datos en concreto y por lo tanto no especificamos ningún tipo de datos para una variable cuando la estamos declarando. Podemos introducir cualquier información en una variable de cualquier tipo, incluso podemos ir cambiando el contenido de una variable de un tipo a otro sin ningún
problema. Vamos a ver esto con un ejemplo.
var nombre_ciudad = "Valencia"
var revisado = true
nombre_ciudad = 32
revisado = "no"
A la larga puede ser fuente de errores ya que dependiendo del tipo que son las variables se comportarán de un modo u otro y si no controlamos con exactitud el tipo de las variables podemos encontrarnos sumando un texto a un número.
El tipo bolean, boolean en inglés, sirve para guardar un si o un no o dicho de otro modo, un verdadero o un falso. Se utiliza para realizar operaciones lógicas, generalmente para realizar acciones si el contenido de una variable es verdadero o falso.
Si una variable es verdadero entonces Ejecuto unas instrucciones Si no Ejecuto otras
Los dos valores que pueden tener las variables boleanas son true o false.
Ejemplo:
miTexto = "Pepe se va a pescar"
miTexto = '23%%$ Letras & *--*'
Todo lo que se coloca entre comillas, como en los ejemplos anteriores es tratado como una cadena de caracteres independientemente de lo que coloquemos en el interior de las comillas. Por ejemplo, en una variable de texto podemos guardar números y en ese caso tenemos que tener en cuenta que las variables de tipo texto y las numéricas no son la misma cosa y mientras que las de numéricas nos sirven para hacer cálculos matemáticos las de texto no.
4.1.- Operadores Javascript
Al desarrollar programas en cualquier lenguaje se utilizan los operadores, que sirven para hacer los cálculos y operaciones necesarios para llevar a cabo tus objetivos. Hasta el menor de los programas imaginables necesita de los operadores para realizar cosas, ya que un programa que no realizase operaciones, sólo se limitaría a hacer siempre lo mismo.
4.1.1.- Ejemplos de uso de operadores
3 + 5
Esta es una expresión muy básica que no tiene mucho sentido ella sola. Hace la suma entre los dos operandos número 3 y 5, pero no sirve de mucho porque no se hace nada con el resultado. Normalmente se combinan más de un operador para crear expresiones más útiles. La expresión siguiente es una combinación entre dos operadores, uno realiza una operación matemática y el otro sirve para guardar el resultado.
miVariable = 23 * 5
En el ejemplo anterior, el operador * se utiliza para realizar una multiplicación y el operador = se utiliza para asignar el resultado en una variable, de modo que guardemos el valor para su posterior uso.
Los operadores se pueden clasificar según el tipo de acciones que realizan. A continuación vamos a ver cada uno de estos grupos de operadores y describiremos la función de cada uno.
4.1.2.- Operadores aritméticos
Son los utilizados para la realización de operaciones matemáticas simples como la suma, resta o multiplicación. En javascript son los siguientes:
+ Suma de dos valores
- Resta de dos valores, también puede utilizarse para cambiar el signo de un número si lo utilizamos con un solo operando
-23
* Multiplicación de dos valores
/ División de dos valores
% El resto de la división de dos números (3%2 devolvería 1, el resto de dividir 3 entre 2)
++ Incremento en una unidad, se utiliza con un solo operando
-- Decremento en una unidad, utilizado con un solo operando
Ejemplos
precio = 128 //introduzco un 128 en la variable precio
unidades = 10 //otra asignación, luego veremos operadores de asignación
factura = precio * unidades //multiplico precio por unidades, obtengo el valor factura
resto = factura % 3 //obtengo el resto de dividir la variable factura por 3
precio++ //incrementa en una unidad el precio (ahora vale 129)
4.1.3.- Operadores de asignación
Sirven para asignar valores a las variables, ya hemos utilizado en ejemplos anteriores el operador de asignación =, pero hay otros operadores de este tipo, que provienen del lenguaje C
= Asignación. Asigna la parte de la derecha del igual a la parte de la izquierda. A al derecha se colocan los valores finales y a
la izquierda generalmente se coloca una variable donde queremos guardar el dato.
+= Asignación con suma. Realiza la suma de la parte de la derecha con la de la izquierda y guarda el resultado en la parte de
la izquierda.
-= Asignación con resta
*= Asignación de la multiplicación
/= Asignación de la división
%= Se obtiene el resto y se asigna
Ejemplos
ahorros = 7000 //asigna un 7000 a la variable ahorros
ahorros += 3500 //incrementa en 3500 la variable ahorros, ahora vale 10500
ahorros /= 2 //divide entre 2 mis ahorros, ahora quedan 5250
4.1.4.- Operadores de cadenas
Las cadenas de caracteres, o variables de texto, también tienen sus propios operadores para realizar acciones típicas sobre cadenas. Aunque javascript sólo tiene un operador para cadenas se pueden realizar otras acciones con una serie de funciones predefinidas en el lenguaje.
+ Concatena dos cadenas, pega la segunda cadena a continuación de la primera.
Ejemplo
cadena1 = "hola"
cadena2 = "mundo"
cadenaConcatenada = cadena1 + cadena2 //cadena concatenada vale "holamundo"
Un detalle importante que se puede ver en este caso es que el operador + sirve para dos usos distintos, si sus operandos son números los suma, pero si se trata de cadenas las concatena. Esto pasa en general con todos los operadores que se repiten en el lenguaje, javascript es suficientemente listo para entender que tipo de operación realizar mediante una comprobación de los tipos que están implicados en élla.
Un caso que resultaría confuso es el uso del operador + cuando se realiza la operación con operadores texto y numéricos entremezclados. En este caso javascript asume que se desea realizar una concatenación y trata a los dos operandos como si de cadenas de caracteres se trataran, incluso si la cadena de texto que tenemos fuese un número. Esto lo veremos más fácilmente con el siguiente ejemplo.
miNumero = 23
miCadena1 = "pepe"
miCadena2 = "456"
resultado1 = miNumero + miCadena1 //resultado1 vale "23pepe"
resultado2 = miNumero + miCadena2 //resultado2 vale "23456"
miCadena2 += miNumero //miCadena2 ahora vale "45623"
Como hemos podido ver, también en el caso del operador +=, si estamos tratando con cadenas de texto y números entremezclados, tratará a los dos operadores como si fuesen cadenas.
4.1.5.- Operadores lógicos
Estos operadores sirven para realizar operaciones lógicas, que son aquellas que dan como resultado un verdadero o un falso, y se utilizan para tomar decisiones en nuestros scripts. En vez de trabajar con números, para realizar este tipo de operaciones se utilizan operandos boleanos, que conocimos anteriormente, que son el verdadero (true) y el falso (false). Los operadores lógicos relacionan los operandos boleanos para dar como resultado otro operando boleano, tal como podemos ver en el siguiente ejemplo.
Si tengo hambre y tengo comida entonces me pongo a comer
Nuestro programa Javascript utilizaría en este ejemplo un operando boleano para tomar una decisión. Primero mirará si tengo hambre, si es cierto (true) mirará si dispongo de comida. Si son los dos ciertos, se puede poner a comer. En caso de que no tenga comida o que no tenga hambre no comería, al igual que si no tengo hambre ni comida. El operando en cuestión es el operando Y, que valdrá verdadero (true) en caso de que los dos operandos valgan verdadero.
Para no llevarnos a engaño, cabe decir que los operadores lógicos pueden utilizarse en combinación con tipos de datos distintos de los boleanos, pero en este caso debemos utilizarlos en expresiones que los conviertan en boleanos
if (x==2 && y!=3){
//la variable x vale 2 y la variable y es distinta de tres
}
En la expresión condicional anterior estamos evaluando dos comprobaciones que se relacionan con un operador lógico. Por una parte x==2 devolverá un true en caso que la variable x valga 2 y por otra, y!=3 devolverá un true cuando la variable y tenga un valor distinto de 3. Ambas comprobaciones devuelven un boleano cada una, que luego se le aplica el operador lógico && para comprobar si ambas comprobaciones se cumplieron al mismo tiempo.
! Operador NO o negación. Si era true pasa a false y viceversa.
&& Operador Y, si son los dos verdaderos vale verdadero.
|| Operador O, vale verdadero si por lo menos uno de ellos es verdadero.
Ejemplo
miBoleano = true
miBoleano = !miBoleano //miBoleano ahora vale false
tengoHambre = true
tengoComida = true
comoComida = tengoHambre && tengoComida
4.1.6.- Operadores condicionales
Sirven para realizar expresiones condicionales todo lo complejas que deseemos. Estas expresiones se utilizan para tomar decisiones en función de la comparación de varios elementos, por ejemplo si un numero es mayor que otro o si son iguales.
Los operadores condicionales se utilizan en las expresiones condicionales para tomas de decisiones
== Comprueba si dos números son iguales
!= Comprueba si dos números son distintos
> Mayor que, devuelve true si el primer operador es mayor que el segundo
< Menor que, es true cuando el elemento de la izquierda es menor que el de la derecha
>= Mayor igual.
<= Menor igual
4.1.7.- Operadores a nivel de bit
Estos son muy poco corrientes, su uso se realiza para efectuar operaciones con
ceros y unos. En algunos caso podremos necesitar realizar operaciones tratando las variables como ceros y unos y para ello utilizaremos estos operandos.
& Y de bits
^ Xor de bits
| O de bits
<< >> >>> >>>= >>= <<= Varias clases de cambios
4.1.8.- Precedencia de los operadores
Para marcar unas pautas en la evaluación de las sentencias y que estas se ejecuten siempre igual y con sentido común existe la precedencia de operadores, que no es más
que el orden por el que se irán ejecutando las operaciones que ellos representan. En un principio todos los operadores se evalúan de izquierda a derecha, pero existen unas normas adicionales, por las que determinados operadores se evalúan antes que otros.
() [] . Paréntesis, corchetes y el operador punto que sirve para los objetos
! - ++ -- negación, negativo e incrementos
* / % Multiplicación división y módulo
+- Suma y resta
<< >> >>> Cambios a nivel de bit
< <= > >= Operadores condicionales
== != Operadores condicionales de igualdad y desigualdad
& ^ | Lógicos a nivel de bit
&& || Lógicos boleanos
= += -= *= /= %= <<= >>= >>>= &= ^= != Asignación
Ejemplo
12 * 3 + 4 - 8 / 2 % 3
En este caso primero se ejecutan los operadores * / y %, de izquierda a derecha, con lo que se realizarían estas operaciones.
Primero la multiplicación y luego la división por estar más a la izquierda del módulo.
36 + 4 - 4 % 3
Ahora el módulo.
36 + 4 - 1
Por último las sumas y las restas de izquierda a derecha.
40 - 1
Lo que nos da como resultado el valor siguiente.
39
De todos modos, es importante darse cuenta que el uso de los paréntesis puede ahorrarnos muchos quebraderos de cabeza y sobretodo la necesidad de sabernos de memoria la tabla de precedencia de los operadores.
4.2.- Control de tipos
Para determinados operadores, es importante el tipo de datos que están manejando, puesto que si los datos son de un tipo se realizarán operaciones distintas que si son de otro.
Por ejemplo, cuando utilizábamos el operador +, si se trataba de números los sumaba, pero si se trataba de cadenas de caracteres las concatenaba.
Para comprobar el tipo de un dato se puede utilizar otro operador que está disponible a partir de javascript 1.1, el operador typeof, que devuelve una cadena de texto que describe el tipo del operador que estamos comprobando.
Ejemplo
var boleano = true
var numerico = 22
var numerico_flotante = 13.56
var texto = "mi texto"
var fecha = new Date()
document.write("<br>El tipo de boleano es: " + typeof boleano)
document.write("<br>El tipo de numerico es: " + typeof numerico)
document.write("<br>El tipo de numerico_flotante es: " + typeof numerico_flotante)
document.write("<br>El tipo de texto es: " + typeof texto)
document.write("<br>El tipo de fecha es: " + typeof fecha)
Si ejecutamos este script obtendremos que en la página se escribirá el siguiente texto:
El tipo de boleano es: boolean
El tipo de numerico es: number
El tipo de numerico_flotante es: number
El tipo de texto es: string
El tipo de fecha es: object
En este ejemplo podemos ver que ser imprimen en la página los distintos tipos de las variables. Estos pueden ser los siguientes:
• boolean, para los datos boleanos. (True o false)
• number, para los numéricos.
• string, para las cadenas de caracteres.
• object, para los objetos.
Queremos destacar tan sólo dos detalles más:
1) Los números, ya tengan o no parte decimal, son siempre del tipo de datos numérico.
2) Una de las variables es un poco más compleja, es la variable fecha que es un objeto de la clase Date(), que se utiliza para el manejo de fechas en los scripts. La veremos más adelante, así como los objetos.
Suscribirse a:
Entradas (Atom)