Embed Size (px)
Citation preview
2
Desenvolvimento web
www.triway.com.br
ÍndiceIntrodução 3
Estrutura HTML 4
Elementos HTML 6
Tags e Elementos HTML 6
Elementos de parágrafos 9
Elemento head 8
Elementos de formatação 9
Atributos 16
Imagens 18
Links 20
Listas 21
Div 23
Tabelas 25
Meta tags 29
Comentários 30
Formulários 31
Introdução ao CSS 35
Seletores 35
Cores e Medidas 38
Linkando CSS ao HTML 41
Dicas 42
Comentários em CSS 43
Introdução ao JavaScript 47
Inserinso JavaScript 48
Variáveis 50
Operadores 51
If e Else 54
For e While 55
Funções 57
3
Desenvolvimento web
www.triway.com.br
OHTML sigla que significaHyperTextMarkupLanguage, é uma linguagemdemarcaçãodehipertexto,criadoporTimBenners-leeporvoltade1990,epassouporvári-asrevisõeseversões.HojeoHTMLseencontranaversão5ondeelesofreuváriasapri-moraçõesfacilitandoaindamaisavidadosdesenvolvedoresfront-end. OHTMLémantidopelaW3C-WorldWideWebConsortium,queéumconsórcioformadoporempresaseinstituiçõeseducacionais,fundadaem1994,ondeseuobjetivoé,estabelecerpadrõesparaváriasáreasedesenvolvimentoweb.Em1997ogrupolançouoHTML4,epraticamentejunto,poucosmesesdepois,foipublicadooXML1.Em1998foiiniciadoareescritadoHTMLemXML,oqueoriginouoXHTML1quefoilançadoem1999,eemMaiode2001foipublicadooXHTML1.1.
ComooHTMLficoubastantetempoestagnadosemnenhumtipodemelhoriaounovasversões,em2004foifundadaaWHATWG-WebHypertextApplicationTechnologyWorkingGroup-queeracompostapormembrosdoXForms,umgrupoquetrabalhavaemparalelocomaW3C,masvoltadaparaformuláriosemHTML.OWHATWGéogrupodetrabalhotecnológicodeaplicaçõesdehi-pertexto paraWeb.Trata-se de umgrupo livre, não oficial e decolaboraçãodosdesenvolvedoresdenavegadoresedeseusinter-essados.Masem2006TimBenners-leereconheceuograndefeitopelopessoaldaWHATWGeanunciouqueelesdeveriamtrabalharjuntosdeformaunificada,foiapartirdaíquecomeçouosprimei-rospassoparaoHTML5.
Introdução
| Módulo I
H T M L
Hyper
Text
Markup
Language
Introdução ao HTML
Linguagem de Marcação de Hipertexto
4
Desenvolvimento web
www.triway.com.br
Estrutura HTML
TododocumentoHTMLdeveconterasextensõeshtmlouhtm.Elepodeserescritoporqualquereditordetexto,comooblocodenotasporexemplo.ComojámencionadooHTML,nãoéumalinguagemdeprogramação,esimumlinguagemdemarcaçãodehipertexto. ParaescrevermosdocumentosHTMLusamoscomoferramentaIDE( Integrat-ed Development Environment ou Ambiente Integrado de Desenvolvimento),queéumprogramadecomputadorquereúnecaracterísticaseferramentasdeapoioaodesenvolvimentodesoftwarecomoobjetivodeagilizaresteprocesso.ExisteváriasIDE´smuitoboasnomercado,algumaspagaseoutrasdistribuídasgratuitamente.Nonossocur-soiremousaroNotepad ++. TododocumentoHTMLdeveobrigatoriamenteobedecerumpadrãodeestruturacomonaimagemabaixo,issosedeveparaquesejaexecutadocorretamentepelonavegador.
| Módulo I
Estrutura do HTML
IDE Integrated Development Environment
Ambiente Integrado de Desenvolvimento
5
Desenvolvimento web
www.triway.com.br
1 | <!doctype html>:OdoctypenãoéumatagHTML,eleéumainstruçãonecessáriaparaqueonavegadorsaibaquetipoeversãodedocumentoeledeveráexecutar.Odoc-typedeveserescritonaprimeiralinhadoseudocumentoHTMLeantesdataghtml.Emversõesanteriores,eranecessárioreferenciaroDTDdiretamentenocódigodoDoctype.ComoHTML5,areferênciaporqualDTDutilizaréresponsabilidadedoBrowser.
2 | html:estatagindicaquealicomeçaoHTML.OatributoLANGénecessárioparaqueosuser-agentssaibamqualalinguagemprincipaldodocumento. Lembre-sequeoatributoLANGnãoérestritoaoelementoHTML,elepodeseruti-lizadoemqualqueroutroelementoparaindicaroidiomadotextorepresentado.Todasasoutrastagseelementosdevemestardentrodestatag.
3 | head: OheadfuncionacomoocabeçalhododocumentoHTML.Énelequevocêin-serearquivosdefolhadeestilo(CSS),javascriptemetadados.Metadadossãoinformaçõessobreapáginaeoconteúdoalipublicado.Otítulodapáginaoudosite,éinseridodentrodesseelementousandooelemento<title>,queéescritocomatag<title> … </title>.
4 | body:EstatagéresponsávelpelocorpodapáginaHTML,ouseja,tudoqueestiverdentrodela,seráexibidonateladocomputador. EstaéaestruturabasedeumdocumentoHTML.Essaestruturadevesersemprerespeitada,issoevitadesuapáginanãoserexecutada,ouapresentarerrosnonavegador.
| Módulo I
Estrutura do HTML
1 – doctype 2 - html 3 - head 4 - body
6
Desenvolvimento web
www.triway.com.br
Tags e Elementos HTML
O que são TAGS?
E o que são Elementos?
Tag´s HTML
Tags e Elementos HTML
Tagssãorótulosusadosparainformaraonavegadorcomodeveserapresentadoowebsite.Todatagdeveserescritadentrode< e >.Existedoistiposdetag:asdeaberturadeumelemento:<nome da tag>,easdefechamento:</ nome da tag>. Semprequeumatagforaberta,eledeveserfechada,issomostraparaonavegadorondevocêqueraaquelaformataçãoouelementotermine.
7
Desenvolvimento web
www.triway.com.br
ElementossãocomponentesdeumarquivoHTML.ElementosemHTMLsãocompostosportags.
| Módulo II
Elementos HTML
Tags e Elementos HTML
<html>
<html> ... </html>
TAGS
Elementos
Tags e Elementos HTML
O que são TAGS?
E o que são Elementos?
8
Desenvolvimento web
www.triway.com.br
OElementohead,comomuitosdizem,éaparteinteligentedodocumentoHTML.Énele,queinserimos,arquivosexternoscomoCSSeJavaScript,Metadatas,queauxiliamosmotoresdebuscasaindexaremsuapágina,oTítulo,chavedecaracteresetc.Oelementoheadéformadopelataghead(<head> </head>),eeledeveserescritonotopododocu-mento,dentrodatag<html> </htm>. Comovimosemcapítulosanteriores,odocumentoHTMLpossuiumaestruturaprópriaequedeveserrigidamenteobedecida,entãoaformacorretadeseinseriroele-mentoheadécomonoexemploabaixo
<!doctype html><html lang=”pt-br”><head> <title>Meu site - Página Principal</title>...</head>…
NotequecomodissemosoelementoheadéoprimeiroelementoinseridodentrodoelementoHTML. Outra regramuito importante é do elemento title (<title> … </title>). Comoopróprionomemostra,eleéoresponsávelpelotítulodapágina,queéexibidonabarradonavegador.Esseelementodeveestarobrigatóriamentedentrodoelementohead.
Elemento head
| Módulo II
Elemento<head>
<!doctype html> <html lang=”pt-br”> <head> <title>Meu site - Página Principal</title> ... </head> …
9
Desenvolvimento web
www.triway.com.br
Elementos de parágrafos Parágrafossãomuitousadosemtextos,tantoempáginaswebcomoemdocu-mentosdetextoetc.Elesseparamassuntosedeixamostextosmaisorganizados.NoHTML,elepossuiamesmafunção.Umelementodeparágrafoéconstituídopelatag <p> … </p>.
Vejaumexemplo:<p> Este é um parágrafo.<p><p> Este é outro parágrafo.</p>
Parágrafos e Headers
<p> ... </p>
<p> Essa marcação informa
um novo parágrafo
</p> Essa marcação informa o
término do parágrafo
10
Desenvolvimento web
www.triway.com.br
OResultadononavegadoéesse:
Notequeoresultadoécomoumparágrafodeumdocumentodetextocomum.Elesaltaumalinhaecomeçaooutroparágrafo.
| Módulo II
11
Desenvolvimento web
www.triway.com.br
Headers
Osheaderssãomaracadores,muitousadosemtítulosdepáginas,sãoescritoscomatag<h1> … </h1>evaidatag<h1>atéa<h6>.Essanumeraçãocorrespondeaoníveldeimportânciadotítulonapágina,ouseja,o <h1> éomaisimportantee<h6>éomenosimportante. Dica:Semprecoloqueotítulodapáginacomatag<h1>,poiscomoelesimbolizaotítulomaisimportante,osmecanismosdebuscaoindexacomoasuatalimportância.Use<h1>paratítulos,<h2>parasubtítulos,<h3>paranomesdeblocos(exemplo:menu).
Parágrafos e Headers
<h2>Este é um header</h2>
<h6>Este é um header</h6>
<h5>Este é um header</h5>
<h4>Este é um header</h4>
<h3>Este é um header</h3>
Este é um header
Este é um header
Este é um header
Este é um header
Este é um header
<h1>Este é um header</h1> Este é um header
12
Desenvolvimento web
www.triway.com.br
| Módulo II
Elementos de formatação NoHTMLexisteelementosdeformataçãodetexto,assimcomonosprogramasdeediçãodetexto,comooMicrosoftWord.Formataçãocomoitálico,negrito,textoàesquer-da,centralizado,justificado.Algumasdessasformataçõespodemserfeitasdeformamaissemânticapelocss,masiremosveralgunsdesseselementosparaquevocêconheçaumpoucomais.Itálico - <i> … </i>Paradeixarumapalavra,umafraseouumparágrafoemitálico,usamosoelemento<i> ... </i>.Exemplo:
<i> Este parágrafo esta em itálico </i>
Vejaoresultadononavegador.
Elementos de Marcação e Formatação
<p> Sed ut perspiciatis unde <b>omnis iste</b> natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo <i>inventore</i> veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam <strong>voluptatem</strong> quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. <span style=“color:red”>Neque porro</span> quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. </p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
13
Desenvolvimento web
www.triway.com.br
Negrito - bold <b> … </b>
Parasefazeromesmocomnegritousa-seoelementoboldqueéescritocomastags<b> … </b>.Vejaoexemplo.
<b>Este parágrafo esta em Negrito.</b>
VejaoResultadononavegador.
Umoutroelementoquetemomesmoresultadodoelementoboldéoelementostrong<strong> ... </strong>.Exemplo.
<strong> Este parágrafo esta com o elemento strong. </strong>
Vejaumacomparação.
Notequeadiferençaenenhuma.GeralmentesedápropriedadesdiferentesparacadaelementodessenoCSS,diferenciandoumdooutro,visualmentefalando.
| Módulo II
14
Desenvolvimento web
www.triway.com.br
| Módulo II
span - <span> … </span>
Oelementospan<span> … </span>,visualmenteelenãoalteraemnadanapala-vraounotextoqueeleestamarcando,masgeralmenteusa-seeleparafazeralgumamar-caçãonotexto,comocorporexemplo.Elepodeserusadoparaagruparelementosparafinsdeestilo(usandoosatributosclassouid),ouparacompartilharvaloresdeatributoscomo lang.Eledeveserusadosomentequandonenhumoutroelementosemântico forapropriado.<span>émuitoparecidocomoelemento<div> ,entretando<div>éumelementodeníveldeblocoenquanto<span>éumelementoemlinha.
Vejaumexemplo.
Sem nenhuma propriedade.
<span> Este parágrafo esta dentro de um span </span>
Com propriedade
<span style=”color:blue”> Este parágrafo esta dentro de um span com uma pro-priedade</span>
VejaoResultado.
Mais alguns elementos de formatação
Nohtml,existeaindamuitomaiselementosdemarcação/formataçãodetexto,ecomachegadadohtml5esseselementosaumentaramdenúmero.Vamoscitaralgunsparaquevocêfixenamente.Todoselesestãononossoguiadereferência.
em-<em> … <em> Funcionacomooitálico,eledáenfânseàalgumapartedotexto.
15
Desenvolvimento web
www.triway.com.br
| Módulo II
cite-<cite> … </cite>Muitousadoparacitações,comonomedeautores,músicas,filmes,frasedealguémetc.
pre-<pre> … </pre>Esteelementoéusadoparamostrarumblocodecódigo.
small-<small> … </small>Oelementosmalleleapresentaotextocomotamanhodafonteumpoucomenor.
Essessãoalgunselementosdohtml,vejaalistacompletanoguiadereferência.
16
Desenvolvimento web
www.triway.com.br
Atributos
<p style=“color:red;”> Este é um parágrafo para a aula sobre atributos </p>
Este é um parágrafo para a aula sobre atributos
ElementosemHTMLtêmatributos,quesãovaloresadicionaisqueconfiguramoselementosouajustamseucomportamentodeváriasmaneirasparacumpriroscritériosqueosusuáriosquerem. NoHTML existemmuitos atributos,mas iremos citar omais usados. Todos osatributosdevemseguiraseguintesintaxe: nome=”valor”,ondenomeéonomedoatribu-toseguidodosinaldeigual( =),evaloréovalordapropriedadedentrodeaspas,duplasousimples.
alt | Altenative text Oatributoalt, éusadoemelementosde imagem.Eleexibeumtextonocasodeocorreralgumerroeaimagemnãoforexibida.
title | Título ítuloébastanteusadoemdescriçõesdeelemento.Suafunçãoéexibirumtextoemformadecaixaquandosepassaomouseemcimadoelemento.
src | Url de arquivos EsteatributotemcomofunçãoinformaroendereçourldearquivoexternosqueserãoinseridosnodocumentoHTML,comoimagens,arquivosdeáudioevídeo,scriptsetc.
Atributos
17
Desenvolvimento web
www.triway.com.br
| Módulo II
rel | Relações entre links Oatributorelespecificaarelaçãoentreoobjetodedestinoparaoobjetolink.
language | Tipos de script Esteatributoéusadobasicamentequandose irá inserirumblocoouarquivodescriptnoHTML.Eleespecificaotipodescriptqueestasendoinserido.
lang | idioma do conteúdo Comojávimos,oatributolangéusadoparainformaroidiomadapáginahtml.Masesteatributonãoéexclusivodatag<html>.ElepodeserusadoemqualquertagoublocodoseudocumentoHTMLexercendoamesmafunção,deinformaroidiomadoconteúdodobloco,parágrafoetc.
id | Identificação de elementos únicos UmdosatributosquemaisseusaemdocumentosHTML.Esteatributoidentificaumelementocomumnomequevocêpodecriar.Écomovocêpegarumelementodocódi-goedarumnomeaele.Muitoútilpoiscomessaidentificação,vocêpodeformatá-lopeloCSS,criandoregrasparaaqueleespecificoelemento. class | Formatações mais amplas Oatributoclass,ébastanteusadoparaformataçãoemcssparaelementosquepos-suempropriedadesemcomum.
href | Linkando Ohrefserveexclusivamenteparalinkar.Elefazalinkagementrepáginas,arquivos,mídia,arquivoparadownloadetc.
height | Altura Oatributoheightéusadoquandoprecisamosespecificaralturadeelementos.Podeserdeparágrafos,blocos,imagensetc.
width | Largura Temamesmafuncionalidadedoheightmaseleéresponsávelpelalargura.
Essesãoosatributosmaisusados,quepraticamentevocêirásecansardeescrever,masoHTMLpossuimuitomaisatributosqueestánoguiadereferência.Nossoobjetivoaquiédeixarbemclarooqueéumatributoecomousá-lo.
18
Desenvolvimento web
www.triway.com.br
| Módulo II
Ousodeimagensnawebéessencial,tantoparadeixarumainformaçãomaisclaracomoparadeixarsuapáginamaisbonitaeatraente,afinal,umaimagemvalepormilpala-vras.ParainserirumaimagemnodocumentoHTMLusa-seatag <img />.umdiferencialqueessatagtemdasoutrastagséqueelaéabertaefechadanumatagsó.Vocênãousa<img> </img>esim<img />.
Paracriarumelementodeimageméprecisousaratag<img />maisoatributosrc,quecomovimosnocapítulopassadotemafunçãodeinseriraurldeumarquivoexterno.Vejaoexemplo:
<img src=”/images/minha-imagem.jpg” />
Outrosatributospodemserusadosemimagenscomo id,class,heigth,width,alt e title.Oatributoaltéobrigatórioemimagenspoisalémdeauxiliarosmecanismosde
Imagens
<img src =“url da image” />
Imagens
19
Desenvolvimento web
www.triway.com.br
buscacomooGoogleindexarsuaimagem,elemostraumatextoquandoessaimagemnãoestiverdisponívelparaexibição.Useoatributotitle,paraumabrevedescriçãodaimagem,issotambémajudaosrobôsdoGoogleewidtheheightpararedimesionaraimagem,aju-standoatelaeaotexto.Exemplo:<img src=”imagens/minha-imagem.jpg” alt=”Jogador fez o gol da vitória do time tal” title=”gol do jogador que garantiu a vitória do time tal sobre o outro tima” width=”150px” height=”160px” id=”image” class=”bordada”/>
Osvaloresdosatributos width e height,podemserempixelsouemporcentagem.
Qualquerarquivodeimagempodeserinseridonodocumentohtmlcomo,jpg, png,gif,bmpetc.Paraevitarproblemascomaexibiçãodesuasimagens,ébomvocêsempreprestaratençãoempequenosdetalhesqueacarretamerrosdeexibição.
Nome do arquivo.
Nosendereçosdawebouurl,nãosãopermitidoscaracteresespeciais,acentosees-paços,comoç,~,´.Colocaressetipodecaracteresnosnomesdosarquivosirágerarerrodeexibição,ouseja,suaimagemnãoseráexibida.Semprecoloqueonomedosarquivoscomletrasminúsculasenolugarespaçocomohífen(-),eaextensãocorretadoarquivo (.jpg ou .jpeg).
Exemplo:<img src=”imagens/minha-imagem.jpg” />
Sempre use endereços reais.
Sempreprefira colocar endereços absolutosdas imagens, enãoanavegaçãoentreaspastas.
Exemplo<img src=”../images/minha-imagem.jpg” />
<img src=”http://www.meusite.com.br/imagens/minha-imagem.jpg” />
Confira o tamanho das imagens
Semprequevocênaveganainternet,quandovocêentranumsite,vocêprecisaes-peraroconteúdocarregar.Quandoseusaimagensmuitograndes,dealtaresoluçãoessessitesdemoramemuitopara carregar.Recorte as imagens,parao tamanhoquedesejaapresentarnatela,useimagensgrandesapenasquandorealmentefornecessário,comoumagaleriadeimagens.
| Módulo II
20
Desenvolvimento web
www.triway.com.br
Linkssãoâncorasouligaçõesentrepáginas,imagensarquivosetc.Umlinkéescritocomatag <a> </a>,epodereceberváriosatributos,comohref,alt,title,taregt,rel,id,class.Umlinkdeveseguiraseguintesintaxe.
<a href=”endereço para onde vai o link”>Meu link</a>
Oatributohreféobrigatório,poiséelequevaiinformarparaondeolinkirádire-cionarousuário. OutrosatributoscomoideclasssãousadosparaaformataçãocomCSS.Umatribu-toqueémuitousadoemlinkséoatributotarget,queinformaonavegadorondeeledeveráabriroaurlinformadanoatributohref.Oatributotargetpossui5valores:_blank:Abreaurlemumanovajanela,guiaouaba._self:Abreaurlnamesmajanela,guiaouabaondefoiclicada._parent:Abreaurlnofamesetpai._top:Abreaurlnocorpointeirodajanela.framename:Abreaurlemumquadrochamado.
Exemplos:Esteexemplovaleparaosvalores_blank,_self,_parent,_top.<a href=”http://www.3way.com.br” target=”_blank” >Meu link</a>Esteexemplovaleparaoframename.<a href=”http://www.3way.com.br” target=”nomedoframe”>Meu link cno frame</a>
Links
| Módulo II
Links
<a href=“url destino”> Nome do link </a>
21
Desenvolvimento web
www.triway.com.br
Listas
<ol> <li>Item 01</li> <li> Item 02</li> ... </ol>
Ordenadas
<ul> <li>Item 01</li> <li> Item 02</li> ... </ul>
Não ordenadas
Listas
Aslistasãobemúteisnohtml.Comelaspodemoslistardeformaorganizada,porexemplo,uma listade linksepáginas.As listas sãomuitousadaspara criarmenusdenavegação,tantonaverticalcomonahorizontal.Existemdoistiposdelistasasordenadaseasnãoordenadas,ondeumaordenaositensnumerando-aseaoutranão.
Listas Ordenadas Listasordenadassãoescritascomastags<ol> … </ol>,eseusitensdelistacomatag<li> … </li>.Exemplo:<ol> <li>Item 01</li> <li>Item 02</li> <li>Item 03</li></ol>Vejaoresultadononavegador
Vejaquefoicriadaumalistaordenadade1a3.
| Módulo II
22
Desenvolvimento web
www.triway.com.br
Listas não ordenadas Aslistasnãoordenadassegeamesmasemântica,porémelausaoutratag.Paralis-tasnãoordenadaséusadaatag<ul> … </ul>nolugar<ol> … </ol>.Ositemmantémamesmatag<li> … </li>.
Exemplo:<ul> <li>Item 01</li> <li>Item 02</li> <li>Item 03</li></ul>
Vejaoresultadononavegador
Aslistasdosdoistipospodemreceberosatributosideclass,eseusitenstambém.
Exemplo:<ul id=”menu” class=”azul”> <li id=”home”>Item 01</li> <li id=”sobre” class=”page”>Item 02</li> <li id=”contato” class=”page”>Item 03</li></ul>
EssesatributossãoimportantesparaformatareestilizaroselementoscomoCSS.Veremosissomaisadiante.
| Módulo II
23
Desenvolvimento web
www.triway.com.br
| Módulo II
Elemento div
Blocos
Elemento Div
DivéumaseçãodeumapáginaHTML.Comoseumapáginativesseblocosecadablocofosseformadoporumadiv.Porexemplo,abarralateralesquerdaéumblocoforma-dopordiv.Oconteúdonocentrodapáginaficadentrodeumblocodeconteúdo.Abarralateraladireitatambéméumbloco.Podemosconcluirquecadapartedositeéumblocoequeparacriarmosumblocousamosdiv.Oelementodivéescritoéescritocomatag<div> … </div>epodereceberosatributosid e class.Vejaumexemplo:
<div class=”barra-lateral” style=”border: 1px solid #ccc;”> <ul> <li><a href=”index.html”>Home</a></li> <li><a href=”sobre.html”>Quem somos</a></li> <li><a href=”contato.html”>Contato</a></li></ul></div><div class=”conteudo” style=”border: 1px solid #ccc;”>
<p> Aqui fica o conteúdo da página. </p></div>
24
Desenvolvimento web
www.triway.com.br
Vejaoresultadononavegador:
Comopodemosverdivéumbloco.Noexemploeleestaumemcimadooutro,poisaindanãofoiinseridanenhumaformataçãocomCSSnele,eporpadrãoadivocupaateladonavegadorcolocandoumblocosobreooutro.
25
Desenvolvimento web
www.triway.com.br
Amuitotempoatrás,ossiteseramfeitossobretabelas.Issoocorriaporqueaindanãoexistiaumamaneirade formatareestilizarpáginasHTML.Como lançamentodoXHTML4eoCSSessequadrofoimudadoeatéhojeusaexclusivamenteblocos(div)parasecriarumapáginaHTML,extinguindoastabelasdossites.Mesmocomessaevolução,astabelasaindaexistemnoHTML,ehojeelatemoutrafunçãoqueébastanteusada,princi-palmenteparaaexibiçãodetabelasdecadastros,produtosetc.
Astabelassãoescritascomatag<table> … </table>,eelapossuemlinhasecolu-nas.Aslinhassãoescritascomatag<tr> … </tr>eascolunascomatag<td> … </td>.Ascolunasficamdentrodaslinhas.Vejaumexemplodeestruturabásicadeumatabela.<table border=”1”> <tr> <td>coluna 01 - linha 01</td> <td>coluna 02 - linha 01</td> <td>coluna 03 - linha 01</td> </tr><tr> <td>coluna 01 - linha 02</td> <td>coluna 02 - linha 02</td> <td>coluna 03 - linha 02</td> </tr>
| Módulo II
Tabelas
Tabelas
26
Desenvolvimento web
www.triway.com.br
| Módulo II
<tr> <td>coluna 01 - linha 03</td> <td>coluna 02 - linha 03</td> </tr></table>Vejaoresultadononavegador.
Astabelaspodemreceberosatributosid,class,border,width,height,colspan,row-spantantonatabela(<table>),quantoemsuaslinhasecolunas(<tr>, <td>).* rowspan-especificaquantaslinhasacélulaserámesclada* colspan-especificaquantascolunasacélulaserámesclada
27
Desenvolvimento web
www.triway.com.br
Tabelas <table> <thead> <tr> <th>Código</th> <th>Descrição</th> <th>Preço</th> </tr> </thead> <tbody> <tr> <td>134</td> <td>Produto 01</td> <td>15,00</td> </tr> ... </tbody> </table>
Cabeçalhos em Tabelas
Astabelaspossuemcabeçalhos,nãoéobrigatório,masdeixasuatabelamaisorgan-izadaquandovocêinformaonomedascolunas. Parainserirumcabeçalhoemumatabela,usamosatag<thead> … </thead>,esuacolunasrecebemumanovatag <th></th>,mascontinuamdentrodeumalinha.Exemplo:<table> <thead> <tr> <th>Nome</th> <th>Endereço</th> <th>Telefone</th></tr></thead>…. Aoinserirumcabeçalhonatabela,vocêdeveinformarocorpodatabela.Paraissousamosatag<tbody> … </tbody>.Vejaumexemplodecomoumatabeladeveserescri-ta,deformasemântica.
28
Desenvolvimento web
www.triway.com.br
| Módulo II
<table border=”1”> <thead> <tr> <th width=”250”>Nome</th> <th width=”100”>Telefone</th> <th width=”250”>E-mail</th></tr></thead><tbody> <tr> <th>João</th> <th>3252-1141</th> <th>[email protected]</th></tr> <tr> <th>José</th> <th>9514-8521</th> <th>[email protected]</th></tr> <tr> <th>Paulo</th> <th>9585-7414</th> <th>[email protected]</th></tr></tbody></table>
Vejaoresultadononavegador.
29
Desenvolvimento web
www.triway.com.br
| Módulo II
Metatags,sãotagsinseridanocabeçalhododocumentoHTMLcominformaçõesrel-acionadasaquelapágina,comoporexemplo,descriçãodoconteúdo,autor,palavraschaves,encodedecaracteres. Émuitoimportanteusarasmetatags,poiselasajudamemuitoaindexaçãodositenosmotoresdebuscacomoGoogle,Bingetc.Asmetatagssãoescritascomatag<meta>enãopossuitagdefechamento,ouseja,comovimos,oqueacontececomatagdeimagem(<img>),elaéfechadanamesmatagqueéaberta. Todametatagdeveterdoisatributosquesãoatributonameeoatributocontent.Oatributonameespecificaonomedametatag,comoautor,keywordquesãopalavraschaves,todasseparadasporvírgulaedescriptionqueéumadescriçãododocumento.Jáoatributocontenteleéresponsávelpeloconteúdomesmodatag.Porexemplo,nametatagqueoatributonameforautor(name=”author”)oatributocontentdeveconteronomedoautor(content=”JoséFelipe”).Assimcomotodasasinformaçõesqueestãonoelementohead,asmetatagsnãosãovistasnonavegador,ounosite,maspodemservistasnocódigofontedosite.Vejaumexemplo:
<meta charset=”utf-8” /><meta name=”author” content=”3Way EAD” /><meta name=”description” content=”Aula sobre meta tags HTML - 3Way EAD” /><meta name=”keywords” content=”aula de meta tags, meta tags, html, 3way, ead” />
A meta tag charset
UmametatagdiferentequeéobrigatóriaemtododocumentoHTMLéametatagcharset.Elaéresponsáveldeinformaraonavegadorqualtabeladecaracteresusar.Sem-preuseautf-8,poisessatabelausacaracteresespeciaiseacentos.Exemplo.
<meta charset=”utf-8” />
Meta tags
30
Desenvolvimento web
www.triway.com.br
Comentário em HTML
<!---comentário -->
Comentários
OscomentáriosemHTMLsãobastanteimportantesemuitousadoscomoidenti-ficadoresdeelementos.Ajudamuitosevocêusá-lospara informarquandocomeçaumelementoequandotermina,issoparaquevocênãosepercaemmeioàummontedetagseelementosparecidos.ParafazerumcomentárioemHTMLusamosaseguintesintaxe:
<!--- aqui fica o meu comentário -->
Regrabásicaeobrigatória:Abre-seumcomentáriocom<!-- e fecha com -->.Lembrandoquedevehavertrêshífensnaaberturaedoisnofechamento.
Pode-seusarumcomentáriocommaisdeumalinha,usaracentos,ecaracteresespeciais.
<!--- Este é um comentário com mais de uma LINHA.-->
31
Desenvolvimento web
www.triway.com.br
Formulários
<form action=“php.php”> ... </form>
| Módulo II
Formulários
Formuláriossãoumdoselementosmaisusadosnaweb.Depequenosformuláriosdecontatoaextensoscadastrosemlojasvirtuais.
Todoformulárioecompostopeloelementoform<form> </form>.Todososcam-posqueestãodentrodeleserãoenviadosparaoservidor.Paraqueoformuláriosejapro-cessado,osdadosdevemserenviadosaumscriptexterno,escritoporalgumalinguagemdeprogramaçãocomophp,asp,rubyetc.Parainformaroscriptqueirámanipularessesdados,usamosoatributoactionnoformulário.Exemplo.
<form action=”url do script”> ...</form>
A tag input Existemváriostiposdeinputs,ecadaumsecomportademaneiradiferente,oquediferenciacadaumdessesinputséoatributotype,quepodeserqualquerumdosabaixo:
•text - Criaumacaixadetextodeumalinha.•password - Criaumacaixadetextodeumalinhaescondendooscaracteresdigi-tados.
32
Desenvolvimento web
www.triway.com.br
•checkbox -Criaumacaixaqueassumedoisestados:checadoe“deschecado”.Emconjuntocomoatributonameépossívelquesecrieumgrupodecheckboxesnoqualumaoumaischeckboxessejam“checados”.•radio -Criaumacaixaqueassumedoisestados:checadoe“deschecado”.Emcon-juntocomoatributonameépossívelquesecrieumgrupoderadiosnoqualapenasumradioseja“checado”.•button -Criaumbotãoeatravésdoatributovaluedefinimosotextodobotão.•submit -Criaumbotãoparaoenviodo formulárioeatravésdoatributovaluedefinimosotextodobotão.•file-Criaumbotãoque,aoserclicado,abreumacaixadediálogoparaaescolhadeumarquivonocomputadordousuário.•reset -Criaumbotãoquedescarta todasasalterações feitasdentrodeum for-mulário.Atravésdoatributovaluedefinimosotextodobotão.•image - Criaumbotãoparaoenviodoformulárioedeveserutilizadoemconjuntocomoatributosrcparaqueumaimagemdefundosejautilizadanobotão.•hidden -Criaumelementoquenãoficavisívelparaousuário,porémpodeconterumvalorqueseráenviadopeloformulário.
| Módulo II
Formulários
<input /> • text • password • hidden • checkbox • radio • submit • button • image • file • reset
<select> <option>...</option> </select>
<textarea cols=“20” rows=“5”> </textarea>
33
Desenvolvimento web
www.triway.com.br
Select
Oelementoselectoucomboboxcomomuitoschamam,permiteaousuárioescolherumaoumaisopçõesdeumalista.
Vejaoexemplo:
<select> <option value=”Item 01”>Item 01</option> <option value=”Item 02”>Item 02</option> <option value=”Item 03”>Item 03</option> <option value=”Item 04”>Item 04</option></select>
Nestecasovocêpodeescolherapenasumaopção.Paravocêpoderselecionarmaisdeumaopção,bastainseriroatributomultiple,assimagorapodemosselecionaváriasopções.
<select multiple=”multiple”> <option value=”Item 01”>Item 01</option> <option value=”Item 02”>Item 02</option> <option value=”Item 03”>Item 03</option> <option value=”Item 04”>Item 04</option></select>Outrapossibilidadequeoselecttepermiteésepararopçõesporgrupos.Exemplo:
<select multiple=”multiple”> <optgroup label =” Grupo de Itens 01 “> <option value=”Item 01”>Item 01</option> <option value=”Item 02”>Item 02</option> </optgroup> <optgroup label =” Grupo de Itens 02 “> <option value=”Item 03”>Item 03</option> <option value=”Item 04”>Item 04</option> </optgroup></select>
Label
Aslabelssãousadasparainformarnomedecampos,permitindoaousuáriosaberquaisdadosdevemserinformadosnaquelecampo.
| Módulo II
34
Desenvolvimento web
www.triway.com.br
| Módulo III
Exemplo:<label>Nome:</label><input type=”text” name=”nome” />
Textarea
Paraenviodeinformaçõesmaiores,frasesoutextosmaiores,usamosoelementodeáreadetextooutextarea.Diferentedoelementoinput,outextosimples,otextareadeveserfechadocomsuatagdefechamento.Exemplo:
<textarea></textarea>
Paraadequá-loaolayoutdasuapágina,vocêpodeconfigurarseutamanhonocss,ouajustarcomosatributoscolserows.Oatributocoléreferenteaonúmerodecolunas,oucaracter,eelealteraalarguradacaixadetexto.Jáoatributorowsserefereaonúmerodelinhasealterandoosvaloreselealteraocomprimentodacaixadetexto.Exemplo.
<textarea cols=”25” rows=”10”></textarea>
35
Desenvolvimento web
www.triway.com.br
| Módulo III
Introdução ao CSS
nome-arquivo.css
CSS (Cascading Style Sheets)oufolhasdeestiloemcascata,éumalinguagemdeestilousadaparaapresentaçãoeformataçãodepáginaweb.TododocumentoCSSdevesernaextensão.css.Oprincipalobjetivodousodocss,ésepararaformataçãodapáginadoseuconteúdo.Tododocumentocssdeveobedeceraseguintesintaxe:
seletor { propriedade: valor;}
Oseletoréoelementohtmlquevocêdesejaalteraroformato,ondeelepodeserespeci-ficadopeloelementoediferenciadoporumaclasse,id,tipoedehierarquia.Voumostraragoraalgunstipodeseletoresquevocêsirãousarfrequentementeemseusprojetos.
PropriedadessãoasconfiguraçõesqueirãoestilizaroelementoHTML.Todapropriedadedeveterumvaloreserfinalizadocomumpontoevirgula.
36
Desenvolvimento web
www.triway.com.br
Introdução ao CSS
Seletor{
Propriedade: Valor;}
Seletor UniversalOseletoruniversalselecionatodososelementosdeumdocumentoHTML.Exemplo.
* { margin: 0px; padding: 0px;}
Oexemploacimaéumatécnicamuitousadacomoresetdepropriedadespadrãodosnavegadores.Veremosissomelhormaisafrente.
Seletor de tipo Osseletoresdetipo,alteraaspropriedadesdetodososelementosquesãoformadospelamesmatag.Exemplo.
p{ color: red;}
Noexemploacima,todososparágrafos,independentedeclasseouidirãoserdecorvermelha.
37
Desenvolvimento web
www.triway.com.br
Seletores de classeNestecasotodososelementosquepossuíremamesmaclasseirãoteramesmaformatação,ouseja,todososelementosquepossuíremoatributoclass=””comomesmovalor.Exemplo.
div.minhaclass { color: blue;}
Seletores de idEssesseletoresfazemamesmafunçãodosseletoresdeclasse,sóqueseuatributoéid=””.Exemplo.
div#conteudo { color: black;}
Seletor de descendentesChamamosdeseletordedescendentesaseleçãodeumoumaiselementosfazendoousodeoutrosseletoresseparadosporespaços.Umespaçoindicaqueoselementosseleciona-dospeloseletoràsuadireitasãofilhosdiretosouindiretosdoselementosselecionadospeloseletoràsuaesquerda.Exemplo.
li a { color: red;}
Seletor de filhosChamamosdeseletordefilhosaseleçãodeumoumaiselementosfazendoousodeoutrosseletoresseparadospelocaractere>.Umcaractere>indicaqueoselementosseleciona-dospeloseletoràsuadireitasãofilhosdiretosdoselementosselecionadospeloseletoràsuaesquerda.Exemplo.
div.conteudo > a.link { color: red;}
Dica importante sobre id e classeComofoiexemplificadoacima,ideclassesãoatributosdiferentes.Asclassesemcss,sãorepre-sentadaspor.nomedaclasse(.)eaidpor#nomedaid(#).Amaneiramaiscertadeusarideclasseéusandoidparaelementosespecíficos,comoelemen-topai,ouseja,elementosemquesuaspropriedadesserãoexclusivasaele.Eusarclasseparaelementosdepropriedadesmaisamplas,ouquevocêprecisausá-lasváriasvezesemseusite.
38
Desenvolvimento web
www.triway.com.br
Propriedades importantes do CSS
Comomostramosanteriormente,paraalterarosestilosdeumelementoHTML,us-amospropriedadesparataltarefa.VamosmostraravocêsalgumasdaspropriedadesmaisusadasparaacriaçãodesitesepáginasHTMLestilizadas.
Cores e Medidas MuitoimportanteantesdevocêaprenderasvariaspropriedadesdoCSS,éprecisosabercomooCSStrataacoreseváriasmedidas,poismuitosvaloresdessaspropriedadessãoemmedidasecores.
Cores AscoresemCSSsãotratadaspraticamenteemduasformas.Essassãoasmaisus-adasesãoasquevocêiráusarsempre,quesãocoresemRGBouHezadecimal. Vocênãoprecisadecorarenemserumexpertemcódigodecores,poisosprópriosprogramasquesãousadoparaodesenhodolayoutcomoPhotoshop,Gimpentreoutros,tefornecemessescódigos,sejamemHexadecimalouRGB.Exemplo.EmHexadecimal.p { color: #000000;}
Introdução ao CSS
Hexadecimal #xxxxxx;
RGB rgb (xx, xx, xx);
39
Desenvolvimento web
www.triway.com.br
Introdução ao CSS
Medidas
in em cm
ex pt px
Em RGBp { color: rgb(0,0,0);}
MedidasAsmedidasemCSSsãorelativasaotamanhodaresoluçãodatela.Elapodemterosva-loresem;
in-polegada.cm-centímetro.mm-milímetro.em-tamanhorelativoaotamanhodefonteatualnodocumento.1eméigualaotamanhodafonteatual,2emodobrodotamanhodafonteatualeassimpordiante.ex -essaunidadeéigualàalturadaletra“x”minúsculadafonteatualdodocumento.pt-ponto(1ptéomesmoque1/72polegadas).px-pixels(umpontonateladocomputador).
ConfiraaumadescriçãodetalhadadaspropriedadesCSSemnossoguiadereferência.
40
Desenvolvimento web
www.triway.com.br
Introdução ao CSS
Seletores
Seletor Universal
Seletor de tipo
Seletores de classe
Seletores de id
Seletor de descendentes
Seletor de filhos
Recapturandoosseletoresvistoacima.
41
Desenvolvimento web
www.triway.com.br
Linkando CSS ao HTML
1 – Arquivo Externo
2 – Bloco de Código
Inserindo CSS ao HTML Para estilizarmos nossa página HTML devemos vincular o CSS ao documentosHTML,eissopodemosfazerde3maneiras.
Usando um arquivo externo Vocêpodecriarumarquivo.csselinka-loasuapáginaHTML,paraissodevemosinseri-loaoelementohead. Paraissousamosataglilnkcomoalgunsatributos.Vejaoexemplo.
<link rel=”stylesheet” type=”text/css” href=”url do arquivo css” media=”all” />
Explicandoosatributos.
rel:significaotiporelacionamentodesselinkquenocasoéumafolhadeestilo(stylesheet).type:informaotipodearquivoqueestamoslinkandoaonossoHTML.href:Usadotambémemlinksdepágina,elemostraoendereçodoarquivo.media: Esseatributo informaaonavegadorparaqualdispositivodeve serusadoessearquivoCSS.Nestecaso,queovaloréall,eleseráusadoemtodososdispositivos,telasgrandes,celulares,impressão.
42
Desenvolvimento web
www.triway.com.br
Blocos de CSS VocêpodeinserirtambémemqualquerpartedodocumentoHTMLumblococompropriedadesdeCSSemcimadoblocoque.Essamaneiranãoémuitoboapoisdeixaseucódigoumpoucobagunçado.
VamosinserirumblocodeCSSagora.ParainserirumblocodecódigoCSSdevemosabriroelementodeCSScomatag<style>,einformaroatributotypecomosvaloresdetext/css.Exemplo.<style type=”text/css”> ...</style>
DentrodoelementoinserimososseletoresepropriedadesCSS.Outroexemplo.<style type=”text/css”>p { color: red;}</style>Comopodemosobservarasintaxecontinuaamesma.
Estilo dentro do Elemento OutraformadeinserirCSSdentrodeumelemento,éinseriroestilodentrodatagdeaberturadoelemento.EssatécnicaémuitousadoemeditoresWysiwyg.Exemplo.
<div style=”color:red;”> ...</div>
Asintaxemudaumpoucomasabaseéamesma,easpropriedadessãoinseridasdentrodoatributostyle.
Dica importanteVocêpodeusar vários arquivosCSSna suapáginaHTML,porém tomecuidado comonomedeseletores,poisoqueprevalecesempreéoúltimo.Porexemplo,digamosquevocêtenhaumelementocomaclassechamadaconteudo,edentrodoprimeiroarquivoCSScomsuapropriedadesdefinidas,edigamosquenosegundoarquivoCSSvctambémtenhaesseseletorcomoutraspropriedades,oqueprevaleceseráodoúltimo.
DicaQuandovocêprecisarinserirblocodecódigoinsiradentrodoelementohead,assimvocêdeixaseucódigomaislimpoemaisorganizado.
43
Desenvolvimento web
www.triway.com.br
OscomentáriosemCSS,sãobastanteimportantes,poiscomonoHTMLelepermitequevocêpossadocumentartodooseucódigo.Umadicavaliosa,aprendaepegueocos-tumededocumentaroseucódigo,issoiráteajudarseumdia,muitotempodepoisvocêououtrapessoaprecisefazerumamanutenção.
OscomentáriosemCSSdevemsernaseguintesintaxe.
/* meu comentário em uma linha*/
/*Este é um comentáriocom mais de uma linha*/
/*** Este é um comentário* com mais de um linha mais arrumadinho.**/
Comentários em CSS
/* Comentário de uma linha */
/* * Comentário com * Mais de uma linha */
44
Desenvolvimento web
www.triway.com.br
CSS Docs - Padronizando seu código CSS OscomentáriosemCSSnãoexisteumapadronizaçãoespecifica.Bastaqueeleeste-jadentrodasintaxecorreta,elefunciona.VoumostraravocêsumapdronizaçãofeitapordoisdesenvolvedoresAlemãesqueestaconquistandováriosadeptos,oCSSDoc.OCSS-Docpossuiumasintaxesimples,masquefacilitamuitoadocumentaçãodoCSSedeixaseucódigobemorganizado.
Comentários em CSS
CSSDocs
http://cssdoc.net/
45
Desenvolvimento web
www.triway.com.br
Ele é constitupido basicamente em dois tipos de bloco de comentário. Um co-mentáriosdedescriçãodoCSSnotopododocuemento,eumblocoporsessãodoHTML.
Exemplo.
Comentários de Arquivo (File Comments) OFileCommentéutilizadocomodescriçãoprincipaldoarquivoCSS,apareceap-enasumaveznoarquivoedeveserescritonotopo.Geralmentenoscomentáriosdearqui-vosãodescritasinformaçõessobreafunçãodoarquivoealgunsmetadadoscomoautor,versão,etc.
Comentários de Seção (Section Comments) AbremseçõesemarquivosCSSepodemserutilizadosdiversasvezesparaestrutu-rarocódigoCSS.Osignificadode“seção”ébastanteamploedependedodesigner/desen-volvedor.AlgumasseçõescomunsemCSSsão:Reset,Layout,Tipografia,entreoutros.
Principais tags do CSSDoc OscomentáriosemCSSDocpodemfornecerdiversasinformaçõessobreosarquiv-osCSSetrechosespecíficosdecódigo.Algumastagsreferem-seapenasainformaçõesdoarquivoesãoinseridasemFileComments,masamaioriasãoutilizadasemSectionCom-ments.Exemplosdealgumasdastagsmaisutilizadassão:@autor:comentáriodearquivo,podeconteronomee/ouoe-maildoautordodocumento.@colordef:comentáriodearquivo,especificaacor(emhexaouRGB)epodetambémserfornecidoonomedacoresuautilizaçãoseguidodeponto-e-vírgula.@bugfix: comentáriodearquivoedeseção,apresentaumadescriçãoresumidasobreumtrechodecódigoparacorrigiralgumaincompatibilidadedenavegador.@css-for: comentáriodearquivoedeseção,usadoemconjuntocom@bugfixparaespe-cificarqualbrowserestárelacionadocomacorreçãofeita(Ex.:@css-forIE6).
46
Desenvolvimento web
www.triway.com.br
@section, @subsection e @subsubsection:comentáriosdeseção,para indicarasseçõesdeumcódigoCSSematé3níveis.Quandoutilizar@subsection,oblocodeco-mentáriotambémdevetambémconter@section,eomesmoparao@subsubsection,devecontera@subsectionea@section. VocêpodeconsultartodasastagsdoCSSDocemnossoguiadereferênciadoCSS-Docepodetambpmepesquisarmaissobreoassuntonadocumentaçãodosite.
47
Desenvolvimento web
www.triway.com.br
Introdução ao JavaScript
Client-side
Paraacriaçãodepáginaswebdinâmicas,usaremosJavaScript.OJavaScriptéumalinguagemclient-side,ouseja,elaéinterpretadapelonavegador.IremosaprenderumabasedeJavaScriptecomousarelaemnossosite,deixando-omaisdinâmicoeatraente.
48
Desenvolvimento web
www.triway.com.br
Introdução ao JavaScript
1 – Arquivo Externo
2 – Bloco de Código
Inserindo JavaScript a nossa página. ExisteduasmaneirasdevocêinserirJavaScriptnasuapáginaweb,umadelaséin-serindoumblocodecódigousandoatagscript,assimcomomostramosnoCSSanterior-mente.EsseblocopodeserinseridoemqualquerpartedodocumentoHTML,porémseucódigoficarámaisorganizadosevocêoinserirdentrodoelementohead.
Exemplo.<!doctype html><html lang=”pt-br”><head><meta charset=”utf-8” /><title>Aula de JavaScript</title><script> ….</script></head>…
Umaoutramaneira,eaqueeurecomendo,poisdeixaaestruturadoseusitemuitomaisorganizadaefácildemanusearéinserirumdocumentoJavaScriptexterno,usandooatributosrcnatag<script>.
49
Desenvolvimento web
www.triway.com.br
Exemplo.<!doctype html><html lang=”pt-br”><head><meta charset=”utf-8” /><title>Aula de JavaScript</title><script src=”url do arquivo javascipr”></script></head>…
Simplesnão.OseudocumentodeJavaScriptdeveconteraextensão.js.
Exemplo.meus-scripts.jsscripts.js.etc.
50
Desenvolvimento web
www.triway.com.br
Variáveis
var Nome da Variável = “valor”;
Váriávies, sãoumespaços localizadosnamemóriaqueusamosparaarmazenarumvalorouumaexpressão.ParadeclararmosumavariávelemJavascript,usamosaseguintesintaxe.
var nomedavariavel = “valor da variável”;
Exemplo.
var meunome = “Caio Vinicius“;
Asvariáveispodemsernúmeros,númeroscomcasasdecimais,textos,eboleanos(verdadeirooufalso).
51
Desenvolvimento web
www.triway.com.br
Matemáticos ou aritméticos: (+, -, *, /);
Atribuição (=, +=, -=, *=, /=, %=)
Lógico (&&, ||) Relacional (==, !=, <, <=, >, >=)
Operadores
Operadores
Comoemtodalinguagemdeprogramação,osoperadoresservemparamanipularosdados.Podemosfazerdesdeoperaçõesmatemáticasacomparaçõesdedados.OJavaS-criptnosofereceváriostiposdeoperadores,seguealgunstipos:
Matemáticosouaritiméticos:(+,-,*,/);Atribuição(=,+=,-=,*=,/=,%=)Relacional(==,!=,<,<=,>,>=)Lógico(&&,||)
Operadores MatemáticosServempararealizaroperaçõesmatemáticas.Exemplo.
var dois = 1 + 1;var tres = 4- 1;var dez = 5 * 2;var cinco = 10 / 2;
52
Desenvolvimento web
www.triway.com.br
Operadores de AtribuiçãoServeparaatribuiralgumvalor.Existemseistiposdeoperadoresdeatribuição.
Simples=Incremental+=Decremental-=Multiplicativa*=Divisória/=Modular%=
Exemplo.
var valor = 1; // valor = 12 valor += 2; // valor = 33 valor -= 1; // valor = 24 valor *= 6; // valor = 125 valor /= 3; // valor = 46 valor %= 3; // valor = 1
Basicamenteosoperadoresdeatribuiçãonoseconomizaemescritadecódigos,jáqueessasmesmasfunçõespoderiamosescrevercomooperaçõesmatemáticas.
Operadores Relacionais Comoopróprionomediz,essesoperadoresfazemrelaçõesentrevariáveisouva-lores.Podemosfazerasseguintesrelaçõesdedados:
Igualdade==Diferença!=Menor<Menorouigual<=Maior>Maiorouigual>=
Exemplo.
var valor = 2;var t = false ;t = ( valor == 2); // t = truet = ( valor != 2); // t = falset = ( valor < 2); // t = falset = ( valor <= 2); // t = truet = ( valor > 1); // t = truet = ( valor >= 1); // t = true
53
Desenvolvimento web
www.triway.com.br
Operadores Lógicos Para verificarmos duas oumais condições aomesmo tempo usamos operadoreslógicos.OJavaScriptnosoferecedoistiposdeoperadoreslógicos,quesão:
“E”-&&“OU”-||
var valor = 30;var teste = false ;teste = valor < 40 && valor > 20; // teste = trueteste = valor < 40 && valor > 30; // teste = falseteste = valor > 30 || valor > 20; // teste = trueteste = valor > 30 || valor < 20; // teste = falseteste = valor < 50 && valor == 30; // teste = true
Estudebastanteoperadorespoiselessãoabaseparamuitosscriptsquevocêirãoescreveremsuavidadedesenvolvedor.
54
Desenvolvimento web
www.triway.com.br
If e else
if e else ifeesle(se,senão),sãocomandodedigamosverificação,ondeseumafunçãoforverdadeiroeleéexecutadoousenãonãoforoutrafunçãoéexcutada.Imaginamosqueumamigoseulhepedeumdinheiroemprestado,evocêpassapraeleaseguintecondição:
-Seeutiverodinheironobancoeulheempresto,massenãotivernãotemcomoteem-prestar.
Ébasicamenteissoqueoscomandosifeelsefazemsearespostadeifforverdadeiraeleexecutaaprimeiraação,senãoforverdadeiraeleexecutaasegundaação.Exemplo.
var dinheiro = 100;var saldobanco = 110;
if(saldobanco <= dinheiro) {document . writeln (’Posso te emprestar o dinheiro ’);} else {document . writeln (’Não posso te emprestar o dinheiro.’);}
55
Desenvolvimento web
www.triway.com.br
For e while
Nome do Cliente
Nome do Cliente x 100
for e while Oscomandosforewhilesãobemúteisquandoprecisamosrepetiralgunscoman-dos.Imaginequeprecisemosexibirnatelaaseguintemensagem:
Olá,tenhaumbomdia!
imaginequetenhamosqueexibiressamensagemvintevezesnatela.Paranospoupardotrabalhodedigitaroucopiarecolarasvintevezes,podemosusarocomandowhile.Exemplo.
// aqui mostramos o numero de vezes que a mensagem foi exibidavar numimpressoes = 0;
// aqui mostramos o numero de vezes que a mensagem será exibida.while(numimpressoes <= 10) { document.writln(‘Olá, tenha um bom dia!’); // aqui o operador ++ incremeta o código a quantidade de vezes que foi inrmada.numimpressoes++;}
56
Desenvolvimento web
www.triway.com.br
Ocomandofor,fazomesmotrabalhodowhile,adiferençaéqueeledeverecebertrêsargumentos.
for ( var contador = 0; contador <= 100; contador ++) {document . writeln (’Olá, tenha um bom dia. ’);document . writeln (’<br/>’);}
EssaébaseparatrabalharcomJavaScript,esevocêtiveralgumanoçãodealgumanoçãodealgumaoutralinguagemdeprogramação,vocêvaiverquetudoissoquefalamosébasemuitaslinguagensdeprogramação.
57
Desenvolvimento web
www.triway.com.br
Introdução à funções
function nomeDaFuncao(){ document.writeln(‘Olá aluno!’); }
Funções UmafunçãoJavaScriptéumasequênciade instruçõesJavaScriptqueserãoexe-cutadasquandovocêchamá-laatravésdoseunome.
funçõesemJavaScriptdevemobedeceraseguintesintaxe:
function nomedafuncao(parametro) { ….}
Exemplo.
function mostraola() { document.writeln(‘Olá Mundo’);}
Paraqueafunçãosejaexecutadabastachama´laemalgumpontodapáginaHTMLcomoemumlinkporexemplo.
<a href=”javascript:mostraola()”>Mostrar Olá</a>
58
Desenvolvimento web
www.triway.com.br
AdquiraNossoCurso
NoCursoHTML,CSS,Javascriptvocêiráaprendernapráticacomodesenvolverumwebsitedozero.InicialmentevocêaprendesobreHTML,suastagsecomousá-las.DepoispassaporumaintroduçãoaoCSSqueéalinguagemdemarcaçãoecomointer-pretá-laeusá-la.NomódulodeJavaScriptvocêaprendeobásicoparausareentendercomofuncionaaousarbibliotecascomoJqueryporexemplo.Depoisdetodosessescon-hecimentosbásicosdas linguagens,partiremosparaamãonamassa,ondese iniciaoprocessodedesenvolvimentodositedozero.Comaulasinterativaseatrativasvocêiráaprenderdeformarápidacomocriarseuprimeirosite.
Matricule-se já!
