Curso de HTML5 - 25 - Integrando JavaScript e HTML5

Показать описание

Como juntar JavaScript e HTML5 em uma mesma página. Veja como integrar scripts aos seus códigos estáticos em linguagem HTML.

Usando os métodos ONMOUSEOVER e ONMOUSEOUT do JavaScript para executar um procedimento em script chamado mudaFoto().

Curso em Vídeo

Patrocínio

Рекомендации по теме

Комментарии

Estude pelo nosso site e tire certificado de 40 horas. Curso completo em:

Comecei o curso a 2 dias, nao tinha noção alguma de nada de HTML, só sabia que existia, ja estou nessa aula, e é muito viciante, é como um seriado, quando termino uma aula quero logo ir para outra para adquirir mais conhecimento e dar andamento ao projeto. Curto, compartilho me inscrevi. Incrível!!! Parabéns. Espero que seus patrocinadores continuem acreditando e que venham mais outros. Sucesso!!!

jubascariots

A cada aula fico mais entusiasmado e maravilhado.

TheCoyote

O mais incrivel é que é um puta curso bacana e não nos pede nada além de curtir e compartilhar... Obrigado Guanabara, vc é foda...

Corlite

To vendo esse vídeo em 01/01/2019 venho dizer que o Gustavo Guanabara é o meu professor de tecnologia que ja vi.

fernandosouza

dobra o salário desse viu patrocinador!

andrewslbraga

00:00 Intro e Apresentação
01:36 Início da aula
01:44 function mudaFoto( )
03:02 onmouseover
04:43 onmouseout
06:07 Completando nos outros <li>
09:49 Carregando o arquivo JavaScript fora do HTML
12:39 Formatando as outras páginas do site

fernandovideos

Meus notes da aula:

NOVIDADES:

O Evento onmouseover="" serve para executar alguma FUNÇÃO *ENQUANTO O CURSOR ESTIVER EM CIMA* do elemento.

Para o código não ficar pesado e poluído visualmente, podemos migrar todas as configurações JavaScript para um arquivo externo, igual fizemos com as configurações CSS. Para fazer isto, basta criar uma tag <script> (ele criou ela ENTRE o <head> e o <body>, porém eu testei dos 3 jeitos: dentro do <head>, entre o <head> e o <body> e dentro do <body> e todas estas maneiras funcionaram normalmente) e, dentro de sua abertura, você insere o atributo src="" informando o diretório do arquivo JavaScript. Ex da aula:
<script
*Atente-se:* o atributo src="" está dentro da ABERTURA da tag, e não dentro do CONTEÚDO da tag. Eu fiz isto por desatenção e fiquei quebrando a cabeça até descobrir o que eu tinha feito de errado. Inclusive demorei um pouco porque o VSC não estava relatando erro algum :/

Uma otimização que fiz:

Ao invés de repetir: diversas vezes dentro de cada tag <li>, eu pus este código apenas 1 vez dentro da tag <ul>, que é pai de todas as tags <li>. Então ficou assim:

<ul
<li
<li
<li
<li
<li href="fale-conosco.html">Fale conosco</a></li>
</ul>

PROBLEMA COM BACKGROUND (SOLUCIONADO):
**leia o edit do final**

Ao terminar de fazer as alterações propostas pelo Guanabara no arquivo specs.html, eu percebi um problema no meu background-color: do div#interface. Na aula, o background do Guanabara estava englobando até o <footer>. Mas o meu estava indo até o "Tecnologia > Inovações" e parava. Dali para baixo, a cor que ficou foi a do body, que é: background-color: .Eu tentei de tudo, mexi no margin, padding, width de vários elementos, e nada resolvia. A única coisa que resolveu foi apagar o "float: left;" do section#corpo. Entretanto, esta solução estragou o index.html, jogando a notícia aside#lateral lá para baixo. Então para solucionar este outro problema, ao invés de fazer esta alteração de maneira GLOBAL, no estilo.css, eu decidi fazer esta alteração individualmente em cada um dos documentos. Então eu fui no specs.html e criei esta seção <style> dentro da tag <head>:
<style>
section#corpo {
float: none;
}
</style>

E repeti este processo nos demais. Então o index.html ficou funcionando normalmente e o background das páginas do menu estão funcionando como deveriam, englobando até o <footer>. Não sei se estas alterações podem trazer problemas futuros, mas o background arrumou xD

**edit:** venho do futuro dizer que na aula 27 ele faz uma alteração no specs.html que resolve este problema. Ele cria uma tag <section> englobando todo o conteúdo visual da página e coloca o id="corpo-full" nesta section, assim:

<section id="corpo-full">
Glass > Especificações
Raio-X no Google Glass
por Gustavo Guanabara
Atualizado em 01/Maio/2013

Clique em qualquer área destacada da imagem para ter mais informações sobre os recursos do Google Glass. Qualquer ponto vermelho vai te levar a um lugar cheio de novas informações.

