JavaScript

Introducción

JavaScript es un lenguaje de programación ligero e interpretado con capacidades orientadas a objetos que le permite crear interactividad en páginas HTML que de otro modo serían estáticas.

El traductor no compila el código JavaScript, sino que lo traduce. Este traductor está integrado en el navegador y es responsable de traducir el código javascript.

Key Points

Es un lenguaje de programación ligero e interpretado.
Está diseñado para crear aplicaciones centradas en la red.
Es complementario e integrado con Java.
Es complementario e integrado con HTML
Es un programa abierto y multiplataforma.

Declaraciones de JavaScript

Las declaraciones de JavaScript son los comandos que le indican al navegador qué acción realizar. Las declaraciones están separadas por punto y coma (;).

La declaración JavaScript constituye el código JavaScript que el navegador traduce línea por línea.

Ejemplo de declaración de JavaScript:

document.getElementById("demo").innerHTML = "Welcome";

La siguiente tabla muestra las diversas sentencias de JavaScript:

No Señor.	Declaración	Descripción
1.	caso de interruptor	Un bloque de declaraciones en el que la ejecución del código depende de diferentes casos. El intérprete compara cada caso con el valor de la expresión hasta que encuentra una coincidencia. Si nada coincide, undefault se utilizará la condición.
2.	Si mas	los if declaración es la declaración de control fundamental que permite a JavaScript tomar decisiones y ejecutar declaraciones de forma condicional.
3.	Mientras	El propósito de un ciclo while es ejecutar una instrucción o un bloque de código repetidamente siempre que la expresión sea verdadera. Una vez que la expresión se vuelve falsa, se saldrá del ciclo.
4.	hacer mientras	Bloque de declaraciones que se ejecutan al menos una vez y continúan ejecutándose mientras la condición es verdadera.
5.	para	Igual que while pero la inicialización, la condición y el incremento / decremento se realizan en la misma línea.
6.	por en	Este bucle se utiliza para recorrer las propiedades de un objeto.
7.	Seguir	La instrucción continue le dice al intérprete que comience inmediatamente la siguiente iteración del ciclo y salte el bloque de código restante.
8.	romper	La sentencia break se utiliza para salir de un bucle antes de tiempo, saliendo de las llaves que lo encierran.
9.	función	Una función es un grupo de código reutilizable que se puede llamar en cualquier parte de su programa. La función de palabra clave se utiliza para declarar una función.
10.	regreso	La declaración de retorno se usa para devolver un valor de una función.
11.	var	Se usa para declarar una variable.
12.	tratar	Un bloque de declaraciones en el que se implementa el manejo de errores.
13.	captura	Un bloque de declaraciones que se ejecutan cuando ocurre un error.
14.	lanzar	Se usa para lanzar un error.

Comentarios de JavaScript

JavaScript admite comentarios de estilo C y C ++, así:

Cualquier texto entre // y el final de una línea se trata como un comentario y JavaScript lo ignora.
Cualquier texto entre los caracteres / * y * / se trata como un comentario. Esto puede abarcar varias líneas.
JavaScript también reconoce la secuencia de apertura de comentarios HTML <! -. JavaScript trata esto como un comentario de una sola línea, al igual que el // comentario .-->
La secuencia de cierre del comentario HTML -> no es reconocida por JavaScript, por lo que debe escribirse como // ->.

Ejemplo

<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>

Variable de JavaScript

Las variables se denominan contenedores con nombre para almacenar información. Podemos colocar datos en estos contenedores y luego hacer referencia a los datos simplemente nombrando el contenedor.

Reglas para declarar variable en JavaScript

Estas son las reglas importantes que se deben seguir al declarar una variable en JavaScript.

En JavaScript, los nombres de las variables distinguen entre mayúsculas y minúsculas, es decir, a es diferente de A.
El nombre de la variable solo se puede comenzar con un guión bajo (_) o una letra (de la a a la z o de la A a la Z), o el signo de dólar ($).
Los números (del 0 al 9) solo se pueden usar después de una letra.
No se permite ningún otro carácter especial en el nombre de la variable.

Antes de utilizar una variable en un programa JavaScript, debe declararla. Las variables se declaran con la palabra clave var de la siguiente manera:

<script type="text/javascript">
   <!--
      var money;
      var name, age;
   //-->
</script>

Las variables se pueden inicializar en el momento de la declaración o después de la declaración de la siguiente manera:

<script type="text/javascript">
   <!--
      var name = "Ali";
      var money;
      money = 2000.50;
   //-->
</script>

Tipo de datos de JavaScript

Hay dos tipos de tipos de datos como se menciona a continuación:

Tipo de datos primitivo
Tipo de datos no primitivo

La siguiente tabla describe Primitive Data Types disponible en javaScript

No Señor.	Descripción del tipo de datos
1.	String Puede contener grupos de caracteres como valor único. Se representa entre comillas dobles. Por ejemplo, var x = "tutorial".
2.	Numbers Contiene los números con o sin decimal. Por ejemplo, var x = 44, y = 44,56;
3.	Booleans Contiene solo dos valores, verdadero o falso. Por ejemplo, var x = verdadero, y = falso.
4.	Undefined La variable sin valor se llama Indefinida. Por ejemplo, var x;
5.	Null Si asignamos nulo a una variable, se vuelve vacía. Por ejemplo, var x = nulo;

La siguiente tabla describe Non-Primitive Data Types en javaScript

No Señor.	Descripción del tipo de datos
1.	Array Puede contener grupos de valores del mismo tipo. Por ejemplo, var x = {1,2,3,55};
2.	Objects Los objetos se almacenan en un par de propiedad y valor. Por ejemplo, var rectangle = {longitud: 5, anchura: 3};

Funciones de JavaScript

La función es un grupo de declaraciones reutilizables (código) que se pueden llamar en cualquier lugar de un programa. En javascript, la palabra clave de función se usa para declarar o definir una función.

Key Points

Para definir una función, use la palabra clave de función seguida de nombre de función, seguido de paréntesis ().
Entre paréntesis, definimos parámetros o atributos.
El grupo de declaraciones reutilizables (código) está entre llaves {}. Este código se ejecuta siempre que se llama a la función.

Syntax

function functionname (p1, p2) {
   function coding…
}

Operadores de JavaScript

Los operadores se utilizan para realizar operaciones en uno, dos o más operandos. El operador está representado por un símbolo como +, =, *,%, etc. A continuación se muestran los operadores admitidos por javascript:

Operadores aritméticos
Operadores de comparación
Operadores lógicos (o relacionales)
Operadores de Asignación
Operadores condicionales (o ternarios)
Operadores aritméticos

Operadores aritmáticos

La siguiente tabla muestra todos los operadores aritméticos compatibles con javascript:

Operador	Descripción	Ejemplo
+	Suma dos operandos.	10 + 10 darán 20
-	Reste el segundo operando del primero.	10 - 10 dará 0
*	Multiplica dos operandos.	10 * 30 dará 300
/	Dividir numerador por denominador	10/10 dará 1
%	Se llama operador de módulo y da el resto de la división.	10% 10 dará 0
++	Operador de incremento, aumenta el valor entero en uno	10 ++ dará 11
-	Operador de disminución, disminuye el valor entero en uno	10 - dará 9

Operadores de comparación

La siguiente tabla muestra todos los operadores de comparación compatibles con javascript:

Operador	Descripción	Ejemplo
==	Comprueba si los valores de dos operandos son iguales o no. Si es así, la condición se convierte en verdadera.	10 == 10 dará verdadero
! =	Not Equal to operator Comprueba si el valor de dos operandos es igual o no, si los valores no son iguales, la condición se convierte en verdadera.	10! = 10 dará falso
>	Greater Than operator Comprueba si el valor del operando izquierdo es mayor que el valor del operando derecho, si es así, la condición se convierte en verdadera.	20> 10 darán verdadero
<	Less than operator Comprueba si el valor del operando izquierdo es menor que el valor del operando derecho, si es así, la condición se convierte en verdadera.	10 <20 darán verdadero
> =	Greater than or equal to operator Comprueba si el valor del operando izquierdo es mayor o igual que el valor del operando derecho, si es así, la condición se convierte en verdadera.	10> = 20 dará falso
<=	Less than or equal to operator Comprueba si el valor del operando izquierdo es menor o igual que el valor del operando derecho, si es así, la condición se convierte en verdadera.	10 <= 20 dará verdadero.

