Want to learn JavaScript in 2015?

Uma excelente história de Vincent O que durante um ano, focou-se a aprender Javascript, e hoje trabalha nessa área.

Para contar esta história, Vincent utilizou o serviço Medium, website onde podemos contar as nossas histórias num layout simples e amigável.

This is a walk-through of the steps I personally took in a single year, to begin learning JavaScript. My goal was to be able to get a job…

Fonte: Want to learn JavaScript in 2015? — Medium

Dart – A alternativa ao Javascript, criada pela Google

Dart – A alternativa ao Javascript, criada pela Google

Criado por Pedro Pinto em 11 de Outubro de 2011 | 21 comentários

O Javascript é uma das linguagens de scripting mais usadas na Internet, uma vez que consegue oferecer a interactividade que é necessária na visualização de conteúdos WEB, pois é processado pelo browser do utilizador. Além disto, é uma linguagem orientada a eventos o que possibilita associar determinado código a uma determinada acção do cliente.

Recentemente a gigante Google apresentou uma linguagem alternativa ao JavaScript e à qual deu nome  Dart. Será que a moda vai pegar?

dart_02

Muito se tinha especulado sobre o nome da linguagem criada pela Google, em alternativa ao Javascript. Em Outubro de 2010, um documento interno da própria empresa anunciava que a linguagem se iria chamar Dash (ver aqui). No entanto, a Google anunciou recentemente que tinha sido alterado para Dart – Designed as an object-oriented.

Dart é uma linguagem de programação flexível e estruturada e bastante similar ao Java ou ao C++, com muitas vantagens adquiridas das linguagens de scripting como é o caso do javascript.

dart_01

Segundo Lars Bak da Google, Dart é uma linguagem class-based, direccionada para o desenvolvimento de aplicações Web e com suporte para projectos de larga escala. É simples, eficiente, escalável e poderosa.

“Developed with the goals of simplicity, efficiency, and scalability, the Dart language combines powerful new language features with familiar language constructs into a clear, readable syntax.”

Além da simplicidade ao nível da estrutura de programação da aplicações, a linguagem Dart é também simples ao nível de debug. A linguagem permite que o programador adicione variáveis sem a necessidade de definir o tipo de dado e resolve alguns problemas de escalabilidade que normalmente acontecem quando se usa Javascript.

Actualmente nenhum browser tem suporte para esta linguagem, mas está previsto o suporte para a mesma no Chrome. O código pode ser executado sobre uma máquina virtual Dart nativa ou então sobre o próprio motor javascript (recorrendo a um compilador que consegue traduzir o código Dart em Javascript).

A Google disponibilizou também um IDE de programação e alguns scripts de exemplo para que os programadores comecem a desenvolver algumas aplicações com base na sua linguagem de programação.

Download: Dart – IDE

Homepage:  Dart – Googles Programming Language

PHP e Javascript – Parte III

PHP e Javascript – Parte III

Criado por Pedro Pinto em 16 de Junho de 2011 | 22 comentários

PHP e Javascript Parte III

por Pedro Peixoto

Como vimos nos dois últimos artigos, o Javascript vem trazer às nossas aplicações WEB a interacção e flexibilidade que uma linguagem server-side como o PHP não consegue oferecer. Nesse sentido, decidimos mudar o nome da rubrica “PHP é a quinta-feira” para “Programação WEB é à Quinta-feira! “. Esta semana continuamos a explorar esta linguagem que se tem assumido como a principal linguagem WEB, para além de aumentar um pouco o grau de complexidade da nossa programação vamos também perceber como fazer a integração do JS com o PHP.

web_01

No último artigo aprendemos o que são eventos, funções e os conceitos básicos da programação com JS. O Javascript ao contrário do que muita gente pensa, é uma linguagem muito completa, para além das funções básicas que todas as linguagens de programação “tem” de oferecer, existem funções para tratamento de strings, cálculos matemáticos, arrays, entre muitas outras. Além disso, existem inúmeras bibliotecas que facilitam e expandem o uso do Javascript. Não há limites, é dar asas à imaginação, a interacção e personalização podem ser levadas ao extremo!

