Ir para conteúdo
Faça parte da equipe! (2024) ×
Conheça nossa Beta Zone! Novas áreas a caminho! ×

  • Quem está por aqui   0 membros estão online

    • Nenhum usuário registrado visualizando esta página.

Introdução completa sobre Java script

HoruS*

Por ,
em Desenvolvimento Web

 Compartilhar

Posts Recomendados

Novato

HoruS* 21

Postado
Postado

Eaew pessoal tudo na boa HoruS* aki vim trazer uma parte do curso online que estou fazendo e quero compartilhar com vcs vamos la

ainda bem que vcs nao vai presisar pagar néh kk'

 

Conceitos Iniciais

 

javascript-trilha-A.jpg

 

O que é JavaScript?

 

LicaoA1Javascript.jpg

 

O JavaScript é uma linguagem de programação de scripts, ou seja, de pequenos programas utilitários. Uma linguagem de scripts é, geralmente, uma linguagem interpretada que expande as características de um outro programa. No caso do JavaScript, trabalhamos com os Navegadores Web.

 

Como grande parte das linguagens de script, o JavaScript possui uma tipagem fraca, ou seja, possui dados dinâmicos. Isso significa que não é necessário especificar os tipos dos dados - se é número, caractere, etc. -, pois eles são definidos automaticamente. Veremos isso em breve.

 

Não confunda o JavaScript com a Java, pois, apesar do nome ser parecido, não há relação entre as duas. São linguagens com objetivos e paradigmas - modos de utilização - diferentes. Enquanto a Java é generalista, o JavaScript tem foco específico: a Web.

 

História

 

O JavaScript nasceu em 1995, com o nome Mocha, como um projeto da Netscape Communications. Posteriormente, foi renomeada para LiveScript e, mais tarde, para JavaScript. Este nome é o resultado de um acordo comercial entre a Nestcape e a Sun - empresa que desenvolve a linguagem Java -, em troca da Netscape incluir a máquina virtual Java em seu navegador, que na época era o dominante.

 

A linguagem foi concebida para ser utilizada em aplicações client-side, que rodam no navegador do usuário. Após seu desenvolvimento, a linguagem foi padronizada pelo comitê ECMA International - empresa que realiza padronizações de sistemas de informação e comunicação -, resultando no padrão ECMAScript . Esse padrão serve de base para outras linguagens como a ActionScript.

 

Características

 

As características a seguir são comuns à todas as linguagens baseadas no padrão ECMAScript como o JavaScript:

 

?Imperativa e Estruturada

 

O JavaScript suporta toda a sintaxe de programação estruturada da "C" - que também é uma linguagem - como os laços de repetição e condição, e também faz distinção entre declarações e expressões.

 

?Dinâmica

 

Além de tipagem dinâmica, o JavaScript foi inspirado em alguns objetos e possui uma maneira de fazer avaliações de trechos de código, por exemplo os inseridos pelo usuário, em tempo de execução.

 

?Linguagem baseada em protótipo ( prototype-based )

 

A linguagem define métodos e construtores de objetos através de protótipos, que são representações de objetos que servem de molde para a criação de um novo objeto, através de cópia.

 

?Extras

 

Existem muitas características e funcionalidades extras na linguagem, como expressões regulares e números de parâmetros indefinidos na chamada de uma função. Posteriormente você se sentirá mais à vontade com esses termos.

 

Quem mantém?

 

Hoje, quem gerencia oficialmente a linguagem Java é a fundação Mozilla - a mesma do navegador Mozilla Firefox -, e novas funcionalidades são frequentemente adicionadas à essa linguagem.

 

JavaScript é uma marca registrada da Sun Microsystems, e esse mesmo nome é utilizado pelo Mozilla e o Netscape.

 

Existem, também, motores responsáveis por interpretar o código de JavaScript que não foram desenvolvidos por essas empresas, e que incluem boa parte das funcionalidades da linguagem.

 

O site oficial da linguagem está no centro de desenvolvimento Mozilla - Mozilla Developer Center. Você pode acessá-lo através do endereço:

É necessário se cadastrar para acessar o conteúdo.

 

Material de Referência da Linguagem

 

Caso você tenha dúvidas ou queira buscar mais informações, segue logo abaixo uma lista de referências úteis:

Guia do JavaScript (em Inglês):

É necessário se cadastrar para acessar o conteúdo.

Seção de referência rápida da linguagem (no projeto Wikibooks, em português):

É necessário se cadastrar para acessar o conteúdo.

Referência da linguagem no site w3schools:

É necessário se cadastrar para acessar o conteúdo.

Site com vários exemplos:

É necessário se cadastrar para acessar o conteúdo.

Mais exemplos:

É necessário se cadastrar para acessar o conteúdo.

 

O que fazer com o JavaScript?

 

