Javascript: lenguaje interactivo para dinamizar la web.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 39
Visitas el mes pasado: 65
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Si este sitio te parece interesante puedes contribuir con una pequeña aportación.
En los temas anteriores hemos visto una serie de elementos, o mejor dicho, de clases de elementos a las que hemos llamado objetos. Un objeto es algo más que una variable, pues posee propiedades y métodos. Hemos visto que había objetos tanto en la estructura de la página o DOM como en el propio lenguaje javascript. Sin embargo no se ha explicado bien lo que es un objeto.
Un objeto es una estructura que tiene propiedades y métodos.
Las propiedades son como los adjetivos en el lenguaje, es decir que expresan una cualidad del objeto, así por ejemplo las instrucciones dadas en lenguaje CSS se consideran propiedades, ya que modifican el aspecto de la página. Otras propiedades pueden darnos información acerca del objeto, por ejemplo sobre su tamaño, valor, estado, etc. Los atributos de las etiquetas HTML son considerados también propiedades.
Los métodos son funcionalidades, es decir funciones o modos de operar asociados a un objeto. Se comportan igual que una función. Un método es algo que se puede hacer con el objeto. Es por eso que llevan siempre un paréntesis detrás, en el que se le pueden pasar varios valores para que opere con ellos (los parámetros o argumentos).
En javascript se accede a las propiedades y a los métodos de un objeto
con el operador punto ( .
) tal como hemos visto en todos los ejemplos
de lecciones anteriores. Ej:
Math.SQRT2
fecha.getFullYear()
Los objetos pueden formar estructuras jerárquicas, tal como sucede en la estructura DOM de la página. Hemos visto como unos objetos tienen como propiedades a otros objetos, formando así una estructura en árbol.
Hay que diferenciar los objetos de la página o del DOM y los objetos de javascript.
Así los objetos de la página tienen estructura jerárquica, y dependen todos del
objeto window
. Dentro del documento dependen todos del objeto
document
. Es por eso por lo que la mayoría de las instrucciones que empleamos
para acceder a la página empiezan por document.
Por otra parte el lenguaje javascript tiene también unos objetos predefinidos,
algunos de los cuales los hemos visto en temas anteriores. Estos, mediante sus
propiedades y métodos, nos permiten
realizar las tareas más habituales de una forma sencilla. Estos objetos tienen su jeraquía, y dependen
todos del objeto Object
, el cual veremos más adelante.
Otra característica de los objetos es la herencia. Esto consiste que si un objeto tiene unas propiedades y métodos, todos los objetos que jerárquicamente dependan de él, poseerán tambien (heredarán) las mismas propiedades y métodos. Esto es algo que hay que tener en cuenta en la estructura del la página. Es posible que nos suene el concepto de herencia, ya que las propiedades CSS también lo tienen.
En realidad, más que de objetos deberíamos hablar de clases de objetos, ya que un objeto en sí
sería por ejemplo una fecha, y la clase de objeto a la que pertenece sería la clase Date
.
Para crear un nuevo objeto de una clase ya definida, la forma habitual es escribir:
nuevoObjeto = new ClaseObjeto()
donde nuevoObjeto
es el objeto nuevo que creamos. new
es la
palabra o operador que indica a javascript que estamos creando un nuevo objeto.
ClaseObjeto
es la clase a la que pertenecerá el nuevo objeto. Dentro de los paréntesis,
y dependiendo del tipo de objeto, podremos poner algunas características del objeto, por
ejemplo en los arrays podemos poner los elementos que lo componen.
Sin embargo no es la única forma de crear un objeto, ya que dependiendo de la clase que se trate, puede haber otras formas de crearlo. Por ejemplo al asignarle un valor a una nueva variable, podemos estar creando un objeto tipo Número (Number) o Cadena de texto (String); también los arrays podemos crearlos de varias maneras.
Hasta ahora hemos visto en temas anteriores las siguientes clases de objetos:
Sin embargo nos faltan por ver algunas clases de objetos, los cuales aunque menos importantes desde el punto de vista de la programación debemos tenerlos en cuenta.
El objeto o clase de objetos Boolean incluye las variables booleanas o lógicas
que sólo pueden tomar los valores true
y false
.
Para construir un objeto de clase Boolean
basta con asignar un
valor booleano a una variable, pero también podemos crearlo por el método general:
booleano = new Boolean()
Depèndiendo del valor del parámetro que le pasemos dentro del paréntesis el valor
devuelto será true
o false
. Si pasamos directamente los
valores true
o false
, nos devolverá esos valores. Si no pasamos ningún
valor o pasamos como valor el número 0 o una cadena de texto vacía,
devolverá false
, en los demás casos devolverá true
.
El objeto Boolean no tiene propiedades y métodos propios, sino los heredados
del objeto Object
, el cual veremos más adelante.
Las funciones también se consideran objetos en Javascript, y forman la clase
Function
. Aunque la forma más habitual de declararlas es la que hemos visto:
function miFuncion()
; también lo podemos hacer mediante la
forma general de construir objetos:
miFunción = new Function() { ... }
Tal como ocurre en la forma habitual de declararlas, dentro del paréntesis escribiremos, si hace falta, los parámetros que necesite la función.
No tiene propiedades ni métodos propios, sino los heredados del objeto
Object
que veremos más adelante.
Esta clase de objetos contienen unos elementos que no hemos visto hasta ahora: las expresiones regulares. Estas sirven para comprobar si una cadena de texto sigue un determinado patrón, o si contiene unos caracteres determinados. Se emplea, por ejemplo para comprobar en un formulario si el texto pasado por el usuario es un e-mail, o un número de teléfono, etc.
Estas expresiones van encerradas entre las barras inclinadas / .../
, y tienen
su propia sintaxis. por ejemplo la siguiente expresión comprueba si el el texto
pasado es una dirección de página web:
var reg = /^http[s]?://\w[\.\w]+$/i
En el siguiente tema explicaremos con más detalle las expresiones regulares. Debido a su complejidad lo más cómodo es tener una lista de las expresiones regulares para los casos más comunes, tales como comprobar direcciones web, e-mail, num teléfonos, fechas, etc.
Para declarar un objeto RegExp podemos hacerlo simplemente asignando a una variable una expresión regular, tal como en el ejemplo anterior, o mediante el método general de crear objetos:
var reg = new RegExp("^http[s]?://\w[\.\w]+$", "i");
Para efectuar las búsquedas y reemplazos, este objeto tiene varios métodos, algunos de los cuales son iguales que para las cadenas de texto:
cadena.search(regexp): Comprueba si la cadena se ajusta al patrón, en tal caso devuelve verdadero (true).
cadena.replace(regexp,remplazar): Reemplaza el trozo de cadena que se ajusta a la expresión regular por la cadena que se pasa como segundo argumento (remplazar).
cadena.split(regexp): Devuelve un array en el que la cadena se ha separado según las coincidencias con la expresión regular.
Como se ha apuntado anteriormente, el objeto Object
es el que esta en un
nivel superior en la jerarquía, y del que derivan todos los demás objetos de
javascript.
Permite por lo tanto crear nuevas clases de objetos. En páginas posteriores veremos más detenidamente este objeto y cómo crear nuevos objetos.
Sus métodos y propiedades son heredados por el resto de los objetos javascript. Algunos de ellos ya los hemos visto antes y otros los explicaremos más detenidamente en páginas posteriores.
Los métodos son: toString()
; el cual devuelve siempre una cadena de
texto con el nombre del objeto (por ejemplo transforma true
en
"true"
); y valueOf()
: Dependiendo del objeto devuelve un
valor u otro, aunque casi siempre es el propio objeto.
Propiedades: Sus propiedades son constructor
y prototipe
,
las cuales las veremos más adelante cuando veamos con más detenimiento el objeto
Object
.
En la siguiente página veremos cómo construir nuevos objetos
Sugerencias:
aprendeweb@aprende-web.net. Envia un
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com