Hoje vamos fazer um pequeno exemplo prático onde usaremos eventos, funções, estruturas de controlo, variáveis, inputs e outputs. Será um pouco de tudo o que é necessário para qualquer funcionalidade JS. Vamos então aprender a apresentar conteúdo diferente nos nossos formulários após uma escolha do utilizador.

Antes de mais vamos criar a página HTML com os componentes necessários.

<html>
	<head>
	</head>
	<body
		Que sistema usa?</br>
		<select>
			<option value="1">iPhone</option>
			<option value="2">Android</option>
			<option value="3">Windows Mobile</option>
			<option value="4">Outro</option>
		</select>
		<span id="comentario"></span>
	</body>
</html>

Colocámos um elemento <select> que permite ao utilizador efectuar uma escolha entre as diferentes opções, de seguida inserimos um <span> que vai permitir apresentar conteúdo de acordo com a escolha do utilizador. Falta agora o código Javascript. A estratégia é usar o evento onChange (accionado quando o utilizador altera o valor do select) para chamar uma função passando o valor seleccionado. Dentro da função colocaremos um switch/case, que dependendo da escolha coloca conteúdo diferente no <span>.

<html>
	<head>
		
			function apresentaConteudo(escolha)
			{
				var elemento=document.getElementById('comentario');
				switch(escolha)
				{   case '1': elemento.innerHTML='Viva a Apple!'; break;
					case '2': elemento.innerHTML='Bem-vindo google fan!'; break;
					case '3': elemento.innerHTML='Wiiinnnndddowwwssss!!!'; break;
					case '4': elemento.innerHTML='Qual?'; break;   }
			}
		
	</head>
	<body
		Que sistema usa?</br>
		<select onChange="apresentaConteudo(this.value)" id=”dispositivo”>
			<option value="1">iPhone</option>
			<option value="2">Android</option>
			<option value="3">Windows Mobile</option>
			<option value="4">Outro</option>
		</select>
		<span id="comentario"></span>
	</body>
</html>

O resultado é o esperado:

clip_image002

Podemos ainda mudar a função de maneira a apresentar mais um elemento <select> no caso do utilizador escolher “Outro”:

function apresentaConteudo(escolha)
{
var elemento=document.getElementById('comentario');
	switch(escolha)
		{
		case '1': elemento.innerHTML='Viva a Apple!'; break;
		case '2': elemento.innerHTML='Bem-vindo google fan!'; break;
		case '3': elemento.innerHTML='Wiiinnnndddowwwssss!!!'; break;
		case '4': elemento.innerHTML='Qual?
<br />
<select><option selected>Bada</option><option>Symbian</option></select>'; break;
	}
}

clip_image004

Poderíamos também ter obtido o valor seleccionado dentro da própria função para isso teríamos de usar:

“document.getElementById(‘dispositivo’).value”

Como facilmente se conclui, o atributo innerHTML permite aceder ao código HTML que está dentro do elemento, por sua vez, o atribuo value permite aceder ao valor se um componente. Existem inúmeraspropriedades que nos possibilitam interagir totalmente com os elementos de uma página HTM, por sua vez os elementos também podem ser acedidos querem directamente (através do ID, classe), quer indirectamente usando a estrutura DOM.

Por último, vamos aprender como integrar PHP e Javascript, é um processo muito rápido. No fundo o PHP, corrido no servidor, cria dinamicamente ou de forma estática o código Javascript. Para tal, é necessário que o nosso ficheiro tenha extensão PHP e seja aberto no servidor (para poder ser interpretado). O código JS é construído como qualquer outro código HTML, vulgarmente usando o comando “echo” do PHP.

<?php
	echo ‘Ano: <select onChange=”alert(\’Mudei!\’)”><option>’ . date(‘Y’) . ’</option><option>’ . (date(‘Y’)-1) . ’</option></select>’;
?>