Digamos que o JavaScript veio para dar um pouco mais de vida ao HTML - Linguagem de Marcação de Hipertexto - utilizado para produzir páginas na Web. O JavaScript promove interatividade e dinamicidade em páginas HTML, sendo possível, com ele, manipular a estrutura da página de modo a obter recursos interativos muito atraentes.

 

Dentre as funcionalidades permitidas pelo JavaScript, temos:

Abrir pop-ups com controle sobre os atributos da nova janela;

Validar campos de formulários de acordo com determinados padrões;

Mudar os atributos de uma imagem quando o cursor passar sobre ela (ou mesmo alterar a imagem).

Manipular os dados digitados pelo usuário.

Mandar mensagens ao usuário de acordo com o estado da aplicação.

 

Como o JavaScript roda no navegador do usuário, o código pode responder mais rapidamente às ações executadas, fazendo com que a aplicação pareça menos estática.

 

Podemos utilizá-lo para implementar pequenos programas que são executados dentro do navegador, como um editor de textos para serviço de e-mail que processaria o texto e o enviaria para o servidor já na linguagem JavaScript.

 

JavaScript e outras tecnologias

 

O JavaScript não está sozinho. Podemos aliar essa linguagem à outras tecnologias e, assim, obter muitos recursos interessantes.

1.7.1 - AJAX

 

A AJAX - Assyncronous JavaScript and XML - é uma tecnologia que se baseia em JavaScript e XML para implementação de modos de requisição de conteúdo assíncronos, promovendo maior interatividade e dinamismo às páginas.

 

Quando utilizada a AJAX, muitas aplicações da internet não necessitam recarregar a página todas as vezes em que algum dado é solicitado ao servidor, tudo é feito pelo JavaScript, de forma invisível

 

Applets e JavaScript

 

1.7.2 - Applets e JavaScript

 

Applets são programas escritos em Java, que são incorporados em documentos HTML. Esses programas permitem uma grande gama de funcionalidades e recursos.

 

É possível comunicar applets com scripts feitos em JavaScript, e vice-versa. Isso permite utilizar os poderes da linguagem Java e a facilidade de uso do JavaScript em uma mesma aplicação. Você poderia, por exemplo, escrever applets em Java que não possua interface gráfica, deixando esta à cargo do JavaScript, CSS e HTML.

 

Flash/Flex e JavaScript

 

1.7.3 - Flash/Flex e JavaScript

 

A tecnologia Flash é baseada em uma linguagem de programação chamada ActionScript, que deriva do mesmo padrão do JavaScript: ECMAScript. Isso as tornam muito semelhantes.

 

Uma das capacidades mais interessantes do Flash é o poder de interagir com o JavaScript. Associado ao filme em flash (que no documento é um objeto), existem muitas funções predefinidas que podem ser usadas para nos comunicarmos com um filme em flash. Estas funções podem ser chamadas, a partir de linguagens, como o JavaScript. Você pode utilizá-las para controlar o filme e enviar e receber dados pelo navegador. É interessante e necessário, para isso, dominar a tecnologia.

 

Para mais informações, acesse

É necessário se cadastrar para acessar o conteúdo.
.

 

Com a utilização da tecnologia Flex, o desenvolvimento de aplicações ricas para a Web fica muito interessante, pois lança-se mão de todo o poder e interatividade proporcionados pelo Flash. A interação com JavaScript acontece da mesma forma, através de métodos predefinidos.

 

Um exemplo bastante didático é mostrado neste endereço:

É necessário se cadastrar para acessar o conteúdo.
. Note que o apelo visual da aplicação é muito grande.

 

Inserindo código JS em uma página HTML

 

LicaoA2Javascript.jpg

 

A tag - <script>

Incluindo um arquivo externo

Inclusão de scripts In-line

Resumindo

 

A tag - <script>

 

Podemos inserir um código JavaScript em documentos HTML por meio das tags que são estruturas de linguagem de marcação que consistem em breves instruções, tendo uma marca de início e outra de fim, por exemplo: <script> e </script>.

 

Observe no exemplo a seguir como essa tag é utilizada:

 

É necessário se cadastrar para acessar o conteúdo.

 

Note que especificamos qual o tipo de script inserido: "texto/javascript". Note também que podemos utilizar essa tag tanto no corpo do documento quanto no cabeçalho. O que diferencia as duas formas é o fato de que o script inserido no cabeçalho será carregado antes mesmo do corpo do documento surgir na tela. É preciso ficar atento a esse fato: se o script depende de algum elemento do corpo do documento, ele não deve ser executado antes que o corpo também o seja.

 

Observação: não há um limite para o número de tags script dentro do documento.

 

Um Primeiro Exemplo Funcional

 

Um primeiro exemplo funcional:

 

