firebase.initialize({projectName: 'myProjectName'}).
<script>
firebase.initialize({
projectName: 'myProjectName'
});
</script>
Reference a la misma.
Para obtener una referencia a tu base de datos, llama a firebase.database.ref().
<script>
firebase.initialize({
projectName: 'myProjectName'
});
var reference = firebase.database().ref();
</script>
ref().
<script>
firebase.initialize({
projectName: 'myProjectName'
});
var subReference = firebase.database().ref('folder1/folder2');
</script>
Reference.child() para especificar una subcarpeta de una referencia existente.
<script>
firebase.initialize({
projectName: 'myProjectName'
});
var reference = firebase.database().ref();
reference.child('folder1');
</script>
Reference.set(data, callback)
<script>
firebase.initialize({
projectName: 'myProjectName'
});
firebase.database().ref('folder1').set('hello from folder 1!');
firebase.database().ref('folder2').set('hello from folder 2!');
</script>
Reference.on('value', function(data){})
<script>
firebase.initialize({
projectName: 'myProjectName'
});
firebase.database().ref('folder1').on('value', function(data) {
console.log(data);
});
// => 'hello from folder 1!'
</script>
Reference.push(data, callback).
Al insertar datos, éstos se añadirán a la referencia sin sobrescribir los datos existentes.
A cada valor que .push se le asignará un hash único.
<script>
firebase.initialize({
projectName: 'myProjectName'
});
var folder3 = firebase.database().ref('folder3');
folder3.push('hello from folder 3!', function() {
folder3.on('value', function(data) {
console.log(data);
// => {
// -M79DN0mwM7weeUc0TbA: "hello from folder 3!"
// }
});
});
</script>
ownerID al inicializar tu proyecto.
<script>
firebase.initialize({
projectName: 'myProjectName',
ownerID: '{{request.user.userprofile.get_or_create_public_unique_identifier}}'
});
</script>
.publish tu base de datos.
<script>
firebase.initialize({
projectName: 'myProjectName',
ownerID: '{{request.user.userprofile.get_or_create_public_unique_identifier}}'
});
firebase.database().publish();
</script>
La etiqueta script nos permite añadir código JavaScript en un archivo html.
<!DOCTYPE html>
<html>
<head>
<title>Your Page Title</title>
</head>
<body>
<script>
// Las etiquetas script deben ir al final del cuerpo:
</script>
</body>
</html>
Permite añadir botones a una página web:
<button>Click Me!</button>
Podemos añadir eventos a los botones utilizando onclick. onclick se establece en una función, que se ejecutará cuando se haga clic en el botón:
<button onclick=myFunction()>Click Me!</button>
La posición determina si un elemento se puede mover de su ubicación actual.
// establece la posición relativa a su posición inicial
div
{
position: relative;
}
// establece la posición relativa a su antepasado posicionado más cercano
div
{
position: absolute;
}
Los estilos left, right, top y bottom pueden utilizarse para reorientar un elemento una vez que se ha cambiado su posición. left desplaza un objeto desde el lado izquierdo del contenedor, right desplaza un objeto desde el lado derecho, top desplaza un objeto desde arriba y bottom desplaza un objeto desde abajo.
Los formularios pueden escribirse utilizando la etiqueta <form></form>.
Los formularios se rellenan con etiquetas <input>, que permiten a los usuarios introducir datos.
Los formularios utilizan el atributo onsubmit, que ejecuta una función cuando el formulario ha sido enviado. Por ejemplo, <form onsubmit="myFunction()"></form> ejecutará la función myFunction cuando se haya enviado el formulario. Los formularios normalmente envían datos a un servidor, pero para evitarlo, utiliza .preventDefault(). Esto evitará que el formulario envíe los datos y permitirá que la página web permanezca estática.
<input> tiene varios atributos:
type - determina el tipo de entrada que se espera del usuario.
text, submit, radio, checkbox, password, date
name: da un nombre a la entrada. Esto es útil cuando se utiliza serializeArray, ya que el nombre de la entrada se asocia directamente con el value de la entrada.value - si una entrada no toma un valor, es importante establecer un valor para que la entrada se asocie a un valor concreto al utilizar serializeArray. Por ejemplo, <input type="radio" value="true"> asociará el valor true con esa radio input.Imprime valores en la consola. Se accede yendo a la herramienta de desarrollo del navegador.
var x = 5; console.log(x); // La salida es 5
prompt() es una función que permite que los usuarios introduzcan datos.
var name = prompt("¿Cuál es tu nombre?");
console.log(name); // imprimirá el valor introducido por el usuario en la pregunta.
alert() proporciona una ventana emergente a los usuarios.
alert("Esto se mostrará en la parte superior del navegador como una ventana emergente");
El Modelo de Objetos del Documento (DOM) hace que los elementos HTML sean mutables mediante otros lenguajes de programación.
Aquí tienes algunas funciones útiles para acceder a elementos HTML:
// Selecciona un elemento por la etiqueta id
document.getElementById("name-of-id");
// Se puede establecer como variable
var el = document.getElementById("name-of-id");
// Selecciona el elemento por Etiqueta
// crea una lista de todos los elementos con esa etiqueta
var list = document.getElementsByTagName("p");
// Accede a los elementos de una lista
// Accede al 2º índice de una lista
var individualElement = list[2];
// Acceder a los hijos de un elemento
body.firstElementChild; // devuelve el primer elemento hijo de cuerpo
body.lastElementChild; // devuelve el último elemento hijo de body
// Acceder a una lista de hijos
body.children; // devuelve una lista de hijos
// Acceder al padre de un elemento
el.parentElement; // devuelve el elemento padre de el
Crea nuevos elementos:
// crea una nueva etiqueta h2
document.createElement("h2");
// establecer en variable
var newTag = document.createElement("h2");
Añade elementos al archivo HTML:
// añade el elemento newTag al cuerpo
body.appendChild(newTag);
// añade el elemento new antes del elemento existente name-of-id al body
body.insertBefore(newTag, document.getElementById("name-of-id"));
Estilizar un elemento:
var el = document.getElementById("name-of-id");
// establecer atributo de un elemento
el.setAttribute("style", "background-color: blue");
// determina si el elemento tiene un atributo
el.hasAttribute("style"); // devuelve true;
// obtener el valor de un atributo
el.getAttribute("style"); // devuelve "color de fondo: azul"
// eliminar un atributo de un elemento
el.removeAttribute("style");
// obtener una lista de atributos de un elemento
var list = el.attributes;
// acceder al atributo de la lista
console.log(list[2]);
Añade un atributo de evento a un elemento:
var button = document.createElement("button");
// añade un evento de clic al elemento
button.addEventListener("click", myFunction); // Cuando se haga clic en el botón, se ejecutará miFunción
this selecciona el elemento u objeto que está llamando a una función. this puede pasarse como parámetro en una función, o usarse dentro de una.
// esto se usa en una función
el.addEventListener("click", myFunction);
function myFunction()
{
// esto representa al elemento el en este ejemplo
this.style.backgroundColor = "blue";
}
// esto se pasa como parámetro
<button onclick=myFunction(this)>Click Me</button>
function myFunction(element)
{
// el botón se pasa a la función a través de esto
element.style.backgroundColor = "blue";
}
Los eventos del teclado pueden activarse utilizando las palabras clave keydown y keyup.
// Crea un evento de teclado
body.addEventListener("keydown", myFunction); // myFunction se ejecuta cada vez que se pulsa una tecla
// e representa el evento de tecla que se pasa a la función
myFunction(e){
console.log(e.key); // si se pulsa la tecla q, devuelve q
console.log(e.code); // si se pulsa la tecla q, devuelve TeclaQ
}
Las animaciones son un cambio gradual en el estilo de un elemento que se produce con el tiempo. Podemos crear animaciones utilizando setInterval y clearInterval:
// ejecuta la función mover una vez cada 1000 milisegundos setInterval(move, 1000); // los temporizadores se pueden establecer en variables var timer = setInterval(move, 1000); // para finalizar un intervalo, utiliza la variable como parámetro en clearInterval clearInterval(timer);
jQuery es una biblioteca de JavaScript que hace que los recorridos del DOM sean más manejables.
Para añadir jQuery a nuestras páginas web, necesitamos este enlace:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Para seleccionar un elemento en el DOM, utiliza la palabra clave $.
$("body") // selecciona el cuerpo
$(".class") // selecciona la clase class
$("#name") // selecciona el id nombre
jQuery también viene con sus propias funciones:
// Alterar el estilo
$("body").css("background-color", "blue"); // cambia el color de fondo del cuerpo a azul
// Añadir eventos
$("body").on("click", function);
// Añadir eventos específicos
$("body").click(function(){});
// Añadir a un elemento
$("body").append("<p>new paragraph</p>");
Iterando a través de elementos con jQuery
// Iterar por los elementos
$("p").each(function()){
// imprime el color de fondo de cada elemento de la etiqueta p
console.log(this.css("background-color"));
});
// each también tiene parámetros de índice y elemento
$("p").each(function(index, el)){
// imprime "Párrafo 0: rgb(0, 0 255)"
console.log("Paragraph " + index + ": " + el.css("background-color"));
});
// animar un elemento
$("p").animate({"height": "100px"}, "fast"); // cambia la altura de todas las etiquetas p a 100px
// ocultar un elemento
$("p").hide("slow");
// mostrar un elemento
$("p").show("fast");
// alternar entre ocultar y mostrar
$("p").toggle("slow");
serializeArray devuelve los datos del formulario como una lista de objetos de datos. Cada objeto de datos tiene dos propiedades: name y value. Por ejemplo:
<form> <input type="text" name="name"> <input type="text" name="last"> </form>
Cuando se llame a $("form").serializeArray(), la función devolverá una lista de objetos de datos:
[{name: "name", value: "Text Value"}, {name: "last", value: "Text Value"}]
Donde "Text Value" representa el texto introducido por el usuario.
La función .getJSON devuelve un objeto JSON a partir de una URL.
var URL = "https://static1.codehs.com/api/12345/dictionary/english";
$.getJSON(URL, function(data){
// datos representa el objeto JSON solicitado desde la URL
});
Podemos almacenar datos localmente en nuestro navegador utilizando el Almacenamiento Local.
Podemos almacenar valores en nuestro navegador utilizando el Almacenamiento Local.
Podemos almacenar valores en el Almacenamiento Local utilizando una notación de clave y valor:
var x = 5;
localStorage.setItem("value", x);
// recuperar el valor de x
var val = localStorage.get("value"); // val = 5;
// comprueba si la clave existe
var hasKey = localStorage.value; // hasKey = 5;
var doesNotHaveKey = localStorage.fake; // doesNotHaveKey = undefined
Almacenar listas y objetos en Almacenamiento Local requiere el uso de JSON para "encadenar" los valores:
var list = [1, 2, 3];
localStorage.setItem("myList", JSON.stringify(list));
// acceder a una lista
var list = JSON.parse(localStorage.getItem("myList"));
Los objetos son una importante estructura de datos que almacena datos en forma de propiedades y valores.
var car = {
make: "Ford",
year: "2009",
numWheels: 4,
makeNoise: function(){
return "vroom!";
},
};
// acceder a las propiedades de un objeto
car.year; // devuelve 2009
car.makeNoise(); // devuelve "vroom!"