<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JAVASCRIPT</title>
<link href="css/reset.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div id="header"><h1>Zenva Love</h1></div>
<div id="main">
<div class="row">
<div class="row">
<label>Gender</label>
<select id="gender">
<option value="F">Female</option>
<option value="M">Male</option>
<option value="A">All</option>
</select>
</div>
<div class="row">
<label>Hobbies</label>
<input type="text" id="hobby" />
</div>
<div class="row">
<button id="searchBtn">Search</button>
</div>
</div>
<div id="results">
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
var users = [
{
name: 'Lucy',
gender: 'F',
hobby: 'pets',
avatar: 'avatar1.png'
},
{
name: 'Betty',
gender: 'F',
hobby: 'pets',
avatar: 'avatar2.png'
},
{
name: 'Ronald',
gender: 'M',
hobby: 'music',
avatar: 'avatar3.png'
},
{
name: 'Christopher',
gender: 'M',
hobby: 'sports',
avatar: 'avatar4.png'
},
{
name: 'Ximena',
gender: 'F',
hobby: 'reading',
avatar: 'avatar5.png'
},
{
name: 'Paul',
gender: 'M',
hobby: 'shopping',
avatar: 'avatar6.png'
},
{
name: 'Charlie',
gender: 'M',
hobby: 'pets',
avatar: 'avatar7.png'
},
];
window.addEventListener('load', function() {
function search() {
//get hobby
var hobbyField = document.getElementById('hobby');
var hobby = hobbyField.value;
//get gender
var genderField = document.getElementById('gender');
var selected = genderField.selectedIndex;
var gender = genderField.options[selected].value;
console.log(gender);
var resultsHTML = '';
var numUsers = users.length;
for(var i = 0; i < numUsers; i++) {
if (gender == 'A' || gender == users[i].gender) {
if (hobby == '' || hobby == users[i].hobby) {
resultsHTML += '<div class="person-row">\
<img src="images/' + users[i].avatar + '" />\
<div class="person-info">\
<div>' + users[i].name + '</div>\
<div>' + users[i].hobby + '</div></div>\
<button>Add as friend</button></div>';
}
}
}
results.innerHTML = resultsHTML;
};
var results = document.getElementById('results');
var searchBtn = document.getElementById('searchBtn');
searchBtn.addEventListener('click', search);
search();
});
martes, 22 de marzo de 2016
obtener los valores de un input
window.addEventListener('load', function() {
var results = document.getElementById('results');
var searchBtn = document.getElementById('searchBtn');
searchBtn.addEventListener('click', function() {
results.innerHTML = 'hola<br/>mundo <div style="background-color:blue;">como estas</div>';
//get hobby
var hobbyField = document.getElementById('hobby');
var hobby = hobbyField.value;
console.log(hobby);
//get gender
var genderField = document.getElementById('gender');
var selected = genderField.selectedIndex;
var gender = genderField.options[selected].value;
console.log(gender);
});
lunes, 21 de marzo de 2016
eventos con addEventListener
window.addEventListener('load', function() {
console.log('se ha cargado la pagina');
var searchBtn = document.getElementById('searchBtn');
searchBtn.addEventListener('click', function() {
console.log('click');
});
});
console.log('se ha cargado la pagina');
var searchBtn = document.getElementById('searchBtn');
searchBtn.addEventListener('click', function() {
console.log('click');
});
});
JSON en javascript
<script>
//JSON
var usuario = {
nombre: 'Peter',
edad: 100,
pais: 'Chile',
mascotas: ['blanco', 'negro'],
perfil: {
tipo: 'privado',
cuenta: 'premium'
}
};
console.log(usuario);
console.log(usuario.mascotas);
console.log(usuario.perfil.cuenta);
</script>
//JSON
var usuario = {
nombre: 'Peter',
edad: 100,
pais: 'Chile',
mascotas: ['blanco', 'negro'],
perfil: {
tipo: 'privado',
cuenta: 'premium'
}
};
console.log(usuario);
console.log(usuario.mascotas);
console.log(usuario.perfil.cuenta);
</script>
Objetos en javascript
<script>
var obj = new Object();
//var obj = {};
//escribir valores en las propiedades
obj.nombre = 'Tu Nombre';
obj['edad'] = 99;
console.log(obj.nombre);
console.log(obj['nombre']);
console.log(obj.edad);
console.log(obj['edad']);
//metodos
obj.sumar = function(x, y) {
return x+y;
}
var a = obj.sumar(1,10);
console.log(a);
</script>
var obj = new Object();
//var obj = {};
//escribir valores en las propiedades
obj.nombre = 'Tu Nombre';
obj['edad'] = 99;
console.log(obj.nombre);
console.log(obj['nombre']);
console.log(obj.edad);
console.log(obj['edad']);
//metodos
obj.sumar = function(x, y) {
return x+y;
}
var a = obj.sumar(1,10);
console.log(a);
</script>
Arreglos multicimensionales
<script>
var grilla = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
console.log(grilla);
console.log(grilla[1][1]);
console.log(grilla[2][0]);
grilla[0][0] = 10;
console.log(grilla);
</script>
var grilla = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
console.log(grilla);
console.log(grilla[1][1]);
console.log(grilla[2][0]);
grilla[0][0] = 10;
console.log(grilla);
</script>
Iterar en un arreglo
<script>
var lista = new Array(3, 4, 5 ,6 ,7, 8);
var i = 0;
while(i < lista.length) {
console.log(i);
lista[i]++;
i++;
}
console.log(lista);
for(i = 0; i < lista.length; i++) {
console.log(i);
lista[i]++;
}
console.log(lista);
</script>
var lista = new Array(3, 4, 5 ,6 ,7, 8);
var i = 0;
while(i < lista.length) {
console.log(i);
lista[i]++;
i++;
}
console.log(lista);
for(i = 0; i < lista.length; i++) {
console.log(i);
lista[i]++;
}
console.log(lista);
</script>
Agregar y quitar elemntos de un arreglo al final
var listado = ['a', 'b', 'c'];
console.log(listado);
//insertar elemento al final
listado.push('d', 1, 2);
console.log(listado);
//remover ultimo elemento
listado.pop();
listado.pop();
listado.pop();
console.log(listado);
console.log(listado);
//insertar elemento al final
listado.push('d', 1, 2);
console.log(listado);
//remover ultimo elemento
listado.pop();
listado.pop();
listado.pop();
console.log(listado);
Agregar y quitar elementos de un arreglo en cualquier indice
<script>
var listado = ['a', 'b', 'c'];
console.log(listado);
listado.splice(1, 0, 'a1', 'a2', 'a3');
console.log(listado);
listado.splice(3, 3);
console.log(listado);
var listado2 = [1, 2, 3, 4, 5, 6];
console.log(listado2);
listado2.splice(-3, 2);
console.log(listado2);
</script>
var listado = ['a', 'b', 'c'];
console.log(listado);
listado.splice(1, 0, 'a1', 'a2', 'a3');
console.log(listado);
listado.splice(3, 3);
console.log(listado);
var listado2 = [1, 2, 3, 4, 5, 6];
console.log(listado2);
listado2.splice(-3, 2);
console.log(listado2);
</script>
Suscribirse a:
Entradas (Atom)