É necessário se cadastrar para acessar o conteúdo.

 

Copie esse exemplo e salve-o como um documento HTML. Em seguida, abra-o com um navegador. O resultado é um texto escrito na tela: "Ola Mundo!"

 

primeiro_exemplo_funcional.png

 

Incluindo um arquivo externo

 

Em uma única página, a forma de inclusão de um arquivo externo é suficiente, como já foi visto anteriormente, mas ela fica limitada quando é aumentado o número de páginas abrangidas pelo script. Repetir código em todas as páginas é algo muito ruim, se olhado do ponto de vista da manutenção e da praticidade. Imagine se for necessária uma correção no script?

 

Para resolver esse problema, utilizamos a segunda forma de inclusão: incorporação de um arquivo externo. Nessa forma, um arquivo externo contendo o código é criado e salvo em algum diretório específico. Esse arquivo possui a extensão ".js" e não contém nada além de código JavaScript puro. Veja como é feita a incorporação no documento HTML

 


<html>

<head>

<title>

</title>

<script type="text/javascript" src="codigos.js"></script>

</head>

<body></body>

</html>
É necessário se cadastrar para acessar o conteúdo.

 

Se abrirmos o arquivo HTML com um navegador, veremos escrito na tela: "Ola, mundo! Esse texto vem de um arquivo externo!". Note que vários documentos HTMLs podem incluir o arquivo de códigos em JavaScript, sem que um interfira no outro. Repare que nos dois exemplos existe uma linha onde lê-se document.write, e que estará disponível em vários outros exemplos nossos. Essa linha informa para o interpretador embutido no navegador que a frase entre aspas deve ser escrita no documento e, consequentemente, na tela.

 

Inclusão de scripts In-line

 

Na forma de inclusão de scripts In-line é possível inserir códigos JavaScript dentro das próprias tagsHTML. Futuramente esse conceito ficará mais claro, após estudarmos os "eventos" no JavaScript. Existem tags HTML que dão suporte à inserção de códigos que serão executados caso o usuário efetue alguma ação ou alteração no estado da página, como um clique, um movimento do mouse, etc.

 

Observe:

 

É necessário se cadastrar para acessar o conteúdo.

 

Nesse exemplo, pusemos o código JavaScript dentro da tag "h1", usando a propriedade onclick.

 

Antes e Depois

 

Antes:

 

cabecalho_clique_aqui.png

 

Depois:

 

clicou_no_cabecalho.png

 

Resumindo

 

Para funções repetitivas, é recomendado utilizar um arquivo externo, que facilitará a manutenção do código.

Para scripts que abrangem uma única página, com funções simples, porém extensas, recomenda-se a inserção com as tags <script> e </script>, sempre observando em qual lugar será melhor inserido, ou no cabeçalho ou no corpo do documento.

Para atividades muito específicas, utiliza-se scripts in-line. Um exemplo óbvio é o tratamento de eventos, que veremos em outro tópico.

 

Hierarquia de Objetos DOM

 

HierarquiaDOM.jpg

 

Através das predefinições do DOM, podemos acessar os elementos contidos em nossos documentos, desde formulários até a própria janela do navegador, manipulando propriedades e chamando métodos, que seria a forma de executar ações úteis. Qualquer elemento HTML que contenha texto ou atributos pode ser acessado, ter seu conteúdo alterado ou deletado. Além disso, novos elementos podem ser criados.

 

Uma característica do DOM é que ele é independente de plataforma e linguagem. Várias linguagens, como Java, VBScript e o próprio JavaScript podem utilizá-lo.

 

Propriedades de um objeto

 

Propriedades são variáveis que armazenam uma determinada informação de algum objeto.

 

A hierarquia apresentada, sobre os objetos DOM, mostra a ordem que deve ser seguida para que se possa acessar uma determinada propriedade. Por exemplo, se quiséssemos acessar o título da página, utilizaríamos a seguinte linha:

 

 

É necessário se cadastrar para acessar o conteúdo.

 

Essa linha informa que queremos definir a propriedade title (título) como sendo "Novo título!". Essa propriedade pertence ao objeto document (documento).

 

O acesso é feito sempre dessa maneira: objeto.propriedade. Olhando o primeiro exemplo, vemos que a propriedade title é do objeto document. Podem existir propriedades que pertencem à outros objetos, e estes são propriedades de um objeto principal. Por exemplo, suponha que você criou o seguinte código em HTML.

 

É necessário se cadastrar para acessar o conteúdo.

 

Parte 2

 

Em um primeiro nível, temos o document. Em seguida, olhando pela estrutura da hierarquia, temos alguns objetos, inclusive os formulários. O nosso formulário possui o nome "meuForm" e é assim que ele é conhecido na estrutura da página. Dando sequência, dentro do formulário há um campo de texto chamado "entrada1", que é o nome objeto que o representa. Esses campos possuem uma propriedade, que guarda o seu valor digitado no campo, chamado "value".

 