No exemplo de cima podemos ver que quando escrevemos JS com PHP, no caso de estarmos a recorrer às plicas ou aspas para delimitar a string PHP, temos que usar a \ para de seguida podermos usar a plica ou aspa respectivamente.

Poderemos ainda usar PHP para popular elementos HTML usando JAVASCRIPT, sem ser necessário recarregar a página. De facto cada vez mais encontramos páginas onde as acções parecem instantâneas, como se a página estivesse em constante comunicação com o servidor. Para isso usamos AJAX que no fundo permite que a página, através de Javascript, faça um pedido http (que pode ser uma página gerada em PHP) sem ser recarregada. O AJAX assume por isso cada vez mais importância nas aplicações WEB PHP, no entanto devido à complexidade inútil do uso directo do AJAX, não avançaremos para esta fase sem a ajuda de bibliotecas que simplificam este processo.

Em conclusão, o Javascript é uma linguagem flexível, e corresponde às exigências vulgares de uma página WEB, é bastante completa no entanto, quando pretendemos fazer coisas mais elaboradas, principalmente ao nível de efeitos gráficos ou tratamento elaborado de dados, temos muito código para escrever sendo que o JS poderia e deveria ter funções que correspondessem directamente às necessidades mais comuns e particulares da programação WEB. Podemos “contornar” este problema recorrendo a bibliotecas. Desta forma vamos no próximo artigo aprender a fazer mais escrevendo menos, para tal recorremos ao jQuery. Esta biblioteca JS permitirá com simples linhas de código efectuar grande parte das tarefas comuns de uma página de Internet.

PHP é a quinta-feira – Introdução ao JavaScript (Parte II)

PHP é a quinta-feira – Introdução ao JavaScript (Parte II)

Criado por Pedro Pinto em 9 de Junho de 2011 | 16 comentários

Por Pedro Peixoto para o PPLWARE
Tal como prometido na última semana, hoje vamos perceber como pode uma aplicação ou um website desenvolvido em PHP tornar-se mais interactivo recorrendo ao Javascript, a linguagem clientside mais usada em ambientes web. O objectivo será, daqui a algumas rubricas, perceber a fórmula explosiva da união do PHP com jQuery, uma livraria indispensável a qualquer programador WEB. Mas como tudo tem que começar por baixo, vamos então, ver na prática como podemos usar o Javascript nos nossos websites/webapps.
php_java
Mas antes de começar, vamos “separar as águas”:

  • O javascript é incorporado nas páginas HTML e interpretado pelo browser do cliente que acede à nossa página, sendo uma linguagem orientada a eventos.
  • O PHP corre do lado do servidor, sendo que o cliente recebe uma página HTML que foi gerada através da programação PHP.

Assim, vulgarmente, nas nossas aplicações usamos o PHP para gerar conteúdo dinamicamente, ligar à base de dados e realizar operações pesadas ou que devem ocorrer num ambiente controlado. Já o Javascript pode ser usado para melhorar graficamente elementos HTML, criar efeitos agradáveis, melhorar a interacção do utilizador, etc…

Incorporar Javascript numa página HTML

Podemos colocar o nosso JS na própria página HTML ou então num ficheiro separado que depois será referenciado na página HTML. Por uma questão de facilidade, vamos começar por escrever o código JS na própria página HTLM. Para tal, comecem por criar um ficheiro vazio na pasta do servidor e alterar a extensão para .php por exemplo js.php.

Seguidamente abrimos o ficheiro num editor de texto (ex.: notepad ou notepad++), e criamos uma estrutura HTML:

<html>
<head>
</head>
<body>
</body>
</html>

O código JS pode colocar-se em qualquer parte, e escreve-se entre as tags .


Para vermos algum resultado vamos aprender desde já a mostrar uma Mensagem ao utilizador, para isso chamamos a função alert();.

<html>
<head>

alert("Ola PPLWARE!!!");

</head>
<body>
</body>
</html>

Se abrirmos a página no browser a mensagem surge normalmente:

clip_image002

