Categorias
JavaScript Mobile Tutoriais

Trabalhando gestos com Hammer.js

Hammer é uma biblioteca JavaScript que dispara eventos para os gestos realizados em suas aplicações com HTML+JS. O Hammer.js é simples de usar, como muitas bibliotecas ele usa o esquema “jQuery-like”.

Para utilizar a biblioteca de gestos precisamos dos seguintes passos, carregar a biblioteca do Hammer disponível no link: http://eightmedia.github.io/hammer.js/, além de encontrar o fonte lá você vai encontrar exemplos de como usar a biblioteca. Com os arquivos importados agora vamos ao código, inicialmente selecionamos o elemento o qual vamos “ouvir” os gestos e depois especificamos o gesto que vamos acompanhar.

Exemplo:

var element = document.getElementById('box');
var hammertime = Hammer(element).on("swipe", function(event) {
        	alert('swipe!');
    	});

No código acima temos um exemplo que acompanha o movimento de swipe, quando realizado ele dispara um alert. E o que podemos fazer com isso? Slide de fotos, invocar menus, ações em jogos, mudança de conteúdo. Podemos notar que no código acima recebemos um evento na função chamada pelo Hammer, vamos usar o “console.log” para inspecionar esse item e o resultado será o seguinte:

Ele retorna um objeto com uma sério de propriedades, no final da lista temos algumas propriedades importantes, type(tipo do evento), timeStamp, target(onde foi realizado o evento), srcElement(O elemento responsável por chamar o evento) e  gesture um objeto que capta as infos sobre o “toque” realizado pelo usuário, esse item vamos detalhar a seguir:

No objeto gesture temos como pegar a angulação que foi realizado o toque, a velocidade x e y, escala, distância, rotação e direção do toque. É muito informação que pode ser trabalhada

Agora vamos a um evento mais prático:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Hammer Tutorial</title>
    </head>
    <body>
        <div id="box">
        	<nav id="menu" class="hide">
        		<ul>
        			<li><a href="#">item 1</a></li>
        			<li><a href="#">item 2</a></li>
        			<li><a href="#">item 3</a></li>
        			<li><a href="#">item 4</a></li>
        		</ul>
        	</nav>
        </div>

        <script type="text/javascript" src="js/hammer.min.js"></script>
        <script type="text/javascript">
        	var element = document.getElementById('box');
			var menu = document.getElementById("menu");

        	Hammer(element).on("swipe", function(event) {
        		//verificamos qual o valor da propriedade direction caso "right"
        		// ele adiciona o class ao menu active
        		// caso o valor do direction for "left" ele adiciona o class "left"
        		if(event.gesture.direction == "right"){
        			menu.className = "active";	
        		}else if(event.gesture.direction == "left"){
        			menu.className = "hide";
        		}
    		});
        </script>
    </body>
</html>

No exemplo acima em nosso elemento com id box, adicionamos uma tag nav com id menu esse item que vamos exibir e esconder. No código JavaScript no final do nosso arquivo verificamos no objeto gesture qual o valor do direction, caso “right” adicionamos o class active, caso contrario adicionamos o class “hide” a transição nos fazemos com CSS3 o código eu mostro a seguir:

#box {
	padding: 0;
	margin: 10%;
	width: 80%;
	height: 300px;
	background-color: green;
	display: block;
	position: relative;
	overflow: hidden;
}

#menu {
	width: 200px;
	height: 100%;
	background-color: yellow;
	margin: 0;
	position:absolute;
	transition:  left 300ms linear;
}

#menu.hide{
	left: -250px;
}

#menu.active{
	left:0;
}

Um exemplo simples mas muito usado em muitas aplicações. O exemplo completo desse tutorial você pode conferir no GitHub: https://github.com/fellyph/Tutorial-bbUI/tree/master/hammer/www

 

 

Categorias
Eventos Mobile Dev Group São Paulo

Sorteio de convite para o Front in BH

A BlackBerry estará presente em um dos maiores eventos de Front End do Brasil, o Front in BH. Lá iremos participar com um Light Talks sobre bbUI.js. O evento ocorre nesse final de semana no sábado dia 03 de agosto, no Teatro Ney Soares. Para comemorar nossa presença no evento iremos sortear um convite para o Front in BH, para participar serão necessários dois passos:

1 – Inscreva-se no Dev Group BlackBerry BH : https://www.facebook.com/groups/BlackBerryDevGroupBeloHorizonte/

2 – Deixe um comentário aqui nesse post: “Eu com a BlackBerry para o Front in BH”.

Na sexta-feira dia 02 de agosto às 14h divulgaremos o resultado.

Boa Sorte

Falando um pouco sobre o evento, o Front in BH irá contar com a seguinte grade:

Maurício Maujor
Bernard de Luna
Zeno Rocha
Clauber Stipkovic – Mozilla Persona
Tiago Venegas – Desenvolvendo aplicações móveis com bbUI.js
Michael Lancaster – CSS do jeito correto?
Sérgio Lopes – Repensando o front-end para telas de alta resolução
Ciro Nunes – Desenvolvimento ágil com o AngularJS
Reinaldo Ferraz – Como contribuir para um padrão do W3C
Miller Medeiros – RequireJS
Eduardo Lundgren – Indo além com AlloyUI
Andrews Medina – Testando interfaces de forma divertida

Caso ainda não garantiu sua presença o evento conta com as últimas vagas.

Mais informações em: http://frontinbh.com.br/

Categorias
HTML5 Mobile Dev Group São Paulo Tutoriais

Tutorial introdução ao bbUI.js

O bbUI é uma toolkit que fornece para as aplicações em HTML5 a experiência do OS do BlackBerry 10, desenvolvida pela equipe do Tim Neil, o bbUI possui elementos da User interface do BlackBerry 10 feitos HTML5 e JavaScript com uma ótima performance. A versão trabalhada neste tutorial será a versão 0.9.6.

Neste tutorial vou mostrar como utilizar o bbUI em seu projeto e listar as principais características referente a layout. Para trabalhar com bbUI será necessário instalar o SDK do WebWorks, caso não tenha instalado você pode conferir o seguinte post:

http://localhost/blackberrydeveloper/categorias/html5/instalando-webworks-sdk-para-desenvolver-html5-para-blackberry-10/

Em meus testes vou utilizar uma extensão para o Google Chrome, o Ripple. Se ainda não possui o Ripple, baixe aqui.

Inicialmente precisamos baixar o bbUI na página do git do projeto : https://github.com/blackberry/bbUI.js/

No git do projeto você irá encontrar, exemplos de como utilizar a biblioteca, documentação e o source do projeto. Baixei o ZIP de todo o projeto o link você encontra na imagem abaixo:

Baixe e descompacte o zip, no projeto tem as seguintes pastas ext, logos, pkg, samples e src. Nesse tutorial vamos trabalhar com dois arquivos presentes na pasta pkg: bbuui-min.css e bbui-min.js. além desses dois arquivos o meu projeto está organizado da seguinte forma :

Mesmo a nível de teste nosso exemplo vai precisar do config.xml que vai ficar dessa forma :

<?xml version="1.0" encoding="utf-8"?>
<widget xmlns="http://www.w3.org/ns/widgets"
        xmlns:rim="http://www.blackberry.com/ns/widgets"
        version="2.0.0.1" id="tutorial">

  <author href="http://www.example.com/"
          rim:copyright="Copyright 1998-2012 Pessoal">Pessoal</author>

  <name>Tutorial BB10</name>

  <description>
	 Tutorial sobre bbUI
  </description>

  <rim:permissions>
    <rim:permit>access_shared</rim:permit>
  </rim:permissions>

  <icon src="img/dev-group.png"/>

  <content src="index.html" rim:allowInvokeParams="true"/>
  <feature id="blackberry.ui.dialog"/>
  <feature id="blackberry.app"/>
  <feature id="blackberry.app.event"/>
  <feature id="blackberry.ui.contextmenu"/>	
</widget>

No config.xml acima para garantir o funcionamento do bbUI, precisamos adicionar três propriedades: feature blackberry.app, blackberry.app.event e blackberry.ui.contextmenu.

Primeiro exemplo vamos criar uma arquivo index.html que carregar bbUI e quando ele for inicializado carregamos outro arquivo HTML e acionamos na tela:

