A maior rede de estudos do Brasil

Grátis
475 pág.
LIVRO Aplicativos em PHP

Pré-visualização | Página 16 de 50

linguagens de script).
Sua união com o CSS é conhecida como DHTML. Usando o Javascript, é possível modificar 
dinamicamente os estilos dos elementos da página em HTML.
Dada sua enorme versatilidade e utilidade ao lidar com ambientes em árvore (como um documento 
HTML), foi criado a partir desta linguagem um padrão ECMA, o ECMA-262, também conhecido 
como ECMAScript. Este padrão é seguido, por exemplo, pela linguagem ActionScript da 
Adobe(Antigamente Macromedia, porém a empresa foi vendida a Adobe).
Além de uso em navegadores processando páginas HTML dinâmicas, o JavaScript é hoje usado 
também na construção do navegador Mozilla, o qual oferece para a criação de sistemas GUI todo 
um conjunto de ferramentas (em sua versão normal como navegador, sem a necessidade de nenhum 
software adicional), que incluem (e não apenas) um interpretador de Javascript, um comunicador 
Javascript <-> C++ e um interpretador de XUL, linguagem criada para definir a interface gráfica de 
aplicações.
Introdução
O JavaScript é uma ferramenta muito util para a construção de Web Sites, especialmente se 
utilizada em conjunto com HTML, CSS, PHP, entre outras ferramentas.
Também pode criar diversas ferramentas para sites:
 * Jogos
 * Relógios
 * Animações com mouse
 * Menus com select
 * Mensagens de alerta
 * Janelas Popup
 * Validação de Formulários HTML
Sintaxe
Como escrever código JavaScript?
 * Usar a tag <script para dizer ao browse que você está usando Javascript.
 * Escrever ou fazer download de Javascript
http://pt.wikibooks.org/wiki/Aplicativos_em_PHP
Aplicativos em PHP (WikiBooks - democratizando o conhecimento) - Página 91/475
 * Testar scripts
Primeiro script JavaScript
HTML e JS
<html>
<body>
<script type="text/javascript">
<!--
document.write("Olá Mundo do JavaScript!")
//-->
</script>
</body>
</html>
Location - onde usar JS?
 # Dentro da tag head
 # Na tag body
 # Em um arquivo externo
