O Javascript Controla o Html e o Css?

5 min readFeb 27, 2020

Olá amigos, voltando aqui para relatar os aprendizados que venho conquistando esses meses que se passaram. Hoje venho falar um pouco sobre o curso que eu estou fazendo do QA Ninja sobre Automação para Zumbis com Nightwatch.js que fala um pouco sobre como automatizar os testes em javascript e um monte de coisinhas mais interessantes que irei relatar aqui para vocês.

Então começaremos esse texto falando um pouco sobre o Javascript que é uma linguagem que roda ao lado do cliente. A linguagem Javascript é uma linguagem leve, interpretada e baseada em objetos que é utilizada para controlar o html e o css manipulando assim os comportamentos da página.

Exemplo de Comportamentos de Página em Javascript: Um botão de fazer login ao ser clicado envia os respectivos dados ao servidor, sendo o javascript responsável por enviar as informações ao browser.
Com esse resumo vamos iniciar um pequeno projeto em Javascript para fixarmos o nosso aprendizado na linguagem escolhida introduzindo também html e css.

Os primeiros passos consistem em abrir o terminal no seu computador e inserir os comando para entrar na pasta pessoal, criando uma pasta com o nome que você preferir (Projeto Javascript, Javascript Exercícios, etc..).

Depois de criar a pasta para iniciarmos o nosso aprendizado vamos abri-la no vscode e adicionar um novo arquivo chamado index html que dentro dele contém uma estrutura básica de html. Para isso podemos escrever no vscode o seguinte atalho doc e depois enter e por ultimo salvamos nosso código. Para visualizarmos o projeto, vamos abri-lo no navegador clicando com o botão direito e selecionando a opção open containing folder, dentro da pasta do nosso projeto, damos um double click no index html e logo após podemos perceber que a página no navegador foi carregada e está abrindo o nosso arquivo index.

Nessa estrutura básica de html podemos observar várias tags começando pelo title que define o título da nossa aba lá no navegador. Dentro dessa tag vamos inserir o título que quisermos e depois salvamos essa alteração, damos um refresh na nossa página e na nossa aba podemos verificar que o título que escolhemos está sendo exibido na respectiva aba.

Na parte head é onde se encontra o cabeçalho com algumas informações inclusive com o título que criamos para a nossa aba.

O Javascript dentro do html roda dentro do body que é o corpo do conteúdo da nossa página como por exemplo o conteúdo que será exibido ao cliente. Dentro de body vamos criar a marcação chamada <p>que representa um parágrafo no texto, dentro dela inserimos o seguinte texto “Hello Javascript” e salvamos, recarregamos a nossa página do browser e podemos observar que o nosso texto inserido está sendo exibido como um parágrafo no conteúdo da nossa página.

Depois desse passo vamos criar um script dentro de body na parte final. Vamos criar um<script>informando ao vscode que vamos criar uma tag javascript com o type =text/javascripte logo após a fechamos. Dessa forma podemos escrever os nosso códigos em javascript como no exemplo a seguir: console.log("Hello Javascript"), salvamos esse código e atualizamos a nossa página no browser. Logo após podemos verificar que a nossa alteração não está sendo exibida no navegador, pois essa alteração que fizemos não possui nenhum link com o nosso exemplo de código, e esse console.logque inserimos é para exibir uma informação no console, para resolvermos podemos então abrir o console na nossa página e então verificamos que o nosso “Hello Javascript” está sendo impresso no console da página do navegador.

Mas como será que faz para o nosso “Hello Javascript” ser impresso tanto no console quanto no body da nossa página? Para isso acontecer teremos que criar uma identificação dentro do nosso parágrafo para o código javascript poder identificar o nosso “Hello Javascript”. Vamos começar criando um id dentro do parágrafo como por exemplo: <p id="welcome">"Hello Javascript"</p>e dentro do nosso script vamos criar um código para identificar esse elemento. Exemplo: document.getElementById("welcome").append("Hello Javascript")dessa forma estamos capturando o elemento com o id welcome do parágrafo e inserindo o nosso texto escolhido. Podemos apagar o texto que está dentro do parágrafo para verificarmos se o nosso script está funcionando na página, demos o refresh e a alteração foi realizada.

Olá meu nome é Ingrid Carvalho Moreira, vou relatar aqui meu aprendizado com testes de software com uma série de textos descrevendo minha rotina diária de aprendizado, se quiser ler esse e os outros textos siga o link abaixo. Obrigada.

O Javascript Controla o Html e o Css?

Written by Ingrid Carvalho