Parte 0 - Iniciando com Javascript
Tags: javascript, beginners
Published: 2021-07-25 23:53:04


# Parte 0

## HTML e CSS

- Antes de começar com Javascript, eu estudei (acho que talvez a maioria das pessoas rs) `HTML` e `CSS`

### HTML
- Linguagem de Marcação de Hipertexto. Dar significado e organização as informações do websites.
- O HTML marca as informações com TAGS. Exemplo:
```<h1>Elas Unidas</h1>```

- Estrutura básica:
```
<!DOCTYPE hmtl> : Não é uma tag HTML, mas uma instrução para o navegador,
indicando que ali é um código em HTML.
<head> : É o cabeçalho. A parte não visível para o visitante. 
Mas carrega informações importantes.
<body> : É o corpo do seu site, é aquilo que é visível para o visitante
```  

### CSS
CSS é usada para estilizar a sua página. É possível alterar cor da fonte, espaçamentos...

### Analogia
Pensem em um corpo humano.
HTML seria a nossa estrutura, cabeça, corpo, o nosso esqueleto e CSS seria nosso cabelo, a sua cor, a roupa...
![Estrutura básica HTML](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d82qqxuge0oeh15ntu93.png)

## Javascript

### O que é Javascript ou js

- É uma linguagem de alto nível 
  <p>'isso' executa 'isso'</p>
<p> Damos instruções para o computador, ele interpreta e executa o nosso código.</p>
- Javascript nem sem foi chamado de "javascript". Inicialmente foi chamado de LiveScript, mas por causa da - grande - fama de Java, passou a ser chamada de JavaScript.
- Criada para deixar as páginas web mais vivas. Ex: animações.

### Como executar um arquivo/código Javascript


Existem algumas formas de executar o código em JS.

- Umas delas é JS inline no html, mas não é a melhor forma. 
 ```<script> Aqui lógica js</script>``` 
JS inline fica no body do HTML, ou seja, todo o código JS ficará no arquivo .html.

- A outra é JS externo, que é a melhor forma, o código JS ficará em um arquivo .js e importamos no .html. Podemos importar antes da tag de fechamento do `head` ou antes da tag de fechamento do `body`
```<script src="nomeDoArquivo.js</script>```

### 'Olá mundo' em Javascript

Assim como em todas as linguagens de programação, sempre iniciamos com o famoso 'Olá Mundo!'.
Abra seu editor de texto (VS code studio, Atom..) e crie uma pasta com dois arquivos `index.html` e `index.js`.

![pag html e js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/182w9s44xt7u3lmxbn6m.png)

- `index.html` coloque a estrutura básica do HTML. 
No `head` acrescente a tag title 
`<title>Elas Unidas</title>`
Antes da tag `</body>` chame o arquivo `index.js` que ficará assim:
 `<script src="index.js"></script>`

![index.html](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3jd49ci9wpewjzm63n9b.png)

- `index.js` será o arquivo onde colocaremos tudo de javascript.
Coloque o código a seguir:
`alert('Olá Mundo!');`

![index.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6t6y8ya0b95ewcjcf0fh.png)

- Agora abra o arquivo `index.html` no seu navegador.
Ao fazer isso, tudo o que estiver no index.html será exibido.
Você provavelmente verá algo assim:

![alert()](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ejjv3zz0mazsygifu80i.png)
 
Ou seja, estamos chamando o arquivo .js dentro do .html, por isso o alert() é exibido.


Obs.:`alert()` é usado para informar algo ao usuário. 

### Vamos brincar um pouquinho?

E se quiséssemos perguntar algo? seria o `prompt()`. 
No arquivo `index.js`, escreva:
`prompt("Qual é o seu nome? ")` 

![prompt](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gm39x5n3y25mo612paqy.png)

- Outra coisa importante é que podemos fazer comentários em arquivos .js
Para comentar uma linha, só precisamos adicionar `//` antes do comentário.
Para comentar em mais de uma linha, comentário em bloco, utilizamos `/*` no inicio da primeira linha e no `*/` no final da última linha. 

![comentario js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ifyypcn2rmvmt7o2qaqi.png)

### Para casa
Como lição de casa, veja como funciona o `console.log()` e qual é a sua função.

Até a próxima! Parte I