Exemplo no head
<html>
<head>
<script type="text/javascript">
<!--
function popup() {
alert("Olá Mundo do JavaScript (function)")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="popup()" value="Executar">
</body>
</html>
Externo - Importando um arquivo JS externo
O arquivo deve estar em JS e somente com sintaxe JS e usar extensão .js
Importante: os arquivos a serem incluídos não devem conter as tags
<script> e </script>.
http://pt.wikibooks.org/wiki/Aplicativos_em_PHP
Aplicativos em PHP (WikiBooks - democratizando o conhecimento) - Página 92/475
<html>
<head>
<script src="meujs.js">
</script>
</head>
<body>
<input type="button" onclick="popup()" value="Clique Me!">
</body>
</html>
Operadores
Aritméticos
Operator Descrição Example
+ Addition 2 + 4
- Subtraction 6 - 2
* Multiplication 5 * 3
/ Division 15 / 3
% Modulus 43 % 10
Exemplo de Operadores Javascript com Variáveis
<body>
<script type="text/javascript">
<!--
var two = 2
var ten = 10
var linebreak = "<br />"
document.write("two plus ten = ")
result = two + ten
document.write(result)
document.write(linebreak)
document.write("ten * ten = ")
result = ten * ten
document.write(result)
document.write(linebreak)
document.write("ten / two = ")
result = ten / two
document.write(result)
//-->
</script>
</body>
http://pt.wikibooks.org/wiki/Aplicativos_em_PHP
Aplicativos em PHP (WikiBooks - democratizando o conhecimento) - Página 93/475
Operadores de Comparação
Operator Descrição Example Result
== Equal To $x == $y false
!= Not Equal To $x != $y true
< Less Than $x < $y true
> Greater Than $x > $y false
<= Menor ou igual $x <= $y true
>= Maior ou igual $x >= $y false
Variáveis
Podemos imaginar uma variável como uma sexta de frutas e os dados das variáveis como as frutas 
da sexta.
Quando usar uma variável pela primeira vez é uma boa prática de programação usar a palavra 
reservada var antes do nome da variável.
<body>
<script type="text/javascript">
<!--
var linebreak = "<br />"
var my_var = "Hello World!"
document.write(my_var)
document.write(linebreak)
my_var = "I am learning javascript!"
document.write(my_var)
document.write(linebreak)
my_var = "Script is Finishing up..."
document.write(my_var)
//-->
</script>
</body>
Nomes de variáveis
- evitar palavras reservadas do JavaScript
- escolher nomes descritivos
- nomes de variáveis não podem iniciar com algarismos
- uma boa prática é iniciar com minúsculas
Funções
Funções em JavaScript são similares a funções em outras linguagens como PHP, C, C++, Java.
Uma função é um pedaço de código que fica dormindo até que seja chamado para "funcionar".
http://pt.wikibooks.org/wiki/Aplicativos_em_PHP
Aplicativos em PHP (WikiBooks - democratizando o conhecimento) - Página 94/475
Ao invés de digitar todo o código sempre que precisar, podemos simplesmente chamar novamente a 
função. Isto é conhecido como reutilização de código.
<html>
<head>
<script type="text/javascript">
<!--
function popup() {
 alert("Olá Mundo do JS!")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="popup()" value="Executar">
</body>
</html>
Eventos
Este é o grande recurso do JavaScript, que possibilita interagir com o usuário no site, como:
- clique do mouse
- página sendo carregada
- mouse movendo sobre algum componente da página
- Seleção de item de Select
- Toque de tecla
- etc
<html>
<head>
<script type="text/javascript">
<!--
function popup() {
alert("Hello World")
//-->
</script>
</head>
<body>
<input type="button" value="Click Me!" onclick="popup()"><br />
<a href="#" onmouseover="" onMouseout="popup()"">
Hover Me!</a>
</body>
</html>
Todo código em JavaScript é formado por instruções (statments).
Uma instrução é uma variável igual a um valor.
Como também é algo como uma chamada de função, por exemplo document.write(). As instruções 
definem o que o script deve fazer e como fazer.
http://pt.wikibooks.org/wiki/Aplicativos_em_PHP
Aplicativos em PHP (WikiBooks - democratizando o conhecimento) - Página 95/475
Em algumas linguagens como o PHP, o final das instruções obrigatoriamente deve terminar com 
ponto e vírgula. Mas em JavaScript o ; ao final das instruções é opcional. Obrigatoriamente as 
instruções terminam com uma quebra de linha.
Tipos de Instruções (Estruturas de Controle)
- Condicionais
- Loops
- Manipulação de Objetos
- Comentários
- Manupulação de exceções
if
<script type="text/javascript">
<!--
var myNum = 7;
if(myNum == 7){
 document.write("Lucky 7!");
}
//-->
</script>
else
<script type="text/javascript">
<!--
var myNum = 10;
if(myNum == 7){
 document.write("Lucky 7!");
}else{ 
 document.write("You're not very lucky today..."); 
}
//-->
</script>
else if
<script type="text/javascript">
<!--
var visitor = "principal";
http://pt.wikibooks.org/wiki/Aplicativos_em_PHP
Aplicativos em PHP (WikiBooks - democratizando o conhecimento) - Página 96/475
if(visitor == "teacher"){
 document.write("My dog ate my homework...");
}else if(visitor == "principal"){
 document.write("What stink bombs?");
} else {
 document.write("How do you do?");
}
//-->
</script>
while
<script type="text/javascript">
<!--
var myCounter = 0;
var linebreak = "<br />";
document.write("While loop is beginning");
document.write(linebreak);
while(myCounter < 10){
 document.write("myCounter = " + myCounter);
 document.write(linebreak);
 myCounter++;
}
document.write("While loop is finished!");
</script>
for
<script type="text/javascript">
<!--
var linebreak = "<br />";
document.write("For loop code is beginning");
document.write(linebreak);
for(i = 0; i < 5; i++){
 document.write("Counter i = " + i);
 document.write(linebreak);
}
document.write("For loop code is finished!");
</script>
Comentários
<script type="text/javascript">
<!--
// This is a single line Javascript comment
http://pt.wikibooks.org/wiki/Aplicativos_em_PHP