Aprenda programação básica de HTML5, CSS e JavaScript do zero | Richard Sneyd | Skillshare

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Aprenda programação básica de HTML5, CSS e JavaScript do zero

teacher avatar Richard Sneyd, Lecturer, Founder & CEO of CyberMyth Games

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

29 aulas (4 h 1 min)
    • 1. O que vou aprender?

      3:14
    • 2. Faça o download e instale o software necessário

      1:33
    • 3. Conceitos básicos em em HTML

      12:51
    • 4. Etiquetas e elementos usados

      14:54
    • 5. Etiquetas comuns parte 2

      13:08
    • 6. Como começar com o Aptana

      5:33
    • 7. Trabalhando com os selecionadores e regras em em CSS

      12:21
    • 8. Cursos e estilização e de mesa

      13:06
    • 9. Sheets de estilo externo

      6:42
    • 10. Estilos em linha

      4:28
    • 11. Introdução ao Javascript

      9:24
    • 12. Funções para o usuário

      8:05
    • 13. Variáveis

      5:07
    • 14. Operadores de afa Arithmetic

      6:02
    • 15. Tipo de dados dinâmicos

      13:11
    • 16. Tipo de dados: corças

      4:30
    • 17. 16 objetos no JavaScript

      8:44
    • 18. 17 métodos de objetos

      4:16
    • 19. 18 de 18 de 18

      5:55
    • 20. Lógica condicional

      7:23
    • 21. Caixas de alerta

      2:10
    • 22. Validação de formulários

      13:12
    • 23. 22 scripts externos

      3:25
    • 24. 23 de tela

      12:49
    • 25. 24 Criação de um site

      8:37
    • 26. 25 projeto do site no Pt 2

      13:52
    • 27. 26) de site em 26

      9:27
    • 28. 27 Projeto de site no

      6:57
    • 29. 28 Projeto de site no Pt 5

      10:14
  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

2.031

Estudantes

--

Projetos

Sobre este curso

HTML5 é a mais recente evolução da tecnologia da web, para abrangem décadas de pesquisa e desenvolvimento. Ele tenha matured no ponto que pode ser usado para criar sites deslumbrantes, responsivos e para a pessoa, de aplicativos e jogos. Além disso, qualquer coisa de escrita no HTML5 é inerentemente de a plataforma, de então se proa no uso do HTML5 é incrivelmente valide para você como uma web, aplicativos ou desenvolvedor de jogos.

Este curso de introdução, de introdução, de HTML5 ensina todos os fundamentos para trabalhar com as três tecnologias carde da web moderna: HTML, CSS e JavaScript. No final do curso, você vai entender o uso básico do HTML5.

Conheça seu professor

Teacher Profile Image

Richard Sneyd

Lecturer, Founder & CEO of CyberMyth Games

Professor

Richard Sneyd (B.A Hons.) is founder and CEO of CyberMyth Games. In the performance of his duties within the company, he must wear many hats, including that of a programmer, designer, digital 2D & 3D artist, sound designer, scriptwriter, texture artist, leader, marketer and business man.

He is also a fully registered, qualified, and highly experienced lecturer. His speciality subjects include 3D Modelling & Animation, Computer Game Programming, 2D Image Processing, Game Design, Desktop Audio, Psychology, Consumer Behaviour, Human Resources & Business Management.

Richard is enthusiastic about his work, and students and colleagues note that he is a very dedicated and accomplished teacher. All of his courses are characterised by a steady, incremental flow of information, and ... Visualizar o perfil completo

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%
Arquivo de avaliações

