Tip:
Highlight text to annotate it
X
>> TOMAS REIMERS: Oi, todo mundo.
Tomas Reimers do meu nome.
>> MIKE RIZZO: E eu sou Mike Rizzo.
>> TOMAS REIMERS: Nós somos dois dos CS50s TS.
E hoje nós estamos levando o seminário sobre JavaScript e CSS para aplicações web.
Se você quiser acompanhar, o link está logo ali.
E você quer colocá-lo brevemente no computador?
>> Lá está o link.
É um pequeno site, que tem ligações com todos os recursos que vamos ser
apontando-lhe hoje e também tem um monte de informação útil escrito por nós
leia mais em profundidade quando você voltar, e você está tentando lembrar o que
exatamente que dizer, o que você estava falando, et cetera.
>> MIKE RIZZO: Tudo bem.
Então, vamos começar.
>> TOMAS REIMERS: Então você quer começar?
OK.
>> MIKE RIZZO: Yeah.
Então, primeiro queria começar com uma ampla visão geral sobre a internet e
tipos de arquivos ao projetar websites.
Embora esta apresentação queremos entrar em JavaScript muito mais
mais tarde, queríamos começar com apenas, tipo, como a vista de um pássaro olho
do que um site é e como a pensar sobre como criar um
site para o início.
>> Então vocês, neste momento - com ele sendo sexta-feira à noite - deve ter
submetido suas finanças CS50 conjuntos de problemas.
Felizmente, isso foi um bom gosto do que de programação web pode ser.
Mas aqui nós queremos, tipo, dar lhe um outro gosto, também.
>> TOMAS REIMERS: Então, só para recapitular o que acontece, quando você digitar a sua URL para
seu navegador, que recebe URL olhou para cima no computador.
E o seu computador está conectado para outro computador,
que hospeda o site.
OK, então, quando você vai para google.com, você está conectado a um dos Google
computadores, que contém o arquivos para google.com.
>> Em seguida, ele pede um arquivo específico.
Então, se você ir para -
Eu não sei -
example.com / index.html ou / test.html, você vai pedir
que arquivo específico.
E o servidor web vai para devolvê-lo a você.
>> Então, uma vez que você passar por aquele arquivo -
uma vez que você estiver computador fica que arquivo - que vai começar
construir uma página web.
Então, agora ele tem o arquivo HTML, que é uma espécie de como o
estrutura da página web.
O arquivo HTML pode também referência Arquivos CSS, que definem o
estilo da página web.
>> Arquivos JavaScript, que define interação com a página da web.
Os arquivos de imagem, que são apenas imagens.
E, possivelmente, vincular a outros arquivos HTML, que você pode então visitar.
>> MIKE RIZZO: OK, ótimo.
Então, vocês têm tudo, talvez, meticulosamente configurar o host local
em sua máquina virtual.
E isso só, tipo, é o local de domínio que hospeda o seu computador só
para você em seu próprio endereço IP.
>> Então, dentro disso, então você pode adicionar a ele suas próprias páginas web.
Quero dizer, em CS50 Finanças, você deve ter adicionadas algumas páginas HTML, que são,
tipo, envolto em invólucro PHP.
Mas, afinal, o que suas páginas PHP Foram saída era HTML.
>> Mas, pensando de volta para o início do PSET, tivemos que definir
as permissões para tudo, certo?
Então isso basicamente só nos permite saber que pode ler, escrever, e, possivelmente,
executar cada um dos arquivos.
Então, nós vamos fazer um rápido - hm?
>> TOMAS REIMERS: Então nós vamos para fazer uma demonstração rápida.
Então, só para lembrá-lo, quando você conectar ao computador do Google -
quem -
e pedir um arquivo, o primeiro computador precisa ter certeza de que você está autorizado
para realmente ver esse arquivo ou ler que arquivo, porque você não pode simplesmente perguntar
para qualquer arquivo no computador, certo?
Isso seria um perigo para a segurança.
>> Assim, os arquivos nos sistemas que utilizamos, como este aparelho CS50, tem três
geral as pessoas que podem ter permissões para algo.
O primeiro é o real proprietário do referido arquivo.
A segunda é o grupo que o arquivo pertence.
Nós não estamos indo centrar-se muito sobre isso.
E a última coisa é, mais ou menos, como o mundo ou como toda a gente que está
não específico para esse arquivo e não tem direitos de propriedade sobre ele.
>> Então, se temos proprietário, o grupo, e, em seguida, mundo.
E então, para cada um destes grupos, pode ter um dos três permissões,
OK, ou múltiplo deles.
Você pode ter permissões de leitura.
Você pode ter as permissões adequadas.
E você pode ter permissões de execução.
>> Então, em termos de tipos de arquivo reais, leia permissão é como realmente lendo
o conteúdo do arquivo.
A permissão para a direita está escrevendo para o referido arquivo.
Uma permissão de execução está executando o arquivo como você faz quando você executar uma das
seus projetos CS50.
>> Então, quando estamos pensando sobre arquivos como quando precisamos ler um HTML
arquivo, que deve ser o mundo legível, certo?
Presumivelmente, também o proprietário quer para ser capaz de editar esse arquivo.
Assim, o proprietário vai precisar de ler e escrever permissões.
Eles realmente não precisa executar.
>> Group, vamos tratar o mesmo que o mundo agora.
Então eles precisam de permissões de leitura.
Mas eles não precisam de gravação ou permissões de execução.
E agora, se pensarmos de volta para ex- Série de Exercícios, o que se percebe é este tipo
de olhar como binário, certo?
1 significa sim.
0 para não.
E nós podemos realmente traduzir esta para binário.
>> Assim, 110 em binário seria 6.
100 seria 4.
Mesmo com o mundo.
Portanto, o número que se obtém para o permissões para isso seria 644.
>> MIKE RIZZO: E se você acha que volta para quando você CHMOD algo, eu acredito
eles deram no conjunto de problemas a exemplo de onde você poderia fazer
algo como chmod 644 e, em seguida, o nome do arquivo.
O 644 então, agora você pode ver diretamente de onde isso vem.
Portanto, esperamos que faz com que a um pouco mais clara.
>> E, em seguida, para maior clareza do que você cara -
oh sim, aqui é novo.
Assim, 600, em seguida, seria apenas o exemplo desistimos aqui, onde o proprietário tem
permissões de leitura e direito, enquanto grupo e mundo não têm nenhuma permissão
para acessar o arquivo.
>> TOMAS REIMERS: E então nós temos uma rápida lista de permissões comuns.
Assim, diretórios, você quer para efectivamente chmod 711.
Rápida de lado - para um diretório para ter permissão de execução significa ser capaz
para abrir o diretório.
Imagens, CSS, JavaScript, HTML necessidades 644, porque, basicamente, o mundo
necessidades permissões de leitura.
>> E PHP, o que vocês têm visto embora nós não vamos estar falando sobre isso
estritamente está tipicamente com CHMOD permissão 600 porque ele é executado com
as permissões do proprietário.
Pelo menos no aparelho.
>> MIKE RIZZO: Então, se você ainda não especificamente especificar o tipo de arquivo
você quer na verdade, definindo esta apresentação -
tivemos um problema com isso, porque tudo não foi CHMOD corretamente -
você vai conseguir, de certa forma, um erro proibido que o site
na verdade não tem permissão para acessar qualquer arquivo
você quer acessar.
E, claro, que pode ser corrigido - como no conjunto de problemas -, alterando
permissões apropriadamente.
>> TOMAS REIMERS: E o último comentário para desenvolvimento local é rapidamente - nós
trouxe este, mas nós só queríamos para trazê-lo de novo -
se você perguntar para um servidor - host tão local, por exemplo, com ou qualquer coisa. -
e você não especificar um arquivo específico, o arquivo que seu computador está indo
para pedir é chamado index.html.
Ou, se isso não existir, index.php.
>> Legal.
Então, isso é apenas um resumo de tudo, espera-se, que nós cobrimos em
seção, e palestra, e até agora em CS50.
E agora vamos começar a falar sobre especificamente bibliotecas.
Bibliotecas JavaScript e CSS para aplicações web.
>> Assim, uma razão rápida por isso que temos bibliotecas é a programação -
há um monte de problemas em programação, que continuam surgindo
novamente, e novamente, e novamente.
Você pode notar que um monte de sites precisa a capacidade de ter suspensa
menus, por exemplo, ou precisa da capacidade ter um botão muito normal
estilo, que não pode ser a coisa mais fácil.
Agora que você começa a entrar em HTML, você perceber que os botões pode realmente
olhar muito feio se não faça nada.
>> Então, um monte de pessoas têm escrito chamado bibliotecas.
E, neste contexto, são também chamado de frameworks.
Nós vamos usar o dois alternadamente.
E o que eles são é que eles são, basicamente, peças premade de código -
ou CSS ou JavaScript -
que tirar um monte de equipe que você tem na codificação.
>> Então, eles pré-definir um monte de aulas ou pré-definir um monte de funções para
O caso de JavaScript, que você pode ligar mais tarde.
E então você pode, de alguma forma, obter acesso a este código, sem
ter que fazer nada.
Um exemplo da biblioteca foi CS50.H. Essa foi uma biblioteca que demos a você de volta
em uma semana, o que lhe permitiu fazer coisas assim GetInt e GetString
sem ter que escrever qualquer código você mesmo.
>> MIKE RIZZO: Tudo bem.
Então, aqui, como nós tivemos que incluem em nossa c arquivos diferentes
bibliotecas, também deve incluir em nossa arquivos HTML diferentes bibliotecas.
Por exemplo, se quiséssemos incluir uma biblioteca de JavaScript específico aqui,
talvez, que nós escrevemos nos como ele está hospedado localmente
chamados script.js, nós só usar esta notação.
>> Portanto, temos tipo script iguais JavaScript fonte iguais
Javascript.js.
E se você acha que volta para sua CS50 problema de financiamento definido, se você olhar para
header.php na pasta modelos, você deve ter visto
alguns deles incluídos.
Portanto, este primeiro - os roteiros -
é inclusive uma biblioteca JavaScript.
Incluindo uma biblioteca de CSS é um pouco diferente.
>> Aqui, em vez de o script TAG você precisa da tag link.
E, em seguida, o tipo de texto CSS é um pouco diferente.
Você nem sempre tem que incluir folha de estilo rel.
Mas eu acho que é, em geral, boas práticas.
>> E então, finalmente, o HREF, que você provavelmente viu em seus ATAGs para vincular
em diferentes elos apenas Especifica o link de onde encontrar isso.
Por exemplo, se quiséssemos ligar um biblioteca diferente - vamos dizer -
que viveu em styles.css.
E nós queríamos de ligação que, em que é hospedado na web, teríamos entendido.
E, em seguida, colá-lo em tudo o que temos aqui em seu lugar.
>> TOMAS REIMERS: OK, espero que você caras já estão familiarizados
com a forma de ligação CSS.
Você tinha que fazer isso em o seu último conjunto marrom.
JavaScript, alguns de vocês talvez tem alguma experiência com.
Alguns de vocês podem não.
>> Então, por enquanto, sabemos que um arquivo JavaScript é muito parecido com um arquivo CSS em
sentido de que você pode ligar para ele ou que você pode incluí-lo internamente.
E isso permite-lhe coisas de script.
E nós estamos indo para orientá-lo através de um pouco de JavaScript mais tarde.
>> Então, usando uma biblioteca -
uma vez que você incluiu, é como simples como, literalmente, chamando a
funções ou adicionando o nomes de classe para ele.
A última coisa que quero falar sobre em termos de biblioteca -
e esta é mais uma nota técnica -
é o licenciamento de fonte aberta.
Então, quando você encontrar essas bibliotecas reais, você pode estar pensando em
Perguntas como é OK que eu sou apenas usando o código de outra pessoa, especialmente
porque isso é algo que muito disse-lhe para não fazer neste curso.
>> Assim, no caso de licenciamento de fonte aberta, um monte de desenvolvedores -
uma vez que você escreveu uma biblioteca, que eles acham que poderia ser
útil para outras pessoas -
vai publicá-lo na web e dar-lhe uma licença.
E uma licença basicamente diz que eu sou aqui a concessão de permissão para outro
as pessoas a usar este software com o seguinte tipo de
estipulações.
>> Nós incluímos um link para um bom site para ajudá-lo a compreender as licenças em
Caso você correr para eles.
Estipulações comuns são coisas como você está convidado a usar a minha biblioteca para
Contanto que você me dar crédito.
Você está convidado a usar a minha biblioteca contanto que, quando se rompe
você não me culpe.
Você está convidado a usar a minha biblioteca de tanto tempo como você não usá-lo para ganhar dinheiro
para si mesmo.
Estes são os tipos de comum estipulações.
>> Para este projeto final CS50, eles não devem ser super relevante porque
os projetos que vocês usam são Provavelmente sim, mais ou menos, conhecido.
Mas quando você realmente sair para o mundo e começar a usar as bibliotecas, que
pode ou não ser também implementado como alguns dos mais populares estamos
vai estar passando.
É bom ser capaz de entender essas licenças e de
entender o que eles significam.
E voltando.
>> MIKE RIZZO: OK.
Então agora passar para exemplos de CSS real.
Neste ponto, até agora, você pode não encontrei isso.
Mas você pode ter encontrado ele em sua vida cotidiana em que algo
que parece uma forma em um navegador o mesmo não se pode olhar
caminho em outro navegador.
>> Isto é chamado de navegador navegador compatibilidade.
E cada vez mais está se tornando mais e mais um problema, especialmente quando
navegadores tomar mais e mais liberdades para implementar coisas como eles querem.
Portanto, para superar isso, há, na verdade, é uma grande biblioteca chamada Normalize.CSS.
>> TOMAS REIMERS: Foram incluídos o link.
Neste ponto, é útil se você tem o seu laptop lá
olhando para o site.
E nós estamos dando isso a você direita agora simplesmente porque a final CS50
projeto está indo realmente para pedir-lhe para implementá-lo
da mesma forma e através de browsers.
>> Então, só para manter-se na parte traseira de sua cabeça, esta é uma biblioteca maravilhosa
porque ele vai, de alguma forma, padronizar as coisas.
No Firefox, algo pode mostrar como um pixel para a esquerda.
E então Chrome pode decidir que, na verdade, o que você quis dizer foi de 10 pixels
para a esquerda.
E você quer padronizar isso.
Normalize vai realmente fazer um bom trabalho de certificar-se que o seu site
tem a mesma aparência em todos os navegadores.
>> MIKE RIZZO: Então, se quiséssemos apenas clique no link muito rapidamente e mostrar
você o que parece, você pode baixá-lo usando o
botão gigante Download.
Ou eu encorajo você a ler mais sobre o assunto clicando neste link na parte inferior
canto direito.
>> TOMAS REIMERS: E se você realmente Clique em ler mais ali -
clique na fonte no GitHub -
você vai realmente ver o código-fonte aberto licença em LICENSE.md ali mesmo.
E você vai ver aqui é a licença MIT muito popular.
Novamente, se você ler o texto, você vai ser capaz de encontrá-lo no site
fizemos referência antes e ser capaz de compreendê-lo sem ter que ler
através do jargão legal.
>> MIKE RIZZO: OK, ótimo.
Então, isso é Normalize.
Queríamos dar-lhe que muito rapidamente.
Oh, você tem uma pergunta?
>> AUDIÊNCIA: Então, quando você baixá-lo, você basta seguir esse código que eles têm
sob o botão Download?
>> TOMAS REIMERS: Sim, por isso quando você baixar -
>> MIKE RIZZO: Oh, isso é um grande ponto.
Então, a questão era como fazer nós realmente baixá-lo?
Então, se nós, clique no link, vemos que ele realmente aparece
no código fonte.
Então, para fazer isso, o que pudemos não é só clicar em Salvar como.
Salvar como e que deveria abrir um arquivo.
E, então, pode optar por salvar lo como normalize.CSS.
E então você tem que ligá-lo em -
>> TOMAS REIMERS: Da mesma forma que ligação em qualquer outro arquivo.
E uma vez que você ligá-lo dentro, o que é ótimo sobre Normalize é que vai realmente
cuidar de tudo o disco trabalhar por si mesmo.
O que significa que você não tem para adicionar as classes.
>> Você não tem que fazer nada estranho.
Ele vai normalizar sem você fazer mais nada.
Sim, você tem que incluí-lo.
Google Chrome não está respondendo.
>> Apenas um rápido aparte -
Notei que saltou para isso.
O resto desta apresentação é Vai ser uma rápida visão geral.
Uma pesquisa de bibliotecas.
>> Basicamente, o que eles são.
O que eles fazem.
Como eles são úteis.
Como você pode implementá-las.
Se você quer começar a olhar para eles, acompanhando, e da leitura através
eles, eu altamente incentivar isso.
>> Alternativamente, você é bem-vindo também para começar a baixá-los e inclusive
los em uma visão apenas para ver o que eles olha como ou o que fazer se você tem
seu laptop na frente de você.
Se não, você é bem vindo para manter ouvir-nos falar.
Nós vamos continuar a falar.
E nós temos tempo no final, espero que vamos realmente começar a mostrar-lhe
que algumas dessas bibliotecas parecem.
>> MIKE RIZZO: Cool.
Tudo bem, então agora vamos falar sobre Font impressionante.
>> TOMAS REIMERS: Awesome tão Font é um local muito legal, especialmente para aqueles
de nós que são menos artisticamente talentosa.
Ignorando o nome da fonte impressionante, dá lhe um monte de ícones, que são
muito útil.
Então, um monte de vezes que você vai implementar um ícone que você pode querer como um bom x então
que você pode fechar alguma coisa.
>> Ou você pode querer algum tipo de botão Editar com um desenho a lápis como
todo mundo tem.
E isso é quando você aprende que desenho dos ícones pode ser
muito tedioso e difícil.
Fonte Awesome - se você realmente ir para o site -
dá-lhe um monte de ícones sob os ícones na parte superior.
Sim, apenas o topo.
Ele vai te dar um monte de ícones gratuitamente.
>> Então, aqui você vê que tem coisas como um asterisco, bares, um raio, uma
calendário, um inseto, um livro, et cetera.
Isto pode ser muito útil.
A maneira como você incluir este é você incluir literalmente o arquivo CSS.
E depois que você incluiu o arquivo CSS, o que você pode fazer é criar uma
tag chamado I. satands para Ícone com a classe FA
de pé para Font impressionante.
E então, qualquer classe que você quiser.
>> Então, se eu queria um ícone desta mais quadrado aqui, eu daria
que a classe FA.
E então FA hífen mais quadrado hífen.
>> MIKE RIZZO: Cool, OK.
>> TOMAS REIMERS: E então, o último CSS biblioteca queremos passar estamos
tentar mantê-lo o mínimo em CSS bibliotecas porque percebem a
título desta apresentação é JavaScript Libraries.
Mas nós pensamos que nós podemos também apresentá-lo a outras bibliotecas
enquanto nós estávamos falando sobre bibliotecas.
>> É Google Web Fonts.
E o que o Google Web Fonts você permite a fazer é adicionar fontes para o seu site,
que é uma maneira muito fácil de fazê-lo bonita e de distinguir o seu conjunto
de todos os outros é se ele tem uma pia batismal agradável, ou se tem um bom
coleção de fontes.
Google Web Fonts é agradável ao contrário de outros bibliotecas, no sentido de que é um
instalação realmente guiada.
>> Então, se você seguir o link, é google.com / fonts, eu acredito.
Se você seguir isto, você pode escolher o seu tipo de letra.
Você pode escolher do lado esquerdo da espessura, inclinação, et cetera.
E então, uma vez que você tenha escolhido um, você pode clicar em uso rápido.
Bem ali.
Canto inferior direito da caixa.
>> E, em seguida, role para baixo.
Primeiro de tudo, eles dão-lhe o CSS que você precisa realmente ligar para ele.
É ali mesmo.
Você pode simplesmente copiar e colar que dentro
E a coisa agradável sobre este é na verdade você não precisa mesmo de
baixar o arquivo.
>> O que ele vai fazer é que vai de ligação para a versão do Google do mesmo.
Então, de volta para o que isso significa.
Isso significa que quando um usuário download de seu arquivo -
transfere sua página HTML - o HTML página vai referenciar este arquivo.
>> Então, o computador vai ver, oh, ele está hospedado no google.com em vez
do que em theirsite.com.
Deixe-me ir pedir ao Google para esse arquivo.
E, em seguida, vai para incluir praticamente como se se tratasse de um
parte do seu próprio site.
>> TOMAS REIMERS: Cool.
E uma vez que você incluir isso, então a incluí-lo em seu CSS, dá-lhe
a linha real.
Então, você define a família de fontes propriedade igual ao nome da sua fonte.
>> MIKE RIZZO: OK.
Então, nós acabamos com CSS.
E alguns de vocês podem estar pensando, bem, tivemos alguns CSS em CS50 Finanças.
Mas biblioteca CSS foi de bootstrap.
Nós realmente incluir Bootstrap um pouco mais tarde, em JavaScript, porque com
a biblioteca Bootstrap CSS também vem com um monte de JavaScript que
Bootstrap ou Twitter - que fez Bootstrap -
usa para gerenciar todo o seu CSS.
>> TOMAS REIMERS: Alguém tem alguma perguntas até agora cerca de CSS em geral?
Nós somos bons?
Incrível.
>> MIKE RIZZO: Awesome.
>> TOMAS REIMERS: Então se movendo para JavaScript.
>> MIKE RIZZO: Então, nós queríamos falar sobre jQuery para começar.
Alguém ouviu falar de jQuery antes ou usou?
Sim, um casal?
Então, se você trabalhar apenas com nativa JavaScript, você vai encontrar-se
digitando um monte de seletores de comprimento muito.
Então, o jQuery faz é que fornece um invólucro agradável para o JavaScript
linguagem que permite que você facilmente selecionar e manipular diferentes elementos
dentro do modelo de objeto de documento página web ou o DOM, o que eu acho
Vocês ouviram falar de em palestra neste momento.
>> TOMAS REIMERS: Se você ainda não ouviu falar ou palestra, se você ainda não assistiu
ainda, o Document Object Model é basicamente como as coisas estão representados.
Assim HTML tipo de parece com uma árvore quando você realmente retirá-la.
Você tem o elemento HTML no topo.
Você tem a cabeça eo corpo.
>> E, em seguida, dentro de que você tem tudo o resto.
Isso é referido como o DOM -
Document Object Model.
Assim, um modelo que representa objectos o documento é uma maneira fácil de pensar
sobre isso.
E um dos grande coisa sobre jQuery é ele realmente faz travessia
isso e manipular elementos dentro que incrivelmente simples.
>> Assim, simples, de facto, que a maioria dos JavaScript bibliotecas ou, se não o
maioria, a grande maioria dos queridos você vai ver realmente necessitam jQuery assim
que eles podem executar-se simplesmente porque se você não tem jQuery, você
iria perder muito tempo tentando descobrir como selecionar certo
elementos e como fazer outras coisas.
E a outra grande coisa sobre jQuery é que é cross browser compatível.
>> Então lembre-se de volta quando dissemos que nem todos os navegadores implementar
as coisas da mesma maneira?
Isto é verdadeiro mesmo em JavaScript.
E uma das grandes coisas sobre jQuery é que detectará o
e detectar o navegador método adequado.
>> Então, se você precisa selecionar um elemento, Internet Explorer pode dizer que você é
deveria fazer dessa forma.
Firefox pode dizer o correto caminho é por aqui.
jQuery não importa.
Quando você diz a jQuery para selecionar um elemento que vai descobrir como é
deveria fazê-lo dentro do navegador da usuário está atualmente em, em seguida, fazer
dessa forma.
>> MIKE RIZZO: Então não vamos falar sobre o uso de jQuery um pouco.
Assim como PHP, jQuery tem uma especial carinho para o cifrão.
Então você verá que qualquer jQuery -
assim, não todos.
Às vezes você pode substituir o dólar assinar com a palavra jQuery.
Mas, geralmente, só porque ele é mais curto, sempre que você vê jQuery sendo
usado vai ser com um cifrão.
>> Então, aqui estamos apenas mostrando um começo seletor para um elemento no DOM.
Aqui, temos o cifrão seguido por parênteses abertos e então cita.
E dentro das aspas ir nossos seletores para os diferentes elementos.
Assim como em CSS, precisávamos de seletores para ser capaz de estilo diferentes elementos
dentro da página.
Esses diferentes seletores traduzem exatamente em jQuery e JavaScript,
na sua maior parte.
>> Portanto, temos aqui um foo ponto.
Então, se você lembrar da aula, o ponto significa apenas a classe.
Então, nós estamos selecionando elemento com a classe foo.
Então, se eu ir em frente e abrir a nossa JavaScript consola aqui muito rapidamente
apenas demonstrar que, se eu digitar o cifrão, vemos que é alguma
função que vem à tona.
E está apenas definido por jQuery.
>> TOMAS REIMERS: Para aqueles de vocês desconhecido, o console é uma ferramenta
dentro Chrome, que permite que você, basicamente, execute JavaScript no
página atual.
Isso você vai encontrar incrivelmente útil quando na verdade você está depurando e você
precisa ser como, o que é o atual valor de alguma variável global ou o que
é outra coisa?
É uma espécie de como GDB com exceção que você pode realmente
manipular elementos na página com lo de uma forma muito mais fácil.
E também não, basicamente, verifique com você antes que ele faz qualquer coisa.
>> Assim, enquanto, GDB pode ser como, você está certeza de que deseja executar o próximo passo?
O console é em real.
Assim como a página web está prestando e fazendo tudo o que está fazendo, o
conselho de também correr ao lado dele.
E você pode colocar o código em imputar que console, que será
ser executado na página.
>> MIKE RIZZO: Então para entrar no console, Eu acho que eu deveria brevemente
mencionar como fazer isso.
Nos últimos problemas que você pode ter usado Chrome inspecionar elemento
funções ou página view source -
e aqueles que são acessíveis apenas por direito clique na página ou de algum
elemento e fazer ou inspecionar elemento ou página de origem vista.
Também pode acessar o JavaScript console diretamente por
escolher inspecionar elemento.
Consola Então você acabou de bater sobre o lado direito.
>> Alternativamente, você poderia também ter ido para o canto superior direito,
que é cortado na tela onde tem as três barras horizontais.
E você ir até ferramentas e então consola JavaScript
aqui onde pode ver -
pelo menos no Windows -
o atalho é o Controle de Mudança J. Então se quiséssemos selecionar um elemento
nesta página, assim como eu mostrei antes, fazemos sinal de dólar parênteses abertas
e, em seguida, cita.
>> Uma coisa interessante é, em geral, aspas simples e aspas duplas são
trocável.
Então, um monte de gente só usar único aspas, porque eles são mais rápidos para digitar
de aspas, porque você não tem que segurar a tecla Shift pressionada.
Então eu vou fazer isso agora.
>> Então, eu quero selecionar algo com classe.
Container, só porque eu sei que é algo que está em nosso
página da web agora.
E eu pressione Enter.
E podemos ver que ele selecionou.
Assim, ele mostra-se que retornou esse objeto.
Então, isso é uma seleção básica.
Se quiséssemos realmente manipulá-lo, você teria que chamar algo
em que a selecção, a qual vamos entrar mais tarde.
>> TOMAS REIMERS: Então, só de olhar para esse mais em profundidade, isso não é diferente
do que as chamadas de função que fizemos em C. O nome da função aqui é um
pouco estranho.
É sinal de dólar.
É apenas um nome de uma função.
Não há nada especial sobre ele.
>> Temos parênteses abertos.
Então, nós temos o nosso único argumento, que neste caso, passa a ser uma string,
que é um selector para ele.
E, em seguida, temos a nossa parêntese fechado.
É isso aí.
>> Não é que muito diferente.
Embora, ele se parece muito estranho.
E isso pode ser, de certa forma, uma degola apontam para um monte de pessoas.
>> MIKE RIZZO: Então, da mesma forma, se quiséssemos para selecionar um elemento que tem um ID,
Agora queremos selecionar por ID em vez de classe.
Seria uma coisa semelhante em que basta fazer o sinal afiada para ID.
Então, nós estamos selecionando aqui tudo elementos que têm bar ID.
>> TOMAS REIMERS: E isso se estende.
Isso se estende CSS.
Assim como em CSS, você pode selecionar todos ligações, que têm a classe foo.
Aqui, é a mesma coisa.
>> Você poderia fazer a.foo, que selecionaria todos os vínculos com o foo classe.
Você poderia fazer um bar acentuada, o que faria selecione o link com a barra de ID e assim
e por aí fora.
Qualquer seletor CSS é um válido seletor jQuery.
>> MIKE RIZZO: Yeah.
OK, então agora vamos entrar um pouco de manipulação que pode fazer com
nossa jQuery.
Então jQuery tem um tipo particular de notação onde nós apenas usar
um ponto no final.
E você pode pensar nisso como em C como tínhamos diferentes estruturas.
E para ir para essas estruturas, você faria usar um ponto de entrar neles.
>> Isto é, tipo, uma coisa semelhante.
Só que agora temos funções dentro desta seletor que podemos chamar disso.
Então, aqui, o primeiro exemplo você pode ver é um seletor CSS.
E, basicamente, o que isso faz é aplica-se o primeiro elemento do CSS para esta
coisa que você selecionou -
esse elemento que você selecionou -
com o valor que.
>> TOMAS REIMERS: Então uma tradução fácil de que seria se jQuery, basicamente,
só tomou foo.
E, em seguida, em CSS disse, cor vermelha e perto.
É a mesma idéia.
O que é feito é que é selecionado todos os elementos foo.
E então ele é aplicado.
Mais ou menos, a cor da propriedade é igual ao vermelho.
>> MIKE RIZZO: Da mesma forma, também podemos alterar o conteúdo real do que é
mostrando no código HTML da página, que é muito legal, porque significa que o
páginas da web podem agora ser completamente dinâmico e não tem que ser estático
que você imprima usando PHP no início de
a página que está sendo carregado.
Então, aqui, se quiséssemos alterar a HTML real da página, teríamos agora
chamar a função HTML, que então apenas inserções tudo o que especificam em
esse elemento que seleccionado.
Então, aqui estamos selecionando elemento com foo classe e, em seguida, dizendo que é HTML
é agora Olá mundo.
>> TOMAS REIMERS: E quando você pensa sobre o que são aplicações úteis de
este, este CSS, a primeira coisa que você pode começar a pensar é
em termos de mesmo menus suspensos.
Você pode começar a fazer coisas como, quando um usuário passa o mouse sobre a parte de cima
of a down gota, você quer fazer a parte inferior visível.
Certo?
>> Assim, em CSS, temos propriedades fazer algo visível.
Coisas como exibição cólon nenhum tornaria invisível.
Bloco de exibição seria torná-lo visível.
Ou mesmo se você quiser ir mais simples, você tem coisas como iguais visibilidade
visível, ea visibilidade é igual a escondido.
>> E você pode começar a implementar as coisas como menus drop-down à direita
depois de passar a idéia de como você pode descobrir quando esta se abre,
que nós vamos passar por muito brevemente.
Mas podemos começar a ver aplicações deste.
Em um sentido similar, se você fosse para tentar e implementar, digamos, um bate-papo
motor e você quer fazer um pouco de balão de fala venha sempre que você tem
tem uma nova mensagem, uma vez que você começa a nova mensagem, você pode fazer um pouco
speech bubble chegar alterando o código HTML da página, certo?
Acrescentando que a bolha do discurso adicional com o texto extra lá.
Sim?
>> AUDIÊNCIA: Então você iria incorporar isso dentro o código HTML na como uma espécie de
[Inaudível]?
>> MIKE RIZZO: Certo.
Sim, nós vamos chegar a isso daqui a pouco.
Sim, é um semelhante pouco para PHP.
Não é exatamente similar.
>> Uma boa distinção a fazer é o que este é realmente a edição quando editamos
a página, porque não vai ser editando o arquivo real que está sendo
mantidas no servidor, porque o mundo não deve ter permissão
para editar seus arquivos.
Isto é apenas a edição que está na página eo que está sendo exibido dentro
o navegador.
Então, se você fosse para recarregar a página depois, dizer, a exclusão de algo como nós
ver o que podemos fazer com a chamada de remoção, que coisa iria reaparecer.
>> TOMAS REIMERS: Então, uma maneira de pensar sobre isso é se eu sou o seu computador e
Mike é, de certa forma, o servidor.
O que vai acontecer é que eu vou pedir Mike, hey, eu posso ter uma cópia do
esta página web?
E ele vai me dar uma cópia do mesmo.
>> Não, não é a coisa mais originais.
É apenas uma cópia.
E então, como seria, oh, há JavaScript aqui.
Claramente, eu deveria editar a página para ser assim.
E eu estou editando o seu exemplar.
>> Mas isso não está afetando a cópia real.
E se eu fosse para lhe perguntar novamente atualizar a página, -
hey, eu posso ter outra cópia limpa -
ele vai me dar outra cópia limpa.
E então, eu vou fazer a mesma coisa como, oh, este JS aqui que diz
para editar este.
E eu vou continuar fazendo isso.
>> MIKE RIZZO: Então, uma coisa muito legal que você pode fazer com jQuery é
realmente adicionar diferentes tipos de animações para a sua página.
Eu não sei se você já viu onde você está tentando um preenchimento de um formulário
on-line e você não preencher as coisas corretamente.
Então, uma pequena coisa desliza para baixo no topo e diz que
não tiver feito isso corretamente.
Por favor, tente novamente.
E, em seguida, ele pode até mesmo deslizar para cima.
>> Acontece que jQuery foi construído em funções que tornam tudo isto
animação muito, muito fácil.
Portanto, não é o primeiro a desaparecer função fora, o que
você pode ligar em alguma coisa.
E é uma maneira de mudar o CSS de esse elemento de uma forma animada.
Por isso, leva tudo o elemento você chamá-lo desaparecer diante.
E, em seguida, muda lentamente a sua opacidade até que ele vai completamente transparente.
>> TOMAS REIMERS: O outro populares é deslizar para baixo, o que irá fazer
algo aparecer, deslizando-a para baixo.
Assim, no caso de o menu para baixo, outra vez, quando aprendemos a detectar
quando este foi pairava sobre, você poderia apenas dizer que este fundo
parte deslizar para baixo agora.
E então, parece deslizando para baixo.
>> MIKE RIZZO: E então, se você só tem algum tipo de animação em mente que
jQuery não necessariamente fornecer.
Por exemplo, digamos que jQuery lhe fornecer um slide
para baixo e deslize para cima.
Bem, digamos que você queria deslizar algo da esquerda ou da
o tipo certo de como o CS50 página principal faz sempre
você vai a um novo painel.
Você, então, provavelmente terá que implementá-lo usando o
animar função dentro jQuery.
>> Assim, da mesma forma, você só animar.
E então, dentro dele é preciso uma dicionário dos diferentes valores
que você deveria passar.
Então, aqui, se quiséssemos animar o foo elemento de tal forma que a sua largura ou
expande ou contrai a 80 pixels, dependendo do que é atualmente.
Nós apenas passar isso como o argumento dentro dele.
>> Animar também alguns outros argumentos que você poderia passá-lo, por exemplo,
a velocidade da animação que você quer dar a ele.
E para fazer isso, gostaria apenas de dizer Google rapidamente jQuery animar.
E então, trazendo à tona esta página, você pode ver que tem um monte de diferente
propriedades que você pode passar.
>> E eu encorajá-lo - sempre que você vem através de algo que você não faz
saber ou apenas quer saber mais sobre um determinado método que você pode chamar
em alguma coisa -
apenas o Google. jQuery é extremamente bem documentado.
E muitas vezes há um grande número de exemplos que eles fornecem para você.
Se rolar para baixo -
caminho -
que podemos usar, também.
>> Mais uma vez, quando um desenvolvedor realmente vai pela dificuldade de escrever um
biblioteca, eles normalmente querem alguém para usá-lo.
Assim, ao lado vai ser uma documentação.
E que a documentação pode ser normalmente encontrados na página do projeto, que é
por isso que te deu esse site original em o início, que liga você ao
páginas do projeto para que você possa ver que a documentação.
>> Normalmente, a página do projeto no caso de [inaudível], ele disse que o
nomes das classes.
No caso de JavaScript, dá o nome das funções.
By the way, se deslocar até o topo, uma nota lateral rápida em funções é
sempre que você vê uma função implementada assim com o disco
colchetes no meio, o que significa que essa propriedade é opcional.
Apenas um heads up.
Eu vi um monte de perguntas sobre isso.
>> Então, aqui podemos ver que o animado leva propriedades
como um argumento necessário.
E tudo o resto é opcional.
Nota lateral -
você pode pensar nisso, tipo de, como páginas do manual.
As páginas mansão documentação para C e para um monte de outras coisas, também.
>> MIKE RIZZO: Então, nós aprendemos como alterar CSS diferente na página,
animá-lo e remover adicionar HTML.
Mas um dos realmente mais poderoso coisas sobre JavaScript
e especialmente jQuery -
o que lhe permite fazer é responder a diferentes elementos que acontecem.
Por exemplo, temos aqui um manipulador de eventos.
E isso só significa que sempre que esta evento acontece, nós lidar com isso de uma
determinada maneira.
>> Então, aqui, o evento genérico jQuery manipulador é o ponto em.
E, em seguida, a primeira coisa que você forneceu é o evento que deveria
ser escutado.
Então, aqui, é o clique que estamos esperando.
>> TOMAS REIMERS: Como alternativa, você tem em foco, que é muito popular.
Então, de volta ao meu drop down idéia menu.
Você teria a de cima em hover.
E então você pode mudar isso.
>> MIKE RIZZO: Certo.
E então, quando isso acontece, ele só executa esta função que nós dar-lhe
como um argumento e que ele alerta Olá ou oi.
>> TOMAS REIMERS: Então, no caso de JavaScript, este é um lugar que precisa
remover-nos de C. Nós podemos realmente assumir funções como argumentos.
E há um monte de realmente formas complexas de fazer isso.
Vamos promover uma maneira, o que é que você pode definir o
funcionar ali.
>> Então, quando você está pedindo por uma função como um parâmetro, você está basicamente apenas
vai definir a função no local.
E a maneira como você define uma função em JavaScript é você
literalmente dizer função.
Então, normalmente, o nome da função.
Mas nós nunca vamos fazer referência esta função novamente.
Então, nós deixá-lo sem nome.
>> Em seguida, os parênteses, em seguida, o encaracolado chaves, e então o código dentro desse.
Então, nós entendemos isso pode ser um pouco confuso.
Então, nós damos-lhe a forma geral de o que um manipulador de eventos parece
a seguir, o qual é em eventos.
E então, o seu código dentro desse.
>> MIKE RIZZO: Há algum perguntas sobre isso?
Isso pode ser um pouco confuso a primeira vez que você vê-lo.
>> TOMAS REIMERS: Você realmente quer abrir um arquivo e mostrar-lhes alguns
jQuery agora?
>> MIKE RIZZO: Sim, vamos fazer isso.
OK.
>> TOMAS REIMERS: Então agora estamos no aparelho.
E o que nós fizemos é que tomamos a liberdade de criar tanto um index.html
arquivo, que liga a um arquivo JavaScript.
E podemos abrir o -
sim.
Bem, ele faz duas coisas.
>> A primeira é a que liga a o arquivo JavaScript.
E vamos ver que aqui em cima.
Vemos que na cabeça do Documento HTML, particularmente.
Então você verá que há que que, basicamente, dizer SRC,
que representa a fonte.
E essa é a URL.
>> Então, aqui você pode dizer que nós temos incluído jQuery.
E nós também incluímos scripts.
A outra maneira de incluir JavaScript que você pode incluir um script embutido
tag como temos na parte inferior onde diz tipo de script é um texto de JavaScript.
>> Então, nós estamos dizendo, escuta, estamos a ponto de incluir um script.
E o tipo de que o script é JavaScript, que é um tipo de texto.
Muito simples.
>> MIKE RIZZO: Então, isso, de certa forma, começa a sua pergunta sobre como nós incluímos
JavaScript em nossos arquivos, porque quando nós tinha PHP, fazemos algo assim.
E então, temos as nossas funções PHP - digamos que fazer estoques
algo com que -
vai lá.
No entanto, agora temos as tags de script que damos a ela, que na verdade são
parte do próprio HTML, porque não é fingindo ser um arquivo HTML como se
é em PHP, porque se você realmente ir em e olhar para a fonte da página,
você vai ver essas tags de script lá com o JavaScript associado
deles em que.
>> Então, se quiséssemos escrever algum JavaScript -
vamos apenas dizer que queria mudar o corpo porque agora eu não tenho
quaisquer outras marcas que eu realmente posso editar além corpo.
Vamos apenas dizer que eu queria alterar o CSS de que.
Então, vamos em frente e mudança a cor do que para o vermelho.
>> Então eu salvar o arquivo.
Vamos voltar à nossa página web, atualizar, e ele faz isso automaticamente
porque não parece que ele esperou em tudo, porque não estávamos escutando
para um evento ou qualquer coisa assim.
>> TOMAS REIMERS: Então, se voltarmos a esse arquivo em particular - o HTML
arquivo - o que você vai ver é que temos -
lembre-se que este é carregado, de alguma forma, em ordem cronológica.
Portanto, temos pela primeira vez a cabeça. ele carrega esses dois arquivos.
Então vamos para o corpo.
E vemos Olá mundo.
Então prestamos Olá mundo.
>> E então a última coisa que nós temos se temos a tag script.
Assim, corre-se o tag script, porque é não dizendo-lhe para esperar por nada.
E isso é o mais básico maneira de executar JavaScript.
>> Com isso dito, você pode colocar o script marcar-se no cabeçalho apenas
para mostrar esse ponto?
E executar isso.
Nós vamos perceber que ele não alterou a cor.
E este é um dos problemas de JavaScript é que as coisas são carregados
numa ordem cronológica.
>> Assim, no momento em que este código estava correndo, foram selecionados -
voltar -
a tag corpo.
A tag corpo ainda não existe porque JavaScript está em linha com HTML.
Assim, o navegador é como selecionar corpo.
Há ainda existe tal coisa.
Assim, podemos ignorar isso.
E nós continuar.
>> E, então, definir uma tag body.
Mas isso nunca é atualizado.
Então, quando você está implementando roteiro etiquetas, certifique-se de colocar
após a tag body.
Próximo slide.
>> MIKE RIZZO: OK.
Portanto, mudou alguma coisa.
Mas não parece que respondeu a nós em tudo, porque apenas uma espécie de
fez isso assim que carregou a página.
Então, agora, em vez de fazer isso, por que Não podemos adicionar um manipulador de eventos.
>> Então, vamos fazer alguma coisa ao corpo outra vez.
E vamos dizer que fazê-lo em -
clique.
Vamos adicionar uma função.
>> TOMAS REIMERS: Vamos mudar sua cor para vermelho novamente.
Por que não?
>> MIKE RIZZO: Sim, vamos mudar sua "cor para vermelho novamente.
Tudo bem.
Então, vamos recarregar a página.
OK, vamos ver -
como esperado, ele não fica vermelho ainda.
Mas, então, podemos ir em frente e clique nele.
>> TOMAS REIMERS: E ele fica vermelho.
>> MIKE RIZZO: E ele faz ficam vermelhos como o esperado.
>> TOMAS REIMERS: E podemos ver como podemos começar a construir muito básico
interação.
Outras coisas que pode querer fazer é, se não quiser fazer o corpo
cor vermelha, vamos fazer o HTML fundo de cor vermelha.
Só assim é o mesmo CSS.
>> E quando nós mudá-lo, podemos ver isso efeito muito dramático de mudar o
página inteira.
Então, novamente, se você está implementando coisas, você pode ter um componente
que se destina a ser clicado.
Vamos dizer que um botão Sair e todo um outro componente,
que se destina a reagir.
Então, você deve remover uma janela quando isso acontece.
>> MIKE RIZZO: OK.
Apenas como exemplo -
você não consegue ver isso antes -
Eu vou te mostrar o que parece como quando nós esconder alguma coisa.
Então, eu vou em frente e não deslizar para cima.
>> TOMAS REIMERS: Quer dispor que em um Tipo de parágrafo antes de fazer isso?
>> MIKE RIZZO: OK.
Sim, por que não fazemos isso apenas para que podemos selecioná-lo um pouco mais.
>> TOMAS Reimers: e vamos dar-lhe uma classe.
>> MIKE RIZZO: Yeah.
OK, então vamos ver.
Em vez de selecionar o corpo real agora, eu vou selecionar tudo com
Olá turma, que aqui nós só tem uma coisa.
Assim, não devemos ter que preocupar com isso.
>> Então, eu vou atualizá-lo.
Eu vou em frente e clique nele.
E isso, de certa forma, fez um slide estranho se coisa, o que não parecia que
atraente.
Geralmente, eles se parecem bastante agradável.
Eu acho que, este - para alguns razão - não o fez.
Vou apenas fazer um fade out assim você pode olhar para isso também.
Muito mais agradável.
>> E então, se eu abrir o JavaScript console novamente e queremos ver o que
parece que quando se desvanece-lo dentro
Agora, eu só chamo fade in nele.
E ele desaparece para trás dentro
>> Da mesma forma, poderíamos também passar um argumento para fade in ou fade out,
o qual é, de certa forma, a velocidade do mesmo.
Então, vamos seguir em frente e dizer que queremos que ele vá desaparecer lentamente dentro
Então eu acho que ainda parecia muito rápido.
Mas foi mais lento do que antes.
>> TOMAS REIMERS: E se você quiser encontrar mais sobre estas coisas, mais uma vez,
basta ir para a documentação do jQuery, que te dei, e ler
através destes.
Eles documentam suas funções incrivelmente bem.
>> MIKE RIZZO: OK.
Então eu acho que vamos voltar a isso.
E nós podemos falar sobre a nossa última página.
Bem, podemos terminar com Bootstrap.
E então nós vamos abri-lo para algumas perguntas.
E se vocês tem alguma idéia de que que você gostaria de tentar jogar para cima e ver
se podemos implementá-los com JavaScript rapidamente.
>> Então, muito rapidamente sobre Bootstrap, que foi automaticamente incluído no
o seu último conjunto de problemas na pasta CSS e, na verdade, ligada no seu
header.php.
Então, você poderia ter acrescentado as classes que são definidas dentro Bootstrap para ele.
E teria um estilo automaticamente essas coisas de acordo.
>> TOMAS REIMERS: Então Bootstrap é muito coisa mágica desenvolvido pelas pessoas
no Twitter.
E o que era para fazer era -
antes de sites foram realmente difícil fazer uma boa aparência, especialmente quando tivemos
um monte de componentes comuns.
Então, um monte de botões no web parecia o mesmo.
>> Um grande número de campos de texto podem ser feitas para parece melhor do que o texto padrão
campo você provavelmente sabe de verdade sites antigos ou muito mal feita
sites, que apenas se parecem com literal caixas de texto, sem qualquer forma de texto
sombra ou qualquer espécie de bom esboço.
Então, o que fizemos foi Bootstrap ele disse, bem, Nós temos muitos estilos comuns.
Por que não fazer um conjunto comum de CSS e um conjunto comum de JavaScript como
bem, o que pode denominá-lo como está e que pode dar às pessoas coisas como queda
down menus, o que pode dar às pessoas coisas como modais.
>> Modal é o que aparece sobre a página sempre que for estritamente falando
algo, que ainda inibe interação até que você
interagir com ele.
Algo como isto é, tem a certeza que deseja excluir esta coisa?
Você realmente não pode fazer mais nada até que você diga sim ou não.
>> Levou tudo isso e embalados junto e disse: aqui vamos nós.
As pessoas podem agora usar isso.
E você pode encontrá-lo mais em getbootstrap.com.
Foi automaticamente incluídos dentro o seu último conjunto de problemas.
E você é mais do que bem-vindos para usá-lo em seu projeto final.
E se você quiser seguir que ligação para obter Bootstrap.
>> Você vai ver aqui é a Bootstrap local CSS.
Você verá Bootstrap.
E se você rolar para baixo, você verá como baixá-lo, como
instalá-lo, et cetera.
>> MIKE RIZZO: E você também pode, curiosamente, personalizá-lo para
ser o tipo de temas que você deseja.
Eu sei que é algo que eu fiz para o meu projeto final quando eu tirei a classe
foi personalizá-lo.
Uma versão diferente do que Bootstrap tinha um esquema de cores diferente e
diferentes formas de alguns coisas diferentes.
Então eu encorajo você a brincar com isso.
É uma espécie de divertido de fazer.
>> TOMAS REIMERS: Olhando na parte de cima novamente, é muito parecido com o tipo de letra
Ótimo site.
Uma grande quantidade de documentação terá início a parecer semelhante quando você tem
vi o suficiente dele.
Portanto, temos aqui o CSS componente desta.
E você vai ver como ele pode denominar as coisas.
Então, se você clicar em tabelas, por exemplo, você pode imediatamente fazer um
mesa muito simplesmente adicionando a tabela de classe para ele.
>> Mesmas coisas para os botões.
Se você simplesmente adicionar o BTN classe e BTN padrão ou BTN primária, você pode
obter qualquer um destes botões com estes estilos pré-fabricados.
E então, se você está procurando algo mais complexo do que simplesmente
restyling que w já tem, ao longo de guia JavaScript na parte superior nós
tem um monte de componentes.
>> Portanto, temos aqui transições, modais, menus suspensos, guias e dicas.
A dica é o que aparece sob o seu mouse quando você passa o mouse em algo.
Popovers, alertas, botões, desmontável acordeões é o que
eles são geralmente chamados.
Carrosséis, que aleta através de imagens como.
>> Então esses são os componentes de Bootstrap.
Gostaria de incentivá-lo a altamente vão olhar para eles.
Há um componente de JavaScript e um componente CSS.
Sinta-se livre para usá-los como quiser.
Nós não estamos indo para ir muito para eles porque sentimos a documentação
é realmente bem feito.
E sim.
Você tem alguma dúvida sobre isso?
>> MIKE RIZZO: Então como são realmente rápidos lado, o design da página web que
nós rapidamente juntos para esta apresentação é
realmente feito usando Bootstrap.
Como você pode ver, quando clicamos sobre estes abas diferentes, nunca está realmente
sair desta página index.html atual.
Então o que temos é diferente divs dentro deste index.html.
E então, sempre que clicar em um diferente guia, é só mudar
que mostra o um.
>> Por isso, de acordo com os posiciona, muda o código HTML da página, de modo que
a guia atual é marcado como ativo, de modo ele aparece de forma diferente e aparência
muito bom.
>> TOMAS REIMERS: Para que tudo foi feito sem nós escrevendo quase todas as CSS.
Vemos também um cabeçalho na parte superior, que as cores são por nós.
Mas o real colocá-lo no topo da página e fazer
ele rolagem foi Bootstrap.
E, em seguida, até mesmo para outra biblioteca - este não é aquele que falamos, mas uma
Você pode google, se quiser.
Isto é chamado prettify.js.
E vai sintaxe destacar o seu código para você, utilizando CSS e JavaScript.
>> A última coisa que quero falar sobre antes de liberá-lo para o
mundo a olhar para as bibliotecas para descobrir como usá-los e, com sorte,
ler documentação e encontrar o que você necessidade é como encontrar bibliotecas.
Assim, a primeira é que estamos apenas vai empurrar Google.
Ir Google.
>> Isso é literalmente o que fazemos quando precisa fazer alguma coisa é que o Google.
Existe uma biblioteca JavaScript que me permite manipular o tempo em um
forma útil?
Então, se eu sei que algum usuário criar uma conta aqui, e isso é o
tempo atual, como posso calcular o diferença de que, sem ter de
calculá-lo eu mesmo?
Portanto, esta é realmente uma coisa comum, Biblioteca JavaScript tempo.
E aqui nós Moment.js-- o mais popular.
>> Se precisarmos de uma biblioteca para manipular algo como cor a ser capaz de
gerar um monte de cores aleatórias -
possivelmente, para gerar um estilo ou algo assim -
poderíamos Google algo como JavaScript biblioteca de cores.
E tenho certeza de que iria aparecer com mil e uma delas.
Você está convidado a lê-los.
>> Assim, a maioria das coisas - quando você encontrá-los - vão ser hospedado em um dos
sites que código host.
Eles são alguns dos mais populares.
O mais popular, por agora, é github.com.
E se você vai para o GitHub é realmente Normalize onde estava hospedado.
Então, se você quer voltar para aquela.
Mostre-lhes que.
>> MIKE RIZZO: E isso é realmente onde este está hospedado também, se você reparou.
>> TOMAS REIMERS: Yeah.
Então, se você passar por cima de normalizar e ir para o GitHub.
Era é isso?
>> MIKE RIZZO: Essa coisa de gato é o símbolo GitHub.
>> TOMAS REIMERS: Ah.
Assim GitHub utiliza um método chamado Git para armazenar código.
É que você não sabe o que é ou isso assusta você, isso é bom.
Você não tem que saber o que é o Git porque GitHub tem um botão Download
na parte inferior direita.
>> A outra coisa útil saber sobre GitHub é a maioria dos produtos
terá um me ler.
E se eles não têm um site, o leia me falar sobre como você
instalá-lo, como você usá-lo, o que faz, et cetera, et cetera, et cetera.
O que temos sido, basicamente, passos através.
>> MIKE RIZZO: desistir da Internet.
>> TOMAS REIMERS: Isso é bom.
As duas últimas coisas que queríamos para falar sobre -
nós já conversamos sobre Git -
é solução de problemas.
E isso não é tão relevante para a o produto final, uma vez que é
quando sair 50.
E quando você tiver produtos implementação de bibliotecas ou implementando
o seu próprio projeto, você vai tiver dúvidas ou se você estiver
vai olhar para perguntas.
>> Mais uma vez, o Google.
Isso é, literalmente, o que fazemos.
Isso vai parecer bobagem.
Mas, literalmente, que o Google.
E novamente, uma das primeiras coisas normalmente você vai correr em é
stackoverflow.com, que é um maravilhoso perguntas e respostas vista.
>> É maravilhoso tanto porque você pode postar as perguntas e procurar
respostas, mas também porque ele já tem um monte de
conteúdo pré-preenchida lá.
Por isso, normalmente quando você Google uma programação questão no primeiro
casal bate em você já pode ter funcionado para ele durante seus conjuntos de problemas.
>> E então, a última coisa que realmente breve é JSFIDDLE, que é - hoje nós temos
vindo a fazer um monte de trabalho com JavaScript HTML CSS.
JSFIDDLE é um aplicativo web, que basicamente permite que você tome o seu HTML, SUA
JavaScript canto inferior esquerdo, e seu superior direito CSS.
E então ele pode criar uma rápida prestação dele e ver como ele interage.
É muito útil quando as pessoas estão tentando para fazer uma prova de conceito como
esta é a forma como você faria fazer um menu drop-down.
Talvez um uncover rápida ou o que seja.
>> MIKE RIZZO: Então vamos em frente e clique isso.
Uma nota rápida -
que, antes de sermos fazendo no clique.
Acontece que JCorey Coréia também tem um built clique no manipulador de eventos que
usa apenas porque se encontra você está vai querer fazer um monte de coisas
quando você quer algo clique.
>> Da mesma forma, ele também tem um foco.
Mas, para obter toda a gama de aqueles, olhe para o jQuery
documentação e fazê-lo.
Eu fiz algo estúpido aqui.
>> TOMAS REIMERS: Então, eu tenho um muito rápido programa aqui, que diz
botão no clique.
Então nós temos um laço for.
Para i é inferior a 404.
Ele só vai aparecer estas mensagens de alerta.
>> MIKE RIZZO: E qual foi o código 404 representava em HTML?
Alguém se lembra?
Não foi encontrado, certo.
Chrome também acrescentou esta arrumado coisa em que você pode -
>> TOMAS REIMERS: porque as pessoas gostam Mike começou a fazer isso muito e
usuários irritantes, o que permite você ver info.
>> MIKE RIZZO: Yeah.
>> TOMAS REIMERS: Será que temos alguma dúvida sobre isso, sobre JavaScript
bibliotecas, encontrando bibliotecas ou olhares que desenvolvimento web
como no mundo real?
Estamos correndo contra o tempo.
Então, eu não tenho certeza de que vamos ter tempo para implementar
a menos que seja muito rápido.
Será que somos bons?
>> MIKE RIZZO: Qualquer coisa que vocês gostariam ver muito rápido, tipo, dois
minutos ou menos?
>> TOMAS REIMERS: Qualquer coisa podemos esclarecer?
Como escrever em -
>> AUDIÊNCIA: [inaudível]?
>> MIKE RIZZO: Sim, assim que isso é -
>> TOMAS REIMERS: Você pode apenas bater Control-U no site.
>> MIKE RIZZO: Oh, eu não sabia disso.
>> TOMAS REIMERS: Eu acho que sim.
Control-U. É.
>> MIKE RIZZO: Ah, então esse é o código para o site.
Mas se você realmente deseja fazer o download nosso arquivos e tudo mais, ele está hospedado
em github.com
>> TOMAS REIMERS: reduzir o meu nome -
Tomas Reimers - Slash Seminário CS50 hífen.
>> MIKE RIZZO: E você pode encontrar tudo lá.
>> TOMAS REIMERS: Isto é o que GitHub parece, pelo caminho.
Então, novamente, quando você vê uma fonte aberta projeto, normalmente, eles vão ser uma leitura
me lá que você pode ler.
E se você voltar, você vai perceber que você tem o zip de download, que será
permite o download da fonte código para incluir o
produto em sua própria coisa.
>> MIKE RIZZO: Sim, e se nós só clique nas index.html muito rapidamente -
>> TOMAS REIMERS: Você vai ver aqui é a código-fonte para o nosso site.
>> MIKE RIZZO: Além disso, eu esqueci de empurrar direito antes com a tabela grande que
incluído, mas há também uma mesa de chmods que incluímos
apenas para sua clareza.
Mas se percorrer todo o caminho até o fundo, nós realmente não fazer muito
muito com o JavaScript coisas em tudo com isso.
É exclusivamente a partir de tudo outra coisa que tivemos.
>> Então agradecer a vocês por terem vindo e ouvir.
Esperamos que este foi realmente útil.
Se você tem alguma JavaScript relacionado perguntas ou simplesmente quero falar sobre
o que mais gosto do que outras coisas legais você pode fazer com JavaScript, adoraríamos
para falar com você.
>> TOMAS REIMERS: Se você tem uma pergunta sobre o seu projeto ou se isso pode ser
relevante, provavelmente vamos ficar por aqui um pouco depois disso.
Mas para além disso, têm um bom fim de semana.
>> MIKE RIZZO: Sim, desfrutar.
Vejo vocês.
>> TOMAS REIMERS: Até mais.