CategoryJavascript

Slideshow controlado pelo play e pause de uma música

music-slide
Continue reading

Como criar eventos personalizados (CustomEvents) no JavaScript

JavaScript é uma linguagem orientada a eventos. JavaScript é uma linguagem orientada a eventos. JavaScript..
Ok.. acho que já deu para entender.

js-logo

Continue reading

Delegate Events no JavaScript

É engraçado procurar os termos: delegate events e delegate javascript e então comparar os artigos escritos em inglês com os escritos em português.

Artigos em inglês

Mostram como o delegate funciona por baixo dos planos, mostrando códigos.

Artigos em português

Apenas comparam as funções .bind(), .live(), .delegate() e .on(). Teve só um que só citou como funciona.
Continue reading

Capturar o que as letras que o usuário digitar numa página

<div id="t"></div>
<script>
var keyTable = {
    '65': 'a',
    '66': 'b',
    '67': 'c',
    '68': 'd',
    '69': 'e',
    '70': 'f',
    '71': 'g',
    '72': 'h',
    '73': 'i',
    '74': 'j',
    '75': 'k',
    '76': 'l',
    '77': 'm',
    '78': 'n',
    '79': 'o',
    '80': 'p',
    '81': 'q',
    '82': 'r',
    '83': 's',
    '84': 't',
    '85': 'u',
    '86': 'v',
    '87': 'w',
    '88': 'x',
    '89': 'y',
    '90': 'z'
}
var userTyped = '';
document.addEventListener("keyup", function(e){
    if (keyTable[e.keyCode] !== undefined ) {
        userTyped += keyTable[e.keyCode];
    }

    document.getElementById("t").innerHTML = userTyped;
});
</script>

Bem simples, só ouvi o evento onkeyup, e fiz uma tabela para “traduzir” o keyCode para a letra correspondente.

Ocultar ou Mostrar DIV – JavaScript

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
.box {
    width: 200px;
    height: 200px;
    margin-right: 20px;
    background: #000;
    color: #fff;
    font-size: 50px;
    text-align: center;
    line-height: 200px;
}
.fleft { float: left; }
.is-hidden { display: none; }
</style>
</head>
<body>
    <a href="#" class="lnk-show" data-div="1">mostrar</a>
    <a href="#" class="lnk-hide" data-div="1">esconder</a>
    <br />

    <a href="#" class="lnk-show" data-div="2">mostrar</a>
    <a href="#" class="lnk-hide" data-div="2">esconder</a>
    <br />

    <a href="#" class="lnk-show" data-div="3">mostrar</a>
    <a href="#" class="lnk-hide" data-div="3">esconder</a>
    <br />

    <a href="#" class="lnk-show" data-div="4">mostrar</a>
    <a href="#" class="lnk-hide" data-div="4">esconder</a>
    <br />

    <a href="#" class="lnk-show" data-div="5">mostrar</a>
    <a href="#" class="lnk-hide" data-div="5">esconder</a>
    <br />


    <br />

    <div class="box fleft" data-me="1">1</div>
    <div class="box fleft" data-me="2">2</div>
    <div class="box fleft" data-me="3">3</div>
    <div class="box fleft" data-me="4">4</div>
    <div class="box fleft" data-me="5">5</div>

<script>
(function() {
    "use strict";
    /*jslint browser:true*/

    var $boxes = document.getElementsByClassName("box"),
        $lnksShow = document.getElementsByClassName("lnk-show"),
        $lnksHide = document.getElementsByClassName("lnk-hide");


    function loop($els, cb) {
        var i = $els.length;

        while (i > 0) {
            i--;
            cb($els[i]);
        }
    }
    function hideAll($els) {
        loop($els, function($el) {
            $el.classList.add("is-hidden");
        });
    }
    function getDiv(n) {
        return document.querySelector("[data-me='" + n + "']");
    }

    loop($lnksShow, function($lnk) {
        $lnk.addEventListener("click", function(e) {
            e.preventDefault();
            var div = getDiv(this.getAttribute("data-div"));

            hideAll($boxes);

            div.classList.remove("is-hidden");
        });
    });
    loop($lnksHide, function($lnk) {
        $lnk.addEventListener("click", function(e) {
            e.preventDefault();
            var div = getDiv(this.getAttribute("data-div"));

            div.classList.add("is-hidden");
        });
    });


}());
</script>
</body>
</html>