JetBrains s.r.o. é uma empresa tcheca de desenvolvimento de software cujas ferramentas são direcionadas a desenvolvedores de software
e gerentes de projeto.
Fundação: 14 de agosto de 2000;
Sede: Praga 4, Praga, Tchéquia;
Número de funcionários: 1.200;
CEO: Oleg Stepanov (2012), Maxim Shafirov (2012);
Subsidiária: Code Complete Software, Inc.
Tipo de negócio: Empresa privada.
Desenvolvimento
Web Storm é um programa para desenvolvimento web, que vem sendo aprimorado a mais de 15 anos. O diferencial desse programa é que não necessita de um host,
ele já tem um incluído no programa, isso é um ponto positivo que o torna muito prático, já que não precisamos instalar um outro programa para compilar nosso
código, este programa foi feito utilizando a linguagem de programação javascript.
Esse programa oferece 2 tipos de linguagens disponíveis, sendo elas:
JavaScript: usamos ele para fazer verificações ou mudar dinamicamente a apresentação visual das páginas, conforme o comportamento que você deseja que sua página tenha.
CSS: CSS é chamado de linguagem Cascading Style Sheet e é usado para estilizar elementos escritos em uma linguagem de marcação como HTML. O CSS separa o conteúdo da representação visual do site.
HTML: significa Hypertext Markup Language. Ele permite que os usuários criem e estruturem seções, parágrafos, cabeçalhos e links para páginas da internet ou aplicações. O HTML NÃO é uma linguagem de programação,
isso significa que não pode ser usado para criar funcionalidades dinâmicas, no popular serve para editarmos o texto, e organizá-lo da maneira que desejamos.
Interface
A interface é bem intuitiva e ajuda muito na hora de desenvolvermos o site, começando pelos ícones dos navegadores que podemos ver no lado esquerdo superior do programa, eles servem para testar nosso código, mas cuidado ele é um simples teste, e pode não dar tudo certo quando você terminar e colocar na web a sua página, mas ele é muito
útil e um ótimo norte para seguirmos com o nosso código.
No lado esquerdo inferior, embaixo de terminal, é uma ferramenta tão útil quanto a primeira, ela nos ajuda a identificar erros de sintaxe no código, que podem não mostrar, ou
algo dar errado na nossa página, ele identifica antes mesmo de rodar no compilador.
Na aba File podemos criar projetos, arquivos(HTML/CSS/JS), podemos, abrir, fechar, favoritar e renomear os nossos arquivos dentro do programa, ligar o save mode caso precisarmos sair e
deixar o computador ligado, opção print serve para imprimir o código.
Na aba Edit quase todas as funções podem ser feitas no teclado delete, ctrl+c, ctrl+v, ctrl+z, mas para avançar podemos usar uma das ferramentas do edit, e para achar algo no código
caso ele seja muito grande, basta clicar em find ou ctrl+f e digitar o que deseja. E basicamente são esses dois que você irá mais utilizar durante a criação do site.
WebStorm na Prática
Colocar uma imagem no nosso site;
Formatação Html;
Mudança no Estilo das letras CSS;
Comandos em JavaScript.
Colocando uma foto no site
Começando pelo primeiro passo, vamos criar um arquivo, vá até a aba superir com o cursor mouse em File, clique com o botão esquerdo, irá abrir uma aba, coloque o
cursor em cima de New e clique em HTML file, agora podemos começar, primeiro escolha uma imagem que você deseja colocar
no site e baixe ela em seu computador, e lembresse de colocar um nome que você possa facilmente escrever.
Encontrando o programa dessa forma você deve trocar a linguagem do programa dessa forma: Apague o "en" da linha 2 e a linha 2 deve ficar dessa forma:
Obs.: Colocamos para Português pois se você colocar qualquer acento ou ç ele não reconhecerá já que "en", de inglês não tem acentos(se não for feito quando digitar podem aparecer símbolos estranhos).
Doctype que aparece serve para definir a identidade do nosso arquivo, html serve para o navegador reconhece-lo, charset serve para definir a linguagem que queremos
usar(inglês, português e etc...), o img é de imagem e o src(source) que significa recurso, e depois coloca o ="nome_do_arquivo".
E assim temos a foto igual tem na nessa pág, porém ainda falta algo que podemos arrumar, se você reparar talvez a imagem não esteja no tamanho
que você deseja então você pode colocar do lado da linha da img dessa forma:
width serve para largura e height para altura, recomendo que use porcentagem pois se usar número real, o tamanho da imagem se altera a medida em que você dá zoom, a página fica desconfigurada de certa forma,
então a porcenagem funciona como um parâmetro."
Formatação HTML
Primeiramente você deve escolher o conteúdo do texte que deseja inserir, pode ser sobre qualquer assunto, usaremos uma tag para título e outra
para o corpo do texto, isso não é um padrão, mas quanto maior o número dá tag h1,h2,h3... menor é o tamanho da letra. Dessa forma:
Usamos o h1 para Títulos e h2 para o corpo do texto, ficando dessa forma quando usamos (alt+f2+enter) o compilador do programa, ficando dessa forma no site:
Agora que já aprendemos a escrever podemos agrupar o que escrevemos no centro(center), direita(right) ou esquerda(left) ficando assim:
Ficando dessa forma no site:
Agora podemos dar espaço entre as linhas usando duas tags que fazem a mesma coisa porém uma pula uma linha e a outra pula duas, ou usamos "br"(2 linhas) ou
"p"(1 linha) para pular linhas, dessa forma:
Ficando dessa forma no site:
Mudando o Estilo das Letras( CSS )
Para mudar o estilo das letras usamos o CSS(Cascading Style Sheet), usamos a tag "style" para mudar a fonte, tamanho, cor, e também adicionar sombra.
Primeiro iremos mudar a fonte do nosso texto, podemos mudar globalmente, sendo que todas as tags de h1 sendo Arial ou podemos fazer essa mudança
somente em uma única tag.
Global: iremos usar a tag style dentro de head, iremos poder mudar a fonte usando o comando "font-family", para mudar a cor usamos "color" e para mudar o
tamanho usamos "font-size". Dessa forma:
Ficando assim no Site:
Agora se queremos que essa mudança seja só em uma das tags e NÃO em todas assim usamos a tag "style" dentro de h1 ou h2, dessa forma:
Obs.: Porém só podemos usar um comando dentro de h1 e h2 como podemos perceber. Resultado no Site abaixo:
Podemos colocar sobra nas letras usando o comando "text-shadow" dentro dá tag style:
Como podemos observar temos text shadow fazendo a nossa sombra porém para ela aparecer usamos o "px"(pixels), o primeiro representa o eixo(x) e o segundo
eixo(y), assim movemos ele ná diagonal quando adicionamos os mesmos número. Ficando dessa forma:
Comandos em JavaScript
Com tudo que vimos até agora só conseguimos fazer um documento estático, ou seja o site não tem nenhuma interação com os nossos usuários, porém utilizando JavaScript(JS)
podemos criar comandos dentro do nosso site, JavaScript foi inicialmente implementada e lançada no browser Netscape 2.0 por Brendan Eich em meados de 1995,
inicialmente com o nome live script, a NetScape não foi a única empresa a ajudar na criação dessa linguagem, junto com ela veio a SUN Microsystems que ajudou no desenvolvimento desta nova linguagem,
uma vez que acreditava na ideia inovadora que era o JavaScript.
Obs: As lingugens JAVA e JavaScript são parecidas somente no nome, pois desempenham funcionalidades diferentes. Em primeiro lugar, o Javascript não é uma linguagem de
programação propriamente dita. Ou seja, ela não é compilada e nem executada posteriormente. No mundo dos desenvolvedores ela recebe o nome de linguagem de scripting, pois ela é executada pelo navegador e depende do mesmo para funcionar.
Já os programas feitos com Java são independentes, ou seja, não dependem da plataforma para funcionar. São compilados pela máquina virtual Java para posteriormente entrar em funcionamento.
Nos anos 90 a Microsoft, vendo tudo isso que estava acontecendo com o JavaScript, percebeu que era uma boa ideia e, em vez de ajudar no desenvolvimento do JavaScript e se tornar parceira desta linguagem, resolveu seguir um caminho paralelo ao JavaScript e
criou o JScript para rodar somente no Internet Explorer, o que causou uma grande dor de cabeça aos desenvolvedores WEB por volta de 1997.
Como o JScript só rodava no Internet Explorer, a ECMA criou O ECMAScript ao perceber este problema, uma empresa chamada ECMA resolveu padronizar a linguagem de modo que pudesse funcionar em todos os navegadores. Desta ideia, nasceu um padrão chamado ECMA, e a linguagem foi batizada de ECMAScript. Todos os programas feitos em Javascript
são ECMAScript, ele só mudou para JavaScript por uma questão de Marketing.
Agora que já sabemos a história desta linguagem de programação que é usado na maioria dos sites, já que roda em todos os navegadores, podemos começar a aprender já que sabemos como surgiu.
Iremos usar o comando button, depois escrevemos onclick para indicar como será a nossa interação como o botão, depois usamos dentro das aspas função para executar( ).
Porém nosso botão continua sem fazer nada ele não tem função alguma, certeza que você já baixou algo que fosse pirata e sempre tem um aviso com um botão,
vamos aprender como fazer um e a função dele será aparecer uma mensagem escrito, ATENÇÃO. Usamos a tag botton logo em seguida onclick depois = entre alert e dentro do parentêses do alert colocamos a mensagem, ficando dessa forma que estamos vendo.
Foi um exemplo bem simples, mas agora podemos partir para algo diferente, vamos fazer uma entrada chamada input que irá servir para o usuário prencher esse campo. Usamos input dentro
de uma tag em seguida o comando type igual a "text", em seguida escrevemos placeholder="Informe um texto" e um id para ele armazenar o que digitarmos.
Feito isso vamos abrir uma Função, primeiro criamos uma tag chamada script e dentro dela escrevemos funcion logo depois damos um espaço e escrevemos o nome que queremos, nesse exemplo o nome está como minha função.
Depois disso, usamos var de variável texto = document.querySelector('#texto').value
Obs.: Usamos um #texto porque nomeamos nosso input como texto quando colocamos o id, e value que é para puxar o valor desse campo de texto.
Feito isso colocamos um alert(texto) para mostrar o que escrevemos no campo de texto.
Sintaxe:
Ficando dessa forma quando está no site:
Agora que estamos falando e aprendendo sobre javascript é importante saber que só é considerado javascript se fazemos o botão fazer algo, senão ele é somente um botão sem
função alguma, já o exemplo que fizemos pode ser analisado como um evento se eu clicar no botão então irá acontecer alguma coisa. Isso é considerado um script(conjunto de
instruções para que uma função seja executada em determinado aplicativo).
Botão de Data e Hora
Agora iremos repitir o processo da criação do botão, porém algumas mudanças serão necessárias, usaremos button type="nome_botão" em seguida comando on click="document.getElementById('id_desejado').innerHTML = Date( )" fechar tag,
próximo passo é o que você quer escrever no botão.
Exemplos:
Pressione;
Clique-me;
Data e Hora;
Feito isso agora nosso trabalho é mostrar ao usuário a data no nosso site então chamaremos usaremos a tag p, em seguida usamos id="id_desejado" fecha tag.
Dessa forma a Sintaxe:
E na forma como vê nesse Site:
Botões Show e Hide
Primeiramente crie somente o botão, tente fazer sem olhar no exemplo, isso te ajudará a memorizar-lo e aprender de forma efetiva, usaremos da mesma forma o getElementById,
só que em vez de colocarmos o .innerHTML usaremos style.display.="none" que é nenhum, este é o botão para esconder, então dê o nome de esconder e fecha a tag button. Repita o processo até chegar em none e em vez de colocar none, escreva block, e dê
o nome de mostrar para este botão, para ficar intuitivo.
Podemos Ocultar e Mostrar elementos HTML.
Somar
Agora iremos fazer uma opereção usando o JavaScript porém sem nenhuma interação com o nosso usuário, usaremos a tag script e colocaremos var x=5, var y=2, agora que
temos os valores de x e y, faremos a operação usando var z=x+y, sempre que ver o sinal de igual pense na palavra recebe, porque pode não ser um número, pode ser uma palavra,
e fica mais fácil de entender desta forma. Enfim iremos usar document.getElementById("soma").innerHTML = z, para pegar o valor que queremos, a sintaxe fica desta forma:
x = 5, y = 2, calculando z = x + y, resultado z:
Calculadora
Agora que aprendemos como fazemos botões inputs e alertas, vamos fazer algo mais composto, pois iremos usar tudo o que aprendemos em javascript até agora:
Primeiro Passo:
Iremos abrir a tag script e colocar o comando função e daremos o nome de calculadora(){} dentro da chave usamos var(num1,num2,oper) e usaremos getElementById para que possamos escrever
esse valor mais tarde.
Faremos o uso de if para dar as condições da calculadora, fazermos 4 if, um para soma, outro para subtrair, outro para multiplicar e outro para dividir, e todos terão o alerta para mostrar o valor
depois de resolvido.
Segundo Passo:
Agora vamos fazer dois inputs e os nossas 4 opções para selecionar qual operação desejamos fazer.
Obs: Função parseInt converte seu primeiro argumento para uma string, analisa, e retorna um inteiro ou NaN.