Em outubro de 2018, atualizamos nosso sistema de avaliações para melhorar a forma como coletamos feedback. Abaixo estão as avaliações escritas antes dessa atualização.

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui cursos curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. O que vou aprender?: Olá e bem-vindo mais uma vez para aprender. Hey, html cinco CSS e JavaScript Basics a partir do zero. Então, o que será aprendido neste curso? Bem, em primeiro lugar, faça. Bem, meu nome é Richard Sneed em “Serei seu instrutor”. Eu sou fundador e CEO da Cybermen Games, que é uma empresa especializada em desenvolvimento de jogos para alvos móveis e desktop , bem como instrução de criação de cursos em linhas semelhantes. Então, o que você vai aprender? Bem, você aprende que odeia Jim ou cinco. Então, o que é uma equipe de cinco? Bem, é a última evolução fora da equipe de ódio são padrão, e isso significa que na tecnologia do ódio CML na era moderna. Então, os padrões posteriores para ataques de trabalho Andi até mesmo alguns desses novos recursos que vieram junto, o ponto é aqui que, desde um iniciante completo, você será levado ao ponto onde você será capaz de usar e-mail de ódio para criar sites e não apenas sites estáticos. Poderemos usar CSS para estilizar seus sites e criar uma certa quantidade de interatividade gráfica ou estilística, como botões e coisas assim em seu rótulo, para usar JavaScript para criar verdadeira interatividade e elementos dinâmicos dentro de seu sites, incluindo a criação de suas próprias funções, funções definidas pelo usuário, criação de objetos com propriedades em seus próprios métodos. Trabalhando com os diferentes tipos de dados. Noções básicas sobre o tipo de dados dinâmico em JavaScript e como isso funciona. Você será capaz de trabalhar com eventos. As coisas alteradas na página, dependendo da interação do usuário, etc. Então, o que? Já está aprendendo resultados? Bem, até o final do curso, você será capaz de trabalhar em um nível básico com cartão de árvore em tecnologias fora da Web. Página cinco árvore CSS em JavaScript. Então, os mais recentes padrões Nah, little's. Você entenderá como eles se relacionam. Então, como o ódio TML é afetado tanto pelo CSS quanto pelo JavaScript e como o JavaScript pode ser usado até mesmo para alterar estilos em tempo real em reação a eventos do usuário ou até mesmo eventos do navegador. Assim, você seria capaz de construir sites simples, dinâmicos ou estáticos. Diga econômico, porque você vai entender JavaScript ao ponto que você introduzir elementos dinâmicos com em seu dentro de seu site, usando essa linguagem e você vai notar fundamentos que é necessário off. Hey html, CSS e JavaScript em BP capaz de empurrar para a frente em aprender alguns tópicos mais avançados , como HTML cinco acima em Ganhou sobre. Então você precisa saber essas coisas antes de avançarmos para isso. E haverá um curso para isso para você progredir muito em breve a partir daqui. Certo, então, tendo estabelecido esses pontos básicos, vamos entrar. 2. Faça o download e instale o software necessário: Então, antes de começarmos com nossa introdução rápida e suja para odiar vapor l em suas tags , há alguns , uh , bem, realmente apenas alguns pedaços de software que você vai querer instalar. Sim, nenhum bloco plus é um editor de texto simples. Isso melhora as habilidades básicas do pedido de patente sem navios por padrão, mas janelas. Então, se você tem um usuário do Windows, Eu sugiro que você não sabe nenhum bloco perto mais e instalá-lo para que você possa usá-lo em vez disso , ele ainda está jogando livro de texto. Ele só dá algumas pequenas características como código de cores. Está nos impostos e coisas assim. Então você pode querer instalá-lo no Mac e são editores de texto simples ordem que você pode usar se você é um usuário Mac depois Donna é um aplicativo que eu gostaria de usar também. Então, se você quiser continuar, baixe isso, instale-o e ele vem em duas formas, você pode obter a versão autônoma ou você pode obtê-lo como um plug in para eclipse. Se você já trabalha com o Eclipse, planeje clipes de equipamentos de trabalhadores. Vou usar o mais simples na versão do empréstimo. A Andi. Sinta-se livre para usar isso também. Uma vez que você tenha baixado e instalado esses aplicativos, podemos começar com nossa próxima lição. 3. Conceitos básicos em em HTML: Ok, então vamos dar uma olhada nos conceitos básicos de e-mail de ódio. Então, em primeiro lugar, odeio vapor. L significa hiper linguagem de marcação de texto. No caso de você estar se perguntando agora, HTML cinco é uma palavra que tem sido anunciada por comerciantes em abundância nos últimos dois anos e, em seguida, a indústria de jogos. Está se tornando um tópico bastante popular. Então, o que é? Bem, tradicionalmente odeia? CML tinha pouco ou nada a ver com jogos. linguagem de marcação de hipertexto era basicamente a convenção que rege como escrevemos páginas para a Internet e ainda é assim que ele começaria e terminaria com tags. Todos os elementos não o odiariam na página com início nas etiquetas. Este foi o padrão que foi usado, e vamos aprender tudo devido às regras que vão junto com isso. Mas nos últimos tempos ao poder que tem sido investido na versão mais recente de H Smell , que é odiado ele para fora. Cinco, incluindo sua irmã Technologies, que é CSS dançarina, folhas de estilo em cascata. Isso é ah, soletrado como este estilo de patinação lençóis. CSS CSS é uma tecnologia irmã para odiar vapor. Irmã mais velha, eu sou sim, quadro ou o que você quer chamar essa linguagem irmã acoplado que odeia TML e JavaScript. Essas tecnologias de árvore são o que podemos usar para criar aplicativos Web interativos e dinâmicos e até mesmo jogos interativos e dinâmicos da Web. Fiel ao ódio. HTML cinco padrões usando HTML CSS JavaScript Ok, agora eu tenho um editor de texto simples aberto no meu computador. Não é nenhum pad plus Plus, você pode usar qualquer editor de texto simples que desejar. Mas se você pode usar nenhuma patente plus plus, como eu sou e então isso pode ser uma boa idéia. Agora, os primeiros e mais fundamentais elementos em qualquer documento HTML é D você adivinhou que odeio elemento CML . Isto não é um elemento. Isso é apenas uma etiqueta, então temos que terminar o elemento fora. Primeiro você cria uma tag de abertura. Então esta é a etiqueta de abertura para dois. Ei, elemento html. Ele começa com um desses pequenos suportes nas extremidades com um desses pequenos suportes, que podem ser encontrados apenas à direita da sua tecla M para manter um teclado. Então, para usá-los turno antigo em, em seguida, pressione qualquer uma dessas teclas em você pode criá-los. Não os confunda com colchetes ou colchetes, que estão ao lado do pico. Estes são diferentes. Personagens completamente diferentes. Não confunda seus personagens. Vou fazer o imposto um pouco maior para que você possa ver exatamente o que eu estou fazendo. Controle a roda do mouse. Ok, eu vou assumir em uma espécie de Texas grande, agradável e fácil de ver o que está acontecendo. Então, uma vez que eu forneci, os dois desses colchetes têm que encontrar uma etiqueta. Devia ter avisado o computador. E a tag HTML está começando agora. É má prática usar, hum em invólucros inconsistentes. Então mantenha tudo em minúsculas, não suba em um caso, ih, minúsculo Você sabe de um caso M? Você sabe, o navegador, o meu processo, mas então pode haver alguns navegadores ou alguns aplicativos que não o processariam . O ponto é que não é o padrão da convenção é manter tudo minúsculas especialmente o html cinco. Essa seria a convenção que seria seguida. Então terminamos elementos html. Nós o fechamos usando uma tag de fechamento. Agora, qual é a diferença entre abrir uma tag de abertura na tag de fechamento? Bem, fechar taek é idêntico em quase todos a uma tag de abertura, exceto que ele tem essa barra e que diferencia Theis fechamento odeia-os. Ataque deste ataque HTM de abertura este pequeno avançado no ano passado. É importante que você inclua isso, e tem que ser no início. Não pode estar entre a página do D que não funcionaria. Não pode estar atrás do HTML que não funcionaria. Ele precisa ser imediatamente após apenas um pequeno suporte triangular olhando aqui, que é apenas à direita da tecla M no seu teclado. Segure o turno para usá-lo. Então, agora temos as duas abertura mais básica no fechamento de tags para documento HTML. Agora há tags fundamentais ordem, que estão sempre presentes em cada documento HTML hey. Vou apertar a tecla tabulação porque é uma boa prática recuar seu resfriado ou sua América, como poderíamos chamar. A próxima etiqueta que vamos incluir é a etiqueta principal, e eu vou apenas descer para as linhas e fechar essa cabeça. Há uma razão pela qual estou formatando minha América para meu código do jeito que eu sou. Então, aprender a seguir esta prática basicamente e aninhado frio. Esta cabeça vai para dentro da etiqueta Hasty Mount. Sempre que é aninhado, ele deve ir em um nível. Então eu já abanei uma vez para estas linhas. Se eu colocar algo dentro do elemento da cabeça, o que vai acontecer? Mundo logicamente suficiente para acontecer de novo e dizer Título? Então o título é outro da etiqueta mental. Está sempre lá. O título é o que aparece na banheira superior. Na maioria dos navegadores, é uma forma de metadados. Messa é cinto M e t uma matéria de dados meta significa maior. Então eu vou chamar essa de nossa página de testes de incrível de incrível tanto de você antes, como parece tão incrível. Tenho certeza que é uma recompensa. Então temos o nosso título, nossa cabeça no nosso ódio. Vamos lá, agora a razão pela qual é chamado de cabeça é porque parece que a conversa logicamente acima do corpo. Então, se há uma cabeça para o corpo certo usado, isso não é demoníaco lembrar o corpo fechando corpo tigre. Você pode ver que seu médico é um padrão distinto. O elemento de cabeça nos elementos do corpo são recuados no mesmo nível porque eles são negrito dentro dos elementos TML de ódio. O título é recuado mais uma vez que não está apenas dentro do elemento hateem. Também está dentro do elemento de cabeça, então em densa cada vez, e é aninhado dentro de outro. Outro elemento, é a melhor maneira de organizar seu código. Outra convenção que eu tendem a usar em um monte de água desenvolvedores Web usar é que se Thea se é um elementos muito simples, como neste caso, é um elemento de uma linha que eu sou. Eu tenho minha etiqueta de abertura, eu tenho um pouco de texto, e então eu tenho minha etiqueta de fechamento nesse tipo de situação, um simples, hum como que você pode colocar a tag de abertura e uma tag de fechamento tudo na mesma linha. Não há nada de errado em fazer isso. Mas para grandes elementos como o elemento cabeça, que vai demorar muito vai conter um monte de elementos sóbrios ou o corpo, que também vai conter um monte de sub elementos para odiar vergonha. Elemento, é claro, irá conter todos os elementos de ordem, modo que e ele vai ser separado na forma que ele vai ter uma linha distinta para a tag de abertura para o tipo de fechamento porque ele melhora dramaticamente à legibilidade do nosso frio sobre a América para que possamos voltar mais tarde sobre o que temos feito com este frio muito facilmente, apenas digitalizando com os olhos dela ou se estamos trabalhando em uma equipe para uma empresa e os outros desenvolvedores que olhar para o nosso frio ou vai muito facilmente ser capaz de entender o que eles estão lendo, porque foi escrito bem em formatado bem, Então manter tudo. Em minúsculas. Separe a aderência de abertura e fechamento em duas linhas separadas se for um elemento que tenha alguns elementos nele, porque isso é mais legível. Mas se é um elemento que como este é um elemento simples que realmente não tem alguns elementos como o título, então você pode colocá-lo assim em uma linha até o corpo. Nós podemos apenas escrever no Texas agora, e isso vai aparecer na página como este é o meu texto corporal. O que a América que e nós podemos usar para um, designar ainda mais a forma de informação está sendo apresentada aqui? Então, por exemplo, se um lançamento estava indo e dizer que este é seu próprio parágrafo, este é um tipo de fechamento de parágrafo e nenhum sub elementos para que possamos deixar o pacote de abertura e fechamento na mesma linha. Nesse caso, isso é salvo isso vai criar algum tipo de projeto para nós mesmos trabalharmos fora. Então, se você vai para bibliotecas e vai para sites em, eu vou criar uma nova pasta que eu vou chamar e hey, html cinco noções básicas, é claro, dentro dele lá estavam indo para salvar o nosso arquivo. Esta é a nossa única página no nosso website incipiente. Então, é lógico que ele será, em seguida, a primeira página desde suas águas honra assim quer ser chamado a primeira página padrão em um site. Chamamos de página de índice. Invariavelmente, sempre chamamos a primeira página de página padrão no índice do servidor, modo que o índice será automaticamente aberto pelo servidor, um dos sites de estrada abertos. É a página de abertura padrão em patos dot hate email assim dot html que é a extensão do arquivo . Agora não estamos prontos para clicar em Salvar ainda Este é um ponto importante para salvar como o tipo não deve ser texto. Ok, certifique-se de que não é texto, então em nenhum bloco plus, você pode apenas configurá-lo para todos os tipos. E isso significa que estamos designando para o tipo de arquivo nós mesmos com o dot html lá. Depois de fazer isso, você pode clicar em Salvar, podemos ir e abrir isso. Acabei de bater o hóquei do Windows E lá no meu teclado para trazer o livro do navegador de arquivos The Road. Uma maneira de fazer isso. Tenho certeza que você está ciente de que iremos a bibliotecas em sites. Abra o nosso curso básico de ódio, que é o site Ah, diretório ou pasta. Então, todas as nossas outras páginas do site e arquivos virão aqui escritor nesta pasta mestre ou em diretórios como GM, uma pasta Imagens ou uma pasta Styles ou pasta Scripts, esse tipo de coisa. E se clicarmos com o botão direito nesta página de índice, vamos abri-la com o Firefox. Vamos apenas tomar um segundo para analisar o que estamos vendo, então não há muito aqui, mas é um documento HTML válido no topo. Nós temos o nosso título, que nós fornecemos. Você se lembra que isso estava dentro da página de teste do elemento de cabeça da incrível Nous Andi no corpo. Nós tínhamos um parágrafo sobre o texto de que era apenas sobre Vamos voltar para o nosso documento. Então, esses são os documentos de e-mail de ódio mais básicos que você poderia realmente criar. Essas são as tags mais importantes, seu odeia elementos TML, os elementos de cabeça dentro que o elemento de título e, em seguida, o corpo armado, que contém todo o conteúdo que aparece aqui. A página real, está tudo dentro do corpo. Ok, então essas são as noções básicas de uma espécie de página de boas-vindas estilo Olá mundo, pois estamos aprendendo HTML então olhamos. 4. Etiquetas e elementos usados: Vamos aproveitar a lição anterior dando uma olhada em algumas das tags mais comuns que já construímos. D Esqueleto mais fundamental para um vapor de ódio para fora cinco páginas para a página HTML um documento para que água não necessárias, mas tags úteis em tipos comuns vindo explorar. Bem, só usamos uma etiqueta de montagem de quatro. Na última lição, criamos um parágrafo, e claramente o elemento parágrafo é encontrar uma tag de abertura e fechamento e o simbolismo p que é usado para isso. Ok, então é assim que criamos parágrafos. No entanto, existem algumas marcas de formatação ou que podem ser usadas, como cabeçalhos em nossos cabeçalhos Vai ter vários tamanhos. Então temos um ódio um e novamente aberto e fechado da mesma forma que nos tornamos usado dedo do pé. Então, Collison na direção um. Vou copiar isto. Basta selecionar a linha de patrulha C para copiar ou comandar e controlar-me para colar, e você pode ter ódio e odeia árvore. Apenas certifique-se de que depois de consistente nos tigres de abertura um ódio para não fazer fechamento. Tiger odeia árvore porque isso não faz sentido. Mantenha cada um para Andi H. Árvore h quatro até na escola para que tudo bem. Então temos o nosso “h”. Odeia Haight Street em ensinar porque temos um parágrafo. Isso é um parágrafo sobre, uh, T isto é, não se esqueça do seu esconderijo avançado. E podemos até colocar outra cópia do seu ódio quatro entre os dois parágrafos chamados indo para a árvore esperando o título cinco. Então aqui temos um múltiplo. A seleção de diferentes elementos de cabeçalho combinados. Mas alguns parágrafos que são saboreados nos controlam. Se voltarmos ao nosso navegador, precisaremos abrir esse arquivo novamente. O índice enquanto que salvamos na lição anterior. Então vamos às bibliotecas que tínhamos em sites, pelo menos do meu lado. Lembrem-se, onde quer que esteja, salvaram o vosso quase básico Index abrindo fogo, pessoal. E lá vai você. Então, a partir de um e contando, você vai do maior para o menor. Então cada um é o maior ensinador para um segundo maior etc. Descendo números Trudeau. Temos um parágrafo que eles estão dirigindo e outro parágrafo para que esses ar algumas das tags de formatação mais fundamentais que podemos usar algumas outras tags comuns. Se você quiser, enfatize algo dentro de um de seus parágrafos, venha aqui e diga, Isso é material cheio de parágrafo. Esta linha é especial e assim é em Bolt. Só estou dizendo que, obviamente, vai mudar qualquer coisa, mas temos uma etiqueta especial que podemos usar para fazer essa verdade e ainda ousada. Então, um dentro. Ok, algo aconteceu com a nossa peça final. Então vamos apenas Reince surfou se nós salvá-lo e voltar para o meu navegador em Hit Refresh para ver que temos uma linha encorajada dentro do nosso parágrafo. Você também verá que cada um desses elementos para elementos de cabeçalho sobre o poder dos elementos freio automaticamente em uma nova ordem de aliança. Esse tipo de elementos quantias Fazê-lo em. Isso é um momento que não e há uma lógica nisso. Então lógica o, por exemplo, um parágrafo não se encaixaria em linha com outro parágrafo para que ele automaticamente o quebre da mesma maneira. Cabeçalho não ficaria em linha com outro cabeçalho ou outro parágrafo, então eles são por padrão definido. Não HTM Alan entendido pelo navegador para se sentar sim, em sua própria linha, então eles automaticamente quebrar. Está bem. Agora, esta é a formatação padrão do navegador, nosso estilo irmão. Então CSS é o que usamos para criar informações de estilo e será você e ficou em breve. Vamos dar uma olhada em mais de nossas tags básicas. Então, uh, Dave Tag é usado para dividir nosso documento em sim, pequenas seções distinguíveis para que você possa dar I D. S. Então você poderia dizer dar I d iguais e chamá-lo, você sabe, menu de votação ou algo assim Hifenato feito assim, flutuando muitos. E então você poderia usar que eu d que nós fornecemos aqui para se referir a distintivo em CSS e estilo. Faz com que pareça de uma certa maneira. Você também pode usá-lo para se referir a ele em JavaScript para fazê-lo se comportar de uma certa maneira. Então, controles de estilo para olhar a funcionalidade de controles estéticos e JavaScript. E essas idéias que podem ser colocadas em mergulhos podem ser usadas para isolar certos elementos da nossa página e manipulá-los para criar algo que se comporta e olha da maneira que queremos fazer para que eu d elemento é um elemento importante. Elementos. A razão pela qual eu mencionei isso é para introduzir o conceito, desenvolvimentos, elementos ou atributos, devo dizer e razão. Como ele acabou de introduzir um conceito de atributos e atributos basicamente, são pequenas coisas que você pode adicionar em tags. Eles sempre vão na tag de abertura, e apenas alguns tipos podem ter não Todos os impostos podem ter atributos. Eu sou tão simplesmente não sou. Todos os tipos podem ter todos os atributos. Em vez disso, devo dizer. E assim é definido pelos padrões de ódio de Shima. Quais etiquetas podem ter? Que atributos? Sim, se quiser saber exatamente quais podem ter. Quais atributos concordaram um grande recurso para se familiarizar. São as escolas da árvore W que comenta para você. R l www dot w três escolas dot com Venha aqui em você pode seguir alguns tutoriais básicos para reiterar o ponto que eu tenho ensinado, que você sabe que não há nenhum mal. repetição é o motor da pretensão, e você também pode olhar para o M os padrões para essas diferentes tecnologias. HTML CSS JavaScript, que é basicamente o que engloba HTML cinco como uma nova tecnologia. Aquelas tecnologias de árvores acopladas, isso é um vaporizador cinco. É assim que construímos sim, sites interativos e envolventes APS e jogos, que são plataforma cruzada para que você possa verificar a documentação de referência aparecem para que eu d é importante. Tente lembrar que você poderia dar um i D a um taik diff, então apenas fique ciente disso. É muito raro que você jamais criaria uma tag dip sem dar-lhe um ID ou uma classe A não é nenhum tipo de atributos que você pode dar a um div, então você geralmente vai dar a ele e i. ID ou uma classe A não é nenhum tipo de atributos que você pode dar a um div, então você geralmente vai dar a ele e i. D ou uma classe e na maioria das vezes e eu d. Então apenas tente lembrar que ele sempre vai na tag de abertura no bit entre aspas lá, que é a própria idee real. Então essa é a idéia atributos T é igual aos sinais de valor, e então o valor é colocado entre aspas no menu flutuante. Hifenated I D. É o que vamos então usar e CSS e JavaScript para identificar esta detecção, que pode conter todos os tipos de coisas para que eu possa vir aqui e apenas dizer, eu sei que poderíamos criar uma tabela. Faremos um pouco mais sobre isso depois. Mas uma tabela básica aqui. Criar um papel de tabela, T ou o que foi para suas mulheres top só para ser consistência, mas nosso recuo dentro de um papel de tabela. Você pode ter uma tabela de dados de TV, que é uma célula como um excel. Er, esse tipo de aplicação. Então é aqui que podemos criar dados tabulares usando tabelas. Assim, os elementos da tabela é o motor em seguida linhas da tabela. Seus filhos estão em TDs? Nossos filhos fora da mesa regras. Então é assim que você os aninhava. Você pode ter o dinheiro TDs dentro de seu papel de tabela como você gosta, então você pode dizer como, menu e você item um e você item para Enfim, sabemos que isso é apenas para demonstrar o conceito, e se você diz que você vai ver que há uma mesa dentro de nosso Dave que você não vai ver fez isso porque Davis Conceptual estava usando o desenvolvimento. Teoh criou uma seção fora do nosso conteúdo, que pode então ser acesso a isso. Eu, D e Manipulado mudavam-se, etc. Mas o que você realmente vê é o conteúdo da tabela, que é muitos um e ganhou. Muitos podem fazer muitos no meu país. Isso é o que é apresentado na página para provar isso. Vamos para o nosso navegador na página atualizada, que é F cinco. Você tem o item de menu um. Alguém tem muita árvore branca. Ok, então esse é um pequeno menu que nós criamos. Tem sido estilizado de alguma forma? Não os transformamos em ligações. Então, o que são links e como eles funcionaram? Bem, um link é o que clicamos para visitar outra página ou Teoh baixar um arquivo ou para interagir basicamente de qualquer forma, mas clicando em algo. Então, para criar um link, usamos âncoras, que novamente tem uma abertura na tomada de fechamento. Então, os atributos mais fundamentais para a etiqueta do tornozelo novamente, na verdade, é sempre entrar. A etiqueta de abertura é ódio, ref. Então hey, Draft é os atributos usarão um igual simples como um signatário e valioso atribuir e vai e não Biekert GM aspas novamente. E lá dentro ia assinar que algum tipo de você está fora. E é só isso, neste caso vai ser um euro relativo porque eles vão manter todas as nossas páginas de e-mail de ódio dentro desta mesma pasta Então isso é relativo que diz dentro, se você não colocar nada, ordem para baixo apenas para se arquivar, que é sobre que HTML irá criar que em breve. Em seguida, ele vai olhar automaticamente na mesma pasta é apenas arquivar um salvo em, que é a pasta raiz do nosso projeto Web. Se você tem isso na mesma pasta dizer que você tinha em então protocolos, páginas extras, em seguida, você colocar o nome de pastas assim em um Ford Slash e, em seguida, o nome do arquivo. Então você tem que dar o pat exato em relação à pasta raiz. Então, sobre dot html, o que é bom por enquanto. Poderíamos fazer isso fora. O que você faz com? Mas só estamos usando isso como uma demonstração básica desses impostos, e agora você pode ver que isso se torna pensável porque nós adicionamos o ataque âncora. Se você clicar nele, ele não vai a lugar nenhum porque nós realmente não criamos você. Lembra sobre essa tag html já sobre essa página html? Então o que podemos fazer apenas para mostrar que funciona é ah, clique em arquivo e salvar como eu salvar uma cópia deste, nós vamos chamá-lo sobre ainda odeio equipe fora arquivo. Então salve-o sobre o que mudou o título para sobre e você deve ver a mudança den título. Vou abrir nosso arquivo de índice de novo porque mudamos para cerca de. Você vai ver que temos índice e agora. E se voltarmos e clicar em F, Eu primeiro atualizar a página, você vê que diz página de teste de Amazing nos a. clique no link. Ele vai para a página sobre. Você ainda não alterou nenhum conteúdo, mas esta é uma página separada. Olha para a tua UL. Você verá que você é Alice apontando novamente para a nossa pasta raiz. Odiava-o. Um curso básico luta na página é a página sobre, não vaporizador. Então, isso faz isso por esta lição. Aprendemos algumas das tags básicas e alguns conceitos mais, e continuaremos a partir daqui na próxima lição. 5. Etiquetas comuns parte 2: Esta é a segunda parte das tags comumente usadas em HTML, de modo algum uma lista exaustiva. Mas apenas para que você funcione muito rapidamente, estamos usando essas estruturas para dar uma olhada nas tags mais usadas. Então já consideramos a grande maioria deles as tags de cabeçalho, parágrafo, parágrafo, div e tabela para definir na exibição de conteúdo tabular. Então, o que mais, irmã? Bem, além de tabelas, Eu vou colocar em uma lista abaixo está na lista ordenada e fechar esse parágrafo e como ser definido. Uma lista bem na lista de ordem começa com um u L Então apenas o acrônimo de uma lista ordenada ul. E, claro, termina exatamente da mesma maneira. Exceto que colocamos uma barra, como é o caso. Mas todos os elementos HTML. Então você l em Como podemos definir itens na lista? Bem, nós usamos l i para este item, então eu não encomendar lista. Eu sou água. Os itens da lista dizem que é uma lista de compras. Lavagem suave à base de toot. Muito ideia, Nick. Individual mais. Ok, agora, se nós salvarmos isso e abrirmos o ganho em nosso navegador da maneira usual. Ou, se você já tiver, basta atualizar a página. Você pode fazer isso clicando neste fundo que eu acertei odeia ele em cinco como o atalho. E o que aconteceu aqui é que eu não salvei as mudanças agora temos estamos na página sobre html. Clique na parte de trás cerca de um ano atrás. Queremos que seja html índice. E se estivéssemos frescos, você pode ver que temos uma lista não ordenada aqui, que significa marcadores não numerados, e todos os itens estão aparecendo como um marcador separado de modo que foi são comumente usados tags para criar listas em listas de pedidos. Ok, então dibs em listas são usados muito frequentemente em e-mails de ódio modernos, então apenas esteja ciente disso e esteja familiarizado com eles. Fornece e listas ordenadas em listas ordenadas. OK, então nós criamos isso. É claro que precisamos nos comprometer. Traga imagens. Então, como você traria uma imagem? I m G é a tag de imagem, então lembre-se que não é imagem como, hum, como que é abreviado para Angie Now. A tag de imagem é uma tag de fechamento automático. Não tem uma etiqueta de fechamento que a acompanha. Você não faz assim, que é uma quebra da norma, eu sei, mas fique ciente disso. Há um número limitado de etiquetas que são impostos auto-contidos. Então eles estão em si mesmos. Um elemento sobre como você os fecha é colocando uma barra no final assim. E então tudo o que está contido nessa tag é atributos verdadeiros. Então a imagem é uma dessas tags. Então S ou C e, em seguida, atribuído o valor Trudy aspas. É a fonte SRC que vai nos dizer onde as imagens. Então temos uma pasta de imagens. Eu vou dizer imagens barra no waken Chamá-lo em. Que tipo de imagem vamos trazer aqui. É só um teste. Corte bonito você fica OK, pato diz sim, Jay Peak. Agora, quando se trata de trabalhar com imagens, você provavelmente vai precisar loja de fotos ITER você pode obter loja de fotos, Veja é gratuito on-line. Basta Google que ou então você pode usar algo livre, como ou pintado apenas para tipo de alterar os tamanhos do seu formato de pedido. E para os meus quatro anos vários gráficos. Agora que nos apoderamos de nós mesmos. Basta encontrar algumas imagens gratuitas. Existem algumas fontes de imagens genuinamente livres. Você sempre quer estar ciente de questões de cooperação. Estou fazendo isso como uma demonstração rápida da técnica, que é o que estamos usando nosso próprio tipo de imagens pré-fabricadas. Ok, então vamos ver o que eles têm aqui. A dieta serve. Isso é certo. Clique sobre isso em Salvar imagem como nós vamos apenas colocá-lo na pasta D Project. Vamos lembrar, no entanto, para criar uma subpasta ou subdiretório. Eu o chamo de diretor de Imagens e dentro de lá, porque apenas dados já tem uma foto J. Então, vamos adicionar uma extensão de volta aos seus documentos HTML em. Mudaremos esse nome dois dias e agora ela salva e vai para o Firefox. Abra nossa página de índice na atualização. Temos um barco de referência que não está se abrindo. A razão para isso é que temos capitalizado a pasta de imagens que eu acredito que temos. Vamos mudar F12. Eu só vou trazê-los de volta para baixo rosto. Ok, então, se você atualizar, isso é tudo. Sim. Certifique-se de que a salvamos. Doutor. Temos imagens ou gelo cortado. J peg. Será que nós removemos o ponto que fizemos acidentalmente. De alguma forma salvar de volta para o navegador cinco sob. Estamos trazendo a imagem tão fácil de trazer uma imagem. E se você quiser hiperlink a imagem para que você saiba, esta é uma loja e você pode comprar uma quebra de dados sobre este pequeno dado. Vai te levar para a loja de tintura. Bem, isso é praticado. Alguns do que aprendemos tabela fechar a mesa. Aprendemos a criar tabelas. Que papéis? Para o seu para funções de tabela. Está bem, este é o nosso papel principal. Vai ter um cabeçalho da mesa th andi cabeçalho vai ser a loja de dados. Ótima. Só um título. Então vamos criar uma nova linha por baixo dos pontos que você está para o seu sem passo à frente barra e então seria para York em ambos os desafios. Nós vamos ter dados de tabela TD, e vai ser dados um na segunda célula ou uma tabela Data TD vai ser orico real, que vai apenas treinar e colar aqui para rico real, que você possa colocar imagens que você vê dentro de e Eu deveria estar aqui dentro de elementos de água como este. Então agora isso coloca-o na mesa. Mas é claro, precisamos adicionar uma âncora para torná-la clicável. Então o ódio é igual a, uh, eu coloquei a fonte. Onde você onde eu estava lá em um segundo, ouvindo colocar em nosso fechamento para que você possa vê-lo nesta tag imagem é enrolado dentro dos elementos âncora. Está aninhado lá dentro que vai dizer amarrado. Você sabe, http, literalmente w dot nenhum dado ponto com. Eu não sei. Esse é um site de verdade que vai descobrir. Então controle s para salvar isso. Isso é testado no navegador. Então, cinco aqui temos nossa mesa, que não está tornando tudo tão bem comprado. Ele existe mesmo. Ainda não o elegemos, e o seu carregamento está morto. Claro, suas alterações quando passamos o mouse sobre a imagem porque ela é clicável. Vou clicar nisso se você quiser nos levar ao Dice Dot com, que aparentemente é um site de busca de emprego. Então isso é novidade para mim. Ok. Não, nós aprendemos muitas das tags básicas muito rapidamente, que é excelente, e você verá isso aparecer novamente. Em um de seus primeiros parágrafos, colocamos em um ousado sim elementos. Bem, você também pode usar itálico, então eu para itálico. Outro órgão enfatiza outra garota. Meu Deus, outro eu meu itálico e você para subjacente. Então esta é uma lista ordenada visível por ordem, então sublinhado. Guarde isso. Volte para o seu navegador. Clique em Voltar. Teremos que reabrir a página do Sr. Presidente. Fechou. Então, índice. Ok, então aqui temos são ousados, tudo bem, Alec e eu somos Wonder Line. Então essas são praticamente todas as tags mais comumente usadas. Nada é escritório disso de forma alguma. Mas isso é um monte de tags, que serão usadas. Então o poder real na sala onde o poder real entra é quando começamos a adicionar nosso CSS e eu dirijo um script para o disco antigo, além de algumas tags úteis. Então, a única etiqueta de ordem que pode valer a pena olhar é a regra horizontal, então eu não necessariamente usa tudo isso frequentemente, mas é uma tag comumente usada, então é como o puxador de imagem que é. M em si contém impostos. Não há etiqueta de fechamento, é que não é em si mesmo, e os elementos apenas colocam o chão corta-o final Onda, e vamos colocar isso entre todos os nossos títulos. Copiar. Certo, então se salvarmos isso e entrarmos no navegador na atualização novamente, você verá que ele desenha as regras horizontais de D. Isso é suficiente para as tags básicas ou mais comuns. 6. Como começar com o Aptana: tendo instalado na cidade alta um estúdio mais cedo. Vamos lançá-lo agora. Tenho um atalho na minha área de trabalho. Você provavelmente vai, se não, apenas vá para onde quer que seja que você instalou Thomas. Agora, se você não usou Tana antes, então você pode apenas querer ser igual atenção a algumas dessas diretrizes iniciais. Então, este não é um curso para sair em um barco. Darei o suficiente para poder usá-la para completar os projetos em que estamos trabalhando . Ok, então a primeira coisa que você quer fazer é fornecer um espaço de trabalho sobre o que vamos fazer é definido para ser o nosso diretório de sites, o que quer que seja que você mantenha todos os seus sites. Agora eu tenho um diretório de sites da Web real, e dentro disso eu mantenho o resto dos meus projetos de site como diretórios fixos. Então, por exemplo, aqui está para odiá-lo. Hey, html cinco básico curso que temos trabalhado com este fogo. Ele está aprendendo sobre HTML, e eu vou configurá-lo para ser o diretório pai sites. Esse é o meu espaço de trabalho. Ok, você tem que esperar apenas alguns momentos para um tempo para se abrir. Está bem. Agora fui para a cidade dos almoços. Você começa esta pequena página inicial e seus tops aparecerão todos. Seu trabalho foi em um projeto? E você pode ver isso imediatamente que você viu. Talyn. A documentação tem um link. Então, se você quiser realmente entrar no adepto, a carne fora trabalhando com Tana, que é um pedaço fantástico de software que você certamente quer clicar sobre isso e você pode ir para fazendas ou assim vamos começar imediatamente. Vamos criar um novo projeto da Web. Você diz que os tipos de projeto do rotor como odeiam trilhos Ruby B. Vamos fazer qual projeto da Web? O que significa html, CSS JavaScript. Porque é isso que estamos aprendendo. E vamos dizer projetos contaminados. Não vamos usar um modelo. Certo, localização do projeto. Vamos definir para ser a mesma pasta que criamos anteriormente. Odeia-o fora. Cinco cursos básicos por enquanto. De qualquer forma, chamo-lhe a mesma página Equipa dos Cinco. Um prato de seis. Vamos tentar isso mais uma vez, está bem? Não é assim que você tem a localização padrão aqui, eu acredito. Está bem. Claro que o problema que estamos tendo aqui, eu odeio e-mail básico varas este aqui. O problema que estamos tendo aqui é que eu estou porque começamos sem almofada. Normalmente, se você estiver trabalhando, adote o ANA, você criaria sua estrutura de projeto. Verdadeiro aplicativo. A Tana. Então, como um trabalho em torno Bem, Detective criado como dois pasta separada odeia-o fora como básico e clique terminar. Quem era? Simplesmente não estava funcionando, Ministro. E agora temos apenas uma pasta sem nada, mas tudo o que temos que fazer. Muito simplesmente, vamos para esse diretório de sites da Web. Vou tirar o conteúdo do Mês do Haiti para um ginásio fora do curso básico. É uma maneira, por enquanto, Andi Vamos copiar tudo isso. Então, não há problema. E agora temos nosso arquivo de projeto antes do intervalo. Anjali negócio um. Para evitar confusão em nosso projeto. Pastas odeia-o fora do básico que é integrado. Adote Ana. Verá que todos os arquivos dela estão disponíveis. Você poderia dobrar se você vai arquivar apenas sobre. Abra-o lá em cima prosseguiu. Tana tem realce de sintaxe d. Então as coisas são codificadas por cores, basicamente o que isso significa agora, agora que muitas vezes estamos correndo com a parte alta A. Na próxima lição, podemos começar a olhar para alguns CSS 7. Trabalhando com os selecionadores e regras em em CSS: Então aqui estamos nós em Tana. Tendo migrado nosso projeto, estamos prontos para começar a trabalhar com alguns CSS básicos. Agora, a primeira coisa que queremos fazer a primeira coisa que eu quero fazer de qualquer maneira é, hum ter certeza de que você pode ver muito claramente o que está acontecendo aqui. Então vamos ter. Teoh aumentou ligeiramente o tamanho do nosso texto. Andi Inapt Ana, Você pode fazê-lo fora de controle realizada e, em seguida, pressionando D menos nas teclas mais, que é apenas à direita do zero k lá ou no NEPAD. Na verdade, Pat conhecido não funciona. São apenas aqueles que estão logo acima das teclas de letra. Sim, mais e menos vai levar. Então agora podemos ver claramente o seu texto. Então C S s, como mencionamos antes, é para adicionar informações de estilo. Então nós temos uma árvore sim maneiras de usá-lo. Basicamente, podemos ter folhas de estilo externas. Podemos criar uma folha de estilo dentro do documento usando os elementos de estilo, que é o que vamos fazer agora e, em seguida, podemos usar no estilo de linha. Então, primeiro vamos começar usando folha de estilo D que está realmente dentro do próprio elemento. E isso tem que ir dentro da cabeça no título geralmente brilhou porque Platão, em termos gerais, você colocaria título em direção ao topo da cabeça. E isso é ler mais sobre formatação. Então, aqui está o nosso estilo. Como usamos isso para fazer tudo isso dentro do corpo enquanto criamos regras? Agora, há uma série de identificação IRS que podemos usar métodos deles, referindo-se aos nossos elementos. Faz a maneira mais simples e simples maneira é realmente apenas digitar o nome dos elementos e, em seguida, criar são chaves muito encaracoladas. Então, como é que isso funciona? Bem, esses dois aparelhos de crédito, você vai encontrá-los à direita do pico. Aquelas duas chaves estavam muito peaky. Temos chaves quadradas também. Há colchetes. Não queremos colchetes. Queremos para o aparelho. Então mantenha a tecla Shift quando usar essas chaves para pegá-las. Se você não usou aqueles antes lá usado muito comumente em todos os tipos de programação, como JavaScript, C share pessoas supor etcetera, e CSS assim R p identificá-la aqui está nos dizendo que vamos estilizar cada instância, ambos para mijar elemento. Nós vamos dizer mais legal, eu vou definir para colorir também. Castanho. Digamos que temos uma série de palavras-chave para bacon mais fresco. Use também valores hexadecimais e valores RGB. Mas vamos usar uma palavra-chave por enquanto. Eu vou até um navegador e, na verdade, vamos para a nossa pasta do projeto lá no que é pré-visualizado em, um sim, como um terminal mais fácil Esperando. Você pode corrigir mostrar visualização, o que é útil seria neles bom o suficiente, Tana Fechar para página inicial. Ele apenas cria um novo tipo onde você pode clicar neles. Você pode ver como seu código está agitando. Então, quando ele foi feito por agora para que Putin novamente waas um show preview que está aqui em traz essa aba, e você também pode alterar o layout se você desejar para ele. Então, agora com uma pré-visualização é aparecer no Texas lá, qualquer coisa que você não vai usar muito você pode minimizar. Assim, seu espaço está sendo usado de forma mais eficaz, se desejar. Então aqui está a minha maneira preferida de trabalhar para codificar. Por enquanto, vou comprar mais espaço puxando isso à esquerda. Então, apenas arrastando por aí para se vestir para me agradar. Ok. Agora, por causa da resolução que estou usando para gravar, isso provavelmente não vai funcionar muito bem, mas geralmente é o que eu faria. O que eu vou fazer em vez disso é apenas tê-lo como uma segunda vez. Ok? Não, volta à página de índice dela aqui. Então dissemos um valor mais frio para toda a paz. E se você olhar para aqui, você verá que todos os parágrafos estão sendo sim, modificados estilisticamente por essa regra porque isso é um seletor de elementos. Usamos um seletor de elementos, então tipos de água de seletores vindo aqui também. Podemos usar seletores compostos. Podemos usar vários seletores e uma regra que podemos dizer dizer que queremos estilo todo ódio . Um ódio para Andi pessegueiro, bem como ódio para elementos de basicamente cada mês título. Queremos fazer isso a nós vamos dizer, a decoração de Jackson. Andi, nós estamos indo para subjacente todos eles apenas para o bem da experimentação disse para salvar isso para o dedo do pé afetado. E agora você verá que temos sob qualidades de aliança, títulos mudam sua frente se em diversão para a área da família Leviticus aérea. Responda. Se estiver tudo bem. Então, essas pequenas dicas de ferramenta eles são realmente úteis na Cidade de Controle como para salvar coisas que eu apenas atualizações são divertidas, também. Isso nos dará uma lista dos que estão disponíveis. É sensível ao contato. Só vai nos mostrar dicas de ferramentas relevantes com problemas em tempos para dizer isso aqui. Ok, se quisermos usar uma informação de espaçamento, em seguida, enfraquecer colocar em e eu sou um momento de preenchimento se 20 pixels PX que isso vai preencher todos os nossos títulos. Se você queria fazer isso, nós também podemos usá-los, identificar ouvidos. E eles mencionaram isso na lição anterior e até mesmo forneceu 90 i ds. Então temos esse Dave aqui embaixo, seu menu flutuante de ideias. Então, o que vamos fazer aqui? Bem, vamos pegá-lo usando as idéias. Um seletor. Então, se você estiver usando um seletor de ID, você coloca um caractere de hash em. Ele nos deu uma lista de todas as idéias que criamos. Então temos o menu flutuante abaixo, e é reconhecido na Forest Science fornecendo-nos com isso, que é legal, mas nós podemos apenas digitá-lo em nós mesmos também. Então menu flutuante onde você poderia clicar nele neste, então eu fornecer todas essas declarações de como queremos um estilo, este pedaço de informação, qualquer que seja o elemento que estamos mirando verdadeiro, o I D. Você só pode usar 90 uma vez no documento. Essa é a ideia de uma ideia. É único. Um pouco eu tenho que dizer para fazer. Vamos dar-lhe uma cor de fundo. Fred, você pode ver que nosso menu tem apenas fundo vermelho. Agora você também pode ficar mais chique. Poderíamos vir aqui e dizer, Silêncio menu flutuante que vai disputar imediatamente, o ativo que tem de flutuar Man Utd. E então podemos cavar colocando em um espaço e, em seguida, adicionando algo mais específico, como no espaço de lista ordenado L. A. E que vai falar alvo todos os itens da lista. Na verdade, estamos à procura de dois dados da tabela TDs. Então vai mudar isso. E neste caso, o que é uma mesa? Sim, papel da tabela na TV para dados da tabela, e isso vai encontrar a nossa tabela. Não precisamos mais da Heidi lá. Ou temos? Na verdade, talvez tenhamos. dados da tabela de função da tabela de menu flutuante encontrarão a div. Com isso, eu encontrar tabela, quaisquer tabelas dentro dele e as funções dentro dessas tabelas e, em seguida, quaisquer TDs de dados. Qualquer célula dentro dessas regras, o que na praticidade vai significar a rua porque eles estão fazendo e disse que seria nessa estrutura em. Então podemos fornecer qualquer tipo de informação de estilo que preferimos. Podemos dizer “borda um pixel”. Há uma abreviação aqui por valores de árvore. Um pixel, preto sólido. Salve isso. Cheque. Você vê que cada uma dessas células agora, como é que esta borda que tem um pixel de espessura. É um sólido A supostamente pontilhado ou tracejado nas costas. Você também pode dar-lhe um fundo mais frio, tolo usar valores hexadecimais como 44 ódio para ver como isso vai para tratar. Lá vai você. Certo, em torno deles hacks valor. Então precisamos fornecer seis dígitos para valores hexadecimais. Certo, então é assim que usamos o estilo básico. Dentro dos documentos, analisamos o uso de diferentes tipos de seletores, como o seletor de elemento direto. Você pode selecionar vários elementos na regra de bem, você pode usar I DS e novas classes, que ainda não pesquisamos, e você pode cavar mais fundo adicionando no final. Então nós identificamos nosso I D e, em seguida, mas naquela sala para a mesa dentro da tabela, procurando por papéis de tabela dentro que estamos procurando, fizemos isso nós mesmos. E isso recebe um especificamente para esses elementos de árvore. Esse é o básico, na verdade, de trabalhar com estilo. Nós também podemos ter o estilo externo em linha , e vamos dar uma olhada nesse tempo, então isso é o começo para esta lição. 8. Cursos e estilização e de mesa: já trabalhou com I DS em nossos elementos HTML. Então vamos aprender um pouco sobre as aulas agora, como é o caso das ideias, elas são muito úteis quando se trata de estilo. Então, aplicando informações de estilo a elementos específicos agora que se encaixam em uma determinada classe. Agora, a diferença entre uma idéia e as classes que um I D só pode reaplicar a um elemento em seu documento de e-mail odeia. Ele o destaca. classe exclusiva pode ser aplicada a quantos elementos quiser, então vamos tirar isso um pouco de volta. Vamos nos livrar desse estilo e foco que era apenas prática. Ok em foi despojado o corpo, então isso é apenas criar uma mesa. Como já fizemos. Agir em um faz algumas coisas para nós, que são bastante úteis. Ele adiciona automaticamente na tag de fechamento, o que economiza esse tempo. Então, basta se acostumar com isso quando você adicionar de fechamento pouco triangular olhando lateralmente, triangular olhando colchete e, em seguida, o colchete de fechamento aparece automaticamente. Então, nossa primeira função de tabela vai ser nosso cabeçalho, que significa que cada célula vai estar à frente célula de cabeçalho, que é th foram cabeçalho de tabela em vez de rolo de mesa, que é um won t regular em vez de Teddy, que é dados da tabela, eu devo dizer Então nós vamos fazer este banco de dados. Oh, digamos empregados ou algo assim. Então começa com o nome. A próxima coluna é talvez a idade, digamos , ocupação. É o suficiente por enquanto. Se você salvar isso e abrir sua pré-visualização, verá que isso é literalmente tudo o que temos. Nem está claro que estamos trabalhando com uma mesa porque não há fronteiras. Vamos consertar um pouco. Está bem? Então vamos adicionar uma segunda regra. E desta vez, cada linha que adicionamos explodir o papel de cabeçalho vai ser um funcionário. Então ele vai ter árvore t d elementos um para os nomes dizem, Richard, Richard, Segundo para a idade 28 e Professora de Ocupação. Está bem. E podemos entrar. E aquele outro apenas copiando e colando Jennifer 31. Não há necessidade de entrar e adicionar muito mais do que isso. Então lá temos uma tabela de ossos nuos, que uma sala de cabeçalho inserida. Como isolamos esse papel para que possamos estilizá-lo separadamente? Bem, é aqui que as aulas entram. Então, como adicionamos uma aula? Bem, vamos ter essa aula de papel. Dá-lhe uma dica de ferramenta. É classe CSS atribuído ao elemento, então classe é igual a aspas. Ele insere a segunda aspas automaticamente. E entre esses dois, vamos dar para a aula. Nomeie uma função superior. Em minúsculas. Sem espaços. Agora adicionamos o atributo à tag open e lembre-se de que os atributos são sempre adicionados à tag open. Tudo realmente é seguido o mesmo fluxo básico. Eu só vou ampliar um pouco aqui para tornar mais fácil para você ver o que está acontecendo. Agora. Todos os atributos seguem o mesmo formato básico. Você tem o nome do atributo em si. Então, qual é o atributo neste caso é classificado. Vai ser I D ou qualquer número de coisas. Então você tem que atribuí-la, que é o símbolo igual. As duas aspas em, em seguida, a função de valor superior neste caso? Sempre a mesma coisa. Então essa é a nossa aula agora. Enfraquecer o acesso a essa classe digitando um ponto Você se lembra que as ideias são acesso com um hash, então é um hash. Meu eu d. qualquer que seja o nome e então crie uma regra que bem, neste caso, estamos acessando uma linha superior de ponto de classe. Então, como vamos fazer o estilo? Ele terá, digamos, cooler de fundo. Isso é hifenizado. Andrea List usou uma palavra-chave vermelha e você verá que ele está realmente sombreado no fundo lá com esta cor vermelha. Grande mudança para mais frio para brancos. O valor hexadecimal para isso. Se você está se perguntando se tudo bem, Notre, isso está me irritando aqui é ponto m. Nossas fronteiras estão parecendo feias. Então, o que podemos fazer? ISM criou tabela Norval em. Vamos definir nossas fronteiras excessivamente vai dizer fronteira um pixel sólido Muito você salvou em que nos leva um passo mais perto e também irá colapsar o colapso fronteira. Quando você está digitando o nome de uma dessas Andi, talvez você esqueça exatamente como está terminado. Há um inapto de hóquei muito útil. Espaço de controle ANA irá trazer este pequeno menu para que você possa navegar para todas as opções em aqui estamos Borda colapso mesmo dá uma descrição, especifica se as bordas para um substantivo inter colapsou ou separados. Você também pode fazê-lo para as opções disponíveis. Então ele controlava o espaço de novo. E fácil de tratar. Possíveis opções colapsam, herdam ou separam colapsos. O que você quer que os dois pontos semi terminem a instrução. Lembre-se sempre de distinguir entre dois pontos que é Theus Signer em um semi dois-pontos, que é determinado. Er ok. Então você pode ver que em nossas fronteiras são muito mais limpas. Agora vamos abrir isso de novo. Agora também queremos que Teoh desmorone a rosa. Então vamos ou os dados. Então TD para dados de tabela sobre nós estamos indo para ela vai fazer você votar dois TDs e o th é ao mesmo tempo, porque eles querem apenas aplicar para barcos estavam indo para usar a mesma regra Ordem em pixel sólido preto Eu sou animal Diga colapso ordem novamente em vez de duas xícaras. Então, apanhaste-o? Verifica isso. Está bem, só um pouco tímido do quê? Estamos à procura de um momento. Então, correção Borger será sólido papel de tabela traseira. Certo, então talvez precisemos ser um pouco mais explícitos aqui, que significa específico e o quê? Nossos seletores. Então, se dissermos que sou, primeiro lugar, para colocar a em primeiro lugar, para colocar a mesa deles na sua TV e onde é que isso desmoronou? mesa deles na sua TV Por um segundo. Vamos adicionar um pouco de estofamento. Cristal tendo colocado à esquerda, vamos nos definir para cinco pixels. Direitos de Hodding. 56 meses. Ok, então você tem que resolver por que esta regra não está sendo aplicada aos nossos TDs. Aqui estão os dados da tabela. Vamos nos certificar de que estamos sendo o mais específicos possível. Então, vamos dizer Tabela, função de tabela, TD. Então, estamos cavando direto para baixo em nossos TD. Veja como isso funciona. Isso é apenas reaberto por alguma razão. E não foi refrescante. As mudanças país do explicar por que isso é. Sim, mas parece estar resolvido agora. colapso da ordem. Está bem, isso está a dar-nos a nossa pequena divisão. Agora você percebe que não está acontecendo com o que eu não deve ser muito difícil de consertar isso. Bem, basta fazer um ST Ng Th que é o que estamos fazendo aqui é procurar por tabelas que encontrem esta tabela. Se houver outros, também o encontraria. E então ele diz papéis finos dentro deles em define todas as funções e, em seguida, olhar para o TD. Então ele encontra todos os itens de dados da tabela. Mas nessa tabela sobre aplica estas regras a ele. Ele também não faz para o cabeçalho da tabela si mesmos. Th é. Então, se dissermos isso agora podemos ver que tudo está sendo bem formatado. E estamos isolando esse papel para a civilização especializada usando essa classe de liberdade condicional, que por sua vez está sendo afetada aqui agora para enfatizar o benefício de usar classes além identificação sobre a diferença entre eles. Isso é fazer uma duplicata dessa tabela para que você possa ver que agora temos duas linhas, uma em cada tabela com declasse atribuição fora da função superior. E se formos até nossos estilos, só vamos abordar isso uma vez. Criamos uma regra para a linha superior, que está sendo aplicada em ambos os casos. Então esse é o Dia. Esse é o ponto é que as classes se aplicarão a múltiplos fatos como muitos elementos que têm essa classe associada a eles na página, enquanto um I D só pode ser aplicado aqueles. Então isso é classes de trabalho em um pouco sobre o uso de seletores no estilo 9. Sheets de estilo externo: nesta lição levará um pouco de tempo para aprender sobre folhas de estilo externas, que são muito poderosas, como além de CSS em nosso arsenal de habilidades e conhecimento em nosso uso de CSS. Então aqui temos nosso índice que odeia CML Page, qual temos trabalhado nas palestras anteriores. A Andi. Você verá isso em todas as regras de D que criamos no CSS até agora, incluindo todas as declarações individuais com suas propriedades em seus valores. Todo este código CSS que aprenderam e aplicá-lo, foi criado no próprio documento html feno. Quando você faz isso, isso é chamado de folha de estilo interna. Então, em termos práticos, o que isso significa é, se você está colocando suas informações de estilo dentro dos elementos de estilo, então isso significa que você está colocando-o em uma página de e-mail de ódio. Portanto, é uma folha interna. Agora, se você está criando uma página, então tudo bem, porque ela precisa afetar uma página. Mas se você está criando um site inteiro, então você provavelmente quer ser capaz de duplicar todas essas informações de estilo em várias páginas Agora, vez de copiar e colar sobre o que você poderia fazer. Você pode copiar esses elementos de estilo e colá-los em cada indivíduo. Eu sou a página da ordem, por exemplo. Se você entrou no controle de pontos, ver muito arrogante, e eu vim aqui e apenas colocá-lo sob o título dentro do meu elemento de cabeça como antes . Isso funcionaria tanto para o índice quanto para o ódio. Ela páginas masculinas porque ambos têm suas folhas de estilo interno. Mas isso não é muito eficiente. Há uma maneira mais eficiente de fazer isso. E é assim que funciona. Você cria uma planilha externa, então vamos para a nossa pasta de projeto aqui em Tana no botão direito do mouse para criar uma nova pasta. Então esta é apenas uma sub-pasta de To Hate Team Out Basics Master pasta. Vou chamar-lhe estilos. Todas as letras minúsculas entraram. Veja, eu tenho uma nova pasta de estilos logo abaixo da minha pasta Imagens, mas não à vista do barco deles dentro dele. directório odeia-o fora do básico. Tudo bem, clique em estilos e criar um novo arquivo que vai ser o principal ponto CSS e tinha entrado criado assim lá. Eu tenho um ponto CSS principal enquanto, que está em branco. Mas este é o CSS cardos, empoeirado, folha de estilo externo, que vamos usar agora para afetar todas as páginas em nosso site. Então tudo o que temos que fazer é colocar essas regras e colá-lo aqui porque a maneira como escrevemos CSS e em folhas de estilo externas e em folhas de estilo da Internet, bem como em linha, que vai olhar para isso em outra lição é a mesma independentemente. E as regras têm a mesma estrutura, para que você possa copiar e colar entre uma e outra. Agora você vai notar que a formatação foi danificada um pouco em ação. É um hóquei muito útil para corrigir isso, basta segurar a mudança de controle e, em seguida, pressione F no teclado e na cidade alta e magicamente corrige a formatação. Então isso é muito legal. Controlar-nos para nos salvar. Venha para o índice. Agora, se você testar isso em seu navegador, vamos para nossa pasta Projeto. Estou dentro da pasta do meu projeto. Você obviamente o teria em algum lugar. E, aliás, você sabe, mesmo que você não tenha a cidade alta em seu sistema, você pode seguir essas lições. Mas contanto que você tenha a mesma estrutura. Então, uma pasta mestre, Hastings cinco índices básicos e tudo o que sua ordem odeia ele de cinco páginas será em que você tem que sub pastas, imagens e estilos. Suas folhas de estilo como o CSS de ponto principal que acabamos de criar estarão lá em suas imagens estarão dentro de imagens logicamente suficiente, então isso é clicar duas vezes no índice para abri-lo em nosso navegador. Agora você verá que a informação de estilo está sendo aplicada. E se clicarmos duas vezes sobre, você também veria que nenhuma informação sobre estorninho está sendo aplicada. Então, por que isso? Bem, é porque é porque nós voltamos para cima. Tana, não criamos Avaliado um link entre o estilo na página. Se você olhar para isso, não há nada dizendo, use essa folha de estilo. Não há um índice ou em cerca de, Felizmente, isso é muito fácil de corrigir. Apenas sob o título. Agora vamos entrar, tem que ser incitados à frente. Elemento. Essa é a regra. Nós vamos criar um link chamado Link, e ele vai ter atributos de árvore. A 1ª 1 é Ralph para a relação. Nós vamos definir isso para folha de estilo ou apenas dizer que a relação deste pensamento é uma folha de estilo. Ok, próximo vai ser texto texto, Ford Slash reavaliar e você tem essas opções pop-up, que também são úteis. Eu sou finalmente odeio ref, você sabe, número usando ódio treff para fornecer um u R l em nossa lição onde aprendemos sobre o uso de links estão usando hiperlinks, que foi a tag âncora. Bem, nós costumávamos odiar rascunho com o link tag também. Ódio árbitro igual a. Apenas tenha cuidado onde coloca seus iguais. Certifique-se de que o seu frio combina perfeitamente com o meu e depois feche-o. Primeiro de tudo, porque o link é uma tag de auto-terminação, você coloca a barra para a frente dentro dela. Não há tyke fechamento ter usado um par daqueles já em, é claro, registro apenas dizer principal, mas isso não iria espinha especificamente para gm a folha de estilo externo que estamos tentando usar porque é dieta dentro dele para a pasta Estilos. Então lembre-se de pegar o caminho exato. A primeira coisa que você precisa falar sobre o tipo é estilos barra na frente porque há apenas uma folha de estilo nessa pasta. Descobri que era o que queríamos e levou. Mas podemos mudá-lo. Toda a gente vai. Não precisamos, então está correto. Styles para frente barra Maine Isso é a SS. Então, agora há um link em. Se eu copiar isso sobre também sobre dot html e, em seguida, vamos para nossos navegadores em apenas atualizar, você vê que o link foi restabelecido e agora as informações de estilo estão sendo aplicadas. E isso também vai acontecer que a nossa página sobre. Embora o turismo muito conteúdo, você vai notar que o estilo dessas células tabulares foi alterado algo. Ok, então isso é folhas de estilo externo vai. 10. Estilos em linha: Até agora, analisamos folhas de estilo externas. Estrela da Internet. Ela é a forma final está em estilos de linha. Então, como usamos em estilos de linha? Em estilos de linha são aplicados diretamente a um elemento. Atributo Trudie Styler. Já trabalhamos com atributos antes, mas não com o estilo. Atributo. Portanto, estilo é igual a aspas nos valores entre aspas. Equipa habitual. Então, como é que vamos afectar a sua etiqueta H 1? Bem, o que podemos fazer é fornecer um estilo específico para ele no sentido de talvez modificar alguma forma. O tamanho da fonte. Talvez, eu poderia dizer, 20 AM Eu quero ver como fez atualizações em nossa sobre essa página html. Ok, então é depois de fazer aquele em particular que eu odeio. Um elemento enorme, se ele não fez, é todos para provar isso. Isso é criar outro ódio imediatamente abaixo de Hum. Chamá-lo segundo H um, e se nós atualizar a página, ver que você tem um segundo ensinar um que está apenas adotando o estilo habitual e dobrou-a. Então o estilo em linha tem uma espécie de substituiu as informações de tamanho da fonte para elemento ponto e fez um enorme porque dissemos que é um enorme 20 m m é uma referência para o tamanho de um caractere, basicamente, assim 20 m em oposição pixels. Você está usando apenas um sistema de medição diferente, então você pode usar P pixels extras ou usar MPM. Ok, então é assim que usamos em estilos de linha. Se você quiser usar vários, você pode apenas contra separados por ponto-e-vírgula, sempre terminar e com dois pontos e vírgula. Para cada declaração dentro do início, você sabe algumas informações de estilo que você está fornecendo carta ser verdadeira e externa e folha de estilo interno ou se ele está em linha e cada declaração tem a mesma forma. Você tem a propriedade do valor. Você tem os dois pontos separando a propriedade no valor e você tem um ponto semi dois-pontos terminando. Eu sempre quero parar o mesmo formato para que possamos entrar aqui e mudar o cooler bem e dizer sou para torná-lo laranja. Por que não voltar e cinco e agora temos um rumo laranja. Então, é a combinação desses métodos de árvore de usar nosso CSS que fará nosso trabalho, um, um, mais rico porque podemos criar as folhas iniciais externas para geralmente estilizar todas as nossas páginas folhas de estilo interno Democrata para fazer ajustes na estrutura geral dessa página específica do estilo geral ou estética dessa página específica. Se precisarmos fazer certas alterações de conjunto que não se aplicariam às páginas de ordem, e então podemos realmente entrar, cavar especificamente para cada elemento individual e fazer alterações se precisarmos. Mas a melhor abordagem é fazer tudo o que você pode externo. E então, se você não pode fazer isso externo, tente fazê-lo em uma folha interna em. Então, se você realmente tem que ser muito específico, extremamente específico, então você pode entrar e usar em linha. Então eu só usei essa preferência nessa ordem. Aliás, essa ordem mantém-se para eles. Ah, para a preferência que o navegador dará estilos dentados então em linha é considerado o mais importante. Para ter mais peso interno vem depois disso, e depois externo. Era como se estivesses a empilhá-los um em cima do outro. Começa no fundo, esse corpo tudo geralmente. Mas se você tem algo mais específico interno do que isso é e isso vai substituir externo e, no entanto, se você tem em linha que isso vai substituir interno. Esse é o fluxo geral. Qualquer pessoa do pé como ele funciona, Ok, então agora nós sabemos como usar o estilo interno, bem como usar o nosso como usar em estilo de linha bem como folhas de estilo interno e externo. 11. Introdução ao Javascript: Então, aprendemos alguns dos fundamentos reais de trabalhar com HTML e CSS. Assim, a terceira tecnologia e nossa tríade Web é JavaScript que começou a aprender algumas técnicas básicas com JavaScript. Então, passos de bebê primeiro. O que é JavaScript? Eu não posso assumir que você já trabalhou com uma linguagem de programação antes. Bem, as linguagens de programação usadas em termos muito simples para fornecer instruções ao seu computador para dizer ao computador o que fazer. Declaração por declaração, linha por linha instruções escritas em uma morte linguagem que um computador pode entender. Agora temos muitas línguas diferentes. Idiomas estruturados. Existem muito populares, como Job all C plus C sharp JavaScript acontece a ser a linguagem fora da Web, apenas os padrões, script ou linguagem de programação da Web. Todo mundo usa tudo isso, mas os desenvolvedores usaram JavaScript, e é parte da equipe de odeia são cinco padrão. Então, é uma língua importante para aprender felizmente, e não é todo aquele assassino duro. Então JavaScript é integrado em uma página HTML. Ele pode ser integrado de várias maneiras, como foi o caso com CSS. Você pode ter isso na cabeça. Você pode pensar externamente, e você pode até colocar trechos de código Java em atributos, o que é muito legal. Qual é a coisa mais básica que podemos fazer? Vamos abrir nossa janela de visualização novamente e ver o que criamos até agora, e isso é realmente justiça. Toque nesta mesa, não é? Informação tabular. Então aprendemos como fazer dieta, etc. Isso é uma reserva criativa. Nós vamos para o topo do nosso corpo aqui em um credível. Ok, rápido eu, a habilitação rápida Lá está. Agora vamos criar um evento on click. Você vê que há um monte destes em eventos disponíveis dentro da linguagem JavaScript , que pode ser usado com o seu são o nosso boletim. Então temos todos esses eventos diferentes. É trabalho apenas navegar nos menus de Trudy e clicar nos diferentes itens e ler as pequenas descrições que dá fogo. Isso significa que aciona ou inicia quando o elemento está certo. Clicado no contexto. Menu abre no menu Contexto Temos eventos para cada eventualidade aqui no contexto do nosso documento sob o nosso navegador, mas estamos procurando é no Click, que é provavelmente o evento mais comumente usado é igual a aspas, Provavelmente vendo um semelhante para Miller aqui, Fórmula aqui para o que estávamos fazendo com eles. O que são atributos? Mesmo formato. Você tem o identificador de atributos, que está no clique e evento para JavaScript e igual. E temos aspas para conter o ouro. Agora dentro de lá, podemos escrever alguns documentos de ponto de documento JavaScript é apenas basicamente em uma referência ao documento de e-mail de ódio que estava trabalhando agora Então podemos acessar qualquer coisa dentro disso, e podemos usar funções para acessar certos pais dos documentos. Então podemos dizer, por exemplo, documentos ponto recebe elementos pelo meu d ele realmente aparece lá em cima. Então, se você quiser evitar erros ortográficos, porque tem que ser caso para caso perfeito get elemento por I d aspas e necessário para quando o valor contido, certifique-se de uptown que não bagunçou quando você acidentalmente e você sabe que vamos apenas usar d o single, que você vai encontrar na chave comercial lá ou desculpe no sótão E apenas direita para o ponto-e-vírgula. Está bem. No clique. Reparando meu resfriado,acidentalmente apaguei uma das aspas no final aqui,o que combina com o início. Reparando meu resfriado, acidentalmente apaguei uma das aspas no final aqui, Então, para cada um que você abre, você precisa ter algo tão perto. É o mesmo com os singles para serem abertos e fechados? Então obter elemento por I d sobre o que eu d será. Dê isso. Direi que um encontro mais velho ainda não existe. Isso foi criado. Eu coloquei elementos de parágrafo a não tinha que ser necessariamente um parágrafo, mas isso é o que vamos usar elementos de parágrafo. Bem, digamos que a data M aparece aqui quando de acima de Putin é rápido. Ok, nada conectando este frio, no entanto, a este elemento ainda porque as idéias do titular da data não foram aplicadas a nada. Assim que o fornecimento vai dizer, hey D como um atributo é igual a datas mais ousadas. Então agora estamos conectando este código a este elemento. É verdade que eu d neste sistema frio escuro é, ah, ah, típicas fora de linguagem orientada a objetos. Então você acessando propriedades ou funções de um objeto. Então você algo que é algo que é algo como pontos de bicicleta, roda ponto pneu. Você sabe, você está quebrando tudo, cavando mais em coisas. Então documento olha para todo o documento Obter em e meu D é uma função que fornecemos com um valor i d. Então ele procura através de todos os elementos achados atolados com que eu d. e então nós conformamos outras funções. Então vamos dizer dot inner ht e help Now entrevista HTML é uma propriedade que podemos acessar sobre os elementos que acabamos de identificar. Verdade, é identificar. Então ele escolheu que possuía e eu entraria em Odiar CML Estamos dizendo, vamos olhar dentro do elemento titular da data, que é o seu pitak e o que está dentro dele. Bem, temos essa data aparece aqui no livro do barco. Ele é clicado será chamado Recuperar esse HTML mesmo que tivesse etiquetas de ordem e coisas dentro dele, ele iria receber tudo, não apenas o texto, e não estamos olhando para recuperá-lo. Estamos à procura de mudá-lo. Então, vamos dizer igual a não Como obtemos a data em que temos que obter um novo objeto de dados assim usado a nova palavra-chave e maiúsculas de acesso a esse objeto 80 e em. Precisas de rezar? Fornecer esses dois e parênteses? Ok, não precisamos colocar os valores dentro desses parênteses porque estamos apenas criando um objeto de data padrão. Javascript sabe o que fazer, então vamos até aqui. E se tudo foi escrito, corretamente, corretamente, clicou em um botão que se sente nas datas. Datas inteiras, incluindo o dia, o mês e a data real, a hora em que tudo está lá. Podemos subdividir que um acesso certas partes da informação sobre fazer todos os tipos de coisas . Mas essa é a coisa mais básica que você pode fazer com JavaScript. E, no entanto, é bastante poderoso. Então, bem ali, apenas um forro frio. Olha o quanto aprendemos. Aprendemos a trabalhar com eventos, então os eventos são usados como atributos dentro de elementos especificamente, por exemplo, você pode usá-lo em um evento clique, mas em um livro, que é o que acabamos de fazer e então você faria entre aspas. Mas você pode colocar em instruções para JavaScript para o seu código de script de trabalho. Nós realmente devemos terminar com um semi dois-pontos no final lá, então nós vamos, e assim documento acessa todo o documento. Gettleman obter elemento por idéias, uma de uma série de funções, mas esta nos permite acessar um elemento especificamente por D i D. Então, procuramos que i d Pesquisa é verdadeira. Ele descobre que i e. que i d está associado a esta tag parágrafo. E, em seguida, temos a propriedade HTML interno ponto, que está procurando o HTML. Isso é o que dentro desse elemento, que é isso, e ele apenas muda. Isso é igual a fontes. Esqueça isso. Basicamente mudanças para isso cria uma nova data objetos e que alimenta até data aqui. É por isso que o conteúdo da tag P que ou que PM o parágrafo é alterado quando ele jogou um botão em gatilhos clique. Você vai notar que cada vez que fazemos isso está gerando e novas datas para que ele possa ver o segundo esta mudando. Ok, então isso é muito rápido. Noções básicas de JavaScript na próxima estimativa loca criando funções definidas pelo usuário que novamente se baseia no poder. O poder bruto do Javascript como linguagem de programação para nossos sites são APS em nossos jogos , que, todos os quais podem ser criados com HTML cinco 12. Funções para o usuário: nesta lição, vamos expandir o que aprendemos no anterior criando nossas próprias funções e seguida, acionando-as dentro de nosso documento HTML. Então, antes de fazermos isso, e eu vou pedir-lhes apenas para usar, ah, hóquei que já tocamos antes, mantenha a mudança controlada e, em seguida, aperte F no teclado, e isso vai para todo o formato automático, os documentos apenas torná-lo um pouco mais fácil de ler, porque enquanto nós, como desenvolvedores, nos esforçamos para manter nosso código agradável e limpo e bem recuado , ele pode, de vez em quando, começar a ficar um pouco confuso ao redor do edifício. E quando não inunda acordo na página ou um monte de tags, exceto por um monte de conteúdo. Eso mudança de controle f inapt ana é apenas esta ferramenta milagrosa maravilhosa que basicamente corrige isso para você. Não, Como usamos funções? Bem, na verdade já usamos funções. Acredite ou não, os pré-definidos recebem elemento por ideias, função pré-definida e o que é uma função em sua forma mais básica. Bem, em sua forma mais básica, você pode pensar em uma função como um bloco de frio que podemos chamar quando quisermos em nosso casaco na execução de nossa página. Então é um bloco de código que agrupámos juntos. Deixe-me dizer que este bloco específico de frio é reutilizável em útil. Então vamos dar um nome quando ligarmos. Esse nome vai disparar. Vai fazer as coisas agora. Funções mais complexas também podem aceitar informações em informações de retorno para que você possa alimentar informações neles como um algoritmo, e ele pode cuspir e novos valores. Nós não vamos fazer isso ainda. Nós vamos apenas criar, hte e-mail básico ou funções básicas. Então vamos fazer basicamente algo muito parecido. Na verdade, o mesmo foi o que fizemos na lição anterior. Mas vamos fazer isso usando funções, que é um passo adiante porque significa que é reutilizável em muitos lugares diferentes. Podemos chamá-lo quando quisermos. Então, para fornecer funções para escrever funções, precisamos adicionar um elemento de script assim como o elemento de estilo. Podemos colocar regras CSS dentro disso. Podemos colocar funções JavaScript dentro do script para baixo. Não vai dizer que função é palavra-chave para criar em sua função. Então função em vamos chamá-lo mostrar data mostrar estados atuais talvez casos minuciosos no início e, em seguida, química a partir de então. Então essa é a convenção de nomes. Esse roteiro de trabalho geralmente segue aquela vara esperta. Então a primeira palavra, basicamente no nome que você deixa a letra inicial dessa palavra minúscula com Andy começando um cabeçalho inicial de cada palavra subseqüente no grupo de palavras irá o caso Oprah e nós não deixamos nenhum espaço entre eles. Então é basicamente uma grande palavra amalgamada é o que você recebe. Então mostre a data. Agora escolhemos este nome. Claro que é arbitrário, e pode ser tão facilmente, desde que escrevamos o frio de conexão corretamente, ele funcionaria. Mas não seria muito legível. Por isso, queremos tornar os nossos nomes arbitrários legíveis, e seguimos a convenção química porque isso ajuda com o fator de legibilidade. Ok, você vai notar que eu coloquei esses dois parênteses, que estão em negação e zero teclas na parte superior do seu teclado. Basta segurar shift para usá-los, e nós temos nossos colchetes ou chaves, que estão à direita do pico em nosso teclado, e nós abrimos e fechá-los também. Agora dissemos que uma função é uma coleção basicamente fora de frio, como um bloco de código e várias linhas que são executadas quando chamamos essa função. Mas todas essas linhas, todas as declarações que são chamadas de declaração. Cada linha é uma declaração, e todas essas declarações entram na disfunção aqui entre essas duas chaves. Se estivéssemos fornecendo a função, que são quaisquer argumentos do que esses argumentos e seria recuperado usando variáveis dentro dos parênteses agora não vamos entrar em nada tão pesado ainda porque precisamos ficar confortáveis com o mais familiar, o mais básico. Então isso é apenas eu sou acionado essa afirmação novamente. Então dissemos Documento é usado para recuperar o documento real estavam trabalhando agora para que possamos acessar qualquer coisa a partir daqui em nossa página, Obter elementos por I D. É apenas uma função útil é fornecida para nos ajudar a encontrar Eu sou elementos na página usando um ea idéia ainda está lá titular data da última lição. Então vamos usar isso de novo. Pontos hifenizados. HTML interno lembre-se, que é uma propriedade especial. Ele acessa o conteúdo desse elemento, que é dis aqui, realmente é igual. Então estamos alterando-o para uma nova instância dos objetos de data, que é um objeto que se refere ao dilacerado atual. Então, toda vez que clicarmos no nosso botão, vamos desencadear disfunção com um gatilho. No entanto, você acha que sobre os códigos lá destes para a definição da função que criamos são ou nós fornecemos nossa função de palavra-chave, que diz ao computador que esta é uma nova função que estamos criando nós mesmos. Isso é o que a palavra-chave de função significa. Colocará isso em maiúsculas se não aceitasse. Você pode ver porque, como já mencionamos antes, para reiterar, porque é um ponto importante. JavaScript diferencia maiúsculas de minús Então, a maiúscula f não é a mesma que a letra minúscula F. Então, Laura caso F está ficando azul, que significa que está reconhecendo agora como um teclado. Então função, em seguida, nós fornecemos são nome arbitrário, que é agora o identificador para disfunção Mostrar data. Usamos química minúscula s sobre o caso D, e se houvesse mais e palavras Dan m, eles seguiriam o mesmo padrão. Agora podemos entrar e dizer mostrar dados atuais para fazer realmente específico e novamente a mesma convenção química. Então deixamos assim. Mostrar a data atual. Por que não se lembra de manter o nome descritivo? Deve ser quase como um verbo. Então mostrar datas atuais é verbo informar, não é? É uma ação e algo assim. Ele descreve o que a função faz enquanto seu nome deve fazer isso porque é mais descritivo é mais legível. Se você voltar a um projeto dois meses depois, você ainda será capaz de entender o que as funções funcionam. E então temos nosso código aqui embaixo, que está fornecendo a nova data, também. Eu sou apenas entrar no meu eu d função na Internet e ódio em HTML. Então é o que trocá-lo com objeto de data. O conteúdo do que isso retorna. Mas o clique da dica está em branco. É que não foi fornecido com valor. Então, o que fazemos? Bem, nós fornecemos o identificador para a disfunção, que é o que é essa coleção arbitrária de caracteres que fornecemos para identificar a disfunção, que é mostrar estado atual para digitar que fora personagem para personagem. Perfeito show data atual com as fantasias. Então, quando essa testemunha for acionar a data atual, que aparece, ela deve executar essa linha de código. Então isso é testado em que funciona. Então nós acabamos de criar nossa primeira função definida pelo usuário. Parabéns. 13. Variáveis: Então nós já aprendemos um pouco muito rapidamente sobre como trabalhar com JavaScript, acessar o documento através disso e usando funções para acessar e manipular HTML dentro desse documento dentro de certos elementos que podemos identificar idéias verdadeiras, por exemplo, e até trabalhou com o conceito de objetos orientados a objetos, você sabe, acessando propriedades dentro de objetos ou objetos dentro de objetos e propriedades dentro deles. Conhece o conceito de borracha de peddle duto de bicicleta no pedal, etc. Dr. Cooler. Então é isso que essa lógica doc é. Sua escavação de um objeto grande em objetos menores terminaria e até mesmo propriedades desses objetos e você pode alterá-los, recuperou-os. Então esse é o nosso show. Função de data atual irá mantê-los. Vou criar uma nova função. Então vamos lutar contra uma função para imprimir. Ok. E isso vai nos ajudar a entender por que temos que fornecer esses dois parênteses no início. Você tem essa abertura em revelar um em seu achado no nove nas teclas zero na parte superior do seu teclado? Basta segurar o turno para usá-los. Bem, esta função precisa de valores para calcular o que significa que eles precisam ser fornecidos para que ele precisa ter algo que pode representar esses valores dentro da função, porque esses valores seriam diferentes cada vez que é usado, o usuário decidirá quais serão esses valores. Então precisamos ter algum tipo de símbolo, enquanto a variável, enquanto a variável, basicamente é que ela é um símbolo, ela representa alguma forma de dados, então ela os armazena de uma forma e, em duh, é abstrata como álgebra. Semelhante. Então vamos dizer valor um no valor para Então nós temos valor um no valor para e nós vamos adicioná-los um ao outro. Então, vamos dizer árvore de valor de fogo é igual ao valor um mais valor para então não estamos criando uma nova variável chamada Árvore de Valor, modo que agora existe porque nós criamos com esta palavra-chave vier. Não precisamos usar a palavra-chave Vairo Pierre, é uma exceção. Só sabe que estamos criando variáveis por causa do contexto. Aqui em baixo, você tem que dizer explicitamente, mas você pode fazer palavra-chave. Vira Vira árvore valor é igual ao valor um de nós valor para saber o que será isso? Bem, será a soma total de ambos os valores. Nós não sabemos qual o valor exato, qual será porque isso é abstraído depende dos valores que são fornecidos, não é? Então isso é usar o mesmo resfriado básico que usamos antes. Comentários de I D. E é para namorar Holder, não é? Isso é o I D. Eu vou acessar a Inter Head, ela masculina igual a esta vez, nós vamos definir uma árvore mais profunda para valor. Então, o que quer que esses dois valores igualem, vai ecoar isso. E agora, com o nosso evento on click, em vez de acionar a função show date atual foi, eles irão acionar t adicionar a função handprint que acabamos de criar e precisamos fornecer a Value foi primeiro sobre um valor para o valor Um número, então vamos dizer quatro e então para o valor para talvez digamos oito. Então, se isso está funcionando, devemos ver 12 aparecer, então isso é salvo no Refresh F cinco. Ou atualizar sua visualização e, em seguida, clique em 12 aparece Então, criamos com sucesso variáveis de árvore . Nós os adicionamos para fazer com que ela crie um novo valor para a nossa terceira variável e, em seguida, temos ecoado isso para a tela. Então, esse é o uso básico de variáveis com a Flórida ainda mais, é claro, em vídeos subsequentes. 14. Operadores de afa Arithmetic: na lição anterior. Aprendendo sobre baseado a função básica e o uso de variáveis fomos expostos a algo chamado um operador aritmético, que símbolo mais deslocado nele foi usado para adicionar valores juntos. Vamos aprender sobre o odor, nossos operadores médicos, para que possamos usar o plus, claro, sim, sim, mas eu não vou fazer cópias da disfunção e vou dizer, Subtrair desta vez. Subtrair na frente para subtrair valores usamos T menos chave, que é previsível o suficiente, claro. E se nós fomos até aqui agora e chamou a função de subtrair em vez da função de anúncio e, em seguida, ir até aqui, atualizar Página cinco Quick vai subtrair, e isso nos dá menos quatro. Só faz sentido. O que é quatro menos oito seria menos quatro, então vamos continuar e fazer outra cópia em Saiba mais sobre. Outro operador aritmético neste é de multiplicar, e isso é menos previsível ou óbvio. É símbolo D Asterix, então adicione em um astral lá até agora, valor, então árvore de valor é igual ao valor, um multiplicado pelo valor para bem, operações de multiplicação são realizadas com este e gástrico caráter para provar isso. Vamos mudar os nomes porque não podemos ter duas funções com o mesmo nome. Chamamos isso de multiplicação de impressões, e se você vier aqui, bem, temos que chamá-lo primeiro e multiplicar impressões digitais. Stubble clique e vamos multiplicar em francês refere-se a ele. Agora salve a página de índice, atualize e clique em 32. Você pode confirmar a massa lá agora, então aquelas árvores de ar até agora nós olhamos para uma árvore. Operadores aritméticos. Esse é o termo de novo. repetição é o motor da atenção que eu sou. Estamos duplicando a função errada. Ok, então se você pode multiplicá-lo, é lógico que você deve ser capaz de dividir. Então vamos dizer Dividir e príncipe corpo um em valor para novamente todas as mesmas coisas. Alteração aceitável D Operador, Dis operador vai ser um caractere barra barra, acredite ou não, acredite ou não, representa divisão em quase todas as linguagens de programação, como faz o gástrico representar multiplicação e quase todas as linguagens de programação. Então, apenas estes são símbolos consistentes er bastante constante através da maioria, se não todos, linguagens de programação. Ok, então temos anúncios atraem, multiplicam-se na divisão. Então isto deve ser dividido para testar o nosso operador aritmético final Divide e Prince. Todo mundo nos dá que o resultado da operação da divisão, sua ordem, aqueles que podemos usar que são comuns também. Como ele, podemos dizer incremento na frente incremento na impressão, em para deficientes. Basta pegar um valor valor um e então vamos dizer, uh, valor um possível. Eu sou apenas atribuir valor um para o HTML interno no post close vai apenas tomar esse valor em incremental por um, então vamos chamá-lo aqui. Eu fornecê-lo com um valor inicial como incremento na impressão em. Vamos dar-lhe o valor de dois. Então, o que? Devemos ver sua árvore se ele está trabalhando em B. Então, mais a combinação desses dois caracteres que é um louco, nosso operador médico, e é um incremental apenas adiciona um em cima do valor em você provavelmente poderia prever o que o convés REM Int operador atlético será apenas trocado para vantagens para você adivinhou duas desvantagens. Então, se nós apenas desencadear ponto agora em vez de sacramentos e imprimir, nós ainda fornecemos com dois do que você poderia ir bem para menos um. Aqui está um. Então lá nós olhamos para todos os operadores aritméticos importantes ou mais importantes que temos plus, que acrescenta valores. Juntos temos menos que subtrai o segundo corpo. Desde o primeiro, temos multiplicar, que se aplica a valores e dá a divisão de resultados, que divide, desvaloriza e dá os resultados e mais que incrementa por um em menos menos, que Decker de menta. Portanto, há os seis operadores aritméticos mais comuns, mais importantes em javascript que grande. 15. Tipo de dados dinâmicos: nesta lição, vamos começar a olhar mais de perto os tipos de dados em JavaScript. Então, para fazer isso irá criar uma nova página clique com o botão direito do mouse no projeto HTML cinco básico ou equivalente em seu sistema. Um novo arquivo. Vou chamar-lhe simplesmente tipos de dados. Palavra do álbum, ponto minúsculo html fechar o índice por enquanto. Então isso é reconstruir nossa concha. E uma vez, provavelmente ainda não o usamos. É doc type tag e especifica os padrões HTML devem ser usados para este documento. Você pode apenas inserir ódio, sabe? Ok, para uma equipe de cinco, geralmente tudo bem. Ei, título de cabeça html. Isso é um tipo de dados de aprendizagem. E, claro, nenhuma página estaria completa sem um corpo agora dentro do corpo. Vou criar um parágrafo. Vou dar esse parágrafo sobre atributos. Vai ser uma idéia atributos I d. Um sinal aspas para conter o valor, e ele vai ser chamado Mostrar porque é um shell. Não há nada nele ainda. Vou colocar um script no próprio corpo. Agora é uma boa prática, geralmente, manter nossas funções no elemento de script. Vários elementos ignorados podem ser usados em uma página. É bom praticar ter um roteiro dentro da cabeça, como já fizemos antes. Keeper funciona lá porque podemos chamar as funções em qualquer ponto na página. Mas se você está colocando script e em que você quer executar diretamente na página sem ação ser necessária por parte do usuário, então a melhor maneira de fazer o pai é realmente colocar um script elementos na página. No entanto, é que você deseja executar esse código. Então, primeiro, uma vez que nosso corpo está sendo criado, a cratera p elementos, mas está vazia. Tem este eu d. Você pode colocar algo como um espaço reservado como este. Isto é uma concha porque isso vai desaparecer assim que substituirmos. Sabe, odeio ela melas que já fizemos antes. Aqui em baixo é onde vamos começar a trabalhar quais nossos, uh, uh, tipos de dados Então nós já usamos tipos de dados? Na verdade, temos, embora talvez você não estivesse ciente disso. Então, quais são os tipos de dados que usaremos mais comumente? Trabalhamos com números, comentamos isso para não escrever erros. Trabalhamos com números, Comentar é exatamente onde fornecemos instruções que são legíveis por programadores como nós. Compartilhamos nosso resfriado. Alguém que possa ler os comentários. Não é vermelho pelo computador para colocar em um comentário. Basta começar com dois chicotadas Fords e ele vai ficar verde. Isso é um comentário. É legível humano, não legível por computador. Então eu vou dizer tipos de dados, tipos dados comuns. Então temos números. O número pode ser mais específico. Isso poderia ser um inteiro, e poderia ser flutuadores . Um inteiro é um número inteiro como um ou 52 ou 76 R menos dois ou menos 78. Pode ser um lembrete positivo ou negativo, e é um número inteiro. Flutuadores têm valores de ponto. Então à tona seria algo como 1.4492 ou 17.64 árvore ou menos 42.759 Essa é a diferença entre inteiros e carros alegóricos. As imagens estão inteiras. Números podem ser positivos ou negativos flutuam nossos números. Somos pontos decimais, então são mais exatos, mais precisos. Nós o usamos para cálculos precisos. Como você viu, os números podem ser atribuídos muito facilmente usando nossas variáveis. Eu simplesmente exibo criando uma variável. Seja lá o que você quiser chamá-lo é igual a se quatro em. JavaScript conhece o verdadeiro contexto que estamos usando apenas não como um caractere, mas como um valor numérico. Então, se quiséssemos fornecer isso como um valor de caractere, então não o número quatro, mas apenas um personagem para como em uma frase eu sou. Então teríamos que colocar aspas em torno dele. Em que ponto, sim, JavaScript, você o veria como uma string como uma string? Então, o que é uma corda? É uma cadeia de texto, basicamente uma cadeia de caracteres. Então não importa se temos números em nosso texto. Se é uma string, então eu posso dizer que o número agora é igual a quatro. Esse primeiro valor é numérico, para que pudéssemos realizar operações matemáticas nele e em conjunto com outros valores numéricos , etc. Isto é uma força. Não é muito tempo, já não está na América. Poderíamos contaminá-lo com outras cordas. Tive que fazer frases, parágrafos e coisas assim. Então, mesmo que nós estamos vendo para em ambos os casos, as aspas dizem que eu sou o JavaScript de cauda, basicamente que estavam usando isso como um tipo de dados específico em. Entende dessa forma. O fato de que estamos usando a mesma variável nós criamos uma variável aqui e demos um valor dis numérico. Denver Atribuindo um valor de string que é realmente OK em JavaScript e muitas linguagens, você tem que especificar um tipo de dados para uma variável. Você diria algo assim. Diga o número do fogo. Isso não será incomodado em JavaScript, mas isso é o que você estava fazendo. Muitas línguas. Número int para inteiro é igual a cinco. E então essa variável teria que ser um inteiro. Se você disse flutua 10 eu teria que ser quatro jogando 567 ou algo assim. Se dissesse que força é igual a qualquer coisa, eu diria que uma força não importa que lhe chamemos um número. Este identificador é apenas uma coleção arbitrária de caracteres. Fazemo-lo significativo para nós mesmos para que possamos lê-lo para entender o que significa. Colocando um computador. Não importa qual coleção de caracteres você usa aqui, e não se refere ao tipo de dados do computador. É que precisa ser significativo para nos lembrarmos do que estamos escrevendo. Então, muitas linguagens exigirão que sejamos específicos e explícitos em nossa digitação, a maneira como aplicamos tipos de dados ou variáveis e nos ater a isso. JavaScript não é tão rigoroso, por isso tem algo chamado tipo dinâmico. Ele pode dinamicamente alterado o tipo de uma variável à vontade, para que possamos alterar a variável de reuso a qualquer momento, o que é útil. Você pode usar a mesma variável para todos os tipos de coisas diferentes e práticas. Você pode não fazer isso tanto, mas saiba que pode. É possível. Estou trabalhando com cordas, que é uma coleção de personagens. Nós no sconce embrulhamos os personagens. Quatro mortes soam entre aspas, então tudo entre o de Quotation Max é um estrito ou está incluído na string. É assim que funciona, Ok, para provar, é sempre bom ter uma prova que virá aqui e no final do nosso roteiro terá algum tipo de alinhado ecoado em nossas prateleiras. Documentos era um documento ou um elemento shell era um documento não obter elemento i d elemento por i d, que já usamos antes. É uma função muito comum e apenas assisti aquela cidade. Não é acidentalmente estragar seu resfriado. Eu quero dizer, Ah mostrar que é chá bitey que nós fornecemos para disputa e isso é HTML interno número legal também , que é a variável que nós criamos anteriormente e atribuído a string para. Então você criou não como um número porque assinamos um valor numérico. Mas uma vez que atribuímos um valor de string em linha reta um JavaScript redefinido dinamicamente para ser agora uma variável de string para que o tipo possa ser alterado dinamicamente. Vamos ver se funcionou. E aconteceu, porque você pode ver que ele está preenchendo esse parágrafo, que tem esse corpo inicial. Olha, este é um show para tudo entre a citação. Max está incluído. Indústria Ok, então tipo dinâmico é provavelmente o conceito mais importante que você quer tirar deste vídeo também com números, e temos tipos diferentes, como inteiros e flutuadores. E mesmo que não estejamos especificando isso no frio, apenas entenda que embaixo do capô, JavaScript está convertendo de um tipo para outro tipo. Para nós, está usando isso feito. Eu sou soldados do sistema de digitação dinâmica, sempre um tipo de dados associado com o conteúdo sobre variável variável. Sempre teremos um tipo em um ponto ou outro, mas ele muda o tipo dependendo do tipo de dados que fornecemos. Então, por exemplo, se eu dissesse agora número é igual a data do ponto do documento ou apenas duas datas até mesmo você data, eu deveria dizer, uh, ele mudou seu tipo para data objeto, que é um tipo de dados diferente novamente em você verá que ele realmente ecoa isso agora até à data. Então data em si é um tipo de dados porque é seu próprio objeto. Mudei o tipo de número para uma data. Por exemplo, poderíamos dizer número ponto e você pode acessar. Então, ah, momento de milho. É para aquele que trabalha? Mas vamos deixar isso para a lição mais tarde porque provavelmente estamos ficando um pouco avançados demais para isso. Um, este tutorial. Eu não quero inundar você com muita informação, mas apenas entenda que basicamente, nós temos esses tipos diferentes. Então, outro tipo de dados é booleano, que pode ser verdadeiro ou falso, que é um tipo de dados P útil para ser capaz de usar para um monte de situações diferentes. Esses são alguns dos objetos mais comuns também. Agora podemos criar nossos próprios objetos, que é realmente puro, e dar-lhes propriedades e métodos, que é basicamente, você sabe, variáveis e funções dentro do objeto. Então idade igual a 24 idade seria propriedade do tipo no número ou int para onda inteira Uh, sim, então o tipo de objeto seria seguro. Pessoa e propriedade seria idade e você poderia projetá-lo em valor América e você poderia ter uma função como, você sabe, andar pessoa ponto andar sobre. Uh, você poderia fornecer que importava 10 com um valor para a distância de andar. Esse é o conceito de objetos orientados a objetos com propriedades e funções ou subobjetos . E é por isso que usamos a sintaxe de pontos dele o tempo todo. O objeto do documento. Estamos acessando um objeto Notre de dentro que get elemento play i d ponto inter cheiro ódio, que é uma propriedade dental que igual a Então isso é suficiente sobre os conceitos básicos de tipos de dados na próxima lição vai pegar a partir daí e olhar para alguns ligeiramente coisasmais avançadas coisas 16. Tipo de dados: corças: Ok. Então, continuando de uma lição anterior sobre tipos de dados aqui, vamos dar uma olhada em um tipo de dados muito importante, que é pontos fortes. Então certifique-se de que você tem tipos de dados de X. Ei, html aberto em. Vamos apagar o conteúdo do nosso script aqui. Excepto aquele último documento. Sair. Mas eu fiz isso em seu e-mail apressado igual, nós vamos deixar isso lá. Então 0.1, coloque os comentários. Cordas podem vir, Capitão Ated. O que significa contaminar cordas significa combiná-las. Ok, então como vamos fazer isso? Fire String 1 é igual ao meu nome. Isso é um fogo de força String dois igual a não há espaços em nenhum lugar pelo nome é igual a George ou algo assim. Lembre-se sempre de terminar cada declaração ou cada instrução com um semi dois-pontos e sempre ter este operador de atribuição, que é o símbolo igual basicamente dizendo que é variável criada. Com isso eu d ou sim, seu manipulador vai ter este valor semi dois-pontos termina essa declaração para que ele termine . Agora temos essas variáveis de árvore em. Podemos imprimir um deles, se quiser. Como a corda um. Eu vou para a nossa pré-visualização de tipos de dados, e meu nome está sendo impresso, que é o conteúdo do 1º 1 E se nós formos e adicionar algumas vantagens? String um mais string para. Assim eu coloco no espaço apenas para torná-lo legível, e você não precisa colocar os espaços entre eles. Se não quiser, pode deixar assim, mas não acho que seja legível. Controles de preferência pessoal Shift F vai fora de formato seu casaco de qualquer maneira, então isso é o que eu acabei de fazer. Andi Aksuna concorda que Maio tinha inserido no espaço. Confira você verá Meu nome é George agora não há espaços de velocidade lá porque o espaço, um espaço em branco no texto, é em si considerado um personagem. Se você não fornecer esse caractere nos dados de string, então ele não irá inseri-lo para você. Então não temos esses espaços aqui e aqui porque eles não são estranhos. Você vai ver que não temos nenhum espaço depois do meu nome você não tem um espaço depois é que eu não vou colocá-los no que vamos fazer É uma string um mais aspas espaço. Então nós estamos adicionando-os na cadeia que estamos criando para a equipe interna Hatch até nós mesmos para esses espaços. E se você salvou na pré-visualização marcada novamente, Casita realmente inseriu dois espaços. Meu nome é George, e podemos até ser muito arrumados e entrar em uma parada completa para o show é George. Temos que fechar isso, é claro, Capitão. Então este símbolo mais é e ele pode ser usado para adicionar números juntos. Então, esse é um operador aromático nesse contexto? Mas no contexto de trabalhar com cordas e muda para ser uma mistura. Ater coordena cadeias de texto para colocá-la em um. E lá temos. Ok, agora, isso é basicamente o básico de trabalhar com cordas. Então, obrigado por assistir 17. 16 objetos no JavaScript: Ok, então nós analisamos vários tipos de dados até agora, incluindo como podemos trabalhar com strings de várias maneiras, trabalhando com dados numéricos e outros dados. Digite em estêncil que poderia ser bastante útil está ligado. Muito poderoso, devo dizer, é o objeto. Então, como trabalhamos com objetos? Ok, nós vamos usar nossos tipos de dados que o arquivo HTML que estávamos usando anteriormente em aqui vamos criar um novo objeto, vai ver o usuário fogo igual. Então, se eu tivesse o mesmo processo básico e criá-lo e, então, é aqui que ele muda. O que usamos é agora criamos as chaves M que usamos quando estamos criando declarações de função . E então nós fornecemos propriedades que é pais valor nome. Então criamos nome para algo e damos a ele um valor que é uma propriedade. Então vamos dizer que o usuário tem essas propriedades, então o usuário ponto é um nome e ele usou dois pontos como e CSS para atribuir um valor. Agora nome vai ser uma coleção de caracteres, caracteres ou parágrafos de texto. Sentenças é exatamente etcetera são armazenados em strings e strings eo valor para strings que indicam que sem o seu duplo são aspas simples. JavaScript não discrimina entre esses dois, então podemos ter Aitor. Eu só prefiro usar dobrado. E não terminamos com um semi-cólon. Neste caso, em uma chamá-lo Jack, dizer que nosso usuário é chamado Jack. Na verdade, vai dizer o primeiro nome maiúsculo e primeiro nome é Jack. Sobrenome Jones idade. Este é um valor americano. Então, se colocarmos em cordas que são 27 que não estariam na América Value alimentando nele e ele iria vê-lo como uma corda. E assim, só para entender a diferença que examinamos antes vai dizer 35. Então isso é o valor da América. Sem as aspas gênero nós forneceremos. Isso é uma ocupação masculina. E vamos definir a ocupação para ser, sim, a corda também. O que significa que usaremos citações e diremos: Sim, Sim, Capitão. Ok. E no final disso, vamos colocar um semi cólon logo após aquela cinta encaracolada. Isso não é necessário com declarações de função. Mas quando você está declarando ou quando você está configurando um objeto e é, é necessário Então dizer que agora, quando os marcadores vermelhos e amarelos eu vou embora na cidade alta dele e você sabe que tecnicamente não é nada errado com sua sintaxe, que é uma boa mudança de controle F irá apenas certificar-se de que você tem uma boa formatação. Ok, agora, como isso é útil para nós? Mas basicamente o que fizemos está localizado em objetos Onda. Sabemos que um objeto é um tipo de dados. É um dia para digitar em sua variável, mas contém várias variáveis. Existem várias propriedades em que um objeto? Então, é quase como você recipiente para propriedades e métodos porque não podemos fornecer propriedades de função, que são emaranhados. Ainda assim, eles fazem coisas. Por exemplo, se você vir até ela e dizer que sou algo ao longo das linhas fora nome completo e nome completo seria então desencadear am am am omitido, o que dá tanto o primeiro nome no sobrenome juntos. Mas não vamos fazer isso agora apenas para ter a ideia de que você pode fornecer assuntos também de forma verdadeira, orientada a objetos. Então vamos recuperar algo disto. Digamos, bem, venha ao nosso documento que recebe elemento pela linha I D. Apenas livre-se de todos os dados que tivemos na última lição. Ok? E coberto. E-mail é igual à vontade, diga o usuário. Algum tipo de recepção para os usuários. Digamos que o usuário preencheu essas informações em um formulário e nós recuperamos que eles são bem-vindos. Além disso, você pode, Capitão Oito. Devo dizer que sou o primeiro nome. Na verdade, é ponto do usuário Primeiro o nome mais um espaço mais usuário faz busto nome em. Vejo onde isso nos leva. Bem-vindo, Jacque Jones. Então o que nós fizemos é que nós realmente recuperamos duas propriedades do objeto usuário a propriedade primeiro nome, que está aqui no objeto sobrenome, que está aqui, que está aqui, e nós inserimos espaços apropriados e extensos Isso. Agora vamos um pouco mais longe. Com essa frase ativada, você verá o valor de usar objetos como uma maneira lógica de armazenar nossos dados. Então coloque isso de perto uma ocupação de ponto de usuário. Agora você usa cerca de idade mais um ano de idade. Assim usuário essa ocupação, portanto, próxima. Certo, guarde isso. Volte para a sua antevisão e diz, bem-vindo Jacque Jones, um governador de carros de 25 anos. Agora, a coisa maravilhosa sobre isso é que e isso será relativo a qualquer informação que tenha sido fornecida pelo usuário. Então esse é o poder das variáveis especificamente, neste caso, é o poder dos objetos. Você pode ter um objeto que representa algo no mundo real. Mesmo neste caso, o representa dados sobre o usuário e que podem ser recuperados. Então sou o poder da programação orientada a objetos é que você pode agrupar todas essas informações logicamente de uma forma que emula como nós meio que percebemos o mundo ao nosso redor fora da rodada digital. Então é uma ótima maneira de programar em JavaScript torna possível fazer isso, como foi demonstrado aqui, eu apenas coloquei um espaço, e depois do não que eu quero ser anal ou qualquer coisa. Cinco. Deve haver um espaço entre isso, não o seu velho, capital de 35 anos. Então isso demonstra o poder da programação orientada a objetos, e vamos destruir Ir um passo adiante sobre isso na próxima lição sobre o trabalho com um método 18. 17 métodos de objetos: Agora vamos dar um trabalho com objetos um passo adiante e introduzir uma métrica. Agora, uma questão é na verdade uma função associada a um objeto. Até agora, trabalhamos com o tipo de propriedades simples onde você atribui ITER, um valor de string na América. O valor pode ser um valor booleano, como eu sou. Além disso, ele era um 1.000.000.000 rapidamente apenas para demonstrar que, digamos, casar no convés esta noite para ser verdadeiro ou falso foi casado é falso. Então ele é solteiro e, claro, separa-os todos com uma vírgula. Então ele é um único carro nessas propriedades básicas do ar, masum valor básico pode ser livre para ser reiniciado, etc. propriedades básicas do ar, mas um valor básico pode ser livre para ser reiniciado, Mas os métodos são propriedades que realmente acionam funções e, em seguida, retornam resultados. Então estamos realmente colocando uma função. Trabalhamos com funções antes de colocar uma definição de função no objeto, que é muito legal. Então, vamos ligar para este. Função de nome completo. Colocar seu amigo para ver é, como sempre, com definição de função. E, claro, vamos colocar nossas chaves encaracoladas. Agora este tipo de função tem que conter um retorno. As funções do motor de palavra-chave podem conter um retorno. Ele estava dependendo da natureza da função. Mas quando você está criando um método, eu sou especialmente um método como este. De qualquer forma, ele vai ter que ter um retorno, palavra-chave, porque precisamos de um valor de retorno. Queríamos dar-nos o nome completo. Então, vamos voltar. Eles inventam a nação com duas propriedades desta mesma função. Isso que se refere ao objeto de trabalhadores no momento, que é o usuário parou primeiro nome aplausos furando gato e eles colocaram um espaço entre eles e, em seguida, apenas parar busto que é o Eddie inteiro fora de uma meta declaração. Então agora temos um método chamado nome completo que podemos chamar e recuperar o nome inteiro e o que esses basicamente apenas adiciona de primeiro nome e seu sobrenome juntos e colocar o espaço entre eles. Agora é uma rota da questão simples, o método básico. Mas é uma questão. Então, vamos entrar aqui. Ana vai remover um pouco deste frio todo o caminho de volta para projetar o operador de tarefas Lá em, vamos dizer que estou cheio. Nome completo. Agora, quando você está chamando qualquer tipo de função. Na verdade, tem que ser médico de usuário completo. Agora, se você está chamando qualquer tipo de função, mesmo um método sobre um objeto, você tem que se orgulhar de prevenir Prentice, se você está alimentando informação ou não. E se você, se disfunção aceitasse barómetros, por exemplo, ele só tinha um proeminente chamado em Quem está perguntando, então você poderia fornecer algumas informações para alimentar de quem está perguntando Variável. Trabalhamos com eles argumentos em lições anteriores. O que não precisamos fazer isso aqui. Este é apenas um método que foi projetado puramente para retornar, um valor que você vê que ele está fazendo isso. Está amalgamando essas duas propriedades para a propriedade do primeiro nome na propriedade do sobrenome, e está retornando isso como uma força e isso está sendo impresso. Então é assim que trabalhamos com métodos, então agora você pode criar propriedades e métodos de objetos 19. 18 de 18 de 18: por isso, tendo passado algum tempo explorando tipos de dados e variáveis, objetos, propriedades e métodos, certamente aprendemos muito. E um conceito realmente importante que ainda não olhamos é o conceito de escopo escolar . E programação basicamente significa Onde ele existe, onde é uma variável existe em JavaScript. Há duas respostas possíveis para essa pergunta. Ele tem escopo local ou tem escopo global. Agora há uma lógica muito clara para pontar, em essência, olhando para nossos tipos de dados html aqui. Se a variável é declarada fora de uma função Dan, ele tem escola global, e isso significa que não importa onde você se refere a ela e que vai ser visível estava indo para estar disponível. Mas se variável tem escopo local, isso significa que se ela é criada dentro de uma função, hum, você não vai ser capaz de vê-lo fora dessa função. Então isso significa que diferentes funções podem ter variáveis com o mesmo nome. Então, para provar que isso é ótimo para funções, função F função. Não se deve ter uma função certa. Um terá uma variável declarada, e vamos fazer parecer dar seus parênteses, primeiro descuido e chamá-lo pelo meu cabelo é igual a usar o mesmo valor. Ok, então a função um tem uma variável chamada minha barra. E tem isso o valor de uma função para ele vai ter uma variável, meu Vira também deve ser chamado agora se eu amigos daqui da mesma maneira que sempre fizemos jantar, você sabe, igual ao meu pai. E copie a mesma linha de frio sobre 21. Podemos chamar qualquer uma dessas funções aqui e dizer: “ Livre-se dessa linha completamente ou eu não vou me livrar dela completamente. Eu vou apenas comentou com aluguel sobre comentários em um anterior não Andi. O que eu vou fazer é que eu poderia apenas fazer custos de função. Então eu vou dizer um quando eu chamei um que amigos querem para a tela porque ele reconhece que esta variável é local para essa função. Então ele sabe usar as assistências meu fogo porque local para essa função. Em outras palavras, o meu vire em função para ele não existe tanto quanto quando alguém está preocupado e é o mesmo que você para estar em torno de uma função de chamada. Não tem o meu viral com o valor de dois, e se formos até aqui, veremos que isso está definido para fazê-lo quando chamamos essa função, ele conhece suas próprias variáveis locais, e ignora todas as outras variáveis locais, então outras variáveis locais seriam aquelas que são declaradas com funções de ordem. Então, os pontos que estão sendo demonstrados aqui são que variáveis locais, qualquer coisa com um escopo local que a palavra-chave aqui é escopo. Ele só existe dentro da função que foi criado dentro de, enquanto escopo global significa que algo está, ele está disponível em todos os lugares. Então, se eu quisesse me referir à string um a partir do que nessas funções, eu poderia porque String um é global e para prová-lo, que é colocado na string um em uma string, um para ambos, String um. Então String um é uma variável global que está sendo definido fora de quaisquer declarações de função. Você pode ver que lá é global e é acessível a partir de funções bowties. Então, não importa se eu chamá-los melhor, eu disparo função Wonder fogo para ah função de fogo para aqui em baixo e você vê que o meu nome que é o valor da string. Um está sendo impresso. Então, qualquer coisa com escopo global ou, em outras palavras, se declarado fora de uma função, é acessível em todos os lugares. Qualquer coisa. Esse escopo local declarado dentro de uma função só é acessível dentro dessa função e desse escopo. 20. Lógica condicional: tendo aprendido muito do básico de JavaScript Neste ponto, vamos entrar em um pouco de aplicação prática sobre o que estamos construindo para. Aqui está um pouco de validação de formulário, usando certos métodos de string especiais que comic JavaScript. Então vamos criar uma nova página em nosso Hates Him em cinco noções básicas. Projetar um novo arquivo e vamos chamá-lo de validação de formulário. Eu não vou fazer a validação real nesta lição, mas em uma subsequente, nós precisamos construir até ela. Primeiro. Vamos criar rapidamente nossa estrutura. A estação vai chamá-lo. São boas práticas. Pausar para não esquecer declaração de tipo escuro. Então, apenas o dobro rápido e saboroso e fora está tudo bem. Tana pode ficar um pouco inquieta. Por favor, esteja ciente disso. Mas no geral, eu acho que o problema é que a maneira de acalmar os contras com Tana particularmente. Eu realmente aprecio este tempo de ferramenta de. Nossas sugestões agora que é corpo criativo. Certo, precisamos de um formulário. Na verdade, nós só nos formaríamos ainda vamos colocar um p tag con tentáculos aqui. Vou dar-lhe uma identificação da identificação Shell já venceu antes. Ok, agora isso é criar um script e condição de função. A lógica condicional chamará isso. Então, vamos olhar para aprender. Mas se instruções lógica condicional com if instruções clique é igual a lógica condicional. Ok, Se declarações nos permitem avaliar propriedades ou valores em, em seguida, dependendo do estado reagiu de maneiras diferentes. Então podemos dizer se precisamos de algo para avaliar primeiro vendido. Então você dispara não é igual a árvore em. Podemos dizer se não é igual a uma condição criada para essa condição artística lotada criar e argumentos ou declarações que ditarão o que acontece na conseqüência dessa condição. Podemos dizer se não é igual a uma condição criada para essa condição artística lotada criar e argumentos ou criar e argumentos ou declarações que ditarão o que acontece na conseqüência dessa condição. Melhorando a verdade. Então você vai notar que usamos para iguais em vez de um. Bem, isso é porque se você olhar para cima aqui, você vê vayrynen, um rua igual. Estamos usando um único igual para algo diferente. É um operador de tarefas. Ele atribui um valor com a concepção do valor da árvore para o número da variável. Portanto, não podemos usar um operador de atribuição para avaliação porque é um propósito diferente. Então, em javascript em, então, todas as linguagens de programação, praticamente a diferenciação é que você costumava ser igual a, hum, condicional. Então, se você estiver usando um operador condicional e, em seguida, é dois igual a comparação. Você está fazendo comparação entre dormente em um. Está dizendo que se o gnomo for igual a um, se forem iguais, então isso provará ser verdade no que quer que esteja aqui será executado. Caso contrário, vamos passar para a nossa próxima declaração se que será mais, eu digo. Se entorpecido é igual a dois e fornecer condições novamente, Eu sou finalmente não, se não é igual a árvore Ana, então tem condições diferentes. Há diferentes declarações para cada um, então ele pode apenas colocar algo em seu documento que obter elementos por D. Vai ser pontos shell. HTML interno é igual a ele era uma cópia que. Está bem, copiado. Menos turno de controle. A morte ensinou um formato sobre o que mudou estes dois para a entrada. Se guardarmos isso agora, testaremos não. Um erro que você acabou de cometer aqui é. Você não pode ter um não clique realmente sobre esse tipo de elementos. Então precisamos criar um botão muito bem. Mas colocou um botão na carne. Poderia me dar uma lógica condicional sem clique e um ponto semi dois-pontos para encerrar essa declaração. Essa chamada de função. Certo, então vamos trazer nossa prévia de novo. Era árvore. Se eu for aqui trocado aos 22, , tente de novo. Foi também. E só para ser minucioso, tente sobre um. Foi um. Então isso é lógica condicional. Avaliando um valor para vários estados possíveis ou resultados. Múltiplas condições. Pontos chave para tirar deste único igual não é um signatário. Dupla igual é comparação. Usamos isso com declarações se ok para avaliar condições, para ver se dois valores são iguais ou não, e então reagir de acordo. Na próxima lição, vamos olhar para caixas de alerta e tais como 21. Caixas de alerta: O Sr. Sin vai apresentar a caixa de alerta. Então a caixa de alerta é um assunto útil que podemos chamar. Eu só vou realmente remover todas as árvores dessas declarações e substituí-los, que chama para a função de alerta. A Andi. Ele aparece uma pequena caixa de alerta para dizer para usar ou algo assim. Então, por exemplo, se ele está avaliando para aquecer, feito vai dizer que é um mesmo apenas valorizar este. Nenhuma mudança de controle de linha copiada após o formato automático em Nós podemos apenas corrigir as luzes sob filmes. Espaços vazios desnecessários. Agora, quando eu digo se esse arquivo em, em seguida, atualizar a página em rápido. Recebi uma mensagem dizendo que o valor é um. É uma caixa de alerta. Esses podem ser muito úteis e validação de formulário para avisar o usuário se o conteúdo que foi submetido verdadeira reforma não é balada, não é utilizável. Então lembre-se que um apenas minúsculas um parênteses de alerta, aspas e, em seguida, a mensagem. Terminar com um ponto semi vírgula. Um trabalho mais útil a partir de uma lógica condicional no contexto de, por exemplo, para a invalidação 22. Validação de formulários: Então é hora de fazer algo útil. Bem, o que aprendemos até agora no aplicativo que vamos usar é que uma validação estrangeira , como você mencionou nas lições anteriores. Então, aprendemos sobre operadores de comparação lógica condicional, operadores de atribuição , variáveis, etc. Há um tipo de variável que não temos trabalhado com até agora, e é Você classifica em uma matriz basicamente é variável que contém vários valores, geralmente vários valores relacionados. Então, apenas um array que podemos acessar formulários chamados em seu olhar nos documentos. E é uma matriz de todos os formulários que estão disponíveis no documento, e podemos acessá-lo verdadeiro JavaScript em. Podemos usá-lo para acessar, em seguida, formar elementos dentro desse formulário. Então vamos mudar algumas coisas aqui, e vamos excluir essa função. Vamos liderar tudo dentro do corpo. Começaremos de novo criando uma forma . Ok, agora este formulário vai ter nome. Tem que ter um nome. Nós vamos chamá-lo formulário s assim chamado formulário de detalhes. Vamos hífenizá-lo. Talvez os detalhes se formem. Ok, dentro disso, nós vamos ter um par de elementos de entrada. Tipo de entrada é igual ao texto, então este é muito tipo em seu e-mail, Então vamos. Nome e e-mail, acredito Andi, definiu o tamanho 22 caracteres sobre eles. É uma boa prática terminar sempre um único elemento de tag. Um desses quatro cortes está no final. Como estabelecemos lições anteriores, vamos ter um segundo elemento de entrada, e vai ser de tipos de Mitt. É apenas enviar livro Onda Value filme igual a enviar. Então é isso que vai dizer que você mudou para outra coisa. Se você quiser. Dois segundos. Envie detalhes apenas para demonstrar o ponto de que são detalhes separados. O tipo no valor não são o mesmo tipo é dissecação tem que ser um garçom, enviar ou texto ou um número de outras opções. Mas isto é tudo o que queríamos ser submetido, mas não deve significar forçar um valor igual. Submeter. Se você abrir a visualização que você vê, temos que enviar detalhes botão voltando para o nosso código. Agora criamos nossa forma, então isso é legal. Isso está praticamente pronto para ir a seguir. Precisamos escrever um resfriado. Vamos criar uma função. Será chamado de validados, você sabe, e nós vamos chamá-lo do formulário. Então, indo para a tag aberta, vou dizer no envio. Então, quando este formulário apresentado que eventos aciona quando clicamos nesta reserva de entrada aqui. Então as tias admitem, vai para dentro do formulário e não a entrada em si mesma em enviar é igual e vai dizer validar , você sabe, e terminar com um ponto-e-vírgula. Como sempre, sempre que você está chamando uma função, fazendo qualquer declaração e frio, isso é o que você tem que fazer. Então nós temos disfunção, validar e-mail na primeira coisa que ele vai fazer é criar de nosso conteúdo chamado S A é igual a em Aqui é onde nós estávamos falando sobre isso. Lembra que dissemos sobre isso uma corrida. Bem, temos uma série de documentos frios que o médico faz formulários para acessar seu conteúdo. Usamos os colchetes e estamos procurando o nome da forma que queremos. Então, se você tivesse vários formulários com vários nomes, poderíamos inserir qualquer um deles porque eles estão todos disponíveis. Verdade, esta matriz de formas, mas o que queremos acessar é chamado de formulário de detalhes. Então os detalhes se formam. E, em seguida, dentro disso, podemos acessar um segundo se você gosta de array off elementos de entrada dentro dos quatro. Então isso é útil, não é? Então agora nós selecionamos para formar que queremos com os primeiros colchetes. Não coloque uma doca entre eles. Segundo colchetes vai um nível mais profundo. Então, a nossa procura de um destes no que queremos o seu valor de pontos de e-mail para que o valor nos dará qualquer d m. o valor com um conteúdo de e-mails. Destes elemento de entrada de e-mail é do tipo de texto, então qualquer que usar seus tipos aqui dinheiro e, em seguida, clique em enviar o que está aqui que vai ser o valor que será armazenado no conteúdo. Então ele aprovou. E vamos usar em alerta, que aprendemos na lição anterior. conteúdo deste troll. Então isso é teste para cima e você sabe, você não, yo yo. Então sabemos que até agora a lógica está funcionando e tudo o resto está tudo conectado. Estamos recebendo o valor deste elemento de entrada verdadeiro deforma matriz. E então este raio civil, que olha para os elementos de entrada, seria nessa forma em si. E, em seguida, estamos usando este valor propriedade toe acesso. O valor desse alerta elemento real está tentando para a tela, o que acabamos de fazer como um teste. Não queremos fazer isso agora. Vamos criar uma segunda variável em. Vai ser esse cuidado. Agora. Todo endereço de e-mail tem que conter um desses, não é? Define o caractere at Hot car é apenas o nome que eu estou dando a esta variável porque eu sei que eu quero estar verificando para esse caractere agora é igual em nós vamos dizer conteúdo. Esse índice de índice off é um método de string. Então estamos trabalhando com personagens Tali trabalhando com cordas, não é? Dados de string. Então, índice off e nós vamos olhar dentro da string, que é o que a pessoa entrou no campo. E nós vamos dizer, existe no personagem tecnicamente o que estamos realmente verificando aqui é a posição do personagem ato no endereço de correio. Mas a grande coisa sobre Index Off é que se não houver nenhum caráter fora em toda a indústria, então ele retornará um menos um. Nós sabemos disso. É assim que funciona, para que possamos usar isso a nosso favor. Sabemos que ele retornará um valor menos um numericamente, se não houver nenhum símbolo no texto que ele está examinando, que é conteúdo, que é basicamente o que foi colocado aqui. Então ele tem que ter um símbolo de at para ser sobre endereço de e-mail. Então isso é validação. Íamos dizer se e aprendemos sobre operadores de comparação não significava a diferença entre a atribuição, que é um único, igual em comparação, que é o dobro. Nós vamos dizer que se isso é um carro, que é qualquer índice de que retornou é igual a menos um. Então, se ele retorna menos um, nós sabemos então que não há nenhum símbolo em tudo. Nós estamos indo para ascender e alertar para o usuário não um e-mail válido, que isso mais podemos dizer então porque olhamos para outra coisa antes não fez maneira. Se em Dallas, se tem suas próprias condições, outra é a que você comportou opcionalmente no final de todas as suas condições. Neste caso, o dinheiro tem uma condição de ordem que basicamente diz que se nenhum deles era verdade, então faça isso. Então estamos dizendo que o 1º 1 está dizendo se é legal igual a menos um e isso significa que não há nenhum símbolo no. Caso contrário, se não for igual a menos um, então nós realmente não nos importamos onde ele está na corda. Porque Index inverte basicamente a posição do caractere na string, mas já se preocupam com isso, e desde que não seja menos um, então sabemos que ele está lá. Então estamos dizendo que mais alerta. É uma AGIs malévola muito agradável. Então vamos testá-lo e ver se escrevemos estão frios corretamente. Então, Jack, não é sobre isso em um vestido. Uma coisa que esquecemos de colocar lá é um retorno falso deste lado. Tenha um ponto-e-vírgula após o turno. OK, e este teste de novo. Jack Sonata baleando no vestido Jack no Hotmail. Isso é um endereço muito agradável, você vê, então funciona. Estamos verificando se o valor é válido ou não. Não, obviamente seria mais para fazer lá em baixo. Por exemplo, você pode verificar se há uma adoção calma no endereço de e-mail porque cada endereço de e-mail tem que ter um ponto E, na verdade, vamos fazer isso agora apenas para meio que trazê-lo adiante. Esse passo extra até agora ponto carro é igual ao conteúdo. Inicie o índice exatamente da mesma coisa. Só um médico. Tem que ter um ponto. Não existe um endereço de e-mail sem pelo menos um ponto. Então, digamos se, se um carro é capaz de menos uma honestidade e ou mesmo apenas ou assim, como procuramos ou usamos essas barras intermediárias em linha reta. Eu não sei se você já usou isso antes. Normalmente, é um pouco deixado fora da tecla tontura no seu teclado e apenas para a direita fora da tecla shift esquerda, você vai vê-lo lá. Você tem que segurar o turno para usá-lo. É o mesmo garoto nas barras traseiras. Então mantenha o turno impressionado Jackie, e você vai ter um daqueles compradores ascendentes. Bem, você precisa fornecer aos adoradores, e isso é um operador de comparação também. E ele basicamente verifica se escritor destes ar verdadeiro, então se um carro é igual a menos um, ou se Dakar é igual a menos um, e basicamente o que isso significa é que se qualquer um desses personagens não está presente do que isso é não é um endereço de e-mail válido dot car igual a menos um. Então, agora, se dissermos Jack em, enquanto anteriormente, isso teria sido tratado como válido, não um endereço de e-mail válido. Então ele tem que ter o barco Jack no ponto de correio gancho com para que ele não tenha em, e ele adotou que será tratado como violento. É um endereço de e-mail muito bonito. Então agora podemos ver o rial, força bruta e o poder do JavaScript entrando em vigor foram realmente capazes de fazer coisas com ele. Então você percorreu um longo caminho. Deveria se orgulhar, mas ainda não terminamos. 23. 22 scripts externos: Então, até este ponto, todos os scripts com os quais trabalhamos foram scripts internos. Ou seja, o código de script de trabalho foi realmente contido dentro do próprio elemento HTML. Agora, como aprendemos em nossas lições sobre CSS, você pode ter CSS interno e externo nossas folhas de estilo. Isso também é verdade para JavaScript. Podemos vinculá-lo a partir de uma página separada agora. Uma das vantagens disso, como foi o caso com folhas de estilo externas, seria scripts externos. Você pode conectá-los a várias páginas, mas apenas a um único elemento de script. Então você pode escrever o mesmo frio apenas uma vez, e nós usá-lo em todas essas páginas diferentes. Você pode chamar essas funções de qualquer lugar, então isso é uma coisa muito útil para ser capaz de fazer. Outra vantagem relativa ao nosso I d Hear Tana, é que sou thanas. A conclusão a frio será muito mais precisa e muito mais eficaz se você estiver trabalhando em um médico dedicado. Sim, arquivo. Vamos apenas o caso com Tana de modo que tendo sido dito, Vamos Do It irá copiar nossa função aqui fora ou citado escritor fora da nossa validação estrangeira que página html eu só uso controle X. Para colocar isso, vamos entrar em detesta o básico de e-mail aqui. Vamos criar uma nova pasta e chamaremos de scripts. Em minúsculas é a convenção. Nós seguimos para nomes de pastas, viagens e clique com o botão direito na nova pasta scripts e criar um novo arquivo vai chamá-lo principal ponto Js. Então aqui permanecemos que ela pediu arquivo. Podemos apenas colar para controlar a nossa função e controlar o esforço de mudança de controle para auto formatação que não pense que o espaço onde ele precisa estar lá, que realmente não precisa ser um escritor. pessoal da Força Aérea fez certo na segunda vez. Por isso, temos a nossa função de e-mail validada armazenada em dois JavaScript separados. Ainda não está conectado de forma alguma, mas o que podemos fazer é usar esse elemento antigo agora e dentro da primeira tag. Nós vamos usar uma fonte atributos que comentários antes de eu estar em ordem em elementos sobre. Vamos apontar roteiros Teoh em uma cidade ainda nos ajuda aqui para frente barra principal que Js salvá-lo em quando você testar, nós ainda devemos trabalhar em um I chamado do anterior menos e ainda funcional, mesmo que não está no engate. Vamos, Page. Porque estamos importando do arquivo Js principal que criamos, que pode falar que agora conterá nossas funções, que é muito útil, não é? Ok, então isso são arquivos JavaScript externos. Equipe muito útil para ser capaz de usar. 24. 23 de tela: Ótimo. Então temos o suficiente básico ou do conhecimento introdutório mental sobre equipe de odeia, masculino, CSS e JavaScript para começar a trabalhar, começando a trabalhar com alguns dos recursos mais poderosos. No mais importante, um deles é realmente a tela, esse elemento, que poderia ser codificado com JavaScript para introduzir gráficos e animações. E abriu uma infinidade de possibilidades com o Haiti e agora cinco e em linha de APS e jogos e todas essas coisas que estão sendo desenvolvidas. Então é importante ter um fundamental antes de passarmos para cursos mais avançados. Então vamos olhar para isso. Certifique-se de que temos um conhecimento básico disso. Vamos fechar para a invalidação que HTML Temos uma função aqui validar e-mail em nosso principal que Js Então vamos continuar a colocar nossas funções lá. Bem, basta ligar todas as nossas páginas subseqüentes ao mesmo arquivo JavaScript. Então, de volta em nossa página HTML cinco conceitos básicos, vamos criar um novo arquivo são projeto completo. Deveria ter dito que vamos criar um novo arquivo sobre eles. Vamos chamá-lo de lona. Consegui HTML. Então esta é a nossa página de teste de tela e muito rápido. Vamos nos preparar. O esqueleto já estabeleceu antes, mas odeia cinco declarações do tipo doc poderia ser muito simples. Basta colocar um correio apressado. Isso é tudo apenas html lá no final. Então, elementos da equipe Paige. Você sabe o resto. Vamos nos juntar muito rapidamente. Caixa de areia para a faculdade, amigo. Sim, agora, antes disso. Mas em nosso campus eram apenas link em nossos scripts que estávamos usando, que é o ponto principal Js na pasta scripts. Então, sob o título vai colocar em um script elementos e o atributo é fonte SRC igual a eu vou dizer sim, scripts no xadrez ele aqui em baixo no corpo Nós vamos colocar em nossos elementos de tela Então este é o novo elemento para criar uma tela e Acredite que está vazio lá por enquanto. Uma coisa que precisamos fazer é identificá-lopara identificá-lo que possamos acessá-lo diretamente. Verdadeiro são código JavaScript, então vamos chamá-lo de tela. Muito simplesmente, poderíamos dizer ou tela principal porque é possível, claro, ter vários campi no mesmo documento de e-mail ódio se altura é igual a 400 ou dizer para 80 apenas tipo de dimensão padrão para jogos na Web, tradicionalmente para 80 e com veículo para ele está explorando 6 44 80 Coloque isso na frente da altura mesmo porque isso é adicionalmente como pensamos em termos dessas medidas, não é? Com a minha altura 6 40 antes 80 eu colocaria um pouco de frio aqui que só vai resfriado Render se eu sou. O elemento canvas não é suportado devido a um navegador antiquado na versão antiga do navegador bombeando o usuário para atualizar para que o navegador esteja desatualizado. Ele está atualizando agora. Nós já criamos nosso arquivo javascript externo, não foi? Principalmente Js Então o que vamos fazer é criar na, uh, a função que chamamos a partir daqui. McAuliffe d e shin draw canvas função tão familiarizado com a partir de declarações de função agora definições de função. Então vamos ter que variáveis. O primeiro ia ser um incêndio aceso. Vai ser uma tela igual ao documento. Tenho que pegar o elemento. Chame o Alan. Então você vê que no arquivo externo o M, as dicas de ferramentas ou conclusão muito frio funciona muito melhor ainda elemento por i d. Quando você está usando um JavaScript externo naquele tempo no apt no I. D era campus principal e principal. Então o campus principal é o I.D. e estavam devolvendo isso ao campus como variável. Isso vai aguentar, e vamos tirar um desse tempo. Vou dizer contexto, que é o nosso contexto de desenho. É um objeto que estamos usando em JavaScript Toe Access GM. O contexto de dois D para desenhar assim via contexto é igual a tela ponto get contexto e basta colocar em dois D com um minúsculo d elegante off com um semi dois-pontos. Então o que eu realmente fiz aqui é que nós mesmos criamos essa função de bússola de desenho. Demos duas variáveis. Um é tela em, ser um sinal do elemento fora da tela para ele. Então eu sou. Se você olhar para trás aqui, fechar isso, você pode ver que nós temos esses elementos de tela com o campus principal i. D. Então, acessando um verdadeiro que i d. Estamos alimentando este elemento nessa variável. Então, acessando um verdadeiro campus de vez em quando o contexto estava tirando dessa variável, que se refere aos elementos da tela que estamos entrando em contato com o contexto T, que é um objeto que podemos usar para desenhar, então ele tem todos os tipos de métodos de desenho. Então agora que temos o nosso contexto e antes que eu faça mais, o que eu vou fazer é realmente chamado de script para que possamos dizer no corpo Diga que vamos colocar em um script e o que é colocado na função. Chame-o Waas desenhar tela Isso só vai chamar a função do script Js ponto principal . Portanto, quaisquer definições de função, como aprendemos na lição anterior de qualquer maneira, em quaisquer definições de função que estão em e anexado arquivo Js em nós estamos anexando ele aparecem e nós estávamos ligando são acessíveis. Não odiaria documentos senis? Então vamos chamar o campus do Draw. Estou me reconectando na verdade. Basta obter elemento por i d linha encontrar a bússola principal. Trudeau. Então, a próxima coisa que precisamos fazer é usar nosso contexto e os métodos que vêm com isso. Então o contexto parou. O que queremos fazer é mudar o estilo preenchido, que é uma propriedade igual a, leva uma string sobre eles. O que vamos fazer é dar-lhe um valor mais frio, ok, no contexto do ponto Phil retângulo. E isso não é método, então é preciso quatro argumentos, que é basicamente X. Por que Dan, com apertado agora vamos preencher toda a tela, que é 6 40 antes 80. Então isso precisa ser 6 40 I para 80 para preencher o parafuso com este estilo presunto. Então eles mudam a cor do estilo muito preta. Estamos sentindo um retângulo agora, usando essa cor de estoque que definimos. Se visualizarmos, estamos tendo problemas. Bem, vamos ver quais são os problemas. Desenhe tela. Isso é apenas certificar-se de que soletramos tudo corretamente. Phil Rectangle, Phil estilo pode eu era para obter contexto. Canvas é igual ao Doutor, o garoto Armand por um d principal conversa. Na verdade, ele me chamou. E sinto falta disso se chama campus principal. Isso está tudo bem. Vou mudar de nome para um segundo nome de nossas variáveis só para simplificar o que estamos vendo. Use abreviaturas agora, apenas para mostrar onde o limite está fora do elemento de tela D. Vamos colocar o estilo e vai para o campus principal. Vou usar uma borda um pixel sólido tendo certeza. Vamos colocar isso nas necessidades. Só estou checando nosso congresso para ter certeza de que tudo estava bem. Então estamos dentro do corpo aqui. E tem o nosso título de script são estilo. A cabeça está bem e tela do corpo, tela principal, mudança de controle hifenizado apenas para melhorar a qualidade de nossa formatação. Então ele tem uma idéia, tem um com tem uma altura. Você e scripts desenham tela, que é que ele é chamado de calha. Ortografia infinita é cuidar de legal. Sim, sob pré-visualização gratuita. Lá vamos nós. Ok, está funcionando agora. Eu não poderia dizer exatamente o que e nós mudamos isso fez funcionar às vezes um tônico e apenas ser um pouco lento na absorção. Sim, melhor palpite que eu posso dar Então lá nós temos os conceitos básicos de configuração de tela usado funções de junção , em seguida, que você pode desenhar quais são todos baseados neste elemento de contexto O que é objeto de contexto? Devo dizer o que recuperamos do campus. Então obter álbum, mas um t usual ting Nós fizemos isso antes no contexto Grande nova variável no sinal é você apenas obter objeto de contexto Então agora nós temos este objeto em uma variável de contexto e nós podemos acessar suas propriedades e seus métodos para começar a estilizar E essas são as noções básicas de trabalho no meu campus 25. 24 Criação de um site: nesta lição. Vamos levar o que aprendemos sobre colocar em aplicação, mas trabalhar em um projeto sobre ele vai ser um projeto de Web design. Então o que vamos fazer é criar um novo projeto. Novo projeto Web. Nós vamos com padrões para baixo para chamá-lo e primeiro site e para entrar Casita. Uma pasta vazia agora aparece no lado esquerdo do seu projeto. Você aí. Então a próxima vez que você quiser fazer é criar a estrutura que vamos criar algumas. Então, as pastas do 1º 1 dirão imagens. Ótimo. E Notre Holder em Recall que scripts ele tinha outro e nós chamamos que um estilo clique direito no primeiro site para estilos mais antigos. Realmente? O que é que as subpastas principais da árvore que vamos precisar? Claro, precisamos criar nossa página de índice porque cada site tem pontos de índice H você sabe ? Certo, coloque nossa declaração de tipo médico. Então essa é a nossa estrutura básica. Agora, eu quero que você olhe para os recursos para esta lição sobre. Você verá que temos essa pasta Zip chamada imagens. Baixe isso e depois vamos extraí-lo. E nós vamos pegar essas imagens e colocá-las em nosso projeto para que possamos usá-las para construir este nosso site básico. Então, bem-vindo à extração. Aqui, livre-se disso. Certo, então vamos pegar o conteúdo nessa pasta de imagens porque já criamos um subdiretório chamado Imagens em uma cópia. Copiar faz e, em seguida, gostaria de ir para o nosso diretório do site, primeiro site. Desculpe-me. Imagens em ritmo para controlar. Ok, então agora temos as imagens que precisamos de um completo aqueles porque não precisamos voltar para ele. E você pode apenas verificar e confirmar que sua imagem está realmente lá. Então a primeira coisa que queremos fazer é construir o conteúdo básico. Começamos, é claro, com HTML. Que é D sim. O recipiente geral para todos os elementos dentro da nossa página HTML título do documento html página, jogos Cybermen. Então eu estou indo para baseado sistematicamente em um redesenho fora da UE site jogos momento preciso, que é uma empresa que eu tinha. Então, só para lhe dar o contexto, é sempre bom saber no que você está trabalhando. Não basta citação cegamente correta e você deveria ter um projeto para conceber propósito agora dentro do corpo. Tem algo chamado rapper. Vai ser uma div sobre nós mencionamos se tags lá dentro, as primeiras lições sobre e-mails de ódio neste curso, e nós vamos dar-lhe uma identificação. identificação Foi basicamente algo que usamos para isolar. Uma determinada região na página cria como um retângulo que enfraquece o controle e move você pode . Eu era dinheiro. Imagine querer isso poderia estar dentro um do outro também. Então este vai ser rocker e tudo basicamente vai para dentro daquele rapper. Ok, dentro do Rapper, nós vamos ter mais dois tiffs ia ser um i D. ativo porque o conteúdo, conteúdo hifenizado, principal e abaixo do conteúdo principal terá um segundo de direitos. Ok, e ambos dentro do Rapper queremos adicionar outra coisa, e é chamado de cabeçalho, que é uma nova equipe de ódio de cinco elementos. Na verdade, vamos colocar isso dentro por enquanto. Olhe sem dentro dele nosso contêiner ou conteúdo principal vamos voltar em um minuto porque eu ia ser isso até mais tarde. Mas talvez seja melhor fazê-lo imediatamente. Vamos criar um elemento valete. Então agora é novo para html cinco também. Antes de 100 teria criado uma div, e você teria dado um eu d fora horizontal e ter ou algo assim. Mas agora temos esses elementos nav, que é usado para abrigar e basicamente listas de links. Então âncora ódio se igual índice dot html Tudo o que você pode copiá-lo algumas vezes. Diga, faça quatro deles. E então, uh, jogos em casa. G minúsculas para o link, na verdade G maiúsculas para os cursos de jogos de texto link. Certo, veja cursos, cursos de casos para os livros de texto e, uh, contato também. Certo, então aqui temos nosso menu básico de navegação. Onda. Poderíamos, é claro, visualizar isso dentro do AP, Tana, e você pode ver que ele já alinhou a Floresta Horizonte. Então, enquanto d por padrão, que não seria como âncoras seriam tratadas e dizer, você sabe, uma lista de ordens que seria bloqueador. Sabe, esse tipo de exibição? É um modelo. Ele está usando na linha aqui porque agora tem apenas assume que você está trabalhando com um menu horizontal . Claro, tudo isso poderia ser alterado em CSS. Ok, então na configuração básica de navegação, isso vai nos servir para a primeira lição. 26. 25 projeto do site no Pt 2: Então vamos continuar construindo a estrutura da nossa equipe de ódio. Todos os documentos colocados à frente de elementos e vamos envolvê-lo em torno de nossa mudança de controle de navegação após Teoh corrigir nossa formatação e evoluiu e ter elementos em dois e classificar. Insira um novo div e ele vai ter o i d off Lobo logomado. Se dentro de que vamos ter uma imagem elementos e configurá-lo para a imagem local, que está em nossa pasta de imagens, Eu vou dar que um 90 de imagem local estão lá, Will I am G 90 igual logotipo. Eu sou G bem na nossa cabeça. Deve ter uma idéia também é igual ao cabeçalho superior. Agora podemos nos livrar deste por enquanto, mas podemos usá-lo um pouco mais tarde. Então, se você verificar sua pré-visualização, verá que você tem um carregamento local que não pode ver para mergulhar . Mas é o Derek que contém o local. Quando tivermos o nosso menu, um pouco dá Vamos reabrir tudo isso. Então, uh, há d h ing na página novamente no conteúdo do Maine. Vamos usar e artigos agora. Então, o artigo é um novo elemento que foi introduzido em ódio para os meus cinco. Não estava no odiava-o. E podemos usá-lo para estruturar nossa página em dois tipos D de seções distintas de conteúdo em artigos, de certa forma, para que possamos dar-lhes cabeçalhos e até mesmo dar-lhes parágrafos e todo esse tipo de coisa. Vamos começar com um título aqui, Will, para dizer o artigo um, o homem A com um parágrafo dentro dele e dizer, corpo principal, tudo bem para ir. Andi Weaken duplica esse artigo, é claro. Colado, passeado. Então você tem três deles agora no corpo principal. Basta fazer o artigo dois nesta árvore de um artigo. Obviamente, isso teria conteúdo significativo real. Estamos a conseguir a estrutura dela no momento, está bem? E depois a barra direita. Nós também podemos colocar em alguns artigos para que eu possa pegar o mesmo tipo de dados e colocar em alguns artigos. Pode ser estilizado um pouco diferente para que possamos dizer lado do artigo após legal um artigo dentro para aceitar. Você também pode mudar da página um para dizer h árvores ou algo para a barra lateral porque é menor. Está bem, mas podes ver a pré-visualização. Ela economiza apenas atualizar cinco. Então, obviamente, não desenhamos nada. Eles não posicionaram nada. O CSS, que significa que está tudo apenas exibindo e em linha. E se você carregar qualquer página da Web apenas escrito corretamente e na Internet sem etc avaliar, e isso é basicamente o que você vê, apenas todo o jantar conteúdo em uma espécie reta de linha vertical. Mas isso é chato. Então nós temos que estilizar essa informação on-line, e é aí que nosso CSS vai entrar agora. Não somos estranhos ao CSS. Neste ponto, vamos clicar com o botão direito do mouse na pasta Estilos, e vamos criar um novo arquivo. Vai ser principal que CSS ok, aperte enter. Você pode começar a criar algumas regras. Então, uma das primeiras coisas que vou fazer é criar uma regra para o rapper. Lembre-se que o haxixe significa que estamos pegando um I D em. Estamos usando o rapper I D, e isso é bem aqui. Vamos dar ao Rapper um tamanho com assim sou, digamos, com 1024 pixels. Andi Border só para que possamos vê-lo Por enquanto, este é o único pixel permanente pontilhado vermelho. Se você entrar em uma pré-visualização na atualização, o que está acontecendo? Claro que temos que conectá-la. Não vamos esquecer de conectar nossos estilos. Onda. Fazemos isso com uma ligação. Então ligue um rascunho. Você acha, também? Estilos. Talvez seja CSS. Muito bom. Tudo bem, é sempre bom para ele. Testes no navegador e seus navegadores de dinheiro. Apenas possível. Preocupe-se quando você está desenvolvendo para a Web, porque cada navegador é exatamente como você de peso fora interpretando Hey, html, CSS e JavaScript. Então vamos para o nosso diretório de sites na duh nosso primeiro site aqui e vai abrir índice . Ok, então não estamos vendo essa borda vermelha em volta do nosso invólucro no momento, que é bom porque estamos acabados. Então volte para ela para agir sobre isso. Andi, vamos nos certificar de que tudo está tipo de mapeamento, OK, então apenas dar é de fato envolver em torno de tudo dentro do corpo, que é bom, porque era isso que queríamos fazer. Vamos dizer casamento e lema de esquerda em direitos de margem, mas as margens são para as áreas fora de nossos elementos. Eu sou áreas bonitas que lado do nosso Adams e esse tipo de tapa-los não é a palavra que nós queremos focar aqui porque nós também temos preenchimento, que está dentro do elemento. O tapinha é entre. AM o conteúdo de um elemento nesta fronteira, e margem é entre a fronteira de um elemento nas fronteiras de fazê-lo ao redor. É em torno dele. Então, é apenas uma espécie de espaçamento das coisas. Muito bem, ele criando uma margem automática aqui e textos. Nove. Centro. Ok, senhora teste-os. Ainda não é um plano. Estilos principais. Vamos CSS viés. Temos que especificar a relação, não é? Com CSS, esse não é o caso com Iniciado com um JavaScript no Haiti meus cinco mais, mas ainda é o caso com eles. Texto CSS é OK, então nosso relacionamento é folha de estilo nazista. Este estilo é bonito? Lá vamos nós. Então essa é a borda pontilhada vermelha que adicionamos apenas para nos mostrar onde nosso conteúdo está entrando, o que é bom. Onda, nós queremos entrar no corpo aqui para pegar esse texto alinhar a regra central em colocar lá em cima . Eu estou enviando uma linha de texto dentro do próprio invólucro vai ser nunca eu só quero colocar em uma linha de texto , governar tudo para o próprio rapper. Ok, então você pode ver a utilidade desta linha pontilhada para nos destruir onde nosso dia estava realmente aparecendo com a mão dessa maneira. Uma coisa que não temos colocado em conteúdo sábio ainda é que eu estou logo abaixo Thea o comprador certo aqui, eles querem colocar em um rodapé que também no CSF no Haiti. Minha ajuda teria sido tratada como um div com um rodapé de 94. Mas agora nós realmente temos este elemento pasta em 18 05 que é útil. Você pode dizer, você sabe, direitos autorais, cinco jogos, 2015 ou algo assim. Ok. E se você voltar para um navegador, você está sentado. Esse pouco de conteúdo também aparece. Então vamos começar a fazer as coisas parecerem legais, porque , uh, isso é importante, não é agora que vamos começar a acessar algumas de nossas idéias aqui. Eu não uso o Teoh o menu, que é útil, e McDonough então coloque seu símbolo de hash. E depois de um segundo ou mais o menu aparecerá. Queremos estilo em primeiro lugar, o conteúdo principal, que é o conteúdo principal em. Vamos dizer que os carros alegóricos deixaram Andi, dê um com no set. O com t acreditar foi que com 70% de desconto nos pais por enquanto. Ok. E vamos criar outra regra aqui para o comprador certo. Vamos dizer isso para flutuar, certo? Com 30% dos pais, eu vou fazer este 69 só para criar um pouco de espaço entre esses dois elementos. Então o conteúdo deve flutuar para a esquerda. O bar deve flutuar para garantir que possamos vê-los. Nós vamos colocar em nossas fronteiras são fronteiras temporárias que nós usamos para ambos também. Então, podemos apenas copiar isso dizendo que só torna mais fácil ver onde d as bordas de cada elemento PR aparecendo na página e visualizar. Isso é para nós, o que é útil. Copie o online naquela noite. É muito bom. Acho que o meu rato está à beira. Ok. Mudança do show de café após o formato automático ir. Então você admite que nossas fronteiras estão aparecendo. Você pode ver que está mesmo no espaço porque eu não usei toda a porcentagem que colocamos baixo para a barra direita seis esta noite para a esquerda com vistas. Um pouco de espaço de 1% lá o com o qual é definido por recipiente durante a noite antes de pixels definido por este rapper ela. Tudo bem, nós não temos estilo são rodapé, é por isso que tudo está tipo de colapso em si mesmo lá. Então vamos criar nossos efeitos de regra de rodapé. Apenas rodapé. Porque estamos usando um. Eu vou dizer que seus barcos não deixam twits 100% mais cheio de fundo. Certo, então há um carneiro que aparece no rodapé lá embaixo. Ótima. Não quero usar isso permanentemente. Muito bem, temos o nosso logótipo no teu menu de sempre. Nós temos nossa área de conteúdo e eu sempre Cyberia, bem como seu pé ou colocar bloqueado em. Tão grande. Fizemos um bom progresso em dois continuaremos com isso e na próxima lição 27. 26) de site em 26: Bem-vindo à árvore de parte da nossa seção sobre a construção do site. Então, um projeto importante para solidificar o que aprendemos e concretizá-lo em nossa memória. Agora vamos precisar estabelecer algum tipo de tema que podemos usar enquanto estilizamos nossa página. Então, um esquema de cores é realmente importante para isso. Onda. Vamos nos basear no esquema de cores em torno de ah, local. Então eu vou abrir esse logotipo na loja de fotos e nós podemos chegar a valores hexadecimais diretamente do que é importante e útil Bibliotecas, Websites em primeiras imagens ascendentes. Muito bom. Ótima. Então eu não sei quanta experiência você tem com eleitores acima. Eu tenho um curso a bordo de uma loja que você pode fazer um turno. Vai antes que eu não faça antes da dispepsia seis do zero. Pesquise em você para mim. Se você estiver interessado, amplie aqui terá uma amostra de cor nas cores escolhidas. Aqui está uma soma maior pontos de tratamento política Ok, uma amostra de ponto único como árvore depois que ele f está mais interessado em. Então nosso primeiro valor de texto será árvore após árvore. Se for um e mais frio. Eu só uso “não”. Tive que manter o controle desses para que pudéssemos voltar e pegá-los muito facilmente. Notas e dinheiro. Editor de texto simples será bom para o consultório médico. Então é árvore atrás de você depois que você valoriza lá neste verde também, que é como um diferentes pontos. Ok, então 85 20 árvore. É uma árvore do meio 85 20. Ótima. E então algo para contrastar isso. Mas então eu vou fazer. Eles controlam você para trazer sua saturação aqui? Vou mudar para o Hugh, não até lá, mas tudo bem. E então eu vou pegar esse valor de quarto E árvore 82 f. Então era um valor de cortador de árvores que podemos trabalhar com. Temos um cinza, um aliado verde em verde em uma espécie de laranja avermelhada. Sim. Legal. Não. Como vamos estilizar as informações da nossa página? Em primeiro lugar, e isso veio trabalhar no nosso menu. Então usamos o valete não. Então podemos dizer agora que não quero usar uma noite não identificada só para torná-la muito específica. Então este em particular o suficiente agora no I D off e na verdade cabeçalho foi que quando usamos não foi em dois segundos? Então temos a nossa cabeça ou lá. Temos que encaixar dentro do cabeçalho e Ok, então cabeçalho, talvez apenas Tedder. Só queremos ter a certeza de que temos o nosso caminho muito preciso. Temos cabeçalho superior. Melhor espaço de cabeçalho hashtag em. Está subindo. Essa é a primeira regra que queremos acrescentar. O primeiro seletor ainda quer adicionar no 2º 1 Vamos copiar isso, colá-lo em. Vamos estilizar as âncoras dentro disso. Então aqui, por agora, eu vou dizer, e com 100% dos pais, a cor de fundo, vamos definir para desgraça e, claro, precisa de um hash para começar para dois. Nota. É um valor hexadecimal. Certo, Heights, talvez horrível. Tudo bem aqui em nossas facas. Vou dizer, batendo à esquerda quando eu sou e M é basicamente decide de ah preenchimento de caracteres de fonte. Certo? Bem nome tendo dois pixels principais. Adicionando dois acentos inferiores, cor de fundo. Vou usar este verde limey ou o que for. O que? Você quer descrevê-lo? Pegue esse valor hexadecimal. De qualquer forma, eu estou colado em Tudo bem, e finalmente Bem, vamos testar o que temos antes de querermos a seguir. Um pouco por aqui. Cinco. Ok, então nós temos este fundo cinza e nós temos nossos e nossos itens de menu aparecendo em cima sob linha central, que é o que nós queremos. Temos nosso estofamento aparecendo lá e tudo o resto. Então estou feliz com isso. E a decoração do texto , é claro, está desligada e não queremos que seja azul. E não queremos ter esse sublinhado. Então ou Thea sublinhar decoração. Então precisamos mudar isso. Vamos dizer que a decoração do texto mudará o trimestre. Qual automático se aplica ao texto? São brancos ou F? Se ótimo. Então era isso que procurávamos. Queremos que os itens individuais da GM respondam enquanto pairamos sobre ele. Não se preocupe com esta pedra vermelha horrível, mas vá embora. Só estamos usando esses propósitos de individualização, só isso. Então eu sou. Queremos que cada um reaja enquanto pairamos sobre ele. Você não precisa usar javascript para criar esse tipo de interatividade. E você pode fazer isso com CSS e vamos usar uma pseudo-classe para fazer isso. Então, vamos dizer um cabeçalho hashtag como fizemos antes, cochilar dentro de que âncoras dentro desses cavaleiros. Então, para usar nossa aula de pseudo ah, colocamos um cólon, não um cólon, um resfriado, e Andi queremos usar para pairar a aula de judô. Se você quiser ler um pouco sobre ele, clique sobre ele e leia Aqui ele diz que a pseudo-classe hover fornece enquanto o usuário designa um elemento que é um dispositivo apontador, mas não é ativado. Isso significa, uh, cursores sobre os elementos. exemplo, por exemplo, um agente de usuário visual pode aplicar para atender a uma classe quando o ponteiro do mouse do cursor passa sobre uma caixa gerada pelos elementos, etc. Então, agora que adicionamos nossa classe pseudo, vamos dizer que a cor de fundo muda para o valor hexadecimal de desordem que pegamos dinheiro e vírgula para terminar, como sempre, e vamos mudar um pouco de preenchimento na parte superior e na parte inferior do acolchoamento. Parece calmo. Quatro pixels e preenchimento inferior também vai procurar pixels. Então de volta para o navegador e atualizar, e você notou que a cor muda fora do item de menu que passamos o mouse sobre, e ele também apenas um pouco de acrescenta que eu sou ênfase espacial adicionando um par extra de pixels na parte inferior e em seguida, o topo, o que é muito legal. Então isso não parece ruim. Bom. E é isso que para Lesson Tree em seus projetos de desenvolvimento Web verá você na próxima. 28. 27 Projeto de site no: bem-vindo à parte para e são sobre projeto de desenvolvimento aqui. Vamos continuar com o estilo sobre elementos HTML. Então vamos estilizar são artigos. Agora, vamos, uh, ótimas regras para isso. Então vamos apenas criar uma espécie de regra genérica de artigo. Então o artigo H um h dois odeia árvore 84 h cinco e H seis. Então regra geral para Será que ele vai ser colocado aqui, títulos de mel basicamente dentro de nossos artigos o que estamos vendo dentro de qualquer artigo vai dizer, cor de fundo do tipo Paris, que com 100 por cento em cor de fundo, será dis h. Você vai notar que há um monte de ferramentas realmente manuais que são dadas a nós neles, Tanna. É por isso que gosto de trabalhar comigo. E este é um deles. Anne Coulter. Os valores que você usou até agora no projeto serão apresentados a você de forma muito útil no menu. Ok, então nós vamos usar esse grande fundo que a cor dos textos, claro, precisa de você branco, que é hash. Geralmente são seis valores em um código hexadecimal. Será que suas novas mãos curtas como os efes de árvores vão fazer para White. Se você quer ser realmente gentil e pedante sobre isso, você pode colocar em todos os seis. Não está errado com isso. Então vamos verificar isso e você vai ver agora que os títulos e todos os artigos têm este grande fundo e sim, texto, é branco. Agora, os artigos iam deixar textos forrados. Mande mensagem para a linha. Eu sou. Na verdade, eu vou colocar isso em uma regra mais genérica para artigos, artigo seguinte, artigo seguinte, turno de patrulha esquerda após formatação fixa cinco. Bom. E o rodapé precisa ter algum estilo também. Então o que, você vai usar um pé ou assim apenas referido diretamente assim, e nós vamos dizer que cor de fundo em fez a mesma coisa? Cor usar branco linha fixa. Acredito que o centro especificou. Deveria ser, mas vou me livrar dessas bordas vermelhas agora porque estão começando a me irritar. Provavelmente te irritando porque você é feia. Então, basta encontrar qualquer lugar que eles coloquem neles. Quero dizer, que usar uma melhor em certas áreas? Tudo bem. Bom para isso, Dr. Borda Vermelha não é agradável de se olhar. Agora o que vamos fazer é entrar na nossa regra do artigo e vamos colocar uma fronteira. Será um pixel de novo. Médicos de pixel. Não vai ser lido. Ele vai ter o grande valor, que é a árvore após árvore após curso precisa ser frio e depois de fronteira. E eles têm os artigos agora batendo zero para artigos e tendo zero para títulos em artigos. Está bem. Uh huh. Sem fotos. Isso, na verdade, o que podemos fazer um pouco diferente aqui, em vez de mexer com o preenchimento é artigo Border um pixel viu dia filha. Pegue essa regra do momento. Trabalhar um pouco mais tarde. Então vamos usar um dos nossos CIA, diz comentários. Eu apenas comentou para fora Para o momento, CSS comentário basicamente começa com um corte quatro no gástrico e termina com um Astrakhan executa nacional. Então acabe com qualquer coisa que queiras comentar com isso. Ok, agora, então nós desenhamos um monte de conceitos básicos para um site aqui, e quando a próxima coisa é que podemos querer fazer é colocar em algum tipo de um controle deslizante e é nisso que vamos trabalhar na próxima lição 29. 28 Projeto de site no Pt 5: por isso, bem-vindo ao projeto Park 5 na construção do nosso site. Então vamos continuar com algumas de nossas informações de estilo, descobrindo que isso é o que temos até agora. Então vamos colocar uma fronteira em torno de nossos artigos sem qualquer tipo de espaço no topo. Agora vamos fazer isso é que podemos remover para comentar. Colocamos a última lição sobre nós só vamos entrar aqui para esta regra. Para todos os títulos. Dentro de artigos iam dizer casamento e top zero pixels que o leva embora. Mas nós queremos ter algum espaço entre os artigos, e agora eles estão completamente nivelados, mas todos os outros elementos. Então, para fazer isso, vamos entrar em nossa regra de artigo em si. Vou fazer um casamento e falar sobre o casamento deles. Mas vamos torná-lo um fim, que é basicamente a altura de um caractere, como um caractere de texto, e isso cria um pouco de espaço. Então isso parece um pouco melhor. E podemos usar essa mesma margem para o rodapé. Ótima. Agora que temos alguma estrutura básica no lugar, que tal um pouco que é uma característica muito comum em muitos sites. Bem, podemos entrar aqui em nosso conteúdo. Seção principal sobre apenas o primeiro artigo com isso e outra coisa, e vai ser o nosso controle deslizante. Então, Dave, eu era igual ao controle deslizante ativo. Vou usar uma lista ordenada dentro de você e listas ordenadas. Nós vamos ter esses itens, e cada um desses itens da lista vai ter uma imagem ligada. Ele vai levar uma das imagens dentro de nossa pasta de imagens deslizantes, as imagens, imagens deslizantes. O 1º 1 será dizer, Chimpanzé Espaço Copiar baseado. Então temos uma árvore eu e uma certa próxima. Certo, não quero que aconteça. Oito aventureiro ponto Ele e você conhece Jay Peak. Ótimo no próximo será isso é como o cowboy PNG. Então vamos nos certificar de que temos em espécie de digitar para baixo e obter incorretamente. Não acredito que tenhamos imagens, imagens deslizantes, nave espacial, espaço, espaço, seguradora macaco chimpanzé. É como o garoto, eu só tenho que reformatar para que ele possa ler mais claramente o que está acontecendo aqui. Item perdido. Bem, eu bem, então temos o nosso Div. A lista de proprietários fechou aqui. Este item que começamos, destruiu-o. Está bem? É um problema com isso, por alguma razão. Então basta copiar de outro lugar e colá-lo novamente. Mudou-nos também. Controle. Está bem. O que estava errado. Alguém? Ele está consertado agora. Então temos nossas imagens de árvore dentro de itens da lista de retirada que eu d é igual a um. Eu era igual a dois. Eu era igual a um tratamento em um ciclo. As ideias de Trudeau para mostrar um depois de teatro após teatro, o único a ter alguma classe também, a classe vai ser sim, comercializável este Copie em torno de todos os itens da lista. Ok, então cada um tem um indivíduo que eu gostaria de entrar. E todos eles têm a mesma altura de classe. E finalmente, um deles precisa ter um estilo em linha que define exibição em, uh, display para bloquear. Mas estes por agora, e nós vamos ter algum resfriado que basicamente vai se esconder fora dos teatros. Vai andar de bicicleta para que o pai exiba o bloco. Ele está definido para um deles nos altares são definidos como conhecido em exibição definido como conhecido , e Alan não não é maior, então eles estão todos na mesma posição. Mas só um deles aparece de cada vez. Então, a cada poucos segundos tem um ciclo entre mostrar uma imagem 10 mostrando um extermínio e mostrar a mim e a próxima imagem depois disso. Então, se verificarmos nossa página web, obviamente nada está acontecendo ainda as imagens que apenas lá. Então precisamos nos livrar dessa bala. Claro que podemos fazer isso. Aqui no nosso CSS e na verdade lista, podemos colocar em um estilo rapidamente aqui, que meus deveres, seu estilo take. Então você vai dizer que este estilo também quer puxar as imagens para a esquerda, que vai ser fácil o suficiente de fazer. Então você diz esquerda Imagine é zero picaretas e ver onde isso fica primeiro. Não nos leva a lugar nenhum. Realmente? Então vamos colocar um valor de menos e menos 40. Ok, na verdade é casamento e foi embora. Não a margem esquerda. Erro fácil. Imagine que Left quer o casamento. Certo, isso é quase perfeito. É ótimo quando as coisas funcionam assim. Então, agora essa é a posição em que queremos que ele esteja. Todos eles são que eu vou armar tudo. Então, qualquer um desses shows a qualquer momento, no também no mesmo lugar aqui, apenas ciclismo um depois do jantar. Ótima. Então, isso faz isso por esta lição. Obrigado por acompanhar e eu vou vê-lo no próximo tutorial onde vamos começar a escrever para se ajoelhar. Na verdade, fazer isso funcionar, o que é muito legal.