<!DOCTYPE html>
<html>
	<head>

		<title>tutorial bbUI</title>

		<link rel="stylesheet" type="css/text" href="css/bbui-min.css"></link>
		<script type="text/javascript" src="js/bbui-min.js"></script>
		<script type="text/javascript" src="local:///chrome/webworks.js"></script>

		<script>
			document.addEventListener("webworksready", function(e){
					bb.init();
					bb.pushScreen("tutorial.html", "tutorial");
				},false);
		</script>
	</head>
	<body>
	</body>
</html>

No exemplo acima temos um HTML simples que chama os bbui-min.css, bbui-min.js e a chamada do webworks.js. após a chamadas dos arquivos necessários tem uma bloco de script que faz a seguinte:

Na linha 12 é adicionado um ouvinte para quando o WebWorks estiver pronto sera disparada uma função, o evento que é disparado no momento será “webworksready”. Dentro da função que é disparada é inicializa o bbUI com a função “bb.init()” na linha 13 e na linha abaixo é adicionada um tela chamada “tutorial.html” através da função.

Dentro da tela “tutorial.html” tem um markup simples:

<div id="tutorial">Meu primeiro teste</div>

Se em seu teste o apareceu a frase “Meu primeiro teste”, significa que tudo correu bem. Até agora só testamos a inicialização do bbUI. Para entender um pouco o funcionamento do bbUI, ele considera cada tela que ele adiciona via pushScreen(), uma view e cada tela que é adicionada ele vai armazenadas em um array, mas renderiza na tela a view atual para fazer a troca de tela de maneira eficiente.

Por isso para fazer acesso aos elementos via javascript tempos que fazer um tratamento especial em cada situação. Por os elementos são criados em tempo de execução, o bbUI localiza os atributos data- dentro das div’s para montar a tela seguindo o padrão do BB10.

Então agora vamos incrementar o nosso exemplo:

<div id="tutorial" data-bb-type="screen" data-bb-effect="fade">
	<div data-bb-type="title" data-bb-caption="Tutorial bbUI" ></div>

	Agora temos uma tela do bbUI
</div>

Screen

No exemplo acima adicionamos a nossa div a propriedade data-bb-type=”screen” sinalizando que dentro dessa div agora temos uma tela nos padrões do bbUI, além dessa propriedade temos a data-bb-effect=”fade” essa propriedade sinaliza o tipo de animação que a tela irá ser apresentada, além do efeito de fade temos o seguintes efeitos:

  • slide-left: entrada de tela da direita para esquerda
  • slide-right: entrada de tela da esquerda para direita
  • slide-up: entrada de tela de baixo para cima
  • slide-down: entrada de tela de cima para baixo

Title

Dentro da nossa div “screen” temos uma div com o atributo data-bb-type=”title”, sinaliza que esse item será a barra de título de nossa screen, o segundo atributo data-bb-caption=”Tutorial bbUI” define o texto que será exibido. E o resultado será o seguinte:

Agora vamos evoluir o nosso arquivo tutorial.html, vou adicionar mais alguns elementos e criar uma navegação entre telas, para isso precisamos criar um novo arquivo “segunda-tela.html”.

Primeiro nosso arquivo tutorial.html atualizado:

<div id="tutorial" data-bb-type="screen" data-bb-effect="fade">
	<div data-bb-type="title" data-bb-caption="Tutorial bbUI" data-bb-img="img/icone-title.png" data-bb-accent-text="BlackBerry Dev Group"></div>
	<div data-bb-type="round-panel"> 
		<div data-bb-type="panel-header">Tipos de botões</div>

		<div data-bb-type="button" id="botao-texto">Botão só com texto</div>
		<div data-bb-type="button" data-bb-img="img/icone-botao.png" id="botao-imagem-texto">Botão com imagem e texto</div>
		<div data-bb-type="label-control-container">
			<div data-bb-type="row">
				<div data-bb-type="label">Botão sem texto:</div>
				<div data-bb-type="button" data-bb-img="img/icone-botao.png" id="botao-imagem"></div>
			</div>
		</div>
	</div>

	<div data-bb-type="round-panel">
		<div data-bb-type="panel-header">Botão com ação</div>
		<div data-bb-type="button" onclick="bb.pushScreen('tutorial-2.html', 'tutorial-2');" id="botao-com-acao">Carregar uma nova tela</div>
	</div>	
</div>

