JavaScript e jQuery

Senac Penha

O que é JavaScript?

Surgida em 1995
Linguagem de programação para web
Baseada no padrão ECMAScript
Não tem nenhuma relação com a linguagem de programação JAVA

Características

Interpretada e executada pelo browser (navegador)
Camada de comportamentos
Manipula HTML e CSS
Implementação na própria página ou em arquivos externos de extensão JS

Onde usar JavaScript

Web Sites
Aplicativos
Games
Dispositivos

Browser Object Model

Document Object Model

JavaScript e HTML

<body>
<h1 id="titulo"> </h1>

<script>
'use strict';
var melhorCoisaDoMundo = "Paçoca";
document.getElementById("titulo").textContent = melhorCoisaDoMundo;
</script>
</body>

JavaScript e CSS

<body>
<h1 id="titulo"> Paçoca </h1>

<script>
'use strict';
document.getElementById("titulo").style.backgroundColor = "yellow";
</script>
</body>

Exemplos e Exercícios

O que é jQuery?

Biblioteca JavaScript
Criada em 1996 por John Resig
Software livre e de código aberto
Não é uma linguagem de programação

Características

Manipula HTML e CSS
Faça mais, escreva menos
Exige poucos conhecimentos de programação JavaScript
Compatibilidade com browsers antigos

Para que serve?

Adicionar efeitos visuais e animações
Acessar e manipular o DOM
Buscar informações no servidor sem necessidade de recarregar a página (Ajax)
Prover interatividade
Alterar conteúdos
Modificar apresentação e estilização
Simplificar tarefas específicas de JavaScript
Realizar outras tarefas relacionadas às descritas

Onde usar jQuery

Web Sites
Aplicativos
Games
Dispositivos

jQuery e HTML

<head>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
$(document).ready(function(){
    $("#titulo").text("Paçoca");
};
</head>
<body>
<h1 id="titulo"> </h1>
</body>

jQuery e CSS

<head>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
$(document).ready(function(){
    $("#titulo").text("Paçoca").css( { "background-color":"yellow" } );
};
</head>
<body>
<h1 id="titulo"> </h1>
</body>