Vue.js – Exemplos comentados

Estou experimentando esse framework JavaScript e me parece bem interessante os recursos que o mesmo disponibiliza.

O exemplo abaixo eu copie do próprio site do Vuejs ( https://vuejs.org/  )

Basta copiar, colar e salvar como um arquivo HTML e executar no seu Browse preferido, pronto simples assim.

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Teste Vue</title>
https://unpkg.com/vue/dist/vue.js
</head>
<body>

  1. {{fazer.text}}

var contabil = new Vue({
el: ‘#contabil’,
data: {
todos: [
{text: ‘tarefa-1’},
{text: ‘tarefa-2’},
{text: ‘tarefa-3’},
{text: ‘tarefa-4’}
]
}
})

</body>
</html>

<!– para incluir/excluir  novos item via console
contabil.todos.push({text: ‘Tarefa5’})   – – inclui
contabil.todos.splice(0,1)   – – começando no indice 0  retira 1 item
–>

 

 

 

Publicado em Computadores e a Internet, html, Vue.js | Marcado com , , , , | Deixe um comentário

Sobre o editor Atom

Sobre o editor Atom ( https://atom.io/ ), comecei a usar, para editar alguns fontes e ir me acostumando com o mesmo, pois é um editor bem flexível e permite centenas de configurações,  temas e plugins, como todo início sai atrás de informações básicas sobre a edição e compilei algumas que encontrei e estou postando aqui para ajudar a comunidade.
E o melhor de tudo o programa é “Open Source” ou seja é grátis (Free).
atom
Alguns atalhos úteis

Edição:
SHIFT + DEL  – Exclui a linha atual
CTRL + SHIFT + D  – Duplica a linha, ou bloco selecionado.
CTRL + ] – Indenta (identa*)  a linha sem precisar ir no início da mesma.
ALT + F3 – Seleciona todas as palavras iguais e habilita a edição múltipla (isso é uma beleza para trocar todas as variáveis de um fonte por exemplo;

CTRL + +  Aumenta a fonte do editor (se você não tem teclado numérico CTRL + SHIFT + +)
CTRL + Diminui a fonte do editor (se você não tem teclado numérico CTRL + SHIFT + -)

CTRL + S – Salva o texto
CTRL + SHIFT + S – Salvar como …

Automação/geração de código:

Escreva:
html e pressione TAB  (gera estrutura básica arquivo html 5)
input e pressione TAB
table  e pressione  TAB
link e pressione TAB
script e pressione TAB

Você pode consultar atalhos e comandos do editor teclando CTRL + +, e acessar  Keybindings.

Bom esse pequeno texto é só para incentivar você a usar esse excelente editor e deixar aqui sua opinião.

* Programadores falam assim.

 

Publicado em Computadores e a Internet, Dicas: Software (Programas ), EcmaScript, html, Programação, Programação PHP | Marcado com , , , , , , , | Deixe um comentário

Datalist (HTML 5). Porque reinventar a roda ?

Essa semana em um dos muitos fóruns, sites, listas que participo surgiu uma questão sobre “autocompletar” e no meio das muitas sugestões, JavaScript, jQuery e outras o assunto me interessou e fui dar uma pesquisada, pois esse recurso é bem interessante de disponibilizar para os usuários dos sistemas web desenvolvidos.

Não é que o HTML 5, nos disponibiliza uma TAG com o nome de DATALIST que faz exatamente isso.

Fiz alguns teste e para ser sincero não apliquei ainda em produção, como a tag vai se comportar com uma lista de 300 produtos, ainda não sei, mas o recurso promete, veja um exemplo de uso com HTML + PHP:

 

<?php 

if($_POST){
    
    echo  '==>'. $_POST["idestado"];
    
}
?>

<!DOCTYPE html>
<html>
    <head>
        <title>Teste datalist</title>
        <meta charset="UTF-8">
         <meta name="author" content="PowerInformatica.com.br">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <form method="post"    >
        
            <input name="idestado" list="listaestados" >         

            <datalist id="listaestados">
                <select>
                    <option value="12"> Acre</option>
                    <option value="27"> Alagoas </option>
                    <option value="16"> Amapá </option>
                    <option value="13"> Amazonas </option>
                    <option value="29"> Bahia </option>
                    <option value="23"> Ceará </option>
                    <option value="53"> Distrito Federal </option>
                    <option value="32"> Espírito Santo </option>
                    <option value="52"> Goiás </option>
                    <option value="21"> Maranhão </option>
                    <option value="51"> Mato Grosso </option>
                    <option value="50"> Mato Grosso do Sul </option>
                    <option value="31"> Minas Gerais </option>
                    <option value="15"> Pará </option>
                    <option value="25"> Paraíba </option>
                    <option value="41"> Paraná </option>
                    <option value="26"> Pernambuco </option>
                    <option value="22"> Piauí </option>
                    <option value="33"> Rio de Janeiro </option>
                    <option value="24"> Rio Grande do Norte </option>
                    <option value="43"> Rio Grande do Sul </option>
                    <option value="11"> Rondônia </option>
                    <option value="14"> Roraima </option>
                    <option value="42"> Santa Catarina </option>
                    <option value="35"> São Paulo </option>
                    <option value="28"> Sergipe </option>
                    <option value="17"> Tocantins </option>
                </select>
            </datalist>        

        </form>    
        
    </body>
</html>

Faça os teste e veja que interessante os tipos de retorno que esse recurso oferece se o usuário escolher um dos estados, o retorno é o ID do estado, se digitar qualquer coisa no input, e isso é permitido, o retorno é o que foi digitado.

Bom agora é só você usar sua criatividade para agregar mais esse valor aos seus sistemas.

datalist

 

 

Publicado em Computadores e a Internet, html, Programação, Programação PHP | Marcado com , , , , , , , , | Deixe um comentário

Olá Mundo, com EcmaScript 2015

Um pequeno guia, para iniciantes testarem a nova versão do JavaScript EcmaScript 2015.

A ferramenta usada para esse teste é o FireFox Developer Edition Version 52.0a2 64 bits, mas você não deve ter nenhum problema para executar esses exemplos nas versões Firefox  50 ou maior 32 bits.

Não vou entra em detalhes de programação dessa nova versão, mas já, vou testar um novo recurso dessa versão nova do JavaScript que é a atribuição de um valor default a parâmetros de uma função.

Abra o Web Console (Ctrl + Shift + K), abra também o editor “Scratchpad” que já vem incluído no navegador (Shift + F4), no editor digite o seguinte código em EcmaScript:

 

  function imprime(quem = 'Mundo'){
    
         alert("Olá " + quem );
    
  }

  imprime();

Para ver seu código rodando pressione (CTRL + R);

ecma

Na imagem acima você vê o programa “Olá Mundo !” na linguagem EcmaScript 2015. rodando no navegador Firefox.

Espero que essa pequena dica sirva de incentivo para você começar a estudar e aplicar nos seus novos projetos essa ferramenta.

 

Publicado em Computadores e a Internet, Dicas: Software (Programas ), EcmaScript | Marcado com , , , , , | Deixe um comentário

ECMAScript o que é ?

Inicialmente vamos ver o que é JavaScript [1].

JavaScript é uma linguagem de script orientada a objetos, multiplataforma. É uma linguagem pequena e leve. Dentro de um ambiente de host (por exemplo, um navegador web) o JavaScript pode ser ligado aos objetos deste ambiente para prover um controle programático sobre eles.

O futuro passa por aqui, ECMAScript® 2016, essa é a nova versão Javascript, se você está pensando em investir tempo em um framework nessa linguagem, que tal colocar esse tempo na fonte do conhecimento.

Com mais de 20 anos de existência, estava mais que na hora de uma atualizada nessa poderosa ferramenta.

História [2]

Em dezembro de 1995, a Sun Microsystems e a Netscape Communications Corporation anunciaram o JavaScript num press release, baseado nos trabalhos de Brendan Eich da Netscape sob o nome Mocha e, mais tarde, LiveScript. Em março de 1996 a Netscape Communications Corporation lançou o Navegador Netscape 2.0, com suporte para JavaScript. Com o sucesso do JavaScript como linguagem de scripting para o desenvolvimento de páginas web, a Microsoft, por sua vez, desenvolveu uma linguagem bastante próxima batizada de JScript, incluída mais tarde no Internet Explorer 3.0, lançado em agosto de 1996.

A Netscape submeteu as especificações do JavaScript para padronização pela Ecma International; o trabalho na especificação, ECMA-262, começou em novembro de 1996. A primeira edição do ECMA-262 foi adaptada pela ECMA General Assembly em junho de 1997[1].

ECMAScript é a linguagem de scripts padronizada pelo ECMA-262. Tanto a tecnologia JavaScript quanto a JScript são compatíveis com ECMAScript, porém cada um provê recursos adicionais não descritos na especificação ECMA.

Fonte[1]: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Introduction

Fonte[2]: https://pt.wikipedia.org/wiki/ECMAScript

ecmacript

Outros links interessantes:
- Acompanhe o curso:  https://github.com/AulasDeProgramacao/ecmascript_2015  
- Tabela de compatibilidade: https://kangax.github.io/compat-table/es6/
- Site da Ecma Internacional: http://www.ecma-international.org/
- Download das especificações: 
Standard ECMA-262 ECMAScript® 2016 Language Specification 
[ 7th edition (June 2016) ] -  Baixe o PDF

 

 

Publicado em Computadores e a Internet, html, Programação, Programação - JavaScript | Marcado com , , , , , | 1 Comentário

Importando arquivos de texto CSV, para o PostgreSQL

txt

Crie uma tabela do seu banco, p. Ex.

CREATE TABLE uf(

iduf varchar(2),

uf varchar(20),

sigla varchar(2),

CONSTRAINT iduf PRIMARY KEY (iduf)

);

Use o Bloco de notas e digite o seguinte texto, “esta bem…., pode copiar daqui e colar”, salve como dados.csv, eu uso a codificação UTF-8 para evitar problemas de acentuação.

Observe que eu usei o ; para separar as colunas.

Dica: O melhor seria criar uma pasta temp no raiz para facilitar na hora de importação.

11;Rondônia;RO

12;Acre;AC

13;Amazonas;AM

14;Roraima;RR

15;Pará;PA

16;Amapá;AP

17;Tocantins;TO

21;Maranhão;MA

22;Piauí;PI

23;Ceará;CE

24;Rio Grande do Norte;RN

25;Paraíba;PB

26;Pernambuco;PE

27;Alagoas;AL

28;Sergipe;SE

29;Bahia;BA

31;Minas Gerais;MG

32;Espírito Santo;ES

33;Rio de Janeiro;RJ

35;São Paulo;SP

41;Paraná;PR

42;Santa Catarina;SC

43;Rio Grande do Sul;RS

50;Mato Grosso do Sul;MS

51;Mato Grosso;MT

52;Goiás;GO

53;Distrito Federal;DF

Agora é só ir no editor de query e digitar:

COPY uf (iduf, uf, sigla) FROM ‘c:\temp\dados.csv’ using delimiters ‘;’ ;

Dica: Se no seu arquivo CSV tem cabeçalho com o nome das colunas, é só usar esse exemplo:

COPY uf (iduf, uf, sigla) FROM ‘c:\temp\dados.csv’ using delimiters ‘;’ CSV HEADER;
Agora só digitar

Select * from uf  – para verificar de está tudo como desejado;

Só a título de curiosidade esses códigos usados na coluna iduf, seguem o padrão do IBGE.

Publicado em Computadores e a Internet | Deixe um comentário

Validar / Criticar datas Lazarus

O Lazarus (Free Dephi) tem um componente  maskedit que permite formatar a entrada de valores por exemplo datas.
Após a entrada dos dados digitados podemos criticar / validar a entrada com o seguinte código, colocado no evento “exit” :

Continuar lendo

Publicado em Computadores e a Internet | Deixe um comentário