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