Também podemos adicionar código javascript a eventos que disparam quando o utilizador realiza determinadas acções. Cada elemento javascript possui uma séria de eventos, como por exemplo:

  • onLoad – Dispara quando o utilizador abre a página
  • onUnload – Dispara quando o utilizador fecha a página
  • onFocus – Dispara quando o elemento é selecionado, por exemplo quando se coloca o cursor numa caixa de texto.
  • onBlur – Dispara quando o elemento deixa de estar selecionado.
  • onChange – Dispara quando o utilizador muda o valor do elemento
  • onMouseOver – Dispara quando o utilizador passa o cursor do rato por cima do elemento.
  • onMouseOut – Dispara quando o cursor do rato sai de cima do elemento
  • onClick – Dispara quando o utilizador clica no elemento.
  • E muitos mais…

Vamos de seguida criar um botão que emita um aviso em alguns destes eventos.

<html>
<head>

alert("Ola PPLWARE!!!");

</head>
<body onLoad="alert('Bem-vindo!');" onUnload="alert('Até já');"> <input type="button" value="Botao de teste de eventos" onClick="alert('clicaram-me');" onMouseOver="alert('rato em cima de mim');" onMouseOut="alert('rato saiu de cima de mim');"/>
</body>
</html>

De notar que nos eventos não necessitamos de colocar as tags . Colocámos também código para os eventos onLoad e onUnload no body.

Depois de guardar e abrir a página no browser podem brincar um pouco com os eventos que criámos.

clip_image004

Agora, vamos aprender a ler valores dos elementos. É possível fazer isso de mil e uma maneiras mas, para já, a mais fácil é através do ID do elemento.

Em primeiro lugar vamos criar uma caixa de texto:


De seguida, vamos alterar o código do botão:


alert("Ola PPLWARE!!!"); </head>
<body onLoad="alert('Bem-vindo!');" onUnload="alert('Atá já');"> <input type="text" id="caixadetexto"/> <input type="button" value="Botao de teste de eventos" onClick="alert(document.getElementById('caixadetexto').value);" /> </body>
</html>

Assim, podemos aceder ao valor da textbox através da função “getElementById()” que recebe por parâmetro o id do elemento a acessar. De entre as propriedades disponíveis num elemento, a propriedade “value” indica o valor actual. Desta forma, quando o botão for pressionado surge uma mensagem com o valor actual da caixa de texto. Eis o resultado:

clip_image006

No entanto percebe-se que o código ficou um pouco confuso, e como tal vamos simplificar usando para tal as “funções”.

<html>
<head>

alert("Ola PPLWARE!!!");
function mensagem()
{
alert(document.getElementById('caixadetexto').value);
}

</head>
<body onLoad="alert('Bem-vindo!');" onUnload="alert('Atá já');"> <input type="text" id="caixadetexto"/>
<input type="button" value="Botao de teste de eventos" onClick="mensagem();" />
</body>
</html>

O resultado é exactamente o mesmo.

E esta semana ficamos por aqui, já sabemos fazer output, inputs, funções e usar os eventos. Na próxima semana vamos aprender a integrar PHP com Javascript, e começar a fazer coisas mais complexas. O que acharam? Demasiado básico? Muito rápido para tanta coisa? Aguardo pelos vossos comentários.

PHP é a Quinta-Feira – Introdução ao JavaScript

PHP é a Quinta-Feira – Introdução ao JavaScript

Criado por Pedro Pinto em 26 de Maio de 2011 | 21 comentários

Por Pedro Peixoto para o PPLWARE

Como já vimos nos artigos anteriores, o PHP é uma linguagem server side, isto significa que é processado do lado do servidor, sendo que o utilizador que está a fazer o pedido ao servidor recebe uma página HTML já processada. Assim, e visto que à partida o servidor é controlado, apenas pessoas autorizadas acedem a todo o código PHP, ligações a bases de dados, sistemas de encriptação, o que o torna uma linguagem segura. No entanto, isto leva a perda de interactividade e flexibilidade, pois cada vez que é necessário executar código tem de se fazer um novo pedido ao servidor, e num ambiente WEB, os sistemas baseados em PHP perdiam muito em relação a tecnologias WEB como o Flash e o JAVA. Este problema foi soberbamente ultrapassado, recorrendo a uma linguagem de programação, que embora estivesse já solidamente integrada nos Browsers, não via aproveitados todos os seus atributos, falamos do JAVASCRIPT.

