miércoles, 5 de noviembre de 2014

UF1305. Parte 4 : Operdadores en Javascript.

4.1 OPERADORES JAVASCRIPT I:


Al desarrollar programas en cualquier lenguaje se utilizan los operadores, que sirven para hacer los cálculos y operaciones necesarios.


4.1.1 -EJEMPLOS DE USO DE OPERADORES:

Vamos a ahcer un ejemplo de una suma utilizando el operador suma.

3+5

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.


4.1.2. -OPERADORES ARITMÉTICOS:

Utilizados para la realización de operaciones matemáticas simples como la suma, resta o multiplicación.

+ 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:

Para asignar valores a las variables, 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.2. Operadores Javascript II:


4.2.1. -OPERADORES DE CADENAS:

Las cadenas de caracteres, o variables de texto, también tienen sus propios operadores. Aunque javascript sólo tiene un operador para cadenas se pueden realizar otras acciones con una serie de funciones.

+ 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"

El operador + sirve para dos usos distintos, si sus operandos son números los suma, pero si se trata de cadenas las concatena. Resultaría confuso es el uso del operador + cuando se realiza la operación con operadores texto y numéricos entremezclados. 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"


4.2.2. -OPERADORES LÓGICOS:

Para realizar operaciones lógicas, son aquellas que dan como resultado un verdadero o un falso, y se utilizan para tomar decisiones en nuestros scripts. Se utilizan operandos boleanos, 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 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.

Ejemplo

miBoleano = true 

miBoleano = !miBoleano //miBoleano ahora vale false 

tengoHambre = true 

tengoComida = true 


comoComida = tengoHambre && tengoComida


4.2.3. -OPERACIONES CONDICIONALES:

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.

Tabla de operadores condicionales:

== 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.3. OPERADORES JAVASCRIPT III:


4.3.1. OPERADORES A NIVEL DE BIT:

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.3.2. -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. Muchas de estas reglas de precedencia están sacadas de las matemáticas y son comunes a otros lenguajes.

() [] . 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


4.4. -CONTROL DE TIPOS:

El listado de operadores se completa con el operador typeof.

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.

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

UF1305 Parte 3: Trabajo con variables y tipos de datos en Javascript.

3.1. VARIABLES EN JAVASCRIPT:


3.1.1. -CONCEPTO DE VARIABLE:

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.

sumando1 = 23 

sumando2 = 33 

suma = sumando1 + sumando2

Los nombres de las variables han de construirse con caracteres alfanuméricos y el carácter subrayado (_).  No podemos utilizar caracteres raros como el signo +, un espacio o un $. Nombres


Edad 

paisDeNacimiento 

_nombre 

evitar utilizar nombres reservados como variables, no podremos llamar a nuestra variable palabras como return o for, que ya veremos que son utilizadas para estructuras del propio lenguaje. Nombres que no está permitido.

12meses 

tu nombre 

return 


pe%pe


3.1.2. -DECLARACIÓN DE VARIABLES EN JAVASCRIPT: 

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.

var operando1 


var operando2

También se puede asignar un valor a la variable cuando se está declarando

var operando1 = 23 

var operando2 = 33 


También se permite declarar varias variables en la misma línea, siempre que se separen por comas.


3.2. -ÁMBITO DE LAS VARIABLES EN JAVASCRIPT:


3.2.1. -CONCEPTO DE ÁMBITO DE VARIABLES:

Se le llama ámbito de las variables al lugar donde estas están disponibles.
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.


3.2.2. -VARIABLES GLOBALES:

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 lo haremos en un script, con la palabra var. 

<SCRIPT> 

var variableGlobal 

</SCRIPT>


3.2.3.- Variables locales

Variables en lugares más acotados, como por ejemplo una función. variables  locales.  sólo podremos acceder a ellas dentro del lugar donde se ha declarado, es decir, si la habíamos declarado en una función solo podremos acceder a ella cuando estemos en esa función. 

 también pueden ser locales a otros ámbitos,En general, son ámbitos locales cualquier lugar acotado por llaves. 

<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. 

<SCRIPT> 

var numero = 2 

