WORKSHOP. 2ª Sessão 08/10/15

Tamanho: px

Começar a partir da página:

Download "WORKSHOP. 2ª Sessão 08/10/15"

Raphael Barreto Back
8 Há anos
Visualizações:

1 WORKSHOP 2ª Sessão 08/10/15

2 HTML e CSS

3 JavaScript: O que é? Linguagem de programação interpretada pelo browser Corre do lado do cliente Permite manipular elementos da página (HTML, CSS)

4 Eventos e Funções onclick onload onmouseover Geram reacções (funções) onmouseout

5 Por onde começar Usar tag de script Alertas para o utilizador JavaScript à base de eventos <script> function helloworld() { alert("hello World!"); } window.onload = helloworld; </script>

6 Onde colocar o JavaScript Ficheiro Profile Animation.js JS external file

7 Eventos e Funções (2) Ficheiro Profile Animation.js function helloworld() { alert("hello World!"); } window.onload = helloworld;

8 Eventos e Funções (3) Ficheiro Profile Animation.js function helloworld() { alert("hello World!"); } window.onload = function() { helloworld(); }

9 Perguntas?

10 Elementos DOM DOM : Document Object Model

11 Elementos DOM (2) function changebodybg(){ document.body.style.backgroundcolor = "white"; } window.onload = function() { helloworld(); changebodybg(); }

12 Usando identificadores

13 Usando identificadores function editelement(id){ document.getelementbyid(id).innerhtml = "<p> My First JS test </p>"; } window.onload = function() { helloworld(); changebodybg(); editelement('helloworld'); }

14 Usando identificadores (2) function addstyle(id){ var myelem = document.getelementbyid(id); myelem.setattribute("class", "center"); } if(!myelem.hasattribute("style")) { myelem.setattribute("style", "font-size:150%; background-color:#ccebeb; color: Cadetblue;"); myelem.style.textalign = "center"; }

15 Usando identificadores (3) window.onload = function() { helloworld(); changebodybg(); editelement('helloworld'); addstyle('helloworld'); addstyle( calculator ); }

16 Perguntas?

17 Aplicação: Somador

18 Eventos em HTML

19 Variáveis em funções function mycalc(){ var form = document.getelementbyid("form"); var a = form.elements.first.value; var b = form.elements.second.value; }

20 Aplicação: Somador (2) function mycalc(){ var form = document.getelementbyid("form"); var a = form.elements.first.value; var b = form.elements.second.value; var result = parseint(a)+parseint(b); document.getelementbyid('helloworld').innerhtml= <p>result: " + result + </p> ; }

21 Aplicação: Somador (3)

22 Perguntas?

23 Aplicação: Menu

24 Aplicação: Menu (2) function gotomenuitem(id){ document.getelementbyid(id).scrollintoview(true); }

25 Aplicação: Menu (3) <img src="arrow.png" style="width:100px;position:fixed;bottom:20px;right:20px; align:bottom; " onclick="gotomenuitem('header') />

26 Aplicação: Menu (4)

27 Perguntas?

28 Aplicação: Troca de imagens function changepic(elem, path){ elem.src=path; } <img src="photo.jpg" style="width:400px;" alt="photo can't be loaded" onmouseover="changepic(this, 'Photo2.jpg')" onmouseout="changepic(this, 'Photo.jpg')" >

29 Funções temporais Date() getdate() Returns the day of the month (from 1-31) getday() Returns the day of the week (from 0-6) getfullyear() Returns the year (four digits) gethours() Returns the hour (from 0-23) getmilliseconds() Returns the milliseconds (from 0-999) getminutes() Returns the minutes (from 0-59) getmonth() Returns the month (from 0-11)

30 Funções temporais (2)

31 Perguntas?

32 PHP: O que é? PHP: Hypertext Preprocessor Corre num servidor e não no computador do cliente Linguagem interpretada

33 Por Onde Começar Ficheiro teste.php <html> <?php echo hello world ;?> </html>

34 Por Onde Começar <?php $texto = hello ; echo $texto world ;?>

35 Funções <?php function escrever() { echo hello world ; } escrever(); // call the function?>

36 Perguntas?

37 Formulários Parte HTML <form action= form.php" method="get"> Name: <br><input type="text" name= name"><br> Message: <br><input type="text" name="message"><br> <input type="submit" value="submit"> </form>

38 Formulários Parte PHP <?php $name = $_GET[ name ]; $message = $_GET[ message ]; echo hi $name, <br> this is your message: $message ; if ($name == nico ) echo <br> WELCOME NICO ;?>

39 Parte 1 <?php $name = $_GET[ name ]; $message = $_GET[ message ]; echo hi $name, <br> this is your message: $message ; require .php ;?>

40 Perguntas?

41 Parte 2 neecist.org/workshop/ Mudar o de destino (variável $to) $subject ="Mensagem recebida no teu site Pessoal"; $to="nuno@gmail.com"; //O teu $body= "Recebeste um de $name: <br><br> $message";

42 Parte 3 neecist.org/workshop/phpmailer.zip Descomprimir e colocar a pasta no servidor Nota: vai para o spam

43 Perguntas?

44 Domínios O que são? Neecist.org Nunonico.com Godaddy.com - Compra de domínios barato Dot.tk Dominios.tk grátis

45 Alojamento O que é? O local onde vão ficar armazenados os ficheiros web, este local tem de estar sempre acessível na internet. - tem solução gratuita OHV.com tem solução de domínio que inclui alojamento

46 Perguntas?

Documentos relacionados

Curso De PHP. Aula 4. Formulários. Cookies. Session. Mail

Curso De PHP. Aula 4. Formulários. Cookies. Session. Mail Curso De PHP Aula 4 Formulários Cookies Session Mail Formulários Nós preenchemos diariamente diversos formulários web, seja para se logar e-mail ou criar uma conta em um site. Nesta parte do curso, vamos