Archivo de la categoría: Javascript

JavaScript (abreviado comúnmente JS) es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico

Html, Lenguaje de programación, Java, Javascript, Programación, Página Web

Javascript

07 de abril de 2024 secarcam

Javascript

JavaScript, al igual que Java o VRML, surgió para extender las capacidades del lenguaje HTML y conseguir páginas web dinámicas

JavaScript no es un lenguaje de programación propiamente dicho

Es un lenguaje script u orientado a documento, como pueden ser los lenguajes de macros que tienen muchos procesadores de texto. Nunca podrás hacer un programa escrito en JavaScript, tan sólo podrás mejorar tu página Web insertando código javascript en la misma

Utilidad de JavaScript

JavaScript sirve principalmente para mejorar la gestión de la interfaz cliente / servidor. Un script JavaScript insertado en un documento HTML permite reconocer y tratar localmente, es decir, en el cliente, los eventos generados por el usuario. Estos eventos pueden ser el recorrido del propio documento HTML o la gestión de un formulario

Por ejemplo: cuando la página HTML es un formulario que permite acceder a una agenda telefónica, se puede insertar un script que verifique la validez de los parámetros proporcionados por el usuario. Esta prueba se efectúa localmente y no necesita un acceso a la red

Por otro lado, también se podrá utilizar JavaScript para efectuar varias opciones a la vez; por ejemplo, visualizar dentro de un documento HTML un vídeo o ejecutar un applet de Java…

Diferencias con Java

La principal diferencia entre JavaScript y Java, es que este último es un lenguaje de programación completo. Aunque comparten la misma sintaxis

JavaScript es un lenguaje que se integra directamente en las páginas HTML. Tiene como características principales las siguientes:

Es interpretado (no compilado) por el cliente, es decir, se ejecuta directamente el programa fuente, al contrario que en los lenguajes compilados, no se genera ni código objeto ni ejecutable para cada ordenador en el que se quiera ejecutar dicho programa
Está basado en objetos. No es, como Java, un lenguaje de programación orientada a objetos (OOP). JavaScript no emplea ni clases ni herencia, ni otras técnicas típicas de la OOP
Su código se integra en las páginas HTML, incluido en las propias páginas
No es necesario declarar los tipos de variables que van a utilizarse, JavaScript realiza una conversión automática de tipos
Las referencias a objetos se comprueban en tiempo de ejecución. Esto es consecuencia de que JavaScript no es un lenguaje compilado
No es posible trabajar directamente con ficheros, ni escribir automáticamente al disco duro. Por eso se dice que JavaScript es un lenguaje seguro para los usuarios de internet

Utilización de JavaScript en un documento HTML

La inserción de un documento HTML se realiza mediante la marca SCRIPT utilizando la sintaxis:

<script type="text/javascript" scr=url>
Código del script
</script>

Los atributos de esta marca son:

type=“text/javascript”
Precisa el lenguaje del script. Este atributo es obligatorio en ausencia del atributo SRC
src=url
El atributo SRC precisa el URL del script a insertar en el documento. Este atributo es opcional, porque el script puede insertarse directamente en un documento HTML

Podrá especificarse para insertar en un documento un script de un lenguaje determinado y que cuyo código fuente se encuentra en un archivo especificado en un determinado url. Puede sernos útil si queremos que varias de nuestras páginas web compartan los mismos scripts sin tener que insertarlos en cada una, repitiendo el código

A continuación enunciaremos algunos puntos a tener en cuenta respecto a la introducción de JavaScript en un documento HTML:

El script insertado mediante la marca SCRIPT es evaluado por el cliente tras la visualización de la página HTML. Las funciones definidas no se ejecutan inmediatamente, dependen de los eventos asociados a la página
La inserción del script mediante la marca SCRIPT puede colocarse en cualquier lugar del documento HTML pero se recomienda colocarla en la cabecera, es decir, en la zona definida por el HEAD. De este modo, el script está definido desde el principio del documento, lo que garantiza que éste sea visible en todo el documento
Si se definen, además del script mediante el atributo SRC, scripts en el propio documento, el cliente evaluará en primer lugar el insertado mediante el atributo SRC y seguidamente los incluidos en el documento
Los URL correspondientes a un JavaScript poseen generalmente la extensión .js
Es preferible delimitar los scripts insertados en un documento por comentarios HTML para asegurarse de que el contenido del script no aparecerá en los clientes que no reconozcan la marca SCRIPT. Por ejemplo:
```
<script type="text/javascript">
<-- Disimula el contenido del script para navegadores no compatibles
Código del script
//-->
</script>
```
El lenguaje JavaScript no es case sensitive, es decir, no distingue mayúsculas de minúsculas salvo en las cadenas de caracteres literales

Por último, comentar otra forma de introducir scripts en documentos HTML, y es incluir estos script como controladores de eventos de algunas marcas, como pueden ser la marcas de imágenes, anclas, links, botones, etc. Veamos un ejemplo:

<a href="https://secarcam.webcindario.com">
Ir al índice
</a>

Ir al índice

Como puede verse, dentro de esta marca, como atributo de esta, se pone un controlador de eventos y después del signo igual y entre comillas se incluye el código de JavaScript. Ahora bien, también es posible llamar a una función desde el HEAD del documento. Se recomienda esta segunda opción ya que es una manera más limpia y clara de escribir páginas. Se conseguiría el mismo resultado que en el ejemplo anterior:

<head>
<!-- Inserted by miarroba -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<!-- Inserted by miarroba -->

<script type="text/javascript">
<-- Disimula el contenido del script para navegadores incompatibles
function alerta(){
    alert("Vamos a la página inicial");
}
//-->
</script>

...
</head>

<body>
<a href="/" OnClick="alerta()">
Ir al índice
</a>
...
</body>

Las versiones de JavaScript

El lenguaje fue inventado por Brendan Eich en la empresa Netscape Communications. Apareció por primera vez en el Netscape Navigator 2.0. La cual incluía JavaScript bajo el nombre de Mocha, cuando apareció esta versión de Navigator se le llamaba LiveScript. Finalmente fue rebautizado como JavaScript en un anuncio conjunto entre Sun Microsystems y Netscape, el 4 de diciembre de 1995

Tradicionalmente, se venía utilizando en páginas web HTML, para realizar tareas y operaciones en el marco de la aplicación únicamente cliente, sin acceso a funciones del servidor. JavaScript se ejecutaba en el navegador del usuario al mismo tiempo que las sentencias iban descargándose junto con el código HTML. Lo que quería Netscape es que JavaScript fuera un lenguaje de guiones, fácil de usar y que cualquier persona pudiera utilizarlo. Después de 2 años JavaScript se convirtió en una de las herramientas más utilizadas por los desarrolladores web, utilizándose casi en el 90% de los desarrollos web, incluso más que Java y Activex

Netscape introdujo una implementación de script del lado del servidor con Netscape Enterprise Server, lanzada en diciembre de 1994 (poco después del lanzamiento de JavaScript para navegadores web)

En el año de 1996 Microsoft empezó a mostrar gran interés en competir con JavaScript por lo que lanzó el lenguaje llamado Jscript, que era la implementación de ECMAScript, muy similar al JavaScript de Netscape, pero con ciertas diferencias en el modelo de objetos del navegador que hacian a ambas versiones incompatibles. Pero la versión 4.0 del Internet Explorer soportaba sin ningún problema, la versión 1.1 de JavaScript. Sin embargo, Jscript no pudo competir directamente con Javascript

A mediados de 1997, Netscape promocionó JavaScript y lanzó la versión 1.2. Esta nueva versión incluía nuevos componentes que daban gran potencial al lenguaje, pero lamentablemente esta versión solo funcionaba en la última versión del Navigator. Los autores propusieron que fuera adoptado como estándar de «the European Computer Manufacturer’s Association» (ECMA, con la implementación ECMAScript), que a pesar de su nombre no era europeo sino internacional, con sede en Ginebra. Poco después también fue propuesto como un estándar ISO

La versión 1.3 fue una pequeña revisión de la 1.2, que fue incluida en la versión 4.07 del Netscape Navigator

Para evitar estas incompatibilidades, el World Wide Web Consortium diseñó el estándar Document Object Model (DOM, ó en castellano, Modelo de Objetos del Documento), que incorporan Konqueror, las versiones 6 de Internet Explorer y Netscape Navigator, Opera versión 7, y Mozilla desde su primera versión

A partir de mediados de la década de los 2000, ha habido una proliferación de implementaciones de JavaScript para el lado servidor. Node.js es uno de los notables ejemplos de JavaScript en el lado del servidor, siendo usado en proyectos importantes

La llegada de Ajax devolvió a JavaScript a la fama y atrajo la atención de muchos programadores. Como resultado de esto hubo una proliferación de un conjunto de frameworks y librerías de ámbito general, mejorando las prácticas de programación con JavaScript, y aumentado el uso de JavaScript fuera de los navegadores web, con la proliferación de entornos JavaScript del lado del servidor. En enero de 2009, el proyecto CommonJS fue inaugurado con el objetivo de especificar una librería para uso de tareas comunes principalmente para el desarrollo fuera del navegador web

