docFundamentos JavaScript
download 
Denúncia Transcrição
Fundamentos JavaScript
O HTML
O HTML é a linguagem de marcação de texto, ou seja, ela é
responsável por marcar o conteúdo de uma página web,
Variáveis
Elementos capazes de armazenar um valor.
var nome_da_variavel;
dizendo que um determinado trecho de texto é um título,
um parágrafo, uma lista, etc. Ela faz isso através de tags,
nome da variável para declará-la.
textos escritos dentre os símbolos <>.
No JavaScript utilizamos o operador var antes do
Não precisamos declarar o tipo de valor que a
<title> </title> - Título que aparecerá na aba do
variável irá armazenar, o JavaScript é uma
navegador
linguagem dita “fracamente tipada”, diferente
<body> </body> - Inicia o conteúdo da página
<p> </p> - Parágrafo de texto
<h1></h1> <h2></h2> ... <h6></h6> - Níveis
de C/C++, Java e C#.
Não inicie o nome de suas variáveis com
números e não utilize caracteres especiais.
hierárquicos de título.
Comentários
Comentários:
//Linha de comentário
<!-- seu código html com <tags> comentado aqui -->
/* Bloco
Extensão de arquivo: .html ou .htm
de
Comentário */
CSS
O CSS é a linguagem de estilização de uma página web.
Comandos de Decisão (if)
Através dela conseguimos dizer que um título possuíra uma
Comandos ou estruturas de decisão são recursos que
cor específica, um tamanho, uma fonte, ou que um bloco
permitem a tomada de uma decisão lógica sobre o caminho
deverá possuir uma imagem de background, e uma
a ser escolhido. São tomados com base em uma expressão
infinidade de outros recursos.
lógica.
Você pode “linkar” uma folha de estilos em seu arquivo
As expressões lógicas são expressões que comparam
.html com a tag <link>
valores e retornar true (verdadeiro) ou false (falso).
<link rel="stylesheet" type="text/css" href="style.css"/>
Operador
Aplicação
x == y
Verifica se o valor de x é igual a y
x != y
Verifica se o valor de x é diferente de y
x > y
Verifica se o valor de x é maior do que y
x < y
Verifica se o valor de x é menor do que y
/*Bloco
x >= y
Verifica se o valor de x é maior ou igual a y
de
x <= y
Verifica se o valor de x é menor ou igual a y
Comentários
//Linha de comentário
Comentário */
Estas verificações são mais comumente utilizadas em
Extensão de arquivo: .css
estrutura como o if (se), que avaliam a expressão lógica, e
em caso positivo (true) executam o bloco de código,
JAVASCRIPT
O JavaScript é a linguagem de programação responsável
por atribuir funcionalidades a uma página da web, com ele
podemos manipular os elementos HTML e as propriedades
CSS. Ou seja, podemos alterar conteúdos do HTML,
adicionar e remover elementos (tags), ou acessar
propriedades CSS e modifica-las (aumentar um tamanho de
texto, alterar cores, modificar imagens de background, por
exemplo)
Extensão de arquivo: .js
(definido por chaves).
if( jogo_ligado == true ) {
//Executa o código que estiver definido
aqui dentro do bloco.
}
É possível também definir um bloco de código que será
executado caso a expressão lógica resulte em um retorno
negativo (false). Para isso utilizamos a palavra else (se) e os
caracteres { }, após o bloco de código do if.
if( jogo_ligado == true ) {
//Bloco de código a ser executado caso a
expressão lógica seja verdadeira
for( var contador = 1; contador < 6;
contador++ ) {
} else {
//Bloco de código a ser executado caso a
expressão lógica seja verdadeira
//Bloco de código a ser executado caso a
expressão lógica seja falsa
}
}
Controles de Repetição
Console.log
A forma mais prática de visualizarmos valores e
Controles de repetição são mecanismos que permitem a
informações no navegador quando programamos com
repetição de um trecho de código por várias vezes.
JavaScript é utilizando a função console.log()
(Também são comumente chamados de loops)
Podemos passar variáveis, strings e até mesmo arrays como
parâmetros para a função.
while
O while é um controle de repetição que irá executar um
bloco de código caso uma expressão lógica seja verdadeira.
O bloco de código será executado repetidamente enquanto
a expressão lógica for verdadeira.
Definimos um bloco while da seguinte forma:
console.log( x ); //variável
console.log( "Hello World" ); //string
console.log( itens_do_jogo ); //array
Estas informações serão exibidas no console do seu
navegador. Utilizando Google Chrome ou Firefox, basta
while( x < 10 ) {
pressionar a tecla F12 para que as ferramentas de
//Bloco de código a ser executado
enquanto a expressão for verdadeira
desenvolvimento apareçam, e então navegar até a aba
console.
}
Após a palavra while, temos a expressão lógica a ser
definida entre parênteses.
do while
O controle de repetição do while tem um funcionamento
Array
Arrays são estruturas que nos permitem armazenar juntas
diversas variáveis em sequência.
[x, y, z, w, k, i, j, l, m, n, o]
parecido com o while, porém definimos primeiro o bloco de
código após a palavra do, e ao final fazemos a verificação
Para declararmos um array em JavaScript, fazemos tal
da expressão lógica com o while(). Isso garante que o nosso
como uma variável, porém atribuindo à variável o conjunto
código será executado sempre, ao menos uma vez, dado
de elementos definidos dentro de colchetes [] e separados
que a expressão lógica só será realizada ao final do bloco.
por vírgulas.
do {
var itens = ["Coração", "Moeda", "Orb"];
//Bloco de código que será executado
pelo menos uma vez, e novamente caso a
expressão lógica abaixo seja verdadeira
Para acessarmos o valor de um dos elementos do array,
} while ( x < 10 )
utilizamos o índice. Os arrays começam a partir do índice 0
e seguem em ordem crescente, um a um, exemplo:
for
Os loops utilizando for são bastante utilizados quando
sabemos o número de vezes que desejamos que um código
seja executado. O for nos permite definir 3 informações
dentre seus parênteses (separadas por ponto e vírgula):
Uma inicialização de variável
Uma expressão lógica
Uma expressão matemática final
O for será executado se e enquanto a expressão lógica tiver
um retorno verdadeiro. Um exemplo de uma estrutura de
um for:
["Coração", "Moeda", "Orb"]
[
0,
1,
2
]
Acessando o elemento “Moeda” do array:
itens[1];
Acessando o elemento “Orb” do array:
itens[2];
Acessando a informação de quantos elementos um array
possui:
itens.length; //número inteiro
