Cookies usuario y fecha
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
var cookies = {};
function leerCookies() {
var c = document.cookie;
c = c.split(";");
for (var i = 0; i < c.length; i++) {
var t = c[i].split("=");
cookies[t[0].trim()] = t[1];
}
}
function checkCookies() {
leerCookies();
if (cookies.usuario != undefined) {
document.getElementById("usuario").value = cookies.usuario;
}
if (cookies.fecha != undefined) {
document.getElementById("acceso").innerHTML = "Último acceso: " + cookies.fecha;
}
}
function guardar() {
var c = document.getElementById("usuario").value;
var f = new Date().toLocaleString();
document.cookie = "usuario=" + c + "; expires=tue, 09 february 2016 9:40:00 UTC;path=/";
document.cookie = "fecha=" + f + "; expires=tue, 09 february 2016 9:40:00 UTC;path=/";
}
</script>
</head>
<body onload="checkCookies()">
<form action="index.html" method="POST">
<input type="text" id="usuario">
<input type="password" name="pass">
<input type="submit" onclick="guardar()">
<div id="acceso"></div>
</form>
</body>
</html>
Ejemplo cronómetro
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
var contador=0;
var crono;
function empezar(){
clearInterval(crono);
crono=setInterval(cronometro,10);
document.getElementById("pausar").style.display="";
document.getElementById("empezar").style.display="none";
}
function parar(){
clearInterval(crono);
document.getElementById("pausar").style.display="none";
document.getElementById("empezar").style.display="";
document.getElementById("empezar").value="Reanudar";
}
function cronometro(){
contador++;
document.getElementById("cronometro").innerHTML=contador/100;
}
</script>
</head>
<body>
<h1 id="cronometro">Pulsa para empezar</h1>
<input type="button" id="empezar" value="Empezar" onclick="empezar()">
<input type="button" id="pausar" value="Pausar" style="display:none" onclick="parar()">
</body>
</html>
Algunos ejercicios de programación
Función que le pasemos tres números y nos diga el mayor
Función que devuelva la suma de los cuadrados
Función que nos devuelva el número de apariciones de un caracter en una cadena. Ejemplo:
contarCaracteres(“Hola que tal”,”a”)–> 2
Calcular el factorial de un número: factorial(5)=5*4*3*2*1 = 120
Triángulo de asteríscos triangulo(5)->
*
**
***
****
*****
Función que nos devuelva el número de apariciones de un caracter en un array de cadenas. Ejemplo:
var lista=[“hola”,”que”,”tal”]
contarCaracteresArray(lista,”a”)–> 2
Función que nos diga si una cadena es un palíndromo (capicua)
palindromo(“anna”)->true
(Para nota: que no tenga en cuenta espacios: palindromo(‘isaac no ronca asi’)->true)
Función que convierta las ‘a’ en ‘4’ y las ‘e’ en ‘3’
conversion((‘hola que tal’)->’hol4 qu3 t4l’
Función que simule el lanzamiento de un dado:
dado()->valores aleatorios entre 1 y 6
Función que genere una contraseña aleatoria de 6 caracteres:
password()->’A44erS’
Javascript tabla de multiplicar
Miniweb ejemplo
Ejemplos less
Futuro laboral
Usar Less, algunos ejemplos.
Less es un compilador de CSS, permite usar parámteros de programación a la hora de crear hojas de estilo.
Hay dos maneras de usar Less. La primera es incorporar en nuestra web el compilador para que pueda entender hojas en Less. Añadiríamos lo siguiente:
<script src=”https://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js”></script>
Y ya podemos incorporar nuestras hojas de estilo:
<link rel=”stylesheet/less” href=”estilo.less” />
La segunda es usar un compilador o algún plugin en nuestro programa de desarrollo. Por ejemplo, NetBeans:
http://malnuer.es/css/como-configurar-netbeans-para-usar-less-en-windows/
Aquí hay algunos tutoriales de Less:
https://deideaaapp.org/como-usar-less-desde-cero/