1 00:00:00,000 --> 00:00:07,440 2 00:00:07,440 --> 00:00:08,180 >> TOMAS REIMERS: Oi, todo mundo. 3 00:00:08,180 --> 00:00:09,250 Tomas Reimers do meu nome. 4 00:00:09,250 --> 00:00:10,500 >> MIKE RIZZO: E eu sou Mike Rizzo. 5 00:00:10,500 --> 00:00:12,990 >> TOMAS REIMERS: Nós somos dois dos CS50s TS. 6 00:00:12,990 --> 00:00:18,910 E hoje nós estamos levando o seminário sobre JavaScript e CSS para aplicações web. 7 00:00:18,910 --> 00:00:22,140 Se você quiser acompanhar, o link está logo ali. 8 00:00:22,140 --> 00:00:25,190 E você quer colocá-lo brevemente no computador? 9 00:00:25,190 --> 00:00:27,460 >> Lá está o link. 10 00:00:27,460 --> 00:00:30,390 É um pequeno site, que tem ligações com todos os recursos que vamos ser 11 00:00:30,390 --> 00:00:36,490 apontando-lhe hoje e também tem um monte de informação útil escrito por nós 12 00:00:36,490 --> 00:00:39,680 leia mais em profundidade quando você voltar, e você está tentando lembrar o que 13 00:00:39,680 --> 00:00:42,166 exatamente que dizer, o que você estava falando, et cetera. 14 00:00:42,166 --> 00:00:43,870 >> MIKE RIZZO: Tudo bem. 15 00:00:43,870 --> 00:00:44,890 Então, vamos começar. 16 00:00:44,890 --> 00:00:45,700 >> TOMAS REIMERS: Então você quer começar? 17 00:00:45,700 --> 00:00:45,970 OK. 18 00:00:45,970 --> 00:00:47,170 >> MIKE RIZZO: Yeah. 19 00:00:47,170 --> 00:00:51,730 Então, primeiro queria começar com uma ampla visão geral sobre a internet e 20 00:00:51,730 --> 00:00:54,240 tipos de arquivos ao projetar websites. 21 00:00:54,240 --> 00:00:57,550 Embora esta apresentação queremos entrar em JavaScript muito mais 22 00:00:57,550 --> 00:01:00,320 mais tarde, queríamos começar com apenas, tipo, como a vista de um pássaro olho 23 00:01:00,320 --> 00:01:03,270 do que um site é e como a pensar sobre como criar um 24 00:01:03,270 --> 00:01:04,800 site para o início. 25 00:01:04,800 --> 00:01:08,370 >> Então vocês, neste momento - com ele sendo sexta-feira à noite - deve ter 26 00:01:08,370 --> 00:01:11,000 submetido suas finanças CS50 conjuntos de problemas. 27 00:01:11,000 --> 00:01:15,260 Felizmente, isso foi um bom gosto do que de programação web pode ser. 28 00:01:15,260 --> 00:01:18,261 Mas aqui nós queremos, tipo, dar lhe um outro gosto, também. 29 00:01:18,261 --> 00:01:23,190 >> TOMAS REIMERS: Então, só para recapitular o que acontece, quando você digitar a sua URL para 30 00:01:23,190 --> 00:01:26,650 seu navegador, que recebe URL olhou para cima no computador. 31 00:01:26,650 --> 00:01:28,590 E o seu computador está conectado para outro computador, 32 00:01:28,590 --> 00:01:29,890 que hospeda o site. 33 00:01:29,890 --> 00:01:33,150 OK, então, quando você vai para google.com, você está conectado a um dos Google 34 00:01:33,150 --> 00:01:36,496 computadores, que contém o arquivos para google.com. 35 00:01:36,496 --> 00:01:38,750 >> Em seguida, ele pede um arquivo específico. 36 00:01:38,750 --> 00:01:40,020 Então, se você ir para - 37 00:01:40,020 --> 00:01:41,550 Eu não sei - 38 00:01:41,550 --> 00:01:48,170 example.com / index.html ou / test.html, você vai pedir 39 00:01:48,170 --> 00:01:49,340 que arquivo específico. 40 00:01:49,340 --> 00:01:52,780 E o servidor web vai para devolvê-lo a você. 41 00:01:52,780 --> 00:01:54,910 >> Então, uma vez que você passar por aquele arquivo - 42 00:01:54,910 --> 00:01:57,750 43 00:01:57,750 --> 00:01:59,950 uma vez que você estiver computador fica que arquivo - que vai começar 44 00:01:59,950 --> 00:02:00,820 construir uma página web. 45 00:02:00,820 --> 00:02:03,020 Então, agora ele tem o arquivo HTML, que é uma espécie de como o 46 00:02:03,020 --> 00:02:05,170 estrutura da página web. 47 00:02:05,170 --> 00:02:08,620 O arquivo HTML pode também referência Arquivos CSS, que definem o 48 00:02:08,620 --> 00:02:09,889 estilo da página web. 49 00:02:09,889 --> 00:02:12,970 >> Arquivos JavaScript, que define interação com a página da web. 50 00:02:12,970 --> 00:02:15,200 Os arquivos de imagem, que são apenas imagens. 51 00:02:15,200 --> 00:02:19,450 E, possivelmente, vincular a outros arquivos HTML, que você pode então visitar. 52 00:02:19,450 --> 00:02:22,656 53 00:02:22,656 --> 00:02:24,380 >> MIKE RIZZO: OK, ótimo. 54 00:02:24,380 --> 00:02:28,980 Então, vocês têm tudo, talvez, meticulosamente configurar o host local 55 00:02:28,980 --> 00:02:30,810 em sua máquina virtual. 56 00:02:30,810 --> 00:02:35,650 E isso só, tipo, é o local de domínio que hospeda o seu computador só 57 00:02:35,650 --> 00:02:38,760 para você em seu próprio endereço IP. 58 00:02:38,760 --> 00:02:43,300 >> Então, dentro disso, então você pode adicionar a ele suas próprias páginas web. 59 00:02:43,300 --> 00:02:47,655 Quero dizer, em CS50 Finanças, você deve ter adicionadas algumas páginas HTML, que são, 60 00:02:47,655 --> 00:02:49,410 tipo, envolto em invólucro PHP. 61 00:02:49,410 --> 00:02:54,690 Mas, afinal, o que suas páginas PHP Foram saída era HTML. 62 00:02:54,690 --> 00:02:58,210 >> Mas, pensando de volta para o início do PSET, tivemos que definir 63 00:02:58,210 --> 00:03:00,890 as permissões para tudo, certo? 64 00:03:00,890 --> 00:03:07,270 Então isso basicamente só nos permite saber que pode ler, escrever, e, possivelmente, 65 00:03:07,270 --> 00:03:08,730 executar cada um dos arquivos. 66 00:03:08,730 --> 00:03:11,870 Então, nós vamos fazer um rápido - hm? 67 00:03:11,870 --> 00:03:15,660 >> TOMAS REIMERS: Então nós vamos para fazer uma demonstração rápida. 68 00:03:15,660 --> 00:03:19,560 Então, só para lembrá-lo, quando você conectar ao computador do Google - 69 00:03:19,560 --> 00:03:20,690 quem - 70 00:03:20,690 --> 00:03:24,060 e pedir um arquivo, o primeiro computador precisa ter certeza de que você está autorizado 71 00:03:24,060 --> 00:03:28,790 para realmente ver esse arquivo ou ler que arquivo, porque você não pode simplesmente perguntar 72 00:03:28,790 --> 00:03:30,430 para qualquer arquivo no computador, certo? 73 00:03:30,430 --> 00:03:32,260 Isso seria um perigo para a segurança. 74 00:03:32,260 --> 00:03:37,020 >> Assim, os arquivos nos sistemas que utilizamos, como este aparelho CS50, tem três 75 00:03:37,020 --> 00:03:39,200 geral as pessoas que podem ter permissões para algo. 76 00:03:39,200 --> 00:03:41,610 O primeiro é o real proprietário do referido arquivo. 77 00:03:41,610 --> 00:03:43,820 A segunda é o grupo que o arquivo pertence. 78 00:03:43,820 --> 00:03:46,090 Nós não estamos indo centrar-se muito sobre isso. 79 00:03:46,090 --> 00:03:50,010 E a última coisa é, mais ou menos, como o mundo ou como toda a gente que está 80 00:03:50,010 --> 00:03:54,130 não específico para esse arquivo e não tem direitos de propriedade sobre ele. 81 00:03:54,130 --> 00:04:05,650 >> Então, se temos proprietário, o grupo, e, em seguida, mundo. 82 00:04:05,650 --> 00:04:10,510 E então, para cada um destes grupos, pode ter um dos três permissões, 83 00:04:10,510 --> 00:04:13,010 OK, ou múltiplo deles. 84 00:04:13,010 --> 00:04:15,070 Você pode ter permissões de leitura. 85 00:04:15,070 --> 00:04:16,560 Você pode ter as permissões adequadas. 86 00:04:16,560 --> 00:04:18,880 E você pode ter permissões de execução. 87 00:04:18,880 --> 00:04:22,060 >> Então, em termos de tipos de arquivo reais, leia permissão é como realmente lendo 88 00:04:22,060 --> 00:04:23,250 o conteúdo do arquivo. 89 00:04:23,250 --> 00:04:24,730 A permissão para a direita está escrevendo para o referido arquivo. 90 00:04:24,730 --> 00:04:28,370 Uma permissão de execução está executando o arquivo como você faz quando você executar uma das 91 00:04:28,370 --> 00:04:29,620 seus projetos CS50. 92 00:04:29,620 --> 00:04:32,190 93 00:04:32,190 --> 00:04:38,820 >> Então, quando estamos pensando sobre arquivos como quando precisamos ler um HTML 94 00:04:38,820 --> 00:04:41,790 arquivo, que deve ser o mundo legível, certo? 95 00:04:41,790 --> 00:04:44,420 Presumivelmente, também o proprietário quer para ser capaz de editar esse arquivo. 96 00:04:44,420 --> 00:04:46,610 Assim, o proprietário vai precisar de ler e escrever permissões. 97 00:04:46,610 --> 00:04:48,710 Eles realmente não precisa executar. 98 00:04:48,710 --> 00:04:50,950 >> Group, vamos tratar o mesmo que o mundo agora. 99 00:04:50,950 --> 00:04:54,610 Então eles precisam de permissões de leitura. 100 00:04:54,610 --> 00:04:57,310 Mas eles não precisam de gravação ou permissões de execução. 101 00:04:57,310 --> 00:05:01,920 E agora, se pensarmos de volta para ex- Série de Exercícios, o que se percebe é este tipo 102 00:05:01,920 --> 00:05:03,360 de olhar como binário, certo? 103 00:05:03,360 --> 00:05:04,210 1 significa sim. 104 00:05:04,210 --> 00:05:05,040 0 para não. 105 00:05:05,040 --> 00:05:06,870 E nós podemos realmente traduzir esta para binário. 106 00:05:06,870 --> 00:05:10,478 >> Assim, 110 em binário seria 6. 107 00:05:10,478 --> 00:05:13,270 100 seria 4. 108 00:05:13,270 --> 00:05:14,690 Mesmo com o mundo. 109 00:05:14,690 --> 00:05:20,846 Portanto, o número que se obtém para o permissões para isso seria 644. 110 00:05:20,846 --> 00:05:24,400 >> MIKE RIZZO: E se você acha que volta para quando você CHMOD algo, eu acredito 111 00:05:24,400 --> 00:05:28,980 eles deram no conjunto de problemas a exemplo de onde você poderia fazer 112 00:05:28,980 --> 00:05:36,470 algo como chmod 644 e, em seguida, o nome do arquivo. 113 00:05:36,470 --> 00:05:39,980 O 644 então, agora você pode ver diretamente de onde isso vem. 114 00:05:39,980 --> 00:05:42,840 Portanto, esperamos que faz com que a um pouco mais clara. 115 00:05:42,840 --> 00:05:45,600 >> E, em seguida, para maior clareza do que você cara - 116 00:05:45,600 --> 00:05:48,200 oh sim, aqui é novo. 117 00:05:48,200 --> 00:05:53,260 Assim, 600, em seguida, seria apenas o exemplo desistimos aqui, onde o proprietário tem 118 00:05:53,260 --> 00:05:56,360 permissões de leitura e direito, enquanto grupo e mundo não têm nenhuma permissão 119 00:05:56,360 --> 00:05:58,145 para acessar o arquivo. 120 00:05:58,145 --> 00:06:01,500 >> TOMAS REIMERS: E então nós temos uma rápida lista de permissões comuns. 121 00:06:01,500 --> 00:06:05,250 Assim, diretórios, você quer para efectivamente chmod 711. 122 00:06:05,250 --> 00:06:08,930 Rápida de lado - para um diretório para ter permissão de execução significa ser capaz 123 00:06:08,930 --> 00:06:11,680 para abrir o diretório. 124 00:06:11,680 --> 00:06:15,280 Imagens, CSS, JavaScript, HTML necessidades 644, porque, basicamente, o mundo 125 00:06:15,280 --> 00:06:16,400 necessidades permissões de leitura. 126 00:06:16,400 --> 00:06:20,960 >> E PHP, o que vocês têm visto embora nós não vamos estar falando sobre isso 127 00:06:20,960 --> 00:06:24,880 estritamente está tipicamente com CHMOD permissão 600 porque ele é executado com 128 00:06:24,880 --> 00:06:26,540 as permissões do proprietário. 129 00:06:26,540 --> 00:06:27,790 Pelo menos no aparelho. 130 00:06:27,790 --> 00:06:30,200 131 00:06:30,200 --> 00:06:36,870 >> MIKE RIZZO: Então, se você ainda não especificamente especificar o tipo de arquivo 132 00:06:36,870 --> 00:06:39,480 você quer na verdade, definindo esta apresentação - 133 00:06:39,480 --> 00:06:43,490 tivemos um problema com isso, porque tudo não foi CHMOD corretamente - 134 00:06:43,490 --> 00:06:47,550 você vai conseguir, de certa forma, um erro proibido que o site 135 00:06:47,550 --> 00:06:49,700 na verdade não tem permissão para acessar qualquer arquivo 136 00:06:49,700 --> 00:06:51,370 você quer acessar. 137 00:06:51,370 --> 00:06:54,780 E, claro, que pode ser corrigido - como no conjunto de problemas -, alterando 138 00:06:54,780 --> 00:06:56,405 permissões apropriadamente. 139 00:06:56,405 --> 00:06:59,620 >> TOMAS REIMERS: E o último comentário para desenvolvimento local é rapidamente - nós 140 00:06:59,620 --> 00:07:02,000 trouxe este, mas nós só queríamos para trazê-lo de novo - 141 00:07:02,000 --> 00:07:06,230 se você perguntar para um servidor - host tão local, por exemplo, com ou qualquer coisa. - 142 00:07:06,230 --> 00:07:09,170 e você não especificar um arquivo específico, o arquivo que seu computador está indo 143 00:07:09,170 --> 00:07:11,540 para pedir é chamado index.html. 144 00:07:11,540 --> 00:07:12,790 Ou, se isso não existir, index.php. 145 00:07:12,790 --> 00:07:15,560 146 00:07:15,560 --> 00:07:16,350 >> Legal. 147 00:07:16,350 --> 00:07:19,560 Então, isso é apenas um resumo de tudo, espera-se, que nós cobrimos em 148 00:07:19,560 --> 00:07:22,800 seção, e palestra, e até agora em CS50. 149 00:07:22,800 --> 00:07:26,110 E agora vamos começar a falar sobre especificamente bibliotecas. 150 00:07:26,110 --> 00:07:30,270 Bibliotecas JavaScript e CSS para aplicações web. 151 00:07:30,270 --> 00:07:36,350 >> Assim, uma razão rápida por isso que temos bibliotecas é a programação - 152 00:07:36,350 --> 00:07:39,000 há um monte de problemas em programação, que continuam surgindo 153 00:07:39,000 --> 00:07:40,570 novamente, e novamente, e novamente. 154 00:07:40,570 --> 00:07:43,870 Você pode notar que um monte de sites precisa a capacidade de ter suspensa 155 00:07:43,870 --> 00:07:49,100 menus, por exemplo, ou precisa da capacidade ter um botão muito normal 156 00:07:49,100 --> 00:07:51,400 estilo, que não pode ser a coisa mais fácil. 157 00:07:51,400 --> 00:07:54,670 Agora que você começa a entrar em HTML, você perceber que os botões pode realmente 158 00:07:54,670 --> 00:07:57,720 olhar muito feio se não faça nada. 159 00:07:57,720 --> 00:08:00,830 >> Então, um monte de pessoas têm escrito chamado bibliotecas. 160 00:08:00,830 --> 00:08:02,990 E, neste contexto, são também chamado de frameworks. 161 00:08:02,990 --> 00:08:04,790 Nós vamos usar o dois alternadamente. 162 00:08:04,790 --> 00:08:07,360 E o que eles são é que eles são, basicamente, peças premade de código - 163 00:08:07,360 --> 00:08:09,130 ou CSS ou JavaScript - 164 00:08:09,130 --> 00:08:13,240 que tirar um monte de equipe que você tem na codificação. 165 00:08:13,240 --> 00:08:17,290 >> Então, eles pré-definir um monte de aulas ou pré-definir um monte de funções para 166 00:08:17,290 --> 00:08:20,110 O caso de JavaScript, que você pode ligar mais tarde. 167 00:08:20,110 --> 00:08:22,690 E então você pode, de alguma forma, obter acesso a este código, sem 168 00:08:22,690 --> 00:08:23,710 ter que fazer nada. 169 00:08:23,710 --> 00:08:27,750 Um exemplo da biblioteca foi CS50.H. Essa foi uma biblioteca que demos a você de volta 170 00:08:27,750 --> 00:08:32,090 em uma semana, o que lhe permitiu fazer coisas assim GetInt e GetString 171 00:08:32,090 --> 00:08:35,237 sem ter que escrever qualquer código você mesmo. 172 00:08:35,237 --> 00:08:36,179 >> MIKE RIZZO: Tudo bem. 173 00:08:36,179 --> 00:08:40,299 Então, aqui, como nós tivemos que incluem em nossa c arquivos diferentes 174 00:08:40,299 --> 00:08:46,570 bibliotecas, também deve incluir em nossa arquivos HTML diferentes bibliotecas. 175 00:08:46,570 --> 00:08:50,310 Por exemplo, se quiséssemos incluir uma biblioteca de JavaScript específico aqui, 176 00:08:50,310 --> 00:08:52,850 talvez, que nós escrevemos nos como ele está hospedado localmente 177 00:08:52,850 --> 00:08:56,000 chamados script.js, nós só usar esta notação. 178 00:08:56,000 --> 00:08:59,500 >> Portanto, temos tipo script iguais JavaScript fonte iguais 179 00:08:59,500 --> 00:09:01,260 Javascript.js. 180 00:09:01,260 --> 00:09:05,190 E se você acha que volta para sua CS50 problema de financiamento definido, se você olhar para 181 00:09:05,190 --> 00:09:09,190 header.php na pasta modelos, você deve ter visto 182 00:09:09,190 --> 00:09:10,970 alguns deles incluídos. 183 00:09:10,970 --> 00:09:13,250 Portanto, este primeiro - os roteiros - 184 00:09:13,250 --> 00:09:16,080 é inclusive uma biblioteca JavaScript. 185 00:09:16,080 --> 00:09:18,760 Incluindo uma biblioteca de CSS é um pouco diferente. 186 00:09:18,760 --> 00:09:21,430 >> Aqui, em vez de o script TAG você precisa da tag link. 187 00:09:21,430 --> 00:09:27,110 E, em seguida, o tipo de texto CSS é um pouco diferente. 188 00:09:27,110 --> 00:09:29,270 Você nem sempre tem que incluir folha de estilo rel. 189 00:09:29,270 --> 00:09:30,970 Mas eu acho que é, em geral, boas práticas. 190 00:09:30,970 --> 00:09:35,810 >> E então, finalmente, o HREF, que você provavelmente viu em seus ATAGs para vincular 191 00:09:35,810 --> 00:09:39,440 em diferentes elos apenas Especifica o link de onde encontrar isso. 192 00:09:39,440 --> 00:09:42,250 Por exemplo, se quiséssemos ligar um biblioteca diferente - vamos dizer - 193 00:09:42,250 --> 00:09:49,330 que viveu em styles.css. 194 00:09:49,330 --> 00:09:54,030 E nós queríamos de ligação que, em que é hospedado na web, teríamos entendido. 195 00:09:54,030 --> 00:09:58,834 E, em seguida, colá-lo em tudo o que temos aqui em seu lugar. 196 00:09:58,834 --> 00:10:01,340 >> TOMAS REIMERS: OK, espero que você caras já estão familiarizados 197 00:10:01,340 --> 00:10:02,410 com a forma de ligação CSS. 198 00:10:02,410 --> 00:10:04,000 Você tinha que fazer isso em o seu último conjunto marrom. 199 00:10:04,000 --> 00:10:07,110 JavaScript, alguns de vocês talvez tem alguma experiência com. 200 00:10:07,110 --> 00:10:07,980 Alguns de vocês podem não. 201 00:10:07,980 --> 00:10:12,190 >> Então, por enquanto, sabemos que um arquivo JavaScript é muito parecido com um arquivo CSS em 202 00:10:12,190 --> 00:10:15,640 sentido de que você pode ligar para ele ou que você pode incluí-lo internamente. 203 00:10:15,640 --> 00:10:17,360 E isso permite-lhe coisas de script. 204 00:10:17,360 --> 00:10:21,820 E nós estamos indo para orientá-lo através de um pouco de JavaScript mais tarde. 205 00:10:21,820 --> 00:10:23,560 >> Então, usando uma biblioteca - 206 00:10:23,560 --> 00:10:26,150 uma vez que você incluiu, é como simples como, literalmente, chamando a 207 00:10:26,150 --> 00:10:29,640 funções ou adicionando o nomes de classe para ele. 208 00:10:29,640 --> 00:10:32,220 A última coisa que quero falar sobre em termos de biblioteca - 209 00:10:32,220 --> 00:10:34,180 e esta é mais uma nota técnica - 210 00:10:34,180 --> 00:10:35,860 é o licenciamento de fonte aberta. 211 00:10:35,860 --> 00:10:41,550 Então, quando você encontrar essas bibliotecas reais, você pode estar pensando em 212 00:10:41,550 --> 00:10:47,630 Perguntas como é OK que eu sou apenas usando o código de outra pessoa, especialmente 213 00:10:47,630 --> 00:10:51,970 porque isso é algo que muito disse-lhe para não fazer neste curso. 214 00:10:51,970 --> 00:10:55,790 >> Assim, no caso de licenciamento de fonte aberta, um monte de desenvolvedores - 215 00:10:55,790 --> 00:10:57,540 uma vez que você escreveu uma biblioteca, que eles acham que poderia ser 216 00:10:57,540 --> 00:10:59,450 útil para outras pessoas - 217 00:10:59,450 --> 00:11:02,420 vai publicá-lo na web e dar-lhe uma licença. 218 00:11:02,420 --> 00:11:06,620 E uma licença basicamente diz que eu sou aqui a concessão de permissão para outro 219 00:11:06,620 --> 00:11:11,250 as pessoas a usar este software com o seguinte tipo de 220 00:11:11,250 --> 00:11:13,230 estipulações. 221 00:11:13,230 --> 00:11:16,100 >> Nós incluímos um link para um bom site para ajudá-lo a compreender as licenças em 222 00:11:16,100 --> 00:11:17,720 Caso você correr para eles. 223 00:11:17,720 --> 00:11:21,680 Estipulações comuns são coisas como você está convidado a usar a minha biblioteca para 224 00:11:21,680 --> 00:11:23,000 Contanto que você me dar crédito. 225 00:11:23,000 --> 00:11:25,670 Você está convidado a usar a minha biblioteca contanto que, quando se rompe 226 00:11:25,670 --> 00:11:26,790 você não me culpe. 227 00:11:26,790 --> 00:11:30,310 Você está convidado a usar a minha biblioteca de tanto tempo como você não usá-lo para ganhar dinheiro 228 00:11:30,310 --> 00:11:31,910 para si mesmo. 229 00:11:31,910 --> 00:11:34,130 Estes são os tipos de comum estipulações. 230 00:11:34,130 --> 00:11:37,780 >> Para este projeto final CS50, eles não devem ser super relevante porque 231 00:11:37,780 --> 00:11:41,440 os projetos que vocês usam são Provavelmente sim, mais ou menos, conhecido. 232 00:11:41,440 --> 00:11:44,170 Mas quando você realmente sair para o mundo e começar a usar as bibliotecas, que 233 00:11:44,170 --> 00:11:48,100 pode ou não ser também implementado como alguns dos mais populares estamos 234 00:11:48,100 --> 00:11:49,780 vai estar passando. 235 00:11:49,780 --> 00:11:53,310 É bom ser capaz de entender essas licenças e de 236 00:11:53,310 --> 00:11:54,560 entender o que eles significam. 237 00:11:54,560 --> 00:11:58,120 238 00:11:58,120 --> 00:11:58,586 E voltando. 239 00:11:58,586 --> 00:12:00,960 >> MIKE RIZZO: OK. 240 00:12:00,960 --> 00:12:04,850 Então agora passar para exemplos de CSS real. 241 00:12:04,850 --> 00:12:07,770 Neste ponto, até agora, você pode não encontrei isso. 242 00:12:07,770 --> 00:12:10,300 Mas você pode ter encontrado ele em sua vida cotidiana em que algo 243 00:12:10,300 --> 00:12:13,160 que parece uma forma em um navegador o mesmo não se pode olhar 244 00:12:13,160 --> 00:12:14,880 caminho em outro navegador. 245 00:12:14,880 --> 00:12:17,400 >> Isto é chamado de navegador navegador compatibilidade. 246 00:12:17,400 --> 00:12:20,780 E cada vez mais está se tornando mais e mais um problema, especialmente quando 247 00:12:20,780 --> 00:12:25,260 navegadores tomar mais e mais liberdades para implementar coisas como eles querem. 248 00:12:25,260 --> 00:12:28,440 Portanto, para superar isso, há, na verdade, é uma grande biblioteca chamada Normalize.CSS. 249 00:12:28,440 --> 00:12:32,236 250 00:12:32,236 --> 00:12:33,770 >> TOMAS REIMERS: Foram incluídos o link. 251 00:12:33,770 --> 00:12:36,210 Neste ponto, é útil se você tem o seu laptop lá 252 00:12:36,210 --> 00:12:38,740 olhando para o site. 253 00:12:38,740 --> 00:12:42,580 E nós estamos dando isso a você direita agora simplesmente porque a final CS50 254 00:12:42,580 --> 00:12:44,370 projeto está indo realmente para pedir-lhe para implementá-lo 255 00:12:44,370 --> 00:12:45,860 da mesma forma e através de browsers. 256 00:12:45,860 --> 00:12:49,250 >> Então, só para manter-se na parte traseira de sua cabeça, esta é uma biblioteca maravilhosa 257 00:12:49,250 --> 00:12:51,170 porque ele vai, de alguma forma, padronizar as coisas. 258 00:12:51,170 --> 00:12:54,230 No Firefox, algo pode mostrar como um pixel para a esquerda. 259 00:12:54,230 --> 00:12:58,390 E então Chrome pode decidir que, na verdade, o que você quis dizer foi de 10 pixels 260 00:12:58,390 --> 00:12:59,380 para a esquerda. 261 00:12:59,380 --> 00:13:01,030 E você quer padronizar isso. 262 00:13:01,030 --> 00:13:05,360 Normalize vai realmente fazer um bom trabalho de certificar-se que o seu site 263 00:13:05,360 --> 00:13:08,070 tem a mesma aparência em todos os navegadores. 264 00:13:08,070 --> 00:13:10,660 >> MIKE RIZZO: Então, se quiséssemos apenas clique no link muito rapidamente e mostrar 265 00:13:10,660 --> 00:13:13,140 você o que parece, você pode baixá-lo usando o 266 00:13:13,140 --> 00:13:14,670 botão gigante Download. 267 00:13:14,670 --> 00:13:18,520 Ou eu encorajo você a ler mais sobre o assunto clicando neste link na parte inferior 268 00:13:18,520 --> 00:13:19,310 canto direito. 269 00:13:19,310 --> 00:13:22,420 >> TOMAS REIMERS: E se você realmente Clique em ler mais ali - 270 00:13:22,420 --> 00:13:24,340 clique na fonte no GitHub - 271 00:13:24,340 --> 00:13:31,720 você vai realmente ver o código-fonte aberto licença em LICENSE.md ali mesmo. 272 00:13:31,720 --> 00:13:35,740 E você vai ver aqui é a licença MIT muito popular. 273 00:13:35,740 --> 00:13:38,940 Novamente, se você ler o texto, você vai ser capaz de encontrá-lo no site 274 00:13:38,940 --> 00:13:42,550 fizemos referência antes e ser capaz de compreendê-lo sem ter que ler 275 00:13:42,550 --> 00:13:45,920 através do jargão legal. 276 00:13:45,920 --> 00:13:46,850 >> MIKE RIZZO: OK, ótimo. 277 00:13:46,850 --> 00:13:47,940 Então, isso é Normalize. 278 00:13:47,940 --> 00:13:49,190 Queríamos dar-lhe que muito rapidamente. 279 00:13:49,190 --> 00:13:50,030 Oh, você tem uma pergunta? 280 00:13:50,030 --> 00:13:53,013 >> AUDIÊNCIA: Então, quando você baixá-lo, você basta seguir esse código que eles têm 281 00:13:53,013 --> 00:13:54,098 sob o botão Download? 282 00:13:54,098 --> 00:13:55,860 >> TOMAS REIMERS: Sim, por isso quando você baixar - 283 00:13:55,860 --> 00:13:58,130 >> MIKE RIZZO: Oh, isso é um grande ponto. 284 00:13:58,130 --> 00:14:00,700 Então, a questão era como fazer nós realmente baixá-lo? 285 00:14:00,700 --> 00:14:03,260 Então, se nós, clique no link, vemos que ele realmente aparece 286 00:14:03,260 --> 00:14:05,030 no código fonte. 287 00:14:05,030 --> 00:14:08,550 Então, para fazer isso, o que pudemos não é só clicar em Salvar como. 288 00:14:08,550 --> 00:14:10,830 Salvar como e que deveria abrir um arquivo. 289 00:14:10,830 --> 00:14:14,160 E, então, pode optar por salvar lo como normalize.CSS. 290 00:14:14,160 --> 00:14:15,810 E então você tem que ligá-lo em - 291 00:14:15,810 --> 00:14:18,660 >> TOMAS REIMERS: Da mesma forma que ligação em qualquer outro arquivo. 292 00:14:18,660 --> 00:14:22,250 E uma vez que você ligá-lo dentro, o que é ótimo sobre Normalize é que vai realmente 293 00:14:22,250 --> 00:14:25,920 cuidar de tudo o disco trabalhar por si mesmo. 294 00:14:25,920 --> 00:14:27,730 O que significa que você não tem para adicionar as classes. 295 00:14:27,730 --> 00:14:29,690 >> Você não tem que fazer nada estranho. 296 00:14:29,690 --> 00:14:34,590 Ele vai normalizar sem você fazer mais nada. 297 00:14:34,590 --> 00:14:36,083 Sim, você tem que incluí-lo. 298 00:14:36,083 --> 00:14:38,990 299 00:14:38,990 --> 00:14:40,240 Google Chrome não está respondendo. 300 00:14:40,240 --> 00:14:43,270 301 00:14:43,270 --> 00:14:44,860 >> Apenas um rápido aparte - 302 00:14:44,860 --> 00:14:46,800 Notei que saltou para isso. 303 00:14:46,800 --> 00:14:49,010 O resto desta apresentação é Vai ser uma rápida visão geral. 304 00:14:49,010 --> 00:14:50,380 Uma pesquisa de bibliotecas. 305 00:14:50,380 --> 00:14:52,710 >> Basicamente, o que eles são. 306 00:14:52,710 --> 00:14:53,350 O que eles fazem. 307 00:14:53,350 --> 00:14:54,060 Como eles são úteis. 308 00:14:54,060 --> 00:14:56,540 Como você pode implementá-las. 309 00:14:56,540 --> 00:14:59,730 Se você quer começar a olhar para eles, acompanhando, e da leitura através 310 00:14:59,730 --> 00:15:01,990 eles, eu altamente incentivar isso. 311 00:15:01,990 --> 00:15:07,620 >> Alternativamente, você é bem-vindo também para começar a baixá-los e inclusive 312 00:15:07,620 --> 00:15:11,400 los em uma visão apenas para ver o que eles olha como ou o que fazer se você tem 313 00:15:11,400 --> 00:15:12,270 seu laptop na frente de você. 314 00:15:12,270 --> 00:15:14,650 Se não, você é bem vindo para manter ouvir-nos falar. 315 00:15:14,650 --> 00:15:15,500 Nós vamos continuar a falar. 316 00:15:15,500 --> 00:15:18,680 E nós temos tempo no final, espero que vamos realmente começar a mostrar-lhe 317 00:15:18,680 --> 00:15:20,946 que algumas dessas bibliotecas parecem. 318 00:15:20,946 --> 00:15:22,320 >> MIKE RIZZO: Cool. 319 00:15:22,320 --> 00:15:25,466 Tudo bem, então agora vamos falar sobre Font impressionante. 320 00:15:25,466 --> 00:15:30,480 >> TOMAS REIMERS: Awesome tão Font é um local muito legal, especialmente para aqueles 321 00:15:30,480 --> 00:15:32,450 de nós que são menos artisticamente talentosa. 322 00:15:32,450 --> 00:15:36,330 323 00:15:36,330 --> 00:15:38,880 Ignorando o nome da fonte impressionante, dá lhe um monte de ícones, que são 324 00:15:38,880 --> 00:15:41,050 muito útil. 325 00:15:41,050 --> 00:15:45,950 Então, um monte de vezes que você vai implementar um ícone que você pode querer como um bom x então 326 00:15:45,950 --> 00:15:47,170 que você pode fechar alguma coisa. 327 00:15:47,170 --> 00:15:49,910 >> Ou você pode querer algum tipo de botão Editar com um desenho a lápis como 328 00:15:49,910 --> 00:15:50,940 todo mundo tem. 329 00:15:50,940 --> 00:15:53,850 E isso é quando você aprende que desenho dos ícones pode ser 330 00:15:53,850 --> 00:15:55,510 muito tedioso e difícil. 331 00:15:55,510 --> 00:15:59,160 Fonte Awesome - se você realmente ir para o site - 332 00:15:59,160 --> 00:16:02,892 dá-lhe um monte de ícones sob os ícones na parte superior. 333 00:16:02,892 --> 00:16:06,980 Sim, apenas o topo. 334 00:16:06,980 --> 00:16:09,030 Ele vai te dar um monte de ícones gratuitamente. 335 00:16:09,030 --> 00:16:15,210 >> Então, aqui você vê que tem coisas como um asterisco, bares, um raio, uma 336 00:16:15,210 --> 00:16:19,750 calendário, um inseto, um livro, et cetera. 337 00:16:19,750 --> 00:16:21,110 Isto pode ser muito útil. 338 00:16:21,110 --> 00:16:24,290 A maneira como você incluir este é você incluir literalmente o arquivo CSS. 339 00:16:24,290 --> 00:16:29,760 E depois que você incluiu o arquivo CSS, o que você pode fazer é criar uma 340 00:16:29,760 --> 00:16:33,430 tag chamado I. satands para Ícone com a classe FA 341 00:16:33,430 --> 00:16:34,460 de pé para Font impressionante. 342 00:16:34,460 --> 00:16:36,330 E então, qualquer classe que você quiser. 343 00:16:36,330 --> 00:16:41,220 >> Então, se eu queria um ícone desta mais quadrado aqui, eu daria 344 00:16:41,220 --> 00:16:43,290 que a classe FA. 345 00:16:43,290 --> 00:16:46,230 E então FA hífen mais quadrado hífen. 346 00:16:46,230 --> 00:16:50,325 347 00:16:50,325 --> 00:16:53,710 >> MIKE RIZZO: Cool, OK. 348 00:16:53,710 --> 00:16:56,980 >> TOMAS REIMERS: E então, o último CSS biblioteca queremos passar estamos 349 00:16:56,980 --> 00:16:59,950 tentar mantê-lo o mínimo em CSS bibliotecas porque percebem a 350 00:16:59,950 --> 00:17:03,660 título desta apresentação é JavaScript Libraries. 351 00:17:03,660 --> 00:17:07,089 Mas nós pensamos que nós podemos também apresentá-lo a outras bibliotecas 352 00:17:07,089 --> 00:17:09,569 enquanto nós estávamos falando sobre bibliotecas. 353 00:17:09,569 --> 00:17:11,400 >> É Google Web Fonts. 354 00:17:11,400 --> 00:17:17,040 E o que o Google Web Fonts você permite a fazer é adicionar fontes para o seu site, 355 00:17:17,040 --> 00:17:22,079 que é uma maneira muito fácil de fazê-lo bonita e de distinguir o seu conjunto 356 00:17:22,079 --> 00:17:24,460 de todos os outros é se ele tem uma pia batismal agradável, ou se tem um bom 357 00:17:24,460 --> 00:17:27,790 coleção de fontes. 358 00:17:27,790 --> 00:17:31,410 Google Web Fonts é agradável ao contrário de outros bibliotecas, no sentido de que é um 359 00:17:31,410 --> 00:17:33,490 instalação realmente guiada. 360 00:17:33,490 --> 00:17:38,680 >> Então, se você seguir o link, é google.com / fonts, eu acredito. 361 00:17:38,680 --> 00:17:41,100 Se você seguir isto, você pode escolher o seu tipo de letra. 362 00:17:41,100 --> 00:17:44,410 Você pode escolher do lado esquerdo da espessura, inclinação, et cetera. 363 00:17:44,410 --> 00:17:48,970 E então, uma vez que você tenha escolhido um, você pode clicar em uso rápido. 364 00:17:48,970 --> 00:17:49,820 Bem ali. 365 00:17:49,820 --> 00:17:51,590 Canto inferior direito da caixa. 366 00:17:51,590 --> 00:17:54,380 367 00:17:54,380 --> 00:17:56,700 >> E, em seguida, role para baixo. 368 00:17:56,700 --> 00:17:59,600 369 00:17:59,600 --> 00:18:02,650 Primeiro de tudo, eles dão-lhe o CSS que você precisa realmente ligar para ele. 370 00:18:02,650 --> 00:18:03,330 É ali mesmo. 371 00:18:03,330 --> 00:18:05,170 Você pode simplesmente copiar e colar que dentro 372 00:18:05,170 --> 00:18:07,250 E a coisa agradável sobre este é na verdade você não precisa mesmo de 373 00:18:07,250 --> 00:18:08,340 baixar o arquivo. 374 00:18:08,340 --> 00:18:11,170 >> O que ele vai fazer é que vai de ligação para a versão do Google do mesmo. 375 00:18:11,170 --> 00:18:14,130 Então, de volta para o que isso significa. 376 00:18:14,130 --> 00:18:18,270 Isso significa que quando um usuário download de seu arquivo - 377 00:18:18,270 --> 00:18:22,300 transfere sua página HTML - o HTML página vai referenciar este arquivo. 378 00:18:22,300 --> 00:18:26,790 >> Então, o computador vai ver, oh, ele está hospedado no google.com em vez 379 00:18:26,790 --> 00:18:28,170 do que em theirsite.com. 380 00:18:28,170 --> 00:18:30,370 Deixe-me ir pedir ao Google para esse arquivo. 381 00:18:30,370 --> 00:18:32,800 E, em seguida, vai para incluir praticamente como se se tratasse de um 382 00:18:32,800 --> 00:18:35,584 parte do seu próprio site. 383 00:18:35,584 --> 00:18:36,540 >> TOMAS REIMERS: Cool. 384 00:18:36,540 --> 00:18:40,980 E uma vez que você incluir isso, então a incluí-lo em seu CSS, dá-lhe 385 00:18:40,980 --> 00:18:41,830 a linha real. 386 00:18:41,830 --> 00:18:45,188 Então, você define a família de fontes propriedade igual ao nome da sua fonte. 387 00:18:45,188 --> 00:18:47,936 388 00:18:47,936 --> 00:18:50,440 >> MIKE RIZZO: OK. 389 00:18:50,440 --> 00:18:52,220 Então, nós acabamos com CSS. 390 00:18:52,220 --> 00:18:57,230 E alguns de vocês podem estar pensando, bem, tivemos alguns CSS em CS50 Finanças. 391 00:18:57,230 --> 00:19:00,390 Mas biblioteca CSS foi de bootstrap. 392 00:19:00,390 --> 00:19:05,190 Nós realmente incluir Bootstrap um pouco mais tarde, em JavaScript, porque com 393 00:19:05,190 --> 00:19:09,660 a biblioteca Bootstrap CSS também vem com um monte de JavaScript que 394 00:19:09,660 --> 00:19:12,060 Bootstrap ou Twitter - que fez Bootstrap - 395 00:19:12,060 --> 00:19:15,426 usa para gerenciar todo o seu CSS. 396 00:19:15,426 --> 00:19:19,592 >> TOMAS REIMERS: Alguém tem alguma perguntas até agora cerca de CSS em geral? 397 00:19:19,592 --> 00:19:20,723 Nós somos bons? 398 00:19:20,723 --> 00:19:21,216 Incrível. 399 00:19:21,216 --> 00:19:22,495 >> MIKE RIZZO: Awesome. 400 00:19:22,495 --> 00:19:25,136 >> TOMAS REIMERS: Então se movendo para JavaScript. 401 00:19:25,136 --> 00:19:27,900 >> MIKE RIZZO: Então, nós queríamos falar sobre jQuery para começar. 402 00:19:27,900 --> 00:19:30,780 Alguém ouviu falar de jQuery antes ou usou? 403 00:19:30,780 --> 00:19:32,180 Sim, um casal? 404 00:19:32,180 --> 00:19:36,000 Então, se você trabalhar apenas com nativa JavaScript, você vai encontrar-se 405 00:19:36,000 --> 00:19:41,000 digitando um monte de seletores de comprimento muito. 406 00:19:41,000 --> 00:19:44,400 Então, o jQuery faz é que fornece um invólucro agradável para o JavaScript 407 00:19:44,400 --> 00:19:48,180 linguagem que permite que você facilmente selecionar e manipular diferentes elementos 408 00:19:48,180 --> 00:19:52,470 dentro do modelo de objeto de documento página web ou o DOM, o que eu acho 409 00:19:52,470 --> 00:19:54,290 Vocês ouviram falar de em palestra neste momento. 410 00:19:54,290 --> 00:19:57,550 >> TOMAS REIMERS: Se você ainda não ouviu falar ou palestra, se você ainda não assistiu 411 00:19:57,550 --> 00:20:01,870 ainda, o Document Object Model é basicamente como as coisas estão representados. 412 00:20:01,870 --> 00:20:05,290 Assim HTML tipo de parece com uma árvore quando você realmente retirá-la. 413 00:20:05,290 --> 00:20:06,850 Você tem o elemento HTML no topo. 414 00:20:06,850 --> 00:20:07,560 Você tem a cabeça eo corpo. 415 00:20:07,560 --> 00:20:09,500 >> E, em seguida, dentro de que você tem tudo o resto. 416 00:20:09,500 --> 00:20:10,660 Isso é referido como o DOM - 417 00:20:10,660 --> 00:20:12,120 Document Object Model. 418 00:20:12,120 --> 00:20:16,090 Assim, um modelo que representa objectos o documento é uma maneira fácil de pensar 419 00:20:16,090 --> 00:20:18,560 sobre isso. 420 00:20:18,560 --> 00:20:22,520 E um dos grande coisa sobre jQuery é ele realmente faz travessia 421 00:20:22,520 --> 00:20:26,460 isso e manipular elementos dentro que incrivelmente simples. 422 00:20:26,460 --> 00:20:30,300 >> Assim, simples, de facto, que a maioria dos JavaScript bibliotecas ou, se não o 423 00:20:30,300 --> 00:20:34,200 maioria, a grande maioria dos queridos você vai ver realmente necessitam jQuery assim 424 00:20:34,200 --> 00:20:37,530 que eles podem executar-se simplesmente porque se você não tem jQuery, você 425 00:20:37,530 --> 00:20:40,540 iria perder muito tempo tentando descobrir como selecionar certo 426 00:20:40,540 --> 00:20:43,660 elementos e como fazer outras coisas. 427 00:20:43,660 --> 00:20:47,950 E a outra grande coisa sobre jQuery é que é cross browser compatível. 428 00:20:47,950 --> 00:20:51,550 >> Então lembre-se de volta quando dissemos que nem todos os navegadores implementar 429 00:20:51,550 --> 00:20:53,100 as coisas da mesma maneira? 430 00:20:53,100 --> 00:20:55,120 Isto é verdadeiro mesmo em JavaScript. 431 00:20:55,120 --> 00:20:58,220 E uma das grandes coisas sobre jQuery é que detectará o 432 00:20:58,220 --> 00:21:00,300 e detectar o navegador método adequado. 433 00:21:00,300 --> 00:21:03,420 >> Então, se você precisa selecionar um elemento, Internet Explorer pode dizer que você é 434 00:21:03,420 --> 00:21:05,770 deveria fazer dessa forma. 435 00:21:05,770 --> 00:21:08,300 Firefox pode dizer o correto caminho é por aqui. 436 00:21:08,300 --> 00:21:09,710 jQuery não importa. 437 00:21:09,710 --> 00:21:12,550 Quando você diz a jQuery para selecionar um elemento que vai descobrir como é 438 00:21:12,550 --> 00:21:16,290 deveria fazê-lo dentro do navegador da usuário está atualmente em, em seguida, fazer 439 00:21:16,290 --> 00:21:18,584 dessa forma. 440 00:21:18,584 --> 00:21:22,650 >> MIKE RIZZO: Então não vamos falar sobre o uso de jQuery um pouco. 441 00:21:22,650 --> 00:21:27,670 Assim como PHP, jQuery tem uma especial carinho para o cifrão. 442 00:21:27,670 --> 00:21:30,880 Então você verá que qualquer jQuery - 443 00:21:30,880 --> 00:21:32,060 assim, não todos. 444 00:21:32,060 --> 00:21:35,210 Às vezes você pode substituir o dólar assinar com a palavra jQuery. 445 00:21:35,210 --> 00:21:38,980 Mas, geralmente, só porque ele é mais curto, sempre que você vê jQuery sendo 446 00:21:38,980 --> 00:21:41,420 usado vai ser com um cifrão. 447 00:21:41,420 --> 00:21:47,030 >> Então, aqui estamos apenas mostrando um começo seletor para um elemento no DOM. 448 00:21:47,030 --> 00:21:52,850 Aqui, temos o cifrão seguido por parênteses abertos e então cita. 449 00:21:52,850 --> 00:21:56,130 E dentro das aspas ir nossos seletores para os diferentes elementos. 450 00:21:56,130 --> 00:21:59,810 Assim como em CSS, precisávamos de seletores para ser capaz de estilo diferentes elementos 451 00:21:59,810 --> 00:22:00,840 dentro da página. 452 00:22:00,840 --> 00:22:06,555 Esses diferentes seletores traduzem exatamente em jQuery e JavaScript, 453 00:22:06,555 --> 00:22:07,820 na sua maior parte. 454 00:22:07,820 --> 00:22:10,120 >> Portanto, temos aqui um foo ponto. 455 00:22:10,120 --> 00:22:14,780 Então, se você lembrar da aula, o ponto significa apenas a classe. 456 00:22:14,780 --> 00:22:18,850 Então, nós estamos selecionando elemento com a classe foo. 457 00:22:18,850 --> 00:22:22,670 Então, se eu ir em frente e abrir a nossa JavaScript consola aqui muito rapidamente 458 00:22:22,670 --> 00:22:26,830 apenas demonstrar que, se eu digitar o cifrão, vemos que é alguma 459 00:22:26,830 --> 00:22:28,090 função que vem à tona. 460 00:22:28,090 --> 00:22:29,420 E está apenas definido por jQuery. 461 00:22:29,420 --> 00:22:32,120 >> TOMAS REIMERS: Para aqueles de vocês desconhecido, o console é uma ferramenta 462 00:22:32,120 --> 00:22:35,430 dentro Chrome, que permite que você, basicamente, execute JavaScript no 463 00:22:35,430 --> 00:22:36,450 página atual. 464 00:22:36,450 --> 00:22:39,420 Isso você vai encontrar incrivelmente útil quando na verdade você está depurando e você 465 00:22:39,420 --> 00:22:42,400 precisa ser como, o que é o atual valor de alguma variável global ou o que 466 00:22:42,400 --> 00:22:43,910 é outra coisa? 467 00:22:43,910 --> 00:22:47,620 É uma espécie de como GDB com exceção que você pode realmente 468 00:22:47,620 --> 00:22:51,600 manipular elementos na página com lo de uma forma muito mais fácil. 469 00:22:51,600 --> 00:22:55,080 E também não, basicamente, verifique com você antes que ele faz qualquer coisa. 470 00:22:55,080 --> 00:22:58,660 >> Assim, enquanto, GDB pode ser como, você está certeza de que deseja executar o próximo passo? 471 00:22:58,660 --> 00:22:59,830 O console é em real. 472 00:22:59,830 --> 00:23:03,690 Assim como a página web está prestando e fazendo tudo o que está fazendo, o 473 00:23:03,690 --> 00:23:05,720 conselho de também correr ao lado dele. 474 00:23:05,720 --> 00:23:08,330 E você pode colocar o código em imputar que console, que será 475 00:23:08,330 --> 00:23:09,260 ser executado na página. 476 00:23:09,260 --> 00:23:12,190 >> MIKE RIZZO: Então para entrar no console, Eu acho que eu deveria brevemente 477 00:23:12,190 --> 00:23:13,750 mencionar como fazer isso. 478 00:23:13,750 --> 00:23:17,850 Nos últimos problemas que você pode ter usado Chrome inspecionar elemento 479 00:23:17,850 --> 00:23:20,440 funções ou página view source - 480 00:23:20,440 --> 00:23:23,870 e aqueles que são acessíveis apenas por direito clique na página ou de algum 481 00:23:23,870 --> 00:23:28,430 elemento e fazer ou inspecionar elemento ou página de origem vista. 482 00:23:28,430 --> 00:23:31,190 Também pode acessar o JavaScript console diretamente por 483 00:23:31,190 --> 00:23:33,630 escolher inspecionar elemento. 484 00:23:33,630 --> 00:23:37,930 Consola Então você acabou de bater sobre o lado direito. 485 00:23:37,930 --> 00:23:41,900 >> Alternativamente, você poderia também ter ido para o canto superior direito, 486 00:23:41,900 --> 00:23:46,820 que é cortado na tela onde tem as três barras horizontais. 487 00:23:46,820 --> 00:23:52,010 E você ir até ferramentas e então consola JavaScript 488 00:23:52,010 --> 00:23:53,240 aqui onde pode ver - 489 00:23:53,240 --> 00:23:54,370 pelo menos no Windows - 490 00:23:54,370 --> 00:23:59,680 o atalho é o Controle de Mudança J. Então se quiséssemos selecionar um elemento 491 00:23:59,680 --> 00:24:06,060 nesta página, assim como eu mostrei antes, fazemos sinal de dólar parênteses abertas 492 00:24:06,060 --> 00:24:08,180 e, em seguida, cita. 493 00:24:08,180 --> 00:24:11,750 >> Uma coisa interessante é, em geral, aspas simples e aspas duplas são 494 00:24:11,750 --> 00:24:12,370 trocável. 495 00:24:12,370 --> 00:24:16,050 Então, um monte de gente só usar único aspas, porque eles são mais rápidos para digitar 496 00:24:16,050 --> 00:24:19,780 de aspas, porque você não tem que segurar a tecla Shift pressionada. 497 00:24:19,780 --> 00:24:21,770 Então eu vou fazer isso agora. 498 00:24:21,770 --> 00:24:24,510 >> Então, eu quero selecionar algo com classe. 499 00:24:24,510 --> 00:24:27,200 Container, só porque eu sei que é algo que está em nosso 500 00:24:27,200 --> 00:24:28,740 página da web agora. 501 00:24:28,740 --> 00:24:29,520 E eu pressione Enter. 502 00:24:29,520 --> 00:24:31,670 E podemos ver que ele selecionou. 503 00:24:31,670 --> 00:24:34,990 Assim, ele mostra-se que retornou esse objeto. 504 00:24:34,990 --> 00:24:36,620 Então, isso é uma seleção básica. 505 00:24:36,620 --> 00:24:40,080 Se quiséssemos realmente manipulá-lo, você teria que chamar algo 506 00:24:40,080 --> 00:24:43,925 em que a selecção, a qual vamos entrar mais tarde. 507 00:24:43,925 --> 00:24:49,030 >> TOMAS REIMERS: Então, só de olhar para esse mais em profundidade, isso não é diferente 508 00:24:49,030 --> 00:24:52,245 do que as chamadas de função que fizemos em C. O nome da função aqui é um 509 00:24:52,245 --> 00:24:52,580 pouco estranho. 510 00:24:52,580 --> 00:24:55,640 É sinal de dólar. 511 00:24:55,640 --> 00:24:57,010 É apenas um nome de uma função. 512 00:24:57,010 --> 00:24:58,810 Não há nada especial sobre ele. 513 00:24:58,810 --> 00:25:00,450 >> Temos parênteses abertos. 514 00:25:00,450 --> 00:25:03,880 Então, nós temos o nosso único argumento, que neste caso, passa a ser uma string, 515 00:25:03,880 --> 00:25:05,680 que é um selector para ele. 516 00:25:05,680 --> 00:25:08,130 E, em seguida, temos a nossa parêntese fechado. 517 00:25:08,130 --> 00:25:09,960 É isso aí. 518 00:25:09,960 --> 00:25:11,500 >> Não é que muito diferente. 519 00:25:11,500 --> 00:25:12,900 Embora, ele se parece muito estranho. 520 00:25:12,900 --> 00:25:17,220 E isso pode ser, de certa forma, uma degola apontam para um monte de pessoas. 521 00:25:17,220 --> 00:25:21,460 >> MIKE RIZZO: Então, da mesma forma, se quiséssemos para selecionar um elemento que tem um ID, 522 00:25:21,460 --> 00:25:23,470 Agora queremos selecionar por ID em vez de classe. 523 00:25:23,470 --> 00:25:28,080 Seria uma coisa semelhante em que basta fazer o sinal afiada para ID. 524 00:25:28,080 --> 00:25:33,576 Então, nós estamos selecionando aqui tudo elementos que têm bar ID. 525 00:25:33,576 --> 00:25:35,400 >> TOMAS REIMERS: E isso se estende. 526 00:25:35,400 --> 00:25:36,450 Isso se estende CSS. 527 00:25:36,450 --> 00:25:42,260 Assim como em CSS, você pode selecionar todos ligações, que têm a classe foo. 528 00:25:42,260 --> 00:25:43,420 Aqui, é a mesma coisa. 529 00:25:43,420 --> 00:25:52,750 >> Você poderia fazer a.foo, que selecionaria todos os vínculos com o foo classe. 530 00:25:52,750 --> 00:25:58,860 Você poderia fazer um bar acentuada, o que faria selecione o link com a barra de ID e assim 531 00:25:58,860 --> 00:25:59,770 e por aí fora. 532 00:25:59,770 --> 00:26:02,120 Qualquer seletor CSS é um válido seletor jQuery. 533 00:26:02,120 --> 00:26:03,370 >> MIKE RIZZO: Yeah. 534 00:26:03,370 --> 00:26:07,996 535 00:26:07,996 --> 00:26:11,460 OK, então agora vamos entrar um pouco de manipulação que pode fazer com 536 00:26:11,460 --> 00:26:12,870 nossa jQuery. 537 00:26:12,870 --> 00:26:19,280 Então jQuery tem um tipo particular de notação onde nós apenas usar 538 00:26:19,280 --> 00:26:20,170 um ponto no final. 539 00:26:20,170 --> 00:26:23,340 E você pode pensar nisso como em C como tínhamos diferentes estruturas. 540 00:26:23,340 --> 00:26:27,110 E para ir para essas estruturas, você faria usar um ponto de entrar neles. 541 00:26:27,110 --> 00:26:28,480 >> Isto é, tipo, uma coisa semelhante. 542 00:26:28,480 --> 00:26:33,570 Só que agora temos funções dentro desta seletor que podemos chamar disso. 543 00:26:33,570 --> 00:26:38,640 Então, aqui, o primeiro exemplo você pode ver é um seletor CSS. 544 00:26:38,640 --> 00:26:45,290 E, basicamente, o que isso faz é aplica-se o primeiro elemento do CSS para esta 545 00:26:45,290 --> 00:26:46,230 coisa que você selecionou - 546 00:26:46,230 --> 00:26:47,720 esse elemento que você selecionou - 547 00:26:47,720 --> 00:26:49,290 com o valor que. 548 00:26:49,290 --> 00:26:55,390 >> TOMAS REIMERS: Então uma tradução fácil de que seria se jQuery, basicamente, 549 00:26:55,390 --> 00:26:57,790 só tomou foo. 550 00:26:57,790 --> 00:27:05,480 E, em seguida, em CSS disse, cor vermelha e perto. 551 00:27:05,480 --> 00:27:06,670 É a mesma idéia. 552 00:27:06,670 --> 00:27:08,800 O que é feito é que é selecionado todos os elementos foo. 553 00:27:08,800 --> 00:27:10,170 E então ele é aplicado. 554 00:27:10,170 --> 00:27:15,884 Mais ou menos, a cor da propriedade é igual ao vermelho. 555 00:27:15,884 --> 00:27:21,070 >> MIKE RIZZO: Da mesma forma, também podemos alterar o conteúdo real do que é 556 00:27:21,070 --> 00:27:24,870 mostrando no código HTML da página, que é muito legal, porque significa que o 557 00:27:24,870 --> 00:27:28,095 páginas da web podem agora ser completamente dinâmico e não tem que ser estático 558 00:27:28,095 --> 00:27:31,660 que você imprima usando PHP no início de 559 00:27:31,660 --> 00:27:33,320 a página que está sendo carregado. 560 00:27:33,320 --> 00:27:36,810 Então, aqui, se quiséssemos alterar a HTML real da página, teríamos agora 561 00:27:36,810 --> 00:27:43,550 chamar a função HTML, que então apenas inserções tudo o que especificam em 562 00:27:43,550 --> 00:27:45,390 esse elemento que seleccionado. 563 00:27:45,390 --> 00:27:49,810 Então, aqui estamos selecionando elemento com foo classe e, em seguida, dizendo que é HTML 564 00:27:49,810 --> 00:27:52,200 é agora Olá mundo. 565 00:27:52,200 --> 00:27:55,600 >> TOMAS REIMERS: E quando você pensa sobre o que são aplicações úteis de 566 00:27:55,600 --> 00:28:00,800 este, este CSS, a primeira coisa que você pode começar a pensar é 567 00:28:00,800 --> 00:28:03,070 em termos de mesmo menus suspensos. 568 00:28:03,070 --> 00:28:08,350 Você pode começar a fazer coisas como, quando um usuário passa o mouse sobre a parte de cima 569 00:28:08,350 --> 00:28:11,970 of a down gota, você quer fazer a parte inferior visível. 570 00:28:11,970 --> 00:28:12,540 Certo? 571 00:28:12,540 --> 00:28:15,610 >> Assim, em CSS, temos propriedades fazer algo visível. 572 00:28:15,610 --> 00:28:19,330 Coisas como exibição cólon nenhum tornaria invisível. 573 00:28:19,330 --> 00:28:21,190 Bloco de exibição seria torná-lo visível. 574 00:28:21,190 --> 00:28:25,860 Ou mesmo se você quiser ir mais simples, você tem coisas como iguais visibilidade 575 00:28:25,860 --> 00:28:27,520 visível, ea visibilidade é igual a escondido. 576 00:28:27,520 --> 00:28:30,330 577 00:28:30,330 --> 00:28:34,780 >> E você pode começar a implementar as coisas como menus drop-down à direita 578 00:28:34,780 --> 00:28:38,410 depois de passar a idéia de como você pode descobrir quando esta se abre, 579 00:28:38,410 --> 00:28:39,850 que nós vamos passar por muito brevemente. 580 00:28:39,850 --> 00:28:42,160 Mas podemos começar a ver aplicações deste. 581 00:28:42,160 --> 00:28:45,540 Em um sentido similar, se você fosse para tentar e implementar, digamos, um bate-papo 582 00:28:45,540 --> 00:28:48,620 motor e você quer fazer um pouco de balão de fala venha sempre que você tem 583 00:28:48,620 --> 00:28:52,880 tem uma nova mensagem, uma vez que você começa a nova mensagem, você pode fazer um pouco 584 00:28:52,880 --> 00:28:55,890 speech bubble chegar alterando o código HTML da página, certo? 585 00:28:55,890 --> 00:29:00,540 Acrescentando que a bolha do discurso adicional com o texto extra lá. 586 00:29:00,540 --> 00:29:01,140 Sim? 587 00:29:01,140 --> 00:29:07,750 >> AUDIÊNCIA: Então você iria incorporar isso dentro o código HTML na como uma espécie de 588 00:29:07,750 --> 00:29:10,534 [Inaudível]? 589 00:29:10,534 --> 00:29:12,940 >> MIKE RIZZO: Certo. 590 00:29:12,940 --> 00:29:16,190 Sim, nós vamos chegar a isso daqui a pouco. 591 00:29:16,190 --> 00:29:18,810 Sim, é um semelhante pouco para PHP. 592 00:29:18,810 --> 00:29:21,240 Não é exatamente similar. 593 00:29:21,240 --> 00:29:24,730 >> Uma boa distinção a fazer é o que este é realmente a edição quando editamos 594 00:29:24,730 --> 00:29:28,480 a página, porque não vai ser editando o arquivo real que está sendo 595 00:29:28,480 --> 00:29:31,380 mantidas no servidor, porque o mundo não deve ter permissão 596 00:29:31,380 --> 00:29:32,610 para editar seus arquivos. 597 00:29:32,610 --> 00:29:36,080 Isto é apenas a edição que está na página eo que está sendo exibido dentro 598 00:29:36,080 --> 00:29:36,950 o navegador. 599 00:29:36,950 --> 00:29:40,340 Então, se você fosse para recarregar a página depois, dizer, a exclusão de algo como nós 600 00:29:40,340 --> 00:29:44,730 ver o que podemos fazer com a chamada de remoção, que coisa iria reaparecer. 601 00:29:44,730 --> 00:29:48,590 >> TOMAS REIMERS: Então, uma maneira de pensar sobre isso é se eu sou o seu computador e 602 00:29:48,590 --> 00:29:50,170 Mike é, de certa forma, o servidor. 603 00:29:50,170 --> 00:29:53,850 O que vai acontecer é que eu vou pedir Mike, hey, eu posso ter uma cópia do 604 00:29:53,850 --> 00:29:54,630 esta página web? 605 00:29:54,630 --> 00:29:56,190 E ele vai me dar uma cópia do mesmo. 606 00:29:56,190 --> 00:29:57,430 >> Não, não é a coisa mais originais. 607 00:29:57,430 --> 00:29:58,620 É apenas uma cópia. 608 00:29:58,620 --> 00:30:00,450 E então, como seria, oh, há JavaScript aqui. 609 00:30:00,450 --> 00:30:02,450 Claramente, eu deveria editar a página para ser assim. 610 00:30:02,450 --> 00:30:04,250 E eu estou editando o seu exemplar. 611 00:30:04,250 --> 00:30:05,920 >> Mas isso não está afetando a cópia real. 612 00:30:05,920 --> 00:30:08,480 E se eu fosse para lhe perguntar novamente atualizar a página, - 613 00:30:08,480 --> 00:30:10,060 hey, eu posso ter outra cópia limpa - 614 00:30:10,060 --> 00:30:11,440 ele vai me dar outra cópia limpa. 615 00:30:11,440 --> 00:30:14,240 E então, eu vou fazer a mesma coisa como, oh, este JS aqui que diz 616 00:30:14,240 --> 00:30:14,866 para editar este. 617 00:30:14,866 --> 00:30:17,460 E eu vou continuar fazendo isso. 618 00:30:17,460 --> 00:30:20,930 >> MIKE RIZZO: Então, uma coisa muito legal que você pode fazer com jQuery é 619 00:30:20,930 --> 00:30:24,350 realmente adicionar diferentes tipos de animações para a sua página. 620 00:30:24,350 --> 00:30:27,440 Eu não sei se você já viu onde você está tentando um preenchimento de um formulário 621 00:30:27,440 --> 00:30:31,250 on-line e você não preencher as coisas corretamente. 622 00:30:31,250 --> 00:30:33,440 Então, uma pequena coisa desliza para baixo no topo e diz que 623 00:30:33,440 --> 00:30:34,820 não tiver feito isso corretamente. 624 00:30:34,820 --> 00:30:36,260 Por favor, tente novamente. 625 00:30:36,260 --> 00:30:37,890 E, em seguida, ele pode até mesmo deslizar para cima. 626 00:30:37,890 --> 00:30:40,710 >> Acontece que jQuery foi construído em funções que tornam tudo isto 627 00:30:40,710 --> 00:30:44,180 animação muito, muito fácil. 628 00:30:44,180 --> 00:30:46,750 Portanto, não é o primeiro a desaparecer função fora, o que 629 00:30:46,750 --> 00:30:47,710 você pode ligar em alguma coisa. 630 00:30:47,710 --> 00:30:55,650 E é uma maneira de mudar o CSS de esse elemento de uma forma animada. 631 00:30:55,650 --> 00:30:58,480 Por isso, leva tudo o elemento você chamá-lo desaparecer diante. 632 00:30:58,480 --> 00:31:03,990 E, em seguida, muda lentamente a sua opacidade até que ele vai completamente transparente. 633 00:31:03,990 --> 00:31:07,330 >> TOMAS REIMERS: O outro populares é deslizar para baixo, o que irá fazer 634 00:31:07,330 --> 00:31:08,800 algo aparecer, deslizando-a para baixo. 635 00:31:08,800 --> 00:31:12,840 Assim, no caso de o menu para baixo, outra vez, quando aprendemos a detectar 636 00:31:12,840 --> 00:31:15,310 quando este foi pairava sobre, você poderia apenas dizer que este fundo 637 00:31:15,310 --> 00:31:16,910 parte deslizar para baixo agora. 638 00:31:16,910 --> 00:31:19,270 E então, parece deslizando para baixo. 639 00:31:19,270 --> 00:31:22,042 640 00:31:22,042 --> 00:31:26,590 >> MIKE RIZZO: E então, se você só tem algum tipo de animação em mente que 641 00:31:26,590 --> 00:31:29,080 jQuery não necessariamente fornecer. 642 00:31:29,080 --> 00:31:32,690 Por exemplo, digamos que jQuery lhe fornecer um slide 643 00:31:32,690 --> 00:31:33,750 para baixo e deslize para cima. 644 00:31:33,750 --> 00:31:36,740 Bem, digamos que você queria deslizar algo da esquerda ou da 645 00:31:36,740 --> 00:31:39,880 o tipo certo de como o CS50 página principal faz sempre 646 00:31:39,880 --> 00:31:42,080 você vai a um novo painel. 647 00:31:42,080 --> 00:31:45,030 Você, então, provavelmente terá que implementá-lo usando o 648 00:31:45,030 --> 00:31:49,310 animar função dentro jQuery. 649 00:31:49,310 --> 00:31:51,350 >> Assim, da mesma forma, você só animar. 650 00:31:51,350 --> 00:31:55,850 E então, dentro dele é preciso uma dicionário dos diferentes valores 651 00:31:55,850 --> 00:31:57,340 que você deveria passar. 652 00:31:57,340 --> 00:32:06,960 Então, aqui, se quiséssemos animar o foo elemento de tal forma que a sua largura ou 653 00:32:06,960 --> 00:32:10,880 expande ou contrai a 80 pixels, dependendo do que é atualmente. 654 00:32:10,880 --> 00:32:14,100 Nós apenas passar isso como o argumento dentro dele. 655 00:32:14,100 --> 00:32:18,060 >> Animar também alguns outros argumentos que você poderia passá-lo, por exemplo, 656 00:32:18,060 --> 00:32:21,150 a velocidade da animação que você quer dar a ele. 657 00:32:21,150 --> 00:32:26,220 E para fazer isso, gostaria apenas de dizer Google rapidamente jQuery animar. 658 00:32:26,220 --> 00:32:31,710 E então, trazendo à tona esta página, você pode ver que tem um monte de diferente 659 00:32:31,710 --> 00:32:33,560 propriedades que você pode passar. 660 00:32:33,560 --> 00:32:35,990 >> E eu encorajá-lo - sempre que você vem através de algo que você não faz 661 00:32:35,990 --> 00:32:40,390 saber ou apenas quer saber mais sobre um determinado método que você pode chamar 662 00:32:40,390 --> 00:32:41,270 em alguma coisa - 663 00:32:41,270 --> 00:32:44,440 apenas o Google. jQuery é extremamente bem documentado. 664 00:32:44,440 --> 00:32:49,140 E muitas vezes há um grande número de exemplos que eles fornecem para você. 665 00:32:49,140 --> 00:32:52,470 Se rolar para baixo - 666 00:32:52,470 --> 00:32:53,720 caminho - 667 00:32:53,720 --> 00:32:57,660 668 00:32:57,660 --> 00:32:59,190 que podemos usar, também. 669 00:32:59,190 --> 00:33:02,480 >> Mais uma vez, quando um desenvolvedor realmente vai pela dificuldade de escrever um 670 00:33:02,480 --> 00:33:05,810 biblioteca, eles normalmente querem alguém para usá-lo. 671 00:33:05,810 --> 00:33:09,400 Assim, ao lado vai ser uma documentação. 672 00:33:09,400 --> 00:33:12,270 E que a documentação pode ser normalmente encontrados na página do projeto, que é 673 00:33:12,270 --> 00:33:14,970 por isso que te deu esse site original em o início, que liga você ao 674 00:33:14,970 --> 00:33:18,080 páginas do projeto para que você possa ver que a documentação. 675 00:33:18,080 --> 00:33:22,670 >> Normalmente, a página do projeto no caso de [inaudível], ele disse que o 676 00:33:22,670 --> 00:33:23,940 nomes das classes. 677 00:33:23,940 --> 00:33:27,250 No caso de JavaScript, dá o nome das funções. 678 00:33:27,250 --> 00:33:35,310 By the way, se deslocar até o topo, uma nota lateral rápida em funções é 679 00:33:35,310 --> 00:33:39,080 sempre que você vê uma função implementada assim com o disco 680 00:33:39,080 --> 00:33:43,800 colchetes no meio, o que significa que essa propriedade é opcional. 681 00:33:43,800 --> 00:33:44,750 Apenas um heads up. 682 00:33:44,750 --> 00:33:47,350 Eu vi um monte de perguntas sobre isso. 683 00:33:47,350 --> 00:33:50,370 >> Então, aqui podemos ver que o animado leva propriedades 684 00:33:50,370 --> 00:33:51,800 como um argumento necessário. 685 00:33:51,800 --> 00:33:54,870 E tudo o resto é opcional. 686 00:33:54,870 --> 00:33:56,136 Nota lateral - 687 00:33:56,136 --> 00:33:58,090 você pode pensar nisso, tipo de, como páginas do manual. 688 00:33:58,090 --> 00:34:04,275 As páginas mansão documentação para C e para um monte de outras coisas, também. 689 00:34:04,275 --> 00:34:11,020 >> MIKE RIZZO: Então, nós aprendemos como alterar CSS diferente na página, 690 00:34:11,020 --> 00:34:14,040 animá-lo e remover adicionar HTML. 691 00:34:14,040 --> 00:34:16,889 Mas um dos realmente mais poderoso coisas sobre JavaScript 692 00:34:16,889 --> 00:34:18,270 e especialmente jQuery - 693 00:34:18,270 --> 00:34:22,570 o que lhe permite fazer é responder a diferentes elementos que acontecem. 694 00:34:22,570 --> 00:34:25,380 Por exemplo, temos aqui um manipulador de eventos. 695 00:34:25,380 --> 00:34:28,210 E isso só significa que sempre que esta evento acontece, nós lidar com isso de uma 696 00:34:28,210 --> 00:34:29,280 determinada maneira. 697 00:34:29,280 --> 00:34:35,159 >> Então, aqui, o evento genérico jQuery manipulador é o ponto em. 698 00:34:35,159 --> 00:34:42,949 E, em seguida, a primeira coisa que você forneceu é o evento que deveria 699 00:34:42,949 --> 00:34:43,810 ser escutado. 700 00:34:43,810 --> 00:34:45,610 Então, aqui, é o clique que estamos esperando. 701 00:34:45,610 --> 00:34:49,250 >> TOMAS REIMERS: Como alternativa, você tem em foco, que é muito popular. 702 00:34:49,250 --> 00:34:52,000 Então, de volta ao meu drop down idéia menu. 703 00:34:52,000 --> 00:34:54,239 Você teria a de cima em hover. 704 00:34:54,239 --> 00:34:56,096 E então você pode mudar isso. 705 00:34:56,096 --> 00:34:56,830 >> MIKE RIZZO: Certo. 706 00:34:56,830 --> 00:35:01,680 E então, quando isso acontece, ele só executa esta função que nós dar-lhe 707 00:35:01,680 --> 00:35:05,080 como um argumento e que ele alerta Olá ou oi. 708 00:35:05,080 --> 00:35:08,900 >> TOMAS REIMERS: Então, no caso de JavaScript, este é um lugar que precisa 709 00:35:08,900 --> 00:35:12,970 remover-nos de C. Nós podemos realmente assumir funções como argumentos. 710 00:35:12,970 --> 00:35:15,940 E há um monte de realmente formas complexas de fazer isso. 711 00:35:15,940 --> 00:35:17,940 Vamos promover uma maneira, o que é que você pode definir o 712 00:35:17,940 --> 00:35:19,270 funcionar ali. 713 00:35:19,270 --> 00:35:22,540 >> Então, quando você está pedindo por uma função como um parâmetro, você está basicamente apenas 714 00:35:22,540 --> 00:35:24,500 vai definir a função no local. 715 00:35:24,500 --> 00:35:27,090 E a maneira como você define uma função em JavaScript é você 716 00:35:27,090 --> 00:35:28,820 literalmente dizer função. 717 00:35:28,820 --> 00:35:30,130 Então, normalmente, o nome da função. 718 00:35:30,130 --> 00:35:32,510 Mas nós nunca vamos fazer referência esta função novamente. 719 00:35:32,510 --> 00:35:34,040 Então, nós deixá-lo sem nome. 720 00:35:34,040 --> 00:35:40,440 >> Em seguida, os parênteses, em seguida, o encaracolado chaves, e então o código dentro desse. 721 00:35:40,440 --> 00:35:42,540 Então, nós entendemos isso pode ser um pouco confuso. 722 00:35:42,540 --> 00:35:45,180 Então, nós damos-lhe a forma geral de o que um manipulador de eventos parece 723 00:35:45,180 --> 00:35:47,790 a seguir, o qual é em eventos. 724 00:35:47,790 --> 00:35:50,598 E então, o seu código dentro desse. 725 00:35:50,598 --> 00:35:52,478 >> MIKE RIZZO: Há algum perguntas sobre isso? 726 00:35:52,478 --> 00:35:54,818 Isso pode ser um pouco confuso a primeira vez que você vê-lo. 727 00:35:54,818 --> 00:35:57,550 >> TOMAS REIMERS: Você realmente quer abrir um arquivo e mostrar-lhes alguns 728 00:35:57,550 --> 00:35:58,155 jQuery agora? 729 00:35:58,155 --> 00:35:59,853 >> MIKE RIZZO: Sim, vamos fazer isso. 730 00:35:59,853 --> 00:36:00,256 OK. 731 00:36:00,256 --> 00:36:02,490 >> TOMAS REIMERS: Então agora estamos no aparelho. 732 00:36:02,490 --> 00:36:07,730 E o que nós fizemos é que tomamos a liberdade de criar tanto um index.html 733 00:36:07,730 --> 00:36:10,100 arquivo, que liga a um arquivo JavaScript. 734 00:36:10,100 --> 00:36:12,880 E podemos abrir o - 735 00:36:12,880 --> 00:36:15,170 sim. 736 00:36:15,170 --> 00:36:16,630 Bem, ele faz duas coisas. 737 00:36:16,630 --> 00:36:18,350 >> A primeira é a que liga a o arquivo JavaScript. 738 00:36:18,350 --> 00:36:21,250 E vamos ver que aqui em cima. 739 00:36:21,250 --> 00:36:25,340 Vemos que na cabeça do Documento HTML, particularmente. 740 00:36:25,340 --> 00:36:28,260 Então você verá que há que que, basicamente, dizer SRC, 741 00:36:28,260 --> 00:36:29,590 que representa a fonte. 742 00:36:29,590 --> 00:36:30,630 E essa é a URL. 743 00:36:30,630 --> 00:36:32,700 >> Então, aqui você pode dizer que nós temos incluído jQuery. 744 00:36:32,700 --> 00:36:34,290 E nós também incluímos scripts. 745 00:36:34,290 --> 00:36:40,630 A outra maneira de incluir JavaScript que você pode incluir um script embutido 746 00:36:40,630 --> 00:36:44,600 tag como temos na parte inferior onde diz tipo de script é um texto de JavaScript. 747 00:36:44,600 --> 00:36:46,960 >> Então, nós estamos dizendo, escuta, estamos a ponto de incluir um script. 748 00:36:46,960 --> 00:36:51,890 E o tipo de que o script é JavaScript, que é um tipo de texto. 749 00:36:51,890 --> 00:36:52,550 Muito simples. 750 00:36:52,550 --> 00:36:56,490 >> MIKE RIZZO: Então, isso, de certa forma, começa a sua pergunta sobre como nós incluímos 751 00:36:56,490 --> 00:37:02,340 JavaScript em nossos arquivos, porque quando nós tinha PHP, fazemos algo assim. 752 00:37:02,340 --> 00:37:07,570 E então, temos as nossas funções PHP - digamos que fazer estoques 753 00:37:07,570 --> 00:37:09,150 algo com que - 754 00:37:09,150 --> 00:37:10,490 vai lá. 755 00:37:10,490 --> 00:37:13,860 No entanto, agora temos as tags de script que damos a ela, que na verdade são 756 00:37:13,860 --> 00:37:19,470 parte do próprio HTML, porque não é fingindo ser um arquivo HTML como se 757 00:37:19,470 --> 00:37:25,070 é em PHP, porque se você realmente ir em e olhar para a fonte da página, 758 00:37:25,070 --> 00:37:28,430 você vai ver essas tags de script lá com o JavaScript associado 759 00:37:28,430 --> 00:37:29,800 deles em que. 760 00:37:29,800 --> 00:37:31,760 >> Então, se quiséssemos escrever algum JavaScript - 761 00:37:31,760 --> 00:37:37,110 vamos apenas dizer que queria mudar o corpo porque agora eu não tenho 762 00:37:37,110 --> 00:37:40,020 quaisquer outras marcas que eu realmente posso editar além corpo. 763 00:37:40,020 --> 00:37:42,450 Vamos apenas dizer que eu queria alterar o CSS de que. 764 00:37:42,450 --> 00:37:46,190 Então, vamos em frente e mudança a cor do que para o vermelho. 765 00:37:46,190 --> 00:37:47,380 >> Então eu salvar o arquivo. 766 00:37:47,380 --> 00:37:52,700 Vamos voltar à nossa página web, atualizar, e ele faz isso automaticamente 767 00:37:52,700 --> 00:37:55,920 porque não parece que ele esperou em tudo, porque não estávamos escutando 768 00:37:55,920 --> 00:37:59,450 para um evento ou qualquer coisa assim. 769 00:37:59,450 --> 00:38:02,800 >> TOMAS REIMERS: Então, se voltarmos a esse arquivo em particular - o HTML 770 00:38:02,800 --> 00:38:04,710 arquivo - o que você vai ver é que temos - 771 00:38:04,710 --> 00:38:06,810 lembre-se que este é carregado, de alguma forma, em ordem cronológica. 772 00:38:06,810 --> 00:38:09,910 Portanto, temos pela primeira vez a cabeça. ele carrega esses dois arquivos. 773 00:38:09,910 --> 00:38:10,800 Então vamos para o corpo. 774 00:38:10,800 --> 00:38:11,640 E vemos Olá mundo. 775 00:38:11,640 --> 00:38:13,030 Então prestamos Olá mundo. 776 00:38:13,030 --> 00:38:15,240 >> E então a última coisa que nós temos se temos a tag script. 777 00:38:15,240 --> 00:38:20,880 Assim, corre-se o tag script, porque é não dizendo-lhe para esperar por nada. 778 00:38:20,880 --> 00:38:24,700 E isso é o mais básico maneira de executar JavaScript. 779 00:38:24,700 --> 00:38:29,200 >> Com isso dito, você pode colocar o script marcar-se no cabeçalho apenas 780 00:38:29,200 --> 00:38:31,240 para mostrar esse ponto? 781 00:38:31,240 --> 00:38:34,450 782 00:38:34,450 --> 00:38:35,700 E executar isso. 783 00:38:35,700 --> 00:38:38,880 784 00:38:38,880 --> 00:38:41,070 Nós vamos perceber que ele não alterou a cor. 785 00:38:41,070 --> 00:38:44,210 E este é um dos problemas de JavaScript é que as coisas são carregados 786 00:38:44,210 --> 00:38:45,930 numa ordem cronológica. 787 00:38:45,930 --> 00:38:49,750 >> Assim, no momento em que este código estava correndo, foram selecionados - 788 00:38:49,750 --> 00:38:52,530 voltar - 789 00:38:52,530 --> 00:38:53,670 a tag corpo. 790 00:38:53,670 --> 00:38:57,560 A tag corpo ainda não existe porque JavaScript está em linha com HTML. 791 00:38:57,560 --> 00:39:01,790 Assim, o navegador é como selecionar corpo. 792 00:39:01,790 --> 00:39:02,760 Há ainda existe tal coisa. 793 00:39:02,760 --> 00:39:03,600 Assim, podemos ignorar isso. 794 00:39:03,600 --> 00:39:05,330 E nós continuar. 795 00:39:05,330 --> 00:39:07,200 >> E, então, definir uma tag body. 796 00:39:07,200 --> 00:39:09,670 Mas isso nunca é atualizado. 797 00:39:09,670 --> 00:39:12,560 Então, quando você está implementando roteiro etiquetas, certifique-se de colocar 798 00:39:12,560 --> 00:39:15,502 após a tag body. 799 00:39:15,502 --> 00:39:16,820 Próximo slide. 800 00:39:16,820 --> 00:39:17,830 >> MIKE RIZZO: OK. 801 00:39:17,830 --> 00:39:19,330 Portanto, mudou alguma coisa. 802 00:39:19,330 --> 00:39:21,910 Mas não parece que respondeu a nós em tudo, porque apenas uma espécie de 803 00:39:21,910 --> 00:39:24,150 fez isso assim que carregou a página. 804 00:39:24,150 --> 00:39:27,700 Então, agora, em vez de fazer isso, por que Não podemos adicionar um manipulador de eventos. 805 00:39:27,700 --> 00:39:31,020 >> Então, vamos fazer alguma coisa ao corpo outra vez. 806 00:39:31,020 --> 00:39:33,490 E vamos dizer que fazê-lo em - 807 00:39:33,490 --> 00:39:34,500 clique. 808 00:39:34,500 --> 00:39:35,750 Vamos adicionar uma função. 809 00:39:35,750 --> 00:39:38,270 810 00:39:38,270 --> 00:39:39,690 >> TOMAS REIMERS: Vamos mudar sua cor para vermelho novamente. 811 00:39:39,690 --> 00:39:40,000 Por que não? 812 00:39:40,000 --> 00:39:41,680 >> MIKE RIZZO: Sim, vamos mudar sua "cor para vermelho novamente. 813 00:39:41,680 --> 00:39:46,310 814 00:39:46,310 --> 00:39:46,900 Tudo bem. 815 00:39:46,900 --> 00:39:48,480 Então, vamos recarregar a página. 816 00:39:48,480 --> 00:39:49,530 OK, vamos ver - 817 00:39:49,530 --> 00:39:52,290 como esperado, ele não fica vermelho ainda. 818 00:39:52,290 --> 00:39:53,610 Mas, então, podemos ir em frente e clique nele. 819 00:39:53,610 --> 00:39:54,270 >> TOMAS REIMERS: E ele fica vermelho. 820 00:39:54,270 --> 00:39:56,090 >> MIKE RIZZO: E ele faz ficam vermelhos como o esperado. 821 00:39:56,090 --> 00:39:59,010 >> TOMAS REIMERS: E podemos ver como podemos começar a construir muito básico 822 00:39:59,010 --> 00:40:00,170 interação. 823 00:40:00,170 --> 00:40:03,850 Outras coisas que pode querer fazer é, se não quiser fazer o corpo 824 00:40:03,850 --> 00:40:07,230 cor vermelha, vamos fazer o HTML fundo de cor vermelha. 825 00:40:07,230 --> 00:40:08,480 Só assim é o mesmo CSS. 826 00:40:08,480 --> 00:40:19,960 827 00:40:19,960 --> 00:40:23,320 >> E quando nós mudá-lo, podemos ver isso efeito muito dramático de mudar o 828 00:40:23,320 --> 00:40:25,510 página inteira. 829 00:40:25,510 --> 00:40:29,100 Então, novamente, se você está implementando coisas, você pode ter um componente 830 00:40:29,100 --> 00:40:30,150 que se destina a ser clicado. 831 00:40:30,150 --> 00:40:32,710 Vamos dizer que um botão Sair e todo um outro componente, 832 00:40:32,710 --> 00:40:33,830 que se destina a reagir. 833 00:40:33,830 --> 00:40:35,755 Então, você deve remover uma janela quando isso acontece. 834 00:40:35,755 --> 00:40:39,341 835 00:40:39,341 --> 00:40:40,700 >> MIKE RIZZO: OK. 836 00:40:40,700 --> 00:40:42,200 Apenas como exemplo - 837 00:40:42,200 --> 00:40:44,400 você não consegue ver isso antes - 838 00:40:44,400 --> 00:40:47,500 Eu vou te mostrar o que parece como quando nós esconder alguma coisa. 839 00:40:47,500 --> 00:40:52,220 Então, eu vou em frente e não deslizar para cima. 840 00:40:52,220 --> 00:40:54,440 >> TOMAS REIMERS: Quer dispor que em um Tipo de parágrafo antes de fazer isso? 841 00:40:54,440 --> 00:40:55,132 >> MIKE RIZZO: OK. 842 00:40:55,132 --> 00:40:59,135 Sim, por que não fazemos isso apenas para que podemos selecioná-lo um pouco mais. 843 00:40:59,135 --> 00:41:00,490 >> TOMAS Reimers: e vamos dar-lhe uma classe. 844 00:41:00,490 --> 00:41:01,740 >> MIKE RIZZO: Yeah. 845 00:41:01,740 --> 00:41:06,575 846 00:41:06,575 --> 00:41:09,920 OK, então vamos ver. 847 00:41:09,920 --> 00:41:14,820 Em vez de selecionar o corpo real agora, eu vou selecionar tudo com 848 00:41:14,820 --> 00:41:18,780 Olá turma, que aqui nós só tem uma coisa. 849 00:41:18,780 --> 00:41:20,900 Assim, não devemos ter que preocupar com isso. 850 00:41:20,900 --> 00:41:23,080 >> Então, eu vou atualizá-lo. 851 00:41:23,080 --> 00:41:24,230 Eu vou em frente e clique nele. 852 00:41:24,230 --> 00:41:27,890 E isso, de certa forma, fez um slide estranho se coisa, o que não parecia que 853 00:41:27,890 --> 00:41:29,580 atraente. 854 00:41:29,580 --> 00:41:31,060 Geralmente, eles se parecem bastante agradável. 855 00:41:31,060 --> 00:41:32,720 Eu acho que, este - para alguns razão - não o fez. 856 00:41:32,720 --> 00:41:36,640 Vou apenas fazer um fade out assim você pode olhar para isso também. 857 00:41:36,640 --> 00:41:38,100 Muito mais agradável. 858 00:41:38,100 --> 00:41:41,150 >> E então, se eu abrir o JavaScript console novamente e queremos ver o que 859 00:41:41,150 --> 00:41:43,900 parece que quando se desvanece-lo dentro 860 00:41:43,900 --> 00:41:46,920 Agora, eu só chamo fade in nele. 861 00:41:46,920 --> 00:41:48,830 E ele desaparece para trás dentro 862 00:41:48,830 --> 00:41:56,150 >> Da mesma forma, poderíamos também passar um argumento para fade in ou fade out, 863 00:41:56,150 --> 00:41:57,640 o qual é, de certa forma, a velocidade do mesmo. 864 00:41:57,640 --> 00:42:02,220 Então, vamos seguir em frente e dizer que queremos que ele vá desaparecer lentamente dentro 865 00:42:02,220 --> 00:42:04,250 Então eu acho que ainda parecia muito rápido. 866 00:42:04,250 --> 00:42:06,180 Mas foi mais lento do que antes. 867 00:42:06,180 --> 00:42:10,340 >> TOMAS REIMERS: E se você quiser encontrar mais sobre estas coisas, mais uma vez, 868 00:42:10,340 --> 00:42:13,410 basta ir para a documentação do jQuery, que te dei, e ler 869 00:42:13,410 --> 00:42:13,735 através destes. 870 00:42:13,735 --> 00:42:15,790 Eles documentam suas funções incrivelmente bem. 871 00:42:15,790 --> 00:42:18,622 872 00:42:18,622 --> 00:42:19,570 >> MIKE RIZZO: OK. 873 00:42:19,570 --> 00:42:21,560 Então eu acho que vamos voltar a isso. 874 00:42:21,560 --> 00:42:23,490 E nós podemos falar sobre a nossa última página. 875 00:42:23,490 --> 00:42:24,690 Bem, podemos terminar com Bootstrap. 876 00:42:24,690 --> 00:42:27,140 E então nós vamos abri-lo para algumas perguntas. 877 00:42:27,140 --> 00:42:30,180 E se vocês tem alguma idéia de que que você gostaria de tentar jogar para cima e ver 878 00:42:30,180 --> 00:42:34,150 se podemos implementá-los com JavaScript rapidamente. 879 00:42:34,150 --> 00:42:37,890 >> Então, muito rapidamente sobre Bootstrap, que foi automaticamente incluído no 880 00:42:37,890 --> 00:42:41,700 o seu último conjunto de problemas na pasta CSS e, na verdade, ligada no seu 881 00:42:41,700 --> 00:42:43,190 header.php. 882 00:42:43,190 --> 00:42:46,740 Então, você poderia ter acrescentado as classes que são definidas dentro Bootstrap para ele. 883 00:42:46,740 --> 00:42:50,490 E teria um estilo automaticamente essas coisas de acordo. 884 00:42:50,490 --> 00:42:54,550 >> TOMAS REIMERS: Então Bootstrap é muito coisa mágica desenvolvido pelas pessoas 885 00:42:54,550 --> 00:42:55,340 no Twitter. 886 00:42:55,340 --> 00:42:57,230 E o que era para fazer era - 887 00:42:57,230 --> 00:43:00,740 antes de sites foram realmente difícil fazer uma boa aparência, especialmente quando tivemos 888 00:43:00,740 --> 00:43:02,200 um monte de componentes comuns. 889 00:43:02,200 --> 00:43:04,770 Então, um monte de botões no web parecia o mesmo. 890 00:43:04,770 --> 00:43:08,960 >> Um grande número de campos de texto podem ser feitas para parece melhor do que o texto padrão 891 00:43:08,960 --> 00:43:13,620 campo você provavelmente sabe de verdade sites antigos ou muito mal feita 892 00:43:13,620 --> 00:43:18,210 sites, que apenas se parecem com literal caixas de texto, sem qualquer forma de texto 893 00:43:18,210 --> 00:43:21,190 sombra ou qualquer espécie de bom esboço. 894 00:43:21,190 --> 00:43:24,540 Então, o que fizemos foi Bootstrap ele disse, bem, Nós temos muitos estilos comuns. 895 00:43:24,540 --> 00:43:28,210 Por que não fazer um conjunto comum de CSS e um conjunto comum de JavaScript como 896 00:43:28,210 --> 00:43:32,210 bem, o que pode denominá-lo como está e que pode dar às pessoas coisas como queda 897 00:43:32,210 --> 00:43:34,610 down menus, o que pode dar às pessoas coisas como modais. 898 00:43:34,610 --> 00:43:38,580 >> Modal é o que aparece sobre a página sempre que for estritamente falando 899 00:43:38,580 --> 00:43:41,090 algo, que ainda inibe interação até que você 900 00:43:41,090 --> 00:43:43,110 interagir com ele. 901 00:43:43,110 --> 00:43:45,820 Algo como isto é, tem a certeza que deseja excluir esta coisa? 902 00:43:45,820 --> 00:43:49,100 Você realmente não pode fazer mais nada até que você diga sim ou não. 903 00:43:49,100 --> 00:43:52,720 >> Levou tudo isso e embalados junto e disse: aqui vamos nós. 904 00:43:52,720 --> 00:43:54,630 As pessoas podem agora usar isso. 905 00:43:54,630 --> 00:43:56,830 E você pode encontrá-lo mais em getbootstrap.com. 906 00:43:56,830 --> 00:44:00,480 Foi automaticamente incluídos dentro o seu último conjunto de problemas. 907 00:44:00,480 --> 00:44:04,160 E você é mais do que bem-vindos para usá-lo em seu projeto final. 908 00:44:04,160 --> 00:44:06,950 E se você quiser seguir que ligação para obter Bootstrap. 909 00:44:06,950 --> 00:44:10,590 910 00:44:10,590 --> 00:44:15,700 >> Você vai ver aqui é a Bootstrap local CSS. 911 00:44:15,700 --> 00:44:16,860 Você verá Bootstrap. 912 00:44:16,860 --> 00:44:20,450 E se você rolar para baixo, você verá como baixá-lo, como 913 00:44:20,450 --> 00:44:21,900 instalá-lo, et cetera. 914 00:44:21,900 --> 00:44:24,700 >> MIKE RIZZO: E você também pode, curiosamente, personalizá-lo para 915 00:44:24,700 --> 00:44:27,770 ser o tipo de temas que você deseja. 916 00:44:27,770 --> 00:44:31,270 Eu sei que é algo que eu fiz para o meu projeto final quando eu tirei a classe 917 00:44:31,270 --> 00:44:32,050 foi personalizá-lo. 918 00:44:32,050 --> 00:44:34,540 Uma versão diferente do que Bootstrap tinha um esquema de cores diferente e 919 00:44:34,540 --> 00:44:36,700 diferentes formas de alguns coisas diferentes. 920 00:44:36,700 --> 00:44:38,250 Então eu encorajo você a brincar com isso. 921 00:44:38,250 --> 00:44:39,440 É uma espécie de divertido de fazer. 922 00:44:39,440 --> 00:44:43,230 >> TOMAS REIMERS: Olhando na parte de cima novamente, é muito parecido com o tipo de letra 923 00:44:43,230 --> 00:44:44,970 Ótimo site. 924 00:44:44,970 --> 00:44:47,810 Uma grande quantidade de documentação terá início a parecer semelhante quando você tem 925 00:44:47,810 --> 00:44:48,940 vi o suficiente dele. 926 00:44:48,940 --> 00:44:51,260 Portanto, temos aqui o CSS componente desta. 927 00:44:51,260 --> 00:44:53,540 E você vai ver como ele pode denominar as coisas. 928 00:44:53,540 --> 00:44:56,780 Então, se você clicar em tabelas, por exemplo, você pode imediatamente fazer um 929 00:44:56,780 --> 00:45:01,710 mesa muito simplesmente adicionando a tabela de classe para ele. 930 00:45:01,710 --> 00:45:03,150 >> Mesmas coisas para os botões. 931 00:45:03,150 --> 00:45:12,140 Se você simplesmente adicionar o BTN classe e BTN padrão ou BTN primária, você pode 932 00:45:12,140 --> 00:45:16,240 obter qualquer um destes botões com estes estilos pré-fabricados. 933 00:45:16,240 --> 00:45:18,570 E então, se você está procurando algo mais complexo do que simplesmente 934 00:45:18,570 --> 00:45:24,100 restyling que w já tem, ao longo de guia JavaScript na parte superior nós 935 00:45:24,100 --> 00:45:25,120 tem um monte de componentes. 936 00:45:25,120 --> 00:45:30,410 >> Portanto, temos aqui transições, modais, menus suspensos, guias e dicas. 937 00:45:30,410 --> 00:45:35,530 A dica é o que aparece sob o seu mouse quando você passa o mouse em algo. 938 00:45:35,530 --> 00:45:40,280 Popovers, alertas, botões, desmontável acordeões é o que 939 00:45:40,280 --> 00:45:41,190 eles são geralmente chamados. 940 00:45:41,190 --> 00:45:43,045 Carrosséis, que aleta através de imagens como. 941 00:45:43,045 --> 00:45:52,190 942 00:45:52,190 --> 00:45:54,840 >> Então esses são os componentes de Bootstrap. 943 00:45:54,840 --> 00:45:57,620 Gostaria de incentivá-lo a altamente vão olhar para eles. 944 00:45:57,620 --> 00:46:01,780 Há um componente de JavaScript e um componente CSS. 945 00:46:01,780 --> 00:46:03,880 Sinta-se livre para usá-los como quiser. 946 00:46:03,880 --> 00:46:06,730 Nós não estamos indo para ir muito para eles porque sentimos a documentação 947 00:46:06,730 --> 00:46:09,360 é realmente bem feito. 948 00:46:09,360 --> 00:46:10,540 E sim. 949 00:46:10,540 --> 00:46:14,500 Você tem alguma dúvida sobre isso? 950 00:46:14,500 --> 00:46:19,430 >> MIKE RIZZO: Então como são realmente rápidos lado, o design da página web que 951 00:46:19,430 --> 00:46:21,830 nós rapidamente juntos para esta apresentação é 952 00:46:21,830 --> 00:46:24,290 realmente feito usando Bootstrap. 953 00:46:24,290 --> 00:46:27,810 Como você pode ver, quando clicamos sobre estes abas diferentes, nunca está realmente 954 00:46:27,810 --> 00:46:30,750 sair desta página index.html atual. 955 00:46:30,750 --> 00:46:36,400 Então o que temos é diferente divs dentro deste index.html. 956 00:46:36,400 --> 00:46:39,610 E então, sempre que clicar em um diferente guia, é só mudar 957 00:46:39,610 --> 00:46:41,590 que mostra o um. 958 00:46:41,590 --> 00:46:47,390 >> Por isso, de acordo com os posiciona, muda o código HTML da página, de modo que 959 00:46:47,390 --> 00:46:52,330 a guia atual é marcado como ativo, de modo ele aparece de forma diferente e aparência 960 00:46:52,330 --> 00:46:52,820 muito bom. 961 00:46:52,820 --> 00:46:57,260 >> TOMAS REIMERS: Para que tudo foi feito sem nós escrevendo quase todas as CSS. 962 00:46:57,260 --> 00:47:01,440 Vemos também um cabeçalho na parte superior, que as cores são por nós. 963 00:47:01,440 --> 00:47:04,800 Mas o real colocá-lo no topo da página e fazer 964 00:47:04,800 --> 00:47:06,660 ele rolagem foi Bootstrap. 965 00:47:06,660 --> 00:47:09,720 E, em seguida, até mesmo para outra biblioteca - este não é aquele que falamos, mas uma 966 00:47:09,720 --> 00:47:11,580 Você pode google, se quiser. 967 00:47:11,580 --> 00:47:15,130 Isto é chamado prettify.js. 968 00:47:15,130 --> 00:47:20,650 E vai sintaxe destacar o seu código para você, utilizando CSS e JavaScript. 969 00:47:20,650 --> 00:47:23,480 970 00:47:23,480 --> 00:47:27,070 >> A última coisa que quero falar sobre antes de liberá-lo para o 971 00:47:27,070 --> 00:47:30,620 mundo a olhar para as bibliotecas para descobrir como usá-los e, com sorte, 972 00:47:30,620 --> 00:47:34,640 ler documentação e encontrar o que você necessidade é como encontrar bibliotecas. 973 00:47:34,640 --> 00:47:37,000 Assim, a primeira é que estamos apenas vai empurrar Google. 974 00:47:37,000 --> 00:47:37,810 Ir Google. 975 00:47:37,810 --> 00:47:41,150 >> Isso é literalmente o que fazemos quando precisa fazer alguma coisa é que o Google. 976 00:47:41,150 --> 00:47:44,730 Existe uma biblioteca JavaScript que me permite manipular o tempo em um 977 00:47:44,730 --> 00:47:45,400 forma útil? 978 00:47:45,400 --> 00:47:49,510 Então, se eu sei que algum usuário criar uma conta aqui, e isso é o 979 00:47:49,510 --> 00:47:53,010 tempo atual, como posso calcular o diferença de que, sem ter de 980 00:47:53,010 --> 00:47:55,020 calculá-lo eu mesmo? 981 00:47:55,020 --> 00:47:59,630 Portanto, esta é realmente uma coisa comum, Biblioteca JavaScript tempo. 982 00:47:59,630 --> 00:48:02,440 E aqui nós Moment.js-- o mais popular. 983 00:48:02,440 --> 00:48:06,530 >> Se precisarmos de uma biblioteca para manipular algo como cor a ser capaz de 984 00:48:06,530 --> 00:48:08,650 gerar um monte de cores aleatórias - 985 00:48:08,650 --> 00:48:10,660 possivelmente, para gerar um estilo ou algo assim - 986 00:48:10,660 --> 00:48:13,480 poderíamos Google algo como JavaScript biblioteca de cores. 987 00:48:13,480 --> 00:48:15,620 E tenho certeza de que iria aparecer com mil e uma delas. 988 00:48:15,620 --> 00:48:18,290 989 00:48:18,290 --> 00:48:21,410 Você está convidado a lê-los. 990 00:48:21,410 --> 00:48:24,610 >> Assim, a maioria das coisas - quando você encontrá-los - vão ser hospedado em um dos 991 00:48:24,610 --> 00:48:25,920 sites que código host. 992 00:48:25,920 --> 00:48:26,960 Eles são alguns dos mais populares. 993 00:48:26,960 --> 00:48:30,870 O mais popular, por agora, é github.com. 994 00:48:30,870 --> 00:48:35,300 E se você vai para o GitHub é realmente Normalize onde estava hospedado. 995 00:48:35,300 --> 00:48:36,950 Então, se você quer voltar para aquela. 996 00:48:36,950 --> 00:48:38,135 Mostre-lhes que. 997 00:48:38,135 --> 00:48:40,516 >> MIKE RIZZO: E isso é realmente onde este está hospedado também, se você reparou. 998 00:48:40,516 --> 00:48:41,000 >> TOMAS REIMERS: Yeah. 999 00:48:41,000 --> 00:48:49,078 Então, se você passar por cima de normalizar e ir para o GitHub. 1000 00:48:49,078 --> 00:48:51,936 Era é isso? 1001 00:48:51,936 --> 00:48:54,620 >> MIKE RIZZO: Essa coisa de gato é o símbolo GitHub. 1002 00:48:54,620 --> 00:48:56,330 >> TOMAS REIMERS: Ah. 1003 00:48:56,330 --> 00:49:02,180 Assim GitHub utiliza um método chamado Git para armazenar código. 1004 00:49:02,180 --> 00:49:05,150 É que você não sabe o que é ou isso assusta você, isso é bom. 1005 00:49:05,150 --> 00:49:16,100 Você não tem que saber o que é o Git porque GitHub tem um botão Download 1006 00:49:16,100 --> 00:49:17,200 na parte inferior direita. 1007 00:49:17,200 --> 00:49:21,350 >> A outra coisa útil saber sobre GitHub é a maioria dos produtos 1008 00:49:21,350 --> 00:49:23,200 terá um me ler. 1009 00:49:23,200 --> 00:49:25,400 E se eles não têm um site, o leia me falar sobre como você 1010 00:49:25,400 --> 00:49:28,310 instalá-lo, como você usá-lo, o que faz, et cetera, et cetera, et cetera. 1011 00:49:28,310 --> 00:49:31,033 O que temos sido, basicamente, passos através. 1012 00:49:31,033 --> 00:49:32,326 >> MIKE RIZZO: desistir da Internet. 1013 00:49:32,326 --> 00:49:34,020 >> TOMAS REIMERS: Isso é bom. 1014 00:49:34,020 --> 00:49:36,980 As duas últimas coisas que queríamos para falar sobre - 1015 00:49:36,980 --> 00:49:38,750 nós já conversamos sobre Git - 1016 00:49:38,750 --> 00:49:40,290 é solução de problemas. 1017 00:49:40,290 --> 00:49:43,020 E isso não é tão relevante para a o produto final, uma vez que é 1018 00:49:43,020 --> 00:49:44,870 quando sair 50. 1019 00:49:44,870 --> 00:49:48,310 E quando você tiver produtos implementação de bibliotecas ou implementando 1020 00:49:48,310 --> 00:49:50,230 o seu próprio projeto, você vai tiver dúvidas ou se você estiver 1021 00:49:50,230 --> 00:49:51,660 vai olhar para perguntas. 1022 00:49:51,660 --> 00:49:53,060 >> Mais uma vez, o Google. 1023 00:49:53,060 --> 00:49:54,630 Isso é, literalmente, o que fazemos. 1024 00:49:54,630 --> 00:49:56,400 Isso vai parecer bobagem. 1025 00:49:56,400 --> 00:49:58,310 Mas, literalmente, que o Google. 1026 00:49:58,310 --> 00:50:01,810 E novamente, uma das primeiras coisas normalmente você vai correr em é 1027 00:50:01,810 --> 00:50:06,550 stackoverflow.com, que é um maravilhoso perguntas e respostas vista. 1028 00:50:06,550 --> 00:50:10,530 >> É maravilhoso tanto porque você pode postar as perguntas e procurar 1029 00:50:10,530 --> 00:50:12,760 respostas, mas também porque ele já tem um monte de 1030 00:50:12,760 --> 00:50:14,590 conteúdo pré-preenchida lá. 1031 00:50:14,590 --> 00:50:18,510 Por isso, normalmente quando você Google uma programação questão no primeiro 1032 00:50:18,510 --> 00:50:22,620 casal bate em você já pode ter funcionado para ele durante seus conjuntos de problemas. 1033 00:50:22,620 --> 00:50:27,840 >> E então, a última coisa que realmente breve é JSFIDDLE, que é - hoje nós temos 1034 00:50:27,840 --> 00:50:32,110 vindo a fazer um monte de trabalho com JavaScript HTML CSS. 1035 00:50:32,110 --> 00:50:39,820 JSFIDDLE é um aplicativo web, que basicamente permite que você tome o seu HTML, SUA 1036 00:50:39,820 --> 00:50:42,820 JavaScript canto inferior esquerdo, e seu superior direito CSS. 1037 00:50:42,820 --> 00:50:47,840 E então ele pode criar uma rápida prestação dele e ver como ele interage. 1038 00:50:47,840 --> 00:50:50,500 É muito útil quando as pessoas estão tentando para fazer uma prova de conceito como 1039 00:50:50,500 --> 00:50:52,910 esta é a forma como você faria fazer um menu drop-down. 1040 00:50:52,910 --> 00:50:54,980 Talvez um uncover rápida ou o que seja. 1041 00:50:54,980 --> 00:50:56,560 >> MIKE RIZZO: Então vamos em frente e clique isso. 1042 00:50:56,560 --> 00:50:57,820 Uma nota rápida - 1043 00:50:57,820 --> 00:51:00,430 que, antes de sermos fazendo no clique. 1044 00:51:00,430 --> 00:51:04,380 Acontece que JCorey Coréia também tem um built clique no manipulador de eventos que 1045 00:51:04,380 --> 00:51:07,020 usa apenas porque se encontra você está vai querer fazer um monte de coisas 1046 00:51:07,020 --> 00:51:08,410 quando você quer algo clique. 1047 00:51:08,410 --> 00:51:09,690 >> Da mesma forma, ele também tem um foco. 1048 00:51:09,690 --> 00:51:12,850 Mas, para obter toda a gama de aqueles, olhe para o jQuery 1049 00:51:12,850 --> 00:51:15,320 documentação e fazê-lo. 1050 00:51:15,320 --> 00:51:18,760 Eu fiz algo estúpido aqui. 1051 00:51:18,760 --> 00:51:21,490 >> TOMAS REIMERS: Então, eu tenho um muito rápido programa aqui, que diz 1052 00:51:21,490 --> 00:51:22,640 botão no clique. 1053 00:51:22,640 --> 00:51:23,890 Então nós temos um laço for. 1054 00:51:23,890 --> 00:51:26,810 Para i é inferior a 404. 1055 00:51:26,810 --> 00:51:29,530 Ele só vai aparecer estas mensagens de alerta. 1056 00:51:29,530 --> 00:51:33,425 >> MIKE RIZZO: E qual foi o código 404 representava em HTML? 1057 00:51:33,425 --> 00:51:34,145 Alguém se lembra? 1058 00:51:34,145 --> 00:51:35,450 Não foi encontrado, certo. 1059 00:51:35,450 --> 00:51:38,640 1060 00:51:38,640 --> 00:51:40,885 Chrome também acrescentou esta arrumado coisa em que você pode - 1061 00:51:40,885 --> 00:51:43,430 >> TOMAS REIMERS: porque as pessoas gostam Mike começou a fazer isso muito e 1062 00:51:43,430 --> 00:51:47,230 usuários irritantes, o que permite você ver info. 1063 00:51:47,230 --> 00:51:48,286 >> MIKE RIZZO: Yeah. 1064 00:51:48,286 --> 00:51:50,690 >> TOMAS REIMERS: Será que temos alguma dúvida sobre isso, sobre JavaScript 1065 00:51:50,690 --> 00:51:53,420 bibliotecas, encontrando bibliotecas ou olhares que desenvolvimento web 1066 00:51:53,420 --> 00:51:55,400 como no mundo real? 1067 00:51:55,400 --> 00:51:56,880 Estamos correndo contra o tempo. 1068 00:51:56,880 --> 00:52:00,400 Então, eu não tenho certeza de que vamos ter tempo para implementar 1069 00:52:00,400 --> 00:52:02,290 a menos que seja muito rápido. 1070 00:52:02,290 --> 00:52:04,580 Será que somos bons? 1071 00:52:04,580 --> 00:52:08,110 >> MIKE RIZZO: Qualquer coisa que vocês gostariam ver muito rápido, tipo, dois 1072 00:52:08,110 --> 00:52:09,556 minutos ou menos? 1073 00:52:09,556 --> 00:52:10,870 >> TOMAS REIMERS: Qualquer coisa podemos esclarecer? 1074 00:52:10,870 --> 00:52:12,500 Como escrever em - 1075 00:52:12,500 --> 00:52:13,260 >> AUDIÊNCIA: [inaudível]? 1076 00:52:13,260 --> 00:52:16,070 >> MIKE RIZZO: Sim, assim que isso é - 1077 00:52:16,070 --> 00:52:18,065 >> TOMAS REIMERS: Você pode apenas bater Control-U no site. 1078 00:52:18,065 --> 00:52:19,275 >> MIKE RIZZO: Oh, eu não sabia disso. 1079 00:52:19,275 --> 00:52:22,290 >> TOMAS REIMERS: Eu acho que sim. 1080 00:52:22,290 --> 00:52:23,300 Control-U. É. 1081 00:52:23,300 --> 00:52:25,970 >> MIKE RIZZO: Ah, então esse é o código para o site. 1082 00:52:25,970 --> 00:52:29,580 Mas se você realmente deseja fazer o download nosso arquivos e tudo mais, ele está hospedado 1083 00:52:29,580 --> 00:52:32,650 em github.com 1084 00:52:32,650 --> 00:52:34,850 >> TOMAS REIMERS: reduzir o meu nome - 1085 00:52:34,850 --> 00:52:38,504 Tomas Reimers - Slash Seminário CS50 hífen. 1086 00:52:38,504 --> 00:52:40,710 >> MIKE RIZZO: E você pode encontrar tudo lá. 1087 00:52:40,710 --> 00:52:42,310 >> TOMAS REIMERS: Isto é o que GitHub parece, pelo caminho. 1088 00:52:42,310 --> 00:52:44,910 Então, novamente, quando você vê uma fonte aberta projeto, normalmente, eles vão ser uma leitura 1089 00:52:44,910 --> 00:52:45,950 me lá que você pode ler. 1090 00:52:45,950 --> 00:52:50,200 E se você voltar, você vai perceber que você tem o zip de download, que será 1091 00:52:50,200 --> 00:52:52,130 permite o download da fonte código para incluir o 1092 00:52:52,130 --> 00:52:53,666 produto em sua própria coisa. 1093 00:52:53,666 --> 00:52:56,890 >> MIKE RIZZO: Sim, e se nós só clique nas index.html muito rapidamente - 1094 00:52:56,890 --> 00:52:59,180 >> TOMAS REIMERS: Você vai ver aqui é a código-fonte para o nosso site. 1095 00:52:59,180 --> 00:53:02,016 1096 00:53:02,016 --> 00:53:06,070 >> MIKE RIZZO: Além disso, eu esqueci de empurrar direito antes com a tabela grande que 1097 00:53:06,070 --> 00:53:09,860 incluído, mas há também uma mesa de chmods que incluímos 1098 00:53:09,860 --> 00:53:13,210 apenas para sua clareza. 1099 00:53:13,210 --> 00:53:16,940 Mas se percorrer todo o caminho até o fundo, nós realmente não fazer muito 1100 00:53:16,940 --> 00:53:21,160 muito com o JavaScript coisas em tudo com isso. 1101 00:53:21,160 --> 00:53:26,610 É exclusivamente a partir de tudo outra coisa que tivemos. 1102 00:53:26,610 --> 00:53:28,730 >> Então agradecer a vocês por terem vindo e ouvir. 1103 00:53:28,730 --> 00:53:29,830 Esperamos que este foi realmente útil. 1104 00:53:29,830 --> 00:53:33,020 Se você tem alguma JavaScript relacionado perguntas ou simplesmente quero falar sobre 1105 00:53:33,020 --> 00:53:36,240 o que mais gosto do que outras coisas legais você pode fazer com JavaScript, adoraríamos 1106 00:53:36,240 --> 00:53:37,186 para falar com você. 1107 00:53:37,186 --> 00:53:40,010 >> TOMAS REIMERS: Se você tem uma pergunta sobre o seu projeto ou se isso pode ser 1108 00:53:40,010 --> 00:53:42,740 relevante, provavelmente vamos ficar por aqui um pouco depois disso. 1109 00:53:42,740 --> 00:53:44,640 Mas para além disso, têm um bom fim de semana. 1110 00:53:44,640 --> 00:53:45,845 >> MIKE RIZZO: Sim, desfrutar. 1111 00:53:45,845 --> 00:53:46,120 Vejo vocês. 1112 00:53:46,120 --> 00:53:47,370 >> TOMAS REIMERS: Até mais. 1113 00:53:47,370 --> 00:53:47,926