O que é JavaScript? Como usar o JavaScript?


Neste tutorial será apresentado o que é linguagem de programação JavaScript? Como usar o JavaScript?

Para entender como usar será apresentado dois exemplos, o primeiro usando JavaScript interno e o segundo exemplo usando o JavaScript externo.

 

 

Download do código fonte desenvolvido na aula: DOWNLOAD


O que é JavaScript? Como usar o JavaScript?


JavaScript é uma linguagem de programação. Importante observar que JavaScript não tem nada a ver com Java. O JavaScript é utilizado para controlar o HTML e o CSS, usado para manipular comportamentos na página. O que seria esse comportamento? Por exemplo, submenu, carousel, etc.

Portanto, O JavaScript permite implementar itens complexos em páginas web. Toda vez que uma página da web faz mais do que simplesmente mostrar a você informação estática. Mostrando conteúdo que se atualiza em um intervalo de tempo, mapas interativos ou gráficos 2D/3D animados, etc. Pode apostar que o JavaScript provavelmente está envolvido.

O JavaScript trabalha com o HTML e CSS.

HTML é a linguagem de marcação que nós usamos para estruturar e dar significado para o nosso conteúdo web, por exemplo, definindo parágrafos, cabeçalhos, tabelas de conteúdo, ou inserindo imagens e vídeos na página.

CSS é uma linguagem de regras de estilo que é usado para aplicar estilo ao conteúdo HTML, por exemplo, definindo cores de fundo e fontes, e posicionando nosso conteúdo em múltiplas colunas.

JavaScript é uma linguagem de programação que permite a você criar conteúdo que se atualiza dinamicamente, controlar multimídias, imagens animadas, e tudo o mais que há de interessante. 

O JavaScript é uma linguagem de programação client-side (lado do cliente). ? executado pelo navegador do usuário, depois que o HTML e CSS forem traduzidos e colocados juntos em uma página web. Isso assegura que a estrutura e estilo da página já estão no lugar na hora em que o JavaScript for executado.

Isso é uma coisa boa, considerando que o JavaScript é comumente usado para modificar dinamicamente HTML e CSS.

Usando os princípios básicos do JavaScript, você pode adicionar ouvintes de eventos, que podem executar funções com o clique de um botão ou quando algum outro evento ocorrer. ? muito útil para manipular o HTML e CSS usando código.

Após a explicação, o que é JavaScript, vamos ver como usar o JavaScript.

O JavaScript pode ser usado interno ou externo.

Exemplo básico de JavaScript interno para apresentar o alerta.

<script>
	alert('Celke - Hello World!');
</script>

Inserir a instrução acima dentro da estrutura básica do HTML antes de fechar a TAG </body>.

Criar o arquivo "index.html".

<!DOCTYPE html>
<html lang="pt-br">
	<head>
		<meta charset="utf-8">
		<title>Introducao JavaScript - Interno</title>
	</head>
	<body>
		<script>
		  alert('Celke - Hello World!');
		</script>	
	</body>
</html>

Exemplo de JavaScript externo, isto é, manter o código JavaScript em um arquivo externo separado, em seguida, apontar para esse arquivo. Para este exemplo será utilizado o getElementById() é um dos vários métodos, mas provavelmente um dos mais populares para manipular HTML com JavaScript. No exemplo abaixo, você vê um documento HTML básico com JavaScript implementado. Esta é uma das características mais importantes do que é JavaScript usado.

No exemplo de código, usamos um método para localizar um elemento de HTML com um id "exemplo" e, em seguida, substituí-lo pelo conteúdo ( innerHTML ) "Hello world!".

Criar o arquivo "index.html".

<!DOCTYPE html>
<html lang="pt-br">
	<head>
		<meta charset="utf-8">
		<title>Introducao JavaScript - Externo</title>	
		<script src="personalizado.js"></script>
	</head>
	<body>
		<p id="exemplo">Conteúdo</p>
		<button type="button" onclick="alterarCont()">Alterar</button>
	</body>
</html>

Criar o arquivo "personalizado.js".

function alterarCont() {
	document.getElementById("exemplo").innerHTML = "Hello world!";
}

Portanto, recomendado usar o JavaScript externo. Por que usar JavaScript externo?

Você planeja exibir o botão do exemplo acima em todas as suas páginas da web. Suponha que você tenha escrito o código e copiado em todas as suas páginas da web (digamos 100). Mais tarde, você deseja alterar a mensagem a ser exibida. Neste caso, você terá que fazer alterações em todas as 100 páginas da web. Sendo uma tarefa muito demorada e difícil.

Então, salve o código JavaScript em um novo arquivo com a extensão .js. Em seguida, adicione uma linha de código em todas as suas páginas da Web para apontar para o seu arquivo .js, conforme o exemplo acima.

Quando usar o código JavaScript interno e externo?

Se você tem apenas algumas linhas de código específicas para uma determinada página da Web, é melhor manter seu código JavaScript interno em seu documento HTML.

Caso seu código JavaScript for usado em muitas páginas da Web, considere manter seu código em um arquivo separado. Nesse caso, quando precisar fazer alguma alteração no seu código, basta alterar apenas em um arquivo, isso facilita a manutenção do código. Se o seu código é muito longo, então também é melhor mantê-lo em um arquivo separado. 

Chegamos ao final de mais um tutorial, aguardo no próximo tutorial.