AJAX com JavaScript Carrega dados JSON dinamicamente da API | Laurence Svekis | Skillshare

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

AJAX com JavaScript Carrega dados JSON dinamicamente da API

teacher avatar Laurence Svekis, Best Selling Course Instructor

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

66 aulas (9 h 22 min)
    • 1. 0 Introdução

      0:57
    • 2. 1 configuração do editor de código

      6:38
    • 3. 2 introdução para JSON e AJAX

      11:28
    • 4. Três objetos de JavaScript de JSS

      16:43
    • 5. Quatro objetos e matrizes para JavaScript

      18:01
    • 6. 5 de objetos para objetos

      6:21
    • 7. Seis conexões de AJAX

      13:35
    • 8. 7 APAX, parte 2

      7:46
    • 9. 8 dados de objetos de JavaScript

      15:16
    • 10. Métodos de matriz de em JavaScript

      16:10
    • 11. Métodos de matriz de de em JavaScript 2

      11:15
    • 12. 11 JavaScript DOM

      20:36
    • 13. 12, DOM

      24:10
    • 14. 0 Introdução

      0:57
    • 15. 1 de web APIs de AJAX

      11:22
    • 16. 2 API com dados with

      18:57
    • 17. Três API com o Data Stack

      24:02
    • 18. 4 API com o Data GitHub

      24:53
    • 19. 5 de placas

      10:24
    • 20. 6 seis

      21:36
    • 21. 7 JSON

      8:44
    • 22. 8 de Mockend REST

      3:36
    • 23. Servidor de 9 Node JSR

      7:32
    • 24. JSONAPI

      2:48
    • 25. 1 Introdução para o curso de AJAX e JSON

      5:10
    • 26. Recursos de configuração do curso

      4:20
    • 27. 3 Introdução para AJAX e JSON

      5:35
    • 28. 5 Como as objetos do JavaScript funcionam

      7:41
    • 29. 7 Introdução para matrizes de objetos

      4:42
    • 30. 9 de mais a de de objeto

      6:57
    • 31. Solução para desafiar o novo loop

      4:25
    • 32. 13 JS, se em objetos de JavaScript

      6:07
    • 33. 14 JAXX de

      6:37
    • 34. 15 Carregar o conteúdo do arquivo externo no JavaScript

      6:15
    • 35. 16 Como criar objeto do JavaScript com dados

      5:46
    • 36. 18 AJAX Desafio

      2:36
    • 37. 19 valores de solicitação de HTTP explicados em detalhes

      6:15
    • 38. 21 Crie o arquivo do servidor do PHP para receber e calde

      10:15
    • 39. 22 Enviar dados por OS AJAX para servidor

      5:59
    • 40. 24 a obter de valores do post para usuário

      3:14
    • 41. 25 Configurar o banco de dados do MySQL

      3:37
    • 42. 27 inserir dados no MySQL no banco de dados do AJAX

      9:32
    • 43. Resposta de dados do 28 de servidor como JSON

      10:51
    • 44. 30 de arquivo simples

      5:30
    • 45. 32jQuery

      4:19
    • 46. 33 Obtenha dados do JSON

      4:04
    • 47. 35 postar dados para o servidor jQuery jQuery

      11:29
    • 48. 36 poste de dados como usar o AJAX para o MySQL

      7:37
    • 49. Método 38 de AJAX, no JQuery

      9:51
    • 50. 40 jQuery jQuery

      4:45
    • 51. 41 de limpeza de dicas de JavaScript

      5:13
    • 52. 43Use a PHP para fazer o download de dados do MySQL em formato JSS

      8:11
    • 53. 45 getJSON para obter conteúdo do banco de dados

      2:52
    • 54. 46 listar os conteúdo do banco de dados na página web

      6:57
    • 55. 47 a de código e opções

      3:45
    • 56. 49 Adicione o evento de jQuery

      3:17
    • 57. 50 Post de AJAX com o evento de

      10:08
    • 58. 51 configuração para post de AJAX

      7:52
    • 59. 53 Update com elementos em HTML

      4:27
    • 60. 55 Adicione conteúdo ao banco de dados

      7:37
    • 61. 57 Atualização para o download

      5:23
    • 62. 58 a redução de código para a limpeza

      7:03
    • 63. 59Crie a consulta de de servidor do banco de dados

      2:32
    • 64. 61 postagem de AJAX para excluir de

      3:35
    • 65. 622 de Styling atualização

      9:03
    • 66. 63? de curso

      6:56
  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

293

Estudantes

--

Sobre este curso

Configuração de AJAX JSON com o JavaScript

AJAX JSW

Aprenda como usar o AJAX para enviar dados para o seu servidor de web e obter dados de resposta de forma de sua aplicação na Explore o código de JavaScript para se conectar para as APIs da web e recupere os dados JSS para suas páginas da web que de outputting em sua página da Web. Dinamicamente

  • o que é JSON e como funciona

  • Como seu navegador de web pode fazer solicitações de http no servidor usando o AJAX

  • AJAX e o que as tecnologias fazem o AJAX

  • Como você pode usar o JavaScript para atualizar os elementos DOS

  • Manipule elementos na sua criação na página na página da web, atualize e de estilo de forma dinamicamente com código.

  • Páginas de web interativas - adicionar os ouvintes e configurar as interações de páginas

  • Dados do JSON e objetos do JSE, e de JSON e

  • Saída e iteração de dados do JSON

  • Como usar objetos do JavaScript no conteúdo da página da web

  • Como criar conteúdo de AJAX de a

  • Exemplo de APIs de web populares que você também pode se conectar

Domine de mestre de JavaScript de DAX
JSS

Crie aplicativos dinâmicos interativos que podem sincronizar dados entre seu banco de dados e seu código de

O conteúdo no curso é único que você não vai encontrar em outro lugar. Vamos mostrar como criar um projeto personalizado no curso que conecte as interações HTML com conteúdo da banco de
you este este curso.Os conhecimentos de programação básica. Este é um curso de ritmo rápido em fazer conexões de front-end para de traslado.

O curso é focado na criação de chamadas de AJAX com código de AJAX Observe o tópicos abaixo.




Objetos de JavaScript ObjectsJSONAJAX de
JavaScript O SHILS e a JavaScript de
JavaScript, DE

ObjectsJSONAJAX

JSON é e excelente formato de dados para dados, sua capacidade de legível e flexível para ser convertida de cordas para objetos de JavaScript utilizáveis.

AJAX é a solução perfeito para criar conexões entre dados e interações com usuários da web. Você pode fazer upload da sua página na página com a recarregar a página, fornecendo uma experiência perfeita para seus visitantes da web na web. JAX dá a capacidade de solicitar e receber dados de servidores e arquivos externos. Tudo isso é feito após a sua página da web e o conteúdo já está para os usuários da web da web. Você também pode usar o AJAX para enviar dados para um no server.

Como fazer dados do

Este curso fornece um guia passo a passo para conhecer JSON e AJAX. Comentar essas juntas pode ajudar você a desenvolver melhores experiências do usuário e mais oportunidades para a manipulação de de dados em seu código de JavaScript de

Fornecimento no curso




Coach exemplos e
de recurso usado neste curso, para que você também pode seguir o Código de fonte e desafiar a qualidade de
HD de
qualidade de Expanda no objeto com matrizes de objetos e de vários objetos Loop nos objetos e analise os dados do JSE.

Explore como você pode usar o AJAX para recuperar conteúdo externo para o banco de dados, como conteúdo de banco de dados, HTML Este curso também inclui várias maneiras de se conectar de métodos de JavaScript para jQuery.

Veja como seu pode conectar o código do PHP para superar seus aplicativos da web. Adicione dados no seu banco de base, atualize um banco de dados de dados de uma base de dados da parte de você frente e

O AJAX está na demanda e aprender como utilizar o AJAX junto com JSON e JSX vai fazer você separar. Estou aqui para ajudar você a aprender e pronto para responder a qualquer dúvida que você pode ter.

Conheça seu professor

Teacher Profile Image

Laurence Svekis

Best Selling Course Instructor

Professor

Web Design and Web Development Course Author - Teaching over 1,000,000 students Globally both in person and online.    Google Developer Expert since 2020 GDE

I'm here to help you learn, achieve your dreams, come join me on this amazing adventure today
Google Developers Expert - GSuite

Providing Web development courses and digital marketing strategy courses since 2002.

Innovative technology expert with a wide range of real world experience. Providing Smart digital solutions online for both small and enterprise level businesses.

"I have a passion for anything digital technology related, enjoy programming and the challenge of developing successful digital experiences. As an experienced developer, I create... Visualizar o perfil completo

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%
Arquivo de avaliações

