Introdução ao Javascript e JQuery

•

ESTÁCIO

0

ELIVALDO JUNIO MAGALHAES

23/02/2020

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Organização de Computadores

11.898 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

REVISÃO 
LINGUAGENS DA WEB
AULA 3
AGENDA
Introdução ao Javascript
Introdução ao JQuery
INTRODUÇÃO AO JAVASCRIPT
O Javascript é uma linguagem de script que pode ser adicionada a uma página HTML. 
O Javascript foi projetado para adicionar mais interatividade à páginas HTML
Trata-se uma linguagem interpretada
INTRODUÇÃO AO JAVASCRIPT
 ADICIONANDO JAVASCRIPT EM HTML
Para adicionar algum script javascript basta usar a tag <script>, possuindo o atributo type com valor text/javascript. type=“text/javascript”.
<html>
<body>
	<script type=“text/javascript”>
	document.write(“<h1>Hello World</h1>”);
	</script>
</body>
</html>
INTRODUÇÃO AO JAVASCRIPT
USANDO ARQUIVO JAVASCRIPT EXTERNO
Para compartilhar o código javascript entre diversas páginas, pode-se fazer uso do arquivo externo.
<html>
<body>
	<script type=“text/javascript” src=“arquivo.js”>	</script>
</body>
</html>
INTRODUÇÃO AO JAVASCRIPT
USANDO VARIÁVEIS
<html><body>
	<script type="text/javascript">	
		var nome;
		nome = "Maria";
		sobrenome = " da Silva"
		document.write("<p>"+nome+sobrenome+"</p>");
	</script>
</body></html>
INTRODUÇÃO AO JAVASCRIPT
Como qualquer linguagem o Javascript possui, varáveis, arrays (arranjo), objetos, operadores e todas as estruturas de controle como, estruturas condicionais simples e composta e estruturas de repetição. 
var carros= [“uno”, “onix”, “fox”]; 
for(var i = 0; i < carros.length; i++){
if(carros[i] == “fox”) {
 alert(carros[i] + “ é Volks”);
}else{
 alert(carros[i] + “ não é Volks”); 
}
}
v
INTRODUÇÃO AO JAVASCRIPT
Como qualquer linguagem o Javascript possui, varáveis, arrays (arranjo), objetos, operadores e todas as estruturas de controle como, estruturas condicionais simples e composta e estruturas de repetição. 
var carros= [“uno”, “onix”, “fox”]; 
for(var i = 0; i < carros.length; i++){
if(carros[i] == “fox”) {
 alert(carros[i] + “ é Volks”);
}else{
 alert(carros[i] + “ não é Volks”); 
}
}
v
INTRODUÇÃO AO JAVASCRIPT
Como qualquer linguagem o Javascript possui, varáveis, arrays (arranjo), objetos, operadores e todas as estruturas de controle como, estruturas condicionais simples e composta e estruturas de repetição. 
var carros= [“uno”, “onix”, “fox”]; 
for(var i = 0; i < carros.length; i++){
if(carros[i] == “fox”) {
 alert(carros[i] + “ é Volks”);
}else{
 alert(carros[i] + “ não é Volks”); 
}
}
v
INTRODUÇÃO AO JAVASCRIPT
É importante destacar alguns pontos da sintaxe javascript:
 
A palavra var é opcional na declaração de variáveis 
O ponto e vírgula (;) é opcional no final de cada instrução
Blocos de códigos ficam entre chaves ({})
O array começa do índice 0
Para concatenar duas strings utiliza-se o operador “+”.
INTRODUÇÃO AO JAVASCRIPT
Para criar uma maior dinâmica com o usuário, precisamos através do javascript manipular o DOM (Document Object Model) do HTML. 
O HTML DOM é um padrão para recuperação, alteração, adição ou remoção de elementos HTML e suas propriedades.
<html>
<head></head>
<body>
<h1></h1>
<p></p>
</body>
</html>
INTRODUÇÃO AO JAVASCRIPT
Para criar uma maior dinâmica com o usuário, precisamos através do javascript manipular o DOM (Document Object Model) do HTML. 
O HTML DOM é um padrão para recuperação, alteração, adição ou remoção de elementos HTML e suas propriedades.
<html>
<head></head>
<body>
<h1>Texto H1</h1>
<p>Texto parágrafo</p>
</body>
</html>
Texto H1
Texto parágrafo
INTRODUÇÃO A JAVASCRIPT
FUNÇÕES EM JAVASCRIPT
Funções em javascript possui o mesmo propósito que em linguagens como Java e C++
Reutilizar código
function nome_função(var1, var2, var3,...,varX){
 //código
}
INTRODUÇÃO AO JAVASCRIPT
EVENTOS EM JAVASCRIPT
<html><head>
<script type=”text/javascript” charset=”utf-8”>
 function helloWorld(){
 document.getElementById(“idElemento”).innerHTML= “Hello World”;} 
</script></head>
<body>
 <h1 id=”idElemento”></h1><br/>
 <input type=”button” onClick=”helloWorld()” value="clicar" />
</body></html>
INTRODUÇÃO AO JAVASCRIPT
1.
2.
INTRODUÇÃO AO JQUERY
Antigamente o desenvolvimento de websites não possuía muitas bibliotecas que facilitassem o desenvolvimento da aplicação. 
Toda a dinâmica e interação com usuário, tinha que ser feita usando a linguagem javascript pura.
No entanto, hoje em dia temos muitas bibliotecas que facilitam o desenvolvimento web. Entre elas estão, JQuery, Angular JS, Prototype, o Mootools e muito mais.
INTRODUÇÃO AO JQUERY
Usar JQuery durante o desenvolvimento web possui algumas vantagens, entre elas estão, diminuição da quantidade de códigos gerados pela linguagem javascript, tornando assim o código mais compacto e fácil de ler. 
Outra vantagem, é a compatibilidade e portabilidade do seu código entre diversos navegadores, pois antigamente diferentes navegadores tinham diferentes suportes a javascript, isso poderia gerar vários erros na execução de código entre vários navegadores (Internet Explorer 6, Safari, Firefox). Usando o JQuery ele já tem funções prontas que tratam essa compatibilidade para você.
INTRODUÇÃO AO JQUERY
EXEMPLO JQUERY
<html><head>
 <title>Minha Página</title>
 <script type=”text/javascript” src=”jquery.js”></script>
 <script type=”text/javascript” charset=”utf-8”>
 function helloWorld(){
 $(“#idElemento”).text(“Hello World”);} 
 </script></head>
<body>
 <h1 id=”idElemento”></h1><br/>
 <input type=”button” onClick=”helloWorld()” value=“clicar”/>
</body></html>
INTRODUÇÃO AO JAVASCRIPT
1.
2.
PRÓXIMA AULA
Phonegap Build