JavaScript
Introdução
JavaScript é uma linguagem de programação interpretada leve com recursos orientados a objetos que permitem que você crie interatividade em páginas HTML estáticas.
O código JavaScript não é compilado, mas traduzido pelo tradutor. Este tradutor está embutido no navegador e é responsável por traduzir o código javascript.
Key Points
É uma linguagem de programação interpretada leve.
Ele foi projetado para criar aplicativos centrados em rede.
É complementar e integrado ao Java.
É complementar e integrado com HTML
É uma plataforma aberta e cruzada
Declarações JavaScript
As instruções JavaScript são os comandos para informar ao navegador qual ação executar. As instruções são separadas por ponto e vírgula (;).
A instrução JavaScript constitui o código JavaScript que é traduzido pelo navegador linha por linha.
Exemplo de instrução JavaScript:
document.getElementById("demo").innerHTML = "Welcome";
A tabela a seguir mostra as várias declarações JavaScript -
Sr. Não. | Declaração | Descrição |
---|---|---|
1 | caixa de troca | Um bloco de instruções em que a execução do código depende de casos diferentes. O intérprete verifica cada caso em relação ao valor da expressão até que uma correspondência seja encontrada. Se nada corresponder, umdefault condição será usada. |
2 | Se mais | o if declaração é a declaração de controle fundamental que permite ao JavaScript tomar decisões e executar declarações condicionalmente. |
3 - | Enquanto | O objetivo de um loop while é executar uma instrução ou bloco de código repetidamente, desde que a expressão seja verdadeira. Assim que a expressão se tornar falsa, o loop será encerrado. |
4 - | fazer enquanto | Bloco de instruções que são executadas pelo menos uma vez e continuam a ser executadas enquanto a condição for verdadeira. |
5 | para | O mesmo que while, mas a inicialização, condição e incremento / decremento são feitos na mesma linha. |
6 | para em | Este loop é usado para percorrer as propriedades de um objeto. |
7 | continuar | A instrução continue diz ao interpretador para iniciar imediatamente a próxima iteração do loop e pular o bloco de código restante. |
8 | pausa | A instrução break é usada para sair de um loop mais cedo, quebrando as chaves que o envolvem. |
9 | função | Uma função é um grupo de código reutilizável que pode ser chamado em qualquer lugar em seu programa. A função de palavra-chave é usada para declarar uma função. |
10 | Retorna | A instrução de retorno é usada para retornar um valor de uma função. |
11 | var | Usado para declarar uma variável. |
12 | experimentar | Um bloco de instruções em que o tratamento de erros é implementado. |
13 | pegar | Um bloco de instruções que são executadas quando ocorre um erro. |
14 | lançar | Usado para lançar um erro. |
Comentários de JavaScript
JavaScript suporta comentários no estilo C e C ++, assim:
Qualquer texto entre // e o final de uma linha é tratado como um comentário e é ignorado pelo JavaScript.
Qualquer texto entre os caracteres / * e * / é tratado como um comentário. Isso pode abranger várias linhas.
JavaScript também reconhece a sequência de abertura do comentário HTML <! -. JavaScript trata isso como um comentário de uma única linha, assim como faz o // comentário .-->
A sequência de fechamento do comentário HTML -> não é reconhecida pelo JavaScript, portanto, deve ser escrita como // ->.
Exemplo
<script language="javascript" type="text/javascript">
<!--
// this is a comment. It is similar to comments in C++
/*
* This is a multiline comment in JavaScript
* It is very similar to comments in C Programming
*/
//-->
<script>
Variável JavaScript
As variáveis são conhecidas como contêineres nomeados para armazenar informações. Podemos colocar dados nesses contêineres e, em seguida, fazer referência aos dados simplesmente nomeando o contêiner.
Regras para declarar variáveis em JavaScript
Aqui estão as regras importantes que devem ser seguidas ao declarar uma variável em JavaScript.
Em JavaScript, os nomes de variáveis diferenciam maiúsculas de minúsculas, ou seja, a é diferente de A.
O nome da variável só pode ser iniciado com um sublinhado (_) ou uma letra (de a a z ou A a Z) ou cifrão ($).
Os números (0 a 9) só podem ser usados após uma letra.
Nenhum outro caractere especial é permitido no nome da variável.
Antes de usar uma variável em um programa JavaScript, você deve declará-la. As variáveis são declaradas com a palavra-chave var da seguinte forma -
<script type="text/javascript">
<!--
var money;
var name, age;
//-->
</script>
As variáveis podem ser inicializadas no momento da declaração ou após a declaração da seguinte forma -
<script type="text/javascript">
<!--
var name = "Ali";
var money;
money = 2000.50;
//-->
</script>
Tipo de dados Javascript
Existem dois tipos de dados, conforme mencionado abaixo -
Tipo de dados primitivos
Tipo de dados não primitivos
A tabela a seguir descreve Primitive Data Types disponível em javaScript
Sr. Não. | Descrição do tipo de dados |
---|---|
1 | String Pode conter grupos de caracteres como valor único. É representado entre aspas duplas.Eg var x = “tutorial”. |
2 | Numbers Contém os números com ou sem decimal. Por exemplo, var x = 44, y = 44,56; |
3 - | Booleans Contém apenas dois valores verdadeiros ou falsos. Por exemplo, var x = verdadeiro, y = falso. |
4 - | Undefined A variável sem valor é chamada de Indefinida. Por exemplo, var x; |
5 | Null Se atribuirmos null a uma variável, ela ficará vazia. Por exemplo, var x = nulo; |
A tabela a seguir descreve Non-Primitive Data Types em javaScript
Sr. Não. | Descrição do tipo de dados |
---|---|
1 | Array Pode conter grupos de valores do mesmo tipo. Por exemplo, var x = {1,2,3,55}; |
2 | Objects Os objetos são armazenados no par de propriedades e valores. Ex .: retângulo var = {comprimento: 5, largura: 3}; |
Funções JavaScript
Função é um grupo de instruções reutilizáveis (Código) que podem ser chamadas em qualquer lugar em um programa. Em javascript, a palavra-chave função é usada para declarar ou definir uma função.
Key Points
Para definir uma função, use a palavra-chave function seguida de functionname, seguida de parênteses ().
Entre parênteses, definimos parâmetros ou atributos.
O grupo de instruções reutilizáveis (código) é colocado entre chaves {}. Este código é executado sempre que a função é chamada.
Syntax
function functionname (p1, p2) {
function coding…
}
Operadores de JavaScript
Os operadores são usados para realizar operações em um, dois ou mais operandos. O operador é representado por um símbolo como +, =, *,% etc. A seguir estão os operadores suportados por javascript -
Operadores aritméticos
Operadores de comparação
Operadores lógicos (ou relacionais)
Operadores de atribuição
Operadores condicionais (ou ternários)
Operadores aritméticos
Operadores aritmáticos
A tabela a seguir mostra todos os operadores aritméticos suportados por javascript -
Operador | Descrição | Exemplo |
---|---|---|
+ | Adicione dois operandos. | 10 + 10 dará 20 |
- | Subtraia o segundo operando do primeiro. | 10 - 10 dará 0 |
* | Multiplique dois operandos. | 10 * 30 dará 300 |
/ | Divida o numerador pelo denominador | 10/10 vai dar 1 |
% | É chamado de operador de módulo e fornece o restante da divisão. | 10% 10 dará 0 |
++ | Operador de incremento, aumenta o valor inteiro em um | 10 ++ dará 11 |
- | Operador de decremento, diminui o valor inteiro em um | 10 - dará 9 |
Operadores de comparação
A tabela a seguir mostra todos os operadores de comparação suportados por javascript -
Operador | Descrição | Exemplo |
---|---|---|
== | Verifica se os valores de dois operandos são iguais ou não. Se sim, a condição se torna verdadeira. | 10 == 10 dará verdadeiro |
! = | Not Equal to operator Verifica se o valor de dois operandos é igual ou não, se os valores não são iguais a condição torna-se verdadeira. |
10! = 10 dará falso |
> | Greater Than operator Verifica se o valor do operando esquerdo é maior que o valor do operando direito, se sim, a condição torna-se verdadeira. |
20> 10 dará verdadeiro |
< | Less than operator Verifica se o valor do operando esquerdo é menor que o valor do operando direito; se sim, a condição torna-se verdadeira. |
10 <20 dará verdadeiro |
> = | Greater than or equal to operator Verifica se o valor do operando esquerdo é maior ou igual ao valor do operando direito, se sim a condição torna-se verdadeira. |
10> = 20 dará falso |
<= | Less than or equal to operator Verifica se o valor do operando esquerdo é menor ou igual ao valor do operando direito, se sim a condição torna-se verdadeira. |
10 <= 20 dará verdadeiro. |
Operadores lógicos
A tabela a seguir mostra todos os operadores lógicos suportados por javascript -
Operador | Descrição | Exemplo |
---|---|---|
&& | Lógico AND operador retorna verdadeiro se ambos os operandos forem diferentes de zero. | 10 e 10 serão verdadeiros. |
|| | Lógico OR operador retorna verdadeiro se algum dos operandos for diferente de zero | 10 || 0 dará verdadeiro. |
! | Lógico NOT operador complementa o estado lógico de seu operando. | ! (10 e 10) resultará em falso. |
Operadores de atribuição
A tabela a seguir mostra todos os operadores de atribuição suportados por javascript -
Operador | Descrição | Exemplo |
---|---|---|
= | Simple Assignment operator Atribui valores de operandos do lado direito para operando do lado esquerdo. |
C = A + B irá atribuir o valor de A + B em C |
+ = | Add AND assignment operator Ele adiciona o operando direito ao operando esquerdo e atribui o resultado ao operando esquerdo |
C + = A é equivalente a C = C + A |
- = | Subtract AND assignment operator Ele subtrai o operando direito do operando esquerdo e atribui o resultado ao operando esquerdo |
C - = A é equivalente a C = C - A |
* = | Multiply AND assignment operator Ele multiplica o operando direito com o operando esquerdo e atribui o resultado ao operando esquerdo |
C * = A é equivalente a C = C * A |
/ = | Divide AND assignment operator Ele divide o operando esquerdo com o operando direito e atribui o resultado ao operando esquerdo |
C / = A é equivalente a C = C / A |
% = | Modulus AND assignment operator Módulo E operador de atribuição, leva o módulo usando dois operandos e atribui o resultado ao operando esquerdo |
C% = A é equivalente a C = C% A |
Operador Condicional
Também é chamado de operador ternário, pois possui três operandos.
Operador | Descrição | Exemplo |
---|---|---|
?: | Expressão Condicional | Se a condição for verdadeira? Então valor X: Caso contrário, valor Y |
Estrutura de Controle
A estrutura de controle realmente controla o fluxo de execução de um programa. A seguir estão as várias estruturas de controle suportadas por javascript.
se ... mais
caixa de troca
fazer loop while
loop while
para loop
Se ... mais
A instrução if é a instrução de controle fundamental que permite ao JavaScript tomar decisões e executar instruções condicionalmente.
Syntax
if (expression){
Statement(s) to be executed if expression is true
}
Example
<script type="text/javascript">
<!--
var age = 20;
if( age > 18 ){
document.write("<b>Qualifies for driving</b>");
}
//-->
</script>
Trocar caso
A sintaxe básica da instrução switch é fornecer uma expressão para avaliar e várias instruções diferentes para executar com base no valor da expressão. O intérprete verifica cada caso em relação ao valor da expressão até que uma correspondência seja encontrada. Se nada corresponder, uma condição padrão será usada.
Syntax
switch (expression) {
case condition 1: statement(s)
break;
case condition 2: statement(s)
break;
...
case condition n: statement(s)
break;
default: statement(s)
}
Example
<script type="text/javascript">
<!--
var grade='A';
document.write("Entering switch block<br/>");
switch (grade) {
case 'A': document.write("Good job<br/>");
break;
case 'B': document.write("Pretty good<br/>");
break;
case 'C': document.write("Passed<br/>");
break;
case 'D': document.write("Not so good<br/>");
break;
case 'F': document.write("Failed<br/>");
break;
default: document.write("Unknown grade<br/>")
}
document.write("Exiting switch block");
//-->
</script>
Loop do while
O loop do ... while é semelhante ao loop while, exceto que a verificação da condição ocorre no final do loop. Isso significa que o loop sempre será executado pelo menos uma vez, mesmo se a condição for falsa.
Syntax
do{
Statement(s) to be executed;
} while (expression);
Example
<script type="text/javascript">
<!--
var count = 0;
document.write("Starting Loop" + "<br/>");
do{
document.write("Current Count : " + count + "<br/>");
count++;
}while (count < 0);
document.write("Loop stopped!");
//-->
</script>
Isso produzirá o seguinte resultado -
Starting Loop
Current Count : 0
Loop stopped!
While Loop
O objetivo de um loop while é executar uma instrução ou bloco de código repetidamente, desde que a expressão seja verdadeira. Assim que a expressão se tornar falsa, o loop será encerrado.
Syntax
while (expression){
Statement(s) to be executed if expression is true
}
Example
<script type="text/javascript">
<!--
var count = 0;
document.write("Starting Loop" + "<br/>");
while (count < 10){
document.write("Current Count : " + count + "<br/>");
count++;
}
document.write("Loop stopped!");
//-->
</script>
Isso produzirá o seguinte resultado -
Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped!
For Loop
O loop for é a forma mais compacta de looping e inclui as seguintes três partes importantes -
A inicialização do loop onde inicializamos nosso contador para um valor inicial. A instrução de inicialização é executada antes do início do loop.
A declaração de teste que testará se a condição fornecida é verdadeira ou não. Se a condição for verdadeira, o código fornecido dentro do loop será executado, caso contrário, o loop aparecerá.
A instrução de iteração onde você pode aumentar ou diminuir seu contador.
Syntax
for (initialization; test condition; iteration statement){
Statement(s) to be executed if test condition is true
}
Exemplo
<script type="text/javascript">
<!--
var count;
document.write("Starting Loop" + "<br/>");
for(count = 0; count < 10; count++){
document.write("Current Count : " + count );
document.write("<br/>");
}
document.write("Loop stopped!");
//-->
</script>
Isso produzirá o seguinte resultado que é semelhante ao loop while -
Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped!
Criando Programa de Amostra
A seguir está o programa de exemplo que mostra o tempo, quando clicamos no botão.
<html>
<body>
<button onclick="this.innerHTML=Date()">The time is?</button>
<p>Click to display the date.</p>
<button onclick="displayDate()">The time is?</button>
<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}</script>
<p id="demo"></p>
</script>
</body>
</html>
Output