>> Tudo bem.
Então, JavaScript.
Quase todos nesta sala provavelmente tem algum grau
de conforto com que se era caminho de volta quando em SC50
ou tem sido pessoal projetos web ou mesmo
se você fez um pouco dele com este projecto passado base de PHP,
mas para a maior parte, muitos de vocês,
mesmo se você tiver um pouco de conforto
com JavaScript talvez não foram tomadas
para concedido como o linguagem funciona e o que se passa
em baixo do capô e o que vamos tentar
fazer hoje é casca de volta algumas das camadas técnicas
do que JavaScript é, como ele difere de uma língua
como PHP, como pode ser utilizado não só do lado do cliente
mas também do lado do servidor e em seguida, concentrar-se muito especificamente
neste quadro, observe nenhuma JS que é essencialmente um tempo de execução,
um programa com o qual você pode executar o código JavaScript,
do lado do servidor e está se tornando tipo cada vez mais popular
de na mesma estatura esta dias de Ruby e PHP provavelmente
e Python e você verá
que tem alguns muito poderosos recursos por meio de alguns
da língua embutido construtos.
Mas, primeiro, um pouco da fácil coisas apenas para lembrá-lo
de como essa linguagem funciona e se você tiver dificuldade em ver qualquer
disso, apenas grito fora e vamos ajustar.
Assim, um como em PHP há nenhuma noção de uma função principal,
você acabou de começar a escrever código
e você pode os mesmos interpretá-lo de cima para baixo.
No contexto de um navegador
ou no lado do servidor algo vamos ver alguns exemplos
daqui a pouco.
Condições, sintaticamente equivalente a de PHP, bem como C,
C + + e outras linguagens Então, só para lhe dar uma sensação
de como podemos estruturá-lo,
há apenas uma canônico condição.
Expressões booleanas, exatamente o mesmo sintaticamente como você já viu
Nesses mesmos outro línguas, tanto para oring
e para acabar com as coisas.
JavaScript tem switches, muito parecido com PHP e outro afazeres
e você não está limitado, como em C a primitivas integrais
como caracteres e ints pode realmente fazer outros tipos de valores.
Loops. Então, essa é exatamente o mesmo
e, provavelmente, uma dúzia de idiomas, while, fazer loops while
e, em seguida, este truque aqui.
Então, isso é uma espécie de conhecido como enumeração rápida
e é uma maneira muito inteligente de como fazer em PHP
para cada FU como bar você pode da mesma forma,
em um objeto de JavaScript, onde objeto é o nome
da variável aqui, por exemplo, var i no objeto e em cada iteração
deste loop, i é vai ser um
das chaves desse objeto.
Então, se você tem um objeto para um estudante, e um estudante tem um ID
e um nome e uma casa, iterativamente i terá
do valor do ID e nome e casa e você pode os mesmos índice
em objeto como se fosse uma matriz usando colchete
notação para obter o valor do ID ou nome da chave
ou casa e assim por diante.
E ao contrário do comum suposição, objetos JavaScript,
propriedades não são necessariamente a garantia de ser
na mesma ordem, isto é, também fiel ao PHP portanto, não assumem
que as coisas vão ficar na mesma ordem
que você colocou aqueles chave pares de valores em um objeto.
Como cerca de matrizes?
Há um par de maneiras escrevê-lo sintaticamente
mas esta é provavelmente a mais comum agora apenas usando quadrado
notação suporte.
Assim, esta é uma variável a ligar para números que contenham disposição
de seis inteiros lá, aqui está uma simples string
e observe o que está ausente a partir destes exemplos,
o que é JavaScript aparentemente inexistente.
É. Então, não há nenhuma noção de digitação, certamente não
neste contexto aqui, mas esta é realmente uma string.
Então, tem JavaScript tipos e que era de fato uma matriz
que é ele próprio um modelo e cada um dos elementos
nessa série foram do tipo número como JavaScript chama-los.
Então, é um fracamente tipada linguagem e vamos ver
que o JavaScript como PHP tem um operador identidade
e outros mecanismos de realmente verificar qual o tipo
de qualquer variável é tanto para a verificação de erros
e para outras aplicações.
E aqui está um objeto de amostra contendo apenas um ID e um nome.
E agora, perceber que nós somos usando a notação de colchete,
o recuo eo branco espaço é uma espécie de sentido
e este declara uma variável cujo nome é Rob
e cujo ID é 1 eo tipo de data é aqui o nosso número de
e corda, respectivamente.
E então este é algo um pouco diferente
Se você já fez alguma coisa com o Ajax nos dias de hoje?
Você provavelmente usado um objeto como este
mas o que é importante notar aqui?
O que é sintaticamente sempre tão diferentes, apenas um par
de coisas entre este exemplo que é reconhecidamente menor
e este exemplo maior.
Então, pela primeira vez em leigos de prazo, o que é isso?
Qual o tipo de pessoal que você diria?
OK, é um array, é uma matriz de quê?
>> Objects.
>> OK, é um array de objetos.
E agora, o foco em apenas um - qualquer um desses objetos,
o que é diferente entre esta e esta?
>> As chaves são strings.
Sim >>. Assim, o teclas são cordas,
e as chaves são realmente strings em ambos os casos
e esta é uma espécie de idiota
na minha opinião projeto histórico decisão, sempre que você estiver usando
JSON, JavaScript Object Notation,
que é essencialmente um formato de transporte
para o envio de dados normalmente através da rede
entre cliente e servidor, é preciso lembrar
que este não é realmente válido JSON e esta é uma
destes FYIs a menos que você já bater a cabeça contra a parede
durante vários minutos sem uma boa razão, não é válido JSON
porque as chaves são na verdade não citado.
JSON requer que idiotamente as chaves não só ser citado,
mas que sejam duplamente citado, aspas simples não são suficientes.
Então, estúpido coisinha e mais de um fato divertido
para fins de hoje, mas esta também seria válida JavaScript
não é apenas - o inverso não é verdadeiro.
Tudo bem.
Então, vamos ver muito mais do que isso.
Tudo bem.
Então, isso é JavaScript sintaticamente provavelmente muito
familiar, qualquer um de vocês que têm nunca usei JavaScript antes
não é um grande salto a partir de PHP ou mais qualquer linguagem procedural
que você pode ter usado.
Então, hoje vamos nos concentrar em os aspectos interessantes
de JavaScript particularmente no contexto de qualquer JS
mas não exclusivamente devido até agora você provavelmente,
se você usou Javascript, utilizado-lo dentro de um navegador.
Então, não é um ambiente de JS em seguida, um pouco vai
para nos permitir acessar JavaScript cliente código -
lado do servidor, mas em primeiro lugar, vamos dar uma olhada
em algo que é um pouco mais do lado do cliente.
Então, eu tenho ido e este é ligado no site do curso,
se você quiser jogar junto, existem dois subdirectórios
em Zip de hoje do chamado pregos fonte zip no site
e estes são apenas Alguns exemplos relembrando
das coisas que você pode ter visto antes e eu meio que construíram
-se a partir de um pouco mais simples mais complicado de provocação
algumas das características de JavaScript.
Então, vamos em frente e tomar um olhar por exemplo para isso.
Então, infelizmente a tag blink foi morto há vários anos
como a forma como tem mais bonita e mais bonita
ea marca piscar era literalmente suporte aberto piscar próximo suporte
e que tipo de não mais conosco.
Mas, ainda podemos ressuscitar essa idéia de uma marca por apenas um tipo
de pensar sobre isso logicamente, como você vai
sobre fazer algo como este piscar de forma intuitiva?
Supondo que você sabe um pouco pouco de JavaScript e CSS ou
neste momento, é OK, se você não.
>> Defina um tempo fora e se esconder então depois eu vou marcá-lo
fora e mostrá-la novamente.
>> Sim, perfeito.
Esta é uma espécie de programação 101,
como é que você alcançar um efeito visual como esse?
Bem, você de alguma forma tem que mostrar alguma coisa
e, em seguida, esconder alguma coisa, mostrar alguma coisa, esconder algo
e como Jonathan propõe usando algum tipo de tempo,
algum tipo de programação que você pode fazer este repetidamente sem necessidade
usar um loop ou algo parecido.
Então, deixe-me entrar em blink-0.html
e deixe-me encolher o tipo de letra um pouco
de modo que mais de isso se encaixa.
E vamos dar uma olhada o que está acontecendo aqui.
Então, em primeiro lugar, notar que o corpo
desta página é super simples, no interior do corpo
da página é apenas um div.
Eu tenho dado arbitrariamente um ID de saudação
e que poderia ser qualquer coisa contanto que ele é único
e então eu só tenho alguns texto simples, Olá mundo.
Então, se eu agora vá para cima, notar algum estilo fofo.
Então, eu digo, sharp saudação, que, como você sabe
em CSS significa apenas que exclusivamente identificar o elemento
com uma idéia de saudação,
tamanho da fonte vai arbitrariamente ser isso, margem e alinhar texto.
Então, desinteressante detalhes estéticos
para centrar aproximadamente o texto.
Assim, a parte interessante é no script tag aqui
que acontecer de eu colocar dentro da cabeça da página.
Então, nós - que você pode fazer isto em qualquer número de maneiras
e vamos ver alguns iterações deste mesmo programa
mas vamos começar de cima.
Então, eu tenho declarado função chamada piscar
e, aparentemente, ele usa este embutido método DOM chamado
GetElementByID que é talvez um dos métodos mais poderosos
que você começa fora da caixa com JavaScript procurando
"Saudação" não tem que ser aspas como se fosse
em HTML ou é é bom tanto tempo
como você é estilisticamente consistente nos dias de hoje ouso dizer
muitas pessoas usam Java, aspas simples em JavaScript,
aspas duplas em HTML, mas isso realmente não importa
enquanto você está consistente.
Então, aqui, se você não está familiarizado, você pode realmente acessar
com JavaScript CSS propriedades em elementos.
Então, observe que eu tenho declarou uma variável chamada div
e armazenado dentro dessa variável,
uma referência a qualquer esse elemento DOM é.
Então, se você acha que volta para CS50 ou qualquer classe em que você pensou
sobre estruturas de árvore e DOM, Document Object Model,
esta é apenas uma referência a um nó em uma árvore,
que representa esta página
e se div.style.visibility propriedade é igual, igual, igual,
escondido, então eu quero uma alternância que
como Jonathan proposta caso contrário, eu quero
para alterná-la sobre a oculta.
Agora, como no lado, porque o triplo é igual lá?
Ou o que é que contra de dois iguais?
>> Equivalente Strict.
>> Sorry.
>> Equivalente Strict.
Então, é os operadores de identidade
por onde você está verificando não apenas o valor da variável
como, uma sensação igual igual mas também o tipo do mesmo.
Assim, mesmo que nós não temos especificada até aqui todos os dados
tipos para todas as variáveis ​​em este ou qualquer um dos slides,
há um tipo associado com essa corda escondida
com esse valor, escondido e que é de corda curso.
Assim, neste caso, ele realmente não importa
porque não há nenhuma maneira que vamos confundir uma corda
de "escondido" com qualquer outro valor de
mas esta é muitas vezes uma boa hábito que eu diria para obter
em usar o igual, igual,
sinal de igual é geralmente uma coisa boa.
Isso fará com que o seu código mais robusto, tanto em PHP, mas
e em JavaScript porque você vai correr
em ocasionalmente casos de canto em que o valor pode ser zero
que você está verificando e zero pode ser confundida com a falsa
ou poderia haver e como em PHP,
Javascript também pode ter vários valores falsamente onde por zero
e falso e nulo e indefinido podem resolver implicitamente
como falsa.
Mas se você está realmente querendo para verificar se há um valor particular
como zero, o número, ou falso o booleano, então você tem
Para usar este operador de identidade.
Assim, pode acontecer de obter em qualquer maneira, mesmo que aqui,
é uma espécie de sentido porque sabemos que estamos verificando
para um valor de seqüência e é não vai ser qualquer outra coisa.
Então, aqui está a magia, então, se eu desloque-se para esta linha aqui,
aparentemente, construído para o objeto de janela
e esta é uma característica de um navegador, você pode acessar
para este super mundial objeto chamado Janela,
dentro do que é algumas funcionalidades,
se parte dos quais é definido intervalo
e leva aparentemente que tipos de argumentos?
É.
>> Chamada de função e uma hora.
>> Boa. Assim, uma função chamar e um tempo
e de modo particular uma referência a uma função,
um ponteiro para uma função de certo modo
e essa é a função o que está acontecendo
para se executado a cada número de milissegundos e, neste caso,
é a cada 500 milissegundos.
Então, é uma forma de induzir de forma eficaz e loop infinito
sem utilizar iteração mas em vez dizendo JavaScript
para o motor dentro do navegador
para fazer isso a cada 500 milissegundos ou está perto
500 milissegundos como ele pode,
verifica-se que debaixo do capô,
não há o que se chama um evento loop e nós vamos voltar a este
no contexto do nó JS que apenas constantemente tipo
de ficar sentado, girando, à espera de trabalho a ser feito
e, logo que ele percebe,
500 milissegundos passaram piscar será chamado novamente
e de novo e de novo é ao lado de qualquer outro trabalho
que precisa ser feito.
Então, o que podemos melhorar aqui?
Bem, deixe-me abrir se blink-1.html
e demonstrar o blink-1.html
como esteticamente perfeitamente idêntica.
Então, o que poderia melhorar aqui?
Bem, observe que ele era uma espécie de inútil
para definir uma função chamada Blink porque quantos
em quantos lugares eu fiz chamar um piscar função?
>> Só uma vez.
>> Então, um.
Então, não era ruim, em verdade, é provavelmente muito
para a frente.
Eu defini um piscar função, eu chamar um piscar função por meio
deste parâmetro, mas tecnicamente,
não havia razão para ele e um paradigma comum
em JavaScript é realmente fazer uso de funções lambda
como você deve se lembrar de 51 ou funções anônimas
onde se você não precisa um nome para uma função,
se só estão chamando certamente em um lugar,
por que se preocupar bagunçando seu código, desordenar a mente programadores
e seu espaço de nome realmente com símbolos
que você realmente não precisa se preocupar.
E assim, nesta versão aqui,
notar que eu estou chamando window.setInterval diretamente
no topo da minha tag script, então eu estou passando
em uma função sem nome que não tem argumento
e isso é perfeitamente fino e, em seguida, o corpo
de que é função parece idêntico ao que era antes
ea única sintática diferença agora é
aqui ao lado do 500.
Estou fechando o corpo da função
e então eu estou dizendo executar esse código anterior,
a cada 500 milissegundos.
Mudança Então, muito marginal
mas um passo em direção ao que é provavelmente um mais elegante
implementação deste.
Então, vamos dar um presente intensificarem se eu agora vá
piscar em duas, você vai ver uma biblioteca comum,
o efeito de que vai
para ser completamente irrelevante esteticamente, mas se formos
em versão dois aqui, aviso que no topo da minha cabeça,
Eu incluí o última versão do JQuery.
E então, aqui em baixo, Eu só limpo
o código um pouco, é Não vai ser um mundo divertido
para continuar a usar funções DOM nativas
e tipo de matéria-JavaScript.
Na verdade, como você pode JQuery sabe se tornou tão popular
que a maioria das pessoas só jQuery conflito com JavaScript
mas realmente apenas uma ceia biblioteca útil escrito
por um sujeito chamado John Resig e desde que os outros
que tem apenas faz uma monte de coisas tediosas
em JavaScript mais fácil e mais sucinto.
Assim, neste caso aqui o que está acontecendo?
Então, eu tenho essa aparência de um sinal de dólar, mais sobre isso
em apenas um momento, em seguida, este é um seletor CSS.
Então, é muito semelhante em espírito para o que eu fiz antes,
mas desta vez, estou literalmente usando o hash tag
para indicar uma única identificador de chamadas saudação
e, em seguida, aparentemente . Css é um método interno
para qualquer objeto é que eu apenas criei
e eu estou verificando o valor da chave de visibilidade.
E se o valor de chave que é igual, igual, igual, escondido,
então eu vou para alterná-la e Eu estou indo para alterná-la desta vez
, utilizando o mesmo método que, aparentemente, está sobrecarregado
no sentido de que tem duas assinaturas diferentes,
um com um argumento e um com dois argumentos,
a segunda das quais é o setter,
o primeiro dos quais está um getter por assim dizer.
E se curioso e se você nunca realmente olhou para isso,
se formos a jquery.css espero o top hit é de fato este
e você pode ver a mais explicação formal de
que acabamos de usar isso, . Css com o nome da propriedade
e, em seguida, o setter é CSS dot
com um nome de propriedade e um valor.
Então, ligeiramente mais limpo, mas perceber o tipo de padrão aqui
a cada iteração deste código,
estamos espécie de torná-lo mais e mais e mais apertado
e não dizer melhores desenhos
já que estamos usando alguém código de outra pessoa que está eliminado
alguma da complexidade.
Então, agora vamos fazer este ainda mais simples.
E, de fato, se eu remover todo o citações que você verá apenas todo o
comentar você verá como simples, este tem obtido.
A única diferença aqui, claro, é
que eu estou usando uma alternância método que também vem embutido
para jQuery e isso é só
porque alguém escreveu o código
que, na verdade, alterna a configuração de visibilidade
de qualquer elemento DOM que enviá-lo.
Assim, cada vez melhor.
E portanto, este é um teste padrão,
mesmo que esta seja uma ceia exemplo simples e classificar
do efeito líquido estúpido que é um pedaço de piscar de texto,
é esse tipo de pensamento processo que você deve pensar -
estar pensando em não necessariamente, o primeiro
escrita passiva algo para o próximo projeto
mas certamente como você iterar com seu consultor ou comigo
e as suas reuniões de equipe ou você apenas rever o seu código companheiros
sobre aperto as coisas, certo?
Afinal de contas, eles são menos -
um menor número de linhas de código você acabará por ter
em teoria, os menos bugs você são susceptíveis de ser convidando
porque não são simplesmente menos código para mexer com.
Tudo bem.
Assim, um par de delivery.
Funções lambda, funções anônimas,
muitos dos quais você tenha visto antes
e, em seguida, também só apertar as coisas com uma biblioteca
como jQuery neste caso particular.
Tudo bem.
Alguma pergunta?
Vamos fazer uma outra aspecto do lado do cliente aqui,
em forma de zero, temos este efeito líquido.
Super forma simples e, aparentemente, se eu tentar clicar registre-se aqui,
inicialmente ele me diz que você é registrado, bem, não realmente.
Bem, por que isso?
Bem, aqui está forma-0.html muito pouco código,
nenhuma JavaScript qualquer e é completamente uma espécie falso
de forma porque a ação valor é registered.html
o que significa que não importa o que Eu digito para esta forma,
onde é que vai ser enviados no servidor?
É. Assim, para registered.html o que é claramente um arquivo HTML
o qual é, portanto, estática arquivo que não tem meios
de tomar a entrada do usuário assumindo não há nenhum código JavaScript
embutido nele que é olhando na URL
então isso é completamente um NOOP e que nada vai acontecer
com os dados apresentados, mas você pode ver a estrutura
de uma forma bastante simples HTML5
que tenha uma senha poucos, alguns tipos de entrada.
Então, vamos realmente agora adicionar um pouco de verificação de erros
e ver como poderíamos melhorar esta situação.
Então, aqui é uma espécie de pobres o caminho do homem de aplicação do presente
e é uma espécie de pedaço desagradável de código.
Então, primeiro vamos rolagem até o fundo
para ver o que é o mesmo eo que é diferente.
A única coisa diferente agora entre esta
ea versão anterior é que eu dei o formulário e ID
de "registro" poderia ter sido o que eu quiser
mas o seu significado ser exclusivamente identificáveis, mesmo que não seja
estritamente necessário porque se um página só tem uma forma certamente eu
poderia encontrá-lo com um dos métodos do seletor do jQuery.
Mas desta forma só faz mais determinista.
Então, se eu subir agora para o meu script tag, observe o seguinte,
iguais window.onload uma função anônima.
Então, o que é esta fazendo?
Então, você deve se lembrar que em programação do lado do cliente -
JavaScript páginas HTML, em vez ter vários eventos associados
com elementos, clicando e enviar e focando
e desfoque e outros tais eventos que poderiam acontecer
como um usuário normalmente interage com a página,
window.onload faz o que diz.
Por toda janelas carregamento
portanto, uma vez todas as imagens foram baixado uma vez todos os arquivos
foi baixado e uma vez a página foi carregada,
faça o seguinte código, e notar se eu mudar para o fundo
deste método, observe que não há parêntesis
após a chaveta que é para dizer
que eu não estou executando esta função até aqui agora,
o navegador vai executar isso para mim quando tiver determinado
que a página foi carregada.
Então, vamos ver o que temos feito,
document.getElementById inscrição
de modo que só me dá uma referência para o nó
na árvore que é de tem uma ID de registro.
E agora, eu vou registrar outro manipulador de eventos
fazendo form.onsubmit fica esta função anônima
o que significa o seguinte código deve ser executado sempre que
que formulário é enviado.
Agora, a maior parte deste é apenas tipo de chato lógica.
Então, se o valor do campo de e-mail no formulário é
"Nada", então você deve forneça seu endereço de e-mail,
você gritar com o usuário com uma alertar e, em seguida, retornar false.
E então eu tenho um bando de outras verificações,
os cheques para a senha,
os controlos se o senhas são as mesmas,
as verificações se o acordo caixa de seleção está marcada ou não
e eu só gritar o utilizador se houver
desses testes realmente falhar.
E assim, aqui está um exemplo ainda embora seja um pouco artificial
aqui o fato de que eu estou usando é igual, igual, igual,
significa que o utilizador não pode tentar me enganar
digitando o valor.
Ou melhor, eu estou verdadeiramente verificando a presença
da cadeia vazia, o usuário não tenha digitado nada ainda.
Se o usuário digitou em literalmente nula,
Potencialmente poderia ser "zero" confundida com a cadeia vazia.
E eu digo que é sorte de sentido aqui
porque, obviamente, mesmo a zero não é um endereço de e-mail.
Mas se esta era uma mais campo genérico como um campo de texto
ou um nome ou uma descrição ou algo que você quer para o valor para
e não é necessariamente sintaticamente têm
para ser um endereço de e-mail, o usuário poderia digitar algo como zero,
e novamente caso esquina, mas isso é por que normalmente verificando os tipos é
uma coisa útil.
Você está realmente a verificação de o usuário ter digitado nada
nesse campo.
Então, o que acontece se nenhum desses testes falhar, bem,
retornando true dentro de um manipulador de eventos
como onsubmit significa apenas deixar o comportamento original, na verdade,
propagar e, por conseguinte, o forma vai ser submetido.
E é por isso que quando eu finalmente clicado apresentar antes de eu chegar
até register.html e se eu fizer isso agora, o aviso prévio,
Eu me gritou, se eu não fornecer um endereço de e-mail
e posso digitar malan@harvard.edu,
carmesim [fonética] carmesim, marcando a caixa,
e agora registrar e diz-me, mais uma vez,
você está registrado ou não realmente.
Tudo bem.
Então, vamos limpar isso apenas uma pouco e depois transição
para o novo mais recente coisas do lado do servidor.
Então, se eu entrar em forma-2.html, notar algumas coisas.
Então, um, eu trouxe jQuery volta para o mix
por isso há de novo é este sinal de dólar
e agora eu estou usando alguns métodos jQuery.
Então, primeiro, o que é cerca de o sinal de dólar que é
tão especial aqui?
Qual é o sinal de dólar atado durante a maior parte de qualquer código jQuery?
É.
[Inaudível Observação]
OK. Assim, a função de cifrão atravessa o DOM procura
para algo com este especial seletor CSS.
Então, é verdade, mas quase demasiado precisa.
Isso é o que acontece quando você passar uma cadeia de
como neste caso, mas você não sempre tem que passar em uma string.
Na verdade, o caso em questão, a própria primeira linha aqui é este não é um
Seletor CSS, eu estou passando em função do Lambda.
Assim, de modo mais geral - por isso, boa resposta, mas muito preciso.
Mais geralmente, o que está cifrão representa?
Apenas >> jQuery.
Sim >>. Assim, apenas jQuery ou é apenas uma função
que alguns anos atrás cara escreveu e as outras pessoas têm
desde reforçada que, literalmente, por padrão é chamado -
oops, é chamado jQuery.
Ele só - ele se transforma fora ao contrário de muitos
de sinal línguas dólar é um símbolo perfeitamente válido para usar
em nome de uma variável enquanto
em PHP cifrão obviamente, tem um significado especial
mas em JavaScript como em algumas línguas, sinal de dólar
e sublinhado e outros tais caracteres especiais totalmente legítimo
para usar em seu próprio símbolo nomes para variáveis.
Então, alguém acabou de decidir que, você sabe o quê?
Vai ser muito tedioso
para tornar o mundo inteiro digite jQuery o tempo todo,
deixe-me uma espécie de plantar uma estaca no chão e dizer:
"Esta biblioteca será usar sinal de dólar. "
E, de fato, este faz aumentar o risco
que alguém presunçosamente vai usar o sinal de dólar
para a sua biblioteca, mas há maneiras de espécie de segurar
que quando você usa o dólar assiná-lo mapeia para jQuery
porque você pode testar se ele já foi atribuído
a outra coisa essencialmente.
Tudo bem.
Então, isso é tudo o que é, não há mágica.
É apenas um olhar sexy pedaço de sintaxe que é bom
e rápido e fácil de digitar.
Então, o que acontece quando você digite sinal de dólar parêntese aberto
e, em seguida, uma função anônima.
Bem, acontece que este é notação realmente taquigrafia
por documento dot parêntese aberto pronto.
Assim, como Cynthia notado Anteriormente, já encontrou um
caso esquina.
Se você acabou de passar em a função lambda
o efeito do dólar sinal é um pouco diferente.
Na verdade, o que realmente está acontecendo é que é equivalente a este,
passando uma referência para o objeto global documento
que é global, assim como o objeto de janela é
que lhe dá alguma funcionalidade especial
que afeta toda a página ou navegador e verifica-se
que documento quando você envolvê-lo com jQuery,
jQuery percebe essencialmente, oh, esta é uma referência
a esse objeto especial de documentos,
deixe-me agora registar um manipulador de eventos chamado pronto
que não é nativa JavaScript ou DOM relacionados.
Pronto é um jQuery coisa que diz
quando a página foi carregada todos os elementos HTML
mas não necessariamente carregada todo o CSS e imagens
e arquivos JavaScript e arquivos flash e os gostos.
Então, é um passo antes em carga, em seguida, vá em frente
e executar o seguinte.
E a vantagem de usar a pronto meios é que você pode, você sabe,
que todos os elementos no seu DOM,
todos da unicamente identificado coisas com IDs, eles existem mesmo
se a página, o seu conteúdo ainda estão carregando e de carga
e você tem algum ícones quebrados por um momento
ou a página em branco no fundo.
É.
>> O que aconteceria if [inaudível]?
>> Exemplo perfeito, uma pergunta perfeita.
Então, vamos ver se podemos simular isso agora.
Então, deixe-me ir em frente e excluir esta duas linhas até aqui e depois
sem se preocupar em corrigir o recuo, deixe-me ir em frente
e apagar este aqui embaixo - oops, este aqui embaixo.
E agora, deixe-me ir para o página, vá para forma-2.html e tipo
Registrar, nada parecia acontecer, vamos dizer, por que é que,
vamos em frente e abrir se inspetor do Chrome,
abrir o console só para ver se alguma coisa acontecer aqui, agora,
registrar, ainda nada.
Assim, o código é sintaticamente multa
então eu não estou vendo nenhum mensagens de erro vermelho,
mas o que claramente não está acontecendo?
Nenhum dos meu código está certo, ele não está funcionando para que nenhum
dos meus códigos parece ser execução, então por que é isso?
Bem, JavaScript e navegadores mais geralmente, executar o
conteúdo de uma página web, top para baixo, da esquerda para a direita.
E o problema é que causa o início
desta página HTML então cabeça então roteiro depois outro script,
isso vai ter executado antes o que é ainda pronto,
ou ainda existe na árvore representação da página.
A forma em si, nem mesmo o corpo existe neste momento.
Então, jQuery é inteligente o suficiente com ele é a verificação de erros
que, se não houver elemento com o ID único de registo,
ele não vai socorrer em você
e apenas acionar alguns consola erro e quebrar toda a página,
ele vai ignorar silenciosamente você, mas a razão de que nenhum
deste código sempre executa é
porque quando você tem registrados este apresentar manipulador,
não existe qualquer elemento anexá-lo.
Então, é uma espécie de não op lá.
Assim, através da especificação, em vez, aguarde até que a idade foi carregado
se fizéssemos o window.onload coisa que é uma espécie
da maneira da velha escola de fazer ou a maneira mais sexy jQuery
assim, podemos dizer que esperar até que todos
dessas tags HTML têm foi analisado de modo que mesmo
se as imagens não tenham carregado, em menos que o nó está na árvore,
então JQuery pode ser garantir que está tudo lá.
É.
[Inaudível Observação]
Sim, bom, sim com certeza.
Então, a outra solução de isso, se você não usar este
ou não se lembrava que isso existia,
você pode mover-se absolutamente tudo isso para o fundo
da página web, dentro do corpo ainda, mas abaixo do formulário
E isso também resolver este problema.
É tipicamente considerado uma má prática.
É um pouco confuso e desleixado especialmente
se você continuar tocando tudo para o fundo da página,
especialmente quando eu estou mantendo coisas simples, colocando todos
do meu código dentro da página HTML
quando é claro que você pode certamente adquirir o hábito
de factoring-lo para um arquivo separado
em que ponto é apenas bom
para centralizar o arquivos na cabeça.
Exceto que não é um preço que você paga
colocando JavaScript outros ativos, como arquivos CSS
na cabeça da página, o que é um risco que você corre?
>> Mais lento o carregamento da página.
>> Mais lento o carregamento da página, por quê?
>> Porque nós estamos tentando para carregar todas as bibliotecas
antes [inaudível].
>> Exatamente porque os navegadores ler o código de topo para a base,
esquerda para a direita, se o Google analytics são lentos
ou o CDN jQuery é lento ou a API do Facebook é lento
e esse arquivo só trava potencialmente dependendo
sobre a forma como você colocou esse arquivo, o página inteira pode parecer travar.
E se você ver isso muito francamente
em sites que têm muito anúncios de baixa qualidade
sobre eles, nós somos apenas um lento ou site abatido poderia pendurar uma página
por algum tempo indeterminado número de segundos
até que, finalmente, o navegador espero que expira em que
e em seguida, mostra o resto da página.
Então, se você já usou como o Facebook, como o botão,
em sua página web, deixe-me ver se eu posso encontrar este
sem ter que entrar aqui.
Então, se você vai para o Botão como o do Facebook
e clique em um código get, porra,
vamos ver se podemos encontrar o exemplo,
certamente alguém tinha postado isso.
[Pausa]
Eu vou dar-se em alguns segundos, se não vemos isso.
Facebook asynch - OK.
Então, este é o código e, a menos eles mudaram recentemente
que o Facebook realmente recomenda que você use
para carregar a sua biblioteca e, na verdade, propor
que você colocar isso em o corpo de sua página.
Então, o Facebook avisa criar uma espécie de estúpida DIV
que só tem identificação única como este, em seguida, ter uma tag de script
e toda essa complexidade faz essencialmente a seguinte
e eles não usam qualquer JQuery porque eles não querem
para assumir qualquer outra dependências,
deixe-me passar esta mais um pouco.
Assim, notar que eles têm uma função anônima aqui,
mais sobre isso em um momento,
eles usam document.createElement,
eles estão criando um elemento DOM, isto é como malloc por assim dizer
onde a etiqueta é do tipo script, que é, em seguida, especificando
que o atributo async dessa tag vai
a ser verdade, então vá em frente e descobrir o que o URL
de JavaScript do Facebook deve ser
e esta é apenas a maneira extravagante
de verificação deve seja HGP ou HDPS.
E então, finalmente, você notar que o Facebook faz,
eles recebem o nó DOM que tem um ID do Facebook raiz
que é o que eles disseram você colocar na página
e então acrescentar a criança de modo que o efeito de tudo isto é
a espécie de injetar dinamicamente uma nova marca de script em sua página
como um filho do DIV que você inserido lá para que o resto
da página cargas felizmente
e, em seguida, este código efectivamente é carregado de forma assíncrona.
Assim, essencialmente, depois de o fato e eu adiada menção
da função anônima,
o que é isso mal-cheiroso sintaxe referindo-se aqui
quando eu tenho não só função abrir paren, paren perto
e, depois, chaves, porque o parêntese aberto aqui
e, em seguida, o próximo abrir, fechar paren lá, o que é que está fazendo?
>> [Inaudível] que define e, em seguida, executar?
>> Exatamente, é a definição de um função que é anônimo
mas apenas a definição de uma função,
não é claro que não execute uma função até que você chamá-lo
pelo nome, mas é claro que isso é uma função anônima
então você não pode chamá-lo pelo nome, mas você pode
em JavaScript executar uma função anônima apenas
encapsulando a coisa toda entre parênteses como fizemos
com este paren e esta paren aqui e, em seguida, uma fixação
para o fim da função parêntese aberto, paren próximos,
se você não quiser passar quaisquer argumentos.
Mas isso parece meio idiota,
como por que este adicional complexidade sintática
que a maioria das pessoas não parecem reconhecer, o que é o valor
de envolver aqueles três linhas de código
em uma função anônima desta forma.
É.
>> Para evitar a substituição de um valiosa no [inaudível].
>> Exatamente, para evitar sobrescrever uma variável
na página existente, certo?
Facebook é um pouco presunçosamente decidiu,
eles vão usar o variável E, é bastante provável
que você ou qualquer pessoa que use o Facebook como botão
ou qualquer outro plugue sociais
em tem uma variável em algum lugar chamado E. Assim,
encapsulando todas de seu código dentro
desta função anônima, eles essencialmente tem seu próprio escopo
que não arrisca clobbering todas as variáveis ​​existentes.
Então, isso também é verdade um paradigma muito comum,
especialmente quando se escreve um código de biblioteca
ou quando você mesmo não fazer quer encher o espaço de nome
com outras variáveis ​​que quer o valor de viver
e morrer quando sair esse bloco de código,
esta é uma técnica agradável em JavaScript.
Tudo bem.
Então, em seguida, voltar a este exemplo aqui, tudo o que fizemos no final
com este exemplo é acabou de limpar o código.
Então, ele ainda tem um todo bando de switches, um grupo inteiro
das condições aqui, mas notar um pouco de sintaxe,
este acessa o nó DOM com o registro de identificação exclusivo,
os meios espaciais olhar agora para um descendente desse nó,
encontrá-lo se ele é do tipo entrada e, em seguida, até mesmo
se você ainda não viu esse antes, você deve saber
que isto significa apenas encontrar o com a marca de entrada,
os elementos de entrada que tem um atributo de nome com um valor
de e-mail, e depois deixá- me acenar a mão em algum
o resto não é tudo o que estimulante
mas realmente apenas sintaxe jQuery para as mesmas operações.
Tudo bem.
Mas o que não é tão importante aqui é o material lado do navegador
mas sim o fato de que nós tinha formas mais limpas e mais limpas
de realmente fazer que o trabalho de código.
Tudo bem.
Alguma pergunta?
[Inaudível Observação]
OK. Agora a parte divertida.
Então, node.js Por quê?
Quem se importa?
O que você sabe do que hoje?
Node.js, por quê?
Henry [assumido ortografia].
[Inaudível Observação]
Redefinição de bateria?
O que - este é um perfeito cabide penhasco
para a segunda metade de hoje.
Por que não ir e tomar um intervalo de 5 minutos aqui,
há uma metade de doces máquina de lá, se você faria
como alguns doces sem colocando dentro de um quarto