CURSO TÉCNICO EM DESENVOLVIMENTO DE SISTEMAS | WEB DESIGN AVANÇADO | COMPETÊNCIA 4 | AUDIODESCRIÇÃO

July 27, 2019 posted by



vt de abertura educação à distância diferentes formas geométricas se movem cortadas pelas cores azul verde amarelo e vermelho se transforma na lobo da escola técnica estadual professor antônio carlos gomes da costa às cores e formas se misturam em um fundo azul e vermelho adachi à direita da tela o nome educação à distância o curso técnico em desenvolvimento de sistemas web design avançado conhecer os fundamentos do jeito é o lá chegamos na nossa quarta competência everton mendonça descrição ele está em pé é branco cabelo preto curto olhos castanhos barba grisalha veste camisa azul claro visto da cintura para cima conhecer os fundamentos do jeca qual é réu quer é uma biblioteca o que é uma biblioteca um bando de programadores bem espertos eles criaram um outro de de funções e javascript que auxiliam que fazem um básico mas auxilia muito a vida de programadores java certo muito mesmo a filosofia deles é escreva – faça mais então hoje é caro é muito popular é muito usado a gente pode usar o javascript é normal mas com jack bell ea gente vai escrever – a gente vai fazer mais rápido só que a gente tem que aprender como utilizava uma pra que não quer que ele facilita nossa vida a gente ele facilita a navegação do documento html em achar as tags achar o jai de achar os clash aos alimentos leves que a gente que a gente precisa para poder manipular o documento a gente seleciona melhor esses elementos a gente cria nem pode criar animações com ele já vem com algumas animações pré-determinadas que a gente pode combiná las a gente pode a gente vai ver na próxima competência a gente pode manipular e eventos a gente descobriu que são esses eventos é desenvolver aplicações ajax que aí é um programa sou mais complexa você precisa ter o básico para poder participar ajax aqui a gente não vai ver já que você pode pesquisar na internet sobre ele sobre ele uma vez que a gente já tem um básico ea gente e ele também facilita criações de plugins então quando a gente já sabe muito o que a gente vê uma funcionalidade que ela pode ajudar outros programadores a gente programa transformá-lo em volume e entrega pode entregar gratuitamente pode vender mas é normalmente o pessoal da comunidade entrega por plugins muito facilmente com o jack wyllie certo então que eu posso usar o diesel primeiro você tem que que baixar então hoje você tem duas só você baixa ou você utiliza o que já está na internet e não tem um meio legal é você usa os dois e ver o que mais lhe interessa tá então vamos ver essas duas formas é você vai fazer o download na página do jael então se você decide puxar ele para sua máquina o código ele é gratuito e aberto você pode abrir ver como é que foi feito um certo mas é uma programação de alto nível então é bem complexa então se você quiser você pode baixar o quanto você baixa o código na no site do jacaré pontocom então laino slide fazendo o download da biblioteca você tem a página inicial do jacaré onde você vai puxar o download nele tem dois links que estão logo abaixo do slide você tem a versão com comprimida e aversão diz comprimida é qual a diferença entre eles é que na versão comprimida ele é mais rápido então é uma versão de produção então quando você disponibiliza seu site você coloca o arquivo sozinho na versão comprimida ea versão comprimido é difícil de ser lida por ela está toda junta tinha lá todo junto todas as funções apertadinhas na função disso comprimida não ele está com um código bem com contexto ele é um código bem maior e ele está bem espaçado então ele serve pra você abrir e ver a aprender sobre ele quando as duas a gente vai usar o que faz a gente pode usar um outro você crescer e aí qual você vai querer usar armas utilizar seu site utiliza a versão comprimida uma vez que você baixa seu site você ou melhor uma vez que você baixa a biblioteca os arquivos da biblioteca você precisa linkar com sua página web então se criou se o código html a sua biblioteca está fora em outros arquivos você tem que juntar os dois então como é que você faz isso aí no slide e brincando com o documento html você vai ver o retângulo amarela que mostra o código que você utiliza pra juntar o seu html com java script é o que esse esse comando vai fazer vai pegar todo o código java script e na hora que lê no navegador ele junta os dois então seu código html vai poder usar o java script então é aí que você deve colocar dessa forma que você deve colocar agora observe que você tem que que no link no link no slide no nomes em 11 strong verde na no texto verde está o nome do arquivo verifique qual foi a versão que baixou a comprimida ou a descomprimida e coloque o nome adequadamente não vai errar não sei lá tem mim pontos djs você coloca a mim por js não tem você não coloca beleza então há tempo pra isso a outra forma de se utilizar a biblioteca tem o óbvio até que ela é usada e tanto mas tanto site que a google ela disponibilizou o arquivo sozinho no na nos servidores dela pra você usar isso então você não precisa baixar você pode se você tem internet constante na sua máquina você pode simplesmente colocar essa linha que está escrito ali no slide utilizando um repositório então ele vai estar o arquivo lá no no servidor do gol e aí você pode simplesmente copiar essa primeira linha no lugar daquela outra então ao invés de se colocar aquela outra baixar o arquivo e colocar aquela outra linha de estudo anterior você simplesmente copiar essa primeira linha caso a microsoft também disponibilizou a mesma versão do arquivo então tanto pode ser uma quanto pode ser a outra não colocar as duas juntas ou é uma ou a outra então se escolhe se você vai utilizar o link do google a primeira linha ou se você vai usar o link da microsoft a segunda linha certo então você colocou lá na sua página a professora mas eu tenho 30 páginas eu vou ter que colocar em todas elas vai certo então toda a página que você quiser que tenha o dr você tem que colocar esse e como é que se usa como é que se usa hoje é que o amo disse que ele tem a capacidade de selecionar o o o seu documento mais facilmente o seu elemento no documento html e executar uma ação pronto então é dessa forma que a gente vai ter observa a iná no slide sintex básica que você tem um cifrão que é a forma como o seu uso de excel e você coloca um cifrão e você tem entre parênteses seletor esses eleitores vai ver o que é mas é um são três formas que a gente tem de selecionar um elemento é através de jerry cannon ponto ou seja pra esse elemento a gente vai executar uma ação ea gente tem um parente de novo essa ação ela a gente também vai ver várias ações disponíveis que tem mas aí no slide que você está vendo a gente já tem alguns exemplos o diz é nesse próprio elemento então vamos ver o que a gente está trabalhando com um parágrafo quando a gente coloca disso a gente tem se referindo a este parágrafo que a gente tá usando a gente quer selecionar parágrafos a gente coloca uma tag a gente coloca o nome da tag então aí num exemplo da linha 3 a gente tem um p a gente está selecionando a tag mas vamos ver isso com mais detalhe mais na frente ewerthon e isso é uma observação a gente tem um o documento html ele é pego através da palavra chave documento observa que o que a gente está funcionando com um cifrão é documento é o documento completo quando ele for totalmente lido é que a gente executa as funções então essa daí é um ato uma uma prática segura você espera o documento html ser todo lido quando ele terminar segredo é aí que o javascript começa a ser executado e essa função é o que garante que isso vai ser processado desta forma então toda vez que você for criar um código javascript eu aconselho você usar essa função ride então você copia ela do jeito que está aí no slide evento rede certa então ser copiada do jeito que ele está e qual a onda que eu vou colocar a programação no lugar dessa linha 2 você coloca todo o seu código e então tudo o que tiver que ser executado você coloca nela dentro da função rede então agora como é que você agora que eu sei e todos os exemplos ele vai ter essa função rede você pode ver aí no slide selecionado por tag que você tem é é uma função rede então todas elas vão ter isso aí você já sabe para quê ela serve também é e o código que eu vou falar sobre ela vai ser dentro então observe que a gente pode selecionar uma uma ou mais tags do documento html através do seletor cifrão utilizando o nome dela então não é nosso exemplo a gente está selecionando um botão botton a tag botton 22 então a gente simplesmente coloca o nome da tag é assim que a gente usa bem mais simples do que em java script selecionando pelo atributo então a gente não esclareceu lecionar pelo atributo a gente tem uma segunda seleção na linha 3 observe no código que ele está com sublinhado amarelo aí a gente tem é o atributo a id ele vai ter um agente pode ser pelo e de quanto pode ser pelo clash o id a gente coloca o jogo o símbolo do jogo da velha ou é uma rech não é uma hashtag porque não têm a tag a gente só tem rech então esse símbolo zinho e hash ele ele é colocado na frente pra definir um ai de você você vai selecionar apenas um elemento que vai de ele é identificado o único então ele só vai ser um e se tiver dois aí o cara que escreveu html fez errado porque colocou dois aí disse igual ele só pode ter um agora observe nesse slides selecionando a tribo ter o atributo classe então como é que a gente diferencia o e do clash o clash ele tem um ponto na frente em vez de ser a hash o jogo da velha a gente vai ter um ponto ele vai definir que é uma classe quando a gente usa já que harry então temos a biblioteca de tinha que era gente quer é só selecionar 11 os atributos que classe pode ser mais de um o pode ser um ou mais os atributos que tenham a a a classe retângulo então a gente coloca ponto retângulo dentro do par entes na no seletor de cifrão também então assim que querem fazer sair com um estalar de seleção pelo atributo classe você vê que ele está sublinhado essa forma pela linha amarela e agora josé ventos um dos eventos é algo que é oco que acontece no documento html pode ser é vento e tempo pode ser pressionado e tecla clique do mouse pode ser várias coisas não se larga e eventos de e quebre a gente tem a classificação desses desses vários eventos então vou falar por alguns deles no primeiro aí na primeira coluna temos eventos com o mouse então o clique é um evento quando a gente coloca feito nos exemplos passados e selecionou botton e associou ação clique precisa colocar uma função nele então observe nos exemplos passados dos slides passado que a gente tem clique function então a gente está adicionando a função a função é algo que vai ser feito algo que vai ser realizado quando a tiver um clique de bl clique é o doubleclick é o clique duplo então você vai ter clique é naquele elemento ele capta aquele evento e realiza a função que você definiu a gente pode ter ventos de teclado como pressionamento de uma tecla o clipe prece é quando você pressiona os ea pressiona e solta é oq press quando você quer definir que o elemento vai ser na hora que pressiona mas não solta é o que dá um quando você quer que execute com que quando ele solte a tecla é o que up evento de formulário a gente tem quando submetia pressionado ou um outro exemplo é o foco que é quando você tem vários itens do formulário e ele passa de um para o outro então esse é o foco o blue é quando ele sai desse você terminar de digitar e vai pra outro elemento quando ele sai ele executa a função e os eventos de documento que é o que vem com o documento que o load os sais excluo que por policiais e mesmo quando se altera o tamanho da do navegador então isso aí modifica o tamanho do documento e assim não dá pra explicar cada um deles use teste e faça uma pesquisa na internet que você vai encontrar exemplos de cada um deles em especial a prática é o que faz um bom programador então você tem o dever para poder aprender de repetir repetir porque até aprender cada um deles e ver a diferença entre um e outro mas vamos ver um exemplo nesse no nesses lares ontem exemplo você vê que eu estou usando a função rede de documento que é assim quando o documento todo foi lido aqui ele vai executar essa função e o que essa função é essa função é o código da linha 2 3 e 4 e o que esse quadro a 2 3 e 4 na linha 2 a gente tem a seleção do botão então no meu código html tem um botão eu associei a função click ou seja quando o botão for clicado aí ele vai executar a função uma outra função essa outra função está na linha 3 é essa linha que está destacada aí é o que ela vai fazer ela vai ter vai selecionar o elemento retângulo então ele vai procurar ele é uma classe então ele vai procurar todos os elementos retângulo tenhamos quatro elementos com um retângulo e vai chamar são ray essa função essa ação hayden ela esconde um elemento ela tava o elemento de um ele desaparece então quando apertar o botão esses elementos vão desaparecer do documento mais um mais um método o método on um método um ele é um grupo de eventos então como você pode ver aí no slide método 1 que venceu ontem o nosso exemplo eu dentro dele estou colocando 33 eventos observa aí a gente coloca o nome do evento dois pontos ea função então a gente tem um mouse em ter o mouse live e um clique do mouse em t é quando o ponteiro está sobre o elemento o mouse livre quando ele deixa de estar sobre o elemento eo click quando ele clica certo então observa o código vejo que estou alterando a propriedade de css ele tem pontos e ss e também utilizando disse ou seja do próprio elemento é tão bom então isso aí vai fazer a troca do background color ele vai sal terá as cores desses desse do background desses elementos obtendo a tag é obtendo a tag o texto e o valor de um campo então observa nesses light obtendo a tag o texto o valor de um campo como é que a gente vai recuperar uma uma o texto de um ataque por exemplo você tem a tag p ela tem um texto ela é que a gente pode pegar esse texto e usá lo a gente utiliza selecionamento e coloca este então teste a fez parente vai recuperar esse texto pra nós pra gente poder guardar uma variável e daí usar ele para algum alguma coisa quando a gente em vez de textos html a gente vai pegar a tag html que tiver dentro dele com o texto então a gente tem uma dívida que tem 1 pp que tem um emmy então a gente pega ou html dessa dívida vai pegar todo o parágrafo com o texto com tag com todo e quando a gente trabalha com formulário que a gente tem os campos em butte que cada um dos campos não são tags é uma tag mas o valor dela não está na tag em si a gente vai ter val essa essa função val ela vai pegar o valor que está editado num campo que o usuário digita naquele campo certo então teste html val deixe pra texto html pra tudo texto e html tags html e oval pra os valores dentro de campus de formulários e que se a gente quiser pegar o atributo o valor de um determinado tributo de uma tag html a gente quer saber aquele atributo sim a gente utiliza a função a ttr então essa função daí ela vai ter dois vai ter um valor a gente coloca o nome do atributo que quer então a gente quiser recuperar por exemplo o type feito ele está nesse exemplo dois lados e obtendo o valor do tributo você vai ver que o time dele o valor é botão certo então está sublinhado em vermelho e ele recuperou isso e na linha 3 do código você vê lá no finalzinho que eu tô com a ttr type então ele vai pegar o atributo type que o valor é button ele vai pegar esse valor zinho além do atribuído o atributo beleza e como é que eu faço para definir o conteúdo aí você usa os mesmos métodos então observe o exemplo e definindo com tudo isso lá e definindo o conteúdo que a gente utiliza teste html e atribuem e o atr-72 proteste que coloca o texto entregue fecha parênteses a ele atribui um html a mesma coisa só que você coloca com as tags html e no atributo você precisa definir o jogo o primeiro é o nome do tributo e o segundo é o valor dele então no a tr você prevê definir o nome do tributo e o valor dele certo com isso a gente finaliza mais uma competência a gente se vê é na próxima e estudo e prática que utiliza o fórum e o cara ainda estuda a sua principal fonte de informação às aulas as vídeo aulas elas tentam ajudar de alguma forma mas a principal fonte de informação é o seu caderno estudo também são direto juliana aguiar imagens juliana aguiar interpretação de libras davison da silva áudio-descrição jonara medeiros siqueira produção de vídeo joana rodrigues direção de arte miguel machado a edição anderson ferreira daniel albuquerque professor faltou everton mendonça design educacional davi de souza nascimento renata marques de otero terezinha mônicas início beltrão são do curso anderson élias coordenação executiva george bento catunda coordenação geral vasconcelos dutra vídeo-aula produzida em maio de 2017 conteúdo produzido para os cursos técnicos ea secretária executiva de educação integral e profissional em convênio com o ministério da educação relief brasil [Música]

No Comments

Leave a Comment

Your email address will not be published. Required fields are marked *