Please enable JavaScript.
Coggle requires JavaScript to display documents.
Linguagens de Programacao (JavaScript(JS) - Aprendendo a mexer (OBS dos…
Linguagens de Programacao
JavaScript (JS) -Parte mais explicativa
Criado pela NETSCAPE em parceria com a SUN MICROSYSTEMS, com a finalidade de fornecer um meio de adicionar INTERATIVIDADE a uma pagina web.
Primeira versao: JavaScript1.0, lancada em 1995
Obs: Nao há como fazer funcionar um formulario HTML com o uso de elementos HTML. Precisa de um programa que consegue processar os dados.
O desenvolvedor web moderno deve saber HTML para estruturar a pagina, CSS para especificar o layout, e JavaScript para programar o COMPORTAMENTO da pagina.
Funciona em laptop, tablet, smartphone...
Existe o DOM (Document Object Model), que é uma especificacao W3C para representar e interagir com objetos em HTML, XML, XHTML.
JS é capaz de manipular o DOM de paginas HTML por meio de diversos metodos.
Como? Modificando valores de atributos de um Documento HTML
Tbm é capaz de modificar folhas de Estilo CSS
Com o JS, pode-se manipular conteudo e apresentacao, manipular navegador, interagir com formularios, e interagir com outras linguagens dinamicas
JS é baseado em ECMAScript (que ta na versao 6), especificacao de linguagens implementada pela JS. Ela trouxe a maior mudanca para a linguagem JS desde a criacao.
Principal objetivo é deixar a linguagme mais FLEXIVEL, ENXUTA, FACIL de se aprender e trabalhar
JS ganhou muita forca na comunidade de desenvolvedores. Empresas de tecnologia tbm deram valor ao JS, como o FB.
A flexibilidade da linguagem tem sido usada a favor nao somente do lado do cliente, mas tbm do lado do servidor.
Obs: Javascript e Java NAO TEM NADA A VER!!
JS tem linguagem de uso especifico, desenvolvida para aprimorar experiencia de usuarios de navegadores.
JavaScript(JS) - Aprendendo a mexer
Arquivos devem ser salvos com extensao ".js " e sao executados dentro de um arquivo HTML
Comeca com <script> e fecha com </script>
3 formas de inserir JS em HTML (ideia parecida com CSS)
Interno: Escreve o Script na secao <head>. Ex: <!DOCTYPE html> <head> <script> function myfunction() {Document.....}</script> <body> <h1> A Web Page </h1> <p id="demo">Um Paragrafo </p> button type = "button" onclick = "myFunction()"> Experimente! </body> </html>
Aqui, a parte de script fica no "head"!
Inline(Nao recomendado-Dificulta Manutencao): Insere-se o script diretamente na secao <body> do documento
Aqui a parte de script fica apos as tags e tbm tem o "button..."
Externo: Excreve o Script no Head OU NO BODY com extensao .js e inserir o link no HTML. Ex: <!DOCTYPE html> <body> <script src = "meuscript,js"> </script> </body> </html>
Praticar modernas preconizam (recomendam) essa
é CaseSensitive (diferencia maiuscula de minuscula)
Comentarios: 2 tipos de marcadores
De multiplas linhas /
....
/ (Obs: aqui tem asterisco mas essa porra deixa em italico)
De unica linha: //
Um script consiste em uma serie de instrucoes. Cada uma das instrucoes constitui uma declaracao independente e existem 2 sintaxes para preapar as declaracoes..Separa por ";" ou coloca em linhas diferentes.
Quebras de linhas e espacoes em branco, quando inseridos entre nomes de variaveis, nomes de funcoes, nuemros sao ignorados pela sintaxe do JS.
Para strings e expressoes regulares, os espacamentos sao considerados.
Strings sao nomes das variaveis (que vem entre aspas)
JS Literais (qualquer dado (ou valor fixo) nao variavel) existente no codigo do script. Ex: Inteiros, Decimais, Booleanos (true e false), strings, arrays, objetos
Arrays: Conjunto de 0 ou mais valores envolvidos por colchetes e que estao entre virgula. Ex; var nome-array = [item1,item2...]. Obs tbm pode ser criado arrray da seguinte forma: new Array )item1, item 2...)
Como Manipular os elementos HTML?
Ou utlizando o metodo write (). Esse é recomendado apenas para realizar testes, na medida em que ele subscreve todos os elementos HTML
Utilizando o metodo document.getElementByid(id). O atributo id deve ser usado para identificar o elemento HTML e innerHTML deve ser usado para se referir ao conteudo do elemento.
Eventos (Evento=acao capaz de disparar uma reacao)
Permite-se a execucao de funcoes quando os eventos sao detectados. Ex de eventos: clicar em um link.
Unobstrusive JavaScript
Assim como CSS mudou HTML, esse separou a integracao da estruturacao.
Entao, é possivel separar o comportamento da marcacao, reutilizar o codigo, realizar melhoria continua.... melhorou a deteccao do codigo JS, e o suporte a cache.
Knockout: biblioteca JavaScript que ajuda a criar interfaces de usuario ricas e responsivas relacionadas a um modelo de dados subjacente:
Ele implementa o padrao MVC, é livre, bem documentado, pequeno, leve, e suportado pelos navegadores mais populares.
Fornece maneira simples e conveniente para gerenciar esse tipo complexo de interface orientada a dados. (Exemplo do carrinho de comprar em que vc tira algum item do carrinho)
Seu foco é projetar interfaces escalaveis e orientadas a dados, em que posso maniular o modelo de dados sem perda de referencias.
OBS dos Exercicios (Importante)
Para declarar nomes de identificadores, utiliza-se apneas letra ou underscore no primeiro caractere
Tipos de eventos (com o mouse)
onmousedown - O usuario pressiona o botao do mouse em um elemento
onmouseup - o usuario solta o botao sobre o elemento
onmouseover - O ponteiro é movido a um elemento ou a seus filhos
onmousemove - O ponteiro se move quando se está sobre um elemento
onmouseout - O usuario retira o pinteiro de um elemento ou de seus filhos
Funcao eval () da linguagem JS avalia e executa codigos dentro de uma string e apresenta o resultado
Na linguagem JS, os metodos de interface com o usuario que fazem parte do objeto window sao:
confirm() Exibe uma janela de dialogo com uma mensagem e os botoes OK e CANCEL
prompt(Exibe uma janela de dialogo à espera de uma entrada de usuario)
alert() - Exibe uma janela com botao "OK"
Linguagens JS e Applets rodam no cliente e Scripting ASP roda no sevidor
Objeto History (contem as URLs visitadas por um usuario) possui os metodos:
forward() - Carrega a URL a proxima URL do historico
go() - Carrega uma URL especifica do historico
back() - Carrega a URL anterior do historico
Evento Onblur: o objeto perde o foco. independente de ter havido mudanca ou nao. - Aquele que o maters explicou qnd clica fora
O evento onChange acontece quando o objeto perder o foco e houver mudanca de conteudo de um elemento.
A contrabarra "\" é usada ANTES de uma aspas em uma string para definir que aquilo as aspas fazem parte da variavel
Metodo parselnt(string,radix), em que esses parametros sao a string previamente definida (obrigatoria) e o radix (opcional) que é o numero que representa o sistema numerico usado, TRANSFORMA uma STRING de caracteres em um NUMERO numa determinada base numerica.
Se o navegador nao suportar o JS ou estiverem com a execucao do script bloqueada, sera o exibido algo que foi escrito pelo desenvolvedor em <noscript> .... </noscript>
Para transformar todos caracteres contidos em uma string em maiusculas, usa-se metodo: toUpperCase(). Para minustculas é toLowerCase().
JS comecou rodando so do lado do cliente, mas hoje roda tanto no cliente quanto no servidor
sinal de = no operador
a==5// compara o valor de a com 5
a===5// compara o valor e o tipo de a com o valor e tipo de 5. Se retornar true, é pq os operandos envolvidos (a e 5) forem iguais e do mesmo tipo
a=5// atribui 5 a variavel a
Método open() abre um website em uma nova janela do navegador.
moveTo() Move a janela atual
resizeTo() Redimensiona a janela atual
close() fecha a janela atual
Raiz quadrada de um numero é retornado pela funcao Mathsqrt(x)
Método getMonth() retorna o intervalo [0 a11], em que 0 é janeiro e 11 dezembro
Bibliotecas famosas de funcoes JS: MooTools, jQuery, Prototype e Dojo.
Similarmente a pilhas, para inserir um valor no final de um array e depois remove-lo, utiliza-se nomedavariavel.push("valor que se deseja inserir"); Para removelo, usa-se carros.pop()
ANGULAR JS by Google: Trata-se de um framework JavaScrpt (MVC) criado pela google cujo objetivo é construir aplicacoes web client-side (roda inteiramente no navegador) simples e faceis de manter por meio de componentes reusaveis e modulares.
Escrito inteiramente em JS
Adota abordagem mais ligada a sintaxe HTML
Nao é uma biblioteca JS, náo e uma plataforma, nao e uma linguagem, nao e um plug-in, e tbm nao e uma extensao do navegador. Se encaixa melhor na definicao de um framework
Compativel com Desktop e navegadores moveis
Quanto a seguranca, seu codigo trafega abertamente ate o front-end, no entanto e possivel minificar o codigo (remover todos os caracteres desnecessarios sem modificar funcionalidade)
Vantagens:
risco de ser descontinuado é baixo pq e da google
curva de aprendizado baixa
Se ganha muito com produtividade por conta dos componentes reusaveis
Se cair algo em prova, deve ser a diferenca entre Angular JS e Angular 2
Angular 2 é um framework javascript e foi completamente reescrito guardando poucas coisas do ANGULARJS. Aplicacoes Angular 2 podem ser desnvolvidas em JS, Dart, ou TypeScript.
O codigo do Angular 2 é composto de modulos que sao combinados em bibliotecas que sao agrupadas em pacotes. A aplicacao Angular 2.
A peca chave de uma aplicacao Angular 2 sao os componentes
Funcoes do Angular
ngBind: é um atributo que diz para o Angular reposicionar o conteudo do texto de um elemento HTML especifico com valor de uma dada expressao, e tbm atualizar o conteudo do texto toda vez que o valor de uma expressao for modificado
XML: (eXtensible Markup Language) - Metalinguagem de marcacao que define conjunto de regras para codificar documentos em um formato que seja legivel tanto por humanos quanto por maquinas.
Grosso modo: HTML serve para estruturar a pagina e XML para trransportar e armazenar dados
Metalinguagem de marcacao significa nao haver tags predefinidas..Voce cria suas proprias tags e com isso voce cria sua propria linguagem
É INDEPENDENTE de plataforma
Permite busca e processamento de informacoes de maneira OTIMIZADA, INTELIGENTE e SIMPLIFICADA
Definicoes importantes:
Atributos: Informacoes adicionais de um elemento.
Namespaces: eventualmente ocorrem conflitos com nomes iguais de elementos diferentes. Pra diferenciar, usa prefixo diferente. Ex: f:tale e h:table. Entao um namespace deve ser definido para esse prefixo.
é definido pelo atributo xmlns na tag inicial do elemento. Sintaxe: xlmns:prefix=URI , em que URI=Identificador Unico
Quando um namespace é definido, para um elemento, todos os elementos fihos com o mesmo prefixo sao associados àquele namespace.
Obs: Pode declarar os namespaces no no elemento raiz ou nos elementos em que estao sendo utilizados
Elementos: Tudo contido na tag inclusive a tag
Caracteristicas Importantes:
Simplifica compartilhamento de dados
Simplifica transporte de dados
Capaz de separar dados da aparencia
Metalinguagem extremamente extensivel
ELE NAO FAZ NADA! Simplesmente estrutura, armazena e transporta informacoes.
Primeira linha contem a Declaracao XML (contendo versao do XML e o tipo de codificacao)
Segunda tem o elemento raiz
Depois os elementos filhos da raiz
Depois fim do elemento raiz.
Diferenca entre Documento XML Bem Formado e Documento XML Válido
Sera valido se for bem formado e obedecer às suas proprias caracteristicas. (Exemplo: Carro sera bem formada por ser carro mas nao sera valido se nao for ferrari)
Bem Formado: Obedece suas regras de construcao. Tem 8 regras (intuitivas)
Possuir um unico elemento raiz. 2. Todos elementos devem conter tag de fechamento. 3. Elementos devem estar corretamente aninhados(tags fechadas na ordem correta). 4. Atributos devem possuir valores e os valores devem estar entre aspas simples e duplas.
Nomes das tags e atributos sao Case-Sensitives. 6. Caracteres Especiais (dependendo do caractere que tiver dentro do elemento, vai dar erro..ai tem uns simbolos para resolver problema mas nao vou gravar!). 7. Atributos nao podem se repetir dentro de um elemento (aqui ta atribuindo 2 valores diferentes ao mesmo atributo) 8. Tags nao podem comecar com numero, ponto ou hifen nem com caracteres estranhos..
2 tipos principais de Arquivos de Definicao
DTD
Obs: Um documento XML valido é bem formado se seguir as regras de um DTD
Seu proposito é definir a estrutura de um XML
Obs: O elemento que declara um elemento-raiz esta em um validador DTD ou XSD. Em um DTD, é declarado por um <!DOCTYPE>. Quando nao se declara nada, elemento-raiz é declarado por um !ELEMENT
XSD
Sao obrigatorios ? Nao! Sao declaracoes opcionais que informam quais tags sao validas no documento xml e como elas devem ser estruturadas.
Obs Exercicios:
XML é uma sintaxe e uma estrutura. Ela nao lida com semantica!
Sintaxe diz como se deve escrever na linguagem. Semantica é o significado de cada elemento.
Eu posso declarar elementos, entidades, notacoes e lista de atributos mas INSTANCIAS nao!
DOM - Document Object Model
Atraves dele, os scripts conseguem manipular dinamicamente a estrutura da pagina.
O JS (por ex.) nao tem capacidade de acessar elementos especificos de um documento de forma padronizada! O DOM permite isso por meio de uma arvore DOM.
O DOM é uma abordagem hierarquica de analisador de documentos e o SAX é uma abordagem orientada a eventos.
Dom opera no documento como um todo e SAX opera sobre cada parte do documento sequencialmente.
Para documentos de grandes dimensoes, O DOM torna-se insuficiente pois sua utilizacao impoe contrucao de uma arvore com TODOS os elementos do documento na memoria.
Por isso, aplicativos se voltam para abordagem voltada e eventos
É a especificacao de uma interface independente de linguagem de programacao e plataforma que permite acessar e alterar dinamicamente a estrutura, estilo e conteudo de documentos eletronicos.
JSON(JS Objecto Notation): Formato para intercambio de dados
Apesar de usar mesma sintaxe do JS, ele é completamente independente.
Vantagem sobre o XML é que ele é bem mais leve e mais facil de ler/entender.
E
Parsing (analise sintatica) mais facil
Suporta classes e objetos
é mais rapido na execucao e transporte de dados
cria arquivos menores
nao e linguagem de marcacao nem esquemas de marcacao
é atualemtne usado pelo Google e FB
Grande diferenca entre os dois é que em XML, o parsing deve ser feito por um parser XML. No JSON, basta uma funcao JS.
Semelhancas entre os dois: Ambos sao formato texto (plain text), ambos autodescritivos e facilmente entendivesis, ambos HIERARQUICOS, e ambos independentes de linguagem.
Mateus disse que é a variavel objeto do JS! as coisas estao entre colchetes. E TUDO, valor atribuido à variaveis e o nome da variavel esta ente aspas. Cada coisa é separada por virgulas
é tipicamente usado em ambientes cujo tamanho do fluxo de dados cliente/servidor é imenso
REST vs SOA (pensar em arte para diferenciar)
SOA é uma arquitetura (é mais amplo)
REST é um estilo arquitetural para construir sistemaemas fracamente acoplados
Essas restricoes (que nem tem o estilo gotico na arte), sao correspodentes às tecnologias/protocolos e ajudam a diferenciar uma arquitetura e um estilo arquiquetural.
REST pode ser visto como fornecimento de servicos com as seguintes restricoes:
As restricoes sao:
Cache
Stateless (Sem Estado)
Interface Uniforme
Cliente/Servidor
Codigo sob Demanda (Opcional)
Sistema de Camadas
Conceito funndamental
RECURSO: Qualquer coisa que possa ser manipulada ou acessada (ex: videos, imagens, perfis de usuarios)
Os recursos sao relacionados com os outros
URI: Uniform Resource Identifier. É uma string de caracteres utilizada para identificar unicamente um recurso.
A URL (Uniform Resource Locator) é uma URI que tbm localiza um recurso na web.
No Rest, todo recurso possui um identificador
REST vs SOAP
SOAP: Suporta somente o formato XML / Suporta XML, JASON, YAML, TXT
SOAP:: Utilza um envelope (Cabecalho + Corpo) enviado por HTTP para transmitir dados /REST: Utiliza os recursos oferecidos nativamente pelo HTTP
SOAP: apresenta desempenho e escalabilidade menor / REST: Apresenta desempenho e escalabilidade maior
SOAP: é um protocolo de comunicacao / REST: É um estilo arquitetural ou uma tecnica de engenharia de software
SOAP: Nao permite fazer caching/ REST: Permite fazer Caching
SOAP: JS pode chamar SOAP mas e dificil implementar / REST: JS pode facilmente chamar REST
Obs: SOAP --- JAX-WS / REST-----JAX-RS! RS de Restful servoce.
REST utiliza O PROTOCOLO HTTP!! E os metodos HTTP: GET - Recuperar, POST - Inserir, PUT - Atualizar, DELETE - Deletar