php_java

A partir de hoje vamos introduzir o Javascript nos nossos artigos, isto porque o PHP e esta linguagem andam sempre de mão dada. As duas acabam por se completar, o PHP pode processar rapidamente informação do lado do servidor, gerindo bases de dados, sessões, e conteúdos dinâmicos. O Javascript consegue oferecer a interactividade que é necessária na visualização de conteúdos WEB, pois é processado pelo browser do utilizador. Além disto, é uma linguagem orientada a eventos o que possibilita associar determinado código a uma determinada acção do cliente.

Para melhorar a associação PHP<->Javascript contribuiu muito o AJAX, mas este é um tema para um outro artigo que também terá espaço neste rúbrica.

Ultimamente os motores Javascript utilizados pelos Browsers têm tido desenvolvimentos consideráveis diminuindo o tempo e recursos de processamento, o que permitiu que o Javascript tivesse ganho a importância merecida.

Agora, com o surgimento do HTML5, põe-se em causa qual o rumo que o Javascript vai seguir, é certo que muitas das coisas que antes eram feitas com JS podem agora ser feitas directamente no HTML5, no entanto, o facto desta nova versão abrir as portas a novas funcionalidades, principalmente multimédia, acabam por dar uma importância acrescida ao Javascript.

Antes de terminar, não posso deixar de referir o jQuery, que será também abordado nos nossos artigos. O jQuery é uma biblioteca Javascript que facilita em muito a programação, uma vez que além de permitir realizar a maior parte das acções necessárias de forma simples, funciona em todos os browsers, e os plugins existentes oferecem uma variedade imensa de funcionalidades.

Em conclusão, e na minha opinião pessoal, o Javascript é uma linguagem com uma posição solidificada e com os seus propósitos bem definidos, está de boa saúde, em constante melhoria (processamento dos browsers), e com um futuro risonho à sua frente.

Na próxima semana iremos, então, ver na prática o bom funcionamento destas duas linguagens juntas. Mas como já percebi que vocês gostam de participar e complementar os artigos, deixo já alguns desafios básicos, para adiantar o próximo artigo.

  • Como se incorpora Javascript numa página HTML?
  • Como mostrar uma msgbox com informação ao utilizador?
  • Como redireccionar um utilizador através de Javascript?

Lightbox2 – Visualização de imagens com estilo no teu site

Lightbox2 – Visualização de imagens com estilo no teu site

Criado por Pedro Pinto em 27 de Abril de 2011 | 27 comentários

Agora com suporte para o IE9!

Em 2008  (uffff ja passaram 3 anos), apresentamos aqui o Lightbox que permite dar um toque profissional e moderno ao nosso site, disponibilizando um efeito especial para apresentação de imagens. Esse efeito é bastante usado aqui no pplware e podem confirmar carregando na imagem de introdução deste artigo. Recentemente foi disponibilizado o Lightbox v2.05.

Vamos aprender como colocar em funcionamento o Lightbox no vosso site.

light_00

Como usar o Lightbox2 no nosso site?

Para colocarem o lightbox2 a funcionar no vosso site, devem seguir os seguintes passos:

Passo 1 – Download do script aqui (lightbox2.05.zip)

Passo 2 Descompactar e colocar na raiz do vosso site

Passo 3 –  Editar a página que permitirá visualizar as imagens e colocar a seguir a <header> o seguinte código:

http://js/prototype.js
http://js/scriptaculous.js?load=effects,builder
http://js/lightbox.js

Passo 4 – (Imagem única) Criem um “thumbnail” da imagem original e coloquem um link na imagem do tipo:

<a href=”images/imagem1.jpg” rel=”lightbox” title=”Minha foto”>Carregue Aqui</a>