[AQUI ENTRA UMA IMAGEM]
</section>

Por ser id="corpo-full" e não id="corpo" , a propriedade float não será mais aplicada e resolverá o problema.

LuuuKz

A cada aula fica mais complicado ainda...mas eu sou muito grato de ter um professor otimo desse.

Erick

Vc sabe quando o professor é bom e a aula foi bem preparada quando vemos há toda uma série de exercícios de fixação para serem realizados! Parabéns!

andreranulfo-dev

Galera, fiz diversas tentativas e consegui resolver o problema do redimensionamento da imagem conforme abaixo, mexendo no arquivo css:

header#cabecalho img#icone { position: relative; left: 730px; top: -50px; }

Testei no Chrome, no Firefox e na porcaria do IE, tudo certo!

calmotanjos

Parabéns a todos os envolvidos nesse projeto, principalmente ao nosso professor, o Senhor Gustavo Guanabara.

Thorhent

Aula espetacular... Na aula passada eu não tava conseguindo finalizar o código ai fui nos comentários e os meninos falaram que o javascript poderia ter mudado desde quando esse curso iniciou e como eu tava com problemas com o java, acreditei na conversa. Cara! Foi só prestar mais atenção na aula e deu tudo certo o curso está super ATUALIZADO. Obrigado galera do Curso em vídeo.

raimundojoelrocha

Muito boa TODAS as trinta e poucas aulas de HTML 5, recomendadíssimo, obrigado. Ganhou vários likes.

MauriciodPaula

Parabéns seu curso é poderoso, simples e dinâmico, tenho aprendido muito contigo.

Deus lhe abençoe e continue multiplicando seu conhecimento, para que mais pessoas possam usufruir do mesmo...

bassiconstrucoes

Gosto muito das aulas do prof . Guanabara aprendi muita coisa com HTML já estou concluindo e praticando o curso e logo começarei as aula de JAVA e logo em seguida darei início às aulas de PHP tbem.

PJXO

Excelente curso !!!! Professor Guanabara excelente didática.

mauriliamaia

cara, que curso, que aula!! faz parecer fácil!! Hostnet, toyshow e jetbrends, vocês são top por patrocinar esse cara!! obrigado guanabara!

Mattos

muito obrigado pelas aulas Guanabara, me ajudou muito na minha matéria de Html5, agr estou tendo aula de IHC(Interação Humano Computador), e estou tendo introdução a JavaScript, mas já aprendi MT com suas aulas

LINKINPARKSPAMPT

tudo muito bem até o momento que tenho que clckar em especificações para ira para sua devida página: nesse momento, não surge nada, nada mesmo.Estou aprendendo muito mas realmente isso ai é o meu calo de extimação!!!!

projetosfreirevargem

Curso de HTML5 - 25 - Integrando JavaScript e HTML5

Curso de HTML5 - 25 - Integrando JavaScript e HTML5

Curso de HTML5 - Aula 25

Curso de HTML5 - Aula 25 - Formulários (Form, Formaction, Formmethod, Formenctype, Formnovalidate)

Curso de HTML5 desde Cero hasta Avanzado | 25 - Etiqueta form parte 1

CURSO de HTML5 desde CERO 2021 - #25 - Navegación con anclas

Curso de HTML5 e CSS3 #25 - Página de encontrar vagas responsiva

Curso de HTML5 - 00 - Site Completo - by Gustavo Guanabara

Curso de HTML5

ESTRUTURA E SEMÂTICA DO HTML5 EM 25MIN

(25) — Enlaces con Almohadilla a Páginas Externos en HTML — Curso de HTML5

Curso de HTML5 #25 - O que são listas aninhadas no HTML? Como criar?

Curso de HTML5 - 05 - Tags Básicas em HTML5 - By Gustavo Guanabara

Curso de HTML5 - 21 - Interfaces em HTML5

APRENDE a usar la etiqueta FIELDSET y LEGEND [HTML desde cero] #Shorts - 25

Curso de HTML5 - 27 - IFRAME em HTML5

Curso de HTML5 e CSS3 Responsivo Aula 25 Criando rodapé utilizando a tag footer do HTML5

Curso Basico HTML5 desde 0#25 Pagina de Log In con HTML y CSS (Final del curso!) Parte 1

CSS Tip #25 - CSS-Only Modal #shorts

HTML Input Tags List Tutorial For Beginners (Web Development)

Curso de HTML5 - 23 - JavaScript com Objetos

HTML Style Guide Recommendations | #html #coding #technology #htmlcoding #htmltutorial #html5

Curso de HTML5 básico | Cursos Platzi

Diplomataura en Desarrollo Web FrontEnd - 100% online - Certificación oficial UTN #cursosonline #utn...

Curso HTML5 + CSS3 - 25 Prefijos