1 00:00:00,600 --> 00:00:06,330 OK neste vídeo vamos usar o que aprendemos até agora sobre arrays javascript para criar uma lista 2 00:00:06,330 --> 00:00:07,790 muito simples de fazer. 3 00:00:08,160 --> 00:00:13,290 E, claro, não aprendemos a ter o nosso javascript interagindo com o Jim Clancy é nós. 4 00:00:13,350 --> 00:00:18,770 Então, este aplicativo de lista de tarefas deve ser baseado em prompts e alerta e logs constantes. 5 00:00:18,960 --> 00:00:24,210 Mas, muito em breve, estaremos aprendendo sobre a mutação dominante, que é como obtemos o nosso javascript para adicionar 6 00:00:24,210 --> 00:00:29,400 idade aos elementos Moul ou removê-los ou alterá-los ou adicionar o SS e, nesse ponto, iremos fazer um 7 00:00:29,400 --> 00:00:33,080 bom olhar para fazer a lista onde Não é só Konst mas logs. 8 00:00:33,150 --> 00:00:34,620 Então, é assim que vai funcionar. 9 00:00:34,620 --> 00:00:38,480 Quando eu atualizar a página, ele me pergunta o que eu gostaria de fazer. 10 00:00:38,700 --> 00:00:43,870 E você pode ver à esquerda Eu tenho três escolhas Eu posso digitar um novo telefone adicionar um novo para fazer. 11 00:00:43,920 --> 00:00:47,990 Eu posso digitar lista para ver tudo ou digitar sair para sair. 12 00:00:48,030 --> 00:00:50,780 Então, tentemos digitar a lista para começar. 13 00:00:51,440 --> 00:00:56,190 E imprime tudo o que fazer é o que é apenas uma matriz vazia por enquanto. 14 00:00:56,190 --> 00:00:57,640 Então, vamos adicionar um novo. 15 00:00:57,750 --> 00:01:03,870 Observe que me pede novamente. Não tive que recarregar todo o tipo de novo e agora ele diz que entenda um novo para fazer. 16 00:01:04,560 --> 00:01:07,200 Então vou andar enferrujado. 17 00:01:07,350 --> 00:01:11,010 Entre e agora me pergunta o que você gostaria de fazer. 18 00:01:11,220 --> 00:01:16,320 Então, vou listar e posso ver que o resti de caminhada foi adicionado à minha lista de tarefas. 19 00:01:16,650 --> 00:01:17,830 Vamos adicionar mais um. 20 00:01:17,850 --> 00:01:27,790 Então, esse novo será feed resti e a lista e agora tenho ambos os itens nessa matriz. 21 00:01:27,810 --> 00:01:32,180 Então, agora, para terminar este ciclo, eu vou pegar isso. Eu não vou ser solicitado de novo. 22 00:01:32,430 --> 00:01:33,720 Então, esse é nosso objetivo aqui. 23 00:01:34,020 --> 00:01:37,980 Avançemos e abramos sublimes e criemos os arquivos necessários. 24 00:01:38,700 --> 00:01:39,870 Então eu tenho uma lista. 25 00:01:39,990 --> 00:01:45,280 HMO vai adicionar meu boilerplate para fazer uma lista. 26 00:01:45,960 --> 00:01:55,350 E então, dentro de aqui, vou seguir em frente e adicionar apenas um H1 para deixar claro a lista 27 00:01:55,350 --> 00:01:57,440 e depois alguns aliados. 28 00:01:58,770 --> 00:02:08,580 O primeiro apenas para que nos lembremos que os comandos adicionam um a fazer e então 29 00:02:11,490 --> 00:02:15,170 vamos ter listas listas para fazer. 30 00:02:15,210 --> 00:02:21,590 E, finalmente, encerrar o que é apenas para sair. 31 00:02:22,060 --> 00:02:23,220 Guarde isso. 32 00:02:23,250 --> 00:02:27,140 Agora vamos vincular nosso arquivo do javascript que ainda precisamos criar. 33 00:02:27,690 --> 00:02:31,600 E eu vou chamar essa lista. 34 00:02:31,640 --> 00:02:38,420 Jay Sim e então eu vou criar esse arquivo e salvar a lista que J. S. E, claro, como eu sempre gosto de fazer, vou começar por 35 00:02:39,540 --> 00:02:44,640 apenas vamos fazer um console que log este tempo conectado apenas para verificar se tudo funcionou corretamente. 36 00:02:45,630 --> 00:02:50,420 Agora vamos abrir isso em nosso navegador. 37 00:02:50,430 --> 00:02:54,670 Aqui está um pouco para fazer a lista e nos conectamos. 38 00:02:55,030 --> 00:02:57,860 Impressionante. 39 00:02:58,110 --> 00:02:59,050 Apenas vou aumentar a fonte um pouco aqui. 40 00:02:59,700 --> 00:03:01,860 Agora vamos falar sobre nossa lógica. 41 00:03:01,860 --> 00:03:04,050 Então, o que vamos fazer é usar uma matriz para modelar nossa lista de tarefas. 42 00:03:04,050 --> 00:03:08,500 Então vamos precisar de um. 43 00:03:08,550 --> 00:03:10,010 Eu vou chamar para fazer e vai começar como vazio. 44 00:03:10,020 --> 00:03:13,440 E então a próxima coisa que precisamos fazer é pedir ao usuário a entrada. 45 00:03:14,490 --> 00:03:18,930 Então, vamos chamar essa entrada var input igual a prompt. 46 00:03:19,110 --> 00:03:26,020 O que você gostaria de fazer. 47 00:03:26,460 --> 00:03:30,030 E, em seguida, o próximo passo é apenas verificar qual a entrada se a entrada for LISTA. 48 00:03:31,470 --> 00:03:37,000 Nós vamos fazer uma coisa se a entrada for nova, vamos fazer outra coisa. 49 00:03:37,020 --> 00:03:41,660 Então, vamos tentar isso se entrada e vamos começar apenas verificando se é igual à lista. 50 00:03:41,700 --> 00:03:50,310 Se for esse o caso, vamos apenas cancelar, não registre todos para fazer exatamente assim. 51 00:03:50,700 --> 00:03:58,050 Vamos continuar e adicionar alguns para fazer aqui e 52 00:03:58,860 --> 00:04:08,910 vamos adicionar um aqui por novas tartarugas e vamos verificar se isso funciona. 53 00:04:08,910 --> 00:04:11,040 Então, para verificar se isso funciona, será atualizado. 54 00:04:11,040 --> 00:04:13,120 E tudo o que precisamos fazer é escrever uma lista e devemos ver nossa matriz que diz comprar nova tartaruga. 55 00:04:13,320 --> 00:04:19,510 No entanto, se escrevemos algo mais qualquer coisa, não vemos nada porque 56 00:04:19,650 --> 00:04:25,530 nosso código só é executado se a entrada for igual à lista. 57 00:04:25,530 --> 00:04:27,680 Então, há isso. 58 00:04:28,500 --> 00:04:29,780 O próximo passo é adicionar outra condição. 59 00:04:29,820 --> 00:04:33,170 Vamos apenas fazer. 60 00:04:33,200 --> 00:04:33,730 Caso contrário, a entrada é igual à nova. 61 00:04:33,720 --> 00:04:37,740 E se for esse o caso, queremos pedir 62 00:04:38,400 --> 00:04:46,260 ao usuário um novo para pedir pedir novo para adicionar dois para fazer o conjunto. 63 00:04:46,260 --> 00:04:48,080 Então, para pedir o novo para fazer, nós apenas usamos o prompt para o nosso novo para fazer um prompt igual. 64 00:04:48,960 --> 00:04:55,200 Digite novo para fazer e, em seguida, adicione-o à matriz Dewes, temos muitas opções. 65 00:04:56,370 --> 00:05:03,340 Eu vou adicioná-lo ao final da matriz. 66 00:05:03,360 --> 00:05:05,860 Então, todos costumavam usar o push novo para fazer. 67 00:05:05,970 --> 00:05:10,680 Então, é tudo o que precisamos fazer aqui para fazer isso funcionar. 68 00:05:10,680 --> 00:05:13,670 A única questão é que se eu executar isso agora mesmo 69 00:05:13,680 --> 00:05:20,940 e eu tentei ter um novo para digitar novo ele me pede para entrar um novo para fazer uma nova tartaruga WOC e se eu pressionar Enter, terminei. 70 00:05:20,940 --> 00:05:29,300 Na verdade, não tenho uma maneira de verificar se funcionou. 71 00:05:29,700 --> 00:05:32,220 Eu poderia ir aqui e digitar o 72 00:05:32,550 --> 00:05:38,850 console e posso verificar se ambos estão aqui, mas não tenho como usar o comando da lista para imprimi-los. 73 00:05:38,850 --> 00:05:42,470 E isso é porque agora estamos apenas perguntando uma vez o que você gostaria de fazer. 74 00:05:42,780 --> 00:05:47,390 Então, o próximo passo é fazer com que isso seja repetido. 75 00:05:47,430 --> 00:05:49,990 Nós queríamos continuar perguntando uma e outra vez até o usuário sair. 76 00:05:50,130 --> 00:05:55,210 Então, espero que isso grite para você que devemos usar um loop. 77 00:05:55,230 --> 00:05:58,750 Queremos fazer algo repetidamente até que a condição seja verdadeira. 78 00:05:58,860 --> 00:06:02,200 Portanto, o loop que queremos escrever será um ciclo 79 00:06:02,640 --> 00:06:08,070 de tempo e a condição será quando a entrada não é igual ao encerrado. 80 00:06:08,130 --> 00:06:12,570 Então, quando é algo além de sair, vamos executar este código. 81 00:06:12,780 --> 00:06:17,720 E depois, eu vou para esse blog. 82 00:06:18,420 --> 00:06:20,760 OK, você abandona o aplicativo para que possamos ver alguns comentários. 83 00:06:21,070 --> 00:06:27,470 Então, só veremos essa linha assim que isso acontecer. 84 00:06:27,630 --> 00:06:31,370 Então, isso significa que o usuário digitou 85 00:06:31,620 --> 00:06:39,120 rápido e, em seguida, dentro daqui, na parte inferior, vamos pedir novamente a nova entrada. 86 00:06:39,240 --> 00:06:40,420 E no topo, vamos lidar com a entrada. 87 00:06:40,690 --> 00:06:45,600 vamos começar pedindo ao usuário a entrada uma vez 88 00:06:45,600 --> 00:06:51,540 e então eu vou mover esse código para o loop assim. 89 00:06:51,540 --> 00:06:52,020 Então, 90 00:06:55,290 --> 00:06:57,860 Então, eu vou perguntar uma vez que você gostaria de fazer é a entrada igual a sair. 91 00:06:58,020 --> 00:07:03,950 Espero que eles não partem imediatamente. 92 00:07:04,050 --> 00:07:05,760 Mas se eles fizerem, nós apenas conseguimos OK, você desistiu. 93 00:07:05,820 --> 00:07:08,810 Mas se eles não digitarem sair, nós vamos verificar a lista de tipo de dia eles digitaram novos. 94 00:07:09,030 --> 00:07:13,850 E então, a última coisa é que precisamos pedir novamente uma nova entrada para pedir novamente a nova entrada. 95 00:07:14,280 --> 00:07:22,140 Tudo o que precisamos fazer é copiar esta linha como essa. 96 00:07:22,170 --> 00:07:28,040 Então vou fazer isso um pouco maior. 97 00:07:28,110 --> 00:07:30,440 Então, aqui estamos pedindo a entrada 98 00:07:31,590 --> 00:07:38,130 novamente e isso começará a se fechar e toda verificação é entrada igual a sair desta vez. 99 00:07:38,130 --> 00:07:39,310 Sim, então terminamos. 100 00:07:39,600 --> 00:07:41,180 Então vamos tentar isso. 101 00:07:41,580 --> 00:07:42,990 Iniciando a atualização da página o que você gostaria de fazer. 102 00:07:43,230 --> 00:07:46,590 Vamos fazer novas contratações são novas para alimentar novas tartarugas. O que você gostaria de fazer. 103 00:07:47,010 --> 00:07:55,220 Ele me perguntou novamente primeiro. 104 00:07:55,260 --> 00:07:57,430 Então agora eu tenho esses dois para fazer dentro da minha lista de tarefas. 105 00:07:57,870 --> 00:08:00,930 Agora vamos tentar parar de fumar e nós conseguimos OK. 106 00:08:00,990 --> 00:08:04,810 Você saiu do aplicativo. 107 00:08:04,830 --> 00:08:05,800 Então eu digitei sair dessa condição de repente, era verdade e depois terminamos. 108 00:08:06,090 --> 00:08:10,160 Então, vamos apenas formar este pouco melhor e, então, coisas corretamente. 109 00:08:10,380 --> 00:08:14,760 Então, é por nossa lista básica para fazer agora. 110 00:08:15,150 --> 00:08:17,500 Em breve, vamos adicionar alguns recursos extras e 111 00:08:17,700 --> 00:08:22,320 alguns outros comandos, mas precisamos aprender algumas coisas novas sobre arrays antes que possamos fazer isso. 112 00:08:22,320 --> 00:08:24,140