Curso de Programação em Javascript e HTML
204 pág.

Curso de Programação em Javascript e HTML


DisciplinaProgramação I20.572 materiais240.107 seguidores
Pré-visualização40 páginas
encontra a 
primeira ocorrência de string_busca ou -1 
se essa ocorrência não existir. Se não 
fornecermos um índice_opcional a busca 
inicia-se na posição zero, mas se o 
fornecermos é nesse ponto que se inicia 
a busca.
lastIndexOf(string_busca, índice_opcional) Devolve a posição em que se encontra a 
última ocorrência de string_busca ou -1 
se essa ocorrência não existir. A busca 
faz-se a partir do fim e caminha 
progressivamente para o início. Se não 
fornecermos um índice_opcional a busca 
inicia-se no fim, mas se o fornecermos é 
nesse ponto que se inicia a busca. 
split(string_separador, limite_opcional) Divide uma string em partes usando as 
ocorrências de string_separador como 
pontos de divisão. Devolve um array com 
todas as divisões (substrings) 
encontradas. Cada elemento do array é 
uma substring da string original. O 
limite_opcional indica o número máximo 
de partes a incluir no array que é 
devolvido. A string_separador é excluída 
das divisões e o objeto String sobre o 
qual foi invocado este método não sofre 
alterações. 
substring(início, fim) Devolve uma seção da string composta 
pelos caracteres que ocupam as 
posições com índices entre início 
(incluída) e fim (excluída). 
toLowerCase() Devolve uma versão da string com todos 
os caracteres convertidos para letra 
pequena
toUpperCase() Devolve uma versão da string com todos 
os caracteres convertidos para letra 
grande
11.3 Métodos estáticos do objeto String
Método Descrição
String.fromCharCode() Devolve o caractere correspondente ao código Unicode 
fornecido
Este objeto é muito importante em diversas tarefas que podemos realizar em 
JavaScript: validar formulários, trabalhar com cookies, etc.
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 95
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
Exemplos de Aplicação
Contar o número de caracteres de uma String (propriedade length)
<html>
<head>
<title></title>
</head>
<body>
<!--
 var str=&quot;Não há nada melhor que uma cervejinha gelada na sexta à noite.&quot;
 document.write('A String <p> &quot;'+ str + '&quot;</p> tem ')
 document.write(str.length+&quot; caracteres&quot;)
// -->
</body>
</html>
Localizar a ocorrência de uma seqüência de caracteres
<html>
<head>
<title></title>
</head>
<body>
<!--
 var str=&quot;Não há nada melhor que uma cervejinha gelada na sexta à noite.&quot;
 var pos=str.indexOf(&quot;cervejinha &quot;)
 if (pos>=0)
 {
 document.write('a palavra &quot;cervejinha&quot; foi encontrada na posição: ')
 document.write(pos + &quot;<br>&quot;)
 }
 else
 {
 document.write('a palavra &quot;cervejinha&quot; não foi encontrada!')
 }
// -->
 <p>Este exemplo verifica se uma string (variável de texto)
 contém uma determinada palavra. Se a palavra for
 encontrada será indicada a posição em que foi localizado o seu
 primeiro caractere.<br><br>
 <b>Nota:</b> A posição do primeiro caractere da string é 0, não é 1.
 </p>
</body>
</html>
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 96
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
Verificar se uma string contém um determinado caractere (método match() )
<html>
<head>
<title></title>
</head>
<body>
<!--
 var str=&quot;Não há nada melhor que uma cervejinha gelada na sexta à noite.&quot;
 document.write(str.match(&quot;gelada&quot;))
// -->
 <p>Este exemplo verifica se uma palavra (que neste
 caso é &quot;gelada&quot;) está contida na string. Se estiver
 ela será devolvida.</p>
</body>
</html>
Devolver uma seção de uma string (método substring() )
<html>
<head>
<title></title>
</head>
<body>
<!--
 var str=&quot;Não há nada melhor que uma cervejinha gelada na sexta à noite.&quot;
 document.write(&quot;str.substring(27,31) = &quot;+str.substring(27,31))
 document.write(&quot;<br><br>&quot;)
 document.write(&quot;str.substring(27,36)=&quot;+str.substring(27,36))
