JavaScript responsivo: Ajuste o tamanho da tela
•Transferir como PPTX, PDF•
0 gostou•49 visualizações
Fala Pessoal, Vamos dar inicio hoje a um curso de javaScript, nos nossos vídeos nós vamos fazer uma introdução a essa linguagem de programação que é tão famosa ai no mundo, vamos conhecer não todas as funções do javaScript mas sim o mais utilizado, é claro que diante de um problema ou outro nós vamos ter que buscar outras formas de resolução. Nessa aula vamos entender um pouco sobre como alterar o tamanho de imagens no seu navegador da internet e vamos entender um pouco sobre o termo ser responsivo. Referencia utilizada que eu recomendo a leitura: MORRISON, Michael. Use a Cabeça JavaScript. Editora Alta Books Ltda, 2008.
Recomendados
Recomendados
Mais conteúdo relacionado
Destaque
Destaque (20)
Semelhante a JavaScript responsivo: Ajuste o tamanho da tela
Semelhante a JavaScript responsivo: Ajuste o tamanho da tela (20)
Mais de Erick L. F.
Mais de Erick L. F. (20)
JavaScript responsivo: Ajuste o tamanho da tela
- 2. Tamanho da Janela Você já parou para pensar no tamanho da sua janela? E se eu disser que isso é algo importante para o seu site, ou seu joguinho de navegador, você acreditaria? Bom vamos conversar nessa aula um pouco sobre isso, pois pense quando você está desenvolvendo uma aplicação, seja ela para Desktop ou para Web, você de inicio sempre pensa, se eu desenvolver e ele funcionar está ok, mas não é bem assim, para você atingir o máximo de usuários possíveis você deve começar a pensar primeiramente pelo tamanho do seu software e para a Web isso tem que ser pensado também, afinal por quantos dispositivos hoje podemos acessar a Web, celular, tv, pc, notebook, videogames, e tantos outros que surgem a cada dia no mercado, e você já viu o tamanho das janelas de cada uma dessas opções, pois bem, o celular e pequeno no pc, pode ser grande, na tv também, mas como fazer o seu site ter o mesmo tamanho para qualquer dispositivo para que ele se adeque a este, isso mesmo estamos falando sobre sites responsivos, ou seja, se adequa ao tamanho da tela do dispositivo, hoje vamos falar sobre isso.
- 3. Alterando O tamanho da Sua Imagem Para alterar o tamanho da nossa imagem, podemos criar uma função no nosso JavaScript que realiza essa alteração, de inicio vamos alterar apenas o tamanho da imagem e pra isso vamos colocar um código JavaScript dentro da função para fazer com isso aconteça com a imagem, veja: Document.getElementById(“rockImg”).style.height = “100px”;
- 4. Código da Aula <html> <head> <title>iRock - A rocha virtual de estimação</title> <script type="text/javascript"> function resizeRock(){ document.getElementById("rockImg").style.height = "300px"; } function touchRock(){ var userName = prompt("Qual é o Seu Nome?", "Digite o seu nome aqui");
- 5. Cont.. Código da Aula if(userName){ alert("É tão bom encontrar você por aqui - " + userName + "."); document.getElementById("rockImg").src = "rock_happy.png"; setTimeout("document.getElementById('rockImg').src = 'rock.png';",0.1 * 60 *1000); } } </script> </head> <body onload="resizeRock(); alert('Olá, eu sou sua rocha de estimação, que bom que você veio me visitar'); "> <div style ="margin-top:100px; text-align:center"> <img id="rockImg" src="rock.png" alt="iRock" style="cursor:pointer" onclick="touchRock()"/> </div> </body> </html>
- 6. Conheça nosso canal no Youtube Canal: https://www.youtube.com/channel/UC7FWW7I5ZW5T9V7dQnEtD7A
- 7. Referencia Recomendamos a leitura MORRISON, Michael. Use a Cabeça JavaScript. Editora Alta Books Ltda, 2008.