Vamos falar das primeiras mudanças do arquivo tutorial.html, primeiro div da barra de título(data-bb-type=”title”) adicionamos mais duas propriedades:

  • data-bb-img: onde é possível adicionar uma imagem na lateral da barra de título, o tamanho ideal para essa image é de 71×71 pixels
  • data-bb-accent-text: esta propriedade cria um subtítulo.

Round Panel

Foi adicionado um round-panel, esse elemento serve para agrupar informações em blocos e em cada bloco temos a possibilidade de adicionar headers. Logo após a abertura da round-panel adicionamos uma div com atributo data-bb-type=”panel-header”, o panel-header adiciona um título com uma linha abaixo seguindo o padrão de interface do BB10.

Button

Dentro do primeiro round-panel eu adicionei 3 botões, para criar um botão basta adicionar o atributo data-bb-type=”button” a div em que você deseja transformar em botão e dentro da div adicionamos o texto que será o conteúdo do botão.

Caso deseje adicionar uma imagem ao botão adicionamos o atributo “data-bb-img” e passamos o caminho da imagem como valor dessa propriedade. O tamanho ideal para essa image também é de 71×71 pixels. Para criar um botão com apenas uma imagem, basta não adicionar texto dentro da div do botão.

Label Control

Outra ferramenta que auxilia na construção de telas é o Label Control criado através da propriedade data-bb-type=”label-control-container”, esta propriedade trabalha em conjunto com a round panel e da a possibilidade de trabalhar com linhas e labels.

Como no código acima amarramos os itens que vão fazer parte daquele linha com uma div que contém a propriedade data-bb-type=”row” e antes de um elemento que queremos atribuir o label, adicionamos uma div com a propriedade data-bb-type=”label” e o texto que vai no label adicionamos dentro dessa div.

No último botão dessa tela um evento onclick, e passamos a função para chamar a próxima tela: bb.pushScreen(‘tutorial-2.html’, ‘tutorial-2’), onde passamos o caminho da nova tela que vamos enfileirar e o seu id.

Antes de passar para o código da segunda tela vamos ver o resultado da primeira tela:

Na segunda tela temos o seguinte código:

<div id="tutorial-2" data-bb-type="screen" data-bb-effect="slide-left" data-bb-indicator="true">

	<div data-bb-type="title" data-bb-caption="Tutorial bbUI" data-bb-back-caption="Voltar" >
	</div>

	<div data-bb-type="round-panel"> 
		<div data-bb-type="panel-header">Segunda tela</div>
		Carregando uma segunda tela.
		<div data-bb-type="button" id="botao-voltar" onclick="bb.popScreen()">Voltar</div>
	</div>	

	<div data-bb-type="action-bar" data-bb-back-caption="Back"></div>
</div>

Nessa segunda tela adicionamos uma uma propriedade a screen: data-bb-indicator=”true” essa propriedade adiciona um loader para sinalizar o carregamento do conteúdo da tela. Nesta segunda tela adicionei três maneiras de voltar para tela anterior, primeira no título dessa screen foi adicionado a propriedade, data-bb-back-caption=”Voltar” ela adiciona um botão do lado esquerdo da barra de título. A segunda forma foi através do comando dentro do evento onclick do nosso botão, bb.popScreen() é uma função que remove a tela atual. No caso as telas são empilhadas em um array, então removendo a atual voltamos para a tela anterior.

Action Bar

A última forma foi com uma action-bar, ela permite adicionar uma barra inferior de nosso aplicativo, nela podemos adicionar botões para realizar determinadas ações ou simplesmente adicionar um botão de voltar. Como no exemplo abaixo:

Em outros tutorias vamos abordar a action bar com mais detalhes.

O resultado da segunda tela foi o seguinte:

Trabalhando com JavaScript

Em outros posts vamos trabalhar mais exemplos com javascript, mas uma dica importante para que está criando os primeiros apps com bbUI, como falei anteriormente a lib renderiza os elementos em tempo de execução ou seja, caso tente acessar qualquer elemento diretamente via javascript ou jQuery sem um tratamento específico muito provável ele ainda não está acessível no DOM. Dentro da função bb.init() podemos passar uma série de parâmetros e propriedades, no nosso caso para tratar o problema de acesso aos elementos gerados pela lib, trabalhamos com dois eventos onscreenready e ondomready esse eventos sempre são disparados quando chamamos a função pushScreen().