onde:

  • imagem1.jpg é o nome da imagem (em tamanho original). A imagem está dentro da pasta imagens.
  • title – Um título para a imagem

light_01

Passo 5(Grupo de imagens) Quem pretender disponibilizar um grupo de imagens, e incluir um menu de navegação devem usar o código seguinte em substituição do anterior:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

light_02

E está feito. Agora basta abrir a página que acabaram de desenvolver para observar se as imagens são apresentadas com estilo. Alguma duvida ou questão que tenham, podem colocar em comentário para vos podermos ajudar.

Alguém conhece outros scripts do género?

Artigos relacionados

Homepage: LightBox2

Dica: Recupere as suas passwords através do Bookmarks

Dica: Recupere as suas passwords de forma simples

Criado por Pedro Simões em 20 de Setembro de 2010 | 17 comentários

Uma das perguntas que me fazem de forma recorrente é como recuperar as passwords que estão memorizadas nos browsers. A funcionalidade de memorização que é disponibilizada aos utilizadores é sem dúvida muito útil e permite que não tenham de se preocupar em escrever todos os dias, e várias vezes, os nomes de utilizador e as passwords dos mais variados serviços. Basta carregar no botão de acesso pois os dados estão já previamente preenchidos.

O problema maior é quando pretendem aceder a esses mesmos serviços noutro browser ou noutro PC e já não se recordam por, habitualmente, não os escreverem. É possível aceder a esses dados através das configurações dos browsers, mas nem sempre é óbvio ou fácil esse caminho. Por forma a contornar esse problema vamos apresentar um script de java que permite aceder a esses dados de forma simples e com apenas o acesso a um marcador do vosso browser.

Imaginem a chatice que é quererem aceder ao vosso email (Gmail, Hotmail, Yhaoo Mail, etc) e perceberem que não se lembram da password. O processo de recuperação dessas passwords pode ser chato e nem sempre bem sucedido. No entanto, sabem que no outro PC que habitualmente utilizam essa password está memorizada, mas que vão ter de chatear alguem para vos explicar como aceder e ela pois não sabem como o fazer.

Passam a poder contar com um link que vos vai ajudar sempre que precisem de retirar as passwords que estão já preenchidas nas páginas web. E basta memorizarem um marcador no vosso browser.

Uma vez que é usado javacript e este vai olhar para os campos do form HTML presente na página, podem usá-lo em qualquer browser ou sistema operativo. Não têm de se preocupar com compatibilidade ou com locais de funcionamento.

Esse código, que apresentamos abaixo é extremamente útil e deve ser colocado num marcador. Sempre que o precisarem de usar, basta acederem à página do serviço e verificarem que o campo Password está preenchido. Depois disso basta então chamarem esse favorito.

javascript:(
  function()
  {
    var s,F,j,f,i; s = ""; F = document.forms;
    for(j=0; j<F.length; ++j)
    {
      f = F[j];
      for (i=0; i<f.length; ++i)
      {
        if (f[i].type.toLowerCase() == "password") s += f[i].value + "\n";
       }
    }
    if (s) alert("Passwords nos formulários desta página: \n\n" + s);
    else alert("Não existem passwords nesta página.");
  }
)
();

Sempre que se depararem com uma página com a password já preenchida chamam o marcador, ou copiam o código apresentado para a barra de endereço, e será apresentada uma caixa de diálogo com o texto “Passwords nos formulários desta página:” e a password abaixo. Se existirem vários campos de password nessa página web eles serão apresentados em linhas consecutivas.

Aproveitem e espalhem esta pequena pérola pelos vossos amigos. Mais dia, menos dia vão precisar dela. Ou vão estar na posição de quem vai ter de desenrascar o outro utilizador ou então vão ser vocês o enrascado.

Fica então aqui o link que podem adicionar aos vossos favoritos: Mostrar password’s.

Memorizem-no no vosso browser e utilizem-no sempre que precisarem de se lembrar da password que está atrás dos asteriscos ou dos pontos no campo Password.

Bookmark: Mostrar password’s