Curso de JavaScript
LENGUAJE JAVASCRIPT: JavaScript un lenguaje de programación web
Programación web al lado del cliente
JavaScript Un lenguaje de script en el cliente
Contenido
Programación Orientada a Objetos. DOM.
JavaScript es un lenguaje POO*
- JavaScript es un lenguaje que tiene un gran biblioteca de funciones para utilizar
- Esta biblioteca de funciones se organizan en objetos
- Un objeto va a ser como un tipo de datos
- Los objetos serán programas independientes que puedo utilizar cuando los necesite
- Presenta objetos que se pueden usar
- Permite crear tus propios objetos y tus propios tipos de variables (JavaScript Avanzado)
- Un objeto es un tipo especial de dato que tiene
- Propiedades
- Métodos
*POO = programación orientada a objetos OOP = object oriented programming
Propiedades
Valores que se asocian con los objetos. Ejemplo con el objeto String:
<script type="text/javascript"> var txt="¡Hola Pepito!"; document.write(txt.length); </script>
Métodos
Acciones que se ejecutan sobre objetos. Ejemplo con el objeto String:
<script type="text/javascript"> var str="¡Hola Pepito!"; document.write(str.toUpperCase()); </script>
Qué es programar orientado a objetos
- Es utilizar objetos u otros programas dentro de mi programa principal
- Ahorar y aprovechar el trabajo realizado por otras personas
- Objetos que el sistema me ofrece
- Objetos que otras personas han realizado
- Objetos que yo haya realizado
Objetos del lenguaje JavaScript
- JavaScrit tiene una serie de objetos que podemos utilizar directamente
- Si quiero acceder a sus propiedades y métodos tendré que usar una notación concreta
- A continuación vamos a analizar los diferentes objetos haciendo un ejemplo de cada uno
Diferencia entre Objeto y Clase
- La idea es tener claro que son dos coceptos relacionados pero no sinónimos
- La clase es el concepto de tipo de dato
- El objeto es el concepto de variable
- Es decir yo defino un objeto de una determinada clase
- Se hace con el operador new
var frase = new String(); var fecha = new Date();
Objeto Date
- Para trabajar con fechas y horas.
- Se inicializa automáticamente en la declaración, con la fecha y hora actuales.
Declara una fecha y visualiza su valor
|
- La fecha es un elemento muy usado en programación por lo que le vamos a dedicar uno ejemplos
- Crear una fecha concreta
- Son muchas las forma de crear una fecha
- Especificando una cadena de caracteres del tipo
YYYY-MM-DD (norma ISO 8601) YYYY-MM => En este caso asigna como día 1 YYYY => En este caso asigna como día 1 - y como mes enero (0)
- Hay otras formas de especificar la fecha.
- Usando métodos de la clase fecha
Metodo Description getDate() Obtenemos el día como un número (1-31) getDay() Obtenemos el día dentro de la semana como un número (0-6) getFullYear() Devuelve el año (yyyy) getHours() Devuelve la hora (0-23) getMilliseconds() Devuelve los milisegundos (0-999) getMinutes() Los minutos (0-59) getMonth() Meses (0-11) getSeconds() Segundos (0-59) getTime() Marca de fecha (milliseconds since January 1, 1970)
Haz un programa que introduces tu fecha de nacimiento y de devuelve tu edad
|
- Modificar la fecha
setFullYear (year, mes, dia);
Objeto Array
Varias posibilidades para declararlas e inicializarlas:
var misCoches=new Array(); misCoches[0]="Saab"; misCoches[1]="Volvo"; misCoches[2]="BMW"; var misCoches=new Array(3); misCoches[0]="Saab"; misCoches[1]="Volvo"; misCoches[2]="BMW"; var misCoches=new Array("Saab","Volvo","BMW");
Presentan numerosos métodos para hacer las operaciones más habituales, por ejemplo, ordenamiento (método sort):
var arr = new Array(6); arr[0] = "Jani"; arr[1] = "Hege"; arr[2] = "Stale"; arr[3] = "Kai Jim"; arr[4] = "Borge"; arr[5] = "Tove"; document.write(arr + "<br />"); document.write(arr.sort());
Resultado:
Jani,Hege,Stale,Kai Jim,Borge,Tove
Borge,Hege,Jani,Kai Jim,Stale,Tove
Number
String
- Podemos crear un objeto de tipo string
var n = new String(); n= "Hola caracola";
- Es lo mismo que hacer
var n; n= "Hola caracola";
- Hay una gran cantidad de funciones útiles para cadena de caracteres
Funciones útiles para cadenas de texto
//length, calcula la longitud de una cadena de texto var mensaje = "Hola Mundo"; var numeroLetras = mensaje.length; // numeroLetras = 10 //+, se emplea para concatenar varias cadenas de texto var mensaje1 = "Hola"; var mensaje2 = " Mundo"; var mensaje = mensaje1 + mensaje2; // mensaje = "Hola Mundo" //la función concat se utiliza de modo similar al operador + var mensaje1 = "Hola"; var mensaje2 = mensaje1.concat(" Mundo"); // mensaje2 = "Hola Mundo"
//toUpperCase(), transforma a mayúsculas var mensaje1 = "Hola"; var mensaje2 = mensaje1.toUpperCase(); // mensaje2 = "HOLA" //toLowerCase(), transforma a minúsculas: var mensaje1 = "HolA"; var mensaje2 = mensaje1.toLowerCase(); // mensaje2 = "hola" //charAt(posicion), obtiene el carácter que se encuentra en la posición indicada: var mensaje = "Hola"; var letra = mensaje.charAt(0); // letra = H letra = mensaje.charAt(2); // letra = l //indexOf(caracter), calcula la primera ocurrencia del carácter indicado var mensaje = "Hola"; var posicion = mensaje.indexOf('a'); // posicion = 3 posicion = mensaje.indexOf('b'); // posicion = -1 //lastIndexOf(caracter), empieza a buscar por detrás en la cadena var mensaje = "Hola"; var posicion = mensaje.lastIndexOf('a'); // posicion = 3 //función substring(número), extraer parte de la cadena: var mensaje = "Hola Mundo"; porcion = mensaje.substring(5); // porcion = "Mundo" var porcion = mensaje.substring(1, 8); // porcion = "ola Mun" //función split para obtener arrays de texto: var mensaje = "Hola Mundo, soy una cadena de texto!"; var palabras = mensaje.split(" "); // palabras = ["Hola", "Mundo,", "soy", "una", "cadena", "de", "texto!"]; //Con esta función se pueden extraer fácilmente las letras que forman una palabra: var palabra = "Hola"; var letras = palabra.split(""); // letras = ["H", "o", "l", "a"]
0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
t | r | w | a | g | m | y | f | p | d | x | b | n | j | z | s | q | v | h | l | c | k | e |
Number
- Son muchas las funciones o métodos definidos para la clase Number
- Es especialmente interesante ver la función isNaN(valor), la cual me devuelve true o false en función de que el valor sea o no número.
- Aquí tenemos otros usos de los valores numéricos.
//función isNaN para comprobar si es un número: var numero1 = 0; var numero2 = 0; alert(numero1/numero2); // se muestra el valor NaN var numero1 = 0; var numero2 = 0; if(isNaN(numero1/numero2)) { alert("La división no está definida para los números indicados"); } else { alert("La división es igual a => " + numero1/numero2); } //función toFixed(digitos), devuelve el número con los decimales indicados y los redondeos necesarios: var numero1 = 4564.34567; numero1.toFixed(2); // 4564.35
Algunos objetos referidos al navegador
Window: Representa la ventana del navegador.
Navigator: Contiene información sobre el navegador Web
Screen: Contiene información sobre la pantalla del ordenador
History : Contiene información sobre las URLs visitadas
Location: Contiene información sobre la URL actual en el navegador
document: Contiene información el contenido del documento html
Un ejemplo:
<html> <head> <script type="text/javascript"> function printpage() { window.print() } </script> </head> <body> <input type="button" value="Print this page" onclick="printpage()" /> </body> </html> </div> <div class="slide">