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);

Veja mais em: (Mozilla, Desenvolvimento web: JavaScript)

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.

Aqui adicionei a tag  <strong>   para deixar a palavra ao centro em negrito.

Vale ressaltar que as tags precisam começar  < >  e terminar  </ > . Exitem inúmeros elementos no HTML e cada uma tem uma função específica. Veja mais em (Mozila, HTML: Elementos HTML).

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).

 REFÊRENCIAS

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, JavaScript: Sintaxe e Tipos. Disponível em: <https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Grammar_and_types>. 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.