Tema 1: Conceptos básicos de JavaScript

  1. Introducción
  2. Primer Script
  3. Operaciones Matemáticas
    1. Suma
    2. Resta
    3. Multiplicación
    4. Division
  4. Array
    1. Variable simple
    2. Array Multidimensional
    3. Métodos: Variables compuestas
  5. Setencias Lógicas
    1. Break y continue
      1. Break
      2. Continue
    2. If...else
    3. Estructura Switch
    4. Estructura While...do
  6. Objetos
    1. Objetos del navegador
      1. Objeto navegador: Window
      2. Objeto navegador: History
      3. Objeto navegador: Navegador
      4. Objeto navegador: Documento
      5. Objeto navegador: Imagen
      6. Objeto navegador: Formulario
      7. Objeto navegador: Radio (checked)
    2. Objetos predefinidos
    3. Objetos creados por el usuario
  7. TEMA 4
    1. Prototype

Introducción

ddasdasdasdsdsa

Primer Script

El primer script será un script sencillo para poder ver los elementos que lo componen.

    Características del código
  • Todo código script debe ir entre las etiquetas "< script > ... < / script >"
  • En el documento HTML, se almacenará dentro de la etiqueta < head >

Instrucción alert()

La instrucción alert mostrará un mensaje en la pantalla de usuario.

Veamos un ejemplo:

Al pulsar sobre el botón, aparecerá un mensaje informativo en la pantalla.

Operaciones Matemáticas

Javascript permite realizar todas las posibles operaciones matemáticas. Vemos varios ejemplos con las operaciones básicas:

Suma()

Introduzca un número en cada casilla y pulse "Resultado". El sistema le mostrará el resultado de la suma.

Número 1:

Número 2:

El resultado de la suma es:

Resta()

Introduzca un número en cada casilla y pulse "Resultado". El sistema le mostrará el resultado de la suma.

Número 1:

Número 2:

El resultado de la resta es:

Multiplicación()

Introduzca un número en cada casilla y pulse "Resultado". El sistema le mostrará el resultado de la suma.

Número 1:

Número 2:

El resultado de la multiplicación es:

División()

Introduzca un número en cada casilla y pulse "Resultado". El sistema le mostrará el resultado de la suma.

Número 1:

Número 2:

El resultado de la división es:

Array

Array permite almacenar varios variables para poder analizarlos/tratarlos posteriormente.

Existen variables simples y variables compuestas. Las variables simples son variables que únicamente contienen un parámetro. En cambio, las variables compuestas contienen varios parámetros para cada elemento.

Veamos un ejemplo:

Array con variables simples()

Una varible simple únicamente contiene una única propiedad. Veamos un ejemplo, creemos un array que contendrá diferentes colores.

Introduzca tres colores diferentes

Color 1:

Color 2:

Color 3:

Usted ha introducido estos colores:

Array Multidimensional()

Los Arrays Multidimensionales son aquellos arrays que a su vez entre sus elementos también existen otros arrays.Una variable compuesta contiene varias propiedades que definen esa variable. Por ejemplo, supongamos que definimos una variable con jugadores de futbol. Las propiedades serán: nombre del jugador, equipo y nacionalidad.

Introduzca 3 jugadores diferentes junto con sus características

Nombre jugador:

Equipo:

Nacionalidad:

Nombre jugador:

Equipo:

Nacionalidad:

Nombre jugador:

Equipo:

Nacionalidad:

Jugador1:

Introduzca ustad el nombre de unos de los jugadores introducidos y al pulsar "BUSCAR EQUIPO", el sistema le devolverá el equipo al que ha indicado usted que pertenece

Nombre jugador:

Jugador1:

Métodos: Array con variables compuestas()

Una variable compuesta contiene varias propiedades que definen esa variable. Por ejemplo, supongamos que definimos una variable con jugadores de futbol. Las propiedades serán: nombre del jugador, equipo y nacionalidad.

Introduzca 3 jugadores diferentes junto con sus características

Nombre jugador:

Equipo:

Nacionalidad:

Nombre jugador:

Equipo:

Nacionalidad:

Nombre jugador:

Equipo:

Nacionalidad:

Jugador2:

Sentencias Lógicas

Veamos las principales sentencias lógicas pero antes de nada, expliquemos las sentencias break y continue.

Break & Continue()

En Javascript es muy frecuente definir bucles para ejecturar iteraciones/acción diferentes veces. Estos bucles se utilizarán en las sentencias lógicas que seguidamente explicaremos pero antes, vamos a ver las diferentes maneras de detener o salterse dicho bucle. Para ello utilizaremos las sentencias: brek o continue.

La sentencia BREAK se utilizará para salir de bucle mientras que la sentencia CONTINUE se utilizará para saltar una iteración y contienuar dentro del bucle.

Break()

La sentencia BREAK se utilizará para salir de bucle

Por ejemplo, supongamos que tenemos un bucle que cada vez que se ejecuta suma un número y, se imprime dicho número. Supongamos que el bucle de debe cumplir hasta llegar al número 10. Si introducimos la sentencia break, el sistema saldrá del bucle definitivamente. Supongamos que el break lo definimos cuando llegamos al número introducido por el usuario. Introduzca un número del 1 al 9 y pulse "EJECUTAR BUCLE"

Introduzca un nº:

Resultado del bucle:

Continue()

La sentencia CONTINUE se utilizará para saltarse una iteracción del bucle, pero no para salir definitivamente de él.

Veamos el mismo ejemplo anterior con la sentencia CONTINUE, el sistema saltará el bucle para la interacción introducida por el usuario pero continuará con el bucle.Introduzca un número del 1 al 9 y pulse "EJECUTAR BUCLE"

Introduzca un nº:

Resultado del bucle:

If, If...else()

Al dar lógica al programa, el sistema realizará una acción específica para el caso de true y otra en el caso de false

Por ejemplo, en función de la respuesta a una pregunta, el sistema devolverá una información u otra.

Responda a la siguiente pregunta: ¿Usted conoce al personaje Espinete?

SI, por supuesto. Me encantaba pasar todas las tardes con él y sus amigos
SI
NO

En función de su respuesta, se podría adivinar más o menos su edad. Pulse "Validar" y el sistema interpretará su elección y devolverá un mensaje diferente en función de cada respuesta

Podemos deducir que...

Estructura Switch()

Esta función se utiliza cuando queramos determinar lógicas diferentes en función del valor de una variable.

Por ejemplo, imaginemos que nos encontramos un un supermercado, esta estructura switch la podríamos utilizar para determinar el precio en función de la compra seleccionada.

Para este caso concreto, se han creado 3 casos diferentes (uno para cada producto) y otros adicional en caso de no cumplir ninguno de los anteriores (default).

Seleccione el producto que desea comprar

1 kg de Arroz Blanco
1 Kg de Arroz marca blanca
1 kg de Arroz Basmati

Si desea saber el precio del producto seleccionado, pulse "PRECIO"

Precio del producto seleccionado:

Estructura While...do()

La instrucción WHILE crea un bucle que ejecuta una sentencia específica mientras se cumpla la condición. La condición DO indicará la acción a realizar mientra se cumpla la condición.

Veamos un ejemplo: supongamos que tenemos un Array con unos números almacenados. Creamos un función en JS para que muestre los números almacenados hasta llegar al nº deseado.

Array: [10, 20, 30, 40, 50, 60, 70]

Díganos cuantos elementos del array desea visualizar

Nº de array que desea ver (máx 6, incluye 0)

Pulse para saber todos los números almacenados en el array

Los arrays son...:

Objetos

Javascript es un lenguaje basado en objetos. Consideremos los objetos como colecciones de propiedades y métodos.

Javascript admite 3 tipos de objetos: objetos del navegador, objetos predefinidos y objetos creados por el usuario.

Objetos del navegador

Los principales objetos del navegador son: window, frame, location, history y navigator.

Objeto del navegador: Window

Window: representa la ventana del navegador o cualquiera de sus marcos.

Veamos un ejemplo en el que se mostrarán las principales propiedades de las ventana. Para ello pulse el botón "MOSTRAR PROPIEDADES".

Las propiedades de la ventana son:

Veamos otros ejemplo: se crea una función que crea una pantalla nueva a con los parámetros introducidos por el usuario.

Introduzca el ancho y alto deseado y pulse "Crear ventana".

Alto ventana:

Ancho ventana:

Objeto del navegador: History

El objeto History permite movernos hacía delante y atrás en la lista de todas las URL visitadas.

Veamos un ejemplo: se crean dos botones diferentes. El botón "ATRAS" vuelve a la URL anterior, la "SIGUIENTE" va hacía delante..

Objeto del navegador: Navegador

El objeto Navegador simplemente da información del navegador que se está utilizando.

Veamos un ejemplo, pulse el botón "Ver Propiedades" y el sistema le presentará las principales propiedades del navegador.

Las principales propiedades del navegador son:

Objeto del navegador: Documento

El objeto Documento da información de las principales características del documento: títlo, enlacecs, color de fondo,...

Veamos un ejemplo, pulse el botón "Ver Propiedades" y el sistema le presentará las principales características del documento.

Las principales propiedades del navegador son:

Objeto del navegador: Image

El objeto Image nos permitirá manupular las imágenes añadiendo nuevos efectos.

Veamos un ejemplo, veamos como a imagen cambia cuando se modifica el evento: con el evento "onMouseover" aparece una imagen mientras que "onMouseout", aparece otra distinta.

Pase el mouse sobre la imagen y ésta cambiará!!!

imagen de un perro

Veamos otro ejemplo moviendo una imagen de izquierda a derecha. Pulse sobre la imagen y ésta empezará a moverse.

imagen de Usain Bolt

Objeto del navegador: Formulario

Es posible manipular los objetos de un formulario para validar ciertos campos antes de enviarlo al servidor.

Veamos un ejemplo de validación de los principales objetos de un formulario.

Al pulsar "ENVIAR" el sistema validará los principales campos.

Objeto del navegador: Radio Button Checked

Es posible manipular los objetos incluidos en un radio button activando o desactivando los que se considere.

Veamos un ejemplo, usted debe seleccionar entre las posibles opciones y el sistema le listará los objectos seleccionados con el status checked.

Al pulsar "SELECCIÓN COMPLETADA" el sistema devolverá la elección.

Música Clásica
Pop Rock Actual
Música Electrónica

Usted ha seleccionado:

Tema4

falta explicar algo del tema 3

Prototypo()

UTodos los objetos de JavaScript van a incluir referencia interna a otro objeto llamado prototype. Por tanto, cualquiera de las propiedades o métodos que contenga este objeto prototipo, estará incluida en el origianl. Y, si se modifica el objeto prototipo o le añadimos más funcionalidades, los objetos que estén creados con dicho molde, también contendrán automáticamente las neuvas características.

Veamos un ejemplo retomando el ejercicio anterior de creación de arrays simples. En él se han creado nun array a partir de unos inputs introducidos por el usuario. Vamos a crear un prototypo que verifique que si dicho color ya está creado en nuestro array y, en caso afirmativo, no permita dar de alta el nuevo color (evitar duplicados)

Introduzca de nuevo tres colores, repita el color para que el sistema no permita duplicar dicho color.

Color 1:

Color 2:

Color 3:

Usted ha introducido estos colores: