[[Fitxer:vueimagen.png]]

https://www.youtube.com/watch?v=ub8ZU3JxNsM&list=PL7VXpoQP1k247QUTTxHcYBNyCg1j2ALfD

v-text: para mostrar texto y que no parpadee

v-show: para mostrar u ocultar el elemento en función de su valor. v-show="true" es igual v-show="mensaje"

===V-TEXT===
<source lang="javascript">
<body>
<div id="el">
<h1> {{mensaje}}</h1> 
</div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var variable = Vue.createApp({
data: () => ({
mensaje: "resultado" //datos, hace referencia dentro de elemento
})
}).mount("#el") //hace referencia al elemento id= el

</script>
</source>

<source lang="javascript">
<body>
<div id="el">
<h1>Hola <span v-text="mensaje"> </span></h1> 
<input type="text" class="text" v-model="mensaje">
</div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>

var variable = Vue.createApp({
data: () => ({
mensaje: "resultado"
})
}).mount('#el');

</script>
</source>

===V-SHOW===
v-show: para mostrar u ocultar el elemento en función de su valor. v-show="true" es igual v-show="mensaje"

<source lang="javascript">
<body>

<div id="el">
<h1 v-show="mensaje.length > 2">Ejemplo <span v-text="mensaje"> {{mensaje}}</span></h1> 
<input type="text" class="text" v-model="mensaje">
</div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>

var variable = Vue.createApp({
data: () => ({
mensaje: "resultado"
})
}).mount("#el")

</script>
</source>

<source lang="javascript">
<body>
<div id="el">
<h1 v-show="mensaje.length > 2">Hola <span v-text="mensaje"> </span></h1> 
<input type="text" class="text" v-model="mensaje">
</div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>

var variable = Vue.createApp({
data: () => ({
mensaje: "resultado"
})
}).mount("#el")

</script>
</source>

===V-IF===

<source lang="javascript">
<body>
<div id="el">
<h1 v-if="mensaje.length > 2">Hola <span v-text="mensaje"> </span></h1> 
<h1 v-else>otra</h1>
<input type="text" class="text" v-model="mensaje">
</div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>

var variable = Vue.createApp({
data: () => ({
mensaje: "resultado"
})
}).mount("#el")

</script>
</source>

===V-FOR===

<source lang="javascript">
<body>
<div id="el">
<ul>

<li v-for="profesor in profesores" v-text="profesor"></li>
</ul>
</div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var variable = Vue.createApp({
data: () => ({
profesores: [ //utilizamos un array con cadenas
"Julio Noguera",
"Albert Canela",
"Alex Salinas"
]
})
}).mount("#el")
</script>
</source>

Recorriendo Objetos

<source lang="javascript">
<body>
<div id="el">
<ul>

<li v-for="profesor in profesores" v-text="profesor.nombre"></li>
</ul>
</div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var variable = Vue.createApp({
data: () => ({ //utilizamos un array con objetos
profesores: [
{nombre:"Julio Noguera"},
{nombre: "Albert Canela"},
{nombre: "Alex Salinas"}

]
})
}).mount("#el")
</script>
</source>

Podemos especificar recorrer los objetos y mostrar o acceder a su contenido

<source lang="javascript">
<body>
<div id="el">
<ul>

<li v-for="profesor in profesores">
<span v-text="profesor.nombre"></span>
<small v-if="profesor.activo">-Activo</small>
<small v-else>-NO está</small>

</li>
</ul>
</div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var variable = Vue.createApp({
data: () => ({
profesores: [{
nombre: "Julio Noguera",
activo: true
},
{
nombre: "Albert Canela",
activo: true
},
{
nombre: "Alex Salinas",
activo: false
}

]
})
}).mount("#el")
</script>

//en Consola del navegador->
// variable.profesores[0].nombre ="Pepe"
// variable.profesores.push({nombre:"Joan Comas",activo:true})
</source>

===EVENTOS y FUNCIONES ===

===CLICK===

Tenemos los datos mensajes y el array de profesores, también el método invertir que se ejecutará cuando se haga click en botón, también es interesante que para acceder a los datos se utiliza this.

<source lang="javascript">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>
<div id="el">
<input type="text" v-model="mensaje">
<h1 v-text="mensaje"></h1>


<button @click="invertir">INVERTIR</button>
</div>
</body>

<script>
var variable = Vue.createApp({
data: () => ({
mensaje: "",
}),
methods: {
invertir() {
this.mensaje = this.mensaje.split('').reverse().join('');
}
}
}).mount("#el");
</script>
</source>

Mostrar lista asociando evento click
<source lang="javascript">
<style>
.false{background:blue}
.true{background: green}
</style>
<body>
<div class="container">
<div id="el">
<ul>
<li v-for="profe in profesores">
<span v-text="profe.nombre"></span>
<span @click="profe.activo=false" v-if="profe.activo" class="false">X</span>
<span @click="profe.activo=true" v-else class="true">X</span>

</li>
</ul>
<pre>{{$data}}</pre>
</div>
</div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var variable = Vue.createApp({
data: () => ({
profesores: [{
nombre: "Julio Noguera",
activo: true
},
{
nombre: "Albert Canela",
activo: true
},
{
nombre: "Alex Salinas",
activo: false
}

]

})
}).mount("#el");
</script>
</source>

'''BOTÓN- AÑADIR LISTA'''

===KEYUP===

Eventos de teclado

<source lang="javascript">
<body>
<div id="el">
<ul>
<li v-for="profesor in profesores">
<span v-text="profesor.nombre"></span>
<small v-if="profesor.activo">-Activo</small>
<small v-else>-NO está</small>
</li>
<input v-on:keyup.enter="anadir" type="text" v-model="profe" >


</ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var variable = Vue.createApp({
data:() => ({
profe: "",
profesores: [
{ nombre: "Julio Noguera", activo: true },
{ nombre: "Albert Canela", activo: true },
{ nombre: "Alex Salinas", activo: false }
]
}),
methods: {
anadir() {
this.profesores.push({
nombre: this.profe,
activo: false
});
this.profe = ""; // Restableix el valor de profe a una cadena buida després d'afegir-lo
}
}
}).mount("#el");
</script>
</body>
</source>

=== DIRECTIVA V-BIND===

'''PARA ACTIVAR CLASES'''

<source lang="javascript">
<style>
.rojo {
background: red;
}

.verde {
background: green;
}
.glyphicon{
color: white;
}
</style>
<body>

<div id="el">
<ul>


<li v-for="tarea in tareas">
<span v-bind:class="{
'rojo': !tarea.completo,
'verde': tarea.completo
}" v-text="tarea.nombre" @click="tarea.completo=!tarea.completo" ></span>
<input type="checkbox" v-model="tarea.completo">
</li>
</ul>
<pre>
{{$data}}
</pre>
</div>

</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var variable = Vue.createApp({
data: () => ({
tareas: [
{
nombre: "Estudiar",
completo: true
},
{
nombre: "Repasar",
completo: true
},
{
nombre: "Examinar",
completo: false
}
]
})
}).mount("#el");
</script>
</source>

'''INCREMENTAR'''

Como se puede ver, se produce un incremento de voto modificando su atributo directamente.
<source lang="javascript">
<body>
<div class="container">
<h1>veamos</h1>
<div>
<ul>
<li v-for="storie in stories"><button @click="storie.votos++">Vote {{storie.politico}}</button><pre v-text="storie.votos"></pre></li>
</ul>
</div>
<pre>{{$data}}</pre>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
const app = Vue.createApp({
data() {
return {
stories: [
{ politico: "julio", votos: 1 },
{ politico: "paco", votos: 2 },
{ politico: "raúl", votos: 3 },
{ politico: "jorge", votos: 4 }
]
};
},
methods: {
incrementVote(storie) {
storie.votos++;
}
}
}).mount(".container");

</script>
</source>

=== FILTRAR ===
<source lang="javascript">
<div id="aplicacion">
<input type="range" v-model="minimo" min="0" max="50">
<div v-text="minimo"></div>

<div v-for="dato in filtrar">
<div v-text="dato.descripcion"></div>
</div>

<input type="search" v-model="campo">

<div v-for="dato in busqueda">
<div v-text="dato.descripcion"></div>
</div>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = Vue.createApp({
data:() => ({

minimo: "5",

campo: "",

datos: [{
codigo: 1,
descripcion: 'papas',
precio: 12.52
}, {
codigo: 2,
descripcion: 'naranjas',
precio: 21
}, {
codigo: 3,
descripcion: 'peras',
precio: 18.20
}]
}),
computed: {
filtrar() {
return this.datos.filter((dato) => dato.precio > this.minimo);
},
busqueda() {
return this.datos.filter((dato) => dato.descripcion.includes(this.campo));
}

}
}).mount("#aplicacion")

</script>
</source>

==Componentes==

1. Crear una nueva instancia de Vue con Vue.createApp

2. Existen 3 Objetos básicos y fundamentales que estarán en la mayoria de las aplicaciones web: el data y methods.

3. Se debe crear un contenedor con un id igual al del objeto el para establecer el alcance del framework

Crear Nuestro primer Componente Básico

<source lang="javascript">
<body>
<div id="aplicacion">

<hola-mundo></hola-mundo>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>

//nueva instacia de Vue : Vue.createApp
var app= Vue.createApp({
data:() => ({ //capa de datos

}),
methods:
{

}
})

app.component('hola-mundo', { //debe coincidir con el nombre del componente(etiqueta html)
template: `<p>
Hola mundo
</p>`
});

app.mount('#aplicacion') // el elemento donde se aplicará Vue, en este caso un div con id = main);
</script>
</source>

'''PROPS'''

Props sirve para interpolar o pasar los valores que hayan dentro del atributo la etiqueta html (inglés, castellano) al objeto component
<source lang="javascript">
<body>
<div id="aplicacion">
<hola-mundo idioma="ingles"></hola-mundo>
<hola-mundo idioma="castellano"></hola-mundo>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>

var app= Vue.createApp({
})

app.component('hola-mundo', {
props: ['idioma'],
template: `<div>
<p v-if="idioma=='castellano'">Hola mundo</p>
<p v-if="idioma=='ingles'">Hello world</p>
</div>`
})

app.mount("#aplicacion")
</script>

</body>
</source>

Otro Componente Básico

<source lang="javascript">
<body>

<div id="app">
<ejemplo nombre="Juan" apellido="Perez"></ejemplo>
<ejemplo nombre="Alejandra" apellido="Quiroga"></ejemplo>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>

var app= Vue.createApp({
})

app.component('ejemplo', {
props: ['nombre', 'apellido'],
template: '<p> Hola {{nombre}} {{apellido}} </p>'
});

app.mount("#app")
</script>

</body>
</source>

Ejemplo de Componente, podemos ver que pasamos una peliculas "peliculon 1917" y una imagen en la etiqueta peliculas, que serán los valores que recibirá el componente para luego incluirlo en la plantilla.
<source lang="javascript">
<body>
<div class="container">
<peliculas titulo="peliculon 1917"
imagen="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSexz8IyOhoxR2ibVc78RHzpBCsvhDt3fx0wl99Qcxacht4gk9z"></peliculas>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">

var app = Vue.createApp({

})

app.component('peliculas', {

props: ['imagen', 'titulo'], //los props reciben los datos externos del html en este caso será "peliculon 1917" y la ruta de la imagen
template:
`<div>
<img width="100px" v-bind:src="imagen" :alt="titulo"/> 
<h2> {{titulo}} </h2>
</div>`
});

app.mount(".container")

</script>
</body>
</source>

Este ejemplo, viene a basarse en el ejemplo anterior pero además coje datos del JSON data y los va mostrando

<source lang="javascript">
<body>
<div class="container">
<div v-for="(dato, index) in datos"> 
<peliculas :key="index" :titulo="dato.titulo" :imagen="dato.imagen">
</peliculas>
</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script type="text/javascript">
var app = Vue.createApp({
data: () => ({
datos: [{
titulo: "star wars",
imagen: "https://vignette.wikia.nocookie.net/cine/images/8/88/Sw1.jpg/revision/latest?cb=20120930202439 "
},
{
titulo: "Sonic",
imagen: "https://www.smashbros.com/wiiu-3ds/images/character/sonic/main.png"
},
{
titulo: "Mario bros",
imagen: "https://imagenesparapeques.com/wp-content/uploads/2021/05/Mario-Bros-png-transparente.png"
}
]

})
})

app.component('peliculas', {
props: ['titulo', 'imagen'],
template: `<div>
<img width="100px" :src="imagen" :alt="titulo"/>
<h2>{{ titulo }}</h2>
</div>`
});

app.mount(".container")

</script>
</body>

</source>

'''Componentes: definición de métodos y modelo de datos'''

<source lang="javascript">
<body>
<div id="el" class="container">
<h1> Helados </h1>
<h2> Lista </h2>
<ul>
<li v-for="item in helados" :key="item.sabor">
<component-helado v-bind:helado="item"></component-helado>
</li>
</ul>
<h2> Seleccionados </h2>
<ul>
<li v-for="item in heladosSeleccionados" :key="item.sabor"> {{ item.sabor }} </li>
</ul>
</div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
var app = Vue.createApp({
data: () => ({
helados: [{
sabor: 'Chocolate',
seleccionado: false
},
{
sabor: 'Dulce de leche',
seleccionado: false
},
{
sabor: 'Frutilla',
seleccionado: false
},
{
sabor: 'Limón',
seleccionado: false
},
{
sabor: 'Vainilla',
seleccionado: false
}
]
}),
computed: {
heladosSeleccionados() {
return this.helados.filter(helado => helado.seleccionado);
}
}
});

app.component('component-helado', {
props: ['helado'],
template: `
<div>
<button class="btn btn-success" v-on:click="agregar(helado)" v-if="!helado.seleccionado"> + </button>
<button class="btn btn-danger" v-on:click="eliminar(helado)" v-if="helado.seleccionado"> - </button>
<span> {{ helado.sabor }} </span>
<hr/>
</div> `,
methods: {
agregar(helado) {
helado.seleccionado = true;
},
eliminar(helado) {
helado.seleccionado = false;
}
}
});

app.mount('#el');
</script>
</source>

==Ejercicios ==



https://www.tutorialesprogramacionya.com/vueya/

https://www.youtube.com/watch?v=jfEEQVdbl54&list=PLPl81lqbj-4J-gfAERGDCdOQtVgRhSvIT&index=7&t=0s

VUEJS

2024-03-08T16:41:49Z

Mfernandez: /* V-TEXT */

[[Fitxer:vueimagen.png]]

https://www.youtube.com/watch?v=ub8ZU3JxNsM&list=PL7VXpoQP1k247QUTTxHcYBNyCg1j2ALfD

v-text: para mostrar texto y que no parpadee

v-show: para mostrar u ocultar el elemento en función de su valor. v-show="true" es igual v-show="mensaje"

===V-TEXT===
<source lang="javascript">
<body>
<div id="el">
<h1> {{mensaje}}</h1> 
</div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script> //CDN
<script>
var variable = Vue.createApp({
data: () => ({
mensaje: "resultado" //datos, hace referencia dentro de elemento #el {{mensaje}}
})
}).mount(#el) //hace referencia al elemento id= el

</script>
</source>

<source lang="javascript">
<body>
<div id="el">
<h1>Hola <span v-text="mensaje"> </span></h1> 
<input type="text" class="text" v-model="mensaje">
</div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>

var variable = Vue.createApp({
data: () => ({
mensaje: "resultado"
})
}).mount('#el');

</script>
</source>

===V-SHOW===
v-show: para mostrar u ocultar el elemento en función de su valor. v-show="true" es igual v-show="mensaje"

<source lang="javascript">
<body>

<div id="el">
<h1 v-show="mensaje.length > 2">Ejemplo <span v-text="mensaje"> {{mensaje}}</span></h1> 
<input type="text" class="text" v-model="mensaje">
</div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>

var variable = Vue.createApp({
data: () => ({
mensaje: "resultado"
})
}).mount("#el")

</script>
</source>

<source lang="javascript">
<body>
<div id="el">
<h1 v-show="mensaje.length > 2">Hola <span v-text="mensaje"> </span></h1> 
<input type="text" class="text" v-model="mensaje">
</div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>

var variable = Vue.createApp({
data: () => ({
mensaje: "resultado"
})
}).mount("#el")

</script>
</source>

===V-IF===

<source lang="javascript">
<body>
<div id="el">
<h1 v-if="mensaje.length > 2">Hola <span v-text="mensaje"> </span></h1> 
<h1 v-else>otra</h1>
<input type="text" class="text" v-model="mensaje">
</div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>

var variable = Vue.createApp({
data: () => ({
mensaje: "resultado"
})
}).mount("#el")

</script>
</source>

===V-FOR===

<source lang="javascript">
<body>
<div id="el">
<ul>

<li v-for="profesor in profesores" v-text="profesor"></li>
</ul>
</div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var variable = Vue.createApp({
data: () => ({
profesores: [ //utilizamos un array con cadenas
"Julio Noguera",
"Albert Canela",
"Alex Salinas"
]
})
}).mount("#el")
</script>
</source>

Recorriendo Objetos

<source lang="javascript">
<body>
<div id="el">
<ul>

<li v-for="profesor in profesores" v-text="profesor.nombre"></li>
</ul>
</div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var variable = Vue.createApp({
data: () => ({ //utilizamos un array con objetos
profesores: [
{nombre:"Julio Noguera"},
{nombre: "Albert Canela"},
{nombre: "Alex Salinas"}

]
})
}).mount("#el")
</script>
</source>

Podemos especificar recorrer los objetos y mostrar o acceder a su contenido

<source lang="javascript">
<body>
<div id="el">
<ul>

<li v-for="profesor in profesores">
<span v-text="profesor.nombre"></span>
<small v-if="profesor.activo">-Activo</small>
<small v-else>-NO está</small>

</li>
</ul>
</div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var variable = Vue.createApp({
data: () => ({
profesores: [{
nombre: "Julio Noguera",
activo: true
},
{
nombre: "Albert Canela",
activo: true
},
{
nombre: "Alex Salinas",
activo: false
}

]
})
}).mount("#el")
</script>

//en Consola del navegador->
// variable.profesores[0].nombre ="Pepe"
// variable.profesores.push({nombre:"Joan Comas",activo:true})
</source>

===EVENTOS y FUNCIONES ===

===CLICK===

Tenemos los datos mensajes y el array de profesores, también el método invertir que se ejecutará cuando se haga click en botón, también es interesante que para acceder a los datos se utiliza this.

<source lang="javascript">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>
<div id="el">
<input type="text" v-model="mensaje">
<h1 v-text="mensaje"></h1>


<button @click="invertir">INVERTIR</button>
</div>
</body>

<script>
var variable = Vue.createApp({
data: () => ({
mensaje: "",
}),
methods: {
invertir() {
this.mensaje = this.mensaje.split('').reverse().join('');
}
}
}).mount("#el");
</script>
</source>

Mostrar lista asociando evento click
<source lang="javascript">
<style>
.false{background:blue}
.true{background: green}
</style>
<body>
<div class="container">
<div id="el">
<ul>
<li v-for="profe in profesores">
<span v-text="profe.nombre"></span>
<span @click="profe.activo=false" v-if="profe.activo" class="false">X</span>
<span @click="profe.activo=true" v-else class="true">X</span>

</li>
</ul>
<pre>{{$data}}</pre>
</div>
</div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var variable = Vue.createApp({
data: () => ({
profesores: [{
nombre: "Julio Noguera",
activo: true
},
{
nombre: "Albert Canela",
activo: true
},
{
nombre: "Alex Salinas",
activo: false
}

]

})
}).mount("#el");
</script>
</source>

'''BOTÓN- AÑADIR LISTA'''

===KEYUP===

Eventos de teclado

<source lang="javascript">
<body>
<div id="el">
<ul>
<li v-for="profesor in profesores">
<span v-text="profesor.nombre"></span>
<small v-if="profesor.activo">-Activo</small>
<small v-else>-NO está</small>
</li>
<input v-on:keyup.enter="anadir" type="text" v-model="profe" >


</ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var variable = Vue.createApp({
data:() => ({
profe: "",
profesores: [
{ nombre: "Julio Noguera", activo: true },
{ nombre: "Albert Canela", activo: true },
{ nombre: "Alex Salinas", activo: false }
]
}),
methods: {
anadir() {
this.profesores.push({
nombre: this.profe,
activo: false
});
this.profe = ""; // Restableix el valor de profe a una cadena buida després d'afegir-lo
}
}
}).mount("#el");
</script>
</body>
</source>

=== DIRECTIVA V-BIND===

'''PARA ACTIVAR CLASES'''

<source lang="javascript">
<style>
.rojo {
background: red;
}

.verde {
background: green;
}
.glyphicon{
color: white;
}
</style>
<body>

<div id="el">
<ul>


<li v-for="tarea in tareas">
<span v-bind:class="{
'rojo': !tarea.completo,
'verde': tarea.completo
}" v-text="tarea.nombre" @click="tarea.completo=!tarea.completo" ></span>
<input type="checkbox" v-model="tarea.completo">
</li>
</ul>
<pre>
{{$data}}
</pre>
</div>

</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var variable = Vue.createApp({
data: () => ({
tareas: [
{
nombre: "Estudiar",
completo: true
},
{
nombre: "Repasar",
completo: true
},
{
nombre: "Examinar",
completo: false
}
]
})
}).mount("#el");
</script>
</source>

'''INCREMENTAR'''

Como se puede ver, se produce un incremento de voto modificando su atributo directamente.
<source lang="javascript">
<body>
<div class="container">
<h1>veamos</h1>
<div>
<ul>
<li v-for="storie in stories"><button @click="storie.votos++">Vote {{storie.politico}}</button><pre v-text="storie.votos"></pre></li>
</ul>
</div>
<pre>{{$data}}</pre>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
const app = Vue.createApp({
data() {
return {
stories: [
{ politico: "julio", votos: 1 },
{ politico: "paco", votos: 2 },
{ politico: "raúl", votos: 3 },
{ politico: "jorge", votos: 4 }
]
};
},
methods: {
incrementVote(storie) {
storie.votos++;
}
}
}).mount(".container");

</script>
</source>

=== FILTRAR ===
<source lang="javascript">
<div id="aplicacion">
<input type="range" v-model="minimo" min="0" max="50">
<div v-text="minimo"></div>

<div v-for="dato in filtrar">
<div v-text="dato.descripcion"></div>
</div>

<input type="search" v-model="campo">

<div v-for="dato in busqueda">
<div v-text="dato.descripcion"></div>
</div>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = Vue.createApp({
data:() => ({

minimo: "5",

campo: "",

datos: [{
codigo: 1,
descripcion: 'papas',
precio: 12.52
}, {
codigo: 2,
descripcion: 'naranjas',
precio: 21
}, {
codigo: 3,
descripcion: 'peras',
precio: 18.20
}]
}),
computed: {
filtrar() {
return this.datos.filter((dato) => dato.precio > this.minimo);
},
busqueda() {
return this.datos.filter((dato) => dato.descripcion.includes(this.campo));
}

}
}).mount("#aplicacion")

</script>
</source>

==Componentes==

1. Crear una nueva instancia de Vue con Vue.createApp

2. Existen 3 Objetos básicos y fundamentales que estarán en la mayoria de las aplicaciones web: el data y methods.

3. Se debe crear un contenedor con un id igual al del objeto el para establecer el alcance del framework

Crear Nuestro primer Componente Básico

<source lang="javascript">
<body>
<div id="aplicacion">

<hola-mundo></hola-mundo>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>

//nueva instacia de Vue : Vue.createApp
var app= Vue.createApp({
data:() => ({ //capa de datos

}),
methods:
{

}
})

app.component('hola-mundo', { //debe coincidir con el nombre del componente(etiqueta html)
template: `<p>
Hola mundo
</p>`
});

app.mount('#aplicacion') // el elemento donde se aplicará Vue, en este caso un div con id = main);
</script>
</source>

'''PROPS'''

Props sirve para interpolar o pasar los valores que hayan dentro del atributo la etiqueta html (inglés, castellano) al objeto component
<source lang="javascript">
<body>
<div id="aplicacion">
<hola-mundo idioma="ingles"></hola-mundo>
<hola-mundo idioma="castellano"></hola-mundo>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>

var app= Vue.createApp({
})

app.component('hola-mundo', {
props: ['idioma'],
template: `<div>
<p v-if="idioma=='castellano'">Hola mundo</p>
<p v-if="idioma=='ingles'">Hello world</p>
</div>`
})

app.mount("#aplicacion")
</script>

</body>
</source>

Otro Componente Básico

<source lang="javascript">
<body>

<div id="app">
<ejemplo nombre="Juan" apellido="Perez"></ejemplo>
<ejemplo nombre="Alejandra" apellido="Quiroga"></ejemplo>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>

var app= Vue.createApp({
})

app.component('ejemplo', {
props: ['nombre', 'apellido'],
template: '<p> Hola {{nombre}} {{apellido}} </p>'
});

app.mount("#app")
</script>

</body>
</source>

Ejemplo de Componente, podemos ver que pasamos una peliculas "peliculon 1917" y una imagen en la etiqueta peliculas, que serán los valores que recibirá el componente para luego incluirlo en la plantilla.
<source lang="javascript">
<body>
<div class="container">
<peliculas titulo="peliculon 1917"
imagen="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSexz8IyOhoxR2ibVc78RHzpBCsvhDt3fx0wl99Qcxacht4gk9z"></peliculas>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">

var app = Vue.createApp({

})

app.component('peliculas', {

props: ['imagen', 'titulo'], //los props reciben los datos externos del html en este caso será "peliculon 1917" y la ruta de la imagen
template:
`<div>
<img width="100px" v-bind:src="imagen" :alt="titulo"/> 
<h2> {{titulo}} </h2>
</div>`
});

app.mount(".container")

</script>
</body>
</source>

Este ejemplo, viene a basarse en el ejemplo anterior pero además coje datos del JSON data y los va mostrando

<source lang="javascript">
<body>
<div class="container">
<div v-for="(dato, index) in datos"> 
<peliculas :key="index" :titulo="dato.titulo" :imagen="dato.imagen">
</peliculas>
</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script type="text/javascript">
var app = Vue.createApp({
data: () => ({
datos: [{
titulo: "star wars",
imagen: "https://vignette.wikia.nocookie.net/cine/images/8/88/Sw1.jpg/revision/latest?cb=20120930202439 "
},
{
titulo: "Sonic",
imagen: "https://www.smashbros.com/wiiu-3ds/images/character/sonic/main.png"
},
{
titulo: "Mario bros",
imagen: "https://imagenesparapeques.com/wp-content/uploads/2021/05/Mario-Bros-png-transparente.png"
}
]

})
})

app.component('peliculas', {
props: ['titulo', 'imagen'],
template: `<div>
<img width="100px" :src="imagen" :alt="titulo"/>
<h2>{{ titulo }}</h2>
</div>`
});

app.mount(".container")

</script>
</body>

</source>

'''Componentes: definición de métodos y modelo de datos'''

<source lang="javascript">
<body>
<div id="el" class="container">
<h1> Helados </h1>
<h2> Lista </h2>
<ul>
<li v-for="item in helados" :key="item.sabor">
<component-helado v-bind:helado="item"></component-helado>
</li>
</ul>
<h2> Seleccionados </h2>
<ul>
<li v-for="item in heladosSeleccionados" :key="item.sabor"> {{ item.sabor }} </li>
</ul>
</div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
var app = Vue.createApp({
data: () => ({
helados: [{
sabor: 'Chocolate',
seleccionado: false
},
{
sabor: 'Dulce de leche',
seleccionado: false
},
{
sabor: 'Frutilla',
seleccionado: false
},
{
sabor: 'Limón',
seleccionado: false
},
{
sabor: 'Vainilla',
seleccionado: false
}
]
}),
computed: {
heladosSeleccionados() {
return this.helados.filter(helado => helado.seleccionado);
}
}
});

app.component('component-helado', {
props: ['helado'],
template: `
<div>
<button class="btn btn-success" v-on:click="agregar(helado)" v-if="!helado.seleccionado"> + </button>
<button class="btn btn-danger" v-on:click="eliminar(helado)" v-if="helado.seleccionado"> - </button>
<span> {{ helado.sabor }} </span>
<hr/>
</div> `,
methods: {
agregar(helado) {
helado.seleccionado = true;
},
eliminar(helado) {
helado.seleccionado = false;
}
}
});

app.mount('#el');
</script>
</source>

==Ejercicios ==



https://www.tutorialesprogramacionya.com/vueya/

https://www.youtube.com/watch?v=jfEEQVdbl54&list=PLPl81lqbj-4J-gfAERGDCdOQtVgRhSvIT&index=7&t=0s

JQUERY

2024-03-06T17:48:02Z

Mfernandez: /* Exercicis */

= JQuery =

Llibreria:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

== Introducció ==

jQuery és un framework de JavaScript que permet simplificar el maneig dels documents HTML, l'arbre DOM, manejar esdeveniments, desenvolupar animacions i afegir interacció amb Ajax a pàgines web.

JQuery és programari lliure i de codi obert creat per John Resig que a més treballa per a Mozilla Corporation.

La primera versió de jQuery estable va aparèixer l'any 2006 i l'última, d'agost de 2023, és la versió 3.7.1.

L'ús de jQuery allibera al programador d'haver d'implementar els mètodes JavaScript que el framework conté. Entre altres facilitats, jQuery té implementats tots els seus mètodes per detectar el navegador de l'usuari i adaptar les
funcions a cada un d'ells.

La llibreria jQuery en resum ens aporta els següents avantatges:

* Estalvia moltes línies de codi.
* Fa transparent el suport de la nostra aplicació per als navegadors principals.
* Proveeix d'un mecanisme per a la captura d'esdeveniments.
* Proveeix un conjunt de funcions per animar el contingut de la pàgina de forma molt senzilla.
* Integra funcionalitats per treballar amb AJAX.

== PRINCIPIS D'ÚS ==
La forma d'interactuar amb la pàgina és mitjançant la funció $ (), un àlies de jQuery que rep com a paràmetre una expressió CSS o el nom d'una etiqueta HTML i retorna tots els elements que concorden amb l'expressió.

<source lang="java">
// Retorna l'element amb id="peu"
$("#peu")
// Retorna una matriu d'elements amb class="destacat"
$(".destacat")
</source>

Un cop obtinguts els elements, se'ls pot aplicar qualsevol de les funcions que facilita la biblioteca.

<source lang="java">
// S'elimina l'estil (removeClass()) i s'aplica un nou (addClass()) a tots els nodes amb class=" destacat "
$(".destacat").removeClass("destacat").addClass("nodestacat");
</source>

== CARREGAR LA WEB ==
Una de les funcions més utilitzades en les aplicacions JavaScript és la següent
<source lang="java">
window.onload = function () {,,,}
</source>

Forma abreviada amb crida funció
<source lang="java">
$(document).ready(inicializar);

function inicializar(){
$("#boton").click(function(){
alert("Boton pulsado");
});
}

</source>

Forma abreviada amb funció anònima
<source lang="java">
$(document).ready(function(){
...
});
</source>

Forma més abreviada
<source lang="java">
$(function() {...});
</source>

Passar una funció anomenada en lloc de funció anònima
<source lang="java">
function nomFunció() {
...
}

$(document).ready(nomFunció);
</source>

El gran avantatge de la funció de jQuery, és que la pàgina es pot manipular quan s'ha carregat el seu codi HTML (i per tant, s'ha construït l'arbre DOM de la pàgina) mentre que la funció de JavaScript espera que es carreguin tots els
elements de la pàgina, incloent totes les imatges. D'aquesta manera, les aplicacions realitzades amb jQuery poden respondre de forma molt més ràpida que les aplicacions JavaScript tradicionals.

== ACCÉS ALS ELEMENTS DEL WEB ==
D'altra banda, la funció getElementById () és possiblement la més utilitzada a desenvolupar aplicacions web, ja que permet seleccionar un element a partir de la seva atribut "id". A més, hi ha dues funcions relacionades:

getElementsByTagName () i getElementsByName (). jQuery inclou la funció $ ()
com una alternativa més ràpida i completa per seleccionar qualsevol element de la pàgina:

'''Amb JavaScript'''
<source lang="java">
// Seleccionar un elemento
document.getElementById("miParrafo");
// Seleccionar todos los enlaces
document.getElementsByTagName("a");
// Seleccionar todo lo anterior
----
// Seleccionar mediante la clase CSS
----
</source>

'''Amb jQuery'''
<source lang="java">
// Seleccionar un elemento
$("#miParrafo");
// Seleccionar todos los enlaces
$("a");
// Seleccionar todo lo anterior
$("#miParrafo, a")
// Seleccionar mediante la clase CSS
$(".miClase")
</source>

== SELECTORS ==
jQuery utilitza selectors per identificar aquells elements sobre els quals es vol actuar. Un selector és una cadena de caràcters que identifica un o diversos elements d'una pàgina web.
Els selectors bàsics utilitzats en jQuery són:

'''Selector d'etiquetes.'''
<source lang="java">
$("h2")
//selecciona tots els elements que tenen etiqueta <h2> ... .. </ h2>
</source>
* Selector per etiqueta/contingut.
<source lang="java">
$("p:contains('Hola')")
//selecciona els paràgrafs (<p> ... </ p>) que continguin la paraula "Hola"
</source>

* Selector per etiquetes/classe.
<source lang="java">
$("li.nombreClase")
//selecciona els li que tinguin assignada la classe CSS nombreClase
</source>

'''Selector per identificador'''
<source lang="java">
$ ("#meusComentaris")
// selecciona tots els elements que tenen l'atribut id = meusComentaris
</source>
'''Selector per classe CSS'''
<source lang="java">
$ (".miClase")
// selecciona tots els elements que tenen com a atribut class = "miClase"
</source>
'''Selectors de diversos elements'''
<source lang="java">
$ ("p, a")
// Selecciona tots els <a> i tots els <p>
</source>

[[Fitxer:selectors.png]]

'''Selectors posicionals'''

Els selectors posicionals estan basats en les relacions posicionals entre elements segons l'estructura DOM del document.


[[Fitxer:selectors_posicionals.png]]

'''Selectors parent> child'''

Els selectors parent> child permeten que es pugui accedir als elements que siguin fills directes d'altres.
<source lang="java">
// selecciona totes les etiquetes b que són filles directes dels paràgrafs
$ ("p>b")
</source>
<source lang="java">
// selecciona totes les etiquetes que són filles directes de l'element amb id = "capa"
$ ("#capa>*")
</source>

'''Selectors de formulari'''

Els selectors de formulari permeten seleccionar elements de formulari de forma específica.


[[Fitxer:selectors_formulari.png]]

'''Selectors de jerarquia'''

{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;"
! align="left" width="200 px" style="background:Lavender; color:Black"|Selector
! align="left" width="350 px" style="background:Lavender; color:Black"|Explicació
|-
| $("p a")|| Selector de descendents: selecciona elements 'p' que baixin d'un altre element 'a' (CSS 1)
|-
| $("div.entrada h2")|| Selector de descendents: selecciona elements que baixin d'un altre element (CSS 1)
|-
| $("div.entrada> h2") || Selector de fills: selecciona elements que siguin fills directes d'un altre element (CSS 2)
|-
| $("tr:nth-child(1)") || Pseudo classe fill: selecciona l'enèsim fill d'un element (CSS 3)
|-
| $("tr:first-child") || Pseudo classe primer fill: selecciona el primer fill d'un element (CSS 2)
|-
| $("tr:last-child") || Pseudo classe últim fill: selecciona l'últim fill d'un element (CSS 3)
|-
| $("div:only-child") || Pseudo classe fill únic: selecciona els elements que siguin un únic fill de altres elements (CSS 3)
|-
| $("td:first)") || Pseudo classe primer: selecciona el primer element d'un grup de elements. Equival a eq (0) (jQuery)
|-
| $("td:last)") || Pseudo classe últim: selecciona l'últim element d'un grup de elements (jQuery)
|-
| $("body > div:has(a)") || Selecciona el/s fill/s directe/s <nowiki><div> de <body></nowiki> que contenen enllaços
|-
| $("td:gt (0)") || Pseudo classe més gran que: selecciona tots els elements amb un índex major que l'indicat en un grup d'elements (jQuery)
|-
| $("td:lt (3)") || Pseudo classe menor que: selecciona tots els elements amb un índex menor que l'indicat en un grup d'elements (jQuery)
|-
| $("td:even") || Pseudo classe parell: selecciona els elements parells d'un grup d'elements (jQuery)
|-
| $("td:odd") || Pseudo classe senar: selecciona els elements imparells d'un grup de elements (jQuery)
|-
| $("div.entrada~p") || Selector de germans: selecciona tots els germans que es troben precedits d'un altre element (CSS 3)
|-
| $("div.entrada+p") || Selector de proper adjacent: similar a l'anterior, però només selecciona el adjacent directe (CSS 2)
|-
| $("h2:parent") || Pseudo classe pare: selecciona els pares d'altres elements (jQuery)
|-
| $(":empty") || Pseudo classe buit: selecciona els elements que no tinguin cap fill,incloent text pla (CSS 3)
|}

[http://www.w3schools.com/cssref/trysel.asp Més Exemples]

== TAULES DE SELECTORS ==
Quan una funció jQuery retorna diversos elements, ho fa en format de taula,on cada element està identificat per una posició de la mateixa. llavors mitjançant: eq (índex) podem obtenir l'element de la llista a què es fa referència
de la posició índex + 1, tenint en compte que les llista en jQuery comencen comptar des de 0.
Per exemple, en la següent instrucció emmagatzema una referència al tercer enllaç que implementa la classe "enlaceAmigos".

<source lang="java">
enllaç = $ ('a.enlaceAmigos:eq(2)')
</source>

A continuació es mostra com accedir al paràgraf número 3 (segona posició)

<source lang="java">
miParrafo = $ ("p:eq(2)")
</source>

== OPERADORS ==
Es poden utilitzar els operadors ^ =, $ = i * =.
* ^ = per obtenir els elements d'una pàgina HTML que continguin un atribut que comenci per un valor determinat.
* $ = per obtenir els elements d'una pàgina HTML que acabi per un valor determinat.
* * = per obtenir els elements d'una pàgina HTML que contingui un valor determinat.

<source lang="java">
$ (document) .ready (function () {
// fa referència als enllaços que comencen per mailto:
$ ('a[href^="mailto:"]'). addClass ('mailto');
// fa referència als enllaços que facin referència a un fitxer pdf
$ ('a[href$=".pdf"]'). addClass ('enlacePdf');
// fa referència a un enllaç a sitio.com
$ ('a[href*="sitio.com"]'). addClass ('lloc');
});
</source>

Aquestes classes CSS han d'estar prèviament definides a la pàgina, per exemple:
<source lang="java">
.mailto {color: blue; }
.enlacePdf {color: green; }
.sitio {color: yellow; }
</source>
D'aquesta manera, els enllaços de tipus mailto apareixeran en blau, els enllaços a fitxers pdf verds i els enllaços a "sitio.com" apareixeran en groc.

=== Utilitzant Events (Event handler) ===
Si volem afegir esdeveniments als diferents elements que apareixen a la pàgina web utilitzant Jquery podem fer-ho molt fàcilment:
<source lang="java">
$('#boton').click(function() {
$('#missatge').show(); //es mostra el missatge
});
</source>
Però quan s'executa un element moltes vegades volem utilitzar l'element on està l'esdeveniment per tal de fer alguna cosa amb els seus valors. Jquery ens permet utilitzar la paraula reservada '''this'''.
<source lang="java">
$('#Boton').click(function() {
$(this).hide(); // el botó desapareix
});
</source>
'''$(this)'''proporciona una manera més maca d'accedir al botó en comptes de tornar a seleccionar-ho.
Amb JQuery podem fer coses molt potents com el botó 'toggle':
<source lang="java">
$('#toggleBoto').click(function() {
$('#missatge').toggle();
if ($('#missatge').is(':visible')) {
$(this).val('Amaga'); //val canvia o retorna el valor
} else {
$(this).val('Mostra');
}
});
</source>

== Exercicis ==

*Desenvolupar una pàgina que mostri dos títols de primer nivell, en ser pressionats canviar el color de font, fons i la font del text.
:[[solucio_titols]]


*Confeccionar una taula amb 5 files. Fer que canvi de color la fila que es pressiona amb el ratolí.
:[[solucio_taula]]


*Disposar dues llistes després quan es premi un botó amagar tots els li de la primera llista.
:[[solucio_ocultar_llista]]


*Mostrar una sèrie de llenguatges de programació i aplicar un estil ressaltat per a aquells llenguatges que són orientats a objectes. Quan es premi un botó afegir la propietat background-color a tots els elements d'aquesta classe.
:[[solucio_llenguatges]]


== TIPUS D'ESDEVENIMENTS ==
jQuery disposa de tantes funcions com esdeveniments estàndard de JavaScript. El nom de cada funció és el mateix que el de l'esdeveniment, sense l'habitual prefix "On": focus (), blur (), keyup (), mouseover (), MouseUp (), resize (), submit (), etc.

'''ESDEVENIMENTS RELACIONATS AMB EL RATOLÍ'''

* '''[http://www.w3schools.com/jquery/event_click.asp click]''' Detecta l'esdeveniment clic quan es produeix en un element de la pàgina.
* '''dblclick ()''' Detecta un esdeveniment quan es produeix un doble clic sobre un element.
* '''hover()''' Aquesta funció en realitat serveix per manejar dos esdeveniments, quan el ratolí entra i surt de sobre d'un element. Per tant s'ha d'enviar dos funcions en comptes d'una.
* '''[http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_mup_mdown_ref mouseDown()]''' Detecta un esdeveniment quan l'usuari fa clic al moment que pressiona el botó i independentment de si el deixa anar o no. serveix tant per al botó dret com l'esquerre del ratolí.
* '''[http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_mup_mdown_ref MouseUp() ]''' Detecta un esdeveniment quan l'usuari ha fet clic i després deixa anar un botó del ratolí. L'esdeveniment MouseUp es produeix només en el moment dedeixar anar el botó.
* '''mouseenter ()''' Detecta l'esdeveniment es produeix en situar el ratolí a sobre d'un element de la pàgina.
* '''mouseleave ()''' Detecta un esdeveniment quan el ratolí surt de sobre d'un element de la pàgina.
* '''mousemove ()''' Detecta l'esdeveniment que es produeix en moure el ratolí sobre un element de la pàgina.
* '''[http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_mouseover_mouseout mouseout ()]''' Detecta l'esdeveniment que es deslliga quan l'usuari surt amb el ratolí de la superfície d'un element.
* '''mouseover ()''' Detecta l'esdeveniment que es produeix quan el ratolí està sobre un element, però té com a particularitat que pot produir diverses vegades mentre es mou el ratolí sobre l'element, sense necessitat d'haver sortit.

'''ESDEVENIMENTS RELACIONATS AMB EL TECLAT'''

* '''keydown ()''' Detecta l'esdeveniment que es produeix en el moment que es pressiona una tecla del teclat, independentment de si s'allibera la pressió o es manté. Es produeix una única vegada en el moment exacte de la pressió.
* '''keypress ()''' Detecta l'esdeveniment que ocorre quan es digitals un caràcter, o es pressiona altre tipus de tecla. És com l'esdeveniment keypress de Javascript, per la qual que s'entén que keypress () s'executa una vegada, com a resposta a una pulsació i immediat alliberament de la tecla, o diverses vegades si es prem una tecla i es manté premuda.
* '''keyup ()''' Detecta l'esdeveniment que es produeix en el moment d'alliberar una tecla, és a dir, en deixar de pressionar una tecla que teníem premuda.

<source lang="java">
function operaEvento(evento){
$("#loescrito").html($("#loescrito").html() + evento.type + ": " + evento.which + ", ")
}
$(document).ready(function(){
$(document).keypress(operaEvento);
$(document).keydown(operaEvento);
$(document).keyup(operaEvento);
})
</source>

'''ESDEVENIMENTS COMBINATS TECLAT-RATOLÍ'''

* '''[http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_blur_alert blur () ]''' L'esdeveniment blur es llança sobre un element que acaba de perdre el focus. Normalment aquest esdeveniment és aplicable a inputs de formularis.

* '''Focusin ()''' Esdeveniment que es produeix quan l'element guanya el focus de la aplicació, que pot produir en fer clic sobre un element o alpressionar el tabulador i situar el focus en aquest element.
* '''focusout ()''' Ocorre quan l'element perd el focus de l'aplicació, que pot ocórrer quan el focus està en aquest element i premem el tabulador,o ens movem a un altre element amb el ratolí.
* '''focus() ''' Serveix per a definir accions quan es produeix l'esdeveniment focus de Javascript, quan l'element guanya el focus de l'aplicació

== ALTRES ESDEVENIMENTS ==
* '''[http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_resize resize ()]''' Aquest esdeveniment és llança quan es canvia la mida de la finestra.Aquest esdeveniment només s'envia a l'objecte window.
* '''[http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_scroll scroll ()]''' Aquest esdeveniment s'envia als elements que canvien el seu scroll davant d'una acció de l'usuari. S'aplica als objectes Window System, frames i elements amb la propietat overflow CSS posada en estat "scroll".
* '''[http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_select_ref select ()]''' L'esdeveniment select es llança quan l'usuari selecciona un text del element sobre el qual es gestiona l'esdeveniment. Aquest esdeveniment només s'aplica als textarea i als inputs de tipus text.
* '''submit ()''' Aquest esdeveniment es llança quan un usuari està tractant d'enviar un formulari. Aquest esdeveniment només és vàlid per a formularis. depenent del navegador és possible enviar el formulari sense necessitat de punxar en un botó, simplement prement la tecla ENTER. Quan això succeeix el esdeveniment no es llança, per la qual cosa hem de parar especial atenció a aquest comportament per gestionar en el seu corresponent esdeveniment "Keypressed".
* '''[http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_toggle toggle ()]''' L'esdeveniment toggle s'utilitza per generar comportaments canvi d'estat generats en punxar sobre un element. Per exemple, pot interessar que en punxar sobre un element es visualitzi i que al tornar a punxar s'oculti. Toggle ens permet fer això associant dos o més funcions al mateix esdeveniment que es van executant de forma seqüencial.
La primera vegada que es punxa sobre l'element (i totes les vegades senars), es executa la primera funció i la segona vegada que es punxa l'element (i totes les vegades parells) s'executa la segona funció:
<source lang="java">
$ (document) .ready (function () {
   $ ("p"). toggle (function () {
        alert ("M'acabes d'activar");
     }, function () {
          alert ("M'acabes de desactivar");
   });
});
</source>
* '''unload ()''' L'esdeveniment unload es llança quan un usuari navega fora de la pàgina web o es dirigeix cap a una altra part de la web. S'executa sempre, fins i tot si l'usuari tanca el navegador (No s'utilitza desde la versió 1.8)

== DEFINIR / ELIMINAR ESDEVENIMENTS: ON/ OFF ==

'''ON() '''

El mètode On () permet definir qualsevol tipus d'esdeveniments i els enllaça amb el controlador d'esdeveniment que el programador desitgi.

Va ser introduïda en jQuery 1.7 per portar una mica de "ordre" a les anteriors funcions ('''delegate(), live(), bind()'''). On() té tots els avantatges de delegate () però al seu torn serveix com la funció bind () depenent de com ho fem servir.

La seva sintaxi és la següent:

''Exemples''
<source lang="java">
//Un event
$("p").on("click", function() {
console.log( "click" );
});

//Multiples events
$("p").on({
"click": function() { console.log( "clicked!" ); },
"mouseover": function() { console.log( "hovered!" ); }
});
</source>

Asignació de una funció a diversos events al mateix temps
<source lang="java">
var functionControlador = function (event) {
alert("Heyyy Hola mon!!");
};

$(document).ready(function () {
$("p").on("click mouseenter mouseleave", functionControlador);
});
</source>

Associar més events a elements fills

https://jfraguio.wordpress.com/2014/12/10/recorrer-el-dom-de-forma-eficiente-con-jquery-delegacion-de-eventos/

'''OFF()'''

Al igual que amb la asocación d'esdeveniments, també arribava amb l'acció contrària.

L'objectiu principal de la nova instrucció és reemplaçar a tots d'una manera consistent.

La sintaxi de off () resulta similar a la d'on ():

<source lang="java">
$('#container a').off('click');
</source>

Amb off (), tots els paràmetres són opcionals. Quan s'utilitza en la seva forma més simple, $ (elements) .off (), s'eliminen tots els esdeveniments associats al conjunt seleccionat.

== MÈTODES ==
'''text ()'''

Per saber el contingut d'un element l'objecte jQuery compta amb un mètode anomenat text (), que es pot utilitzar per
* Modificar el contingut d'un element
<source lang="java">
$ ("#MiElemento").text("paràgraf Nou")
</source>
* Obtenir el contingut d'un element
<source lang="java">
var contingut = $("#miElemento").text ()
</source>
''Exemple''

La següent funció jQuery canvia el text del paràgraf que està en primera posició quan es prem dobleclick en qualsevol paràgraf de la web, a més mostra el contingut anterior del paràgraf en una finestra.
<source lang="java">
$ (document).ready(function () {
   $ ("p").dblclick(function () {
     var contingut = $("p:eq(1)").text ()
     alert (contingut);
     $ ("p:eq(1)").text("nou text");
   })
});
</source>

'''html ()'''

És possible afegir blocs de codi HTML a partir d'un element de la pàgina. Aquesta propietat és bàsicament = innerHTML del DOM.
* Per afegir un bloc HMTL
<source lang="java">
$ (element).html(bloque_HTML)
</source>
* Per obtenir el bloc HTML contingut a partir de l'element que fa referència l'objecte jQuery.
<source lang="java">
$ (element).html()
</source>

''Exemple''
<source lang="java">
function inicializarEventos(){
$("#boton1").click(presionBoton1);
}
function presionBoton1(){
var x;
x=$("#divFormulari");
x.html("<form>Ingrese nombre:<input type='text' id='nombre'> <br>Introduzca clave:<input type='text' id='clave'> <br> <input type='submit' value='confirmar'></form>");
}
</source>

Un altre exemple molt comú és canviar el text que hi ha en un element html. Amb Jquery es pot fer de dues maneres que donen resultats idèntics:

<source lang="java">
// Primera Manera:
$("selector").html("Acabo d'afegir Text a un element");
// Segona Manera:
$("selector")[0].innerHTML = "Acabo d'afegir Text a un element";
</source>

Que passaria si el 'selector' retornes més d'un element?
Doncs que si utilitzem la 1a manera, es posaria el text "Acabo d'afegir Text a un element" a tots els elements seleccionat. Molt útil quan volem canviar tot el HTML d'un grup d'elements.
I amb la segona manera?
Hauriem de fer:

<source lang="java">
var elements = $("selector");
for(var i=0;i<elements.length;i++)
elements[i].innerHTML =
"Acabo d'afegir Text a un grup de nodes";
</source>
Aquest últim exemple és MOLT POC RECOMANAT. És molt més pràctic i eficient utilitzar la 1a manera a l'hora de programar amb JQuery.

== Exercicis ==

*Desenvolupar una pàgina que mostri l'ocupació dels mètode text (), text (valor), html () i html (valor)


*Disposar dos botons, en ser pressionat el primer crear un formulari en forma dinàmica que sol·liciti el nom d'usuari i la clau. Si es pressiona el segon botó mostrar tots els elements HTML del formulari prèviament creat.


*tenim dos paràgrafs amb text, un input i tres botons, es tracta veure la diferència entre ells. per això quan cliquem sobre el primer botó caldrà canviar el text (text), el segon el html (HTML) i el tercer el valor de l'input (value)


*Tenemos tres botones, un parrafo que pone "texto original" y una tabla 3x3 con texto, cuando clicamos el primer botón muestra un mensaje de alerta con el contenido del párrafo, cuando apretamos el segundo botón modifica el contenido del párrafo con otro texto y el tercer botón cambia el contenido de texto de la tabla.


*Crear una capa cuyo id será "wrapper".Tendré dos botones que harán las siguientes acciones:
Pintar una capa roja dentro de wrapper, es decir, insertar el siguiente código
<source lang="php">
<div style="background:red; width:300px; height:300px"></div>
</source>
Mostrar un alert con el código fuente que hay dentro de wrapper.


'''attr()/removeAttr'''

El método attr() permite agregar propiedades a un elemento HTML y recuperar el valor
de su propiedad.
* Recuperar el valor de la propietat
<source lang="java">
$(elemento).attr(nombre_propiedad)
</source>
* Dona valor a una propietat
<source lang="java">
$(elemento).attr(nombre de propiedad,valor)
</source>
* Eliminar una propietat
<source lang="java">
$(elemento).removeAttr(nombre de propiedad)
</source>

''Exemple''
<source lang="java">
$(document).ready(function(){
$("p").click(function(){
$("#miEnlace").attr("title","Pepe");
})
});
</source>

'''addClass / removeClass / toggleClass'''

Els mètodes addClass i removeClass ens permeten associar i desassociar una classe a un element o conjunt d'elements HTML.
* Afegir una classe CSS a un element.
<source lang="java">
$(element).addClass("nombre_clase")
</source>
* Eliminar una classe CSS d'un element
<source lang="java">
$(element).removeClass("nombre_clase")
</source>
<source lang="java">
.azul{ //clase css
color: #0000cc;
}

//dins del script
$("#elBotonA").click(asociarClase);

function asociarClase()
{
var x=$("h1");
x.addClass("azul");
}
</source>

Per activar o desactivar una classe usem '''[http://www.w3schools.com/jquery/html_toggleclass.asp toggleClass]'''
<source lang="java">
$("div").toggleClass("nombre_clase");
</source>

== Exercicis ==

*Tenim una pàgina web amb un text "lorem ipsum ...", i dins d'ella un input costat d'un botó que s'introduirà una paraula (no utilitzar id), en el moment que cliquem s'esborra el text introduït.


*En la pàgina web https://daneden.github.io/animate.css/ podem utilitzar diferents formes de fer animacions amb el text, utilitza jquery per a fer animacions. crea un div que contingui un text que quan passi el ratolí per damunt faci l'animació. Llegiu la documentació oficial

:[[solucio_animate]]


*Definir una taula sense l'atribut border. En pressionar un botó afegir-li la propietat border amb el valor 1. Si es pressiona un altre botó recuperar i mostrar el valor de l'atribut border i finalment si es pressiona un altre botó eliminar la propietat border.


*En prémer el botó, canviar la imatge per una aleatòria. Usar "attr" per a canviar la direcció de la imatge.


*Disposar un div amb un conjunt de paràgrafs. Quan es premi un botó associar-li una classe que es pressioni altre desassociar d'aquesta classe.


*utilitzant addClass, fer que en prémer un botó agafe els estils de la llibreria animate.css perquè es produeixi l'animació corresponent. Als dos segons deurà eliminar la classe (pista setTimeout)


*Tenemos un formulario que en su interior existe un label "introduce valores", un input de type=text y un botón. El fin consiste en borrar la etiqueta por ello debe usarse la propiedad "find" que busca en el interior de un elemento. Para que funcione debe usarse dos eventos el dobleclick y salir del botón.


*Tenemos un div con id="primero" que dentro tiene otro div luego un span, luego otro div y por último dos span seguidos. Queremos remarcarlo de rojo el segundo span, debe usarse la propiedad la propiedad find.


=== Utilitzant CSS ===
Després que hem seleccionat els elements som capaços d'afegir i treure estils, classes, i més.
Exemple per obtenir un atribut css:
<source lang="java">
$(document).ready(function() {
var fontSize = $('#productes tbody tr:first').css('font-size');
alert(fontSize);
});
</source>
Exemple per canviar un atribut css:
<source lang="java">
$(document).ready(function() {
$('#productes tbody tr:even').css('background-color','#dddddd');
});
</source>
Però i si es vol canviar o afegir dos o més atributs?
<source lang="java">
$('#productes tbody tr:even').css('background-color','#dddddd');
$('#productes tbody tr:even').css('color', '#666666');
</source>
Podem simplificar lo anterior amb una sola crida :
<source lang="java">
$('#productes tbody tr:even').css({
'background-color': '#dddddd',
'color': '#666666',
'font-size': '11pt',
'line-height': '2.5em'
});
</source>

[https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_element_classlist_add classList.add]

<source lang="javascript">
document.getElementById("myDIV").classList.add("mystyle");
</source>

=== Afegir elements al DOM ===
Podem afegir elements al HTMl utilitzant JQUERY:
<source lang="java">
$("button").click(function(){
$("<span>Hello world!</span>").insertAfter("p"); //inserta la etiqueta "<span>Hello world!</span>" amb text després de <p>
});

//altre exemple

$("<p>insertar després del div la etiq p</p>").insertAfter($("#div"));
</source>
<source lang="java">
$("button").click(function(){
$("<span>Hello world!</span>").insertBefore("p"); //inserta la etiqueta "<span>Hello world!</span>" amb abans de <p>

});
</source>
Altres funcions per afegir elements:
<source lang="java">
//Añadir un texto y unas etiquetas HTML al elemento con id="miElemento".
$("#miElemento").append("<p>Nuevo contenido de miElemento</p>")
//Para añadir un elemento al final de la lista
$("ul").append("<li>otro item al final</li>");
//Para añadir un elemento al principio de la lista
$("ul").prepend("<li>otro item al principio</li>");
</source>
Una altra forma de fer el mateix però al revés.
<source lang="java">
$('<strong>Començar!</strong>').prependTo('#missatge');
$('<strong>Acabar!</strong>').appendTo('#missatge');
</source>

=== ELIMINAR elements al DOM ===
Fins i tot, podem esborrar elements:

.remove (), no només elimina el contingut d'un element, sinó que també elimina l'element en si.
<source lang="java">
$('#missatge').remove();
</source>

.empty () elimina el contingut (NO l'element en si)i tots els descendents d'un element. Per exemple, si fas servir .empty () en un 'ol', també eliminaràs tots els seus 'li' i el seu text.

<source lang="java">
$('#missatge').empty();
</source>

=== RECORRER DOM ===

Accedir al [http://www.w3schools.com/jquery/traversing_closest.asp pare]:
El mètode closest retorna el primer ancestre de l'element seleccionat.
<source lang="java">
$("span").closest("ul").css({"color": "red", "border": "2px solid red"}); //canvia el css del pare <ul>
//<span> seria el fill i <ul> seria el pare, avi..

var id = $("span").closest("ul").attr("id"); //obté la id del element pare
</source>

[http://www.w3schools.com/jquery/traversing_parent.asp parent()]

El mètode parent () retorna l'element pare directe de l'element seleccionat.
<source lang="java">
$("span").parent().css({"color": "red"});
</source>

[http://www.w3schools.com/jquery/traversing_parents.asp parents()] Padres, abuelos, bisabuelos, tataranietos…

El mètode parents () retorna tots els elements ancestral del element seleccionats.
<source lang="java">
$("span").parents().css({"color": "red"});
</source>

[http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_traversing_next next()]
<source lang="java">
$("li.primer").next().css({"color": "red"});
</source>

El mètode next() retorna el pròxim element germà de l'element seleccionat.

[http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_traversing_prev prev()]
<source lang="java">
$("li.primer").prev().css({"color": "red"});
</source>

El mètode prev() retorna l'anterior element germà de l'element seleccionat.

'''[http://www.w3schools.com/jquery/traversing_find.asp find()]''' Hijos, nietos, bisnietos, tataranietos

El mètode find() retorna els elements descendents de l'element seleccionat.
<source lang="java">
$(document).ready(function(){
$("ul").find("span").css({"color": "red"}); //dibuixa de color roig el span dins del ul
});
</source>

'''[http://www.w3schools.com/jquery/traversing_children.asp children()]'''

El mètode children() retorna tots els fills directes de l'element seleccionat.
<source lang="java">
$(document).ready(function(){
$("ul").children().css({"color": "red"});; //dibuixa de color roig el fills directes.
});
</source>

'''[http://www.w3schools.com/jquery/traversing_siblings.asp siblings()]'''

El mètode siblings() retorna tots els elements germans de l'element seleccionat.
<source lang="java">
$(document).ready(function(){
$("li.start").siblings().css({"color": "red"}); //dibuixa de color roig el germans del element seleccionat.
});
</source>

== Exercicis ==

*tenemos un div que será un cuadrado rojo de 400x400 px, además tenemos 6 botones. El primero de ellos, eliminará todos los elementos que se encuentren dentro de él. El segundo botón inserta un cuadrado verde mediante la función .html de 50x50px, el tercer botón añadirá un elemento al final que tendrá de fondo azul, el cuarto botón añadirá un elemento al principio de fondo amarillo, el quinto botón eleminará el último elemento y el sexto botón eliminará el primer elemento


*Implementar una página que contenga una lista con cuatro items. El primer botón, elimina los elementos de la lista(li), el segundo restaura los elementos, el tercero añade otro item, el cuarto añade un item al principio, el quinto elimina un elemento del final, el sexo elimina un elemento del principio, el sexto elimina los dos primeros(usar lt),el septimo elimina los dos últimos, el octavo inserta un item después del ul.


== EFECTES VISUALS ==
Totes les aplicacions web modernes incorporen petits efectes visuals i animacions que, si s'utilitzen de forma adequada, milloren la interacció amb la aplicació i la seva usabilitat. jQuery inclou de sèrie els efectes visuals més utilitzats
pels dissenyadors, podent controlar mitjançant les seves opcions la durada de cada efecte.

'''[http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_show hide / show]'''

jQuery permet gestionar els efectes visuals d'un pàgina web utilitzant, entre altres, els mètodes hide (amagar) i show (mostrar). Aquests mètodes ja els hem vist, però en aquest apartat veurem com aconseguir ocultar i mostrar informació a diferents velocitats.
Mostra un element de forma normal (normal), ràpida (fast) o lenta (slow), també es pot indicar els milisegons de l'acció. També és possible indicar una funció perquè s'executi en finalitzar l'efecte visual.
<source lang="java">
$(element).show (["fast" / "slow" / "normal" / "mil·lisegons"], [function])
</source>
Perquè es mostri de forma instantània s'omet qualsevol paràmetre.
Els paràmetres funcionen de forma equivalent amb hide (ocultar)
<source lang="java">
$(element) .hide (["fast" / "slow" / "normal" / "milisegons"], [function])
$(#id).hide("slow");
$(#id).hide("slow",function(){alert(hola!!)});
</source>

'''fadeIn / fadeOut / [http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_fadeto fadeTo]'''

Aquests mètodes provoquen també que un element es mostri (fadein) o s'oculti (fadeout) però actua sobre la transparència dels objectes.
La sintaxi i els atributs són equivalents als mètodes show / hide
<source lang="java">
$(element).fadeIn (["fast" / "slow" / "normal" / "mil·lisegons"], [function])
$(element).fadeOut(["fast"/"slow"/"normal"/"milisegundos"],[function])
</source>

El mètode '''fadeTo''' pot modificar la opacitat d'un element fins a un valor determinat que es passa per paràmetre.
Podem inicialitzar aquest mètode de les següents formes:

''fadeTo ([velocitat], [valor d'opacitat])''

Indiquem la velocitat de transició de l'estat actual al nou estat (slow / normal / fast) o un valor indicat en mil·lisegons.
El valor de l'opacitat és un nombre real entre 0 (transparent) i 1 (opac) També podem cridar al mètode fadeTo amb tres paràmetres:
<source lang = "java">
$(element).fadeTo ([velocitat], [valor d'opacitat], [funció])
$("#descripcion").fadeTo("fast",0.5);}
</source>
Aquesta segona estructura de la funció permet executar una funció quan finalitza la transició.
Cal tenir en compte que fadeTo per més que indiquem el valor 0 en opacitat l'espai que ocupa l'element a la pàgina seguirà ocupat per un requadre buit.

'''[http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_toggle toggle()]'''

Ja hem vist el mètode toggle per alternar l'execució de dues funcions, però en aquest apartat el veurem per intercanviar la visibilitat d'un element.
El mètode toggle permet ocultar un element si aquest està visible i mostrar si està ocult.
<source lang = "java">
$(element).toggle([“fast”/”slow”/“normal”/milisegundos],[function])
</source>

'''[http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate Animate()]'''

El mètode animate permet realitzar animacions personalitzades. La seva sintaxi és la següent:
<source lang="java">
$ (element).animate ({propietats}, [durada], [f_animación], [callback])
</source>
on:

* propietats, és l'únic paràmetre obligatori i s'utilitza per indicar que atributs CSS es volen actualitzar amb nous valors. JQuery només permet el canvi de propietats CSS que tinguin valors numèrics. per exemple
podríem canviar la mida de la lletra però no la seva font. La mesura per defecte és la de píxels. Els nous valors s'han d'indicar de forma absoluta o de forma relativa utilitzant la notació "+ = nº" p "+ = nº"

* durada, indica la durada de l'animació en milisegons o un valor identificatiu de la velocitat (normal, fast o slow).

''Exemple''

<source lang="java">
$("#btn1").click(function(){
$("#box").animate({height: "300px"},2000, "linear",function(){alert("hola");})
</source>

'''[http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_slidetoggle slideToggle()]'''

Quan l'animació ha acabat podem programar que s'executi una funció automàticament (callback function):
<source lang="java">
$('#missatge').slideToggle('slow', function() {
alert('s'ha acabat l'animació!')
});
</source>

'''[http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_slideup_slidedown slideUp()/ slideDown()]'''

Però potser, el que volem és que desaparegui el botó:
<source lang="java">
$('#missatge').slideUp('slow', function() {
$('#toggleBoto').fadeOut();
});
</source>

'''[https://jqueryui.com/draggable/ Draggable]'''

jQuery UI té una funció .draggable () que permet arrossegar qualsevol element d'HTML; pots fer clic i moure-ho a qualsevol part de la pàgina. Però hi ha que utilitzar la llibreria
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

<source lang="java">
$( "#draggable" ).draggable();

</source>

== Exercicis ==



=== Molt més ===
Com ja heu vist, amb JQuery podeu fer moltes coses de manera ràpida i fàcil. Us recomano aquests llibres : <p> Earle Castledine, Craig Sharkie, "jQuery: Novice to Ninja", Ed. Sitepoint, 2010, ISBN 978-0-9805768-5-6 </p><p>Bear Bibeault, Yehuda Katz, "JQuery in Action Second Edition", Ed. Manning, 2010, ISBN 978-935182-32-0 </p>

https://ubilabs.github.io/geocomplete/

==Exercicis==


[[Fitxer:programador.gif]]

https://cybmeta.com/comprobar-sin-un-checkbox-esta-seleccionado-con-jquery