onscreenready: Esse evento é dispara antes do bbUI montar a tela através das div com os atributos de marcações, ou seja podemos manipular os elementos html antes de serem renderizados pelo bbUI, nesse momento o bbUI sabe o conteúdo do arquivo mas ainda não foi adicionado no DOM.

ondomready: é disparado quando o bbUI terminou de montar a tela, então nesse momento a barra de título, os botões e label já foram criados.

Para ficar claro vamos a um exemplo prático, abaixo vou mostrar o nosso arquivo index.html atualizado:

<!DOCTYPE html>
<html>
	<head>

		<title>tutorial bbUI</title>

		<link rel="stylesheet" type="css/text" href="css/bbui-min.css"></link>
		<script type="text/javascript" src="js/bbui-min.js"></script>
		<script type="text/javascript" src="local:///chrome/webworks.js"></script>

		<script>
			document.addEventListener("webworksready", function(e){
					bb.init({onscreenready : function(element, id, params) {
		                            if (id == 'tutorial') {
										if(document.getElementById('tutorial')){
											console.log("onscreenready: existe um elemento no DOM com id tutorial")
										}else{
											console.log("onscreenready: não existe um elemento no DOM com id tutorial");
											element.getElementById('tutorial').innerHTML += '<div data-bb-type="button" id="ready-screen"> botão com onscreenready</div>';
										}
		                            }
		                        }
         					, ondomready : function(element, id, params) {
		                            if (id == 'tutorial') {
		                            	if(document.getElementById('tutorial')){
											console.log("ondomready: Existe um elemento no DOM com id tutorial")
											document.getElementById('tutorial').innerHTML += '<div data-bb-type="button" id="ready-dom"> botão com ondomready</div>';
										}else{
											console.log("ondomready: Não existe um elemento no DOM com id tutorial")
										}
		                            } 
		                        }
         					});
					bb.pushScreen("tutorial.html", "tutorial");	
				},false);
		</script>
	</head>
	<body>
	</body>
</html>

O código acima anteriormente carregava apenas o arquivo tutorial.html, foi adicionado um teste simples para entender o funcionamento dos dois evento. Nosso arquivo tutorial.html tem uma div com id “tutorial” foi adicionar a cada evento uma função que dentro dessa função eu verifico se existe um elemento com id “tutorial” e em casa caso eu mando imprimir uma frase no console. E o resultado é o seguinte:

Como podemos observar na chamada do onscreenready temos o seguinte retorno: não existe um elemento no DOM com id tutorial, isso significa que o elemento com id tutorial ainda não foi adicionado no DOM. Mas a função que é disparada quando evento é chamado passa três parâmetros: element, id, params.

  • element é o conteúdo da página ainda não executado.
  • id do elemento enviado
  • params caso tenha sido enviado algo na função pushScreen(), exemplo :bb.pushScreen(‘tutorial.htm’, ‘tutorial’, {nome: ‘Fellyph’, devGroup: “São Paulo”});

Se inspecionarmos a variável element, vamos ver que o conteúdo da tutorial.html estará ainda no forma original. No caso fiz um tratamento caso não encontrar o elemento com id “tutorial” no DOM, procure dentro da variável element o elemento com id tutorial e adicione um o seguinte html: ‘<div data-bb-type=”button” id=”ready-screen”> botão com onscreenready</div>’

Então o que vai ocorrer, o bbUI vai rederizar o conteúdo da tela com um botão como texto “botão com onscreenready”.

No evento ondomready, o elemento com id tutorial já está no dom, uso a seguinte condicional caso ache adicione o HTML ao conteúdo ‘<div data-bb-type=”button” id=”ready-dom”> botão com ondomready</div>’. Mas como podemos ver no resultado final esse botão não é renderizado porque no evento ondomready o conteúdo da tela já foi processado pelo bbUI.

Então com o ondomready podemos acessar elementos de uma página especifica tanto para fazer tratamentos ou adicionar eventos.

Esse tutorial serviu de start para o bbUI.js, a ideia é dividir em outros posts todas as características dessa lib fantástica. os Arquivos do tutorial você confere aqui : https://github.com/fellyph/Tutorial-bbUI

Categorias
Eventos WordPress

FEEC Brasil 2012

No dia 01 de dezembro em Recife acontece o FEEC Brasil 2012, um evento especial com grandes nomes relacionados a TI como: Stoyan Stefanov, engenheiro de software do Facebook e o autor de livros Javascript Patterns(faz parte da minha biblioteca) e Object-Oriented JavaScript. Além disso, é o criador do smush.it ferramenta de otimização de imagens. Resumindo o cara é fod* de verdade.

Outro nome forte no evento (que também vem de fora) é Caridy Patino: front end engineer da Yahoo! e especialista em SSJS / NodeJS e plataforma Cocktails Yahoo!. Caridy fará uma palestra sobre os desafios para se construir aplicações HTML5 para dispositivos móveis.

Além dos “pratas da casa” : Fabio Akita (Codeminer 42), Paulo Melo (C.E.S.A.R – SP), Nelson Glauber (C.E.S.A.R | Unibratec), Virgínia Chalegre (C.E.S.A.R Recife), Gustavo Guanabara(Tuiuiú Comunicação – RJ), Pedro Rogério (Ambulance-SP), Felipe Furtado(C.E.S.A.R Recife), Fred Vasconcelos(Joy Street – PE). Os palestrantes que acabei de citar, fazem parte das palestras do salão principal.

Mas as palestras não acabam por ai, entre uma palestra e outra no salão principal, acontecem light talks que eu vou ter o prazer de fazer parte! Vou falar sobre underscores o starter theme criado pela a equipe da Automattic.

Além da minha mini palestra irão participar: Gustavo Costa(EASY – Soluções Integradas), Lucas Cavalcanti(MGR Tecnologia), Nicholas Fazio(NicholasFF.Com), Socorro Macedo(Lefil), Danilo Torres(Mobiclub), Wilker Lúcio(Kajabi – EUA), Bartho Bernsmann(Microsoft Innovation Center – PE), Guilherme Farias(MGR Tecnologia)… Acho que não esqueci de ninguém. A programação completa você confere aqui : http://www.feecbr.com.br/pt/programacao.php?local=Recife

Estou ansioso pelo evento, primeira palestra em Recife cidade onde me formei. Reencontrar os amigos vai ser bem legal e conversar com os participantes do evento sempre é um estimulo para novas idéias. Um evento com 19 palestras um dia de overdose de TI. As inscrições ainda estão abertas então se você está pensando, não pense duas vezes o evento é daqui a uma semana.

Inscrições aqui!

O FEEC Brasil acontece no Hotel Golden Tulip Recife Palace que fica na Av. Boa Viagem número 4070. No dia 01 de Dezembro de 2012, mais informações sobre o evento aqui: http://www.feecbr.com.br/

Categorias
Geral Web

Curso de JavaScript DRC

No mês passado tive a oportunidade de fazer um curso agora como aluno na DRC, participei da turma de JavaScript com o professor Moacyr Minero. Ultimamente estava tendo muito contato com Javascript e como professor da DRC tinha acesso aos cursos. Fiz a união do útil ao agradável e participei do curso de js.

Aqui o programa do curso :


Curso drc Javascript e jQuery

Curti bastante o curso como JavaScript tem base ECMA-262 mesma base para o ActionScript. São liguagens quase idênticas, mas claro com plataformas diferentes. Hoje o Javascript ressurgiu  e ganhou força com a nova onda dos dipositivos móveis. O Javascript hoje roda nos principáis dispositivos sem restrição.

Hoje existem vários frameworks para a linguagem ,por exemplo, jQuery, mootools e prototype.

Para quem já programa em ActionScript, aprender Javascript é um pulo, existe muita coisa similar entre as duas linguagens, como podemos ver abaixo:

Função que retorna valor randômico em ActionScript:

function retornaRandom():int{

var  valor:int= Math.round(Math.random() * 10);

return valor;

}

Função que retorna valor randômico em JavaScript:

  function retornaRandom(){

    var  valor = Math.round(Math.random() * 10);

    return valor;

  }

Claro o que define uma linguagem é algo mais do que 3 linhas de código. Além dessas existem várias particularidades.

Uma boa referência é o w3cschool.

Uma conta legal no twitter é o @del_javascript

Bons estudos para que quiser se aventurar no Javascript.