Curso de HTML5 - 25 - Integrando JavaScript e HTML5

preview_player
Показать описание
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
welcome to shbcf.ru