terça-feira, 3 de maio de 2016 20:05

JavaScript - Hello World!

O primeiro programa que todos os cursos de introdução à uma linguagem de programação usam é o "Hello World!", em português, "Olá mundo!". No JavaScript, seu Hello World dependerá de uma implementação básica de HTML.
O script pode ser escrito em qualquer editor de texto, como: Bloco de Notas, Gedit, Editor de Texto do MAC, entre outros.
Basta escrever o código abaixo em um dos programas acima ou de sua preferência e salvar como "nome do arquivo".html (sem as aspas).

<!DOCTYPE html>
<html>
  <head>
      <title>Hello World!</title>
  </head>
 
  <body>
      <script>
          alert("Hello World!");
      </script>
  </body>
</html> 
 
As tags <script></script> abre uma secção no html para inserir códigos em JavaScript.

sexta-feira, 29 de abril de 2016 19:40

Client-Side e Server-Side

Um conceito que deve estar bem claro na cabeça de qualquer desenvolver web é a diferença entre Client-Side e Server-Side. Isso não é algo difícil de entender, muito pelo contrário é fácil até de mais e para isso eu selecionei a imagem abaixo para entendermos de uma forma bem clara e simples.


Na computação, quando temos um servidor (Server), sempre haverá dois lados ( os tais "Side" dos nomes ) de comunicação, onde cada um tem sua função. E se temos um servidor ele necessita de um cliente (Client) para se comunicar.

O Client-Side (Lado do Cliente) é o espaço ilustrativo no qual ocorrem processos no próprio computador do cliente. Por exemplo o navegador valida se um campo contém o mínimo de caracteres para ser preenchido corretamente, esse seria um processo que ocorreu ao lado do cliente, ou seja, no Client-Side. Quando o usuário clica em um botão para enviar algum formulário, os dados são enviados pela rede até o servidor e então ele processa esses dados e o armazena em um banco de dados (Database), logo esse processo ocorreu no lado do servidor, ou seja, no Server-Side.
 Abaixo deixo um quadro com linguagens Client-side e Server-side interessantes para nossas aplicações futuras aqui dentro do blog.

Client-Side Server-Side
HTML PHP
XML Ruby On Rails
CSS Node.JS
JavaScript MySQL

Espero que essa explicação tenha ficado clara, caso alguém tenha alguma dúvida comente.


quinta-feira, 28 de abril de 2016 07:21

Como o JavaScript funciona no navegador

Há alguns anos o JavaScript era uma linguagem interpretada, porém, hoje, ela é compilada em tempo de execução através de um recurso chamado JIT (just-in-time) compilation. A leitura do JavaScript é realizada por engines, que são implementadas no desenvolvimento do Navegador, e elas possuem uma série de recursos, como a compilação JIT, para que isso seja feito de maneira eficiente.

A imagem abaixo exemplifica como ocorre esse processo.


Primeiramente, o navegador identifica o trecho em JavaScript e manda para a engine executá-lo, ela por sua vez manda o Source code para o Parser. Este pega o JavaScript e gera uma Abstract Syntax Tree (AST) dele, por exemplo:

    //Código para atribuir à variável r o valor do próprio r vezes o valor antecessor de n.

    var r = r * (n - 1);

O script acima teria como resultado do Parser, algo que pode ser representado visualmente assim:

astdlrtest2.png

Após isso o AST é transformado em um bytecode para ser lido pelo interpretador. Na interpretação entra a JIT, no qual os códigos são transformados em linguagem de máquina e já vão sendo executados. Os códigos que aparecem com frequência são armazenados na memoria para não terem que ser recompilados e quando não são mais utilizados com frequência o Garbage Collector apaga eles da memória. Isso deixa um pouco mais claro o porquê de alguns navegadores consumirem mais memória que outros, pois depende muito da implementação da engine.
Essa é uma visão geral de como funciona as engines, ou seja, esse processo não é fixo, podendo variar. Alguns exemplos de engines são:

  • Chackra (Internet Explorer),
  • V8 (Google Chrome e Opera)
  • SpiderMonkey (Firefox) 
  • Nitro (Safari).

Os navegadores seguem contam com o padrão do ECMAScript, o Ecma-262 para fazer a leitura de códigos JavaScript e com auxílio de sistemas como BOM (Browser Object Model) e DOM (Document Object Model), o primeiro é responsável pela interação do JavaScript com elementos próprios do navegador e o segundo com elementos próprios do HTML, para que o usuário tenha uma ótima experiência ao navegar em páginas desenvolvidas com JavaScript.

 Se você estiver seguindo a cronologia de estudos do blog, esse conceito ficará mais claro em postagens mais adiante.

terça-feira, 26 de abril de 2016 23:19

Introdução ao JavaScript - História

O JavaScript começou com um projeto de Brendan Eich, em abril de 1995, sob o nome Mocha, que pretendia implementar scripts em páginas web através do navegador da NetScape. Em setembro do mesmo ano a linguagem foi oficializada com nome de LiveScript e ainda no mesmo mês foi alterada para JavaScript. Na mesma época a Sun Microsystems estava implementando as applets (programa em Java que roda em web browsers), mas o JavaScript (há quem diga que o nome foi uma estratégia para atrair os programadores, pois o Java estava muito popular na época) mostrou-se mais prático de trabalhar e assim se popularizou. Em 1996 a NetScape anunciou que o JavaScript estaria, a partir de então, submetido aos padrões da Ecma International. Assim surgiu o ECMAScript que é a base para linguagens como JavaScript, JScript e ActionScript.

O primeiro navegador a rodar essa linguagem foi o NetScape 2.0 B3, lançada em 1995 e que ajudou a popularizar ainda mais o browser.


Um erro recorrente entre as pessoas é em confundir Java com JavaScript dizendo que são a mesma coisa, mas deixo claro que Java é uma linguagem e JavaScript é outra. Na época que lançou o nome a confusão era maior ainda, pois não havia tanta informação sobre o assunto como agora.

Há um boato na internet em que a linguagem foi derivada do ScriptEase, linguagem, inicialmente conhecida como Cmm(C minus minus), desenvolvida pela Nombas( na qual hoje não existe mais, pois foi comprada pela Openwave em 2004). Porém essa informação não se procede. No próprio Wikipédia, na página sobre a Openwave, em inglês, esse erro esta presente (até o momento dessa postagem). O Breent Noorda comentou que em uma conversa com o Brendan Eich, o desenvolvedor do JavaScript não fazia ideia da existência do ScriptEase quando começou a desenvolver o Mocha. Porém, na época que foi lançado o LiveScript, rodavam códigos de engenharia reversa em versões do NetScape 2.0, e versões posteriores, que pareciam embutir códigos do ScriptEase para realizar animações, validação de formulários em client-side. Mas para quem conhecesse bem o LiveScript e o ScriptEase conseguiria ver a clara diferença entre as duas linguagens.

Você pode ler o comentário deles, em inglês, através desse link: https://www.quora.com/How-did-ScriptEase-influence-the-design-of-JavaScript

Versões:

www.wikipedia.org



Tecnologia do Blogger.