Se acessarmos o texto digitado, verificaremos o nome completo da propriedade:

 

document.meuForm.entrada1.value

 

 

Esse nome demonstra o esquema de hierarquia, onde acessamos diversos objetos inclusos em outros.

 

 

Imagen

 

minha_pagina.png

 

Metodos

 

Além de acessarmos propriedades da página, podemos executar algumas ações, através da chamada de métodos. Um método é basicamente uma ação executada por um objeto. Um método bastante comum é o write, do objeto document. Esse método escreve no documento o texto que for passado para ele entre aspas, como no exemplo a seguir:

 

É necessário se cadastrar para acessar o conteúdo.

 

Outros métodos comuns são o alert, que exibe uma mensagem de alerta/aviso na tela, e o prompt, que exibe uma janela com um campo de texto para digitação (entrada de dados). Ambos pertencem ao objeto window, e podem ser executados diretamente, como no exemplo:

 


window.alert("Bem vindo!");

alert("Bem vindo!"); // mesmo efeito que o anterior






 



Lista de objetos modelados pelo DOM








 








A lista de objetos é grande, e a de propriedades e métodos também. Abaixo, você encontra um resumo dos objetos: 



 Anchor: Representa o elemento <a> 



 Area: Representa um elemento <area> dentro de um mapa de imagens 



 Base: Representa um elemento <base> 



 Body: Representa o elemento <body> 



 Button: Representa um elemento <button> 



 Event: Representa o estado de um evento 



 Form: Representa um elemento <form> 



 Frame: Representa um elemento <frame> 



 Frameset: Representa um elemento <frameset> 



 Iframe: Representa um elemento <iframe> 



 Image: Representa um elemento <img> 



 button: Representa um elemento button em um formulário HTML 



 checkbox: Representa um checkbox em um formulário HTML 



 file: Representa um elemento fileupload em um formulário HTML 



 hidden: Representa um elemento hidden (campo oculto) em um formulário HTML 



 password: Representa um campo password em um formulário HTML 



 radio: Representa um radio button em um formulário HTML 



 reset: Representa um reset button em um formulário HTML 



 submit: Representa um submit button em um formulário HTML 



 text: Representa um text-field em um formulário HTML 



 Link: Representa um elemento <link> 



 Meta: Representa um elemento <meta> 



 Option: Representa um elemento <option> 



 Select: Representa uma lista de seleção (<select>) em um formulário HTML 



 Style: Representa uma declaração individual de estilo (em qualquer outro elemento) 



 Table: Representa um elemento <table> 



 TableData: Representa um elemento <td> 



 TableRow: Representa um elemento <tr> 



 Textarea: Representa um elemento <textarea> 


 



 Vale lembrar que esses são os objetos do modelo. Em seu documento, os objetos serão de algum desses tipos listados, mas terão nomes particulares, geralmente definidos pelo atributo name. Cada tipo de objeto listado possui propriedades e métodos próprios, e alguns em comum, como as propriedades id e className.









			
		


		

		
			

	

		

		

			

5hTkq8b.png





		

	


		
	




	

		ﾠﾠMural de Coleçõesﾠﾠ 
		

			
			
			
			
			
			
			
			
			
			



	

	
			
			



	

	
			
			



	

	
			
			



	

	
			
		

      
	

  
    
Clique aqui e adquira suas medalhas






	

	





	
Link para o comentário

	
		
	
	
	

	
	
Compartilhar em outros sites

	

	


	

	

	





	

  





					
					
						



	
	



					
					
				

					

					
					






					
					
					
				

					

					
					






					
					
					
				

					

					
					






					
					
					
				
			
			



		

	


	
	
	
	
	
		
	

			
				
					


	



	

		

			 Este tópico está impedido de receber novos posts. 
		
			
		

	



				
			
		

	

	
		

			
				

					


    
          Compartilhar
    

    

        
        
            

            
        
    


				

			
			

				


			

			
		

	







	

		
			
				Ir para a lista de tópicos
			
		
	

	




						


	

		
    
			
				
					
					
  • 
				
			
		

	


					

					


				

				
				

			

			
            
                
            
		

		
		



	

		×
		


    
	





			
				

					
				

			
          	
          	
          
			

			

			
		

	






	

		×
		

			
    
				
  • Criar Novo...
    • 
				
			

		

	




		






















	

		

			
Informação Importante

			
	Nós fazemos uso de cookies no seu dispositivo para ajudar a tornar este site melhor. Você pode  ajustar suas configurações de cookies , caso contrário, vamos supor que você está bem para continuar.

		

		

			
			 Accept Cookies
			 Reject Cookies