function miFuncion (){ 

 var numero = 19 

 document.write(numero) //imprime 19 



document.write(numero) //imprime 2 

</SCRIPT>


3.2.4. -DIFERENCIAS ENTRE DECLARAR VARIABLES CON VAR, O NO DECLARARLAS:

Cuando utilizamos var estamos haciendo que la variable que estamos declarando sea local al ámbito donde se declara. 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. 
Si utilizamos var la variable será local a la función y si no lo utilizamos, la variable será global a la página. Esta diferencia es fundamental a la hora de controlar correctamente el uso de las variables en la página, ya que si no lo hacemos en una función podríamos sobreescribir el valor de una variable, perdiendo el dato que pudiera contener previamente. 

<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>



3.3. QUÉ PODEMOS GUARDAR EN VARIABLES:


En una variable podemos guardar distintos tipos de datos e introducir varios tipos de información. Por ejempoo: simple texto, números enteros o reales, etc. A estas distintas clases se les conoce como tipos de datos.

tiposs de datos:

Números: números como 9 o 23.6
Cadenas: Texto. Utilizar comillas.
Boleanos:Guarda información que puede valer si (true) o no (false).

Pueden contener cosas más complicadas como, un objeto, una funciñon, o vació (null)

var nombre_ciudad = "Valencia" 

var revisado = true 

nombre_ciudad = 32 


revisado = "no"

Esta ligereza a la hora de asignar tipos a las variables puede ser una ventaja en un principio, pero 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.


3.4. TIPOS DE DATOS EN JAVASCRIPT:


3.4.1. -TIPO DE DATOS NUMÉRICO:

Sólo existe un tipo de datos numérico. Los 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.

También podemos escribir números en otras bases, como la hexadecimal.  Existen tres.

• Base 10: Sistema decimal. 

• Base 8: Sistema octal, utiliza dígitos del 0 al 7.  Número precedido de un 0, por ejemplo 045. 

• Base 16 o sistema hexadecimal: Sistema de numeración que utiliza 16 dígitos,  comprendidos entre el 0 y el 9 y las letras de la A a la F, para los dígitos que faltan. Escribirlo precedido de un cero y una equis, por ejemplo 0x3EF.


3.4.2. -TIPO BOLEANO:

Para guardar un si o un no o dicho de otro modo, un verdadero o un falso.


3.4.4. -CARACTERES DE ESCAPE EN CADENAS DE TEXTO:

Sirven para expresar en una cadena de texto determinados controles como puede ser un salto de línea o un tabulador. Se escriben con una contra barra (una barra inclinada al revés de la normal '') y luego se coloca el código del carácter a mostrar.

Caracteres de escape:

Salto de línea: \n 


Comilla simple: \'
Comilla doble: \"

Tabulador: \t 

Retorno de carro: \r 

Avance de página: \f 

Retroceder espacio: \b 


Contrabarra: \\




UF1305 Parte 2: Primeros pasos con el lenguage Javascript.

2.1 EL LENGUAGE JAVASCRIPT:


En esta parte vamos a conocer la manera más básica de trabajar con el lenguaje y también cómo se debe colocar código para que nuestra web sea compatible con todos los navegadores.


2.1.1 -JAVASCRIPT SE ESCRIBE EN EL DOCUMENTO HTML:


La programación de Javascript se realiza dentro 

del  HTML. En la mayoría de los casos, se mezcla con el propio código 

HTML.

 debemos aprender a mezclar los dos lenguajes y para que 

estos dos lenguajes puedan convivir sin problemas se han de incluir unos delimitadores que separan las etiquetas

HTML de las de Javascript: <SCRIPT> y </SCRIPT>. Todo código 

Javascript que ha de ser introducido entre estas dos etiquetas. 


2.1.2.-LA COLOCACIÓN DE LOS SCRIPTS SÍ QUE IMPORTA: 

En una misma página podemos introducir varios scripts, cada uno que podría introducirse dentro de unas etiquetas 

<SCRIPT> distintas. N
os da un poco igual donde colocarlos, pero en determinados casos 

esta colocación sí que será muy importante. 

También se puede escribir dentro de el atributo onclick. Éstos atributos están r
elacionados con las acciones del usuario y se llaman manejadores de eventos. 



2.2. MANERAS DE EJECUTAR SCRIPT JAVASCRIPT:



2.2.1.-EJECUCIÓN DIRECTA:

Método de ejecutar scripts más básico. 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. 


2.2.2.-RESPUESTA A UN EVENTO:


Los eventos son acciones que 

realiza el usuario.
 Existen muchos tipos de eventos distintos, por ejemplo la 

pulsación de un botón, el movimiento del ratón o la selección de texto de la página. 



Las acciones que queremos realizar como respuesta a un evento se han de indicar dentro del mismo código HTML.

2.3.1.- Ocultar el código Javascript con comentarios HTML




2.3. OCULTAR SCRIPTS JAVASCRIPT EN NAVEGADORES ANTIGUOS:


2.3.1. -OCULTAR EL CÓDIGO JAVASCRIPT CON COMENTARIOS HTML:

un ejemplo de código donde se han utilizado comentarios HTML para ocultar Javascript:

<SCRIPT>

<!-- 

Código Javascript

//-->

</SCRIPT> 

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, no es más que 

un comentario Javascript.


2.3.2. -MOSTRAR UN MENSAJE PARA NAVEGADORES ANTIGUOS CON <NOSCRIPT>:


Existe la posibilidad de indicar un texto alternativo para los navegadores que no entienden Javascript. 
Para ello utilizamos la 

etiqueta <NOSCRIPT> y entre esta etiqueta y su correspondiente de cierre podemos colocar el texto alternativo al script. 

<SCRIPT>

código javascript

</SCRIPT>

<NOSCRIPT>

Este navegador no comprende los scripts que se están ejecutando, debes actualizar tu 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>


2.4. MÁS SOBRE COLOCAR SCRIPTS:


2.4.1. -INDICAR EL LENGUAGE QUE ESTAMOS UTILIZANDO:

La etiqueta <SCRIPT> tiene un atributo que sirve para indicar el lenguaje que estamos utilizando, así como la versión de 



este.








2.4.2. -INCLUIR FICHEROS EXERNOS DE 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. 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>



2.5. SINTAXIS JAVASCRIPT:


2.5.1. -COMENTARIOS EN EL CÓDIGO:


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. la doble barra, sirve para comentar una línea de código. El otro
 para comentar varias líneas y se indica con los signos /* para empezar el comentario y */ para terminarlo.


<SCRIPT>

//Este es un comentario de una línea

/*Este comentario se puede extender

por varias líneas.

Las que quieras*/

</SCRIPT> 


2.5.2.- Mayúsculas y minúsculas

En Javascript se han de respetar las mayúsculas y las minúsculas. N


o es lo mismo la función alert() que la función Alert().
 Los nombres que damos a las variables también son sensibles a las 

mayúsculas y minúsculas. 

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.


2.5.3.- Separación de instrucciones


Javascript tiene dos maneras de separar instrucciones. La primera es a través 

del carácter punto y coma (;) y la segunda a través de un salto de línea. 

Por esta razón Las sentencias Javascript no necesitan acabar en punto y coma a no ser que coloquemos dos instrucciones en 

la misma línea.