En junio de 2015 se cerró y publicó el estándar ECMAScript 6 (última versión hasta la fecha) con un soporte irregular entre navegadores y que dota a JavaScript de características avanzadas que se echaban de menos y que son de uso habitual en otros lenguajes como, por ejemplo, módulos para organización del código, verdaderas clases para programación orientada a objetos, expresiones de fecha, iteradores, generadores o promesas para programación asíncrona

Los comentarios en JavaScript

Los comentarios en el código permiten insertar observaciones del autor para describir las distintas partes del programa. El intérprete de JavaScript los ignora y por ello poseen una sintaxis particular

Se distinguen los comentarios en una sola línea, precedidos por la barra oblicua doble // y los comentarios en varias líneas delimitados por los símbolos /* y por */. Por ejemplo:

// esto es un comentario

/* esto es un comentario de varias líneas con
una longitud cualquiera */

Identificadores y palabras reservadas

Conocer cuál es la sintaxis de los identificadores y cuales son las palabras reservadas es algo necesario antes de empezar a escribir un programa en un lenguaje de programación determinado

Los identificadores de un lenguaje son la ristra de caracteres que le asignamos a los nombres de variables, constantes, funciones, objetos, etc…, que nosotros definimos en dicho lenguaje, estos son necesarios para poder invocar a dichos elementos en lugares posteriores a su definición

Los identificadores deben seguir las siguientes reglas:

El identificador debe empezar por una letra o por el carácter ‘_’
Los caracteres siguientes, además de letras o el carácter ‘_’, pueden ser cifras

Hay que tener en cuenta que el uso de mayúsculas o minúsculas no es importante, porque JavaScript no diferencia de los nombres de mayúsculas o minúsculas en los identificadores. Veamos algunos ejemplos de nombres de variables:

<script type="text/javascript">
var Num_linea=0;
var aux1="";
var _exit=false;
</script>

Primeramente decir que las palabras reservadas son palabras especiales que se utilizan para aumentar la legibilidad y separar las entidades sintácticas. Estas palabras no pueden usarse como identificadores

A continuación veremos un cuadro en el que se muestran todas las palabras reservadas existentes en JavaScript, estas palabras tienen o tendrán un significado especial dentro del lenguaje:

Palabras reservadas

Abstract

Boolean

Break

Byte

Case

Cath

Char

Class

Const

Continue

Default

Double

Else

Extends

False

Final

Finally

Float

For

Function

Goto

Implements

Import

Instaceof

Int

Interface

Long

Native

New

Null

Package

Private

Protected

Public

Return

Short

Static

Super

Switch

Synchronized

This

Throw

Throws

Transient

True

Try

Var

Void

While

With

Html, Javascript, Programación, Página Web

Operadores en Javascript

07 de abril de 2024 secarcam

Operadores en Javascript

JavaScript posee una amplia variedad de operadores

Estos operadores los podemos distinguir en dos grupos: binarios, que actúan sobre dos operandos y unarios, que sólo requieren un operando

Así, su sintaxis general es:

operando1 operador_Binario operando2

operando1 operador_unario

operador_unario operando1

Operadores aritméticos

JavaScript suministra las operaciones básicas con el único añadido del operador que devuelve el resto de la división entre el operador izquierdo y el derecho. Se carece de operadores más complejos, aunque el objeto Math definido en JavaScript posee dichas tareas

Operadores aritméticos
+	Suma
–	Resta
*	Multiplicación
/	División
%	Resto

Nota El operador + aplicado a strings, concatena ambas strings en una sola

Operadores de incremento (++) y decremento (- -)

Estos operadores son unarios y realizan el autoincremento y el autodecremento a la variable que se les aplica. Además de modificar la variable, devuelven el valor de la misma

El operador de incremento o decremento puede ir delante p detrás de la variable teniendo diferente significado

Si el operador es ++ se sitúa después de la variable se denomina post-incremento, haciendo que primero tome el valor y después se incrementa en una unidad la variable

n = k++; // El valor de k se asigna a n y luego se incrementa k

Si el operador ++ se sitúa antes de la variable se denomina pre-incremento y hace que primero se incremente en una unidad la variable y luego se tome el valor

n = ++k; // Primero se incrementa k y luego se asigna a n

Si el operador es – – se sitúa después de la variable se denomina post-decremento, haciendo que primero tome el valor y después se decrementa en una unidad la variable

n = k--; // El valor de k se asigna a n y luego se decrementa k

Si el operador – – se sitúa antes de la variable se denomina pre-decremento y hace que primero se decremente en una unidad la variable y luego se tome el valor

n = --k; // Primero se decrementa k y luego se asigna a n

Operadores relacionales

Se emplean típicamente en las expresiones condicionales. Los operadores relacionales devuelven valores booleanos. Los operandos pueden ser tanto numéricos como strings

Operadores relacionales
>	Mayor que
<	Menor que
> =	Mayor o igual que
< =	Menor o igual que
! =	Distinto que
= =	Igual que

Operadores lógicos

Los operandos lógicos está relacionados con los relacionales ya que normalmente los operandos que usan son resultado de expresiones relacionales. Los valores resultantes son booleanos

Operadores lógicos
& &	AND
\| \|	OR
!	NOT

Operadores bit a bit

La forma de trabajar de estos operadores es convertir a binario los operandos y luego operar con ellos bit a bit

Operadores bit a bit
&	AND
\|	OR
^	XOR
<<	Propagación a la izquierda Desplaza el valor hacia la izquierda introduciendo ceros, si se sale de rango se pierden valores
>>	Propagación a la derecha Desplaza el valor hacia la derecha introduciendo por la izquierda el bit de signo y eliminando los valores que se salgan por la derecha
>>>	Zero fill, propagación a la derecha Similar a << pero hacia la derecha. No introduce bit de signo

Nota Los operadores de propagación toman dos operandos: el primero es la variable a propagar y el segundo es el número de posiciones a propagar

Operadores de asignación

La asignación también es un operador que devuelve la variable modificada. El operador de asignación en JavaScript es =. Los operadores de asignación que se muestran a continuación no son sino abreviaturas que hacen más cómoda y simples las expresiones, aunque a veces sean más ilegibles

Operadores de asignación
Operador	Expresión	Equivalencia
=	A=B=C;	A=C; B=C;
+ =	A + = 4;	A = A + 4;
– =	A – = 3 * B;	A = A – (3 * B);
* =	A * = 2;	A = A * 2;
/ =	A / = 35 + B;	A = A / (35 + B);
>> =	A >> = 1;	A = A >> 1;
<< =	A << = B;	A = A << B;
>>> =	A >>> = B + 1;	A = A >>> (B + 1);
& =	A & = (C + = 3);	C = C +3; A = A & C;
^ =	A ^ = 2;	A = A ^ 2;
\| =	A \| = C;	A = A \| C;

Otros operadores

Operador de selección

Este operador se utiliza para ejecutar una operación u otra dependiendo de la condición. El formato es el siguiente:

Condición ? Exp1 : Exp2

Si se cumple la condición se evalúa y se devuelve la expresión Exp1 si no la Exp2. Podemos poner un sólo valor. Ejemplo:

i = (x!=y)?6:(k+1)

Operador new

Este operador se va a utilizar para crear una instancia de un tipo de objetos previamente definido. La sintaxis a seguir es la siguiente:

variableObjeto = new tipoDeObjeto(parámetro 1, parámetro 2, …)

Estos parámetros son los que se le pasan al constructor de dicho objeto en cuestión

Operador typeof

Este operador aplicado a una variable devuelve el tipo de objeto al que pertenece el dato contenido por dicha variable. Su sintaxis es:

typeof(variable)

Preferencia

La preferencia de los operadores va a determinar el orden en que se ejecuten en una expresión determinada. Usando paréntesis controlaremos que las operaciones se lleven a cabo según nosotros queramos. En JavaScript la preferencia de los operadores de mayor a menor es la siguiente:

Preferencia
Negación / (in / de) cremento	!	++	—
Mul / Div / Resto	*	/	%
Suma / Resta	+	–
Propagación	<<	>>	>>>
Relacionales	<	< =	>	> =
Igualdad	= =	!=
AND bit a bit	&
XOR bit a bit	^
OR bit a bit	\|
AND lógica	&&
OR lógica	\| \|
Otros operadores	?:	New	Typeof
Asignación	=	+ =	– =	* =	/ =	>> =	<< =	>>> =	& =	^ =	\| =

Html, Javascript, Programación, Página Web

Tipos de datos en Javascript

07 de abril de 2024 secarcam

Tipos de datos en Javascript

Los tipos en Javascript son una representación de los datos, ya que no requiere que las variables declaren su tipo, porque todos los tipos se convierten de forma automática

Tipo booleano

El tipo booleano simplemente distingue entre dos estados, un estado de éxito o de activado, valor verdadero, true, y un estado de fracaso o de desactivado, valor falso, false

Tipos numéricos

Los tipos numéricos los podemos dividir en reales y enteros

Tipo numérico entero

Decimal
enteros en base 10

Tanto positivos como negativos
Hexadecimal
enteros en base 16

Se coloca antes del número en base 16 0x ó 0X
Octal
enteros en base 8

Colocamos un cero antes de dicho número en octal

Tipo numérico real

Los reales se componen de una parte entera y otra fraccionaria separada por un punto de la anterior