// -->
 <p>O método substring() do objeto String devolve uma
 seção de uma string. Assim, str.substring(27,31) devolve
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 97
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
 os caracteres que na string str se encontram entre
 as posições 27 e 31. Neste exemplo eles formam
 a palavra &quot;cerv&quot;.</p>
</body>
</html>
Converter em maiúsculas ou em minúsculas (métodos toLowerCase() e 
toUpperCase() )
<html>
<head>
<title></title>
</head>
<body>
<!--
 var str=&quot;Olá Pessoal do JavaScript!&quot;
 document.write(str.toLowerCase())
 document.write(&quot;<br>&quot;)
 document.write(str.toUpperCase())
// -->
</body>
</html>
Obter o código unicode de um caractere
<html>
<head>
<!--
 function toUnicode()
 {
 var str=document.getElementById(&quot;myInput&quot;).value
 if (str!=&quot;&quot;)
 {
 var unicode=str.charCodeAt(0)
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 98
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
 document.getElementById(&quot;unicode&quot;).value=unicode
 }
 }
// -->
<title></title>
</head>
<body>
 <form action=&quot;javascript:;&quot;>
 Escreva um caractere no campo seguinte:<br>
 <input maxlength=&quot;1&quot; onkeyup='toUnicode()' type=&quot;text&quot; size=&quot;2&quot;
 id=&quot;myInput&quot;>
 <hr>
 O código Unicode do caractere é: 
 <input size=&quot;3&quot; type=&quot;text&quot; id=&quot;unicode&quot;>
 </form>
</body>
</html>
PARTE III: HTML Dinâmico
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 99
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
Se já domina bem o HTML 4.01 (ou o XHTML 1), o JavaScript e os estilos CSS, 
então chegou o momento juntar o DOM (&quot;Document Object Model&quot;) a estes 
ingredientes para enriquecer as suas páginas da Web. Esta combinação de 
tecnologias costuma ser designada por HTML Dinâmico, ou DHTML, e vai ajudá-lo a 
proporcionar experiências mais ricas aos usuários do seu website, tornando a sua 
tarefa de webmaster muito mais emocionante.
1. Para que serve o HTML Dinâmico?
O DHTML pode ser usado para criar menus avançados, painéis de texto 
dinâmicos, movimentar os elementos sobre a página, etc.
As aplicações mais úteis são aquelas que contribuem para dar mais eficiência 
à forma como um website transmite a informação que contém. Muitas delas são 
bastante elaboradas e não podem ser ilustradas de forma simples.
A lista seguinte apresenta alguns exemplos muito simples. Se dominarmos bem 
as técnicas básicas usadas nestes exemplos e se soubermos combiná-las umas com 
as outras seremos capazes de produzir efeitos bastante sofisticados e de melhorar a 
forma com os usuários interagem com os nossos websites.
Exemplos simples que pode modificar
Modificar o conteúdo de um elemento
<html>
<head>
 function nameon()
 {
 document.getElementById(&quot;textoh2&quot;).innerHTML=&quot;Seja Bem Vindo!&quot;
 }
 function nameout()
 {
 document.getElementById(&quot;textoh2&quot;).innerHTML=&quot;Como você está?&quot;
 }
<title></title>
</head>
<body>
 <h2 id=&quot;textoh2&quot; onmouseover=&quot;nameon()&quot; onmouseout=&quot;nameout()&quot;>Passe o
 mouse sobre este texto!</h2>
</body>
</html>
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 100
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
Apresentar uma dica
<html>
<head>
 function gettip(txt)
 {
 document.getElementById(&quot;tip&quot;).innerHTML=txt
 }
 function reset()
 {
 document.getElementById(&quot;tip&quot;).innerHTML=&quot;&quot;
 }
<title></title>
</head>
<body>
 <p>Passe o mouse sobre estes nomes de bebidas:</p>
 <span onmouseover=&quot;gettip('Bebida
Carregar mais