Em outubro de 2018, atualizamos nosso sistema de avaliações para melhorar a forma como coletamos feedback. Abaixo estão as avaliações escritas antes dessa atualização.

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui cursos curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. 0 Introdução: Esta seção terá alguns projetos divertidos para você se familiarizar mais com fazer ajax rodando com JavaScript, fazendo solicitações para várias APIs da Web comuns. Então, haverá algumas das populares APIs da Web, como se conectar ao Stack Overflow. Também há conexão com a API do GitHub, que são APIs muito ricas com muito conteúdo. São objetos muito grandes. E você pode extrair todo esse conteúdo o aplicativo da Web de prática para se familiarizar com a obtenção dos dados do objeto JSON e, em seguida, enviá-los em sua página da Web usando JavaScript. Também se conectará à API do usuário aleatório e a várias outras APIs populares. E o objetivo desta seção é praticar e ficar mais familiarizado com o trabalho com JSON, fazendo essas conexões e produzindo esses dados JSON para a página da Web. Vamos começar. 2. 1 configuração do editor de código: Esta lição vamos abordar como configurar o editor de código que você usará na próxima lição, Visual Studio Code. Agora você está convidado a usar seu próprio editor. Esta lição mostrará como obter a configuração do código do Visual Studio em seu computador e, em seguida, também como acessar o servidor ativo, que permitirá que você execute um host local, à direita, em sua própria máquina. Então, isso vai simular um servidor e vamos precisar disso para as próximas lições, pois praticamos Ajax e JSON e fazendo conexões com o código de back-end. Este é o Visual Studio Code, que está disponível no site Code dot Visual Studio.com. E vem em versões do Mac, Windows e Linux. Então vá em frente e baixe a versão que é para o seu sistema operacional. E eu vou estar em um Mac, então baixe a versão para Mac e passe pela configuração de instalação dela. Ele também tem alguma documentação. Tem várias extensões. E uma das extensões que vamos analisar é o servidor ao vivo. Depois de instalar e configurar, vá em frente e abra seu editor de código e vá para o topo, onde ele diz as preferências. E vamos olhar para as extensões abaixo. Você também pode usar o atalho para abrir as extensões. E eu tenho uma lista de todas as extensões que eu tenho instaladas atualmente. O que vamos procurar é o servidor ao vivo. Então, na verdade, tenha isso instalado. Portanto, se você tiver uma extensão instalada, sempre poderá desinstalá-la ou reinstalá-la. Pesquise extensões e pesquise por Live Server. Este é o que queremos usar. Chama-se Live Server por Rick dia rápido. E isso permite que você inicie um servidor local de desenvolvimento diretamente dentro de sua máquina, diretamente do editor de código. Depois de selecioná-lo, você pode fazer a instalação selecionando o botão Instalar. Você também pode desabilitar a qualquer momento ou desinstalá-lo. E depois de instalado, você terá acesso para usá-lo. Volte para a página inicial e você sempre pode voltar para a página de boas-vindas na guia Ajuda na parte superior e, em seguida, vá para a página de boas-vindas. E esta será a página inicial do Visual Studio Code quando você o abrir. E tem uma opção aqui para selecionar o Novo e, em seguida, também o trabalho recente que você fez. Há também algumas opções aqui para diferentes ferramentas e idiomas, configurações e ligações de teclas. E você também pode atualizar seu tema de cores aqui também. Então, todos eles podem ser personalizados em todo o layout. Portanto, há várias opções para personalizar a aparência do editor. Então, vamos começar criando um novo arquivo. Você também pode fazer isso. Na guia Arquivo na parte superior do menu, estou criando uma pasta chamada ajax. Então, dentro do ajax, é onde vou configurar meus arquivos, onde começo criando um arquivo index.html. Isso servirá como nossa página de front-end que vamos executar no navegador para renderizar o código JavaScript. Portanto, isso está apenas dentro uma nova pasta que eu criei chamada Ajax, salvando isso com o Visual Studio Code, vamos seguir em frente e vamos adicionar isso ao espaço de trabalho. Então, vamos adicionar pasta ao espaço de trabalho, e você precisa fazer isso para executar o servidor ativo. Então, vou seguir em frente e selecionar Adicionar. E então aqui vamos digitar Hello World. E também podemos adicionar as tags HTML padrão, incluindo o doctype, as principais tags de invólucro HTML, tags cabeça, tags de título. Estamos criando nossa página HTML que servirá como nossa página inicial quando iniciarmos o servidor ativo, as tags do corpo. E então eu vou mover estes para baixo para que nós envolvamos o mundo olá. Agora vamos tentar isso. E para iniciar o servidor ativo e obter este menu, você pode clicar com o botão direito ou clicar com a tecla Control pressionada na sua máquina Mac. Se você tiver a barra de status na parte inferior e poderá selecioná-la na aparência Exibir. Isso lhe dará uma opção para o go-live. Você pode desmarcar e mostrar se quiser. Eu normalmente não tenho isso mostrando, mas ele tem o GO-live na parte inferior lá se você quiser lançá-lo dessa maneira. E também você pode clicar com o botão direito do mouse em qualquer lugar para abrir com o Live Server. Então, desde que você tenha uma pasta com a página de índice principal, você poderá abrir e executar o servidor ativo. E isso, por padrão, abrirá dentro da janela do navegador que você tem aberta atualmente. Voltando para a janela principal do navegador, agora, vá para o Visual Studio e vou abrir isso com o Live Server. Você também pode usar os atalhos para abri-lo com o servidor ativo. E agora vemos que temos a saída da página da Web sendo exibida em nosso endereço local, que é 1270018, usando a porta 5.500. E você também pode ajustar a porta dentro do código do Visual Studio usando o protocolo HTTP. O protocolo Http será o que está na frente de um endereço IP. E este é o endereço IP local, HTML que isso apenas renderiza no navegador. Então, se você quiser executá-lo dentro do protocolo de arquivo, você pode fazer isso dessa maneira. Observe que dentro do navegador estou usando o navegador Chrome e ele indica que ele está usando o protocolo de arquivo. Saiba a diferença entre usar o protocolo de arquivo quando você tem o caminho local para onde o arquivo está localizado no seu computador, oposição ao protocolo HTTP, que é aquele que queremos que apenas tenha um endereço IP e ele esteja usando a raiz da pasta como domínio base e, em seguida, aplicando o arquivo HTML logo depois disso. Então, este é o que queremos. Então, dê uma olhada no navegador e certifique-se de que, ao emitir o arquivo index.html, que você não está usando o protocolo de arquivo, para que ele não apareça e você não veja o caminho completo para onde o arquivo está localizado porque precisaremos usar a máquina local nas próximas lições à medida que realizamos nossas solicitações do Ajax. Depois de configurar e você tiver o arquivo HTML aberto dentro da máquina local. Você estará pronto para passar para a próxima lição. 3. 2 introdução para JSON e AJAX: Nesta lição, vamos explorar o que é JSON e como ele se relaciona com um objeto JavaScript terá um exemplo rápido de JSON e, em seguida, vamos recuperar esse arquivo JSON usando JavaScript Fetch, que criará a solicitação ajax e enviará os dados, coletará os dados do arquivo e os carregará em nossa página da Web. Podemos ver que esse conteúdo que está sendo exibido no navegador agora, vem do arquivo JSON de ponto de dados. E, na verdade, não está sentado dentro do aplicativo que está sendo carregado após o aplicativo que a página da Web carregou. Portanto, ele está puxando dinamicamente o conteúdo e que está pronto para uso usando JavaScript em nossa página da Web. Vejamos o JSON e como ele se relaciona com objetos JavaScript e JavaScript. Temos o editor aberto em tudo vai mantê-lo no lado esquerdo. E vou ter a janela do navegador com a página da Web aberta no lado direito. Esta é a página index.html. Se eu fizer alguma alteração na página de índice, ela refletirá dentro do navegador. Também vou usar o Chrome para poder abrir o DevTools no navegador Chrome. Sob as mais ferramentas, ferramentas do desenvolvedor, você também pode usar o atalho para isso. Vou ter essa exibição aqui na parte inferior da página do lado direito. E vou aumentar o tamanho das ferramentas de desenvolvimento. Isso é dentro do navegador Chrome onde podemos executar o JavaScript. Assim, você pode criar JavaScript e executá-lo diretamente no navegador. E também será a saída, também será o console de saída para JavaScript. Então, vamos criar nosso arquivo de script e criar um link para app.js. Este pode ser o arquivo JavaScript onde vamos gerar o conteúdo Creighton. No momento, não temos um app js, é aí que estamos lançando o erro. Crie esse novo arquivo. Eu o salvei como app.js no mesmo diretório de pastas. E agora posso interagir com o conteúdo que carrega o código JavaScript. E queríamos ter uma breve visão geral do que é o JSON e como ele funciona. Portanto, JSON é a abreviação de JavaScript Object Notation. Portanto, é basicamente um formato de texto legível por humanos que tenta e os dados de Smith pela internet. E normalmente usamos o Ajax para conectar-se a um servidor e, em seguida, recuperamos os dados em um formato de tipo JSON. Também pode ser um XML. Mas agora o JSON está sendo usado cada vez mais. Vamos focar o curso em escrever JSON. Json é semelhante a um objeto JavaScript, onde pode conter vários tipos de dados. Se tivermos uma variável chamada data, podemos criar um objeto. Então, neste momento, isso é apenas um objeto JavaScript. E como JSON e JavaScript estão intimamente relacionados, existem algumas diferenças. Enquanto que com o JSON, você precisa usar aspas duplas com os objetos JavaScript. Você não. Objeto Javascript, que também será semelhante a um JSON. Ele será formatado em JSON o objeto JavaScript, novamente usando aspas duplas. E todos os objetos e os dados conterão o que é conhecido como par de nomes. Os valores de nome com os pares. Eles estão emparelhados juntos. No lado esquerdo está o nome. No lado direito está o valor. E usamos dois pontos e depois o meio para associar o valor ao nome. Os diferentes tipos de dados que podem ser mantidos. Portanto, temos strings que podem ser mantidas em um formato JSON. Também podemos ter valor booleano. Então, esses são os que são verdadeiros ou falsos. E isso é minúsculas sensíveis a maiúsculas. E só estou escrevendo com as letras minúsculas. Então isso sai como verdade. Portanto, este é um booleano, valor, números ou números inteiros. Dentro do objeto de dados em si. Ele também pode conter matrizes, e estes são indicados com colchetes. E você listaria o número de itens dentro da matriz separando-a com a vírgula. E então podemos pegá-los usando o índice. Vou te dar um exemplo disso. E então qualquer um desses objetos precisa se separar com uma vírgula terá objetos dentro do próprio objeto. Eles podem ficar bastante complexos onde você pode ter uma combinação de matrizes e objetos, exemplos semelhantes daqueles mais tarde. E a estrutura sempre será a mesma onde temos o nome e, em seguida, o valor do lado direito. Então, é assim que vamos fazer referência ao conteúdo do objeto. E eu só vou criar mais um. E podemos ir em frente e podemos salvar esse objeto JavaScript na página HTML e vamos dar uma olhada nele dentro do navegador. Fazemos uma atualização e examinamos os dados, e os dados retornam nesse tipo de formato. É a mesma coisa que você vai ver com o JSON. E vemos que podemos ter acesso a qualquer um dos valores selecionando os dados, cursos de dados de idade, dados, dados de amigos e assim por diante. Se quisermos ver o valor dos dados primeiro, podemos retornar o valor dos dados primeiro. Também podemos usar a notação de pontos ou a notação de colchetes. Normalmente, você usa a notação de ponto, mas com objetos JSON, você também pode ter espaços dentro dos nomes. Então, às vezes você precisa usar a notação de colchetes. Você pode usar qualquer um deles. Ele fará referência e retornará o mesmo valor associado ao nome que você está referenciando no objeto de dados. Portanto, há vários sites que permitem que você use o JSON. E basicamente o que isso significa é que ele permite validar que essa é uma estrutura JSON válida. Então, o que vou fazer é pegar o objeto JavaScript que acabamos de criar. E vou colocá-lo para o fiapos JSON. E se o JSON lint não estiver disponível, há vários outros sites que farão o mesmo. Você só precisa pesquisar no Google um validador JSON, e há vários deles na linha. Isso, depois de colar no objeto JSON, pode pressionar Validar JSON. E você vai ver que isso é válido JSON. Então, se você tivesse deixado de fora algumas das citações, você vai receber um erro. Ele lhe dará uma indicação de que tipo de erro é e onde ele espinha o erro dentro do código. E agora, se removermos as aspas, não será um objeto JSON válido, mas ainda permanecerá como um objeto JavaScript válido. Essa é uma das diferenças importantes que isso ainda será válido dentro do JavaScript. Então, mesmo que não tenhamos citado em torno dele, mas dentro do JSON, não é. Json tem um formato mais rigoroso do que temos com o JavaScript. A segunda tecnologia que vamos olhar será o Ajax. Ajax é a abreviação de XML JavaScript assíncrono. Vai notar que aqui, em vez do helloworld escreverá o Ajax. E é para isso que vai ser curto. JavaScript e XML assíncronos. Mas, embora agora estejamos usando mais JSON, temos um acrônimo e, em seguida, temos outro acrônimo. Então, às vezes você pode ver que o Ajax se referiu a um jock ou assim, mas, mais comumente, ainda estamos referindo-o como XML, mesmo que estejamos predominantemente usando dados JSON agora, ajax na verdade não é um idioma. Suas técnicas de desenvolvimento web são muitas tecnologias da Web que funcionam no lado do cliente e criam aplicativos web assíncronos. Então, o que isso significa é que dentro do aplicativo da Web onde se conecta e estamos carregando dados. Assim, podemos enviar dados, podemos recuperar e recuperar dados de um servidor em segundo plano sem interferir na exibição da página da Web. O que temos é apenas uma maneira de acionar isso e depois interagir com ele. E o que isso faz é que ele realmente atualiza a página da Web, criando uma página da Web dinâmica carregando dados de fontes externas, dependendo das interações do usuário e do que o código está solicitando. Ele está acoplando profundamente a camada de intercâmbio de dados da camada de apresentação e permitindo que as páginas da Web mudem conteúdo dinamicamente sem a necessidade de recarregar a página inteira. O que vamos fazer é salvar esse objeto JavaScript, criar um novo arquivo JSON. Vou chamá-lo de ponto de dados JSON. Portanto, esse será um arquivo JSON válido. Em seguida, vamos usar o JavaScript para nos conectarmos a ele e carregar esse conteúdo nos dados, limpando o valor dos dados e salvando-os. Então, agora, para dados, não temos valores. E queremos nos conectar ao nosso arquivo JavaScript e carregar algum conteúdo nele. Ajax conectando-se a um arquivo externo e depois carregando esses dados na página. E vamos usar uma função, um método chamado fetch. E vou configurar alguns dos parâmetros. Fetch exigirá o único parâmetro que será o URL da Web. E atualmente, porque temos o arquivo localizado na mesma pasta que nosso arquivo de índice, podemos apenas referi-lo como JSON, data, JSON. Então, será o nosso URL da web. Então, fazemos um pedido de busca. Obtém promessa espaçada. Ele retornará os resultados assim que concluir a solicitação. Voltando e temos uma resposta Spock. Então podemos pegar essa resposta e enviá-la de volta para a próxima parte das promessas. Precisamos especificar o formato que queremos recuperá-lo. E vou cobrir isso mais detalhes mais tarde. E depois que a resposta tiver os dados, a promessa é concluída e, em última análise, enviará os dados para o console. Então, vamos ser capazes de dar uma olhada nele dentro do terminal. Então, vamos salvar isso e vemos que obtemos essa saída. A saída não está dentro de um formato de objeto JavaScript, então não podemos referenciá-la ou não podemos usá-la como dados, pois são retornados em lote de formato de texto, existem algumas opções e eu vou apenas então não podemos referenciá-la ou não podemos usá-la como dados, pois são retornados em lote de formato de texto, existem algumas opções e eu vou apenas recuar isso para que seja um pouco mais fácil de ler. Então, em vez de recuperá-lo como texto, se soubermos que estamos esperando dados JSON de volta, podemos referenciá-los como JSON. E agora vemos que o navegador realmente muda a estrutura e a carrega nos mesmos dados. O objeto JavaScript que vimos anteriormente. Então, ele está carregando isso a partir desse arquivo externo. E isso significa que, se eu alterar qualquer um desses, isso carregará o novo conteúdo do arquivo. E então a próxima parte do ajax seria pegar esse conteúdo e enviá-lo para a página. E, claro, vamos cobrir mais disso mais tarde nas próximas lições. 4. Três objetos de JavaScript de JSS: Esta lição será uma demonstração de como podemos usar objetos JavaScript e enviar o conteúdo do objeto JavaScript em nossa página da Web. O que estamos usando é o objeto do documento. E este é um objeto também que é gerado pelo navegador. E ele pode ser acessado usando JavaScript. E isso nos dá a capacidade de interagir, atualizar o conteúdo da página da Web, então até manipulá-lo. Se você falasse fixe o documento, você veria que ele retorna no console toda a página da Web e todo o conteúdo dele. É uma representação virtual do código HTML. E, em seguida, o JavaScript pode interagir com esse objeto, atualizar e manipular os dados e também criar ouvintes de eventos. Estamos selecionando os elementos de duas páginas. Então, temos a saída um e a saída dois. Então, eles nos darão contêineres na página que podemos produzir algum conteúdo ou construir um objeto, um objeto bastante complexo que tem uma matriz, ele tem cadeias de caracteres, números, bem como Booleanos. Então, também vamos trabalhar com alguns objetos menores. E usando os valores contidos nesses objetos, vamos enviá-los na página também discutimos os benefícios de usar a notação de colchetes em oposição à notação de ponto para selecionar os valores do objeto. Nesta lição, vamos ver objetos JavaScript. Então, estamos usando o arquivo index.html, criamos um novo aplicativo, JS de três pontos. Então é aqui que nosso JavaScript irá e será aqui que vamos apresentar o JavaScript para esta lição. Então, criando uma div, vou atribuir uma classe de saída. Portanto, isso nos dará um contêiner onde podemos gerar algum conteúdo para, a partir de JavaScript, a partir do nosso código JavaScript. E isso também está em preparação para saber mais sobre o que é possível com o Ajax. Interrompeu o Live Server e vou reabrir o servidor ativo. Temos o exemplo da página da Web no lado direito, o código do lado esquerdo, que está sendo escrito dentro do editor de código. Também vou abrir as ferramentas de desenvolvimento usando a inspeção que abrirá o console de ferramentas de desenvolvimento. Isso também nos permite interagir e ver a saída do JavaScript. Primeiro, o que queremos fazer é selecionar o elemento, e vou dar a ele um nome variável de saída. E usando o seletor de consulta de documento, selecionando o elemento com uma classe de saída. Isso nos dará um contêiner onde podemos atualizar o conteúdo com JavaScript. Para atualizar o conteúdo que está dentro de um elemento, podemos simplesmente atribuir TextContent a ele. E como vemos que a página atualizará isso dinamicamente. Isso não está dentro do HTML. Isso é feito com JavaScript. E isso fará parte do processo do Ajax em que estamos carregando o código em segundo plano usando JavaScript. E então, honestamente, por último, enviá-lo na página usando o Document Object Model, que é o navegador repr, representação do código HTML. E é aí que o JavaScript pode entrar e fazer atualizações para esse conteúdo. Então, na verdade, não queremos colocar olá lá. Isso foi apenas uma demonstração. Vou comentar isso dentro do código JavaScript. Queremos criar um objeto e só temos que chamá-lo realmente meu objeto. Então dê um nome de variável e você pode usar const. Como acontece com objetos. Em JavaScript, os objetos estão fazendo referência a um local de memória, e é por isso que quando estamos escrevendo JavaScript, se estivermos conectados a um objeto como um dos elementos na página da Web. Também podemos atualizá-lo, manipulá-lo, mesmo que o estejamos declarando usando a palavra-chave const. Isso indica que não é suposto mudar. Mas, embora enquanto ainda estivermos referenciando esse objeto, podemos manipular os itens contidos no objeto. E ainda vai fazer referência ao mesmo objeto. Podemos fazer referência a esse mesmo objeto a partir de várias variáveis dentro da página JavaScript apenas para demonstrar isso também. Portanto, ele cria uma variável chamada div e, em seguida, usando o seletor de consulta de documento, selecionando o elemento div. Então, só temos um na página. Estamos selecionando isso. E se atualizarmos o conteúdo do DIV one, então, se atualizarmos o conteúdo de texto dele para dizer hello div e salvá-lo. Vamos obter a saída de hello div, mas ainda está fazendo referência à mesma área de saída. Se fizermos referência ponto, ponto elemento, ele fará referência ao mesmo que acabou de ser atualizado. Então, ambos estão referenciando o mesmo objeto. E isso porque ele está fazendo referência ao local da memória armazenado no objeto do documento. Criando um objeto em JavaScript, usamos os colchetes encaracolados com o próprio objeto. Podemos conter vários valores dentro desse objeto. Se tivéssemos uma lista de amigos. Então isso vai ser uma matriz e usar os dois pontos. Então, temos o valor no lado direito e o nome da propriedade no lado esquerdo. Isso nos dá a oportunidade de ter uma matriz. A matriz também pode conter vários objetos. Se tivéssemos objetos nesse tipo de estrutura, podemos produzi-los. Vamos preencher algum conteúdo dentro do objeto. Então, agora, teremos apenas o valor de uma propriedade do primeiro. Podemos adicionar quantos quisermos mais tarde. Então, enquanto ainda usarmos a mesma chave, facilitará à medida que passarmos pela matriz para selecionar as informações do objeto. Só vou mudar os nomes aqui e salvá-lo. Então, agora, quando fazemos referência ao meu objeto, podemos ver que dentro do meu objeto, temos uma matriz, uma matriz de amigos e que a matriz de amigos tem vários itens contidos no objeto. Vou te dar mais alguns exemplos de objetos. Então, criando outro objeto. Esse objeto, porque estamos usando aspas duplas, isso também será formatado para JSON. Esse também é um formato JSON válido para o aplicativo. Quando estiver em JavaScript, você pode usar um objeto JavaScript ou um formatado JSON. Ele lerá da mesma maneira. Isso está em preparação onde vamos extrair os dados JSON. Portanto, são todos um pouco os valores do par nomeado. Então, criamos dentro de um objeto usando os colchetes encaracolados e, em seguida, podemos listar os vários nomes. Então, se tivéssemos no primeiro exemplo em que temos um nome, este será apenas o único item dentro dos objetos. Então, todos esses serão valores relacionados a esse primeiro item. Dessa forma, isso também é um objeto, mas só terá o único objeto dentro dele. E este é um exemplo acima em que temos um objeto que contém uma matriz que contém vários objetos dentro dele. O benefício de tê-lo com a matriz dentro dos objetos é que você também pode aplicar valores diferentes lá também. Na raiz disso, podemos ter todos os amigos listados. Você também pode ter outro para meus dados, ou você pode apenas ter meu nome. Portanto, isso pode ser apenas referenciando um valor de string. Então podemos ter o total. Portanto, isso também pode ser um valor booleano inteiro. Portanto, isso diferencia maiúsculas de minúsculas, portanto, certifique-se de que você está usando todas as letras minúsculas, a menos que novamente, será válido dentro do JSON. Então aqui temos um exemplo de uma string de matriz, um inteiro, bem como um valor booleano. E tudo o que você precisa fazer é vírgula, separá-los. Assim como vemos aqui em baixo onde temos primeiro e último, esta será a mesma ideia, exceto o trabalho em vez de ter uma string de booleano ou um inteiro, temos uma matriz aqui. E então essa matriz tem um monte de objetos dentro deles como itens dentro da matriz. O que queremos fazer quando o tivermos dentro do formato de objeto JavaScript, isso significa que podemos fazer uso dele em nossa página da Web. Vou criar uma segunda área de saída. E vou chamar essa saída de um, saída dois. Vou atualizar o código de acordo. Vou comentar essa parte porque não precisamos mais dela. Vamos selecioná-los como variáveis utilizáveis dentro do JavaScript. Dessa forma, podemos referenciá-los usando o nome de uma variável. Portanto, se quisermos exibir parte do conteúdo que temos dentro de um desses objetos para a página, podemos atualizar o texto interno , o HTML interno e há várias ondas para produzir o conteúdo. Selecionamos o elemento de contêiner e definimos a propriedade text content desse elemento de contêiner. Então, primeiro vamos usar meu objeto um. Como eu enviaria o primeiro e o sobrenome do conteúdo do meu objeto? Sua referência, o nome do objeto principal, que é meu objeto um. E vou usar os colchetes neste exemplo. Também tem a opção de usar a notação de pontos. Então, vou te mostrar esse também. E então, porque isso é uma string, estamos concatenando juntos. Vou apenas adicionar um espaço lá. E, em seguida, para obter o segundo item com uma chave do último, também podemos referenciá-lo dentro da notação de colchetes. E apenas salve isso, vou definir a visualização como quebra de palavras para que possamos ver a declaração inteira na página. Então, agora nossa saída um elemento foi atualizada e estamos recebendo o conteúdo que vem desse objeto JavaScript, que é o conteúdo do objeto Maya um. Vamos atualizar esses segundos elementos. Então, também temos saída para. E desta vez vamos usar a sintaxe com a notação de pontos. Existem algumas limitações para a notação de pontos, bem como alguns benefícios para a notação de colchetes. Seja qual for o que você escolher fazer. Vou te dar mais alguns exemplos disso. Então, agora temos a saída. Em conteúdo de texto. E vou te mostrar como isso funciona com a notação de pontos. E também para o último, certifique-se de que não haja espaços lá e não precisamos de nenhuma das citações por aí que emita esse mesmo conteúdo. E se fizermos alguma alteração nele, isso também mudará dentro da saída de ambos. Se quiséssemos ver qual a diferença entre a notação de colchetes e a notação de pontos. Portanto, a notação de colchetes é muito mais dinâmica e também nos permite ter objetos com a forma como os espaços dentro dos nomes. Por exemplo, se tivéssemos algo como FirstName, LastName, e vamos dar a isso um nome do objeto dois. E agora, se formos produzir o conteúdo usando os nomes das chaves, observe que há um espaço lá. Isso não funcionará bem com a notação de pontos. E vou trancá-los no console. Podemos obter o conteúdo do meu objeto também. Mas usando a notação de colchetes, podemos obter o primeiro nome, que funciona. Mas o que acontece se tentarmos usar a notação de pontos? E você verá que isso lançará um erro porque não podemos lidar com os espaços dentro do nome do objeto. Isso lançará um erro porque não entende como gerenciar os espaços. Está procurando um objeto com meu objeto dois pontos primeiro, e não está gerenciando os espaços. Se você tiver espaços dentro do nome do objeto, então você deve usar a notação de colchetes. Json suporta esse tipo de estrutura, isso também. Você verá que quando tivermos esse tipo de nomes de propriedade, você também usa este CamelCase. Isso nos permite usar o sobrenome dentro da notação de pontos. Isso funcionará dessa maneira. A outra coisa com a notação de colchetes, também podemos ter uma seleção mais dinâmica porque tudo o que ele espera está dentro de um valor de string aqui. Portanto, se, por exemplo, tivermos uma variável, essa variável é o primeiro nome. Podemos usar a string variável. O que queremos selecionar do objeto. Usando o objeto novamente. E vamos tentar o mesmo exemplo e mostrar diferença entre a notação de pontos na notação de colchetes. Aqui para o objeto dois, podemos referenciá-lo como uma string e apenas usando o valor. Mas se tentarmos fazer isso com a notação de pontos, isso lançará um erro. Ou não será capaz de encontrar o valor e ele será retornado indefinido porque não há valor que esteja de acordo com esse nome. Porque estamos de novo, temos o espaço lá dentro. Se você fizer isso, você está usando uma maneira dinâmica de selecionar o valor? A notação de colchetes aceita valores de string, o que é um benefício definitivo quando estamos tentando acessar. E talvez tenhamos atualizado isso dinamicamente dentro do código, e isso ainda nos permite produzi-lo usando a string. Estes são apenas alguns exemplos de como você pode usar os objetos JavaScript e JavaScript e produzir o conteúdo na página usando a notação de colchetes ou a notação de ponto. Então, experimente e produza, selecione, crie alguns elementos de página. Selecione-os dentro do código JavaScript. Crie alguns objetos para exibir o conteúdo dos objetos para a página. Usando a notação de colchetes e a notação de ponto, use um dos objetos mais complexos, como meu objeto, e selecione uma saída algum conteúdo de lá também para a página. Então, vamos atualizar a saída de entrada um. E vou apenas definir o conteúdo do texto da saída um. Desta vez vou usar meu objeto. Vamos navegar até a palavra John. Dentro do meu objeto, temos o nome da propriedade é amigos. Podemos usar a notação de colchetes para selecionar amigos. Então, o que queremos, queremos selecionar os primeiros amigos. Portanto, este é um array. Selecionando o primeiro amigo dentro da matriz de amigos. Isso ainda voltará como um objeto. Dentro da matriz de amigos. Estamos selecionando o primeiro amigo. Na verdade, queremos selecionar aquele com o valor de índice de dois. Então a propriedade do amigo será a primeira que queremos voltar. E vou analisar como estou selecionando, fazendo a seleção que emite o nome John, que vem desse objeto mais complexo. Além disso, uma das maneiras pelas quais eu costumo atravessar um objeto mais complexo, e você também pode fazer isso dentro do seu navegador. Então, se você tiver o objeto, poderá listá-lo. E, a partir daqui, você pode obter todos os valores e os nomes de propriedade dos valores contidos no objeto. Então, eu sei que se eu selecionar meu objeto, se eu quiser o valor do meu nome, posso gerar isso. Se eu selecionar meu objeto e se eu selecionar amigos, isso retornará uma matriz. E assim como em qualquer array, podemos usar o índice para obter o item de objeto específico que queremos da matriz. E neste caso, podemos selecionar o primeiro. E, em seguida, usando getting, retornando através do nome da propriedade de primeiro. E ele vai retornar o nome Mike. É aí que, se quisermos devolver o terceiro item, que tem um valor de índice de dois e obtendo o nome da propriedade primeiro, podemos devolvê-lo de volta e é aí que obtemos John. Isso vai corresponder com o que estamos fazendo para a saída e enviá-lo para a página. Chegando a esse objeto mais complexo, é importante se familiarizar mais com esses objetos complexos porque muitos dados JSON estarão chegando e um dados JSON estarão chegando e formato e estrutura mais complexos. E isso desafiará você a navegar para baixo e selecionar os valores adequados com os quais você deseja trabalhar e enviar para sua página. 5. Quatro objetos e matrizes para JavaScript: Nesta lição, abordaremos matrizes e também objetos e como podemos iterar e obter o conteúdo contido nos arrays e produzir esse conteúdo na página. Então, estamos selecionando o elemento de página, vamos criar uma matriz simples que conterá tipos de dados diferentes e, em seguida, produzirá esses tipos de dados. Vou te mostrar como você pode fazer isso com um loop for-loop. E então, uh, para cada um, e depois crie um objeto mais complexo que irá conter uma matriz de objetos. E observe que a estrutura será toda a mesma, que facilitará para nós, pois estamos percorrendo essa matriz e enviando-a na página. Então, como uma música para selecionar os valores para usar esses valores dentro do nosso código. Tanto os objetos quanto os arrays podem conter vários valores. Vamos fazer alguns exemplos de uma matriz e, em seguida, também de um objeto. Portanto, a ideia para uma matriz é que usamos os colchetes e ela pode conter vários itens dentro da matriz. E então podemos referenciá-los usando o valor do índice. E o valor do índice é apenas a ordem que o valor específico aparecerá. E isso também pode conter objetos , bem como pode conter matrizes. Temos uma grande variedade de valores de dados diferentes que podemos usar aqui e também pode conter matrizes também. Assim, os raios podem ser aninhados dentro de matrizes. Podemos acessar os valores desses itens. Vamos dar uma olhada e veremos como a matriz se parece dentro do terminal. Vou fazer isso um pouco maior , por isso é um pouco mais fácil ver esse array em particular. Então, temos uma propriedade length e todos os raios virão com um valor de comprimento. qualquer momento com a matriz, você pode recuperar o comprimento pois essa é uma propriedade padrão da matriz. Então, basicamente, informará quantos itens existem dentro da matriz. E isso é apenas nas raízes, então não vai contar isso. Ele tem outro array e, em seguida, há alguns itens dentro dessa matriz. Teríamos que acessar esse array para descobrir o tamanho do número de itens dentro dessa taxa específica aninhada em nossa matriz principal. E você vê isso dentro do console onde ele tem o link lá. Então este em particular tem três itens e é apenas 012. Também podemos acessar o valor do comprimento dessa matriz em particular. Então, vamos fazer isso. E para isso, precisamos selecionar o item por seu valor de índice. E as matrizes começam com o valor de índice de 0. Então, se tivermos itens aqui começando com 0, isso significa que o último tem um valor de índice de sete. Vamos ver se isso está correto. E você pode ver que no terminal e no console está gerando o array específico. Então, vamos usar isso. E aqui, se quisermos obter o comprimento dos itens nessa matriz, podemos fazê-lo dessa maneira e podemos retornar o valor da propriedade de três, pois há três itens dentro dessa matriz aninhada. Vamos limpar o terminal. Você pode limpar o terminal com os suportes arredondados ou pressionar o console claro aqui, ou você pode usar as teclas de atalho para limpar o conteúdo do console. Agora, vamos nos aprofundar na seleção de parte do conteúdo daqui. Se tivermos os itens, se quisermos retornar ao valor de primeiro, Isso é relativamente fácil porque podemos apenas fazer uma seleção usando o valor do índice. Vou configurar uma variável. Em seguida, atualizaremos o valor da variável. Isso agora só vai ser lançado para o terminal. Neste momento, vou definir o valor para nenhum. E dentro do terminal ou console, usaremos o log do console para gerar o valor. Então isso representará o valor de Val. E agora vamos selecionar alguns dos itens dentro da minha matriz. Se quisermos selecionar o primeiro, como atribuímos o valor de Val para ser o primeiro item dentro da matriz? arrays são baseados em zero, então ele começa com o índice de 0. Então, se é uma string que estamos tentando atribuir, é relativamente fácil onde apenas selecionamos a string para chegar ao que realmente será o valor de índice de um. Isso retornará o segundo item dentro da matriz, que tem um valor de dois. Para obter os mais complexos. Vamos passar todo o caminho para seis. Isso retornará um objeto. Para o objeto em si. Ele pode conter vários itens dentro desse objeto, e todos eles serão referenciados usando o nome para obter o valor do conteúdo do objeto. Para este caso, se quisermos devolver o nome Lawrence, e ele poderia muito bem ter vários valores lá. E eu posso começar a criar o primeiro. Se quisermos selecionar o primeiro, então como faríamos isso? Precisamos fazer referência ao nome da propriedade exatamente como vimos antes com os objetos na última lição, podemos usar a notação de colchetes ou a notação de ponto. Portanto, selecionar primeiro retornará esse valor específico. Vamos atribuir a ele. Esse é o meu nome completo lá. E está devolvendo isso de volta. Também podemos ir ainda mais fundo ao retornar ao conteúdo e navegar por ele. E é importante experimentar isso. Então, criar uma matriz e, em seguida, criar alguns objetos e arrays dentro disso. E você também pode aninhar objetos e matrizes adicionais dentro de lá também. Um dos benefícios de uma matriz sobre um objeto é que esses itens dentro da matriz. Portanto, é muito mais fácil percorrer porque é apenas uma contagem do valor do índice. Sabemos que com uma matriz, estamos usando o índice que é um valor numérico. E sabemos que isso é quantos itens temos, e podemos contar com eles e referenciar o conteúdo de volta. Vamos voltar para ele e selecionar o valor de índice de sete, que retornará a matriz que tem os vários itens. Dependendo do que queremos retornar, usaríamos o valor do índice para retornar o valor associado, que todos eles serão números. E eles estão realmente correspondendo com quais os índices. Então, agora estamos procurando na minha matriz onde usando o item, retorne o item com valor de índice de sete, que será todo esse array. E então, a partir dessa matriz, estamos selecionando o item com o valor de índice de um, que será o segundo item na matriz. E é assim que podemos recuperar e retornar esse segundo item de valor. Também arrays são muito mais fáceis de produzir conteúdo. Digamos, por exemplo, que queremos fazer um loop simples. Queremos percorrer o conteúdo da matriz. Sabemos que os arrays têm uma propriedade length. Então podemos dizer que enquanto x é menor que o comprimento ou Lexis menor que oito. Mas sabemos que, se adicionarmos e adicionarmos itens adicionais à matriz , queremos torná-lo dinâmico quando estamos fazendo um loop. Nem sempre queremos ter um valor definido pelo qual estamos percorrendo. E é aí que usaríamos o comprimento para criar o loop, para percorrer os itens e produzir o conteúdo. Podemos fazer isso dessa maneira onde temos o log do console, temos o meu array e usamos o valor de x para fornecer o índice e referenciar o índice e referenciar o conteúdo associado a ele. Isso nos dá uma maneira rápida de percorrer todo o conteúdo da matriz. O Javascript tem várias maneiras de fazer isso. Uma das minhas maneiras preferidas de fazer isso é usar o para cada método. E essa é uma maneira de percorrer rapidamente os valores. Você também pode obter o valor do índice e, em seguida, você pode obter o array total. Então, todo o conteúdo da matriz. E estou usando o formato de seta. Então, isso é apenas retornar a função, função anônima com a seta. E então aqui está entre os colchetes encaracolados, é onde podemos trabalhar com a saída, a resposta de volta. Voltando ao valor de Val. Comente isso e vou comentar isso. Portanto, não temos nenhum conteúdo adicional dentro do console. Agora estamos listando os primeiros 230100, verdade. E isso está apenas passando por todos os itens dentro da matriz e nos dando uma maneira rápida e fácil de produzir o conteúdo. Também temos acesso ao valor do índice. Então, o índice será exatamente que quer que seja porque esta é uma estrada de matriz colocando os valores do índice. Então, neste momento, estamos fazendo o valor e, em seguida, o valor do índice associado a ele. O array total será apenas a coleção completa disponível dentro da matriz principal que está sendo enviada dentro do loop. Você tem acesso a ele. Você pode referenciá-lo agora como matriz total. Myarray ainda fará referência ao mesmo array. Se você pegasse o array total e adicionasse à matriz algo no final, o que você acha que vai acontecer com a matriz original? E se você disse isso, o que vai acontecer com a matriz original é que vamos atualizá-lo. Você está correto porque agora, se eu limpar o terminal e se eu digitar minha matriz, nós o preenchemos com end. Mesmo que estejamos referenciando isso como array total e estamos atualizando esse array. Ele ainda está se referindo exatamente como os objetos que o mesmo local de memória. Portanto, não é distinguir entre as duas maneiras de fazer referência a esse objeto. E está atualizando o objeto principal, que é a matriz com o conteúdo. É por isso que ambos agora vão conter os mesmos valores. E, na verdade, não podemos obter acesso ao array total fora dos colchetes, porque isso está dentro do escopo do loop para cada. Isso foi apenas uma demonstração do tipo de conteúdo que podemos adicionar. E se você quiser adicionar uma conta, você também pode fazer isso. Salve isso. Então, isso adicionará uma conta toda vez que ela for iterada pelos itens contidos na matriz original. Outra coisa a observar também. Então, mesmo que a matriz, o raio original esteja ficando maior, não está afetando esse loop porque estamos entrando e estamos produzindo acordo com o que era o array original. Então, estamos atualizando o array total, o que não afetará isso. Ele estará constantemente atualizando e criando outra iteração dentro dos itens. Dessa matriz, normalmente, o mais comum você estará apenas selecionando o valor. Mas o índice e o array total estarão lá se você precisar dele. Então, um dos benefícios de usar a matriz, vou comentar isso é que ele nos fornece uma maneira fácil de percorrer os itens que estão contidos lá porque isso é numérico. Então, dando-lhe alguns exemplos disso. É por isso que muitas vezes quando temos dados JSON são objetos JavaScript que estruturamos os itens dentro uma matriz que estará contida no objeto principal. Então, vamos criar um objeto. Vou chamá-lo de meu objeto para usar os colchetes encaracolados. Então, se tivermos uma lista de pessoas e isso será associado a uma matriz. Então, para torná-lo mais legível, o que pode fazer como uma linha separada , então algum espaço em branco para torná-lo mais legível. Agora você não precisa para criar a estrutura adequada, mas isso apenas a torna legível para humanos. Uma das razões pelas quais usamos objetos JSON e JavaScript é que é muito fácil ler o conteúdo contido no objeto. Vamos criar uma lista de pessoas. Eles podem nomear o primeiro nome e atribuir um valor ao primeironome. Então, acabamos de pegar vírgulas de sucção separando os itens que estão contidos dentro do objeto. E, na verdade, isso precisa ser um objeto. Porque queremos ter vários itens dentro da matriz. Podemos começar com apenas um item. Vamos listá-los. Eu me oponho. Temos uma matriz chamada pessoas e, em seguida, dentro das pessoas, só temos o único item. Vamos adicionar alguns outros. Último nome. Quando estou criando esses tipos de objetos, criarei o primeiro item como um modelo. E então eu posso redirecionar isso para adicionar outros itens à matriz. Vamos salvar isso. Coloquei o conteúdo do meu objeto no console. Há o primeiro item. E, como mencionei, é benéfico tê-lo com uma matriz para que você possa percorrer pessoas selecionadas e, em seguida, percorrer o conteúdo das pessoas. Isso vai ser apenas um item dentro da matriz, assim como tínhamos as strings e assim como tínhamos aqui dentro deste exemplo. Isso significa que ele deve ser separado por vírgulas. Queremos manter a estrutura da mesma forma. Temos o primeiro nome, o sobrenome e a idade. Assim, ao percorrer a matriz de pessoas, podemos selecionar os nomes das propriedades e sabemos que eles não vão mudar. E essa é uma das coisas que você precisa ao criar esses objetos complexos com matrizes, onde eu tenho vários itens que você deseja listar. Você quer ter certeza de que você mantém na estrutura da mesma forma. Vamos fazer algumas atualizações para o conteúdo. Agora, dentro do, meu objetivo, temos algumas pessoas dentro da matriz. Vamos percorrer eles e seguida, enviá-los na página. Vamos adicionar mais um usando a mesma estrutura de modelo que acabamos de criar. Temos o primeiro nome, sobrenome e idade. Três pessoas ou três itens dentro da matriz. Percebemos com a matriz também que temos o comprimento da matriz. Portanto, o desafio é percorrer e enviá-los na página. Saída já selecionada uma. Então, vamos apenas adicioná-lo à saída um. Estamos selecionando-os, eu me oponho. O problema aqui é que não é uma matriz, então não poderemos percorrer isso. Precisamos selecionar a matriz, que é o item com a propriedade das pessoas. Selecione isso e isso nos dá a matriz, assim como vimos aqui, que podemos percorrer. E, em seguida, crie a função anônima que estamos coletando o conteúdo de cada item dentro da matriz como uma variável chamada val. E, em seguida, usá-los , produzindo-os dentro de sua resposta. Por enquanto, vou apenas exibir o conteúdo de Val. Isso nos dá as três pessoas que estão atualmente dentro de nossa estrutura de matriz. Porque o nome, o sobrenome e a idade são todos nomes de propriedade que podemos reutilizar. Se selecionarmos o primeiroNome que colocará todos os primeiros nomes. Agora, se quisermos produzi-lo e adicioná-lo à saída um, podemos fazer isso obtendo o HTML interno. E então vamos adicionar a ela a vogal primeiro, nome. E também vou adicionar uma quebra de linha para que possamos distinguir entre cada um dos itens. Agora estamos produzindo isso na página. Só para atualizar isso, vou mudar de concatenar as strings na saída para os literais do modelo. Eles estão usando aqueles ticks traseiros que você tem à esquerda do que na maioria dos teclados. E para trazer variáveis, você pode usar o cifrão e os colchetes encaracolados que emitirão o conteúdo dessa maneira para a página. Posso torná-lo um pouco maior para que seja mais fácil de ler. Vamos também selecionar o sobrenome também. Vamos produzir todo o conteúdo de cada um desses itens. E, por último, digamos que coloque a idade na página e salve isso. Tornar a estrutura do objeto igual e mantê-los como itens dentro da matriz facilita muito o trabalho com os dados contidos lá. E você descobrirá que muitos desses objetos JSON complexos estão estruturados dessa maneira só porque será fácil ler o conteúdo e vê-lo legível por humanos. E também será mais fácil trabalhar com ele e iterar através do conteúdo contido no objeto. 6. 5 de objetos para objetos: Vamos dar uma olhada em alguns métodos internos dentro do JavaScript, ou seja, JSON stringify, análise JSON e como você pode usá-los para converter sua string em um objeto JavaScript JSON e usá-la dentro do código. Além disso, você pode pegar seu objeto JavaScript, convertê-lo em uma string e, em seguida, analisá-lo de volta para um objeto JavaScript utilizável, que será formatado em JSON. Percebemos que, mesmo neste exemplo aqui, usando JSON stringify, ele ainda produzirá esse valor de string dentro de uma estrutura JSON apropriada, mesmo que o meu objeto original não tenha o aspas duplas. Há alguns casos em que, quando você está passando dados, você só tem uma opção para passá-los como uma string. Portanto, essa é a maneira ideal converter seu objeto JSON JavaScript em uma string e, em seguida, analisá-lo novamente quando você quiser fazer uso dos dados contidos nele. Vou te mostrar alguns exemplos disso chegando. Às vezes, quando você está recuperando seus objetos JSON voltará com um formato de string. E existem vários métodos que você pode usar para transformá-lo em uma string. E também, ao receber dados, transforme-os em uma string, desde que esteja formatado em JSON, então ele o transformará em um objeto JavaScript utilizável. E depois há também a stringify, que a transforma em uma análise de string, pega a string e a transforma em um objeto JavaScript utilizável. Então, vamos dar uma olhada nisso nesta lição. Criaremos um objeto. E, em seguida, dentro desse objeto, vamos adicionar alguns valores. Vamos fazer um muito simples , onde eu tenho olá. Então, usaremos o objeto. E agora, quando eu carrego o objeto, ele está dentro de um formato de objeto. Isso significa que posso ter acesso à mensagem e assim por diante. O que acontece se isso for uma string? Primeiro, mostrarei como você pode transformar um objeto em uma string. Então, temos um valor de string aqui, e vamos usar o JSON. Este é um método JavaScript. Json stringify dentro dos colchetes arredondados, é aqui que podemos colocar o objeto. E então o que acontece com esse objeto é que ele se transforma em uma força. No console. Vai ficar tudo vermelho, e isso vai ser um formato de string normal. Isso significa que, se esse objeto for criado como uma string, crie um segundo objeto do mesmo. Observe que não temos o mesmo espaçamento. Não é fácil de ler e na verdade não estará dentro dos colchetes encaracolados porque é uma string, está apenas sentado dentro das aspas. As propriedades serão diferentes. Se tentarmos usar o meu objeto para, ele só volta como uma string. Portanto, não temos opção de obter o valor da propriedade da mensagem. Enquanto que com meu objeto, podemos devolver esses itens usando o nome para voltar o valor. O problema é que, às vezes, quando você recebe dados de volta, eles estarão dentro de um formato de texto ou formato de string. E você precisa convertê-lo novamente em um objeto utilizável. E é aqui que você pode usar análise JSON stringify a transforma em um objeto de string, e estou logo na Mozilla Developer Network. Então MDM, isso tem um ótimo recurso para documentação adicional sobre tecnologias JavaScript, HTML e desenvolvedores web. E também lhe dá alguns exemplos disso. Eles mostram um exemplo de um objeto JSON em um formato de string. E enquanto a estrutura estiver correta, você pode analisá-la em um objeto JavaScript ou JSON utilizável. Assim, podemos executar e, dessa forma , também demonstra aqui que você pode obter o valor de count e resultar do valor da string. E então eles têm mais alguns exemplos aqui de usá-lo. E então eles dizem que isso não permite vírgulas à direita. Portanto, essa não será a estrutura JSON adequada com uma vírgula à direita. E é isso que vai lançar um erro porque isso novamente não será JSON, estrutura JSON adequada. Portanto, você não pode usar aspas simples. Não será capaz de analisar um objeto ou uma string que não estará dentro do formato JSON. Meu objeto três, usando a análise JSON, porque temos uma string que queremos transformar em um console de objeto JavaScript logout. Então, voltando aqui, este meu objeto três. Então agora posso selecioná-los, objeto três, e posso obter os valores apenas usando os nomes, e isso os retorna. Novamente, isso tem que ser devidamente estruturado. Caso seja um JavaScript, uma estrutura de objeto de tipo de uma string. E tentamos usar isso. E se for uma única aspas, use os ticks traseiros para mantê-lo como uma string. Então, se tentássemos analisar isso como objeto três, você verá que o erro é lançado. Tem que ser uma estrutura JSON adequada para poder analisá-la e, em seguida, torná-la utilizável. Então, se pegássemos um objeto JavaScript, converta-o em uma string. Então, vamos fazer algumas atualizações nele. Por aqui, estamos convertendo-o em uma string. Ele ainda manterá a mesma estrutura JSON. Observe que, mesmo que este fosse um objeto JavaScript e não tivéssemos a estrutura JSON apropriada, onde temos aspas duplas em torno dos nomes. Ele o adiciona automaticamente quando usamos a stringify JSON que pode convertê-la em uma string, que pode ser usada e depois convertê-la novamente em JSON. E isso funcionará porque ele estrutura isso corretamente como um objeto JSON adequado quando você traz o objeto JavaScript e o estringifica. Então isso foi estruturado corretamente. E isso também significa que você pode analisá-lo. E quando você o analisa, ele se torna utilizável novamente dentro do seu código JavaScript. 7. Seis conexões de AJAX: Vamos demonstrar o Ajax nesta lição. Isso significa que precisamos criar o elemento interativo na página que acionará as solicitações ajax e fazendo uma conexão com a fonte de dados que não será localizada dentro do código JavaScript, e isso será dados JSON de seis pontos. Portanto, construir um arquivo JSON simples ao qual podemos nos conectar sempre que o usuário acionar a opção Clique em mim, e isso fará uma conexão com esse arquivo. Ele ainda vai verificar se há algum erro. Portanto, certificando-se de que a conexão está correta antes de tentar retornar o conteúdo como JSON. E então vou colocar isso no console. Também temos uma opção que, se não estiver bem, o que será um valor booleano. Então, se fizermos uma conexão bem-sucedida, retornássemos o conteúdo, a resposta ficará bem. Caso contrário, vamos lançar um erro ao criar um novo objeto de erro que apenas dirá não conectado. E então podemos capturar esse erro dentro da solicitação de busca e fazer algo com isso. E agora tudo o que vamos fazer é gerar esse erro no console. Isso nos dará a capacidade de capturar qualquer resposta que possa não estar se conectando corretamente, que não estamos conectando e recuperando os dados corretamente. Ajax significa JavaScript e XML assíncrono. E a técnica mais recente é um jock onde vamos usar os dados JSON. Então, basta dar um exemplo rápido de dados XML. Portanto, isso é abreviação de Extensible Markup Language, então XML. Então, existe há muitos anos desde 1996. E a estrutura disso é semelhante ao que vemos com HTML, onde ele tem tags de abertura e fechamento. Ele requer algumas informações adicionais do esquema tão fáceis de ler quanto o JSON. Não vamos nos concentrar na parte XML do Ajax, e vamos ficar com o foco no JSON para recuperar dados JSON e sair em nossa página. Como o JSON está sendo usado comumente em mais de 90% dos dados. Claro, você pode aprender mais sobre XML. Então W3C org barra direta XML. Então, para lhe dar mais algumas informações sobre XML, se você quiser saber mais sobre como isso funciona, vamos voltar ao nosso aplicativo. Um ajax é realmente executado dentro do navegador porque o JavaScript está sendo executado dentro do navegador. E então também é o JavaScript que estará sendo executado nos bastidores, fazendo a solicitação para o servidor web, selecionando e recuperando os dados e, em seguida também selecionando os elementos da página e fazendo atualizações para eles. Então, o ajax não funciona de forma independente. É uma combinação de tecnologias para criar a experiência web interativa. Quando você pensa no Ajax, pense nisso como uma experiência web interativa. Então, estamos começando selecionando o mesmo arquivo de índice com o qual trabalhamos anteriormente. Temos alguns elementos lá. Um tem uma classe de saída 11 tem uma classe de saída dois. E, em seguida, estamos usando JavaScript para selecionar os elementos da página que estão contidos no navegador para que possamos atualizá-los e trabalhar com eles dentro do código. Normalmente, quando olhamos para o ajax, estamos relatando que o JavaScript está realizando uma interação assíncrona com o servidor. Então, em vez de ir para a página da Web da mesma forma que seu navegador carregaria conteúdo, ele faz uma solicitação para um endpoint no servidor, que é indicado por um caminho para esse arquivo. E, em seguida, ele recupera essas informações e faz uso delas dentro do código. Então, vamos configurar um novo arquivo JSON. Vou dar a ele um nome de dados seis. Então este será o arquivo JSON que vamos solicitar. Este arquivo JSON pode estar em nosso servidor ou pode estar em qualquer servidor que desejamos fazer a solicitação para criar um arquivo JSON simples. E podemos baseá-lo que fizemos na lição anterior, onde podemos ter uma coleção de itens dentro de uma matriz. E esse será o formato estruturado. Vamos dar a isso um nome de pessoas que usam o cólon. E então, dentro da matriz, vamos conter alguns objetos com algumas propriedades. E, em seguida, usar essa mesma estrutura criará algumas outras pessoas aqui que podemos selecionar. Agora, com o JSON, não podemos ter a vírgula à direita, caso contrário, vamos lançar um erro. Portanto, sempre certifique-se de que você remova isso quando estiver fazendo a cópia e colagem. Portanto, certifique-se de que você não tem essa vírgula à direita. Caso contrário, não será um objeto JSON válido. Então, temos três pessoas, o arquivo JSON de seis pontos de dados que vamos recuperar. E então vamos fazer uso disso dentro da nossa página da web. Agora vamos criar o JavaScript. E, normalmente, com JavaScript, você terá algum tipo de interação. Para iniciar a solicitação do Ajax, seja um carregamento de página ou qualquer outro tipo que seja acionado pelo usuário. É aqui que criamos a interação do usuário dentro do servidor e atualizamos e fazemos alterações na página da Web. Portanto, criar essa experiência dinâmica interativa completa, vamos selecionar uma saída, atualizará o conteúdo de texto dela. E eles vão apenas dizer clique em mim. Vamos adicionar uma borda para que possamos distinguir. Você também pode fazer isso com CSS também. Dessa forma, temos um botão de aparência clicável. E agora vamos anexar nosso ouvinte de eventos. Isso tudo é apenas JavaScript regular, onde temos o evento que realmente irá acionar todo o processo, todo o processo do Ajax. Então, estamos levando o evento e isso será um clique da saída um substituto para tornar isso essencialmente um botão que será clicável dentro do console toda vez que ele for clicado. Vamos mostrar a palavra clicada apenas para garantir que nosso evento esteja disparando. Agora vamos configurar a API Fetch. Portanto, isso fornece uma interface JavaScript para acessar e manipular partes do pipeline HTTP, como solicitações e respostas. Portanto, isso nos dá a oportunidade fazer uma solicitação e vamos solicitar para os dados JSON de seis pontos. Então, vamos configurar esse URL também porque ele exigirá esse parâmetro que ele está procurando por URL. E o URL será os dados JSON, dados seis JSON. Uma vez que este está no mesmo diretório do nosso arquivo de índice, é de onde ele será solicitado. Também podemos entrar no navegador da Web e ver o que será devolvido. Quando vamos para o aplicativo ponto JSON. Na verdade, devem ser dados seis esquivar Jason. Vemos que obtemos essa saída dos dados JSON dentro do navegador. Portanto, somos capazes de interpretar os dados. E isso vai ser a mesma coisa que está sendo solicitada pelo JavaScript. E então isso será retornado para o código JavaScript nos bastidores. A ideia com o ajax é que o usuário e crie uma interação onde eles vão clicar no botão. E quando eles clicarem no botão, isso acionará a solicitação usando fetch. Para fazer a solicitação dos dados. Fetch requer o único parâmetro que será o URL. E buscar é prometido com base. Ele não rejeitará o HTTP em Aristóteles, mesmo que suas respostas sejam 404 ou 500. Assim que o servidor responder com seus cabeçalhos, ele será resolvido normalmente. E também o fetch não enviará cookies de origem cruzada , como credenciais. Queremos nos conectar ao endpoint, que é esse URL ou o arquivo JSON que acabamos de criar. É prometido com base. Quando a promessa for concluída, ela pode passar para a próxima promessa e você pode encadear promessas juntas. O que estamos procurando na primeira promessa é que estabelece a conexão, obtém a resposta e, em seguida, ela retornará o objeto de resposta. Agora, há várias opções que você tem para o que você pode fazer com o objeto de resposta. E se for JSON, usamos apenas o método de resposta JSON integrado, que retornará os dados como JSON. E então, na próxima promessa, podemos fazer uso do conteúdo voltará como os dados variáveis. É aí que está sempre. São os dados que são retornados do objeto de resposta e, em seguida, podemos usá-los em nosso registro. Então, agora, estamos apenas saindo para o terminal assim que tivermos a resposta e ela estiver pronta. Então, clicamos no botão, ele faz a solicitação, seleciona as pessoas, carrega os dados no console. Então, vamos dar uma olhada no que recebemos de volta dentro do objeto de resposta. E se consolarmos o console Bach registrar o conteúdo do objeto de resposta e pressionar a clínica, é isso que recebemos de volta para o objeto de resposta. E, como você pode ver, isso é baseado em objetos. E recebemos um pouco de informação de volta. Então, obtemos o status de duzentos e duzentos é o status do código. Então isso significa que estava tudo bem. Texto de status e está tudo bem. Certo, também está bem. Recebemos os cabeçalhos de volta, o corpo do conteúdo. Portanto, é um fluxo legível. Então todo esse conteúdo é o que é retornado dentro do objeto de resposta e, em seguida, podemos fazer uso dele. Há também o texto de status da resposta. Ele também. Portanto, esta é uma string que corresponde à mensagem de código de status HTTP. Há também a resposta ok, que é vista nos EUA acima. É uma abreviação para verificar se o status e a resposta estão bem. Portanto, incorporado às promessas do JavaScript, caso não nos conectemos corretamente ao arquivo foo entendeu o caminho errado, ou por qualquer motivo pelo qual o arquivo não está disponível. Vamos ver o que acontece. Então, clicamos e obtemos o objeto de resposta ainda obter . Mas temos um código de status de quatro ou quatro. Então isso significa que algo deu errado. Dentro da solicitação de b