Operadores logicos

La siguiente tabla muestra todos los operadores lógicos compatibles con javascript:

Operador	Descripción	Ejemplo
&&	Lógico AND El operador devuelve verdadero si ambos operandos son distintos de cero.	10 && 10 darán verdad.
\|\|	Lógico OR el operador devuelve verdadero si alguno de los operandos es distinto de cero	10 \|\| 0 dará verdadero.
!	Lógico NOT operador complementa el estado lógico de su operando.	! (10 && 10) dará falso.

Operadores de Asignación

La siguiente tabla muestra todos los operadores de asignación compatibles con javascript:

Operador	Descripción	Ejemplo
=	Simple Assignment operator Asigna valores de los operandos del lado derecho al operando del lado izquierdo.	C = A + B asignará el valor de A + B en C
+ =	Add AND assignment operator Agrega operando derecho al operando izquierdo y asigna el resultado al operando izquierdo	C + = A es equivalente a C = C + A
- =	Subtract AND assignment operator Resta el operando derecho del operando izquierdo y asigna el resultado al operando izquierdo	C - = A es equivalente a C = C - A
* =	Multiply AND assignment operator Multiplica el operando derecho con el operando izquierdo y asigna el resultado al operando izquierdo	C * = A es equivalente a C = C * A
/ =	Divide AND assignment operator Divide el operando izquierdo con el operando derecho y asigna el resultado al operando izquierdo	C / = A es equivalente a C = C / A
% =	Modulus AND assignment operator Operador de asignación de módulo Y, toma el módulo usando dos operandos y asigna el resultado al operando izquierdo	C% = A es equivalente a C = C% A

Operador condicional

También se le llama operador ternario, ya que tiene tres operandos.

Operador	Descripción	Ejemplo
?:	Expresión condicional	¿Si la condición es verdadera? Entonces valor X: De lo contrario valor Y

Estructura de control

La estructura de control controla realmente el flujo de ejecución de un programa. A continuación se muestran las diversas estructuras de control compatibles con javascript.

si ... si no
caso de interruptor
hacer mientras bucle
while loop
en bucle

Si ... si no

La declaración if es la declaración de control fundamental que permite a JavaScript tomar decisiones y ejecutar declaraciones de forma condicional.

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>

Caja del interruptor

La sintaxis básica de la instrucción de cambio es proporcionar una expresión para evaluar y varias declaraciones diferentes para ejecutar según el valor de la expresión. El intérprete compara cada caso con el valor de la expresión hasta que encuentra una coincidencia. Si nada coincide, se utilizará una condición predeterminada.

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>

Hacer mientras bucle

El bucle do ... while es similar al bucle while excepto que la verificación de la condición ocurre al final del bucle. Esto significa que el bucle siempre se ejecutará al menos una vez, incluso si la condición es 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>

Esto producirá el siguiente resultado:

Starting Loop
Current Count : 0
Loop stopped!

Mientras bucle

El propósito de un ciclo while es ejecutar una instrucción o un bloque de código repetidamente siempre que la expresión sea verdadera. Una vez que la expresión se vuelve falsa, se saldrá del ciclo.

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>

Esto producirá el siguiente 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!

En bucle

El bucle for es la forma más compacta de bucle e incluye las siguientes tres partes importantes:

La inicialización del ciclo donde inicializamos nuestro contador a un valor inicial. La instrucción de inicialización se ejecuta antes de que comience el ciclo.
La declaración de prueba que probará si la condición dada es verdadera o no. Si la condición es verdadera, entonces se ejecutará el código dado dentro del ciclo; de lo contrario, saldrá el ciclo.
La declaración de iteración en la que puede aumentar o disminuir su contador.

Syntax

for (initialization; test condition; iteration statement){
   Statement(s) to be executed if test condition is true
}

Ejemplo

<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>

Esto producirá el siguiente resultado que es similar al bucle 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!

Crear programa de muestra

A continuación se muestra el programa de muestra que muestra el tiempo, cuando hacemos clic en el botón.

<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

↰ Previous page Next page ↱