Breve Introdução
Para você que não sabe uma linha de código, programação pode ser comparada como um novo mundo a ser explorado, apesar de ser uma nova área para você desbravar, quero que seu primeiro contato seja leve, por isso irei pincelar o que é Javascript, HTML e CSS, mais de antemão posso dizer que o JS é o cérebro, o HTML é o corpo e o CSS são as roupas, e para mais informações, leia as referências, e não se assuste, no final tudo faz sentido, e te faz querer aprender mais.
Explanando o básico do básico, Javascript é uma linguagem de
programação voltada para a web na qual o navegador utiliza para mostrar o mundo
virtual para você. Alguns exemplos podem ser jogos, ação ao pressionar um
botão, efeitos dinâmicos de estilo, animação e muito mais.
O Javascript também pode ser utilizada sem o navegador com o auxílio por exemplo do node.js. Importante ressaltar que não se deve confundir Javascript com Java, apesar da nomenclatura semelhante são linguagens diferentes, (erro comum cometido por iniciantes), e para você que gosta de abreviar palavras (assim como eu), pode chamar apenas de JS.
Aqui está um exemplo bem simples, ele irá emitir um alerta no seu navegador com o resultado de 2 + 3:
Var é uma palavra reservada
do JS, com ela podemos criar variáveis.
Quando é criada uma variável, é reservado um espaço na memoria do computador na qual é armazenado determinado dado que poderá ser acessado e/ou manipulados futuramente, esse dado pode ser do tipo strings, números, booleanos, arrays, objetos ou funções, que são explicados em (Mozila, JavaScript: Sintaxe e Tipos).
Numero1 e numero2 são os nomes que dei as variáveis, assim
como resultado .
Os números 2 e 3 são os valores que dei as variáveis.
Em resultado foi somado o valor de numero1
e numero2.
Alert(resultado) indica que quero exibir o valor da variável resultado no alert do navegador (aquele pop-up que aparece na parte superior).
Para testar o código abra o seu navegador, clique com o botão direito no fundo da página e selecione inspecionar, procure pelo console, cole o código e pressione enter.
var numero1 = 2;
var numero2 = 3;
var resultado = numero1 + numero2;
alert(resultado);
Quando o JS é aplicado a um documento HTML ele pode fornecer
interatividade e dinâmica em sites, mais o que é HTML?
Linguagem de Marcação de Hypertexto do inglês Hypertext
Markup Language é o código usado para estruturar seu conteúdo web, dando
significado e propósito. Por exemplo, o conteúdo pode ser estruturado em
parágrafos, em uma lista com marcadores ou usando imagens e tabelas.
HTML não é uma linguagem de programação, e sim uma linguagem
de marcação, usada para definir a estrutura do seu conteúdo. O HTML consiste em
uma série de elementos, que você usa para delimitar ou agrupar diferentes
partes do conteúdo para que ele apareça de determinada maneira.
Tags
As tags do HTML é o que dão vida ao seu conteúdo, podem
transformar uma palavra ou imagem em um hiperlink, pode colocar palavras em itálico,
pode aumentar ou diminuir a fonte, por uma palavra em negrito e assim por
diante.
Ex: A imagem abaixo contém uma frase comum
A seguir a mesma frase com a tag <p> para estruturarmos a frase no HTML como parágrafo.
Essa é uma estrutura básica de um documento HTML:
Mais informações em (Mozilla, Desenvolvimento web: HTML básico).
CSS (Folha de Estilo em Cascata) é o código que você usa
para dar estilo à sua página Web, assim como o HTML ele não é uma linguagem de
programação e sim uma linguagem de folhas de estilos na qual permite alterar
aspectos visuais de elementos contidos no HTML desde cores, tamanhos, formas,
posição.
Ex:
P é
o seletor, indica qual tag HTML iremos fazer a modificação.
Dentro das chaves {} colocamos as informações.
Color é a propriedade, ou seja, o que eu desejo configurar
na tag selecionada.
Red é o valor da propriedade, neste caso eu quero alterar a cor da tag p para vermelho.
Aumentando o texto:
Assim como está escrito em (Mozilla, Desenvolvimento web: CSS
básico), “caixas, caixas, é tudo sobre caixas” você notará que escrever CSS é
sobre isso, seu HTML será pensado assim e o CSS também. Mais em: (Mozilla,
Desenvolvimento web: CSS básico).
Mozilla, Desenvolvimento web: HTML básico. Disponível em:<https://developer.mozilla.org/pt-BR/docs/Learn/Getting_started_with_the_web/HTML_basics>. Acesso em: 02 mai. 2022.
Mozilla, Desenvolvimento web: JavaScript básico. Disponível em:<https://developer.mozilla.org/pt-BR/docs/Learn/Getting_started_with_the_web/JavaScript_basics>. Acesso em: 02 mai. 2022.
Mozilla, Desenvolvimento web: CSS básico. Disponível em:<https://developer.mozilla.org/pt-BR/docs/Learn/Getting_started_with_the_web/CSS_basics>. Acesso em: 02 mai. 2022.
Mozila, HTML: Elementos HTML. Disponível em: <https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element>. Acesso em: 02 mai. 2022.
0 Comentários