La parte fraccionaria puede estar compuesta por un indicador de exponente E o e seguido de un número entero que indica el valor del exponente

var1 = 20; //decimal
var2 = 0x14; //hexadecimal
var3 = 024; //octal

//real
var4 = 25.478;
var5 = 2.3E45;
var6 = 5.6E-2;
var7 = -3.789;

Tipo string

Un string es una cadena de caracteres delimitadas por comillas

Las comillas serán simples o dobles atendiendo a una determinada regla

Por defecto se usarán comillas dobles ("), pero si alguna sentencia a de ir incluida entre dichas comillas, si esa sentencia contiene un string o a su vez otra sentencia que también deba ir delimitada por dichas comillas, estas comillas serán entonces comillas simples (‘)

confirm("¿Estas seguro?");
OnMouseOver = "confirm('¿Estas seguro?');

Por otro lado, hay que tener en cuenta la escritura de caracteres especiales en lo que denominamos secuencias de escape

La secuencia de escape comienza siempre con el carácter \ y a continuación se escribe otro carácter que representa el código especial o el número en octal o hexadecimal de su código ASCII

Las secuencias de escape representan un único carácter en las strings en donde aparecen

Código	Descripción
a	Sonido
b	Blanco
f	Salto de línea
n	Nueva línea
r	Retorno de carro
v	Tabulador vertical
\	Blackslash "\"
‘	Comilla simple
"	Comilla doble
Ooo	Ascii en octal
Xhh	Ascii en hexadecimal
t	Tabulador horizontal

Arrays

Podemos crear arrays a los que le daremos un nombre y a los que accederemos con un índice que comenzará desde el elemento número 1 (no desde el 0 como en Java o en C / C++)

En los arrays al igual que con las variables no existen tipos predeterminados. Para crear un array es necesario definir una función como la que veremos a continuación:

function CreaArray(n){
    this.length = n;
    for (var i=1; i<=n; i++){
        this[i] = 0;
    }
    return this;
}

Comentar sobre la función que la palabra reservada this hace referencia a la variable a actual, es decir, a la variable que contendrá el array

Por otro lado, observar que los array tienen una propiedad length que nos muestra la longitud de dicho array

Por último mostrar el uso de dicha función:

mi_array = new CreaArray (2);
// new: Creamos una instancia del objeto, en este caso un array
// Llenamos el array
mi_array[1] = "Pepe";
mi_array[2] = 35;
longitud = mi_array.length; //longitud será 2

Objetos

Los objetos se componen de un conjunto de valores, propiedades y un conjunto de métodos aplicados a esos valores

Son estos métodos los que nos permiten modificar el estado de dicho objeto, es decir, el valor de sus propiedades

En JavaScript existen objetos predefinidos

A parte, el programador también puede crear sus propios objetos

Para hacer uso de las propiedades de un objeto basta con utilizar la siguiente notación:

mi_objeto.propiedad

Esto se verá con más claridad en el siguiente ejemplo, en el cual tenemos un objeto Universitario en el que tenemos las propiedades: Nombre, Apellido, Edad y Facultad. Suponiendo que tenemos una variable Uni1 que contiene en un momento determinado un objeto Universitario:

Uni1.Nombre = "Pedro";
Uni1.Apellido = "Navarro";
Uni1.Edad = 13;
Uni1.Facultad = "Telecomunicaciones";

Pero no sólo podemos acceder a las propiedades de un objeto mediante la notación expuesta anteriormente, ya que, existe una relación entre los objetos y los arrays, puesto que podemos acceder a un objeto como si este fuera un array y sus elementos fueran los propiedades de dicho objeto en el orden en que se definieron

Uni1[1] = "Pedro";
Uni1[2] = "Navarro";
Uni1[3] = 13;
Uni1[4] = "Telecomunicaciones";

Uni1["Nombre"] = "Pedro";
Uni1["Apellido"] = "Navarro";
Uni1["Edad"] = 13;
Uni1["Facultad"] = "Telecomunicaciones";

Este tipo de vectores se denominan arrays asociativos

Un método es una función asignada a un objeto. Así para asignar una función como método de un objeto se utiliza la siguiente sintaxis:

Podemos observar que el nombre del método es la manera en la que queremos nombrar a la función dentro del objeto

Un método puede ser llamado en un contexto mediante la sintaxis:

Objeto.nombreDelMétodo(parámetros);

La palabra reservada this nos permite referenciar al objeto actual

Por ejemplo, supongamos que la función validate permite validar las propiedades de un objeto mediante un mínimo y un máximo asociados; tendremos:

function validate(obj, lowval, hival){
    if((obj.value < lowval) || (obj.value > hival))
        alert("Valor no válido");
}

Se podrá llamar entonces a la función validate a cambio de los valores de un formulario mediante la palabra reservada this y el atributo OnChange que permite detectar los cambios de valores

Esto se hace mediante la marca HTML y el evento:

<input type = "text" name = "edad" OnChange = "validate(this,18,99)">

De manera general, la palabra this se refiere al objeto actual

El cliente y el servidor tienen un conjunto de objetos predefinidos que pueden ser completados mediante nuevos objetos

La creación de un objeto se hace en dos etapas:

Definir el objeto mediante una función
Crear un objeto mediante la palabra reservada new

Para definir un objeto, se creará una función que permita precisar su nombre, sus funciones y sus métodos asociados

Por ejemplo, si se quiere crear un objeto universitario cuyas propiedades serían nombre, apellido, edad y dni, se definirá la función genérica siguiente:

function Univers(nom, apell, edad, dni){
    this.nom = nom;
    this.apell = apell;
    this.edad = edad;
    this.dni = dni;
}  // this: propiedad del objeto a partir de los argumentos

//La instancia del objeto la crearemos de la siguiente forma:
alumno = new univers("Juan","Delgado",12,44565789);

Las propiedades de un objeto pueden describirse mediante otros objetos

function Nota_M(curso1, curso2, curso3, final){
    this.curso1 = curso1;
    this.curso2 = curso2;
    this.curso3 = curso3;
    this.final = final;
}

Hacemos que el objeto universitario tenga un propiedad del objeto Nota_Media por tanto:

function Univers(nom, apell, edad, dni, exp){
    this.nombre = nom;
    this.apellido = apell;
    this.edad = edad;
    this.dni = dni;
    this.expediente = exp;
}

Por tanto, para acceder a la nota final:

alumno.expediante.final

Cuando se define un objeto, es posible enriquecer su descripción mediante nuevas propiedades

alumno.dni = 44567234;

Ahora la propiedad dni pertenece a la instancia del objeto contenido en alumno

Esta modificación no afectará a los otros objetos del tipo universitario, ya que para añadir una propiedad a un tipo de objeto esta debe figurar en la definición del mismo

La definición de métodos asociados a un objeto puede precisarse en la definición del objeto

Por ejemplo, para el objeto universitario definimos una función que muestre el nombre, apellidos, dni y facultad de un alumno

function Datos(){
    var cadena = this.nombre + " " + this.apellido +
    " " + this.edad + " " + this.dni +
    " " + this.expediente.curso1 + " " +
    this.expediente.curso2 + " " + this.expediente.curso3 +
    " " + this.expediente.final;
    alert(cadena);
}  //this: objeto al que pertenece el método

Esta función se convierte en un método asociado al tipo realizando en su definición lo siguiente:

function Univers(nom, apell, edad, dni, exp){
    this.nombre = nom;
    this.apellido = apell;
    this.edad = edad;
    this.expediente = exp;
    this.dni = dni;
    this.Datos = Datos;
}

Su forma de uso será:

alumno.Datos();

En el siguiente ejemplo se muestra el funcionamiento del tipo universitario que hemos creado

Para ello creamos el siguiente formulario:

<center>
<form id="form1" name="form1">
<table border="1" style="font-size: 7.5px;">
    <thead>
         <tr>
             <th colspan="4"><center>Nota media de la etapa académica</center></th>
         </tr>
     </thead>
        <td><label for="nombre"><strong>Nombre:</strong></label><input type="text" id="nombre" name="nombre" value="ninguno" size="15" /></td>
        <td><label for="apellido"><strong>Primer Apellido:</strong></label><input  type="text" id="apellido" name="apellido" value="ninguno" size="15" /></td>
        <td><label for="edad"><strong>Edad:</strong></label><input type="text" id="edad" name="edad" value="ninguno" size="15" /></td>
        <td><label for="DNI"><strong>DNI:</strong></label><input type="text" id="DNI" name="DNI" value="ninguno" size="15" /></td>
    </tr>
    <tr>        
        <td><label for="nota1"><strong>Primer curso:</strong></label><input type="text" id="nota1" name="nota1" value="0" size="4" /></td>
        <td><label for="nota2"><strong>Segundo curso:</strong></label><input type="text" id="nota2" name="nota2" value="0" size="4" /></td>
        <td><label for="nota3"><strong>Tercer curso:</strong></label><input type="text" id="nota3" name="nota3" value="0" size="4" /></td>
        <td><label for="final"><strong>Nota final:</strong></label><input type="text" id="final" name="final" value="0" size="4" /></td>
    </tr>  
</table>

<input type="button" value=" Ver datos" onClick="Mostrar_Univers(this.form)"></input>
</form>
</center>

La función Mostrar_Univers(form) se define como sigue:

function Mostrar_Univers(form){
    var notas = new Nota_M(form.nota1.value, form.nota2.value,
    form.nota3.value, form.final.value);
    var alumno = new Univers(form.nombre.value, form.apellido.value,
    form.edad.value, form.DNI.value, notas);
    alumno.Datos();
}

Nota media de la etapa académica
Nombre:	Primer Apellido:	Edad:	DNI:
Primer curso:	Segundo curso:	Tercer curso:	Nota final:

Nota No se han comprobado si los datos que se insertan en el formulario son "correctos", es decir, si las notas están entre 0 y 10, si los nombres y apellidos se componen sólo de letras o la edad sea numérica

Valor nulo

En JavaScript a las variables se les puede asignar un valor que indica el valor vacío, este valor es el valor null

La conversión de tipos de datos

Antes que nada, recordar que JavaScript no necesita declaración de tipos

El contenido de la variable se convertirá automáticamente en el transcurso del programa según su uso

El esquema de conversión del tipo se basa en el principio siguiente: el tipo asociado corresponde al del operando de la izquierda

Esto se debe a que la evaluación se realiza de izquierda a derecha

Por ejemplo, supongamos la definición de las variables siguientes:

var una_string = "7";
var un_numero = 42;

Si evaluamos las siguientes expresiones

x = una_string + un_numero;
y = un_numero + una_string;

La primera expresión convertirá la variable un_numero en una cadena de caracteres porque el operando de la izquierda una_string es una cadena de caracteres

Esta expresión concatena las dos cadenas de caracteres y el resultado de x es: "742"

Por el contrario, la segunda expresión convierte la cadena una_string en un valor numérico porque el operando de la izquierda un_numero, es como su propio nombre indica, un número

Esta segunda expresión suma los dos números y el resultado de y es: 49

La conversión de tipos no puede hacerse en todos los casos posibles: ciertas cadenas de caracteres no pueden convertirse en número

Tales conversiones generan un error

Por ejemplo:

var una_string = "Pepe";
var un_numero = 578;
y = un_numero + una_string; // ERROR: Pepe no puede convertirse en número

Tabla que resume la conversión de tipos en JavaScript:

Tipo	Función	Objeto	Número	Booleano	String
Función	—	Función	Error	Error	Descompila
Objeto	Error	—	Error	True	ToString
Objeto nulo	FunObj ok	—	0	False	«null»
Número	Error	Número	—	True	ToString
Número = 0	Error	Null	—	False	«0»
Booleano = true	Error	Booleano	1	—	«true»
Booleano = false	Error	Booleano	0	—	«false»
String	Comilla simple	String	Numstr ok	True	—
String nula	Error	String	Error	False	—

Html, Lenguaje de programación, Javascript, Página Web, Programación

Estructuras de control en Javascript

07 de abril de 2024 secarcam

Estructuras de control en Javascript

Para las estructuras de control, JavaScript posee las sentencias de control típicas de los lenguajes de alto nivel

Declaración de variables

A las variables en JavaScript no se les asigna un tipo predefinido

En JavaScript el tipo de las variables depende del valor que contengan las mismas en cada momento

Por tanto se realiza una conversión automática de tipos

JavaScript reconoce los siguientes tipos de valores:

Números
enteros y reales
Valores booleanos
true y false
Strings
El valor null
Objetos
Creados por el programador o predefinidos por el lenguaje

Dado que no existen tipos de variables a priori, no hemos de especificar el tipo de variable cuando la declaramos

La declaración de variables se hace anteponiendo la palabra reservada var al nombre de la variable

Es posible asignarle el valor cuando la declaramos

var mi_variable = 124;

La sentencia if

La sentencia if tiene la forma:

if (Condición) {
    Instrucción 1 o bloque de instrucciones;
}
[else{
    Instrucción 2 o bloque de instrucciones;
}]

Los paréntesis asociados que delimitan la condición no son opcionales

En caso de que la condición sea verdadera se ejecutará la instrucción 1; en caso contrario se ejecuta si existe la instrucción 2

El uso de la sentencia else es opcional, por eso en la definición se han utilizado los corchetes

Si se omite, sólo se tendrá en cuenta el bloque de instrucciones cuando la condición sea verdadera

Un bloque de instrucciones es un conjunto de instrucciones delimitadas por llaves

if (Condición) {
    Instrucción 1;
    Instrucción 2;
    ...
    Instrucción N;
}

Las llaves después de la sentencia if no son obligatorias

Si se omiten y la condición era verdadera, se ejecutará la siguiente instrucción

En caso contrario, se ejecutará la subsiguiente instrucción, de forma independiente al estado de la condición

De este modo, la omisión de las llaves después de la sentencia if nos permitirá escribirlo todo en una única línea terminada en ;

if (Condición) Instrucción del if;
Subsiguiente Instrucción;

La sentencia else if

También podemos utilizar sentencias if anidades mediante la sentencia else if

Las sentencias else if funcionan igual que una sentencia if

Pero sólo se ejecutarán en caso de que la condición de la sentencia if fuese falsa

if (Condición) {
    Bloque de instrucciones del if;
}
[else if (Condición) {
    Bloque de instrucciones del else if;
}]

La sentencia switch

Hace que se seleccione un grupo de sentencias entre varias posibles

Es una alternativa al uso de sentencias else if anidadas

Su sintaxis es:

switch (Expresión) {
    case Valor 1:
        Instrucción o bloque de instrucciones;
        [break;]
    case Valor 2:
        Instrucción o bloque de instrucciones;
        [break;]
    case Valor 3:
        Instrucción o bloque de instrucciones;
        [break;]
    ...
    case Valor N:
        Instrucción o bloque de instrucciones;
        [break;]
    [default:]
        Instrucción o bloque de instrucciones;
}

La expresión entre paréntesis del switch debe ser entera

Su resultado se comparará con los distintos valores del case

Si coincide con uno de ellos se pasará a la instrucción siguiente al case con dicho valor y se seguirán ejecutando las instrucciones consecutivas hasta encontrar una instrucción break o alcanzar las llaves de cierre del switch

En caso de que el resultado de la expresión no coincida con ningún valor se pasará la ejecución a la instrucción siguiente de la etiqueta default, si la hubiera, y se continuará como un case

Los valores en los case pueden ser una expresión constante

No puede haber dos case con el mismo valor

La sentencia while

La sentencia while tiene la forma

while (Condición) {
    Instrucción o bloque de instrucciones;
}

Los paréntesis no son opcionales

Si se cumple la condición, se ejecuta la instrucción o el bloque de instrucciones y se repite el proceso hasta que deje de cumplirse la condición

La sentencia do

La sentencia do tiene la forma

do {
    Instrucción o bloque de instrucciones;
while (Condición);

Es muy similar a la sentencia while, excepto que la condición va después de la instrucción o bloque de instrucciones

Con lo que al menos se ejecutan una vez aunque la condición sea falsa

La sentencia for

En cuando a dicha sentencia, en JavaScript podemos distinguir dos variantes:

El bucle for "clásico"
El bucle for / in

El bucle for "clásico"

Este bucle, tiene una sintaxis muy parecida a la de C / C++

for ([inicialización]; [condición]; [expresión]) {
    Instrucción o bloque de instrucciones;
}

En esta sintaxis:

Inicialización crea la variable contador y le da un valor inicial

Condición se debe cumplir para que el bucle se ejecute

Depende de la variable índice

Expresión actualiza el valor de la variable índice

El equivalente de esta expresión con while es:

inicialización;

while (condición) {
    Instrucción 1;
    Instrucción 2;
    ...
    Instrucción N;
    expresión;
}

El bucle for / in

Este bucle, tiene una sintaxis muy parecida al for-each de Java

Itera una variable var sobre todas las propiedades de un objeto obj que se le pasa

Así para cada valor de var se ejecutaran las sentencias del bucle

Por lo tanto, el bucle tendrá tantas iteraciones como propiedades el objeto y en cada iteración la variable tendrá el valor de la propiedad del objeto correspondiente con dicha iteración

Su sintaxis es:

for (var in obj) {
    Instrucción o bloque de instrucciones;
}

La sentencia break

La sentencia break se puede colocar dentro de un bucle o bucles anidados

Cuando se ejecuta la sentencia break se abandona el bucle más interno

A todos los efectos la sentencia break actúa como un salto a la instrucción siguiente al bucle en el que se ejecuta

La sentencia continue

La sentencia continue, no abandona el bucle si no que hace que se ejecute la siguiente iteración

En el bucle while la ejecución del continue hace que el flujo del programa salte a la condición

En el bucle for la ejecución del continue hace que se ejecute la expresión de incremento, para después continuar normalmente con la condición

Es decir, la ejecución del continue evita que se ejecute el resto del cuerpo del bucle

Html, Lenguaje de programación, Javascript, Programación, Página Web

Funciones en Javascript

07 de abril de 2024 secarcam

Funciones

Para definir funciones disponemos de la instrucción function

Después de esta palabra reservada se coloca el nombre de la función seguido de una lista de argumentos delimitados por paréntesis y separados por comas

function nombre(param1, param2,..., paramn) {
    instrucciones en JavaScript;
}

La sentencia return

La sentencia return es la que permite devolver el resultado de una función

function Area(l) {
    return l * l;
}

En el ejemplo, se muestra una función que devuelve el área de un cuadrado de lado l

Propiedades de las funciones

JavaScript asocia a cada función dos propiedades:

arguments
permite la gestión de los parámetros opcionales
caller
identifica la función que hizo la llamada

La propiedad arguments

Es un array que contiene los parámetros que le son pasados a la función

function Suma(x) {
    var sumandos = Suma.arguments;
    var num_op = Suma.arguments.length;
    var resultado = 0;
    for (var i=0; i<num_op; i++) {
       resultado += sumandos[i];
    }
    return resultado;
}

En el ejemplo hemos definido la función Suma que permite calcular la suma de los números pasados como argumentos

Así, Suma(4,5,7) devuelve 16 y Suma(56) devuelve 56

La propiedad caller

Muestra el nombre de la función que llama, por lo tanto, esta propiedad devolverá una cadena de caracteres

Consideraciones a tener en cuenta

Antes de empezar a trabajar con funciones es necesario tener en cuenta los siguientes puntos:

El lenguaje JavaScript no permite las definiciones anidadas de funciones
El paso de parámetros se realiza por valor

Es decir, si una función modifica el contenido de sus argumentos, esta modificación es local y no repercute ni globalmente ni a la función hizo la llamada

Funciones predefinidas por el lenguaje

Función eval

Tiene como argumento una expresión y devuelve el valor de la misma

Esta función resulta útil para evaluar una cadena de caracteres que representa una expresión numérica

La edición efectuada mediante un campo de formulario es una cadena de caracteres que a veces es necesario convertir en valor numérico

<script type="text/javascript">
function calcula(obj) {
    obj.result.value = eval(obj.expr.value);
}
</script>

<center><form name="evalua">
    <table border="1" style="font-size: 10px;">
        <tr>
            <td><label for="expr"><strong>Introducir expresión:</strong></label><input type="text" name="expr" size=20 value="0" /></td>   
            <td><label for="result"><strong>Resultado</strong></label><input type="text" name="result" size=20 /></td>    
        </tr>
     </table>
     <input type="button" value="evalua" onclick="calcula(this.form)"></input>
</form></center>

El ejemplo siguiente ilustra cómo permitiendo al usuario introducir una expresión numérica puede visualizarla como el valor de la expresión

Sino ha introducido nada, visualiza undefined y sino es una expresión numérica, no realiza cambios en la visualización

Funciones escape y unescape

Estas dos funciones permiten codificar cadenas de caracteres en formato URL

Esta codificación es necesaria en la creación automática de enlaces de hipertexto o en la definición de propiedades persistentes como los Cookies

<script type="text/javascript">
    escape("#"); // devuelve %23
    unescape("%23"); // devuelve #
</script>

<center><form name="escape_unescape">
    <table border="1" style="font-size: 7.5px;">
        <tr>
          <td><label for="char">Introducir carácter en formato URL o normal:</label><input name="char" type="text" value="%23" size="5" /></td>
        </tr>
        <tr>
             <td><input name="codificacion" type="radio" onclick="this.form.char.value=escape(this.form.char.value)" value="normal" checked="checked"></input><label for="codificacion">formato estándar a URL<label/></td>
        </tr>
        <tr>
             <td><input type="radio" name="codificacion" value="URL" onclick="this.form.char.value=unescape(this.form.char.value)"></input><label for="codificacion">formato URL a estándar</label></td>
        </tr>
     </table>
</form></center>

Función isNaN

Función que comprueba si el valor pasado por parámetros es numérico o no

El resultado de esta función es un booleano

Es decir, evalúa un argumento para ver si es NaN: (Not a Number, No es un número)

<script type="text/javascript">
//isNaN(valor de entrada)

function Comprueba(form) {
    var number = parseFloat(form.valor.value);
    if (isNaN(number)==true) {
        alert("No es un número");
    }else{
        form.valor.value = number;
        alert("Es un número");
    }
}
</script>

<center><form name="isNaN">
    <table border="1" style="font-size: 10px;">
        <tr>
            <td><label for="valor"><strong>Introducir un valor numérico:</strong></label><input type="text" name="valor" value="0" /></td>   
        </tr>
     </table>
     <input type="button" value=" Comprobar " onClick="Comprueba(this.form)"></input>
</form></center>

Función parseFloat

Convierte una cadena de caracteres a un número en punto flotante

Si se encuentra un carácter que no sean número, el signo ‘+’, el ‘-‘ o un exponente, devuelve el valor encontrado hasta ese punto

Del mismo modo, si el primer carácter no se puede convertir a número devolverá cero

<script type="text/javascript">
    //parseFloat(cadena de caracteres)
</script>

<center><form name="real">
    <table border="1" style="font-size: 10px;">
        <tr>
            <td><label for="float"><strong>Convierte a real:</strong></label><input type="text" name="float" value="0.0" /></td>
        </tr>
     </table>
     <input type="button" value="Convierte" onclick="this.form.float.value=parseFloat(this.form.float.value)"></input>
</form></center>

Función parseInt

Convierte una cadena de caracteres a un número entero con una base especificada

La base puede ser 8, 10 ó 16

Si se encuentra un carácter que no sean número, el signo ‘+’, el ‘-‘ o un exponente, devuelve el valor encontrado hasta ese punto

Del mismo modo, si el primer carácter no se puede convertir a número devolverá cero

<script type="text/javascript">
//parseInt(cadena, base) base es opcional

function convierte(obj, base) {
    obj.valor.value = parseInt(obj.int.value, base);
}
</script>

<center><form name="integer">
    <table border="1" style="font-size: 10px;">
        <tr>
            <td><label for="int"><strong>Introducir entero:</strong></label><input type="text" name="int" value="15" /></td>   
            <td><label for="valor"><strong>Resultado</strong></label><input type="text" name="valor" /></td>    
        </tr>
        <tr>
             <td><input type="radio" name="conversion" value="decimal" onclick="convierte(this.form, 10)" /><label for="conversion">Expresar entero en decimal<label/></td>
        </tr>
        <tr>
             <td><input type="radio" name="conversion" value="hexadecimal" onclick="convierte(this.form, 16)" /><label for="conversion">Expresar entero en hexadecimal</label></td>
        </tr>
        <tr>
             <td><input type="radio" name="conversion" value="octal" onclick="convierte(this.form, 8)" /><label for="conversion">Expresar entero en octal</label></td>
        </tr>
     </table>
</form></center>

Html, jQuery, Lenguaje de programación, Javascript, Página Web, Programación

jQuery

07 de abril de 2024 secarcam

jQuery

jQuery es una librería de software libre escrita en Javascript, con Licencia MIT y Pública General de GNU v2, permite su uso en proyectos libres y privados

Responde al principio escribe menos, haz más

Para conseguirlo permite escribir código Javascript de una manera más sencilla, realizando en una sola llamada tareas que requeririan varias líneas de código

Simplifica muchas de las tereas comunes, como la manipulación del DOM, las propiedades CSS y las llamadas AJAX, además de permitir crear efectos o animaciones

Instalación

Descargamos la librería en su versión más estable desde su página oficial jQuery.com

Cargamos la librería en el head de nuestro código HTML:

<head>
<!-- Inserted by miarroba -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<!-- Inserted by miarroba -->
    <script src='jquery-version.min.js'></script>
</head>

En el ejemplo, version es el número actual de versión, puede variar en el momento de tu descarga

Es aconsejable que en producción se utilice la versión min, ya que está optimizada para una carga más rápida en el navegador

Existen tambien repositorios CDN de terceros que podemos consultar en la página oficial de descargas, que nos librarian de tener que actualizar la versión actual de la librería

Sin embargo, corremos el riesgo de tener fallos de seguridad si alguien externo introdujera código malicioso en dichos repositorios o quedasen inacesibles por cualquier causa

Para incluirlos simplemente modificariamos el src por la url del repositorio CDN que nos indican

Carga del codigo

Podemos incluir normalmente el código de jQuery dentro de un bloque script como hacemos con Javascript o usar un archivo externo .js donde incluyamos nuestro propio código

Para poder ejecutar nuestras instrucciones será util que el árbol DOM de nuestro HTML se haya cargado completamente, aunque podemos ejecutarlas antes de que ocurra

$(document).ready(function(){
    //Código jQuery
});

En el ejemplo se ha optado por cargar el árbol DOM cuando se ha cargado el HTML completamente, incluyendo nuestro código dentro de las llaves

$(function(){
    //Código jQuery
});

En este otro ejemplo tenemos una versión equivalente que nos permite escribir menos código, elige la que más te guste, aunque la primera es más clara

Sintaxis básica

La sintaxis de jQuery es muy similar a CSS ya que todas las llamadas están compuestas por un selector seguido de una llamada

$(selector).accion();

En el ejemplo podemos ver el símbolo $ que nos permite acceder a los elementos de jQuery

El selector nos permitirá seleccionar elementos concretos dentro del árbol DOM

La acción será una función que nos permite interactuar con el elemento seleccionado por el selector

$(this).hide();  //oculta el elemento actual seleccionado
$('p').hide();  //oculta todos los elementos p
$('.test').hide();  //oculta todos los elementos de la clase test
$('#test').hide();  //oculta todos los elementos del id test

En los ejemplos tenemos el operador this, que representa el elemento actual seleccionado

‘p’ es una etiqueta HTML válida que representa a un elemento, aquí podremos usar cualquiera de ellas para realizar búsquedas

Cuando veamos con más detalle los selectores, profundizaremos en cómo deben ser esas búsquedas

‘.test’ utiliza el símbolo . para referirnos a que lo que le sigue es una clase, en este caso, la clase test

‘#test’ utiliza el símbolo # para referirnos a que lo que le sigue es un id, en este caso, el id test

Html, jQuery, Lenguaje de programación, Javascript, Programación, Página Web

Selector

07 de abril de 2024 secarcam

Selector

Un selector nos permite indicar sobre qué elementos queremos aplicar la acción

Existen las siguientes tipos de selector:

Elemento
Clase
Identificador

Elemento

Es posible seleccionar un elemento directamente según su tipo de etiqueta HTML

$('p');

En este ejemplo hemos seleccionado todos los elementos de tipo párrafo

$(function(){
    $('buttom').click(function(){
        $('p').hide();
    });
});

En este ejemplo ocultaríamos todos los elementos de tipo párrafo cuando pulsemos sobre el elemento de tipo botón

Clase

Se utiliza con el símbolo . y nos permite elegir los elementos con una clase concreta

$('.test');

En este ejemplo hemos seleccionado el elemento de la clase test

$(function(){
    $('buttom').click(function(){
        $('.test').hide();
    });
});

En este ejemplo ocultaríamos todos los elementos de la clase test cuando pulsemos sobre el elemento de tipo botón

Identificador

Se utiliza con el símbolo # y nos permite elegir los elementos con un id concreto

$('#test');

En este ejemplo hemos seleccionado el elemento con el id test

$(function(){
    $('buttom').click(function(){
        $('#test').hide();
    });
});

En este ejemplo ocultaríamos todos los elementos con el id test cuando pulsemos sobre el elemento de tipo botón

Ejemplo práctico

<!DOCTYPE html>
<html>
<head>
<!-- Inserted by miarroba -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<!-- Inserted by miarroba -->
    <script src='jquery-3.4.1.min.js'></script>
    <script
        $(function(){
            $('btn01').click(function(){
                $('#important').hide();
            });
            $('btn02').click(function(){
                $('.color').hide();
            });
            $('btn03').click(function(){
                $('h4').hide();
            });
        });
    </script>
    <style>
    .important {
       font-weight: bold;
       font-size: xx-large;
    }

    .color {
        color: #D5322D;
    }
    </style>
</head>

<body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
   <h1>Sección</h1>
   <p class='color'>Párrafo a color</p> 
   <p class='color'>Otro párrafo a color</p>
   <p class='important'>Párrafo importante</p>

   <h2>Other seccion</h2>
   <button id='btn01'>Quitar elemento 'important'</button>
   <button id='btn02'>Quitar elementos clase 'color'</button>
   <button id='btn03'>Quitar todos los encabezados de sección</button>
<!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="https://hosting.miarroba.info/?__muid=&h=1579157&t=1714355709&k=0e2056fa5e9c5f86e1c8945a7e0a0dc7"></script><noscript><img alt="beacon" border="0" width="1" height="1" src="https://hosting.miarroba.info/?__muid=&h=1579157&t=1714355709&k=0e2056fa5e9c5f86e1c8945a7e0a0dc7&img=1" /></noscript>
<!-- Inserted by miarroba -->
</body>
</html>

Más ejemplos de selector

$('*'); //selecciona todos los elementos

$(this); //selecciona el elemento del HTML actual

$('p.intro'); //selecciona todos los elementos de tipo párrafo que pertenezcan a la clase intro

$('p.first'); //selecciona el primer párrafo

$('ul li:first'); //selecciona el primer li del primer elemento ul

$('ul li:first-child'); //selecciona el primer li de cada elemento ul

$('[href]'); //selecciona todos los elementos que contengan el atributo href

$("a[target='_blank']"); //selecciona todos los elementos a que contengan el atributo target cuyo valor sea '_blank'

$("a[target!='_blank']"); //selecciona todos los elementos a que contengan el atributo target cuyo valor NO sea '_blank'

$(':button'); //selecciona todos los elementos button y todos los input de tipo button

$('tr:even'); //selecciona todos los elementos tr que sean pares

$('tr:odd'); //selecciona todos los elementos tr que sean impares

Html, jQuery, Lenguaje de programación, Javascript, Página Web, Programación

Eventos

07 de abril de 2024 secarcam

Eventos

Las acciones que el usuario realiza o los cambios que efectúe en la página se conocen con el nombre de eventos

Un evento es la señal de que ‘algo‘ ha sucedido

Sintaxis de los eventos

Es necesario especificar un selector, para saber sobre qué elemento interactuará el evento, seguido del evento entre paréntesis

$(selector).evento(funcion() {
    //Código a ejecutar
});

Vamos a usar el siguiente HTML de ejemplo, que contiene un sencillo formulario, para ir conociendo el uso de los eventos, acompañado de un fichero que llamaremos event.js

Para procesar el formulario también hemos añadido un fichero form.php, sin embargo, no lo vamos a utilizar con los ejemplos sobre eventos

<html>
    <head>
<!-- Inserted by miarroba -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<!-- Inserted by miarroba -->
        <meta charset='utf-8'>
        <script src='jquery-3.4.1.min.js'></script>
        <script type='text/javascript' src='event.js'></script>
   </head>

   <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
      <form id='form' action='form.php' method='POST'>
          <label for='login'>Login:</label>
          <input type='text' id='login'/>

          <label for='pass'>Password:</label>
          <input type='text' id='pass'/>

          <input type='submit' id='button'/>
      </form>
   <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="https://hosting.miarroba.info/?__muid=&h=1579157&t=1714355709&k=0e2056fa5e9c5f86e1c8945a7e0a0dc7"></script><noscript><img alt="beacon" border="0" width="1" height="1" src="https://hosting.miarroba.info/?__muid=&h=1579157&t=1714355709&k=0e2056fa5e9c5f86e1c8945a7e0a0dc7&img=1" /></noscript>
<!-- Inserted by miarroba -->
</body>
</html>

Eventos de elemento

Este tipo de evento es el que normalmente usará el usuario para interactuar con los elementos del HTML, cuando pase el ratón sobre el elemento o sea pulsado, entre otros

Entre los más importantes destacamos:

focus
se activa cuando el foco se dirige al elemento
blur
se activa cuando cuando el foco se dirige a otro elemento o lo pierde
click
se activa cuando se hace click sobre el elemento
dblclick
se activa cuando se hace doble click sobre el elemento

var warning = function() {
    alert('Click');
};

$(function() {
    $('#button').click(warning);
});

En el ejemplo se ha seleccionado el elemento con el id button y responde al evento click que tiene como parámetro la variable warning

Podría haberse incluido el código dentro del evento click, pero se ha querido recalcar que los parámetros pueden ser una variable que contiene una función, así podemos tener distintas variables con distinto comportamiento, sin tener que modificar nuestro código

Eventos de ratón

Se producen cuando el usuario utiliza el ratón dentro del documento HTML o cualquier de los elementos que lo componen

Entre los más importantes destacamos:

mousedown
se activa al pulsar un botón del ratón
mouseup
se activa cuando se deja de pulsar un botón del ratón
mousemove
se activa cuando se mueve el ratón
mouseover
se activa cuando se mueve el ratón sobre un elemento (cuando entramos en el elemento)
mouseout
se activa cuando el ratón abandona el elemento (cuando salimos del elemento)

var warning = function() {
    alert('Click');
};

var over = function() {
    this.style['font-weight']='bold';
};

var out = function() {
    this.style['font-weight']='initial';
};

$(function() {
    $('#button').click(warning);
    $('#button').mouseover(over);
    $('#button').mouseout(out);
});

En el ejemplo se han añadido un par de eventos más que cambian el tipo de letra cuando se pasa el ratón sobre el elemento con id button

Es posible asignar a estos eventos parámetros que contienen información sobre el evento del ratón

Entre los más importantes destacamos:

screenX y screenY
representan las coordenadas del puntero del ratón con respecto a las coordenadas globales de la pantalla
clientX y clientY
representan las coordenadas del puntero del ratón con respecto a la ventana del navegador
button
es el número de botón que ha sido pulsado (izquierdo = 0, central = 1, derecho = 2)

Si no queremos pasarlo como parámetro, podemos usar la propiedad buttons, que incluye más botones, como la rueda del ratón o los botones de adelante y atrás del navegador

var warning = function(info) {
    alert('El botón pulsado ha sido: ' + (info.button == 0 ? 'izquierdo' : (info.button == 1 ? 'central' : (info.button == 2 ? 'derecho' : 'otro') ) ) + '\nEn la posición de la pantalla: ' + info.screenX + ', ' + info.screenY);
};

En el ejemplo se ha modificado la variable warning para que detecte qué botón ha sido pulsado y qué posición tenía el ratón en la pantalla, cuando ha sido pulsado

Eventos de teclado

Se producen cuando el usuario utiliza el teclado

Entre los más importantes destacamos:

keydown
se activa al pulsar una tecla
keyup
se activa cuando se deja de pulsar una tecla
keypress
se activa cuando se pulsa y se deja de pulsar una tecla

Es posible asignar a estos eventos parámetros que contienen información sobre el evento del teclado

Entre los más importantes destacamos:

char o charCode
es una cadena con el carácter que ha sido pulsado (siempre que el mismo sea representable)
key o keyCode
es un identificador que representa la tecla que ha sido pulsada

Puedes consultar la lista completa en la página para desarrolladores de Mozilla
ctrlKey, shitKey y altKey
son campos que indican si las teclas Control, Shift o Alt habian sido pulsadas cuando se produjo el evento de teclado

var key = function(info) {
    //La letra a tiene el código 97 y el valor del resto es consecutivo
    var dictionary = 'abcdefghijklmnopqrstuvyz';

   console.log('Has pulsado la tecla: ' + dictionary.charAt(info.keyCode - 97) );
};

$(function() {
    $('#button').click(warning);
    $('#button').mouseover(over);
    $('#button').mouseout(out);
    $('#login').keypress(key);
});

En el ejemplo se ha añadido la variable key con parámetros para capturar las teclas pulsadas al escribir en el elemento con el id login y se ha modificado el conjunto de llamadas para utilizarlo, usando el evento keypress

Eventos de toque

Estos eventos se producen al tocar una pantalla tactil

Son similares a los producidos por un ratón, pero su retardo es mucho menor

A causa de ello, pueden producirse conflictos con los eventos del ratón, por eso es recomendable deshabilitarlos, para no ejecutar eventos similares dos veces

Entre los más importantes destacamos:

touchstart
se activa cuando el dedo toca la superficie de la pantalla
touchend
se activa cuando el dedo deja de pulsar la superficie de la pantalla
touchmove
se activa cuando el dedo se desliza por la superficie de la pantalla
touchenter
se activa cuando el dedo se mueve sobre un elemento (cuando entramos en el elemento)
touchleave
se activa cuando el dedo abandona el elemento (cuando salimos del elemento)
touchcancel
se activa cuando el dedo se sale fuera de los límites de la ventana del navegador

Eventos de formulario

Los formularios tienen sus propios eventos, entre los más importantes destacamos:

click
se activa cuando hacemos click con el ratón sobre un elemento
Normalmente suele usarse con los botones (button, submit)
change
se activa cuando el usuario modifica el valor de un elemento de texto

Normalmente suele usarse con los input de tipo texto, los textarea o las listas desplegables al seleccionar una opción
focus
se activa cuando el usuario selecciona un elemento del formulario
blur
se activa cuando el usuario pasa a otro elemento del formulario
submit
se activa cuando el usuario realiza la acción de enviar el formulario (no sólo cuando se pulsa el botón de submit, ya que puede simularse al pulsar un button que hace las veces de submit o cuando se fuerza una llamada al evento desde otro evento)

Adicionalmente, el evento submit genera los eventos mousedown, click, mouseup y submit, en ese mismo orden, lo que nos permite realizar validaciones en los elementos del formulario antes de enviarlo definitivamente
reset
se activa cuando el usuario realiza la acción de resetear el formulario (no sólo cuando se pulsa el botón de reset, ya que puede simularse al pulsar un button que hace las veces de reset o cuando se fuerza una llamada al evento desde otro evento)

var send = function(event) {
    var login = $('#login').val();
    var pass = $('#pass').val();

    if( (login.length == 0) || (pass.length == 0) ) {
        alert('Uno de los datos estaba sin rellenar');
        event.preventDefault();
    }
};

var write = function() {
    var value = $('#pass').val();

    if(value.indexOf('@') 1= *1) {
       alert('La contraseña no puede contener el símbolo @');
    }
};

$(function() {
    $('#button').click(warning);
    $('#button').mouseover(over);
    $('#button').mouseout(out);
    $('#login').keypress(key);
    $('#form').submit(send);
    $('#pass').change(write);
});

En el ejemplo se han añadido las variables send (para validar los campos login y pass) y write (para validar que no se introduzca el símbolo @ en el campo pass); se ha modificado el conjunto de llamadas para utilizarlos, usando los eventos submit y change

jQuery, Html, Lenguaje de programación, CSS, Javascript, Programación, Página Web

Modificación de estilos

07 de abril de 2024 secarcam

Modificación de estilos

JQuery permite modificar facilmente los estilos y las propiedades CSS de nuestra página web

Añadir o eliminar propiedades CSS

Mediante los métodos addClass() y removeClass() podemos asignar o quitar una clase CSS de cualquier elemento

<!DOCTYPE html>
<html>
    <head>
<!-- Inserted by miarroba -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<!-- Inserted by miarroba -->
        <script src='jquery-3.4.1.min.js'></script>
        <script>
        $('#btn01').click(function() {
            $('#div01').addClass('important color');
        });
        $('#btn02').click(function() {
            $('#div01').removeClass('color');
        });
        </script>
        <style>
        .important {
            font-weight: bold;
            font-size: xx-large;
        }

        .color {
            color: #D5322D;
        }
        </style>
    </head>

    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
        <div id='div01'>Texto de ejemplo</div><br/>
        <button id='btn01'>Añadir clases important y color</button>
        <button id='btn02'>Eliminar clase color</button>
    <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="https://hosting.miarroba.info/?__muid=&h=1579157&t=1714355709&k=0e2056fa5e9c5f86e1c8945a7e0a0dc7"></script><noscript><img alt="beacon" border="0" width="1" height="1" src="https://hosting.miarroba.info/?__muid=&h=1579157&t=1714355709&k=0e2056fa5e9c5f86e1c8945a7e0a0dc7&img=1" /></noscript>
<!-- Inserted by miarroba -->
</body>
</html>

En el ejemplo se añaden los estilos important y color al elemento con id div01 cuando pulsemos el botón btn01 y se elimina el estilo color

Manipulación de las propiedades CSS

El método css() nos permite consultar o modificar cualquier propiedad de la hoja de estilos de un elemento HTML

Tiene la siguiente sintaxis:

css('nombre_propiedad', 'valor');

En caso de que sólo queramos consultar la propiedad, omitiremos el parámetro valor y si queremos modificarlo, usaremos ese parámetro

<!DOCTYPE html>
<html>
    <head>
<!-- Inserted by miarroba -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<!-- Inserted by miarroba -->
        <script src='jquery-3.4.1.min.js'></script>
        <script>
        $('#btn03').click(function() {
            $('.pcolor').css('background-color', 'yellow');
        });
        </script>        
    </head>

    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
        <p class='pcolor' style='background-color:#FF5555'>Primer párrafo</p>
        <p class='pcolor' style='background-color:#55FF55'>Segundo párrafo</p>
        <p class='pcolor' style='background-color:#5555FF'>Tecer párrafo</p>
        <button id='btn03'>Cambiar color a todos los párrafos</button>
    <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="https://hosting.miarroba.info/?__muid=&h=1579157&t=1714355709&k=0e2056fa5e9c5f86e1c8945a7e0a0dc7"></script><noscript><img alt="beacon" border="0" width="1" height="1" src="https://hosting.miarroba.info/?__muid=&h=1579157&t=1714355709&k=0e2056fa5e9c5f86e1c8945a7e0a0dc7&img=1" /></noscript>
<!-- Inserted by miarroba -->
</body>
</html>

En el ejemplo se han usado tres párrafos distintos con un estilo para el color de fondo distinto, si pulsamos el botón con id btn03 podemos comprobar que con el método css hemos cambiado todos los párrafos a color amarillo

Html, jQuery, Lenguaje de programación, Javascript, Programación, Página Web

Efectos

07 de abril de 2024 secarcam

Efectos

JQuery permite, de una forma sencilla, crear efectos, transiciones, movimientos, animaciones, etc

Hide y Show

El método hide permite ocultar un elemento

Para poder volver a hacerlo visible podemos utilizar el método show

<!DOCTYPE html>
<html>
    <head>
<!-- Inserted by miarroba -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<!-- Inserted by miarroba -->
        <script src='jquery-3.4.1.min.js'></script>
        <script>
        $(function() {
            $('#hide').click(function() {
                $('#part01').hide(800);
            };
 
            $('#show').click(function() {
                $('#part01').hide(1000);
            };
        });
        </script>
    </head>

    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
        <p id='par01'>Si pulsas el botón 'ocultar' desapareceré<br/>
        Y si pulsas en el botón 'mostrar' pues apareceré</p>

        <button id='hide'>Ocultar</button>
        <button id='show'>Mostrar</button>
    <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="https://hosting.miarroba.info/?__muid=&h=1579157&t=1714355709&k=0e2056fa5e9c5f86e1c8945a7e0a0dc7"></script><noscript><img alt="beacon" border="0" width="1" height="1" src="https://hosting.miarroba.info/?__muid=&h=1579157&t=1714355709&k=0e2056fa5e9c5f86e1c8945a7e0a0dc7&img=1" /></noscript>
<!-- Inserted by miarroba -->
</body>
</html>

En el ejemplo anterior cuando se pulsa el botón con id hide se ha usado el método hide con un parámetro en el que se indica la velocidad (en milisegundos) para ocultar el párrafo con id part01

Al pulsar el botón con id show se ha usado el método show con un parámetro en el que se indica la velocidad (en milisegundos) para mostrar de nuevo el párrafo con id part01

Toggle

Permite alternar entre hide() y show(), o viceversa, también admite el parámetro para controlar la velocidad

<!DOCTYPE html>
<html>
    <head>
<!-- Inserted by miarroba -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<!-- Inserted by miarroba -->
        <script src='jquery-3.4.1.min.js'></script>
        <script>
        $(function() {
            $('#toggleBtn').click(function() {
                $('#part02').hide(800);
            };
        });
        </script>
    </head>

    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
        <p id='par02'>Si pulsas el botón 'cambiar' desapareceré o apareceré, según su estado anterior</p>

        <button id='toggleBtn'>Cambiar</button>
    <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="https://hosting.miarroba.info/?__muid=&h=1579157&t=1714355709&k=0e2056fa5e9c5f86e1c8945a7e0a0dc7"></script><noscript><img alt="beacon" border="0" width="1" height="1" src="https://hosting.miarroba.info/?__muid=&h=1579157&t=1714355709&k=0e2056fa5e9c5f86e1c8945a7e0a0dc7&img=1" /></noscript>
<!-- Inserted by miarroba -->
</body>
</html>

Este ejemplo es similar al mostrado con hide y show, pero se obtiene un ejecto parecido con menos código

Fading

Es similar a Toggle, ya que el elemento aparece o desaparece, sin embargo lo hace de forma gradual

<!DOCTYPE html>
<html>
    <head>
<!-- Inserted by miarroba -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<!-- Inserted by miarroba -->
        <script src='jquery-3.4.1.min.js'></script>        
    </head>

    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
        <button id='fadeBtn'>Pulsa para que desaparezcan o aparezcan unas cajas</button><br/><br/>

        <div id='div01' style='width: 8px; height: 80px; background-color: red;'></div>
        <div id='div02' style='width: 8px; height: 80px; background-color: green;'></div>
        <div id='div03' style='width: 8px; height: 80px; background-color: blue;'></div>
    <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="https://hosting.miarroba.info/?__muid=&h=1579157&t=1714355709&k=0e2056fa5e9c5f86e1c8945a7e0a0dc7"></script><noscript><img alt="beacon" border="0" width="1" height="1" src="https://hosting.miarroba.info/?__muid=&h=1579157&t=1714355709&k=0e2056fa5e9c5f86e1c8945a7e0a0dc7&img=1" /></noscript>
<!-- Inserted by miarroba -->
</body>
</html>

Vamos a usar este ejemplo para probar los distintos métodos de fadding

FadeIn

Permite que un elemento oculto aparezca

Admite un parámetro para indicar la velocidad (en milisegundos) o los valores ‘slow’ o ‘fast’

$('button').click(function() {
    $('#div01').fadeIn();
    $('#div02').fadeIn('slow');
    $('#div03').fadeIn(3000);
});

Modificamos el HTML del ejemplo anterior para añadir este script

FadeOut

Permite que un elemento se oculte

Admite un parámetro para indicar la velocidad (en milisegundos) o los valores ‘slow’ o ‘fast’

$('button').click(function() {
    $('#div01').fadeOut();
    $('#div02').fadeOut('slow');
    $('#div03').fadeOut(3000);
});

Modificamos el HTML del ejemplo anterior para añadir este script

FadeToggle

Permite altenar entre los efectos fadeIn y fadeOut de un elemento

Admite un parámetro para indicar la velocidad (en milisegundos) o los valores ‘slow’ o ‘fast’

$('button').click(function() {
    $('#div01').fadeTogglet();
    $('#div02').fadeToggle('slow');
    $('#div03').fadeToggle(3000);
});

Modificamos el HTML del ejemplo anterior para añadir este script

Sliding

Nos permite mover elementos para que se muestren hacia arriba o hacia abajo

<!DOCTYPE html>
<html>
    <head>
<!-- Inserted by miarroba -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<!-- Inserted by miarroba -->
        <script src='jquery-3.4.1.min.js'></script>
        <style>
        #panelAux, #flip {
            background-color: #F6CFCE;
            border: 1px solid #CCC;
            border-radius: 4px;
            padding: 5px;
            text-align: center;
        }

        #panelAux {
             padding: 50px;
             display: none;
        }
        </style>
    </head>

    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
        <div id='flip'>Pulsa aquí para que se despliegue y contraiga el panel</div>
        <div id='panelAux'>¡Me gusta jQuery!</div>
    <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="https://hosting.miarroba.info/?__muid=&h=1579157&t=1714355709&k=0e2056fa5e9c5f86e1c8945a7e0a0dc7"></script><noscript><img alt="beacon" border="0" width="1" height="1" src="https://hosting.miarroba.info/?__muid=&h=1579157&t=1714355709&k=0e2056fa5e9c5f86e1c8945a7e0a0dc7&img=1" /></noscript>
<!-- Inserted by miarroba -->
</body>
</html>

Vamos a usar este ejemplo para probar los distintos métodos de sliding

SlideDown

Mueve hacia abajo el elemento

Admite un parámetro para indicar la velocidad (en milisegundos) o los valores ‘slow’ o ‘fast’

$('#flip').click(function() {
    $('#panel').slideDown();
});

Modificamos el HTML del ejemplo anterior para añadir este script

SlideUp

Mueve hacia arriba el elemento

Admite un parámetro para indicar la velocidad (en milisegundos) o los valores ‘slow’ o ‘fast’

$('#flip').click(function() {
    $('#panel').slideUp();
});

Modificamos el HTML del ejemplo anterior para añadir este script

SlideToggle

Permite altenar entre los efectos slideDown y slideUp del elemento

Admite un parámetro para indicar la velocidad (en milisegundos) o los valores ‘slow’ o ‘fast’

$('#flip').click(function() {
    $('#panelAux').slideToggle('slow');
});

Modificamos el HTML del ejemplo anterior para añadir este script

Animaciones

También es posible crear animaciones personalizadas con el método animate() con la siguiente sintaxis:

$(selector).animate((propiedades_CSS), velocidad);

El primer parámetro define un conjunto de propiedades CSS, encerradas entre los simbolos { y }, que se van a modificar

El segundo indica la velocidad (en milisegundos) o los valores ‘slow’ o ‘fast’

<!DOCTYPE html>
<html>
    <head>
<!-- Inserted by miarroba -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<!-- Inserted by miarroba -->
        <script src='jquery-3.4.1.min.js'></script>        
    </head>

    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
        <button id='animateBtn01'>Comenzar animación</button>

        <div id='box01' style='background: #D5322D; height: 100px; widht: 100px; display: block;'></div>
    <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="https://hosting.miarroba.info/?__muid=&h=1579157&t=1714355709&k=0e2056fa5e9c5f86e1c8945a7e0a0dc7"></script><noscript><img alt="beacon" border="0" width="1" height="1" src="https://hosting.miarroba.info/?__muid=&h=1579157&t=1714355709&k=0e2056fa5e9c5f86e1c8945a7e0a0dc7&img=1" /></noscript>
<!-- Inserted by miarroba -->
</body>
</html>

Vamos a usar este ejemplo para probar varias formas de hacer animaciones

$('animateBtn01').click(function() {
    $('box01').animate( {left:'250px'} );
});

Modificamos el HTML del ejemplo anterior para añadir este script, en el que hemos modificado una única propiedad

$('animateBtn01').click(function() {
    $('box01').animate( {
        left:'250px',
        opacity:'0.5',
        height:'150px',
        width:'150px'
    });
});

Modificamos el HTML del ejemplo anterior para añadir este script, en el que hemos modificado varias propiedades

$('animateBtn01').click(function() {
    $('box01').animate( {
        left:'250px',
        height:'+=150px',
        width:'+=150px'
    });
});

Modificamos el HTML del ejemplo anterior para añadir este script, en el que hemos modificado varias propiedades utilizando valores relativos

$('animateBtn01').click(function() {
    var div = $('box01');

    div.animate( {
        height:'300px',
        opacity:'0.4'
    }, 'slow');
    div.animate( {
        width:'300px',
        opacity:'0.8'
    }, 'slow');
    div.animate( {
        height:'100px',
        opacity:'0.4'
    }, 'slow');
    div.animate( {
        width:'100px',
        opacity:'0.8'
    }, 'slow');
});

Modificamos el HTML del ejemplo anterior para añadir este script, en el que hemos modificado varias propiedades ejecutando varias animaciones consecutivas una detras de otra

Página web de Sergio Cárcamo García dedicada a la informática y temas relacionados como los lenguajes de programación, la estadística, las matemáticas, etc

Cookie	Duración	Descripción
CookieLawInfoConsent	Hasta finalizar la sesión del navegador	Controla la visualización del consentimiento de Cookies, su gestión y visualización en la página web por parte del usuario
qtrans_admin_language	Hasta finalizar la sesión del navegador	Permite al administrador gestionar la traducción de la página web a varios idiomas
qtrans_edit_language	Hasta finalizar la sesión del navegador	Permite al administrador editar la traducción de la página web a varios idiomas
viewed_cookie_policy	Hasta finalizar la sesión del navegador	Controla si la visualización del consentimiento de Cookies es visible actualmente en la página web para el usuario o por el contrario está oculta

Introducir entero:	Resultado
Expresar entero en decimal
Expresar entero en hexadecimal
Expresar entero en octal