Fundamentos do Javascript: do nada ao ninja

1. Boas-vindas: Olá. Bem-vindo ao JavaScript Essentials. Neste curso, você aprenderá como se tornar um desenvolvedor de frente e JavaScript. Você já deve ter alguma compreensão de HTML e CSS, mas se não tiver, tudo bem porque não é tecnicamente necessário. Este curso foi projetado para ajudá-lo a entrar no desenvolvimento Web como uma carreira, que você esteja aprendendo habilidades de programação transferíveis, como tentar , pegar , funções, aulas e herança. Mas você também estará aprendendo todos os conceitos básicos do JavaScript. Você pode pegar as habilidades deste curso e aplicá-las a outras linguagens no futuro, como No Js python e PHP Plus. Você aprenderá sobre os bits estranhos e JavaScript para incluir escopos de elevação e fechamento . E enquanto você está passando pelas lições, há pequenos projetos que lhe darão experiência de trabalho com código JavaScript real . Assim, você não entra no mercado de olhos vendados e de mãos vazias. As lições vêm com exemplos de código para download e diminuir as atribuições para que você possa obter as mãos na experiência com novamente código realmente JavaScript. Como um bônus, você também vai aprender alguns es seis também. Chegando ao final deste curso, vamos falar um voto de cinco maneiras que você pode ganhar dinheiro enquanto aprende a codificar como um desenvolvedor júnior ou intermediário com muito pouca habilidade e como você pode invadir a indústria de desenvolvimento Web . Eu também lhe darei alguma orientação sobre o que você deve aprender depois disso . Pontuações essenciais do JavaScript. Algumas pessoas dizem que você deve aprender Essex React No Jake cansado, python angular PHP, ruby, etcetera, etc. Isso é demais, então eu vou dar um pouco de clareza para você. Agora, neste curso, não há fluff mágico. Na verdade, eu vou estar compartilhando alguns dos segredos para me tornar um desenvolvedor web de sucesso que nenhum outro professor quer admitir. Nunca ouvi outro professor admitir nada parecido com o que vou te dizer neste curso. E, de fato, o primeiro segredo é que o desenvolvimento da Web é realmente mais do que apenas escrever código. Oi, sou Caleb, seu professor de JavaScript. Eu sou um desenvolvedor web de pilha completa de on-line e estrutura. Sou um empreendedor, e ensinei dezenas de milhares de estudantes nos últimos anos. Tem codificação desde 1999 e agora estou passando meu conhecimento JavaScript para você agora aqui. Só algumas coisas que os alunos tendem a apreciar em mim. Minha maneira direta de ensinar de novo. Sem penugem. Como posso dividir conceitos difíceis em peças simples e fáceis de aprender e quão rápido eu respondo perguntas que eles têm agora. Eu acredito que a aprendizagem online é mais importante do que assistir vídeos. Precisa aprender a teoria da codificação. Absolutamente Você precisa refrescar sua memória, e você precisa praticar escrever código. Então, novamente, você tem as mãos na experiência de codificação. Depois de concluir este curso, você receberá um certificado de conclusão para provar que aprendeu os fundamentos do JavaScript . Então aqui está o que está incluído neste curso. Vitalícia completa 24 7 Acesso a todos os vídeos HD, um certificado de conclusão, acesso ao nosso grupo de suporte, exemplos de código para download, projetos de codificação e um exame final e uma garantia de devolução do dinheiro de 30 dias. Ou seja, se você não aprender nada com este curso no primeiro mês, vá e aperte o reembolso. Pegue seu dinheiro de volta. Então, o que você diz? Você está pronto para se tornar um desenvolvedor de JavaScript? Se estiver, clique no botão de inscrição 2. Introdução: Olá e bem-vindo ao Javascript Essentials. Neste curso, vamos aprender os conceitos básicos de JavaScript. Se você está procurando um curso sobre Sim, seis. Não é isto. Este é mais um curso para iniciantes sobre algumas das coisas que vamos passar. Eles incluem arquivos JavaScript internos vs externos. Onde colocar seu JavaScript em seu arquivo HTML todo o caminho para baixo para variáveis. Atribuição comum, operadores de manipulação de string. Se mais tentar pegar seletores de consulta para selecionar o seu HTML dentro do seu d o m alterando valores do HTML interno O que içamento é funções. Funções anônimas estavam indo para entrar em um levantamento objetos, loops. E vamos começar a falar sobre a mudança de estilos CSS com seletores classes com métodos diferentes. Como o quê? Nossas aulas. O que torna o objeto javascript orientado? Podemos mergulhar em um pouco de E s seis JavaScript. Coisas como Consulado Anvar ou Errol funções chegando ao final deste curso, vamos aprender sobre frameworks, algumas bibliotecas JavaScript realmente incríveis que tornarão sua vida muito mais fácil. E eu vou mostrar a vocês como você pode ganhar um pouco de dinheiro escrevendo JavaScript através deste curso, haverá alguns projetos diferentes. Eles não vão ser excessivamente extensos. Eles não vão realmente fazer seu cérebro suar. Mas eles vão ser uma ótima prática. E isso só vai consistir em coisas que você aprendeu neste curso. Então não vamos supor que você já conhece outro JavaScript de outro curso. Nós não vamos assumir que, você sabe, você sabe, CSS três transições e animações ou qualquer coisa avançada como isso foram puramente aprendendo JavaScript aqui, e isso vai fazer você realmente rolar como um desenvolvedor JavaScript no front-end de qualquer site de desenvolvimento. Tudo bem com isso dito, Obrigado por participar deste curso. Se você tiver dúvidas, definitivamente deixe-as nos comentários abaixo. Não se esqueça de se juntar ao grupo do Facebook. O link estará nos comentários abaixo ou será na próxima lição, e estou ansioso para vê-lo em breve 3. O que você pode esperar: Ei, pessoal, bem-vindos de volta antes de começarmos, o que eu realmente quero falar é sobre o que vocês podem esperar neste curso. Há alguns cursos onde são apenas cursos de vídeo. Ah, e é um professor falando com você, e eu fiz esses cursos antes, e isso não é mais aceitável. Eu quero que Teoh apenas tipo de definir as expectativas para o que é este curso e o que você vai ser capaz de obter fora dele. Então a primeira coisa que você pode esperar deste curso são exemplos de código, certo? Tudo o que vou escrever, seja em sublime ou diretamente no navegador, vou te dar esses exemplos de código. Então, você pode esperar exemplos de código. A segunda coisa que você pode esperar é que eu não quero chamar isso de trabalho em casa, mas eles são tipo de tarefas. É uma maneira de praticar tudo o que você aprenderá. Então vamos passar por 10 15 20 pequenos cursos rápidos e você não vai realmente fazer um monte de lição de casa nesses. Mas no final desse módulo ou no final de Siris de vídeos, vamos ter uma pequena tarefa. As tarefas não vão ser difíceis. Eles não vão machucar seu cérebro. Eles não vão te estressar. Eles são puramente projetados para praticar o que você tem assistido nos vídeos e sinta-se livre para sempre voltar e usar qualquer tipo de exemplos de código interativo novamente. Então Número dois o que você pode esperar atribuições. A terceira e última coisa que você pode esperar deste curso é o acesso ao nosso grupo no Facebook , e este é um grupo de desenvolvedores do Facebook. Tem sido para cima por um par de semanas já em há mais de 500 desenvolvedores. Talvez com o tempo você esteja assistindo isso. Haverá milhares de desenvolvedores neste grupo, mas é apenas um simples grupo do Facebook onde as pessoas podem ir e fazer perguntas. Então, se você está assistindo isso em qualquer plataforma, você pode vir e se juntar ao nosso grupo do Facebook e fazer suas perguntas lá estavam felizes em respondê-las. Estamos felizes em lhe dar apoio. Há novamente centenas, possivelmente milhares, de desenvolvedores que estão dispostos a ajudá-lo a qualquer momento. Não há marketing adicional. Você não precisa se inscrever. Você não precisa dar seu e-mail ou qualquer coisa assim, é apenas um ótimo lugar para ir e fazer suas perguntas. O número três é o nosso grupo no Facebook. Você pode fazer uma pesquisa no Facebook para aprender a codificar. É assim que se chama o grupo do Facebook. Vou criar um link e colocá-lo neste documento onde você pode baixar este documento pode visualizá-lo. Ah, ele também vai estar nos comentários ou em conteúdo adicional para download para que você possa encontrar o link lá dentro. Ou você pode simplesmente pular no Google tipo em aprender a codificar, e você deve idealmente encontrar esse grupo do Facebook. 4. Onde colocar seu JavaScript: Ei, pessoal. E bem-vindo de volta ao Javascript. Essenciais Nesta lição, vamos rapidamente ver onde você deve colocar seu JavaScript. Agora, há muito debate sobre se você deve colocar seu JavaScript e cabeça de seu HTML ou no corpo em sua parte superior ou inferior de seu corpo s. Então eu só queria rever rapidamente quando você deve colocar seu JavaScript em que área A primeira parte é a nossa cabeça. Então é aqui que você coloca, você sabe, seu título, e isso é apenas, você sabe, basicamente um macho dela. Todos nós sabemos disso. Mas se você quisesse, você também poderia colocar um pouco de javascript aqui. Agora eu vou escrever um pouco em linha JavaScript e você pode escrever qualquer coisa aqui. Isto é apenas javascript normal. Você não precisa se preocupar em saber o que é isso agora, mas saiba que você pode colocar javascript na cabeça. Dito isto, eu aconselharia fortemente a não fazer isso só porque um monte de JavaScript depende do modelo de objeto de objeto do documento, que é basicamente a sua estrutura HTML. Agora, se você tem algum javascript que está carregando na cabeça, direito, assim como CSS, seu navegador vai carregar sua página de cima para baixo. Então, se aqui seu javascript está tentando pegar um elemento que ainda não foi renderizado no corpo, que não está aqui, então ele vai produzir um erro ou ele vai dar a você resultados imprevisíveis . E isso realmente depende de quão rápido sua página pode carregar a velocidade com que o JavaScript descarregar, quão rápido os computadores do usuário. Há muitas variações que não podemos controlar. Então, de modo geral, quando você tem que trabalhar com qualquer coisa que esteja na mão, não coloque na cabeça. Coloque-o no corpo. Agora há dois lugares no corpo onde você pode colocá-lo para que você possa ter você sabe, seu HTML regular aqui, e você pode colocar seu JavaScript, você sabe, aqui no topo. E para alguns scripts como analytics, isso pode ser melhor porque o Google Analytics, por exemplo, pedirá que você o coloque no topo do seu elemento corporal e do Google Analytics. Tudo o que é é javascript. Agora, a razão pela qual eles te pedem para colocá-lo no topo é simplesmente porque ele não depende mais nada por um tempo. Pode demorar um segundo. Pode carregar muitas vezes. É um síncrono, por isso não vai abrandar nada de qualquer maneira. Se você clicar em um botão, Google Analytics não será necessariamente acionado nesse momento, a menos que você faça algum trabalho de análise personalizado . Mas, na verdade, até lá, não é grande coisa. Agora JavaScript que você escreve provavelmente vai estar trabalhando com seu burro. Ele vai estar trabalhando com qualquer tipo de HTML que você já escreveu que suas páginas vão carregar, seja através de python ou PHP ou nenhum Js qualquer tipo de JavaScript que está em seu dom precisa ser carregado antes que você possa pegá-lo. E é por isso que você coloca seu JavaScript aqui. Agora o que isso fez por mim. Tudo o que fizeram foi “tab “datilografado Isso é só um pequeno plugue para o navegador que estou usando. Estou usando sublime. O plugue é chamado M it. É realmente bom, não é o ponto agora, mas o que isso faz é que ele me permite digitar rapidamente algo fora aba hit e um auto completo, então você vai ver muito disso durante todo o resto desta classe agora aqui dentro temos nosso tipo Texas igual a JavaScript, que não usamos aqui porque nosso navegador sabe que este é um script. Isso só vai ser JavaScript. O único tipo de navegador das Escrituras pode ser executado é JavaScript, o desenvolvedor Web front-end. Empilhe. Lee já tem três línguas, e tecnicamente não são todas, na verdade, línguas. Você tem HTML, que é marcar. Você tem CSS, que é, você sabe, essencialmente marcar, embora esteja ficando muito mais complexo nos dias de hoje e você pode começar a adicionar variáveis que ainda não são inspecionadas a partir de meados de 2017. Mas as variáveis estão chegando. Isso vai ser muito legal. E JavaScript, que provavelmente fez o maior progresso desde que nasceu há mais de 20 anos, ficando um pouco fora do caminho aqui. Esta parte inferior aqui, onde diz que o tipo de script é igual a texto barra javascript queremos colocar SRC é igual a javascript dot Js E tudo isso faz é dizer, Olhe , Sr. navegador, qualquer que você Você vai carregar um script para mim. Carregue este arquivo Js javascript interno. Não precisamos de ter o nosso guião lá agora, a seguir em frente. Nós não vamos realmente escrever qualquer JavaScript em linha em nossa página. Podemos fazê-lo no navegador quando o meu fazê-lo em caneta de código em algum lugar um pouco mais interativo , se eu precisar. Vou usar um cego, mas geralmente vou tentar ficar longe disso. Uh, a razão para isso é javascript é para ser interativo. E eu acho que ensinar em um ambiente interativo amore vai ser melhor para a experiência geral de aprendizagem. Então, para falar rapidamente sobre isso, onde você deve colocar seu JavaScript? Bem, se não tiver certeza, coloque sempre antes da etiqueta do corpo. Não coloque no meio da sua página. Não coloque no topo da etiqueta do corpo. Nem ponhas isso no teu cabeçalho. Se não tiver certeza, coloque no fundo. Agora, se você estiver usando biblioteca ah como consulta J, que você pode ou não pode estar familiarizado com neste ponto, Mas as bibliotecas devem sempre ser carregadas na parte inferior, a menos que especificamente dito o contrário. Há alguns frameworks que então sim, você sabe, carregar sua biblioteca javascript e ele vai se parecer muito com isso e apenas movê-lo para a cabeça do seu script, e isso é tudo bem. Se eles te mandarem fazer isso, então, com certeza, faça assim. No entanto, novamente, se você estiver incerto, basta pegar todo o seu roteiro. São os scripts linha HTML em vez, e apenas jogá-lo na parte inferior da sua página. Desta forma, sua página pode carregar tudo. Seu navegador pode carregar tudo, e com o tempo o JavaScript está pronto para renderizar todo o seu html está lá. A única coisa que vai estar faltando é a tag body de fechamento e a tomada HTML de fechamento , que o JavaScript geralmente não se importa. Ele só quer abrir etiquetas, geralmente falando, então é que, uh, encerrar rapidamente. Você não coloca seu script de trabalho na parte inferior de nenhuma página. Se você tem que escrever qualquer em linha JavaScript, direita, colocá-lo na parte inferior de sua página também. Novamente. Deixe que don que o modelo de objeto de documento carregar 5. Variáveis e tipos de dados: Olá. Bem-vinda de volta. Hoje vamos falar sobre as temidas variáveis. Variáveis na verdade não são tão ruins quanto as pessoas pensam que são quando começam a programação . Variável é realmente apenas uma maneira de manter informações e uma maneira que é um pouco mais fácil memorizar. A parte complicada vem quando você começa a falar sobre diferentes tipos de dados agora tipos de dados de algo que também vamos falar nesta lição. Se mova por enquanto. Vamos ficar com uma variável regular, certo? Então variável se parece muito com isso. Você declara com longe ou em JavaScript que você não precisa necessariamente da barra. No entanto, apenas para fins de aprendizagem, vamos ficar longe. E vamos dizer que o nome é igual ao Caleb. Agora, isso é o que declarar uma variável. Parece que você tem sua declaração, você tem seu nome de variável é igual a apenas um sinal de igual. Isso é importante, e falaremos sobre isso em uma lição mais tarde. E aqui temos apóstrofos, que tecnicamente poderiam ser substituídos por aspas. A mesma coisa, e termina em ponto e vírgula. Agora o javascript ponto-e-vírgula é completamente opcional. Você não precisa tê-lo lá, mas se você vai escrever um código limpo, é uma boa idéia tê-lo lá. Existem alguns padrões lá fora que preferem, se você tê-lo novamente, não realmente necessário no futuro. Se você estiver escrevendo uma linguagem de programação como ah Ph. B, por exemplo, por exemplo, cada linha no PHP tem que terminar em ponto e vírgula. Então, ter o hábito de escrever um semi cólon versus não escrever o semi cólon é uma boa ideia. Não, se você escolher toe learn python no futuro, Python não termina no semi cólon. Só tem linha em branco. Na verdade, Python se parece muito com isso agora. Este não é um curso de python, mas eu só estou mostrando. Você está demonstrando que existem maneiras diferentes de fazer isso. Avançando nesta classe, sempre teremos um ponto-e-vírgula no final de cada linha. Pode perder um casal aqui, mas JavaScript não é rigoroso o suficiente para reclamar sobre isso, a menos que haja obviamente uma boa razão para, uh, mas eu sempre tento colocar um ponto-e-vírgula no final. Agora, para esta lição, eu realmente vou fazer um pouco mais dentro do próprio navegador para que você possa ver que você pode realmente escrever JavaScript dentro do seu navegador. Vou criar um novo arquivo. Eu ia chamá-lo de índice dot html. Ok, então eu tenho meu arquivo html index dot, e tudo que eu fiz foi adicionar alguma estrutura HTML básica. Não vamos escrever javascript aqui. Mas vou abrir isto dentro do cromo . Tudo bem? Então, em Crumb, há absolutamente nada de extravagante sobre isso. Tudo o que vamos fazer é certo. Clique e vá para inspecionar. E você pode fazer isso em praticamente qualquer navegador. E eu ia mudar-nos para ficarmos à direita. E aqui, temos elementos, fontes do conselho, desempenho da rede , memória , etc, etc. O que queremos é Cônsul e bem aqui, você pode realmente levar um JavaScript direto para o navegador. Então, se dissermos que o nome da variável é igual a Caleb e hit, enter, ele diz indefinido em todos. Honestamente, está mentindo para você. Não é indefinido. Então, se formos em frente e digitar o nome, pegamos o Caleb. Certo? Esta é uma variável. Isso significa que o nome da variável e Amy tem um valor chamado “morto”. Agora, se você se lembrar de volta aos seus dias de matemática onde AH, seus professores dizem, encontrar o valor de X e X seria nove ou 3.14 Algum número certo? Essas são variáveis. Agora, não desanime. Isso é realmente tanto matemática quanto vamos fazer por um bom tempo. A matemática em JavaScript não fica muito extensa a menos que você queira entrar em gráficos ou bibliotecas de animação ou qualquer coisa assim. Mas para o que estamos fazendo, a matemática é super simples, então você não precisa ter medo disso. Agora há uma diferença entre diferentes tipos de variáveis. Por exemplo, idade variável. Eu poderia dizer 27 direita novamente. Eu apertei, Enter diz indefinido. Mas se eu digitar página, diz 27. Mas o que acontece se eu digitar idade variável para escrever? Tenta auto sentir por mim? Você pode ver que a idade de dois é igual a, e eu coloco em citações. Se eu colocar isso em citações novamente, diz indefinido. Mas se eu disser idade, também, a diferença é que um é apenas um número, um inteiro, e o outro tem citações em torno dele. Isso é uma grande diferença. E esta é a diferença entre um tipo de dados. Não se preocupe em memorizar todos nós. Nós vamos ter muito mais mãos sobre isso um pouco mais tarde. E por enquanto, você realmente precisa saber que existem diferentes tipos de variáveis de seus diferentes tipos de dados. Então, o que temos experimentado até agora nome seria uma string. Agora qualquer coisa com aspas em torno dele ou com apóstrofos em torno dele é chamado de string. Se ele não tem aspas, é um número completo é chamado um inteiro. Mas e se tivermos Variável pi é igual a 3,14 algo algo, algo certo e digitamos alto novamente. Agora isso se parece muito com um inteiro, mas tecnicamente não é um inteiro. Bem, quero dizer que é, mas porque tem um ponto decimal nele, na verdade é chamado de flutuador. Agora, à tona é basicamente apenas um número que tem um ponto decimal, e se você se lembrar de volta aos seus dias de matemática, moeda zero livre é exatamente a mesma que três. No entanto, quando estamos falando sobre ser exatamente o mesmo na programação. 3.0 não é exatamente o mesmo real. Deixe-me levar isso de forma diferente. Não é exatamente o mesmo é três. Este aqui apenas três é um inteiro e 3.0, isso é flutuador? Isso é incrivelmente importante na altura? Não. Talvez em todo o seu futuro JavaScript como um desenvolvedor de JavaScript, ele pode nunca aparecer. No entanto, quando entramos em comparações, como comparamos se três é igual a três? Ou se algo é verdadeiro ou falso, certo? Esses tipos de comparações estavam indo para entrar nelas, e de repente isso vai fazer muito mais sentido. Então, apenas tenha paciência comigo por enquanto. É importante saber isso agora. Estamos nos adiantando um pouco, mas é muito importante saber. Agora há outro. Como você pode ver, na verdade, eu apertei Enter. Basta fazer uma nova linha em diz falso. Mas se fizéssemos, ah, três é igual a três. Isso é verdade de novo. Vamos falar disso um pouco mais tarde. Há outro tipo de dados por aí. Tipo de dados chamado No eso. Poderíamos dizer variável. Vamos chamar-lhe alguma coisa. Ah, e na verdade, não se sabe se isso foi definido. Mas o valor é indefinido. E assim vemos isso em todos os outros lugares. Tecnicamente, esse nome de valor não é indefinido, mas algo é indefinido porque não escrevemos. Algo é igual a outra coisa, que na verdade teria quebrado porque não havia cordas. Agora, quando estamos declarando uma variável como uma string, temos string variável. Temos que ter citações ou citações ao redor. Não importa qual deles, desde que sejam iguais. Então você abre com a citação, algo que você termina com uma string de tipo aspas. Esse é o nome da variável que digitamos que declaramos. E obtemos o valor. Eu vou ir em frente e limpar isso agora o que acontece quando tentamos declarar uma string sem aspas ou apóstrofos? Certo? Fazemos variável. Outra coisa é igual a, e nós poderíamos apenas escrever qualquer coisa que fosse uma corda, certo? Então não é um número, não está flutuando. É no objeto ou matriz vai chegar a esses. É suposto ser uma força como uma frase, mas não tem citações em torno dela. Então nós dizemos olá Meu nome é Caleb, e temos uma sintaxe ar inesperado identificar para identificador. E isso é porque outra coisa acha que está fazendo referência a outra variável tecnicamente chamada olá. E o espaço quebra todo o processo. Agora, quando se trata de declarar uma variável, há muitas maneiras diferentes para ela. Você pode camelo caso, certo? Então o invólucro de camelo é você começar com uma letra minúscula e cada palavra. Depois disso, juntos em um. Palavra longa tem uma caixa de camelo capital ou, por exemplo, Olá. Meu nome é Caleb. Isso é invólucro de camelo. Só vou fazer isso maior. Na verdade, há outra maneira. Teoh nome sua variável variável é e você pode usar sublinhados. Olá. Meu nome é Caleb. Não, você não pode realmente ver isso. Lá vamos nós. Eu tenho sublinhados lá é igual a teste. Agora. Por que isso traz a corda? Quando eu defini aqui, mas em exemplos anteriores , sempre dizia indefinido. Mas a razão pela qual foi indefinido foi porque estávamos usando var e var tem um mecanismo de elevação ligado. E acho que isso vai para algo que falamos no futuro. Só porque içar é uma espécie de exclusivo para JavaScript. Mas é apenas uma daquelas coisas que é bom saber, porque eventualmente você vai ter um problema onde é como, por que é minha função anônima ou por que minha variável não está sendo definida? Ou por que está sendo definido? Mas ainda não tem nada que se chame içar. Vamos falar disso mais tarde. Não se preocupe com isso. Voltando às convenções de nomenclatura, você pode nomear qualquer variável, literalmente qualquer coisa que você queira soletrado errado. Qualquer coisa que você quiser. No entanto, existem algumas exceções. Não escreva uma variável como não inicie um nome de variável com o número na maioria dos idiomas . Isso não é permitido, sem mencionar que é um mau treino. Então não diga para algo ou 40 anos certo, isso não é bom. Não faça isso em JavaScript. Você verá muitas variáveis que começam com um sublinhado. Totalmente aceitável. Isso é bom. Além disso, não use traços. Sem traços, então não use traços. Ah, na verdade, não use nenhuma outra pontuação, também. É desnecessário, então não use traços é igual ver. Ele nos deu uma sintaxe de ar sem cortes, ar inválido ou sinal inesperado. O que ele pensa agora é que isso está sendo escapado novamente. O sujeito vai falar sobre o futuro. Não é importante agora. Ah, e também pensa que esta é a variável essencialmente, e ela não consegue descobrir o que está acontecendo depois dela ou por que há uma barra lá, então ele joga você lá dentro. 6. Não se esqueça de avaliar este curso, por favor.: Olá , sou eu. Sou a voz por trás dos vídeos. Apenas um lembrete rápido que se você gostou de qualquer um desses vídeos até agora, você pode me acompanhar no compartilhamento de habilidades. Mas o mais importante, você pode realmente avaliar este curso. E simplesmente lendo este curso, isso realmente me ajuda muito. É super fácil e super rápido leva apenas alguns segundos, e quero dizer que realmente significaria o mundo para mim. Então, se você amou o que eu tenho ensinado a você, se você gosta do estilo dos meus cursos, dê um bom e velho polegar para cima, hum, e deixe outras pessoas saber o que você fez sobre esses vídeos também. Saúde. 7. Variáveis e tipos de dados parte 2: Agora há outro sobre o qual quero falar rapidamente e de novo. Estamos ficando um pouco à frente de nós mesmos. Mas novamente, esses ar bom saber, porque nós vamos estar praticando estes no futuro. E eles vão fazer mais sentido uma vez que você realmente começar a escrever algum código. Então temos objetos. Temos um aumento. Temos indefinido. Nós não temos, eu não posso flutuar e amarrar o próximo. Eu quero falar sobre objetos se o B j é igual a e começa com uma chave encaracolada. Angela Curly raça ou suporte. Se você quiser chamá-lo de que você tem algum tipo de chave. Você tem algum tipo de valor. Você tem uma chave para Oops, outro valor. Observe como tudo isso se parece com cordas. Eu apertei enter e ele me dá um objeto, e isso é algo que podemos realmente usar aqui. Então o proto não se preocupe com isso. Isso é um monte de funcionalidade JavaScript que vem com o tipo de dados do objeto. Nós não vamos modificar estes ou adicionar qualquer um destes O que é legal sobre O. B. J. E é aqui que o poder da programação orientada a objeto entra é enfraquecido, tipo será j ponto e automaticamente temos chave e chave para aqui. Então, se escrevermos o b j dot key, esse é o valor, certo? Dissemos que a chave é igual a com um valor de dois pontos. Mas nós também disse O b j ponto chave para é outro valor. Vamos apenas capitalizar isso e eu vou te mostrar que você não necessariamente precisa ter sua chave em uma string se 27 pontos oito ou o que quer que cerca de rodada Teoh eu apertei enter e novamente eu tenho nome e idade. Mesmo se você notou aqui em cima quando eu tinha a chave como uma string, ele automaticamente a transformou em uma chave eso que é basicamente uma string ou como ah, nome da variável sem as aspas em torno dela. É desnecessário em um objeto, e assim um objeto é uma maneira de armazenar variáveis dentro de outras variáveis. Mas então você pode nomeá-los também. Então você tem todos esses pontos de dados diferentes dentro de uma variável. Agora isso é realmente, muito poderoso quando se trata de armazenar informações sobre um determinado objeto de dados. Isso limpa isso e vamos criar um objeto de pessoa, certo? Temos pessoa é igual a objeto. Uh, digamos o nome. Ok? Vamos criar um objeto de pessoa para mim. Idade. Nós já fizemos isso, mas isso é um objeto diferente porque nós o chamamos. Estamos chamando de pessoa. Ah, e eu não sei qual é a minha cor favorita? Talvez. Certo. Vamos dizer vermelho. Então eu levo isso em hit. Entrar. O cônsul do nosso navegador declarou agora que Oh, sim, isso existe. Então agora eu posso digitar o nome da pessoa assim. Esse é o meu nome, a idade da pessoa. Se eu acertasse, provavelmente teria funcionado com a Age Knocking Alliance um pouco embaraçoso . Eu pego a palavra página tantas vezes que eu acho que é apenas uma pessoa hábito ponto Pitch, uh dot idade Lá vamos nós. Terceira vez é o charme e vamos tentar uma pessoa que não pinte. Nós temos vermelho Beautiful. Mas o que acontece se apenas escrevermos uma pessoa? Pegamos todo o objeto, mas não podemos usar isso em uma página. E mais uma vez, vamos ter alguma experiência nisso no futuro. Mas agora, é bom saber disso e podemos armazenar vários pontos de dados dentro de um objeto. Para que pudesse ficar com seu amigo. Kyle, por exemplo, é igual a um objeto cheio de pontos de dados. E agora você não tem que se lembrar. Uh, você sabe, 200 variáveis diferentes. Você pode lembrar que cada objeto chamado Kyle era pessoa ou o que você quiser nomear . Ele tem thes diferentes sub variáveis que é uma boa maneira de colocar em algumas variáveis dentro de uma variável. Agora, quando falamos sobre um aumento direito, tivemos que lembrar que tínhamos objetos e tivemos um aumento. Esse último era um objeto, e array é uma lista de variáveis. Agora é diferente de um objeto porque o objeto muito especificamente tem nome de ponto de pessoa ou pensamento de pessoa, qualquer variável que você dá a ele. Considerando que uma matriz é simplesmente uma lista. Podemos dizer que amigos são iguais, e vamos criar Honore assim. Usamos suportes muito duros, e dentro dele temos um monte de cordas ou, uh, desde ou flutuadores. Basicamente, você apenas declara um monte de variáveis em uma lista que está todas separadas por vírgulas. Muito simples. Então vamos em frente e deletar isso. E meus amigos seriam Nathan Prairie e Zephyr. Eu apertei Enter, e isso nos dá algo um pouco diferente. Ainda não vimos este. Temos 012. Estas são as chaves. E é como um objeto, mas não podemos renomear essas chaves. Se nós os renomeássemos, essencialmente, estaríamos trabalhando com um objeto é simplesmente uma lista. Não, nós vimos bem aqui. Zero é Nathan em programação de computadores. Quando começamos a contar , começa sempre em zero. Então zero é na verdade 11 é na verdade 22 é na verdade três. Só na linguagem humana começamos a contar em um. Mas os computadores começaram a zero. Então, se eu digitar amigos e colchetes para não atualmente colchetes desculpe. Como esses colchetes rígidos que estão vendendo JavaScript. Ok, então eu estou procurando a matriz de um amigo, que é o que nós escrevemos aqui em cima. E estou procurando a primeira informação que está lá dentro. Então, se eu ir em frente e bater, digite o que deve voltar? O nome Nathan é como esperávamos? Agora, se eu digitar amigos também, o que você acha que vai ser devolvido? Se você acha que o nome Zephyr vai ser devolvido, você está absolutamente certo. Agora, aqui está um traiçoeiro. O que acontece quando você leva amigos? Três. Sabemos que três não existem aqui. Então, o que vai ser devolvido? Indefinido. - Não. Javascript. Se você estava tentando acessar uma variável ou ponto de dados que não existe, ele será indefinido todas as vezes. E podemos ver isso como sendo uma afirmação verdadeira. Uh, vamos realmente tomar isso corretamente. Amigos três é igual a indefinido. Se isso for verdade, como nos amigos três, o terceiro ou o quarto item nesta matriz não existe. Isto vai estourar a pequena palavra verdadeira por baixo. Simplesmente assim. Então agora você sabe sobre objetos que você sabe sobre um aumento, você sabe sobre cordas inst em seu curto para inteiros e carros alegóricos. Oh, e aliou-se e quando encontrá-lo. Agora, estas são apenas variáveis. A maneira como eu os declarei aqui é exatamente a mesma maneira que você pode declará-los em seu javascript. Se esse é o seu JavaScript interno na variável de página. ABC é igual a 123 é exatamente da mesma maneira. Ou se você está em apenas ah arquivo Js regular, você poderia dizer que idade é igual a 27,8. Sabemos que você sabe que isso está à tona porque tem o ponto decimal, e sabemos que se removermos o ponto decimal que vai haver que isso vai ser um inteiro agora, o que eu gostaria que você dialogasse para. Ah, só um pouco de prática. Não há nenhum dever de casa aqui, mas eu gostaria que você tivesse um pouco de prática, então basta abrir um índice html em branco para um índice lógico. Pode ser qualquer arquivo HTML. Você poderia ser qualquer página em qualquer lugar. Você pode abrir o Facebook se quiser. Clique com o botão direito para ir ao inspetor. Inspecione elementos para dependendo do navegador que você está usando. Vá para o console e comece a digitar. Alguns JavaScript declaram algumas variáveis. Então declara uma variável. Minha idade é igual à sua idade. Você sabe, se você tem 15 anos ou se você tem 45, aperte entrar. Basta ver o que acontece e, em seguida, digite, e você pode digitar seus inteiros seu flutua suas cordas. Você pode ver se há algum erro. Você pode aprender o que funciona, o que não funciona. E enquanto você está fazendo isso, digite aqui suas variáveis e veja se acontece se ele cospe exatamente o que você está esperando. E se não é o que você está esperando, bem, então você pode descobrir por que você pode perguntar por que e lembre-se se você tem perguntas perguntando ao nosso grupo no Facebook, o que eu gostaria que você fizesse é criar um objeto, criar uma matriz, lembrar e levantar apenas uma lista. Crie uma string um inteiro e crie um float. Faça isso no seu console, e você estará muito familiarizado com variáveis. Ah, nós vamos entrar em comparações um pouco abaixo da estrada, e é quando essas variáveis vão realmente ganhar vida e você vai ser capaz de ver coisas e outras coisas. Esta lição agora é, está um pouco seca. Não é super excitante nem nada. um Este éumconceito fundamental, praticamente todas as linguagens de programação, e é muito, muito importante saber como funcionam, porque isso é transferível. O que você está aprendendo nesta lição não é apenas javascript. Ele funciona em PHP e python no nó. Em todas as outras línguas existem basicamente objetos de cordas de raça, inteiros e carros alegóricos lá, na verdade um monte de outros, dependendo da linguagem que você está escrevendo. Mas estes são os mais comuns que são completamente transferíveis. Então é muito, muito bom saber como isso funciona. Então, uh, vá em frente, dê uma chance. Se ficar preso, faça perguntas. Estamos aqui para ajudar. Caso contrário, estou ansioso para vê-lo na próxima lição. 8. Manipulação de corda: Olá. Bem-vindos de volta a esta lição. Vamos falar sobre manipulação de cordas, que basicamente é. Tomamos uma string geralmente em uma variável em um tipo de string em um tipo de dados string, e mudamos o valor de sua dinamicamente ou obtemos algum tipo de informação a partir dele. Estes ar basicamente, estes são chamados de métodos novamente. Porque javascript é uma linguagem de programação orientada a objetos. Usamos essa coisa chamada notação de ponto que nos permite acessar funções que estão ligadas a cordas ou objetos ou um raise. Coisas assim. Então este exemplo, o que eu estou indo para dio é apenas criar uma string muito simples e eu vou chamá-lo str é igual a E nós poderíamos sentir isso com qualquer coisa. Então, se você está acompanhando, se você está digitando enquanto eu estou fazendo isso para se sentir livre para responder qualquer coisa aqui, o cobertor azul está sentado na mesa, mas agradável e simples. Então, quando levarmos isso de volta, str temos o cobertor azul está sentado na mesa. Nada extravagante. Sabemos como fazer isso. Caleb, isto é aborrecido. Eu sei, eu sei. Vamos ver quantos personagens estão nisto. Quantas cartas há em nós? Então nós digitamos str dot length e você pode dizer que um navegador está nos dizendo que o comprimento tem ser de uma string aqui. Certo? Ou o contrato vem desta bebida. Nós digitamos entrar 39. Há 39 caracteres aqui, não incluindo as citações, citações, ou simplesmente para mostrar que é uma string. Agora, por que isso é importante? Bem, porque um dia, quando um usuário insere algum tipo de informação em seu site, por exemplo, Twitter, onde você só pode ter 140 caracteres, é importante ter certeza de que suas frases ou suas Tweet tem apenas 140 caracteres. E esta é a primeira forma de validação. Eles diriam. Se o tweet for um tweet, comprimento é menor ou igual a 1 40 Então eles podem ir em frente e executar algum código ou código. Então agora que isso é apenas encontrar o comprimento. Coisas muito simples. Mas o que acontece quando queremos encontrar uma corda dentro de uma corda? Digamos que estamos procurando a palavra cobertor. Como descobrimos que poderíamos rasgar cada palavra e compará-la em um loop e isso fica muito complicado. Coisas que você nem sabe ainda são completamente desnecessárias. Neste ponto, poderíamos tentar este índice de ponto string de e vamos colocar a palavra cobertor aqui. Nove. O que nove significa é que na nona letra desta frase é onde a palavra cobertor é encontrada. Então nós temos th e a palavra azul juntos que sete mais os espaços para espaços antes da letra B em cobertor que totaliza nove. Então é aí que começa a palavra. Agora, se o mundo não existe, o que acontece se nós digitar índice de cadeia de caracteres de e vamos pegar a palavra vermelho? Porque não há palavra vermelha na nossa corda. Nós temos menos um, então se algo não existe, nós temos menos um agora. Você acha que isso é sensível a maiúsculas ou maiúsculas e minúsculas? Nós ainda não falamos sobre isso em JavaScript, então eu quero saber o que você acha. Isso diferencia maiúsculas e minúsculas? Vamos em frente e testar este índice de cadeia de caracteres de e vamos pegar a palavra cobertor, mas com um maiúsculo B. Então é diferente deste. Este tem um minúsculo. Seja este. Tem um maiúsculo ser? Vamos ver qual é a diferença. Quando eu apertei Enter não existe agora. Isso por si só pode se tornar muito problemático porque você não vai verificar todas as variações possíveis da palavra cobertor com letras diferentes em letras diferentes. Isso não é impossível. É só um monte de trabalho. E isso é algo que você definitivamente quer ficar longe. Programação não é para ser um monte de trabalho. É para ser agradável e simples. Então, o que fazemos? Pegamos corda e podemos transformar toda a frase em minúsculas ou a frase inteira em maiúsculas para o que estamos testando aqui. Isso realmente não importa. Só temos que mudar exatamente o que procuramos. Então, como um primeiro exemplo, vamos mudar isso para minúsculas ponto string para minúsculas e você tem esses colchetes arredondados . Aqui estão estes parênteses. Agora, esses parênteses significa que ele está executando uma função ou um método, e você vê-lo aqui para este Takes toma o parâmetro de cobertor vermelho cobertor novamente. Este comprimento de um ponto não é um método que vem quando uma string é formada. Então, na verdade, é um ponto de dados dentro dele. E agora você pode dizer que a corda tecnicamente não é uma corda. Mas age muito como um objeto, assim como quando escrevemos na última lição esse nome ou um arrependimento. A pessoa objeto tem um nome, uma idade e uma cor favorita, certo? E nós dissemos nome do ponto da pessoa ou idade do ponto da pessoa Este é o comprimento do ponto da string ou o ponto da string qualquer que esse outro valor vai ser muito orientado para o objeto aqui. Não vai voltar atrás. Por exemplo, String para minúsculas muda tudo toe minúsculas minúsculas. Bem, há apenas uma letra lá, então este é realmente um péssimo exemplo. Mas a primeira letra que foi maiúscula não está mais em maiúscula. Agora, o que acontece quando escrevemos str está de volta ao normal agora porque é que isso? É porque levou sua corda, sua sentença eterna minúscula e retornar a esse valor. Nós não começamos isso em outra variável, então vamos digitar str Lower é igual a nós. Urata muito minúscula. E este é apenas um nome de variável simples. E isso é em Camel Case e str inferior e agora temos o sucesso em qualquer momento momento porque nós atribuímos outra variável agora se tentamos. Str índice de ponto inferior de E em vez de digitar cobertor com um B maiúsculo, sabemos que todas essas letras, cada letra na frase vai ser minúscula. Também verificamos minúsculas. Isso nos dá um número positivo que significa que ele existe. Ou melhor, ele nos dá um número não negativo e isso significa que ele existe agora no inverso. Podemos tentar esta corda. Nova variável superior é igual a ponto string para maiúsculas agora podemos usar string ou podemos você string menor. Não importa porque vai pegar todas as letras e transformá-las em letras maiúsculas . Capitalizou tudo. Então vamos tentar isso. Como você pode ver, o cobertor azul está sentado na mesa e agora temos todas as letras maiúsculas. É exatamente o que queremos porque se fizemos o índice de pontos de força de e nós digitamos cobertor em todas as maiúsculas, que ainda não existe porque str ele está definido para ser a maneira correta. Ele ainda é ainda é a mesma variável. Agora podemos substituir isso e variáveis. O mais bonito das variáveis é que, você pode substituí-las e basicamente qualquer ponto no tempo Agora ele diz que a seta sobre para pegar meu último comandante. E se eu digitar string índice de ponto superior de que está procurando um cobertor na cadeia de caracteres maiúsculas maiúsculas. Transformamos a versão em minúsculas para maiúsculas. Então ele está tentando combinar este cobertor com este cobertor e ele o encontrou no nono personagem. Agora é assim que você encontra uma corda dentro de uma corda. Isso é importante? Em muitos casos, sim, isso é muito importante. Você vai querer encontrar cordas dentro de cordas. Essa não é uma tarefa incomum. Eu sei de novo, não é a coisa mais excitante do mundo. E ainda nem começamos a modificar nada sobre omodelo de o objeto do documento, que é a nossa página web. Então vemos à esquerda. Aqui temos esta grande caixa branca. Nada mudou, e tudo bem. Precisamos aprender os princípios antes de chegarmos às coisas divertidas. Felizmente, os princípios da programação não levam muito tempo para aprender, e quanto mais idiomas ele aprendeu, mais fácil é pegar outras línguas e novamente coisas como indexar off. Embora a função possa ser diferente em outras linguagens, o conceito de tentar encontrar uma palavra em maiúsculas como esta em uma string que é toda maiúscula é o mesmo em todas as línguas. Agora vou limpar este tipo str novamente para que possamos ver com o que estamos trabalhando. E se quiséssemos mudar? Str uh, em vez disso, ser o cobertor azul está sentado na mesa para ser apenas um fragmento disso. Bem, eu não quero sobrescrever isso ainda porque eu ainda vou estar usando o str a variável string . Então, em vez disso, eu vou escrever ABC porque eu não me importo qual é o nome da variável no momento. Str dot sub string Você sabe, nós temos dois métodos aqui. Nós vamos ficar com 1ª 1 sub string e isso leva dois parâmetros foram para começar e onde terminar agora onde isso deve começar? Bem, se quisermos começar a primeira letra que se lembre, esta é a 1ª e é assim que falamos em línguas humanas. Mas em linguagens de programação, a primeira é a vírgula número zero e depois o segundo parâmetro e onde queremos chegar ? Bem, nós sabíamos pelo exemplo anterior que este ano eram as primeiras 9 letras. Também poderíamos contar isso, se quiséssemos. E se quiséssemos pegar Ah, você sabe, o cobertor azul está sentado em uma mesa do cobertor azul para algum lugar aqui dentro. Agora vou colocar um número aleatório. Eu vou colocar nenhum encontrado nisso só para mostrar como isso funciona. Sabemos que este é 39 caracteres de comprimento porque fizemos comprimento de ponto de corda e temos 39 hit enter e eu recebo o cobertor azul é de fato, na verdade, eu queria ser um pouco mais eso e disse, eu vou sobrescreva isso, e eu vou colocá-lo como 29. Dario, o cobertor azul está sentado, então temos daqui todo o caminho. Aqui está 29 caracteres e podemos ver que quando nós substring 0 a 29 0 não, você não tem que começar com zero. Você pode dio sub string e vamos começar em 10 e ir para o próximo 10. Então isso vai começar tecnicamente na letra número 11 e vai ter os próximos 10 depois disso. Como conseguimos cobertor, olhe para isso. Então isso é sub string agora. Isso é importante? Em tempos? Sim, isso é muito importante. Em outras ocasiões, isso significa que existem outros métodos para fazer isso. Você também pode usar string dot slice. Vamos verificar o que fatia faz 10 e 15 então entrou string dot fatia e começa em 10 e vai acabar 15. As diferenças sub string começa em 10 e obtém o próximo 10 enquanto Slice começa em 10 e termina em 15 a partir de zero agora. Ambas as respostas de fatia não requerem dois parâmetros. Eles só precisam de 11 é obrigatório. Então eu disse, ABC é igual a você. String out sub string. Ah, vamos começar essa às 12. Vai começar com 12 bruxas bem ali, e vai ter o restante. E se eu digitei, ABC é uma nova string. Esse sub string um número negativo, digamos menos 20. Ele vai começar aqui e trabalhar seu caminho de volta agora fatias vão essencialmente fazer exatamente a mesma coisa. Se escrevermos em fatia 15 ele começa em 15 vai para o final da string ou string. Dodd fatia menos 15 começa na parte de trás. Limpar isso novamente e trocar o que estamos trabalhando agora, apenas um minuto atrás, quando dissemos ABC é igual a string dot sub string, qualquer que fosse o valor, nós mais escrevemos ABC uma e outra vez, e que muda o valor uma e outra e outra vez. Isso demonstra como as variáveis de uma lição anterior são facilmente escritas. Tudo que você tem que fazer é pegar o mesmo nome Grable é igual a outra coisa, e você substituí-lo. Agora, o que acontece se você quiser substituir uma string dentro de uma string? Bem, o JavaScript é bastante simples, então usamos a substituição de pontos e procuramos uma palavra novamente. Isto vai ser sensível a maiúsculas e minúsculas. Sabemos que o JavaScript diferencia maiúsculas de minúsculas de um exemplo anterior, e em vez de usar Blue Blanket, vamos Travesseiro apertado então substitui a procura da palavra cobertor, e ele vai tentar substituí-lo com a palavra travesseiro. O que acontece? O travesseiro azul estava sentado na mesa. Mas o que acontece se a palavra não for encontrada? O que é que ele devolve? O Eso. Não queremos procurar a palavra cobertor e dizer que queremos procurar outra palavra. Vamos procurar um carro e substituí-lo por travesseiro. O que acontece? Ele apenas retorna sua string porque nada foi substituído. Ele só vai substituir sua corda dentro de sua corda e devolver a coisa toda de volta para você. Agora, mais uma coisa é com cordas. Podemos inventar. Preciso deles. Isso significa levar uma corda, uma frase e uma caneta apenas para outra corda ou frase. 9. Manipulação de corda parte: Agora, mais uma coisa é com cordas que podemos inventar. Preciso deles. Isso significa levar uma corda, uma frase e uma caneta apenas para outra corda ou frase. Vamos digitar, uh, introdução, como o nome da variável é igual a Olá. Meu nome é, e sempre será. E eu também vou criar outro nome de variável, Kayla. Então agora temos introdução. Nós temos um nome. Como é que juntamos estes? Este é um processo chamado concatenação ou Can Cat para abreviar para mesclar cordas Lee. Juntos, existem várias maneiras diferentes de fazer isso em JavaScript foram os mais populares. Um deles é usar o mais simples. Então vamos criar uma nova variável e chamada frase é igual a introdução mais nome. Parece que é matemática, mas não é. E é por isso que os tipos de dados são muito, muito importantes. Quando adicionamos uma string juntos usando este símbolo de adição, nós não estamos realmente adicionando nada juntos. O que estamos a fazer é juntar-nos a eles. Então, se eu acertar a resposta sobre isso, devemos chamar “Olá”. Meu nome é Caleb. Simplesmente assim. Agora, toda vez que eu digitar frase, a frase variável temos Olá. Meu nome é Caleb. Agora, por que isso aconteceu? Por quê? Por que é quando nós digitamos 12 mais 20 nós temos 32 apenas tipo Olá, mais algo emerge as frases juntos. Agora, na última lição, na última lição, falamos sobre tipos de dados e eu continuo trazendo isso à tona. E é por isso que os tipos de dados são importantes para saber em linguagens como PHP, o PHP realmente não se importa muito. Ele vai tentar adicionar uma string com o número, e ele vai falhar porque é muito vagamente escrito em python e javascript no nó. Isso é inaceitável. São linguagens mais rígidas, que significa que você só pode adicionar inteiros com inteiros ou introduzidos com floats porque você pode adicionar números com outros números, mas você não pode adicionar uma frase com um número. Não funciona assim. Quando você adiciona uma frase com outra frase, ela se torna uma frase longa. O que acontece se tentarmos aplicar alguma outra matemática? Vamos digitar Coloque a palavra por muito tempo aqui e multiplicar. Multiplique isso por 20. Nós temos esta coisinha bonita chamada qualquer e não um número desde para não um número. Agora, por que nós temos isso, porque você não pode multiplicar a palavra ou a corda longa, 20 vezes. Não se pode multiplicar letras, números que não se misturam. É como óleo e água. Eles simplesmente não se misturam. Infelizmente, E é por isso que aprender seus tipos de dados é muito importante. Porque se você conseguir isso agora, você sabe que uma das minhas variáveis provavelmente não é um inteiro ou não está flutuando. E por essa razão, preciso mudar algo. Sabe, podemos estar um pouco adiantados aqui, mas quero te mostrar mais uma coisa. Digite o número, na verdade, altere esse nome. Uh, o entorpecimento é igual a, digamos, 500. Desculpe, 315. Sabemos que isso é uma força contra como citações em torno dele. E se o fizéssemos? O número vezes 20 JavaScript é inteligente o suficiente para perceber que nesta string é realmente um número e ele fez a multiplicação para nós. Então isso é aceitável. Mas e se o Sr. sobrescrever isso? O número é igual. Fazer 315 é o número. Então agora temos uma nova corda lá dentro. Nós digitamos o entorpecimento vezes 20 novamente. Nós não temos um número porque javascript olha para isso como um todo e diz, OK, bem, eu sei que há um número lá, mas esta coisa toda está sob números. Isso é inaceitável. Então vou te dar um novo erro. Nós vamos retornar o valor chamado Não um número para você Agora, se você quiser realmente ser bastante rigoroso com seus tipos de dados, e isso é uma coisa muito boa. Se você quisesse ser muito limpo com seus tipos de dados, eu diria por todos os meios ir para ele, desde que ele não faça o seu código muito inchado. Então, se voltarmos e dissermos que o número é igual a 315. Mas isso está em uma corda. E queríamos converter isso, porque se escrevermos, o entorpecido agora ainda está em uma string. Mas se dissemos que o entorpecimento é igual ao número, o número, estamos apenas passando uma variável simples lá dentro. Na verdade, estamos passando tipo enter. Agora temos um número de confiança, e você pode dizer porque não há citações. A cor muda mesmo, não vermelho. É azul agora, e cada vez que digitamos o entorpecido é 315. Então essa é uma maneira rápida de analisar, eu acho que suas cordas que estão apenas segurando números em um inteiro legítimo. Eu vou ir em frente e limpar isso e vamos fazer mais um exemplo. Vamos transformar uma string em uma matriz de três tipos de string ou str. Temos a nossa corda original. Nós nunca sobre isso neste, e se nós colocar em uma nova variável foi chamado de são abreviados para matriz é igual a str não dividir. Onde queremos dividir isso? Bem, queremos separar cada palavra, então vamos colocar um espaço simples lá dentro. E o que isso vai fazer é quebrar em cada pequeno espaço dentro desta corda e tudo no meio. Cada espaço vai ser um valor de matriz que eu acertei. Entrar. Isso nos dá oito e agora podemos fazer ponto de ar O comprimento é oito. Há oito pedaços aqui. Oito palavras diferentes agora um comprimento de ponto RR. Sabemos que isso a partir do comprimento do ponto da string nos deu quantas letras estão nele, mas um raio nos dá quantos objetos diferentes são objetos é uma palavra ambígua, mas nos dá quantas peças diferentes estão nesta lista. E nisso vemos que há oito. Então, agora, se eu apenas digitar um r r r, eu tenho , uh, todos eles juntos. E se eu quisesse colocar as coisas de volta juntas em vez de usar split, usamos juntar-se, criando uma junção de ar frio variável e digite uma junção de ponto r E o que queremos juntar-nos a ela? Qual é a cola com a qual queremos juntar esta frase quebrada? Bem, poderíamos colocá-lo de volta junto com um espaço simples ou algo assim, mas vamos fazer algo um pouco mais criativo. Se usarmos um traço, ele se parece muito mais com um U R L, e agora é o dos espaços. Temos traços. E se quisermos criar Ah, vocês são todos deste que escrevemos. Você é sempre igual ao ar juntou ponto para minúsculas, e agora temos o que se parece com um fragmento Euro ou uma string de consulta. Então, se você foi para facebook dot com barra você sabe que o traço azul traço cobertor traço é traço assim por diante e assim por diante. Parece muito com uma garota. Então agora estamos retornando cordas em vai olhar como você real ou então. E isso é muito, muito valioso ao criar coisas como aplicativos de página única ou receber entrada do usuário. Por exemplo, quando alguém cria em sua página do Facebook e transformando isso em um ah, você l que estará no facebook dot com barra qualquer que seja o seu grupo ou Facebook necessidade página é. Então agora nós estamos realmente ficando muito mais útil, e nós ainda não fizemos nada com um d o M com com o HTML real. Mas estamos criando coisas muito úteis aqui. Então, novamente, não super, super excitante, mas incrivelmente útil. E estes não param aqui. Há toneladas e toneladas de outros métodos que podemos usar se apenas digitar str dot obtemos uma longa lista de coisas que enfraquecem Dio. Na verdade, isso é realmente o que eu quero que você faça é em seu conselho, criar uma nova string, colocar uma frase lá dentro poderia ser qualquer coisa fazendo cerca de 40 caracteres ish como nós fizemos neste exemplo neste vídeo, e vamos ver o que eles fazem. O que acontece quando você digita Godbold bem, ele retorna uma função Bem, isso é interessante. O que é isso? Isso pode valer um pouco de um Google, mas brincar com alguns destes porque estes são todos muito, muito úteis. Você poderia fazer a mesma coisa com array. Como não temos matriz aqui ponto de ar e, em seguida, ele dá-lhe uma lista do que você está procurando aqui. Você quer que o capitão A Estes reúna? Você quer mudar essa fatia? Por favor, classifique estes. Você poderia fazer todo o tipo de coisas aqui. Não, JavaScript não está limitado apenas a esta lista de funções. Como esta lista é. É legal. É conveniente. Mas isso não é tudo o que o JavaScript tem para oferecer. Então, como seu dever de casa perder vídeo, vá em frente, crie uma string. Digite qualquer que seja o nome da sua variável. Hit dot e dê uma olhada em alguns desses. Se algum desses chamar sua atenção, você realmente segurou o que eles poderiam fazer. Vá no Google eles porque aqui está um dos segredos para ser um grande desenvolvedor Web. E eu nem estou brincando com você. Se você falar com qualquer sênior para ter, todos eles vão te dizer isso que o verdadeiro superpoder por trás de ser grande desenvolvedor é saber como fazer perguntas e saber como Google, porque no mundo da frente de programação e terminam de volta, há tantas coisas lá fora que você tem que lembrar, você não vai se lembrar de todas elas. Isso é apenas um fato da vida. Nossos cérebros não funcionam assim. E por que lembrar, quando tudo é facilmente acessível através da velha máquina do Google para ir em frente, dê uma chance. Espero que tenha aprendido muitas coisas úteis aqui. Espero que nas próximas lições comecemos a entrar em algo um pouco mais, , sim, interessante onde podemos começar a manipular o negócio m e realmente tornar sua página muito mais interativa e dinâmica. 10. Mini projeto: de uma cadeia em um URL: Olá. Bem-vindo de volta antes de seguirmos em frente, o que eu realmente quero que você faça é que eu quero fazer um pequeno projeto. É muito simples. É só trabalhar com o que já aprendemos. Hum, eu me sinto como o que nós fizemos. Ele já pode ser considerado um monte de informações, especialmente se você é novo em JavaScript. E então o que vamos fazer é transformar, Ah, Ah, pouco de texto algumas variáveis em um U R L real que você poderia usar em um projeto avançando. Então, a idéia é levar 123 danos por muitas variáveis que você precisa. Manipulá-los usando ah, usando, substituir. Ou você pode dividi-la em uma matriz e juntá-la novamente como fizemos em uma lição anterior . Transforme seu URL em todas as letras minúsculas, porque tudo o que você onde mais deve ser sempre minúscula . É uma boa prática. Em seguida, você deseja adicionar o nome do seu site na frente dele Now. Se você não tem um nome de site, você poderia usar qualquer nome que você poderia usar google dot com facebook dot com são vêm em ponto com o que você realmente quer Seu resultado final deve realmente se parecer com isso. Agora há duas maneiras de fazer isso. Poderíamos fazer isso usando uma tonelada dos métodos que já usamos,o que eu acho que é a melhor maneira de fazer isso apenas para praticar. Poderíamos fazer isso usando uma tonelada dos métodos que já usamos, Há uma maneira mais simples, que é basicamente você poderia apenas escrever str qualquer tipo de nome de variável é igual a e então você colocá-lo lá. Mas não é isso que eu quero que você faça . Eu também não quero que você escreva, você sabe, corda um mais corda para ah, tipo de. Você sabe, esta sendo a corda dois neste sendo a corda um. Você sabe, não faça isso também. Seja criativo com isso. Pegue o caminho mais longo. Este é um daqueles momentos em que programar os salários longos, experimentar, quebrar coisas. E, você sabe, apenas escrever um monte de código é completamente aceitável. Você está aprendendo. E enquanto você está aprendendo uma ótima maneira de aprender é escrever um monte de código, então no futuro otimizá-lo, e isso é perfeitamente bom. Então você quer ficar por aqui por mais alguns segundos? Eu realmente vou fazer isso sozinho de uma forma que eu acho que seria útil usando alguns dos diferentes métodos que já usamos, incluindo a concatenação para dividir para juntar minúsculas achado maiúsculas, substituindo palavras. Vou ser um pouco criativo com isso. Vou percorrer um longo caminho. Vou me divertir com ele e ficar à vontade para assistir. Mas se você realmente quer desafiar a si mesmo, talvez pausar o vídeo aqui, dar um tiro por conta própria, e então uma vez que você descobriu ou se você ficar preso, então, você sabe, retomar o vídeo e jogar através do resto. 11. Mini projeto: de uma cadeia em uma solução de URL: Tudo bem. Então o que vou fazer aqui é fazer aqueles vivos, bem no cônsul. Eu poderia fazer isso em sublime, então você tem o código. Mas, realisticamente, isso não é, você sabe, código super incrível ou qualquer coisa que realmente vai revolucionar o modo como a Internet funciona. Então não é realmente não vale a pena salvar. Mas esta é uma boa corrida de treino. Então o objetivo era criar um site Você, Earl. Agora vou usar métodos faciais. O 1º 1 que eu vou fazer é descobrir qual site deveria estar indo para variável tão criativa chamada site. E vai ser apenas https artman dot com com a barra final Feito, é agora que temos um site. Isso é, você sabe, trapaça perdida. Poderíamos fazer alguns fundos ou coisas, mas não é nessa parte que quero que se concentre. O que eu queria que você se concentrasse em criar a URL e que todos vocês poderiam estar vindo de qualquer coisa. Então vamos criar uma nova string e servir usando caixa de câmera. Divertido sublinha o tempo. Basta mostrar-lhe que você pode usar as outras, você sabe, convenções de nomenclatura de variáveis. A caixa marrom rápida salta sobre o cão preguiçoso ou algo assim ao longo dessas linhas. Então você vê que eu adicionei dois espaços extras aqui em vez de apenas um. Há dois lá dentro. Isto é tudo capitais. Não sei por que há um Cabo C Capital maiúsculo. De qualquer forma, precisamos transformar isso em algum tipo de sua forma. Então agora temos site, temos nova cadeia, então nova cadeia precisa se transformar em euro. Bem, a primeira coisa que quero fazer com minha corda é transformar isso em algo que eu possa manipular, não importa o que aconteça. Então eu vou dizer que nova string é igual a nova string, que realmente está apenas tomando a si mesmo em sobrescrevendo-se para minúsculas. Agora não temos mais problemas de capitalização. Isto é perfeito. Agora, se quisermos fazer uma busca sobre isso, não precisamos nos preocupar com o “ Capital C “ aleatório no meio da palavra rápido. Mas agora vamos dizer que eu queria remover quaisquer espaços extras. Digamos que há mais dois ou três espaços extras em qualquer lugar, e eles dizem que só queremos removê-los agora. Podemos não saber que eles estão lá, mas pode ser uma boa idéia ir e substituir esses espaços extras. De qualquer forma, neste ponto, , há duas maneiras de fazer isso de uma maneira. Nós não aprendemos da maneira que nós aprendemos a maneira que nós aprendemos era usar Não substituir , e é assim que nós vamos usá-lo apenas porque isso é o que nós aprendemos. Então eu quero que você pratique um pouco com isso. A outra maneira é usar o que é chamado de expressões regulares, que é uma forma louca de computador de pesquisar através de qualquer coisa e encontrar o padrão exato que você especificou. E não vamos aprender sobre isso ainda. Este é um curso básico de JavaScript, e você é apenas, Ah, poucos vídeos em algumas lições deste curso. Você não precisa saber sobre Reg. Exe ainda. Rejeitados é a forma como dizemos expressões regulares. Então, o próximo passo para substituir, digamos, nova string é igual a, uh, você sabe, não vamos chamá-la de nova string. Isso vai ficar confuso. Você é sempre igual ao novo ponto de corda e sabemos que podemos usar o substituto E o que queremos? A nossa casa. Vamos substituir espaços extras por espaços regulares. Podemos fazer isso. Agora pegue isso. E só chegamos onde havia dois espaços entre o pensamento e o preguiçoso. Há agora apenas um You Earl é igual a euro dot um não, não corte split. Queremos dividir todos os espaços. Agora sabemos que há um monte de espaços aqui entre cada palavra. Nós nos livramos de espaços extras. O que acontece nós conseguimos e agora você está fora está agora em uma direita. Não podemos fazer nada com isso. O que aconteceria se o fizéssemos? Website Plus você está fora. Bem, ele automaticamente juntou-o junto com comentários muito perto de Bem, nós queremos pão que não é bem. Então vamos fazer você, Rosie para você URL dot join e vamos juntar todas as grandes peças todas essas palavras diferentes o traço agora assim. Então agora o nosso produto final vai ser o seu l é igual ao site Além disso, você é que vai vir, Katyn oito nosso site e nosso euro. E lá temos uma garota de verdade. Agora, isso realmente vai a algum lugar. Honestamente, provavelmente nunca vai a lugar nenhum. Talvez fora. Não, essa não é a questão. A questão é que temos o que parece ser um euro legítimo baseado no que poderia ter sido o contributo dos utilizadores . A entrada do usuário nunca é perfeita. Nunca como se a entrada do usuário é perfeita como muito, muito rara. Basta supor que a entrada do usuário está sempre errada, que é sempre parece terrível que não está formatado corretamente. Apenas esses tipos de suposições para não ser negativo ou qualquer coisa são boas suposições. Basta assumir que o conteúdo inserido em seu site não é o que você espera que seja, e que é ter uma primeira mentalidade de segurança. Agora, depois de termos cafeinado website com o seu oh bem, nós temos um olhar legítimo vocês estão todos aqui, e poderíamos ter feito isso com qualquer sentença que passasse por isso com qualquer outra frase teria funcionado. Se você acha que tem uma noção do que fizemos aqui, então eu convido você a abrir o próximo vídeo. Vamos continuar investigando JavaScript. Isto está a ficar divertido. Isso está ficando excitante e seguindo em frente. Isso só vai melhorar 12. Comentários de código: Olá. E esta lição, vamos falar de comentários. Super rápido, super breve. Realmente? Não há muito o que falar aqui. Para ser honesto comentários, o que você geralmente viu em HTML é, ah, comentário. Isso se parece muito com isso em JavaScript. Não usamos comentários assim. Usamos vírgulas. Na verdade, você já viu isso antes. Se você olhou para qualquer um dos arquivos do projeto, qualquer um dos arquivos JS, todos eles têm esta pequena linha dupla aqui. Ela vai fazer isso, e isso é um comentário, mas como fica em código? Bem, vamos escrever um código básico. E eu não espero que você entenda o que esse código realmente é. Nem você tem que fazer agora. Então, escreveste alguma coisa aqui? Seria ótimo se eu pudesse soletrar as palavras corretamente. E, você sabe, o que essa função faz? Realmente vai nos mover para cima e para cá? Uh, passo um? Não, ele vai executar algum código aqui. Seja o que for que possa estar, então o passo dois executa mais código, e então ele só vai retornar algo. Talvez ele vai retornar um objeto então novamente, você não precisa saber o que realmente é. Mas aqui estão os comentários agora. Se quiséssemos realmente comentar tudo isso, poderíamos dizer é só adicionar as faixas duplas na frente dele. Ou podemos fazer a maneira mais fácil e usar o Theus Risco e o Slash. Então, para começar uma única linha comentários, apenas uma linha escreve, temos uma linha para linha três linha. Só um comentário. Uma nota. Tudo o que fazemos é adicionar um flash de barra na frente dele. Mas se quiséssemos entrar, todos eles olhando para barra barra na frente de todos eles ou poderíamos adicionar ah, slash, asterisco. E isso vai comentar tudo até que seja dito para não ser comentado. E você pode dizer porque todo esse Texas Gray iria realmente se livrar de algum. Parte disso cabe na tela novamente. E para terminar esse comentário, use asterisco barra, que é exatamente o oposto disso, e para dizer se você tem editor qualquer tipo de I d. Isso está usando sintaxe, realce ou qualquer tipo de cor de coloração volta. Isso é tudo. É agora, uma coisa a observar sobre a escrita de qualquer código em qualquer linguagem de programação é usar comentários. Use muitos comentários. Eu sempre diria Use mais comentários do que não o suficiente. Diga às pessoas o que sua função faz. Por que variável é declarada? Era suposto servir? Existe uma diferença entre uma variável entre variável e um objeto? Ou você quer lembrar alguém que uma função tem que ser executada em um determinado momento ou, você sabe, o que quer que você esteja fazendo, deixe em seus comentários Agora, se você é o único desenvolvedor trabalhando em um projeto, Sério, isso é necessário? Para a maior parte? - Não. Até o seu projeto ficar maior porque quando você está trabalhando em, ah, grande projeto pode não tocá-los código para, ah, semana ou duas de cada vez em que você voltar, você pode não lembrar onde ele está. Mesmo que você pense que na época você iria se lembrar de todos nós, as chances são que você não vai voltar e você tem que descobrir tudo, ou você simplesmente deixar comentários para si mesmo e você pode lê-los quando você voltar para . Do outro lado do espectro é se você está trabalhando com outros desenvolvedores, e isso é muito comum se você está trabalhando em projeto de código aberto ou você é um desenvolvedor de front-end ou de volta no desenvolvedor trabalhando em ah, em um desenvolvimento Web firme ou em uma equipe ou em um arranque, seja lá o que for que você está fazendo. Se você estiver trabalhando com outros desenvolvedores, deixe comentários para que eles entendam o que está acontecendo e eles devem fazer o mesmo por você. E se há algum desenvolvedor que está escrevendo código que não está deixando comentários para você, toda a honestidade, eles não estão fazendo um trabalho muito bom de se comunicar com você porque os desenvolvedores não pegam o telefone e dizem, Oh, ei, então eu fiz essa mudança porque eu iria demorar uma eternidade. Ficaríamos em telefonemas o dia todo. Em vez disso, deixamos pouco comentário, dizendo apenas, eu mudo esta ou esta variável foi feita para algo em particular, e não precisa ser extensa. Então eu coloquei o nome da variável isto é, ele declarou variável. Mas não há nada lá que signifique que tecnicamente está definido, mas o valor é indefinido, então esta seria uma string vazia. Isso só significa que é indefinido. E nos comentários poderíamos dizer por que isso é indefinido. Então isso é apenas para configurar uma variável básica usada, e eu sei que para outras funções algo assim é absolutamente aceitável. Se você estiver adicionando qualquer nível de clareza que outro desenvolvedor possa se beneficiar, vale a pena escrever, vale a pena escrever, mesmo que leve um pouco mais para escrever o mesmo código. Só porque você está adicionando comentários, é que comentários importantes são fáceis. Os comentários são simples. Todo mundo sabe como fazê-las, e elas podem aumentar exponencialmente o seu nível de comunicação entre você e seu eu futuro . Quem vai olhar para trás o código que você está escrevendo agora, ou você e sua equipe, e vice-versa. 13. Operadores básicos: bem-vindo desenvolvedor nesta lição. Nós vamos aprender sobre isso, uh, operadores, operadores, enquanto realmente não são os mais interessantes do mundo. Assunto interessante no mundo é como explicar isso. É a coisa mais importante, mais fundamental. Eu não posso explicar o quão importante é entender os operadores para a programação porque agora tudo o que nós já usamos olhos, um pouco de manipulação de cordas. Criamos algumas variáveis. Podemos ter escrito alguns comentários no. Nada extraordinário. Para ser honesto, é tudo realmente muito chato e divertido. Está ficando tão perto. Mas antes que pudéssemos fazer isso, precisamos saber qual é o operador. Então a programação, embora não seja estritamente matemática, é muito, muito lógica. Por causa disso, você não pode evitar não fazer matemática. Você não tem que entender muita matemática para ser um grande programador. Essa é a verdade. Na verdade, muitos programadores são realmente terríveis em matemática. Tudo o que eles têm que fazer é descobrir a resposta correta uma vez garganta em algum pedaço de código. Isso lhe dá a resposta correta todas as vezes, e eles nunca mais precisam se preocupar com isso novamente. Essa é a coisa mais bonita da programação é que você não precisa ser Einstein ou Stephen Hawking ou qualquer tipo de gênio que revolucionou o mundo. Você pode literalmente nenhuma matemática muito mínima. E então alguns dos operadores que vamos falar hoje são super, super básicos. Temos adição, subtração, divisão de multiplicação, e vamos entrar em outros dois. Alguns destes são um pouco diferentes. Você pode não ter visto isso. Se você esteve em torno de programação um pouco, você pode ter visto alguns desses. Apenas lembre-se de manter um pouco de mente aberta aqui, hum, e tentar ser o mais lógico analítico possível, porque se você pode ligar essa parte lógica do seu cérebro, isso fica muito mais fácil para você. Então primeiro, vamos começar com a adição, certo? Se fizermos 12 mais 15 JavaScript nos dá 27 matemática básica. 12.5 mais 15.123 nos dá a resposta exata. Estamos à procura de adição básica. Subtração não é absolutamente diferente. E podemos dar a isto qualquer número no mundo que quisermos, certo? Vamos dar alguns números malucos. Acabei de lançar números aleatórios. Vejamos isto porque isto é uma matemática tão básica. Só sabemos que isso está correto. Isto não está incorrecto. Então, essencialmente, esta é a sua calculadora. Mas e se dissermos 15 divididos por 5? Bem, cinco vai em 15 e 3 vezes. Matemática básica, certo? Não estamos aqui para ensinar o suficiente. Estou aqui para mostrar que este pequeno sinal de operador é muito importante. O que acontece se o fizermos? 15 Dividido por 62,5 dá-nos um flutuador 15 dividido por 14,9 grupos fizeram isso errado. 15. Vamos tentar que a Divisão nos dê um número bastante preciso, mas e se quiséssemos obter o restante de algo que é um pouco mais complicado? Então a programação vem com este operador chamado Módulo S. E por isso, se dissemos 15 Ma ciumento , digamos para a direita, quantas vezes tem quatro entrar em 15 enquanto três vezes Então para um 12 e qual é o restante ? Três. Porque é exatamente o que procuramos. Se dissemos 97 listas de módulos 42 42 vai para 97 duas vezes com o restante de 13 que é módulo é que é muito bom. Você vai usar isso muitas vezes honestamente, ao longo da minha carreira como um desenvolvedor de front-end, eu não usei isso muitas vezes. Eu realmente não é mais na parte de trás do que eu tenho na parte da frente. Isso não quer dizer que você nunca vai usá-lo, no entanto. Ok, então eu apenas limpei a tela lá. Vamos criar uma variável. A idade é igual a 67 agora. Há mais dois operadores chamados Ah, o incremental e Decker aumentar e incremental aumenta conforme a palavra raiz sugere seu número. Idade mais, isso é o que um incremental parece. Ah, você está acima, mais 68. E se executarmos de novo? 69. E se executarmos mais uma vez? 70 e vai continuar subindo por um. Dissemos que idade é igual a 60.5 e executar o incremento. Continua subindo por um. E se quiséssemos fazer o inverso, poderíamos diminuí-lo em um. Por que isso é importante? Porque, no futuro, vamos entrar em loops. Loops irá executar código, e basicamente, até que ele atinge algo que diz parar. E para nós às vezes isso significa que atinge um certo número e aumenta em um repetidamente , ou diminui em um repetidamente até acertos como zero ou um número especificado. Agora os loops farão isso para nós automaticamente, mas há uma razão pela qual queremos fazer isso manualmente. É porque às vezes estamos em um loop in. Queremos manter o controle de outra coisa. Quantos objetos são aplicáveis quando você percorre uma série de palavras, como a raposa marrom rápida salta sobre o cão preguiçoso? Nós dividimos isso em palavras individuais, e olhamos através de cada palavra. Se essa palavra é cão, ou se essa palavra tem quatro letras ou menos, talvez aumente o número por uma e outra vez. Se isso não faz sentido para você agora, tudo bem. Vamos repassar coisas assim no futuro. Não é tão complicado como eu provavelmente fiz parecer. Agora vamos olhar para operadores de atribuição, operadores de atribuição, nosso ah sim, limpadores fora. E digamos que o número um é igual a 10. Número dois é igual a 15. E se dissermos número um? Ah, se só quiséssemos adicionar 25 ao número um, diríamos que o número um é igual ao número um mais 25. Isso não adianta quando poderíamos realmente acertar o número um mais igual a 25 agora a razão para isso é porque o número um era o número 10. Nós dissemos, Plus é igual a 25 se apertarmos alguém novamente, ele atribuiu. Então não só fez a adição para nós, mas também disse que o número um é qualquer que seja o total vai ser aqui agora. Poderíamos fazer a mesma coisa que dizemos número um, mas no inverso e menos um número. Então vamos menos 35. Vamos pensar é um número maior. Isso é menos 54. O número um é agora menos 19. Se tomarmos a variável novamente, sabemos que o Número um foi reatribuído a B menos 19. Agora você pode fazer esses operadores de atribuição com adição, subtração, divisão de multiplicação e lista de módulos. Tudo o que você tem a fazer é adicionar o operador na frente do sinal de igual, e ele automaticamente atribui o valor do que vai ser para essa variável para você . Então agora temos matemática em uma linha, então em vez de dizer, você sabe, Número um é igual a 10 mais 25 como fizemos antes. O que vamos dizer é que um entorpecido é igual a mais igual a 25. Agora sabemos que um entorpecido é atualmente menos 19. Isto novamente e o que temos é seis menos 19 mais 25 é seis. Nós digitamos alguém, fazemos sexo, então não há muito mais que possamos falar conosco, mas isso realmente torna sua matemática um pouco mais limpa e realmente só fazer isso para matemática básica. Não tente fazer isso por nada que é, você sabe, você sabe, fora de seus operadores básicos, se você tem que fazer as coisas em uma determinada ordem como suportes de massa Bennis cama, expoentes, divisão, adição de multiplicação, subtração, , novamente, esse tipo de matemática que você não precisa se lembrar agora. Em seguida, faça na fila. Sua matemática também pode ter parênteses nele. Então, se fizéssemos 12 mais 20 dividido por Tu menos um mais quatro totalmente inventado isso. , acertar Acertar, acertar, entrar e teremos o que essa resposta deveria ser 19. Mas o que isso estava fazendo é a regra da cama, senhorita. Agora, a próxima lição vamos falar sobre operadores de comparação, operadores comparação. É assim que a programação é feita. Se algo é verdadeiro ou falso, realmente se resume a coisas bastante booleanas ou um número é maior do que o outro. Tome algum tipo de ação. Esses operadores de comparação de ar estavam indo para entrar naqueles que também vem com, se mais declarações. partir de agora, o único dever de casa que eu acho que você deve fazer. Chame-o em muitos projetos ou o que você quiser é apenas abrir seu cônsul aqui e apenas fazer algumas contas básicas. Apenas descubra como isso funciona. Você não tem que fazer nada super complicado, mas tente isso. Tente o ah, o operador de adição, direita 12 mais 58. Ele me jogou em erro porque lado esquerdo inválido na atribuição. Isso significa que isso não é ah, variável. Mas se dissemos terrível Numb é capaz de 12 e dissemos 12 58. Isso nos dá nunca assim apenas brincar com coisas assim, sinta-se livre para obter erros como este, e sempre que você conseguir um ar, google -lo. O Google é uma grande fonte de informação. Stack Overflow tem uma tonelada de perguntas para você novamente. Ser um grande desenvolvedor é saber que foi para o Google coisas. Se você ficar preso, temos um grupo gigante do Facebook cheio de desenvolvedores que estão, você sabe, em sua posição, todo o caminho até o nível sênior que definitivamente pode ajudá-lo também. 14. Operadores de comparação: Muito bem, bem-vindos de volta e isto. Ouça, vamos falar de operadores de comparação agora. Este é um conceito fundamental entre todas as linguagens de programação. Realmente se resume a se algo é verdadeiro ou falso. E estas são opções binárias. Computadores não pensam em nenhum tipo de terra cinzenta. É, sabe, ou é preto ou branco. É verdade. É falso. É sim ou não. E para começar, precisávamos saber muito até agora. Agora, este ponto é realmente como você dá qualquer tipo de programa, a capacidade de pensar que se uma variável se revelar verdade, eu faço alguma coisa. Se for falso, faça outra coisa que saia para gostar, se mais operador e vamos entrar em que na próxima lição. Mas agora estamos falando de operadores de comparação. Sem operadores de comparação. Eles não são muito difíceis, na verdade. A única matemática que você precisa saber é se algo é maior do que menor ou igual a, há um outro tipo de ressalva lá, e esse é o que faz igual a, ou não é igual a. Então, em vez de realmente tentar explicar isso, eu acho que a melhor maneira de aprender isso é apenas escrevê-lo no console. Falarei enquanto eu for, e se tiver dúvidas sobre como isso funciona, fique à vontade para perguntar no grupo do Facebook. se tiver dúvidas sobre como isso funciona, Sim, então vamos começar com a gente, está bem? Então o que eu vou fazer é um é igual a um. Isso se revela verdade porque um é sempre um. O que acontece se eu disser que um é igual a dois? É tão falso. Agora, a razão pela qual isso está comparando e não atribuindo uma variável é porque há dois sinais de igual. Se dissermos que um é igual a um, JavaScript vai pensar, Oh, bem, eu vou assinar a variável chamada um. O valor de um. E o que acontece? - Nada. Porque você é variáveis não pode começar com o número. Agora. E se usássemos carros alegóricos em vez de inteiros? Dissemos que 1.0 é igual a 1.0. Isso é verdade. Que tal 1.0 é igual a um? Isso também é verdade. Tudo bem, então apenas liberado cônsul lá, e, e, uh então, isso é gerentes básicos, certo? Um é igual a 10. Sabemos que um não é igual a 10. Apenas 10 podem ser 10. Então isso acaba por ser falso. E se começássemos a comparar cordas juntos? E se dissemos que teste é igual a teste? Bem, isso é exatamente a mesma coisa, comparando essencialmente contra si mesmo. Então isso tem que ser verdade. Mas e se dissermos que teste é igual a outra coisa? Agora estamos comparando duas strings juntas, então o tipo de dados é o mesmo. No entanto, os valores são diferentes, então teste não é igual a outra coisa. Só porque o tipo de dados é o mesmo não significa que isso é necessariamente verdade. E quando apertamos enter, vemos que isso é, de fato, falso. Então, o que acontece se começarmos a colocar algumas dessas em variáveis? Então vamos colocar o nome da variável é igual a Caleb. É só o meu nome. Agora. Queríamos dizer nome é igual a igual a isso é compará-lo. Então isso não vai se comparar. Este nome vai comparar Caleb, lembre-se Capital K porque javascript é sensível a maiúsculas de minúsculas. Então, se dissemos que Caleb é igual a vamos soletrar meu nome tecnicamente o nome apropriado, o que acontece? É falso. Mas se dissermos que Caleb é igual a igual a. Estamos comparando Morto com Capital K. É verdade porque é exatamente o mesmo agora. Agora, se fizermos uma comparação estrita, três sinais de igual, e colocamos exatamente a mesma comparação que acima, mas apenas com um sinal de igual adicional. Ainda é verdade agora. A razão para isso é porque esse valor aqui é literalmente o mesmo. Então não está comparando apenas o valor. Também está comparando o tipo de dados. Agora. E se dissemos que idades são iguais a 45 e então comparamos idade é igual a 45. Isso é verdade. E se a idade for igual a igual a 45? Também é verdade. E se as idades forem iguais a 45,0? Também é verdade, JavaScript percebe que 45 é o mesmo que 45,0. Ou se o fizéssemos? O inverso 45,0 é geralmente igual à idade. Também é verdade, então não importa de que lado a variável igual à comparação vive desde que esteja sendo comparada. É só com isso que se importa. Agora há outra comparação que precisamos realmente considerar aqui. Limpe o conselho aqui. E se dissermos que a idade é maior a maior ou igual a 45? Além disso, a verdadeira idade é maior que 45. Isso é falso. A idade é de 45 anos. Não é maior do que é maior ou igual a antes de continuarmos. Vamos dar uma olhada em alguns dos diferentes operadores que temos. Temos igual a estrita igual a, não igual a estrita, não igual a nós temos maior do que ou igual a menor ou igual a. E então quando queremos misturar e combinar comparações que temos, isso é. E então, em vez de escrever a palavra e costumávamos ter m porcentagens ou quando queremos dizer se algo é verdade ou outra coisa é verdade, usamos para canalizar símbolos, e isso significa ou agora vamos declarar novamente. É re declarar idade é igual a 20 e se você mora nos Estados Unidos, a idade de beber é 21 então a idade de beber é igual a 21. Agora podemos dizer, essencialmente, se a idade é maior ou igual à idade de beber, então você pode ir e comprar cerveja. Mas nós compararíamos isso com a idade, não 20 anos. Mas a idade é igual ou maior do que a idade de beber. Então podemos desculpá-lo. Casaco. Agora isso sempre tem que acabar. Verdadeiro. Neste caso, não foi falso porque a idade é menor que a idade da bebida. Se fizéssemos o inverso que escrevemos, idade é menor ou igual à idade de beber. Nós nos tornamos verdadeiros. E se nós apenas o fizéssemos? A idade é menor do que a idade de beber, também é verdade. Mas o que acontece quando começamos a comparar variáveis com outras variáveis que não existem? Então, e se dissermos que idade é igual a outra coisa? Diz, você vê, nós temos algo mais não está definido. E se dissemos que idade é igual a e sabemos que o outro tipo de dados é indefinido? Bem, isso é falso, porque as idades, na verdade, são definidas. Mas e se dissermos que outra coisa é igual a indefinida? Bem, novamente, JavaScript nos dá uma área de referência e diz que algo mais não está definido, e fazer uma comparação rigorosa nos dá exatamente a mesma coisa. Então, por que devemos usar uma comparação rigorosa? Bem, vamos dar uma olhada na idade de 20 anos. E se o fizéssemos? Idade é igual a uma string 20. É verdade o que dissemos. A idade é igual a 21 anos. Isso é falso. Então JavaScript percebe que este 20 é o mesmo que um inteiro, que tecnicamente não é certo, porque este não é suposto ser um número. Isso é considerado como uma string. É aqui que começamos a usar operadores rigorosos. E se dissermos que os Anjos são iguais a 20? Ficamos falsos. Então, embora seja verdade aqui com uma comparação frouxa, é falso aqui com uma comparação rigorosa. Não, por que você usaria isso? Bem, porque às vezes o usuário está indo para inserir informações, e quando a entrada é como um número ou texto, ele sempre volta como uma string. Então, se o agente de usuários colocar aconteceu para ser 20 quando queremos compará-lo para ser pelo menos 21 ou maior, nós poderíamos fazer uma comparação solta maior ou igual a 21 falso, ou se eu tivesse que ser uma idade exata, por exemplo, alguém ganhando na loteria só poderia ser. A idade de 20 tem que ser exatamente 20 nós poderíamos fazer isso ou poderíamos fazê-lo com um operador rigoroso como este que se revela verdade também. Ok, então agora no enfraquecimento inverso não é igual à direita, então ainda temos idades. 20 o que era essa idade não é igual a 20. Isso é falso, porque a idade é, na verdade, 20. Mas cada centavo de idade não é igual a nenhum outro número. Qualquer coisa que não seja o número 20. Isto acabará por ser verdade. Então poderíamos dizer que a idade não é igual literalmente qualquer lata daqueles que estão lá dentro. Não, podemos fazer uma comparação rigorosa também. O que acontece se dissemos que idade não é igual a indefinida? Bem, isso é verdade, porque a idade foi definida. Isso significa que a idade tem um valor técnico de 20. E se dissermos, hum, algo mais não é igual a indefinido? Nós ainda obter o mesmo não é definido erro. Agora, se nós criarmos outra variável, mas uma daquelas em branco que nós vimos apenas um pouco de Vamos chamar essa variável vazia volta como um indefinido porque içamento variável, nós digitamos vazio, Ficamos sob busca. E daí se nós dissemos. Vazio é igual a indefinido. Bem, isso é verdade. Vazio é igual a estrita indefinida. Também é verdade. Mas e se dissermos que Vazio não é igual a indefinido? Ninguém é falso. Então é exatamente o oposto do que você vê aqui em cima. Porque Vazio, que foi declarado como Variável não tem nenhum tipo de informação associada a ele é, de fato, indefinido. Sabemos que usar o não é igual ou o estrito não igual a comparação que vazio é de fato falso. Então, o que eu gostaria que você fizesse apenas para um pouco de prática, abrir seu conselho e começar a escrever algumas variáveis e apenas compará-las? Realmente não importa o que é. Eu quero que você tenha uma idéia de como isso funciona contra se é certo ou errado. Certo ou errado pode vir um pouco mais tarde. Eu só quero que você entenda como essas coisas funcionam, as comparações que você tem acesso a você tem igual a um estrito igual a maior ou igual a maior do que você tem menor ou igual a. Temos menos do que não é igual e não é igual a estrita. Então vá em frente, dê uma chance a estes, e quando terminar, veremos você na próxima lição. 15. Se.. Declarações: Olá. Nesta lição, vamos falar sobre se mais afirmações. Agora nós fizemos um monte de flerte com “e se mais afirmações são”. Nós aprendemos sobre comparações e variáveis, e nós realmente temos todos os ingredientes que precisamos para entender. E se outra declaração for agora. A maneira mais simples de descrever o que uma declaração if else é realmente apenas que se algo é verdade ou se você quer que ele seja falso, em seguida, executar um determinado conjunto de revestimento algumas linhas aqui. Algumas linhas são. Se não for isso, se for o oposto, faça outra coisa. Este é um daqueles conceitos fundamentais de todas as linguagens de programação que todos têm, se mais afirmações, é assim que um programa decide o que é suposto fazer versus o que não deve fazer. Ah, e quando é suposto tomar qualquer tipo de ação. E isso é quando as coisas começam a ficar muito, muito interessantes, porque os usuários podem começar a inserir suas próprias informações e uma vez que eles inserem suas próprias informações, você pode começar, você sabe, alterando as ações com base no que elas adicionaram. Então, como um exemplo muito básico, vamos começar com nossa primeira variável. Diga, o nome da variável é igual a Caleb, certo? Só o meu nome. Sabemos do que se trata. Não é excitante. Caleb, vá a ele. Está bem, estou a chegar ao ponto. Então, se e a impressão os parênteses para a declaração NFL é realmente tudo vai aqui. aqui que está a sua comparação. Sua comparação. Eu não soletrei isso. Certo? Venha. Harrison entra aqui. Então, se o nome é igual a Caleb, o que sabemos que é, o que deve ser executado? Então, quando abrimos uma nova instrução if, envolvemos o novo código que deveria ser executado entre colchetes, assim como você vê aqui. Então, o que aconteceu? Lá estava eu tinha entrado um pouco rápido demais. Então suponha acertar, mudar entrar. Isso é tudo o que foi. Agora, se meu nome é Caleb Alert, o nome é Caleb. Ainda não aprendemos formalmente o alerta. Se não for, meu nome não é. Mate-o. Então isso não é formatado muito bem. Normalmente, você verá código com um pouco de espaçamento mais agradável. Algo como isto. É agora que temos se um nome é igual ao que você especificar, esse nome é suposto ser, lembre-se, é sensível a lembre-se, maiúsculas e minúsculas. Em seguida, execute o código entre os colchetes. Ninguém aqui vai fugir. Só um alerta básico. Agora, se o nome não é igual a Caleb, que lembre-se não é o sinal de igual ponto de exclamação. Então, se o nome não é igual a k nível alerta outra coisa. Então, o que acontece quando eu executar isso? Meu nome é Caleb. Esse é o alerta que o Chrome me deu. Então agora estamos começando a entrar um pouco mais em interatividade porque isso acabou de me alertar na página. E não há nada que você possa fazer sobre um alerta quando você alerta alguém que aparece sempre. E isso é uma afirmação básica “se else “, isso é tudo o que há para ele. Agora, se você quiser mudar isso juntos, você pode fazer o que é chamado de outra coisa. Se assim for, temos, se else se e else como um exemplo rápido, se nome é nome é igual para escolher qualquer nome que você quer não tem que ser sua variável deve realmente ser outra coisa. Vou ver se o meu nome é Joseph Alert. Olá, Joe. Senão se nome é igual a, e que deve realmente ser espaço em outro lugar. Se o nome é igual a, podemos saber que este é verdadeiro? Então isso vai funcionar. Isso é verdade agora. Poderíamos deixar aqui, se quiséssemos. Não há nenhuma regra dizendo que você tem que ter uma outra declaração ou declaração NFL. Realmente, Você só precisa, se declarações, se algo é verdadeiro ou se algo não é verdade, executar um determinado pedaço de código. Isso é tudo o que é. Mas para o bem deste exemplo, não é uma corrida por isso rapidamente. Se o nome é Joseph Alert. Olá, Joe. Se o nome não for Joseph, verifique se esse nome é Caleb. Sabemos que isso é verdade. Isso vai correr. Mas se o nome não coincidir com Joseph ou Caleb, então ele vai alertar outra coisa. Então, baseado no que sabemos até agora, basta dar um segundo positivo rápido. Você ouve se você tem que Andi, pense com você mesmo qual deles é suposto executar ou se você mudar a ordem destes, qual deles vai correr? E se Joseph ou Caleb for verdadeiro e um dos 1º 2 Se instruções for executado com sucesso, o código dentro dele começa a ser executado será que o código dentro da instrução else também é executado? Vamos descobrir se diz que isso é verdade porque o nome é Caleb e é isso. Então não funcionou porque Joseph, o nome não é Joseph Iran. Porque o nome é Caleb e não executou a instrução else. Então, e se mais se outro bloco realmente faz é verificar para uma certa comparação verdadeira? Então, quando sua comparação for verdadeira, ele só vai executar esse código. Ele não vai executar nenhum dos outros blocos que você escrever com ele. Na próxima lição, vou mostrar-lhe como pedir alguma informação. E então vamos fazer declaração NFL com base no que as entradas do usuário, e vamos mostrar-lhe que a entrada do usuário pode realmente mudar como um programa agir. Mas, por enquanto, dou uma segunda abertura do seu conselho sobre o Decreto It. Ah, e se mais se outra declaração para si mesmo em apenas jogar em torno disso, certifique-se de que funciona. A lição aqui não é sobre alertas, embora se você quisesse jogar isso lá, nenhum dano feito 16. Se.. Elseif.. Else da entrada do usuário: Tudo bem. Na última lição, aprendemos como fazer e se else if e else else statement. Mas agora eu quero mostrar a vocês como podemos pegar alguma entrada do usuário. Ah, e realmente personalizar o que o programa deve fazer. E para isso precisamos aprender algo novo. Algo chamado Prompt e última lição. Aprendemos a alerta de barco um pouco. Um pouco informalmente, suponho. Mas neste, vamos aprender sobre o prompt, que é basicamente um alerta com uma pequena caixa de texto que permite que as pessoas insiram informações . Agora, apenas como aviso, ninguém mais usa prompts. Mas como os prompts são agradáveis e simples, vamos usá-los nesta lição apenas para mostrar como podemos usar a entrada do usuário para mudar como o programa age. Então vamos em frente e digite. Nome é igual a prompt. Qual é o seu nome agora? Aqui? Eu apertei shift enter porque se eu apenas apertei, insira-o, apenas vai ser um prompt e não vai fazer mais nada. Agora, é aqui que começamos a colocar um monte de javascript dentro de um arquivo JavaScript para que possamos executar mais de uma linha de cada vez. Agora, eu disse, se o nome realmente ver isso, se o nome para minúsculas é igual a Caleb, apenas o meu nome. Nada. Alerta chique. Olá, Caleb. Agora que é uma afirmação básica, podemos deixar isso aqui. Na verdade, acho que devemos comandar isso. Vamos ver o que acontece. Qual é o seu nome? E vou colocar bem, é pedir pelo Caleb em maiúsculas, então vamos mudar isso. Vamos colocar tudo em maiúsculas menos para B B. Poderia estar em minúsculas porque lembre-se, entrada do usuário nunca é a maneira que você espera. Então você tem que fazer um pouco de filtragem extra para se certificar de que a entrada do usuário é possível. Ontário diz olá, Caleb. A razão para isso é porque ele pegou meu nome. Ah, que era Kloo tudo em maiúsculas com um ser minúsculo e mudou para um minúsculo. E então ele disse que se o valor minúsculo da variável name é igual a minúsculas Caleb , em seguida, alerta. Então o que eu tenho aqui é apenas um arquivo de índice em branco. Não há JavaScript sendo atacado nesta página. A primeira coisa que precisamos fazer é anexar o arquivo JavaScript. Então, a parte inferior do meu corpo Typescript SRC é igual a javascript dot Js The JavaScript IGs é seu arquivo JavaScript. Agora eu tenho um arquivo RGs JavaScript, e ele está no mesmo diretório como index dot html está na mesma pasta. Portanto, isto é tudo o que temos de fazer agora para ter a certeza de que isto está a funcionar. Vamos passar para JavaScript em Js e digitar alerta. Olá mundo. Tudo o que queremos fazer é ter certeza de que o script está funcionando. Eu salvei aquele cofre. Ambos os arquivos sobre chrome e eu atualizar a página e ele diz, Olá mundo. Isso significa que o arquivo javascript está funcionando. Agora, existem outras maneiras de verificar isso. Este é um dos mais rápidos desperdiçados. Verifique se seu JavaScript está carregando. Você não tem que abrir o seu consular nada. É só um alerta flagrante na sua cara. É feio, mas faz o trem. Então agora queremos reescrever nosso roteiro. Vamos dizer o nome. É fazer nome da variável é igual ao que é o seu nome, e queremos embrulhar isso com um prompt e dizemos se o nome alerta Olá e sabemos como pode Katyn oito. Certo. Então usamos o Hello, capitão. Oito. Nome da variável e Olá convidados. Então o que isso está fazendo é se alguém digitar o nome, se houver informação aqui, ela voltará. Verdadeiro. JavaScript vai dizer ainda que há algo lá que é verdade. Não é indefinido. Não é. Não, não é falso que esse tipo de dados desse valor seja de fato verdadeiro. Tem alguma informação lá dentro. E se houver, apenas nos dê um alerta de volta, diga olá e seja qual for o valor. Mas se não houver nada lá, se alguém clicar no botão cancelar, o que acontece? Bem, olá, olá, Guess Now, isso é chamado de fluxo de dados do piso de informação. E este é também um conceito muito importante. Praticamente todas as linguagens de programação novamente é o que acontece se algo não atender sua expectativa. E se alguém cancelar no prompt? Então, digamos que isso volte para esta página. Vou bater, atualizar e perguntar-me qual é o meu nome agora. São apenas dois cenários. Eu posso digitar meu nome e apertar OK, ou eu posso cancelar. Então, o que acontece quando coloco o meu nome ou o nome de alguém? Não precisa bater o meu nome. Vamos colocar o nome de outra pessoa lá. Vamos colocar meu nome é Zephyr e bater OK, olá, sempre legal. Isso é entrada do usuário. Não, atualizo a página novamente para que esse prompt seja executado novamente. Qual é o meu nome? E se eu apertar cancelar desta vez, o que vai acontecer? Bem, se olharmos para trás para o código dela, se há um nome que diga olá, mais o seu nome, se não houver nada vai dizer olá, convidado. E, na verdade, não aconteceu. E isso é porque eu esqueci de levar em conta do que nenhum tipo de dados. E isso é algo que acontece com todos os programas. De vez em quando, nos movemos um pouco rápido demais. Ah, lição. Como desenvolvedor, cometer erros é bom. Você está autorizado a cometer erros. Como desenvolvedor, estou lhe dando permissão para cometer a maioria dos erros agora. Completamente aceitável. Isso só se torna inaceitável quando você começa a cometer o mesmo erro uma e outra e outra vez. Então, olhando para trás para o código, sabemos que o valor do nome é não. Não voltou como um verdadeiro valor. Foi por isso que entrou aqui. Então, o que? Nós precisamos dio em vez de executar uma instrução else, nós executamos uma instrução if else. Desculpe, executamos uma outra instrução if else. Se o nome é igual a vamos fazer uma comparação exata e ver como isso mostra alerta. Seu nome está vazio. Diga isso. Voltar a uma página Atualizar. Meu nome é cancelar de novo. Diz olá. Não, bem, por que isso? O que é porque a declaração se veio antes da declaração else if e assim uma vez que isso é verdade vai ignorar o resto da declaração de pneu Thean. A cadeia de comando vai de cima para baixo, e uma vez que um deles se encontra, não importa o que mais você tem lá, não vai incluir ele não vai executá-lo. Isso é o que precisamos fazer é mudar a ordem disto aqui. Então eu só vou mover este para cima um para baixo e então tudo o que eu fiz foi dizer, verificar se o nome não é primeiro agora que estamos usando uma comparação rigorosa aqui. Vamos ver o que acontece. Qual é o meu nome? Eu bati. Cancelar novamente, diz Hello Know por que ele está fazendo isso? Poderia ser porque nós temos estão lá em cima? Será que é porque estamos usando uma comparação rigorosa? Poderia ser porque não é suposto estar entre aspas ou apóstrofos poderia ser agora, como um desenvolvedor, este é um daqueles momentos em que você precisa entender que saber tudo, é impossível. Você não tem que se lembrar de coisas assim o tempo todo. Este é um pequeno detalhe, e se você alguma vez esquecer, é totalmente aceitável entrar na velha máquina do Google e digitar. Seja qual for o seu questionamento sua consulta é, as chances são que ele irá levá-lo a uma página de estouro pilha e você vai encontrá-lo provavelmente uma boa resposta lá dentro. Agora muda para saber o dedo do pé. Remova essa comparação rigorosa, e eu só quero ver o que isso vai acontecer direito. Estamos experimentando aqui e novamente, experimentando como desenvolvedor completamente aceitável porque é assim que você aprende. Você experimenta, você comete erros e você reitera sobre que você apenas continua iterando, e quando você come, você aprende mais e mais. Isso é tudo o que o desenvolvimento é. Essa é uma tecnologia muito antiga. É. É as pessoas tentando coisas novas e avançando, falhando, dando um passo para trás, percebendo por que falharam e tentando novamente. Isso é tudo o que é. Ainda temos. Não, tudo bem. O que acontece se removermos a barra? Ainda nos conhecemos agora. Outra opção que temos é verificar se esta é uma string ou não. Agora, você se lembra de algumas lições atrás? Bastante lição para ir. Eu disse que a entrada do usuário sempre vem como uma string. Na maioria das vezes, isso se aplica em todas as plataformas para cada site e aplicativo. E isso é só porque não sabemos se os números são o usuário. A entrada é suposto ser um número ou imposto, e é nosso trabalho como desenvolvedor descobrir o que é. Então tudo o que vou fazer é adicionar citações por aqui. Então agora ele vai dizer se o nome é não como uma corda como esta é o que ele trouxe de volta. Isto é o que ele pensa. Seu nome atualmente não é que não haja nada lá. Não que outra coisa. Não que isto seja um número ou flutuando. Só pensa que este é o seu nome. Então seria uma corda. Guarde isso. Atualize a página, clique em Cancelar e garanto que desta vez vai funcionar. Seu nome está vazio, assim mesmo. Agora sabemos o que acontece quando seu nome está vazio? Não, como uma lição de aprendizagem. Volte e descubra o que aconteceu. Bater. Refresque-o. Cancelar. Meu nome ainda está vazio, então sabemos que não era nosso. E se fizermos uma comparação rigorosa? Mesma coisa. Então sabemos com a comparação de rua que isso está voltando? Não, não. Outra forma de verificarmos. Este é um belo, belo método aqui. log do console registrará qualquer coisa no console. O que vou fazer é inspecionar. Atualizar a página cancelada diz que meu nome está vazio no console. E foi com isso que ele voltou. Agora sabemos qual é a resposta. Agora não temos que fazer muitos desses testes adicionais. Podemos fazer um registro de console aqui. Poderíamos fazer um login no console aqui. Fazemos um aqui. Poderíamos fazer um aqui para ver onde as informações estão indo, e isso lhe dá uma idéia visual melhor de onde seus dados estão fluindo também. Agora, o que acontece quando coloco o meu nome é Caleb. Bater. Entrar. Olá, Caleb. Morto entra aqui. Só é esperado. Assim como o quê? Sem trabalho. O que sabemos resposta nos deu, mas tipo de Não, é Caleb, como desenvolvedor é um programa também é seu trabalho para procurar eficiências. Então olhamos para isso, se mais se outra afirmação sabemos que só pode haver dois tipos diferentes de entrada . Certo? Sabemos que só pode haver um cancelamento e em OK, você envia seu nome ou você cancela? É isso. O que temos aqui é se o seu nome está vazio. Se você não adicionou um alerta de nome que seu nome está vazio caso contrário, basicamente, basicamente, em todas as outras situações, basta alertar o nome. Então, por que diabos temos a outra declaração lá? Se houver apenas dois cenários, só precisamos. Se else declarações, não precisamos verificar o que o nome está na instrução else. Porque, francamente, o nome sempre será repetido de volta na mensagem de alerta. Agora, se quiséssemos ter certeza de que o nome era algo muito, muito específico, então diríamos se o nome é igual a outra coisa, e somente nesse tempo será exibido. Então vamos tentar. Vamos tentar outro nome. O que isso está fazendo se você não tem nome. Se você cancelou, seu nome está vazio. Se o nome for Henry, alerte Henry. Caso contrário. Se ele não atender a nenhum desses critérios, não faça nada, e isso é exatamente o mesmo que deixar uma declaração L em branco lá. A única diferença é que você não precisa ter a outra declaração lá dentro. Se nada vai correr , vamos nos livrar disso. Salve isso. Digite Henry. Olá, Henry. Mas como exemplo, quando digitamos qualquer outro nome, as pessoas digitam em pradaria. Nada acontece. Ainda temos o nome. Estamos recebendo o registro do console, e isso sempre vem aqui. Mas não havia nenhum alerta, modo que é praticamente o mais em profundidade, se else if else declaração baseada na entrada do usuário que qualquer um poderia realmente dar-lhe avançar , o if e else if declarações realmente não obter muito Complicado. Mas enquanto isso, o que eu quero que você faça é que eu quero que você basicamente pegue este roteiro se você puder. Preferia que escrevesse isto. Não é um roteiro longo, então não vai demorar muito, mas escrever dá um pouco de memória muscular e seus dedos, então escrever torna-se um pouco mais fácil no futuro. Tudo bem, eso isso é tudo para se else e else declarações e nos veremos na próxima lição. 17. Selecionadores de consultas: Olá. Bem-vindo de volta. Eu estava indo originalmente para repassar alguns conceitos mais fundamentais de programação em Javascript. Mas para ser honesto, está ficando um pouco seco. E eu acho que precisamos de algo um pouco mais emocionante, algo um pouco mais interativo, algo que realmente demonstre por que Javascript é tão popular e por que é uma boa linguagem de programação agora, para fazer isso, Acho que precisamos criar um pouco de interatividade na página. Então agora vamos editar um pouco de HTML. Este curso não é baseado em HD Miller CSS. Então, o estilo que você vê o HTML básico é muito cru. Não estamos aqui para fazer um site bonito. Tenho certeza que você sabe HTML e CSS e você pode fazer isso tão bonito quanto você quiser. Mas para o propósito desta lição, vamos manter as coisas simples. Então, o que vamos aprender hoje são seletores de consulta. Como obtemos informações ou como adicionamos informações à página? Então nós temos duas partes para esta lição que eu gostaria de passar sobre o primeiro 1 é como nós adicionamos informações para a página e o segundo 1 é como nós pegamos informações da página Agora, um seletor de consulta requer uma classe e eu d ou em elementos. Agora, há maneiras de tornar isso muito mais complicado, mas vamos ficar com o básico agora. E neste momento, você deve estar familiarizado com idéias e classes e HTML e CSS. Então o que vou fazer aqui é escrever uma aula básica. Na verdade, vamos fazer um I.D. que eu vou chamar isso de principal, então eu tenho um diff chamado Main com a idéia do Maine lá dentro. Essa ideia é muito importante, e vou deixar isso em branco. Não vai haver nada lá no meu navegador. E estou vendo a abertura do conselho e o que vemos aqui dentro da seção Elementos . Se eu desligar o corpo, podemos ver que o Maine está lá no caso de você não saber que pode editar informações aqui, então faça isso um pouco mais fácil para você ver ouvir. Então eu adicionei a palavra testada e adicionou-a à minha página imediatamente. Em seguida, adicione um pouco mais diz e mais para que ele não leva em conta o seu espaço em branco extra porque isso é o que HTML faz ele não é terrível seu espaço em branco extra a menos você explicitamente diga que ele precisa ter mais espaço em branco. Então eu vou desfazer isso. Vou passar por cima do meu console e sou uma variável criativa, e esta variável vai ser chamada de corpo. Na verdade, não precisamos realmente da barra, e tudo o que queremos fazer é levantado seletor de consulta de ponto de documento. Agora, a razão pela qual usamos documento ponto é porque o seletor de consulta é um método, uma função que é uma parte do documento de página. Então nós digitamos Cree seletor e o que estamos procurando? Procuramos a identificação doMaine. Procuramos a identificação do Então nós envolvemos isso em uma string com parênteses em torno dele porque é uma função. E assim como você está segmentando em CSS, você segmenta da mesma maneira usando seletores de consulta. Então aqui nós digitamos main it enter, e nos dá o nosso HTML. Podemos vê-lo lá dentro, então sabemos que foi selecionado a coisa certa. Na verdade, na verdade, o que eu estou indo para didio porque eu não quero. Eu crio muitas variáveis de nomes diferentes. Na verdade, o que eu vou usá-los e limpar isso lá nós temos Maine é igual a significar. Quero ter a certeza que o Maine é igual a mim desta forma. Ninguém está ficando confuso sobre o elemento corporal principal. Se quiséssemos adicionar qualquer informação a este elemento, adicionamos HTML interno. E quando começamos a digitar a palavra ponto interno, obtemos parênteses html ponto interno em um abrir uma string e dizer, Olá, mundo. Como é que isto não funcionou? Usamos parênteses. Usamos uma string como fizemos no seletor de consulta, mas nos deu uma promessa de que HTML não é uma função que ele. Quando você vê algo assim, é porque literalmente não é uma função. Não há nada para correr. Em vez disso, o que você deseja fazer é alterar o valor real. O HTML interno é o que é mantido dentro elemento forno. Isso é o que Javascript vê, como. Ele o vê como uma propriedade, não uma função, mas como um atributo, assim como você pode ter cabelo escuro ou olhos azuis. Ou você pode estar usando uma camisa verde. É uma propriedade de quem você é ou do que está vestindo, e é isso que vamos editar. Então, em vez de tentar mudar as propriedades fundamentais de uma pessoa para fazê-la mudar a cor da camisa, vamos mudar a cor da camisa porque ela não precisa ser tão complicada. Então aqui nós digitamos principal ponto menor feminino é igual a olá mundo, e vemos que ele aparece automaticamente. Então agora estamos ficando muito mais interativo são JavaScript é realmente capaz de entrar e editar coisas que estão na página, desde que ele saiba o que procurar. Neste caso, está à procura da identificação do Maine, que sabemos que está aqui agora. Se olharmos para o elemento, ele realmente acrescentou, Olá, mundo para nós. Então, se quiséssemos, poderíamos entrar aqui. Poderíamos editar esse “olá mundo” para “Para” aparecer no cônsul deles, poderíamos executar a mesma coisa de novo, e isso só vai substituí-lo assim, você sabe, se quisermos adicionar mais, nós pode usar um operador aritmético. Dizemos Maine pensamento interface e-mail é igual ao que quer que seja atualmente mais Olá mundo . Então, em vez de adicionar Olá mundo, vamos adicionar outra linha aqui que apenas diz que estou editando coisas Página. E agora olhamos para cá e dizemos: “Olá, “Olá, mundo”. Estou editando este paciente. Temos as duas frases lá dentro. Mas e se quiséssemos obter a informação de lá e armazená-la em uma variável editada e colocá-la de volta na página? Bem, podemos fazer isso também. Vamos criar uma nova variável chamada conteúdo Nome da variável não é importante. Você pode chamá-lo do que quiser, dizer principal ponto inter html. E agora toda vez que escrevemos conteúdo, chegamos ao conteúdo atual. Então, o que acontece agora que criamos a variável de conteúdo que tem Hello world? Estou editando esta página como uma string. O que acontece se editarmos o HTML do teatro novamente? Apenas mudança de conteúdo. Bem, vamos descobrir o ponto principal inter envelhecido, sabe? Bem, sabemos que é a mesma coisa. Vamos mudar isso. E adicionamos a palavra editada. Agora, o que acontece quando escrevermos contato novamente? Nada de conteúdo foi armazenado da maneira que originalmente pegamos a informação. Então só porque você armazenou informações em uma das variáveis do enter A ela macho não significa que você não pode ir e mudar isso em seu HTML novamente e ter seu conteúdo mudar. Isto é uma coisa muito, muito boa. Então agora temos o conteúdo original. Não temos a palavra editada lá. Isso é perfeito. É exatamente o que queremos. Mas agora queremos editar conteúdo e jogá-lo de volta para a página. Queremos editar a página com base em quê? O que costumava ser. Então veste-te como uma demonstração. Vamos mudar o html Inter para me remover. Sabemos que o conteúdo ainda é o que era originalmente. Então, agora vamos editar o conteúdo de contato é igual a Bem, o que queremos fazer com ele? Podemos alterá-lo para maiúsculas para conteúdo para maiúsculas. Agora, uma coisa bonita em JavaScript é essa habilidade de unir métodos para que possamos dizer maiúsculas e então poderíamos dizer ponto substituir rostos por traços. E o que acontece quando batermos? Entrar? Fez exatamente o que queríamos. Eso transformou tudo em maiúsculas. Substituímos nosso primeiro espaço por um traço. Isso é porque não lhe dissemos para substituir todos os espaços. Acabamos de lhe dizer para substituir o 1º de seu tipo. Então, agora, se escrevermos ponto principal nela, HTML é igual ao conteúdo. Nós alteramos o conteúdo da página. No entanto, ao fazer isso, nós substituímos a variável de conteúdo original e ela não é mais o que costumava ser. Se não conseguirmos mais recuperar isso. 18. Query de consultas parte 2: vamos fazer outro exemplo. Vamos criar uma entrada. Vamos usar um eleitor de classe em vez disso e vamos chamar este campo de texto para ter um tipo de entrada. É classes de imposto, campo de texto e dentro deste campo de texto. Vamos assumir que alguém inseriu algum tipo de informação aqui. Algumas informações aqui vamos voltar para uma atualização de página. Temos um campo básico de entrada, assim como algumas informações aqui. Agora, como obtemos essa informação? Não é o mesmo que fizemos com o Main. Vamos tentar isso. Vamos fazer txt é igual a documentos. Doctor Query, seletor Qual é o seletor que estamos procurando ponto campo de texto ponto Sendo a classe assim como em CSS legal. Isso nos dá todo o elemento. Temos todo o elemento para modificar aqui. O que acontece se o fizermos? Não está dentro dela. HTML era igual ao teste de retorno. Não parecia ter mudado nada lá dentro. Bem, ok, mude o html interno da entrada. No entanto, a entrada é um desses elementos que não tem HTML interno. É uma etiqueta de auto-fechamento. Só há um. Não é. Não é como uma div ou um campo de texto ou uma área de texto. Em vez disso, o campo de entrada geralmente se parece com isso. Esse é o seu campo de entrada. Então, como vemos a entrada que queríamos mudar? Como vemos isso na página? O truque aqui é que não estamos mais editando edição interna de HTML e atributos. Queremos alterar o valor que queremos alterar o valor em tributo. Então, em vez disso, digite txt e, em seguida, o nome dos atributos é igual a um novo valor de atributo. E agora podemos ver que o valor do campo de texto também mudou. Agora, se quiséssemos obter essa informação, criação de nova variável chamada entrada é igual ao valor txt dot. E se eu alertar a entrada, ele nos dá exatamente o que está na página. Mas e se eu mudasse dinamicamente na página? E se eu for um ano? Não estou olhando para o código, certo? Como usuário, eu só quero interagir com a página normalmente, então eu vou dizer olá. Meu nome é Length e eu queria obter essa informação novamente. Bem, eu sei que quero alertá-lo e eu sei que eu preciso obter essa informação novamente. Então, o que acontece se eu dio txt dot valor? Obtemos o valor do campo de entrada agora é perfeito, mas isso pode ser um pouco confuso. Como funcionou aqui, mas não funcionou no exemplo anterior. Quando estamos mudando o HTML interno, isso não quer dizer que ele realmente não funcionou ele funciona da maneira que nós queríamos que ele funcionasse. No entanto, há pouca diferença porque estamos trabalhando com um valor. Então o que estamos fazendo aqui é pegar a variável txt daqui de cima. E sabemos que isso está selecionando essa entrada todo esse elemento. Agora a variável não armazenou o valor deste elemento. No entanto, esta variável está simplesmente se referindo a todo o elemento. Então, sempre que o valor mudar, podemos ir em frente e obter o novo valor porque não armazenamos isso em uma variável. Agora, se fizemos, dados é igual ao valor txt ponto recebemos Olá, Meu nome é lâmpada. Se mudarmos txt, esse valor é igual a outra coisa. Digite os dados novamente. Ele está de volta para onde estava, então ele basicamente tira um instantâneo de onde os dados estavam, o que eram. Ah, e armazena em uma variável para você. Eu ia comentar isso em HTML para que ele não apareça, e eu vou voltar para o Maine e eu vou mudar alguns desses atributos de estilo porque em javascript, uma coisa muito comum que você quer fazer é adicionar classes, Remova o estilo, adiciona estilo. Você sabe, você quer basicamente manipular seu CSS porque CSS é extremamente estático. Deseja alterá-lo de tempos em tempos? Atualizar a página? Eu não tenho absolutamente nada lá olhando meus elementos. Eu sei que o Maine está lá. Minha entrada também está lá, mas é comentado. Então não vamos trabalhar com isso. O principal se main é igual ao documento Di Query seletor Cool. Ele selecionou o caminho certo. Agora, se eu quiser mudar o inter html Perfeito. Agora nós temos algum texto na página e se eu quiser mudar o estilo, nós dizemos principal estilo ponto ponto fronteira ponto porque este é um objeto orientado um tipo de notação de ponto de linguagem. Ele procura o estilo e, em seguida, ele procura a ordem de estilo CSS específica é como uma string um escolhe fora vermelho sólido, e agora temos uma borda vermelha sólida de um pixel em torno dele. Uma coisa que você não pode fazer, no entanto, é se você quiser adicionar ordem apenas para o topo, você não adicionar traços em vez disso, você camelo caso isso e seria fronteira. E em vez do traço, use o T maiúsculo. Isso é um mau exemplo, porque já temos uma fronteira. Vamos usar outra coisa. topo do ponto principal é igual a Vamos fazer isso absurdo e dizer, 50 pixels Agora que o preenchimento só ocorreu no topo e o que acontece E sua página é onde diz estilo. Estamos mudando os atributos de estilo agora. Nós não lhe demos um atributo surpreendente em qualquer HTML, mas JavaScript inteligente o suficiente para perceber isso. Ok, isso pode ter um estilo praticamente tudo no estilo de cabine html. Então vai em frente. Ele cria o atributo para nós, e preenche com a informação que lhe demos. Nós demos a ele um estilo de um pixel, borda vermelha sólida com um tapinha de 50 pixels no topo. Agora, se você não está familiarizado com como editar CSS apenas um pequeno lembrete rápido é quando você está em sua página de elementos, você pode alternar estes também. E se você não gosta do que está dizendo, você sempre pode adicionar o HTML diretamente. Ok, então isso é o seletor de consulta em poucas palavras. O que eu quero que você faça é que eu quero que você crie elemento em sua página HTML. Vou dar-lhe os arquivos do projeto também, criando elemento em sua página HTML e, em seguida, abrir o seu cônsul e escrever um seletor de consulta Grab que colocá-lo em uma variável como você viu com Main é igual ao seletor Dockery documento . Então eu quero que você mude o HTML interno e então eu quero que você mude o estilo dele. E não tem que ser apenas a borda do estofamento. Experimente outras propriedades CSS que você conheça. Pode ser cor de fundo da margem. Pode ser a cor da fonte, e então eu quero que você basicamente faça a mesma coisa. Mas em vez de usar um eleitor I D select ou classe apenas usando elementos, eleitor, veja o que acontece quando você seleciona o corpo inteiro e você muda a cor de fundo no corpo 19. Introdução com funções: Olá outra vez. Nesta lição, vamos falar de funções agora. Funções são novamente uma parte muito importante da programação. É em cada linguagem de programação, e essencialmente o que uma função é que eles definem quantidade de código que você pode executar uma e outra vez sem ter que copiar e colá-lo uma e outra vez. Isso cai em linha com D R Y, que Eyes é a metodologia seca de Não se repita. Então, sempre que você estiver escrevendo código, tente não repetir exatamente o mesmo código uma e outra vez. Se você tiver que repetir o mesmo código, ele deve entrar em uma função. Mas uma função também pode tomar parâmetros ou argumentos, e basicamente, o que ela faz é você inserir informações, e ela cuspe um pouco de informação. Então vamos dar uma olhada em uma função de exemplo rápido. Uma função de exemplo sempre começa com a função de palavra, e é assim que JavaScript sabe exatamente o que é isso. E então você dá um nome e você pode nomeá-lo praticamente qualquer coisa. Fique com as mesmas convenções de nomenclatura que variáveis. Não comece com o número. Não use traços. Basicamente, qualquer outra coisa vale assim para este. Nós não é chamado além, e nós vamos apenas adicionar dois números juntos. É tudo o que vamos fazer. Então isso se parece muito com uma outra declaração onde temos os parênteses e, em seguida, temos nossos colchetes, e qualquer coisa dentro dos colchetes é parte da função. Quando queremos adicionar números juntos, podemos executar esta função uma e outra vez. Então, o que quer que esteja aqui vai ser capaz de correr uma e outra vez. Agora, só porque você já escreveu uma função não significa que vai ser executado. Ele é registrado em parte de seu aplicativo, mas você realmente precisa dar-lhe um que você precisa para dar o comando JavaScript. Você tem que dizer, Oh, Oh, vá e execute essa função em particular. Então, para fazer isso, você apenas direita o nome da função sem a função palavra na frente dela. Dê a ele os parênteses que ele precisa, e que diz Javascript, apenas com esses parênteses, que é uma função e ele irá executá-la. Então vamos dar uma chance aqui alerta. Olá. Eu sou uma função agora quando eu abro esta página e eu a atualizo esta é a fêmea de palco aqui, a propósito. É só da lição anterior que vamos manter. Adicionando a isso é HTML como uma lição vai em outra de qualquer maneira. Então atualize a página e diz, Olá, eu sou uma função. Atualize a página. Olá, sou um evento. Se eu comentar este casaco e atualizar a página novamente, nada acontece. Estou refrescando repetidamente, e nada está acontecendo. Isso porque o JavaScript sabe que a função existe, mas também sabe não executá-la ainda até que seja dito para fazê-lo agora. Esta função, partir de agora, não é muito útil agora. E se quiséssemos executar um certo conjunto de códigos que só pedisse o nome de alguém? Assim como em exemplos anteriores que fizemos bem, podemos criar variáveis dentro de uma função que o mesmo nome é igual a. E vamos Krump, qual é o seu nome? Então tudo isso vai fazer é perguntar qual é o seu nome e dizer Olá nome? Já vimos isso antes, mas a diferença é que desta vez está em uma função. Então eu digo, se atualizar, ele diz, qual é o seu nome? Vou pôr o meu nome ali. Olá, Caleb. Nada extravagante. Nada que não saibamos ainda. A única diferença é que estamos basicamente executando isso a partir de um comando. E se quiséssemos rodar isso uma e outra vez, poderíamos colocar isso e outros pedaços de código que poderíamos dizer, Se hoje é igual a você sabe, Quarta-feira você tem que atribuir hoje para ser qualquer que seja o dia realmente é. Neste caso seria apenas W e d. Em seguida, adição outra tradição. Então agora não estamos escrevendo essas duas linhas de código aqui duas vezes. Estamos usando apenas esta linha duas vezes. E assim ele cria essa referência de volta ao que o conjunto original de código deve fazer. E agora você não está se repetindo. Não adianta digitar a mesma coisa uma e outra vez. Se você pudesse digitá-lo uma vez e fazê-lo executar exatamente da mesma maneira todas as vezes. Agora continue com isso com este exemplo. Vamos realmente fazer alguma adição aqui. Vamos fazer o número um é igual a 15. Num número dois é igual a 89 e alerta. Um entorpecido. Além disso, estou muito ligado. Então vamos nos livrar dessas coisas. Guarde, atualize a página me dá 104. Isso é porque ele adicionou 15 com 89 apenas retornou que agora. Ah, função não deve alertar algo, é? Alerta é geralmente, na verdade, apenas uma má prática. É bom para depuração, mas realmente, alertas são. É uma coisa de JavaScript da velha escola que a maioria dos desenvolvedores não usa mais. Então vamos dizer que queríamos colocar esses dois números 15 e 89 adicionados juntos em uma variável. Bem, como é que conseguimos o total? O número 104 que vimos em uma variável fora da função porque podemos dio total é igual a alguém mais entorpecido para incrível. O que fazemos com isso? Bem, vamos tentar executar esta função e, em seguida, vamos ver o que acontece quando executamos Alertas total. Atualize a página. Eu fico com 100 e quatro. O que acontece se eu mover isso acima da adição? Nada está acontecendo e refrescante. Nada está acontecendo. Por que é isso? Bem, se eu abrir meu console, não temos ar aqui. Total não está definido agora. Por que é isso? Isso é porque javascript não sabe que isso existe mesmo que total é aqui a partir deste momento momento, ele não foi declarado assim novamente. JavaScript está ciente desta função. Ele não sabe o conteúdo dele até que ele seja executado. Então, se movermos isso para baixo, salvar , atualizar a página, ele nos dará o número que estamos procurando. Mas agora o que acontece se mantivermos isso aí? A ADV está na frente? Atualizar O total da página não está definido. Mesmo que tenha sido definida há pouco, já não está definida. Agora, por que isso? Isso ocorre porque Var declara uma variável dentro de um escopo. Agora escopo é este conceito de que as variáveis podem Onley existir dentro de certas áreas. Então, se você tem ah, função qualquer função com var e então você tem uma variável, eles só podem ser acessados dentro dessa função. Então você pode estar pensando , , por que diabos eu iria querer isso? Por que eu não iria querer total para ser acessível fora com esta função depois de executá-lo? E essa é uma pergunta justa, e a resposta honesta é que você não quer variáveis sangrando de seus escopos. Às vezes é por motivos de segurança. Às vezes é para eficiência. Às vezes é apenas para manter seu código limpo, mas você não quer usá-los fora de suas funções. Então, se não devemos usá-lo dessa maneira, como diabos devemos obter total fora da função? Bem, é aqui que entra a bela palavra chave de retorno. Retornamos no total. Então total foi declarado aqui é a adição do número um, mais entorpecido para nós devolvermos esse total. E se executarmos isso em nossa página, ainda temos Total não está definido agora. Por que é isso? Porque o que o retorno faz é que ele diz Ok, eu vou executar esta função, e eu vou retornar isso como a definição de uma variável. Então, se temos e já fizemos isso muitas vezes, eso se fizemos nome da variável é igual a John. Sabemos que este é o valor da variável chamada John, mas em vez disso o que podemos dio é, podemos dizer, Vamos realmente deixar as coisas ir no Total Variável ou vamos chamá-lo de Novo Total em vez disso é igual a adição . Então, em vez de dizer que isso é 104 como uma string ou um inteiro ou em vez de dizer 15 mais 89 tudo o que estamos dizendo é armazenar qualquer função que descobrir o total a ser nesta variável. Então, agora, se dissemos alerta Novo total, isso nos dará 104. Então volte para a página Refresh 104 como esperávamos. Agora, dentro de sua função, você pode executar todo o JavaScript do mundo. Idealmente, nunca deve vazar fora de sua função que sua função deve ser um conjunto contido e específico de instruções que você pode usar repetidamente. Mas digamos que queremos personalizar isso. Queremos personalizar o número um e o número dois bem, toda vez que rodamos, esta função será sempre 15 e 89 respectivamente. Não é isso que queremos. Funções são normalmente usar melhor quando eles são extremamente dinâmicos, e a única coisa que queremos fazer é que queremos automatizar entorpecido um mais entorpecido para Então, em vez de dizer, número um e número dois são sempre os mesmos números e disse que dar-lhes parâmetros ou argumentos e tudo o que dio é criar uma nova variável dentro dos parênteses, separados por uma vírgula e outra nova variável. Agora este é o nome, como você pode ver aqui, dormente para dormente para dormente um corresponde ao número um. Então vamos em frente. Excluir thes porque assim que esta função é executada, ele vai criar esta variável dentro da função, e só é acessível dentro desta função. Então, se fizemos números diferentes desta vez 10 e 15 estamos dizendo Run Edition. O primeiro número deve ser 10 e o segundo número deve ser 15. As funções, em seguida, vai tomar o número um, que é 10 entorpecido para que é 15 totalizá-los juntos. Devolva isso para uma nova variável para nós. Quando alertarmos essa nova variável, vamos conseguir qualquer que seja o total. Então, vou guardar essa atualização. E assim que essa atualização, isso vai alertar com o número 25 assim. Agora, por que isso é útil? Mas você pode criar uma calculadora. É calculadora bastante básica, mas você pode criar uma calculadora que só tem a função de adição agora. Mas e se quiséssemos adicionar mais? E se quiséssemos fazer edição diferente Então, em vez de ter que executar total é igual sintonia número um mais entorpecido ou ter que números de revestimento explicitamente duro em nosso programa ou aplicativo, agora podemos dizer qualquer outro número no mundo, e o que eu vou fazer é em vez de alertar, eu estou indo para console, log, log, console log, nova vírgula total, o total. Para salvar isso, vou atualizar a página em vez de a resposta ser alertada para a página. Vai aparecer no console. Então eu bati em cinco, e lá nós temos 25 e 1114 agora que é a adição de dois números e esses dois números. Então agora temos uma função que está fazendo a mesma coisa uma e outra vez. Completamente honesto com você. Este curso não é sobre açucar coisas, como você já pode ter experimentado. Mas esta função é honestamente, é um absurdo. Não há razão para que esta função realmente exista. Mas se você quisesse, você poderia tornar essa função significativamente mais complexa. Você poderia pegar um entorpecido que você é multiplicado por pi você poderia levar entorpecido, e você poderia dividir por qualquer coisa que você poderia tomar entorpecido, e você poderia quadrado enraizado por qualquer número que você quiser. Agora, você não tem que se lembrar mais dessa fórmula. Ou se você tem uma fórmula matemática específica, certo, então vai levar dormente uma vez basicamente torta e depois vai para o Adam dois dividido por oito. Não posso fazer isso na minha cabeça, então vou guardar isso. E o que acontece quando atualizo a página? Me dá um número muito preciso. Então agora ele está fazendo matemática básica para nós e comprar básico. Quero dizer, adição de multiplicação, e divisão ainda é básica, mas eu só escrevi esta fórmula uma vez. Nunca mais tenho de me lembrar. A única coisa que eu deveria fazer é adicionar comentários em torno desta função sobre o que exatamente ela está fazendo. Então o que eu gostaria que você fizesse para esta lição é, eu quero que você crie uma nova função. Não precisa ser adição. Pode chamar-se do que quiser. Você pode ter quantos parâmetros quiser. Pode ser um parâmetro. Pode ser 30 parâmetros, embora de preferência não faça isso. Talvez manter um limite de como quatro parâmetros no Max só porque é muito para lembrar o que você faz dentro de sua função. E eu realmente não me importo com o que você faz dentro de sua função, desde que você salvá-lo como uma variável dentro de sua função e devolvê-lo para. Alternativamente, você pode pegar isso, e ele vai retornar exatamente o mesmo número para você sem armazená-lo em uma variável. Eu só fiz isso para esclarecer, mas eu quero que você devolva o que quer que seja que sua função é para retornar e, em seguida jogá-lo em duas novas variáveis e chamá-lo de um log sai exatamente como eu fiz com este vídeo . Na próxima lição, vamos criar algumas outras funções apenas como uma demonstração porque as funções são incrivelmente importantes. Eu quero ter certeza de que isso é realmente perfurado em seu cérebro, porque novamente, isso é algo que você pode levar de JavaScript para todas as outras linguagens de programação do mundo. Então vá em frente, faça essa tarefa rapidinho, e então faremos alguns exemplos. Mais alguns exemplos de funções no próximo vídeo 20. Exemplos de funções: nesta lição. Eu só quero ver mais alguns exemplos do que você pode fazer em uma função, e isso realmente não se limita a nada. Você pode fazer qualquer JavaScript dentro de uma função, mas funções ou algo com que você vai estar trabalhando todos os dias. E eu quero ter certeza de que você realmente entende o que é então se você não tem uma compreensão completa de quais funções estão ainda neste vídeo é definitivamente para você. Então, no último vídeo que criamos em adição função, e tudo o que fez foi adicionar dois números juntos. Em vez disso, vamos em frente e criar algumas outras funções diferentes, e isso é realmente apenas, por exemplo, propósitos. Estes podem não ser práticos na vida real, mas eu só quero mostrar a vocês o que eles podem e não podem dialogar ou melhor, saber o que eles não podem fazer , apenas o que eles são capazes de fazer. Então lembre-se, você sempre começa com uma palavra-chave de função, e essa é uma palavra reservada. Então não chame suas variáveis. A palavra função fica que vai causar um pouco de, ah, dor em sua vida como desenvolvedor. Então esta função, vamos apenas chamá-la get name e esta não vai tomar nenhum parâmetro em tudo. Agora, se olharmos para o índice de ponto html, temos de uma lição anterior indo para isso, temos um campo de entrada chamado Campo de texto. Vou mudar isso para nome e nome. Aqui está o que o valor do valor vai ser realmente vai mudar. Eu não quero Namie Aziz de nome real, um nome totalmente, realmente, John Smith. E só para que você possa ver como esta página se parece, tudo o que temos é campo de entrada chamado John Smith. Essa é a única coisa que é visível voltando para um JavaScript. Vamos em frente e obter esse valor. Queremos obter este nome para que criemos uma nova variável e queremos que esta variável seja local para a função. Então, usamos o nome VAR é igual a consulta de ponto do documento, consulta, seletor e queremos selecionado pelo seu nome de classe do nome. Agora, se você se lembrar de uma lição anterior, assim que selecionamos este elemento, temos acesso a todo esse elemento. Temos acesso ao seu HTML interno, que não há nenhum porque é uma tag auto fechamento. Temos acesso ao seu valor. Suas classes tipo quaisquer outras propriedades e atributos que podemos dar a ele. Temos acesso a tudo isso agora, mas tudo o que queremos é o nome. Então vamos mudar de nome também elemento Nome, porque isso é apenas o elemento do elemento HTML. E vamos obter o nome como nome elemento ponto valor. Então sabemos que o elemento nome está selecionando os elementos de nome aqui, e vamos pegar o valor que corresponde a esta propriedade ou este atributo. Legal. Então agora temos um nome. E se quisermos mudar esse nome? E se quisermos modificá-lo um pouco? E se dissermos que o sobrenome Smith é muito comum e tem que ser outra coisa? qualquer momento que o sobrenome Smith aparecer, nós o substituímos automaticamente. Bem, o que podemos fazer é criar uma nova variável. Vai chamar-lhe um novo nome é que ele poderia nomear ponto substituir Smith por chamada e para executar esta função, nós apenas correr, obter nome. Eu atualizo esta página. Absolutamente Nada vai acontecer. Eu abri meu console e nada aconteceu. Agora, por que isso? Porque esta função não está retornando nada. Se dissemos alerta novo nome, ele vai executar esta função. Não vai funcionar com isso. Ele reconhece que está lá, mas não vai executar o código até aqui. Vou em frente, guarde essa atualização na página de eu pegar John Colleen, quem quer que seja. Mas não queremos aprender o nome. Ninguém mais usa alertas. Então o que queremos fazer é que queremos retornar um novo nome e em vez de apenas executar disfunção , que ainda vai funcionar. Mas ainda não temos acesso a nada. Nós vamos criar outra variável chamada nome atual que vai obter o nome da área de entrada vai substituir Smith com venda, e ele vai nos dar qualquer que seja esse nome. Então, agora, se eu disse registro do consulado nome atual, atualizar a página, eu tenho o nome atual. Esse é o nome que está aqui. Então, se eu entrasse na minha página de índice, mude de John para Caleb Refresh. Agora tenho o Caleb a contar. Isso é porque ele está agarrando esse valor e está mudando Smith. Muito alto, magra. Mas e se quiséssemos fazer mais? E se só quiséssemos saber o primeiro nome? Podemos criar outra função chamada get first name, e queremos obter o nome inteiro para então não precisamos copiar tudo isso. Poderíamos, mas isso quebra o princípio de “Não se repita”. Seu código deve sempre ficar seco e seco. Não se repita no caso de não ter percebido isso. Ok, então o que eu vou fazer agora é o nome da variável é igual a obter nome. Esse nome não entra em conflito com esse nome porque eles estão em funções diferentes. Esta variável aqui é completamente inconsciente de que qualquer coisa aqui existe. E agora podemos usar os mesmos nomes uma e outra vez em funções diferentes. E enquanto ambigüidade nome às vezes era coisa muito difícil de trabalhar com porque alguns nomes , ou apenas naturalmente ambíguo, nos permite usar variáveis Nate como nome de um nome de variável comum uma e outra vez. Agora, isso é ótimo. Temos o nome. O que acontece se colocarmos alerta? Nome? Eu não ia comentar e fugir. Obter o primeiro nome, salvar, atualizar e eu obter o nome apropriado novamente, mesmo que a entrada é Caleb Smith e acabou por ser Caleb dizendo, e isso é porque ele agora está executando uma função dentro de uma função. Isso é muito legal, mas só queremos o primeiro nome. Então, como quebramos uma corda em pedaços diferentes? Bem, podemos usar split, que irá essencialmente, se dissermos para quebrar a palavra com base em todos os espaços na string. Portanto, o nome da variável é igual ao nome, não dividido. E isso é tudo o que vamos fazer agora, em vez de alertar que isso vai aparecer melhor se eu registrar no console essa atualização de salvamento . E este é um array que podemos dizer porque o proto é um array e há duas peças para ele veio até cima e totalmente dentro, mas nós só queremos o primeiro nome. Agora sabemos com o tipo de dados da matriz, que aprendemos há algum tempo, que o 1º 1 sempre começa com o número zero do índice. Então o que eu posso fazer é retornar o primeiro nome zero, e esse é o primeiro nome agora novamente porque eu estou devolvendo. Na verdade, não estamos recebendo nenhuma informação que possa ser útil. Está sendo devolvido muito bem, mas ainda não foi possível acessá-lo. Então, novamente, criamos outra variável e não tenha medo de usar variáveis. As variáveis levam muito pouca memória. Não é um problema. Use quantas variáveis forem necessárias. Vamos dizer que o primeiro nome da variável é igual a obter o primeiro nome. Obter o primeiro nome vai correr, obter o nome, o que quer que ele devolva. Então este nome é agora o novo nome. Vamos pegar esse nome e dividi-lo. Vamos jogá-lo em uma variável chamada primeiro nome e vamos apenas retornar a primeira parte desse nome. Então isso parece muito. E realmente, é apenas um passo de cada vez. Isso é tudo o que é. Então salve, atualize. Nada acontece. Isso é porque está nessa variável. Mas ainda não fizemos nada que seja variável. Então nuvens Conselho log, primeiro nome, salvar. Refresque. Lá vamos nós. Primeiro nome. O que acontece se eu mudar isso para outra coisa? Guarde o seu fresco. Ele nos dá qualquer outra coisa. O que acontece se tivermos palavras diferentes aqui? Nome do meio louco. Mais alguma coisa? Um monte de palavras diferentes aqui. O Smith. Esse é o nome que está lá, e ainda está retornando a primeira palavra. Então agora você pode ver que as funções são realmente muito valiosas porque nos permite escrever este código muito facilmente. Não temos que escrever uma e outra vez. Então, para resumir como uma função funciona ou como nossas funções estão funcionando atualmente é que temos uma variável. Nós declaramos que o primeiro nome é igual para obter a primeira função nomeada, e isso vai ser o valor do que for retornado. Então nós temos. O primeiro passo vai procurar o segundo passo, mas na verdade, passo dois seria tecnicamente aqui agora, enquanto pisado, Quem está correndo? Ele vai tentar pegar este. Então este é o passo 2.1. Vamos casar com isso 2.1, e vai devolver o que quer que esteja aqui. Então 2.2. Agora isso muda para 2.2 porque o nome é o que for devolvido aqui, ele vai executar todo esse código, pois ele vai devolver o que está aqui. Jogue-o nesta variável chamada nome. Nós dividimos, nós retornamos o primeiro valor. E agora temos duas funções que estão operando juntas. E nunca mais temos de escrever este código. Agora, se realmente quiséssemos personalizar isso com base em qualquer tipo de campo de entrada, poderíamos adicionar um parâmetro para obter nome chamado realmente qualquer coisa que você quiser, Teoh. Mas aqui ia chamá-lo de seletor de classe. E seu nome de parâmetro deve ser sempre claro. Dê-lhes nomes claros e agradáveis . Mesmo que sejam um pouco mais longos, Clearer é melhor. E aqui vamos simplesmente adicionar seletor de classe. Mas agora, se fizermos isso, não funciona. Por quê? Porque get name está procurando o seletor de classe. O parâmetro não existe. Então nós adicionamos a string aqui que essencialmente nós apenas movemos de aqui para aqui. Foi tudo o que fizemos. Se eu salvar essa atualização da página, ela ainda funciona. Mas se eu selecionar uma classe que não tem nada nela, o que vai acontecer? Valor da propriedade de conservas de Não. Então, essencialmente, o que ele está dizendo é o seletor de consulta que selecionar o nome não existe classe em algum lugar mal pago, que obviamente não está em qualquer lugar aqui retornou um elemento HTML vazio. Não há nada lá dentro, então ele não poderia executar o que precisava para executar. Então tenha cuidado com isso. Então, é essencialmente assim que as funções podem funcionar. Se você ainda não está completamente claro sobre as funções, não fique muito pendurado nele. Eles são um pouco diferentes de pensar. É uma maneira diferente de pensar, , mas com o tempo você vai se acostumar mais com eles e um dia desses, ou talvez em apenas alguns minutos seu cérebro vai clicar e vai desaparecer. Sei exatamente como funcionam, mas continue. Sei exatamente como funcionam, É uma dessas coisas que não faz sentido porque nós realmente não usamos isso, uh, no comportamento humano normal. Mas assim que ligas essa parte lógica do teu cérebro, fica muito mais fácil. Então isso encerra esta lição. Espero que isso faça muito mais sentido para você. Sei que estamos meio que apressando funções um pouco. Isso é principalmente porque as funções são tão comuns que não há como contorná-las. E assim, como um programador, como um desenvolvedor da Web, você vai se tornar muito, muito familiarizado com isso, quer você goste ou não? Ah, e é uma coisa muito boa. Muito bom estar ciente de como as funções funcionam. Então isso encerra esta lição. O que eu vou fazer é adicionar alguns comentários a este arquivo. Você também pode baixar esse arquivo e testá-lo. Vou limpá-lo. E certifique-se de que, você sabe, é um pouco mais fácil de entender para você quando você está realmente lendo através deste código. E certifique-se de que, você sabe, é um pouco mais fácil de entender para você quando você está realmente lendo através deste 21. Eventos em HTML: Olá e bem-vindos de volta nesta lição que vamos estar falando. Você faz eventos? Eventos são como você faz as coisas acontecerem em seu código. Agora temos feito as coisas acontecerem em nosso código usando funções e declarações if else. Mas não há nada realmente ativando isso. Temos que ir manualmente e processar qualquer função que queremos executar. E, bem, isso não é maneira de viver sua vida. E essa é uma péssima experiência de usuário. Não queremos que o usuário tenha que entrar e acionar seus próprios eventos. Então, nesta lição, nós vamos aprender como você pode acionar eventos usando apenas basicamente funções HTML e JavaScript simples . Então a primeira coisa que vou fazer aqui é remover a entrada que não é mais necessária. E Main só vai dizer, uh, conteúdo corporal principal. Estamos ligando para JavaScript no JS, que é por aqui. E se carregarmos esta página em nosso navegador e atualizarmos, é uma página básica, super simples. Agora vamos criar evento baseado em um botão que está fora de um formulário, então ele realmente não faz nada nunca a menos que você explicitamente diga a ele para fazer algo. Vou em frente, criar um botão. Apenas um tipo de botão básico vai ser contra botão básico e vai dizer Clique em mim agora eu quero adicionar um evento HTML em. E como você pode ver, sublime preencheu automaticamente o nosso sugerido alguns eventos diferentes. Mas e se nós apenas fizemos no clique e neste clique queremos dar-lhe uma função JavaScript . Agora não criamos a função. Não sabemos se essa função vai ser ainda, então vamos tirar uma da cartola. Alterar html principal Agora este é Raj JavaScript. Este é JavaScript dentro de seu HTML. Então agora estamos criando algo um pouco mais dinâmico. Salve isso e cabeça sobre você JavaScript em Js e criar uma nova função alterar html principal que corresponde aqui como você pode ver exatamente o mesmo nome. E então o que vamos fazer aqui é que queremos selecionar esse conteúdo e alterá-lo. Então precisamos usar nosso seletor de consulta para pegar isso. Então variável principal é igual ao documento claramente seletor, principal e vamos apenas começar básico pode não interessar. HTML é igual a. Eu mudei e é isso. Então, voltamos para a atualização da página. E o que acontece quando eu clicar nisso? O conteúdo mudou, então agora o usuário está no controle de algumas das funcionalidades aqui. Se cozinharem de novo, nada acontece porque já foi mudado. Mas se uma atualização e clique novamente, ele muda novamente agora. Tecnicamente, quando eu clico nisso uma e outra vez, ele está tecnicamente mudando e você pode dizer, porque cada vez que ele clica nisso quando eu vou inspecionar a página, você pode ver que aqui está realmente mudando e apenas um cheque duplo. Vou editar isto. Podemos ver que é, obviamente foi editado. Clique nele novamente e ele vai voltar para Eu fui alterado. Então agora temos alguma maneira de interagir com a página, e isso é apenas um evento de clique. E se quiséssemos alternar o conteúdo do fotógrafo de conteúdo? Vamos adicionar duas frases diferentes que vamos mudar para frente e para trás. Então variável sentenciou um Olá. Obrigado por me mudar e muito pouco sentenciado a Oh, olá. Eu sou uma frase diferente muitas exclamações e há coisas muito excitantes. Então agora podemos dizer se principal feito, inter html é igual a sentença um médico principal Inter html é igual a sentença também. Então, se coincidir com a primeira frase, transforme-a em sentença para agora. Vamos fazer isso, L Stephen, que basicamente significa que se o HTML interno não corresponde à sentença um provavelmente sentenciado ou qualquer outra coisa porque não estamos sendo muito específicos aqui. Então queremos mudar para a primeira frase. Vamos permanece ponto inter html é igual a frase um salvar Voltar, atualizar a página. Olhe para isso Ta ir Assim como isso Nice e fácil agora ele não tem que ser é um simples é apenas mudar o texto Você pode mudar o estilo bem O que podemos dio podemos dizer se estamos mudando este descendentes para adicionar algum preenchimento adicional Então ponto principal estilo que preenchimento é igual a eu não sei, 50 pixels, mas se ele está mudando de volta para a frase um talvez vamos remover o ponto de estilo de preenchimento é igual a zero pixels salvar E eu vou apenas atualizar esta página Como? Olhe para isso. Então Oh, olá. Eu sou uma frase diferente Tem muito mais enchimento lá dentro. Oh, olá, frase média, que é sentenciada a sentenciada, tem preenchimento de 50 pixels. Assim, como dissemos, não. Se alternarmos, ele vai removê-lo porque vai voltar à sentença. Um deles vai remover o hambúrguer assim. Portanto, há uma infinidade de eventos HTML. Não é só clique. Está em forma. Submeter na maioria na maioria das fora, o que mais temos aqui? Temos um clique no duplo clique na maioria para baixo na maioria dos movimentos. Então, quando você está mais é sobre um elemento e ele se move em torno de um pouco dentro desse elemento , acionar essa função uma e outra vez. Cuidado com essa. Ele irá acionar a função toda vez. Seu maior número de movimentos de um pixel no meu assim por diante, mais sobre a maioria para cima na roda. Então, se você tem um bem mais e você está rolando através, isso é um gatilho. É um HTML 5. Quando eu acredito em HTML 5, temos ah, almoço de eventos diferentes. Temos o problema na bebida e Andre entra na licença de drogas. Arrastar bebidas. Iniciar rolagem suspensa. Temos uma tonelada destas. Então o que eu realmente vou fazer é criar uma lista gigante de eventos diferentes que você pode usar. Ah, e eu vou colocá-los no conteúdo adicional para você. Vou colocar no JavaScript no arquivo JS. Apenas comentou que você pode ver todos os diferentes. Eu posso nem mesmo obter todos eles, para ser honesto, mas eu vou tentar colocar nos mais comuns que você é mais provável para usar em uma base dia a dia como um desenvolvedor Web front-end. E então a única coisa que você tem que fazer para realmente mudar esse evento é em vez de clicar, você pode estar no clique duplo ou na maioria para baixo, que significa que você está clicando para baixo. Mas o seu máximo ainda não se moveu para cima ou sobre a maioria, o que significa que você está apenas movendo o seu mais sobre o botão e ele vai alternar. Na verdade, vamos dar uma olhada nesse. Minha página atualiza. E eu não estou clicando. Você pode ouvir isso. Não estou a clicar. Só estou movendo meu mouse sobre ele. Então agora o usuário tem algum tipo de maneira de interagir com o paciente. Esta é uma interação super, super básica, mas é aqui que a diversão realmente começa. Agora que você sabe quais funções e variáveis e declarações FL são, você sabe como alternar conteúdo. Você sabe como mudar o HTML interno. Você sabe como mudar o estilo Com JavaScript, você essencialmente tem a maioria dos ingredientes acordados que você precisa para criar uma página web super dinâmica você essencialmente tem a maioria dos ingredientes acordados que você precisa para criar uma página web super dinâmica e super interativa. Eu vou ser isso é muito básico. Mas tens de começar por algum lado, certo? Assim como esta lição. O que eu quero que você faça é, eu quero que você crie uma nova função, e eu quero que você anexe isso a um gatilho de evento em seu HTML. Pode ser qualquer evento que você goste, e eu só quero que você faça alguma diferença, seja mudando a cor de fundo ou a cor do texto ou o tamanho da fonte. Sabe, o que quer que você queira fazer, vá em frente e faça. Se ficares preso referido a este casaco, dou-te este casaco como conteúdo adicional. Então sinta-se livre para baixar isso e dar uma olhada. E se você tiver algum tempo extra, brincar com os diferentes eventos HTML, ele não precisa ser apenas um evento on click. Pode ser qualquer outro evento. E enquanto você está nisso, vá no Google todos os eventos, bem como um desenvolvedor. Estou a dizer-te agora, quem é o teu melhor amigo? Não há como você se lembrar de cada evento enquanto está aprendendo . Html CSS JavaScript PHP python nó. Seja o que for, é muito para aprender e você tem toneladas de referências de lá. Você não precisa se lembrar de tudo, mas sinta-se à vontade para entrar na antiga máquina do Google no Google, alguns poucos diferentes. 22. Projeto de calculadora: Olá. Bem-vindo ao seu primeiro projeto. Então este projeto vai ser uma calculadora muito básica. Não fique chique que valha isso. Não perca seu tempo em CSS e HTML e fazendo esta calculadora olhar bonito. Quero dizer, se você quiser ir em frente, mas esse não é o objetivo deste exercício. Então você deve ter seu primeiro número aqui, seu segundo número aqui, e o que você quer fazer aqui, você clica no botão cheques atrasados e um número aparece embaixo. Agora, eu já lhe dei o layout básico disso, então é apenas uma forma básica. Você tem seu botão enviar, você tem o número um número dois. E, na verdade, estavam incorretos. Espero que o número um e o número dois. E então você tem qualquer seleção que você não tem. Sabe, deixei algumas coisas piscarem propositadamente. Como quais eventos você vai usar? Ainda não sabemos. Então você pode ter que fazer um pouco de Google para isso. Ou você pode se referir a ah, lição anterior um projeto anterior que você fez realmente? Qualquer outra coisa que você possa ajudar a acelerar isso. Isso não deve demorar muito. Mas, você sabe, se você ficar preso, tudo bem, também. Se você ficar preso, eu vou dar uma resposta. , Na verdade, vou gravar como construo isto, usando tudo o que aprendemos até este ponto da próxima lição. Então, se você ficar preso, você pode apenas me observar, eu construí-lo onde você pode fazer perguntas. Facebook ou ah, deixe um comentário ou uma pergunta abaixo. Mas para que isso funcione, tudo que você precisa é de tudo o que usamos. Até este ponto, vai haver um monte de coisas que você não precisa também. Então dê o seu melhor. Dê o seu melhor esforço. Nada. E você vai ser muito complicado. E lembre-se de manter isso simples é seu amigo. Não complique isso. 23. Solução de projeto de calculadoras: Ei aí. Espero que você tenha feito relativamente bem com o projeto da calculadora da última lição se você ficou preso, ou se você está apenas curioso sobre como eu faria isso. Sim. Este é um vídeo para você, porque eu vou fazer isso. Não tenho um plano. Não sei como isto deve parecer. Podemos usar tudo o que já aprendemos, e isso é tudo o que vamos usar. Eu não quero que você saiba que em JavaScript há melhores maneiras de fazer as coisas e o que nós aprendemos atualmente. Mas com isso dito, esses ar também maneiras mais complicadas. E esta é uma pontuação essencial do JavaScript, não um curso completo de desenvolvimento Web JavaScript. Então isso é realmente apenas para você ir como um desenvolvedor júnior para intermediário JavaScript . Então eu tenho meu arquivo html index dot aberto aqui. Eu também vou abrir o arquivo JavaScript, e provavelmente não vou precisar do arquivo de estilo. Embora talvez eu possa entrar nisso. Eu não ... não prendo a respiração por isso . A primeira coisa que eu quero fazer é pensar o que acontece quando este formulário é enviado? Bem, a partir de agora, nada aconteceu. Então vamos apresentar é igual a, uh vamos chamar isso de calcular grupos de turnê Coca-Cola, sua prostituta atrasada com parênteses. E assim que este é todo este formulário enviado, é suposto executar esta função. Bem, esta função ainda não existe, então vamos criá-la. Então sabemos que esta calculadora de função tem um cuspe para fora Uma resposta. E então aqui está a nossa página atual. Agora, se olharmos para o código, nossas respostas abaixo do formulário, então em algum lugar nesta área onde o meu mais está balançando, é onde a resposta vai aparecer. E para alterar o conteúdo lá, sabemos que precisamos selecionar a resposta. Também sabemos que, para fazer qualquer matemática, precisamos selecionar o número um e o número dois, a fim de adicionar menos dividir ou multiplicar os números juntos. Então a primeira coisa que precisamos fazer é criar seletores. Agora. Nós não sabemos muito sobre escopo, mas sabemos que a variável dentro de uma função permanece dentro de uma função. Vamos falar sobre isso mais tarde. Estamos em uma lição posterior, mas todas as variáveis que são declaradas acima e antes de uma função também são capazes de ser usadas dentro da função. Então é a mentalidade inversa do que você já aprendeu. Não vamos entrar nisso porque isso adiciona uma camada de complexidade complexa. Mas vamos colocar isso no seu bolso de trás por enquanto. Vamos usar isso um pouco mais tarde. Por enquanto, vamos apenas criar um seletor. Então vamos chamar isso de resposta do seletor de resposta documento pensamento consulta seletor. Então, o que estamos selecionando aqui, vamos apenas fazer com que pareça maior é que estamos selecionando este desenvolvimento. Também precisamos selecionar o número um e o número dois. Então variável alguém documentar esse seletor de consulta número um. Acho que foi uma ideia, certo? Queria que alguém copiasse isso. E vamos apenas mudar com instâncias. Acabaram de mudar Botham. Ao mesmo tempo, se você tem um bom editor como Sublime ou Adam, você pode selecionar vários do mesmo valor e você pode mudar a coisa toda aqui ao mesmo tempo. Ah, em vários lugares. É muito bom. Isso é tudo. Não fiz nada chique lá. É apenas um bom truque de editor, e eu também preciso selecionar a seleção. Agora, vou deixar a seleção de fora por enquanto, porque não sabemos qual é selecionada. Então, o que nós queremos didio Então nós só queremos ter certeza de que esses números estão realmente selecionando os seletores certos. Vamos fazer este registo da consola A resposta não vai fazer nada porque não há nada lá dentro. Só queremos ver alguém. Eles também. Guarde isso. Atualize sua página. Vou abrir o nosso cônsul. Acabaram os movimentos para vermos mais a página 12 e nada aconteceu. Bem, nada aconteceu porque a página realmente atualizou. E isso é só porque HTML quando você enviar um formulário, ele vai tentar fazer o que quer que seja que o formulário é suposto fazer. Vai usar a bagunça que nosso método post, o que quer que você diga a ela para fazer, vai para qualquer arquivo de ação que você mandar fazer. especificámos nada disso. Então, em vez de fazer no envio porque não queremos que a página atualize, vamos movê-lo para o botão e mudar um tipo de botão para um regular. Mas porque ele tecnicamente não precisa enviar o formulário e podemos dizer em vez de em enviar no clique, é agora Este botão é apenas um regular, mas não está enviando qualquer formulário. Tecnicamente, isso torna esta forma inútil. E isso é, Ah, muito do poder por trás do JavaScript. Você pode sair da hierarquia HTML tradicional assim. É agora vai executar esta função calculadora e vai agarrá-los um e dois e registrá-los. Atualizar a página 12 documento cria Selecionar não é uma função. Obviamente, é porque é seletor de consulta. Recarregar Face tentou novamente. 12 Lá vamos nós. O número um é marcar o número dois como um atalho. Vamos apenas fazer isso. Está no valor salvar Atualizar tentou novamente. Lá vamos nós. Nós queríamos fazer isso. Tudo o que fizemos lá foi mudar isso tecnicamente não treinando porque não usamos nenhuma função de métodos. Tudo o que fizemos foi dizer que um documento encontra entorpecido para e, em seguida, obter o valor dele e armazenar isso em uma variável chamada entorpecido para o que tudo é então agora para ter certeza de que a resposta está funcionando, vamos dizer resposta ponto inter hte e-mail é igual ao número um mais entorpecido para I não sei o que isso vai fazer porque os valores são supostamente strings. Mas JavaScript também reconhece quais números são apenas números dentro de uma string. Independentemente , a esta altura, disso, a esta altura,não importa porque tudo o que estou a fazer é testar para ver se aparece alguma coisa lá dentro. Lá vamos nós. E então tudo isso está fazendo é um pendente deles porque JavaScript atualmente pensa que essas cadeias de ar, não números. Então vamos transformar o número um e eles em números reais. Um fresco e vamos para 54. Agora temos 55 então pelo menos está adicionando, então sabemos que funciona. Mas por que isso está funcionando? Não lhe dissemos para fazer nada em particular. Agora, lembre-se do que eu lhe disse. Houve uma parte difícil nisso. Deixei algo de fora. A coisa que eu deixei foi como você descobre qual desses está atualmente selecionado? Bem, a primeira coisa que temos que fazer é pegar o futebol. Então, uh, ele é chamado de seleção é igual ao seletor de consulta de documento, e é a única seleção na página. Então vamos selecionar isso como o elemento inteiro porque isso é tudo o que precisamos. Agora. Como sabemos qual deles está atualmente selecionado? Bem, vamos tentar esta seleção de opções de pontos e é aqui que um pouco do Google e entrou. Este território não é desconhecido para você. Isto é só um pouco novo. Está apenas empurrando seus limites um pouco. Podemos dizer na matriz? Índice selecionado de ponto de folga? Diga isso. Atualize a página e, bem, isso está nos dando algo está nos dando uma opção. Elementos. Legal. Certo, podemos trabalhar com isso. É o valor que queremos? Sim. Olhe para isso. Íamos escolher o leilão e o valor. Então, vamos voltar. Lá vamos nós. Está adicionando fazer a menos. Vai dividir-se. Legal. Então agora temos uma maneira de trabalhar com isso. Vamos colocar isso de volta na variável. Vamos ligar para o operador agora. Temos tudo o que precisamos para calcular nossa fórmula básica. Temos a resposta. Seção número um, número dois, Caixa Eleita de Teses. Então, o que é que vai ser adicionar menos dividir ou multiplicar? E então tudo o que temos que fazer é fazer os cálculos. Então o que vamos fazer aqui é voltar em várias áreas, e isso é um pouco diferente, mas é totalmente alto. Então nós dizemos, se operador é igual a adicionar, então o operador está recebendo os leilões, o índice selecionado e, em seguida, o valor, selecione a opção e o que ele seja selecionado e vai corresponder a um destes valores, digamos que ele vai adicionar O que fazemos se ele vai adicionar? Bem, podemos dizer retorno número um mais, dormente para agora ele está adicionando esses números juntos outro Operador é igual a menos, e podemos basicamente fazer a mesma coisa. Mas a única diferença é que mudamos o operador porque este é um menos. Agora há outra maneira de fazer isso, e essa é uma maneira terrível. Mas vou te avisar agora, porque é importante não fazer isso. Existe uma função na maioria dos idiomas. Geralmente é chamado de mal, que você pode colocar javascript cru aqui. O usuário pode colocar JavaScript bruto aqui e você irá executá-lo. A razão pela qual isso é ruim é porque você estava dando ao usuário controle completo sobre seu JavaScript, e isso não é o que um programa é. Um programa é uma caixa definida com certas regras nele que afirma que você pode e não pode fazer certas coisas. E dentro desses limites você tem total liberdade. Mas fora disso você não tem permissão. Você não pode estar fora dessa caixa agora. A razão pela qual eu estou dizendo isso é porque o mal é usado por um monte de desenvolvedores mais recentes porque é. É mais fácil. É simples, funciona. E faz com que escrever este tipo de código, se mais se outro se outra coisa que é o que vamos fazer, isso faz com que obsoleto faz. Você não precisa mais fazer isso. Mas isso é mau desenvolvimento, e não vamos fazer isso. E se estivéssemos em uma sala de aula física agora, eu ainda vou todos vocês para me olharem nos olhos e dizer que vocês não vão correr mal 24. Solução de projeto de calculadoras parte: Tudo bem, seguindo em frente. Então agora temos essencialmente o layout para os próximos dois. Quero dizer, uma cópia destes dois para baixo. E vamos mudar menos para dividir e multiplicar. Isto vai ser uma divisão. Isto vai ser uma multiplicação. Um aviso rápido sobre copiar e colar. Quando você copia e cola, as chances são de que você vai esquecer que coisas acontecem a todos os desenvolvedores deste planeta. Então, sempre que você copiar e colar algo e, de repente, seu código não funciona bem, talvez seja porque você esqueceu de mudar um pouco, talvez um operador ou um pequeno número em uma variável ou cadeia. Você não mudou algo que deveria ter mudado. Tão cuidadoso, copiar e colar, para ser muito perigoso também pode ser muito rápido para, obviamente, não ter que escrever isso quatro vezes lá três vezes. E vamos fazer e então o outro só está lá, porque se o usuário selecionar algo que não é adicionar menos dividir ou multiplicar, vamos dizer que eu não posso fazer isso. E a razão pela qual fazemos isso é porque o usuário pode entrar aqui e apenas mudar um desses para qualquer outra coisa e de repente, mesmo que ele diga mais, aqui, qualquer outra coisa é o valor que vamos usar e isso não funciona. Agora, quando executamos este código, conscientes de que quando executarmos o código, atualizamos a página 12, o que você acha que vai acontecer se você disser que nada vai acontecer ? Você está absolutamente correto. E aqui está o porquê. Olha, nada aconteceu, e isso é por causa da informação que retornou. Agora isso é permitido. Se quiséssemos retornar isso em uma resposta em algum lugar, digamos que a resposta é igual à calculadora, a resposta aparecerá. Seja qual for. Se o usuário disse, adicione, a resposta vai ser, além disso, Minus vai ser uma subtração, mas não estamos retornando nada, e isso é porque esta função não precisa retornar nada. Então isso meio que quebra um pouco o que aprendemos. Ah, algumas lições atrás, ambas as funções, mas ao mesmo tempo não acontece porque é permitido. Ninguém disse explicitamente que você tem que devolver qualquer coisa a qualquer momento no tempo, então o que vamos fazer é armazenar isso em uma variável. Chame isso. A resposta calculada é igual a bem, colocamos qualquer coisa ou podemos apenas mantê-lo como indefinido. Agora eu vou mudar esses retornos para, você sabe, se alguém está adicionando armazenados aqui ou se eles estão se multiplicando armazenados na mesma variável. Lembre-se, se um desses corresponde a um destes se as instruções corresponderem, não importa o que o outro se as declarações ou então as declarações estão dizendo que eles não vão ser executados. Este é o que se encaixa primeiro usou aquele. Agora vamos ver um retorno falso aqui porque se houver um alerta, não mostre nenhuma resposta. Na verdade, arranhe isso. Tenho uma ideia melhor. Digamos que a resposta calculada é igual a operador inválido. Na verdade, vou comentar isso. E agora podemos dizer resposta. Pensava estagiário. HTML é igual à resposta calculada. Guarde isso. Vá para a nossa página. Refresque. Um mais dois é três um menos dois é menos um, dividido por 20,5 e um multiplicado. A vontade de fazer algo um pouco diferente. Estéreo. Cinco. O que acontece se fizermos isso flutuar? 5.24 1.48 Multiplique estes juntos, aí está a sua resposta. Então agora você tem uma calculadora básica. Mas vamos ver o que acontece se tivermos um usuário mal-intencionado. Um cara que se acha mais esperto do que você entra e diz, sabe o que acontece se eu mudar, acrescente qualquer coisa. Vamos mudar e ver o que acontece. Operador inválido. Por que é isso? Porque qualquer outra coisa não é permitido foram permitidos. Adicione menos dividir ou multiplicar. Qualquer outra coisa lhe dá operador inválido. Então, aí está. Com uma função em quantas linhas temos aqui em 23 linhas de código. Você escreveu calculadora em seu navegador, e na verdade, você não precisa mais do formulário, embora provavelmente seja uma boa idéia mantê-lo lá. Mas se você estiver usando algo baseado em JavaScript de qualquer maneira, um, usando formulário para enviar algo para o seu servidor e fazê-lo voltar meio inútil, então o formulário é tecnicamente desnecessário. E só para provar isso, mas outra coisa lá dentro vamos nós. Funciona sem o formulário. Não me para passar alguns minutos a estilizar essas entradas e a seleção e o botão B e a resposta e outras coisas. Se queres ficar por aqui para isso, também é fixe . Tudo bem, então para estilizar isso, vamos em frente. E, uh, eu vou arrumar um pouco de espaço. A resposta pode ir na parte inferior. Não importa para onde vai. O que estou olhando aqui? Quero mudar todas as entradas. Um PX sólido. Veja, uh, enchendo quem? Como demais. 55 pixels. Vamos ver o que começou. Olhe para aqui. Parece um pouco mais agradável. Vamos delinear zero Sem contorno quando eu clicar nele. Ah, com o que é suposto fazer isto? Selecione. Lá vamos nós. Não, mas as coisas estavam bem. Mudança de cor de fundo. A cor do plano de fundo é igual a esperar. Ele está indo aqui e em um lugar detentor mudou isso. Mas passe o mouse sobre a cor de fundo. si Si, , uh, através disso, vamos fazer algo um pouco mais interessante. Isso é ir 81 515 Les tom de vermelho em. Vamos mudar a cor muito branca. E digamos também que este botão tem uma transição de transição. A cor de fundo 250 milissegundos. Linear também vai fazer a transição da cor para levar 2 50 milissegundos. Faça a mesma coisa, e também será linear. Digamos que fresco. Lá vamos nós. Belo botão. Uh, mas se você tem uma coisa ponteiro do cursor eso vamos mudar a borda ah. Um picareta de sólido. Não vi o que fiz. Veja um tribal, cinco combinam com as outras cores. Isso é um pouco melhor. Agora estamos calculando, Button realmente se destaca. E o que acontece se fizermos isso? Zero faz isso. Não há nada lá. Cinco. Queremos mudar essa resposta? Sim, claro. Por que não? Alinhar texto. Preenchimento central, 50 pixels. Cor de fundo. Não vi 155 cor f f f no tamanho 54 E eu não sou fã de Ah, Sarah Funt. Então vamos dizer tudo da família. Ah, inferno Vodicka, se o seu computador tem, se você está em um Mac, você provavelmente tem Helvetica caso contrário usar área. Caso contrário, use Sands. A Sarah. Legal. Então é aqui que a resposta vai ser? Não parece fantástico, pois não? Eu também acho que não. Então, talvez vamos dar um estofamento. Lá vamos nós. Isso é melhor. Então lá temos uma calculadora muito básica e é isso. Então, obrigado por ficar comigo durante todo este vídeo. Provavelmente já falei com você até agora. Se eu não tiver incrível. Se eu tivesse agora seria uma boa hora para ir. Faça uma pausa. Pegue um pouco de comida, gasolina , água, talvez ir dar uma volta. É bom sair e refrescar seu cérebro. Afaste-se do código um pouco. Sei que parece contra-intuitivo, mas afastar-se do código ajuda seu cérebro a processar um pouco melhor . Quando você voltar, sinta-se livre para continuar praticando ou bater, continue e vá para a próxima lição. 25. Funções anônimas: Olá E esta lição, vamos falar sobre funções anônimas. Se isso soa assustador para você, é porque eles são. Na verdade, não são. Eles não são assustadores. Eles são como funções, exceto que basicamente vivem dentro de uma variável. Então, para dar uma idéia do que estamos falando aqui, sabemos que uma função começa com função e então você tem seu nome, parênteses e colchetes. Então ele retornou algo, e essencialmente, isso é uma função em poucas palavras. Mas uma função anônima é uma função que não tem um nome específico. Assim, um exemplo seria variável X é igual a função. E então você poderia dizer alerta, ABC 123 Agora eu vou apenas abrir isso, na verdade vou me livrar dessas coisas, também, porque não é mais necessário para esta lição. Isso foi da última lição, e eu acabei de abrir este arquivo no meu navegador. Apertei F 12 para abrir o inspetor. Nada aparece. Legal. Certo, então como faço para executar uma função anônima? Porque é uma variável, certo? Não é uma função, mas é uma função dentro de uma variável. Bem, é realmente fácil você executá-lo exatamente como você faria em função normal, só que você pode nomear o nome é o que o nome da variável é. Então você tem X. Você coloca seus parênteses no final, assim como você está chamando uma função de volta para sua página. Refresque-o e terá um B C. 123. Essa é a sua função anônima. Agora você é anônimo. Função também pode tomar argumentos. Lembra da primeira vez que adicionamos números juntos em uma função que usamos número um e número dois? Bem, isto vai ser a mesma coisa. É apenas log do console, entorpecido um mais entorpecido para Ele simplesmente vai retornar isso no log do console. Então salve a atualização. Eu não recebo número porque está faltando o parâmetro um e dois. Então vamos 45 54. Refresque. Lá vamos nós. Pegamos 99. Então, uma função anônima não é. Não é muito diferente da função irregular. A maior diferença que você precisa saber agora é que a função anônima é apenas uma função que é mantida dentro de uma variável. Agora, a segunda coisa que você precisa saber sobre funções anônimas é que elas não são globais uma função regular. Quando você digita função algum nome como este que é global, então você pode usar essa função em outros nomes de função em outros objetos em diferentes seções do seu código. E isso é perfeitamente bom. Mas você se lembra quando escrevemos Var e Var era escopo para uma função, o que significa que se tivéssemos função, ABC do nosso nome é igual ao teste. Isso significa que esta variável é inteira. Deitado aqui só é acessível dentro da função ABC. Bem, isso não é diferente. Então, se estamos executando algum tipo de função, vamos chamá-lo de qualquer coisa que realmente não importa. Adicione inventar aqui. Então agora eu tenho uma função dentro de uma função agora. A razão pela qual eu poderia querer declarar uma função anônima dentro de uma função é porque este log do console numb um mais numb para pode não precisar executar em qualquer outro lugar, exceto dentro da função qualquer coisa. Então, se eu quisesse executar isso mais de uma vez, nós 12 x 34 x 56 e eu queria executar esta função qualquer coisa. Então o que eu estou dizendo é, hey, navegador, acionar a função chamada qualquer coisa que ele faz que ele cria outra função aqui. É uma função anônima e só vai funcionar aqui. Vamos verificar isso. Lá vamos nós. 37 e 11. Acrescentou. Todos esses números juntos para nós. O que acontece se eu fizer isso? X 123 e 456 X não está definido agora. Isso ocorre porque X foi definido usando a palavra-chave VAR dentro de uma função, e isso significa que ele está preso dentro dessa função. Não podemos tirá-lo agora de novo. Por que isso é útil? Morto? Por que eu iria querer ter uma função dentro de uma função que eu não posso sair? Bem, porque às vezes você tem informações dentro de uma de suas funções que precisam ser manipuladas de uma certa maneira ou um bom exemplo antes de dormir, e você quer formatar seu texto de uma certa maneira. Mas essa formatação Onley sempre aplica esta função bem. Por que declarar uma função global quando ela só se aplica a uma função? Isso é um monte de funções, mas essencialmente o ponto é, por que desordenar seu espaço de nomes global? Basicamente, por que ter tantas funções ao ar livre, onde eles podem ser usados em qualquer lugar quando eles não precisam ser. isso Essencialmente, é tudo uma função anônima é sua função dentro de uma variável, mas tem regras de escopo diferentes para ela. E, uh, escopo é algo sobre o qual vamos falar um pouco mais no futuro. Então não se preocupe muito com isso. Se você está muito curioso, você pode pular em seu tipo de máquina do Google em escopos JavaScript diferentes do que gostaria que você fizesse para esta lição. É criar uma função anônima, não desse tipo. Crie esse tipo de função anônima e não precisa ser complexa. Eu só quero que você escreva um para que você possa sentir isso e depois executá-lo. Isso é tudo. Não deve demorar mais do que 60 segundos. 26. Funções de dupla dupla: já. Aprendemos muitas funções e funções anônimas. Mas e se quisermos funcionar a carga do dedo do pé assim que a página estiver pronta? Carregando como quando o script é feito, apenas executado automaticamente? Não queremos dar a ele um comando em particular. Só queremos que ele execute o mais rápido possível. Agora, esses ar chamado funções auto-invocando. É uma função que é escrita, e assim que é feito o carregamento, ele começa a executar. Agora estes parecem um pouco diferentes, e a sintaxe para isso eu não vou mentir. É um pouco estranho olhar para ele primeiro, mas este é um tipo muito comum de, ah, ah, sintaxe para JavaScript Javascript, uma dessas linguagens que tipo de escrita vagamente Teoh melhor em si mesmo, em um sentido, por isso se parece muito com isso. Você tem função. E então alguns destes estavam familiarizados com esta parte. Isso é apenas uma função normal. Mas então, quando o embrulhamos entre parênteses, você está começando parênteses aqui, e você está fechando parênteses aqui, e então você chama isso como uma função normal, então qualquer coisa aqui executar automaticamente quando a ação de página com a página é carregada quando essa função é carregada porque você não pode tecnicamente ter isso em diferentes partes da página que não estão sendo executadas imediatamente lá. Então, se dissemos alerta flutuou e vamos para um navegador, atualizamos sua página assim Agora em seu HTML, Se olharmos para isso, não há nada lá que está chamando essa função. O que nos faz função auto-invocado são esses dois parênteses. No final, se removermos esses, volte atualize a página. Nada acontece. Isso é porque isso é apenas uma seção de código. E esses parênteses dizem, “ Oh, você tem que ir e executar isso como uma função normal, assim como uma função anônima. Esta função auto-invocando diz, OK, bem, isso é carregado quando é feito o carregamento enquanto estes Prentice e dizer que eu tenho que ir e fazer o meu trabalho para que ele faz vai e faz o seu trabalho. Então, por que você usaria isso? Bem, vamos ver o que você quer fazer com um pouco de jantar em algum conteúdo dinâmico apenas fora do topo da minha cabeça aqui. E se quiséssemos ganhar a página? As cargas têm a mudança de cor de fundo para que selecionássemos nosso corpo. É um documento de corpo variável, consulta, seletor, corpo em uma string, e que vai selecionar isso. E então dizemos, Corpo que cor de fundo estilo, camelo caixa é igual a si ganhou cinco. Vejo você 1515 e porque o texto vai ser difícil de ver estava realmente mudando de cor também, também. Isso e, em seguida, vamos também alterar o html Inter Bem-vindo à minha página. Então, se olharmos para o Ishmael regular, não há nada lá. Voltamos para a página novamente. Não há nada aí. Vou bater às cinco. E assim que este JavaScript é feito de carregamento, ele vai mudar a página completamente. Simplesmente assim. Agora não escrevemos CSS. Nós escrevemos não, HTML. Isto é puramente JavaScript. Agora, isso é o que é uma função de auto-invocação. Você deveria usá-los o tempo todo? - Não. Há momentos em que você quer usá-los? Absolutamente Sim, como, por exemplo, se você está carregando uma biblioteca de paralaxe, você sabe como você rolar para baixo a página e alguns itens rolam em um ritmo diferente no resto da página chamada Parallax, e em javascript, você pode querer carregar isso imediatamente. Assim que a página I Isso começa a carregar seu JavaScript. Você quer isso também, também, quem começar a carregar? Porque parece melhor assim. Mas há outras vezes em que você pode não querer gostar da nossa calculadora que fizemos. Por que isso teria que ser uma função de auto-invocação? Ele não faz. Esse é um evento que é, quando um botão é coletor. Quando o formulário é enviado, então essa função é acionada. Portanto, há um lugar no tempo para funções de auto-invocação. Há um lugar no tempo para funções regulares ou anônimas também. Então, o que eu gostaria que você fizesse para esta lição basta criar uma função de auto-invocação. Vá em frente e escreva. Você tem acesso a todo o código que temos escrito ao longo deste curso. No entanto, se você tiver tempo, eu preferiria que você pudesse escrever isso à mão apenas para que você possa ter uma espécie de sentimento para isso. Eu sei que, às vezes, quando você está escrevendo em linguagem, seus dedos meio que lá um pouco resistentes a gostar, por que eu colocaria entre parênteses aqui? E então por que eu não colocaria entre parênteses aqui? Colchetes encaracolados é bom para a sua memória muscular. É bom aprender o tipo mais rápido para ser um pouco mais produtivo. E no geral, é apenas uma boa prática. E no geral, Então, se você tiver tempo, eu preferiria que você escrevesse isso. Mas se você tiver pouco tempo, sinta-se à vontade para abrir o JavaScript no Js. Apenas brinque com este código, mesmo que seja tão simples como mudar o A C 1515 para apenas preto 000 Eu só quero que você tenha alguma experiência com isso antes de começar o nosso próximo projeto. 27. A palavra-chave "este de "a: Tudo bem, então nós falamos sobre funções, funções anônimas, funções auto-invocação. E agora vamos olhar para algumas das propriedades dentro da palavra-chave this a palavra isso você não pode vê-lo, mas eu estou fazendo aspas aéreas. A palavra-chave this é uma palavra especial, reservada usada para programação orientada a objetos. Então vamos dar uma olhada em como isso se relaciona com uma função. Nós temos função onde ele vai chamá-lo de qualquer coisa, e aqui nós usamos este nome de variável ponto, qualquer que seja o nome da variável. Mas neste momento, isso não existe. Agora esta palavra-chave é usada para pegar qualquer outra informação associada a qualquer coisa com uma função chamada qualquer coisa. Então, se fizermos um registro adulto cônsul na palavra-chave isso e vamos apenas executar esta função pode ir para a minha página e eu apenas atualizei. Isso me dá muito. Me dá tudo o que posso fazer com isso. Esta é uma palavra muito poderosa agora que vimos listas antes, mas nunca vimos uma extensa lista do que podemos e não podemos fazer. Esta é uma coisa muito poderosa, mas há também a capacidade de adicionar suas próprias variáveis. Agora, essas variáveis que estão conectadas a esta palavra-chave são chamadas propriedades. Então qualquer tipo de variável dentro de uma classe que é mais avançada. JavaScript aqueles ar, chamados propriedades e funções dentro de uma classe são chamados métodos. Não preciso lembrar disso por enquanto. Talvez coloque isso no bolso de trás por um tempo. Então, o que acontece quando dissermos este número inicial? Vai ao consulado? É indefinido. Ok, bem, agora que sabemos que é indefinido, podemos dizer que se este número e eu estou apenas inventando número, pode ser qualquer outra coisa que você queira nomear. É igual a comparação rigorosa. Indefinido. Então vamos definir isso para algo que vai ser zero. Então este primeiro registro do cônsul deve ser indefinido. Mas agora definimos como zero. Agora, se consolarmos, registarmos isto de novo, aqui está o que vamos conseguir. Zero sob financier, exatamente como esperado, porque os computadores, na maior parte, são executados de cima para baixo. Bem, isto ainda não existia, mas agora existe. Agora, isso não é diferente de atribuir uma variável normal dentro de uma função. Então, por que usar a palavra-chave “this”? Bem, primeiro lugar, é uma ótima introdução na programação orientada a objetos que notação ponto este ponto que vemos em todos os tipos de lugares, quando estamos falando de strings e obtemos o comprimento, Isto é o que estamos a fazer. E agora o que acontece se quisermos? Teoh invocou esta função mais do que aquelas que poderíamos dizer. Toda vez que esta função é invocada, fazemos este número ponto mais apenas incrementar o número por um. Dê isso a isso. Livre-se disso e o console registre este número inicial. Então isso vai presumivelmente mostrar o número um porque não está definido. Definido como zero e de qualquer maneira, incrementar por um Então o menor número que este poderia ser é uma atualização de sua página. Lá vamos nós. O número é um. Mas o que acontece se eu copiar esta função como 10 ish vezes? Nasceu na época do tênis. Olhe para isso. Agora vemos que este número de estoque tem ID de incremento. Quantas vezes de 1 a 12. Então agora estamos armazenando informações dentro de uma função que não está sendo escrita demais toda vez que a usamos. Todas as outras funções que usamos todos os outros financiamentos anônimos, invocando função que escrevemos todas as variáveis se sobrescrevem cada vez. É como uma ardósia fresca toda vez que você chama isso. Mas às vezes você não quer isso. Às vezes você quer preservar algumas dessas informações. Então agora, essencialmente, você pode salvar informações dentro de sua função que nunca são escritas demais, menos que você queira sobrescrevê-las explicitamente. Agora a palavra-chave esta entra em jogo quando você começa a entrar em programação orientada a objeto , que significa que você tem classes, não apenas funções. Classe é essencialmente um grupo de funções que trabalham em conjunto para um propósito comum. E quando você começa a entrar nisso, a palavra-chave this torna-se muito importante porque isso se refere a todo o objeto. Então, funciona qualquer coisa assim. Na verdade, não é descartado que isso se refere à sua função. Isso é o que está falando. Então não há nenhuma missão para isso. Esta lição eu só queria que você soubesse que a esta palavra-chave existe. Eu não tenho que fazer nada com isso. Apenas saiba que no futuro você vai correr para isso, especialmente quando você começar a aprender coisas como Jaqui usa a palavra-chave ah lot e esta palavra na esta palavra-chave está se referindo a ser função em que vive. Não, se você envolver uma função dentro de uma função. Então, se você tivesse outra função, esta palavra-chave se refere a esta. E se você alguma vez quis usar essa palavra-chave, referindo-se à função de qualquer coisa que você diria variável e você chama isso de qualquer coisa, mas um práticas comuns como sublinhado Tear sublinhado. Isso é igual a isso e agora dentro desta função. O que você pode fazer é este nome de ponto é igual ao que quer que seja. Então, novamente, você não precisa fazer nada com isso apenas escondido em seu bolso de trás por enquanto, porque eventualmente nós vamos encontrar isso como desenvolvedores de JavaScript. E é uma coisa muito comum. Então, quando você vê que isso não surta, tudo o que se refere é a sua função pai. 28. Hoisting: Tudo bem. Nesta lição, vamos falar sobre içar. Então, o que é içar? Bem, JavaScript tem esse pequeno recurso exclusivo que permite que você use variáveis antes mesmo de serem declaradas em muitas outras linguagens de programação. Isso é um grande não. Colocado em JavaScript, você pode se safar com declarar uma variável mais tarde. Isso não significa que você deva. Então, se nós apenas criar pequeno Devyn Rh e-mail chamado Test Head sobre um JavaScript em Js e nós direita variável A é igual a algo parábola ser mais podemos então dizer documento dot queary selector test dot inter html é igual a um plus. B, na verdade, está em um espaço lá dentro. A mais b salvar atualizar, e ele aparece. Isso não é novidade para nós. Isso é porque nós declaramos uma variável aqui, e então nós atribuímos um valor a ela. O que acontece? Nós nos livramos disso e declaramos a variável aqui uma variável B. Eu apertei a atualização, e ainda está carregada. Agora, o que estamos observando aqui é chamado de içamento e JavaScript. Isso significa que você é variável sempre que for declarado, vai para o topo de seu escopo novamente. Há que nós somos que não estamos muito familiarizados com o escopo. O que é isso? Vamos entrar nisso muito em breve. É comum. Eu prometo a você. Agora, o que acontece se fizermos isso? Você diz isso. Isto é algo indefinido. Agora, por que uma variável é indefinida? Isso é porque o seletor de consulta está tentando usar uma variável a algo e variável B. Não, não é que ser não existe. É que ainda não existe. Então foi declarado porque estava no fundo. Aqui, variável ser. JavaScript vê isso como isso. Então, enquanto B foi declarado, ele não tem um valor ainda, e, portanto, é indefinido. Considerando que se lhe demos uma variável diferente que não existe, ver e atualizar a página, nós realmente se abrir. Nosso cônsul C não está definido. Recebemos um erro legítimo. Então eu vou em frente e eu desfaço isso em movimento isso de volta para cima e tudo funciona tão essencialmente , o que JavaScript vai fazer é sempre que você ver longe, ele vai se mover para o topo. Agora vamos envolver isso em um texto de alteração de função. Agora estamos embrulhando isso em uma função. Vai funcionar da mesma forma que vai funcionar perfeitamente como esperado. E se nos movermos para longe A e B novamente abaixo do seletor de consulta? Bem, ele ainda aparece perfeitamente bem agora. A razão para isso é porque muito mais uma vez se mudou para o topo. Ok, então eu realmente derrotei este conceito de ir para o topo fazendo aspas aéreas novamente. Mas o que você não sabe é que o nosso A e B não sai de sua função. Seu escopo é os colchetes até agora e ser só vamos nos mover aqui. Que meios de R e B. Fora desta função não é acessível agora que vai com funções anônimas. Ele vai com funções auto-infocomm. Funções regulares vai com qualquer tipo de esculpir em JavaScript novamente. Estamos chegando ao alcance da minha promessa de que vamos chegar lá. Mas, por enquanto, é bom saber que quando você declara uma variável, não é a mesma coisa que uma assinatura de valor. Declarar uma variável simplesmente significa criar o nome da variável é como registrá-la. Isso não significa que há qualquer valor associado a ele, mas isso só significa que ele simplesmente existe, mas você não sabe o que está dentro dele até que você atribua algo que poderia ser uma string inter float, indefinido saber o que quer que você nomeá-lo. Então esse é o conceito por trás do içamento. Agora, quando você está escrevendo outras linguagens como Python PHP. Içar não é muito comum, mas como desenvolvedor de JavaScript, é bom saber que içar fará isso agora. Há uma prática recomendada aqui sempre que você estiver declarando uma variável declarada na parte superior do escopo, mesmo que você ainda não esteja usando. Então, se você tem um monte de código aqui, seja lá o que for. Mesmo que as Variáveis A e B não tenham nenhum tipo de atribuição para ele, elas não têm nenhum valor. Declare-os de qualquer maneira. Agora há duas razões para isso. Içar às vezes pode levar a insetos. Um monte de desenvolvedores não estão cientes de que içar é uma coisa, e dois, ele diz a outros desenvolvedores que hey, neste escopo estavam usando as variáveis do. Eles podem não ter valores ainda, mas nós estamos usando-os, e isso apenas dá a outros desenvolvedores um aviso para que eles saibam o que está acontecendo um pouco mais cedo, para que eles não tenham que ler, você sabe, 2050 ou 200 linhas de código tendo de repente pensar para si mesmos. Ei, onde diabos está essa variável como Por quê? Por que está aqui? Por que não é declarado em outro lugar? Quando eles entram nessas funções, eles sabem exatamente no que estão se metendo. Então essa é a sua rápida lição introdutória sobre o que é içar. Não há lição de casa. Não há nenhuma missão com isso de novo. Este é apenas um daqueles conceitos que eu quero que você coloque no seu bolso de trás. Por enquanto, é muito útil quando começamos a aprender sobre como o escopo realmente funciona e o que ele faz quando começamos a falar sobre fechamentos e o que não? Mas se há duas coisas para tirar disso, é uma. Declarar uma variável não é a mesma coisa que atribuir uma variável, e a declaração de variável sempre se move para o topo de seu escopo. E para é que você deseja declarar suas variáveis no topo do escopo ou o mais cedo possível , Mesmo que você não esteja atribuindo um valor, basta declará-lo 29. Tente pegar: Olá. Bem-vindo de volta hoje nesta lição que estamos falando de Tentar, pegar e jogar. Agora, nos termos mais simples, tentar pegar é uma espécie de declaração if else. A única diferença é em uma tentativa Catch. Ele não está procurando por um específico, se mais está procurando por algum erro. E como um desenvolvedor, você vai encontrar uma infinidade de Eris, e às vezes você não sabe o que fazer com eles. Agora, um bom desenvolvedor vai pegar essa informação, o erro, e eles vão lidar com isso. Eles vão processá-lo, e eles vão se certificar de que o usuário como uma ótima experiência, mesmo que haja um erro, o desenvolvedor preguiçoso apenas matará o script. E vemos isso muito com desenvolvedores PHP. E é um Howard terrível em que muitos desenvolvedores entram. Mas se você correr para um ar, você deve estar lidando com ele. Não, um bloqueio de tentativa se parece muito com isso. Você tentou código aqui e você tem catch com o seu erro aqui. Agora, o que isso faz? Bem, antes de entrarmos nisso, quero te contar uma boa prática. Não aninhe seus blocos de captura de tentativa. Isso significa que não coloque outra tentativa em seu com outro erro catch que fica realmente confuso. E isso meio que nega o ponto de tentar e pegar Em vez disso, você quer escrever pequenas tentativas catch airs. Se você não tem certeza de que algo está indo para o pé, eu lhe dou a resposta adequada então e só então você vai escrever uma tentativa. Apanhador. Eles não são tão frequentemente escritos como se outras afirmações, mas eles são incrivelmente importantes. E eles vêm com praticamente todas as linguagens de programação nos dias de hoje. Então vamos dar uma chance a isso. Vamos ver o que acontece aqui. Vamos Teoh, tente executar uma função que não existia. Acabei de salvar a atualização da minha página. Não vejo nada olhando para o meu console. Não há nada lá dentro. OK, mas há algum erro? Então vamos tentar esta mensagem de ponto de erro de alerta. Isto foi o que nos foi devolvido. Não existe, não está definido a partir de agora. Queremos ficar longe de Ares, a não ser que estejamos a fazer escutas, nesse caso, tudo bem. Mas um melhor práticas quer log console ou apenas registrar um direto para a página. Então, em seu índice de HTML. Ainda temos este desenvolvimento de testes, então vamos em frente e desistir. Documento claramente. Teste de seletor feito em seu html ZX dois mensagem de ponto de erro Agora, quando há um erro, ele vem na forma de um objeto. E esse objeto é onde você obtém essa notação de ponto. Agora lembre-se, volta com os tipos de dados. Isto foi há uns 100 anos. No início deste curso, fomos capazes de acessar objetos de dados usando um período que é objetos únicos do dedo do pé. Não podemos fazer isso com um aumento. Arrays são os suportes rígidos quadrados. As funções são as raquetes arredondadas, os parênteses. E assim, sempre que você vê um ponto, que é um objeto, nós nos salvar, ir para a nossa página disse. OK, eu só me refresquei. E agora em nosso elemento de teste, ele diz que não existe não está definido. Mas que outras informações obtemos enquanto estamos em um log console em todo o objeto de erro ? Atualize a página e o erro que volta está aqui. Você sabe, se você só quer console, registrar o ar, você pode fazer isso para o erro de log do console e sempre mensagem ponto. Mostre o que isso retorna. Acabei de atualizar a página e o erro foi um erro de referência. A mensagem de erro em si é, Não existe, não está definida agora. E se quisermos personalizar isso? E se dissermos que se um é igual a um, isso é sempre verdade? Um é sempre igual a um outro. Física está mentindo. Física é uma mentira. Se isso for verdade, como nosso se o não for igual a um agora aqui, o que podemos fazer é lançar um erro, salvar que recarregar uma página quando obtivermos um ar de amostra indefinido, legal. Então, agora sabemos. Mas o erro em si é um ar de amostra. Sabemos disso porque ele registrando o sempre Então agora temos algum tipo de direção, enfraquecer totalmente personaliza e dizer em vez de sentença para um ar, podemos dizer usuário desconhecido. E aqui dizemos que se o erro é igual ao usuário desconhecido, faça algo aqui, caso contrário, é um ar diferente. Agora o que podemos fazer aqui é em vez de retornar usuário desconhecido de volta para a página. Os usuários não querem ver mensagens aéreas assim. Ah, e a maioria dos usuários nem sabe o que coisas assim. Na verdade, eles só pensam, Oh, isso é estranho. Isso provavelmente não deveria acontecer. E é meio esquisito para eles. Mas para nós, como desenvolvedores, sabemos exatamente o que fazer. Nós fornecemos a eles uma mensagem de erro personalizada. Nós dizemos. Desculpe, você não está mais conectado assim. Agora volte, atualize sua página e ela diz: “ Desculpe, Desculpe, você não está mais conectado. E a mensagem de erro é desconhecida. Usuário, esse é o fluxo de dados. Agora temos algo com que trabalhar. Agora, para tornar isso um pouco melhor. Vamos fazer este nome. Uh, sim. Qual é o seu nome? O nome da variável é igual ao prompt. Qual é o seu nome? E se o nome não é igual a algum nome secreto, vamos apenas segredo. Vamos jogar no ar. Caso contrário, faça algo bom. Só vou dizer que você pode entrar aqui assim. Salvar. Refresque. Qual é o seu nome? Procuramos o nome que o Segredo diz que você pode entrar aqui. Incrível. Certo, então vamos nos refrescar de novo. Qual é o seu nome? Meu nome é Caleb, e deve me dar um erro de usuário desconhecido. E fez no usuário conhecido. E como sabíamos qual era esse erro, fomos capazes de personalizá-lo e dizer os anos deles que não estão mais conectados ou que eu sou um convidado ou que não tenho permissão ou algo assim, e isso torna a experiência do usuário Só um pouco mais suave. Nós comentamos aqui, lançar um novo ar. Agora temos mais um aqui, e isso finalmente vai junto com tentar pegar. E o que isso significa é que, independentemente do que acontece aqui, independentemente do que acontece aqui, execute sempre esta próxima seção. Isso é o que podemos fazer é podemos copiar esta linha e podemos acrescentar a ela e dizer, Vamos adicionar algum HTML apenas ah, quebra de linha básica e direita tentar Catch finalmente foi executado como aquela página de atualização. Qual é o seu nome? Vamos lá. Não, não queremos segredo. Queremos que algo apareça. Caleb, desculpe. Você não está mais do lado e tenta. Pegar finalmente foi executado. Agora podemos redirecionar as pessoas. Podemos movê-los para outra página. Podemos forçá-lo a sair. É agora que você vê, nós temos uma tentativa, pegar e finalmente, mas nós não temos se declaração lá e isso é totalmente permitido, você tem tantas declarações FL como você quer lá dentro. A única coisa que você não deve fazer é colocar uma captura de tentativa dentro de uma captura de tentativa. Isso é um tipo de não, não, é permitido. Mas agora é um mau treino para a tua missão. Mas eu gostaria que você criasse outra tentativa. Pegar. Finalmente bloquear. Assim como o que você vê aqui, eu quero que você jogue seu próprio erro. Eu realmente não me importo como você consegue esse ar. Você nem precisa necessariamente solicitar qualquer tipo de informação. Você pode simplesmente jogar o erro, se quiser. Eu sei que você está familiarizado com prontidão. - Já. Eu gostaria que você lançasse um erro e, em seguida, em seu bloco de captura, eu gostaria que você controlasse o fluxo de dados desse ar. O que está acontecendo conosco? Como você vai lidar com esta situação? E então quando a tentativa e captura terminar de correr, você adiciona o seu bloqueio finalmente e isso pode realmente ser qualquer coisa qualquer tipo de sinal que diz Oh, hey, a tentativa e a captura estão feitos. Pode estar em alerta. Você poderia ser um diário do conselho. Você pode fazer alguma mudança inter html, se quiser. Seja lá o que for. Apenas tenha um pouco de experiência com Try, catch. E, finalmente, esta é uma daquelas coisas que separa um desenvolvedor medíocre de um grande desenvolvedor. E também é um desses conceitos fundamentais de programação que você pode levar com você para outras linguagens também. O PHP, por exemplo, uma linguagem muito, muito comum, usa uma sintaxe muito semelhante a esta, e a maneira como você flui seus dados é exatamente a mesma em quase todas as línguas. É só que você precisa saber como escrever e