Modo Strict, var, let y const
El Modo Strict
El modo Strict es para declarar las variables de una manera obligatoria.
En el Código 134, se usa el modo use strict, al cargar la página, la variable fruta se le asigna la palabra mango, pero no se declaró la variable fruta, la sentencia try lanza un error.
Descargar archivo codigo134.html
Copiar enlace:
Pegar enlace en la url del explorador web y descarga el archivo:
Código 134: El Modo Strict
<!-- Archivo: codigo134.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- Códigos de JavaScript -->
<script>
// Declarar variable de manera obligatoria
"use strict";
try {
// Inicializar variable
fruta = "mango";
// Mostrar variable por pantalla
document.write(fruta);
}
catch(err) {
// Mostrar error
document.write(err);
}
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo134.html
En la Figura 150, se ve el error porque la variable fruta no se declaró.
Código 134: El Modo Strict
La Sentencia var
La sentencia var se usa para declarar las variables y se sigue los siguientes pasos (Código 135):
- Declarar la variable
- Asignar el valor a la variable
- Usar la variable
En el Código 135, al cargar la página, primero se declara la variable Fruta con sentencia var, luego se asigna la variable fruta con la palabra mango y por último lo muestracon la etiqueta <p>.
Descargar archivo codigo135.html
Código 135: La Sentencia var
<!-- Archivo: codigo135.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- Mensaje -->
<p id="demo"></p>
<!-- Códigos de JavaScript -->
<script>
// Declarar la variable
var fruta;
// Asignar valor a la variable
fruta = "mango";
// Mostrar valor de la variable
document.getElementById("demo").innerHTML = fruta;
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo135.html
En la Figura 151, al cargar la página la variable fruta muestra su valor que es mango.
Código 135: La Sentencia var
La Sentencia let
La sentencia let es una sentencia de ES6 (ECMAScript 6), es una nueva forma de declarar una variable.
Las variables declaradas con la sentencia let es otra forma a la alternativa a la sentencia var, pero la sentencia let y var tiene su diferencia.
En la sentencia var, la variable puede ser global, un bloque de códigos lo puede leer no importa que la variable se declare fuera del bloque de códigos.
En el Código 136, dentro de la función varPrueba(), la variable x se declara con valor 5 fuera del bloque de códigos y dentro del bloque de códigos la variable x se declara con valor 10, el valor 5 de la variable x se pierde. La función varPrueba() se invoca al hacer click en el botón que es la etiqueta <button>.
Descargar archivo codigo136.html
Código 136: La Sentencia var
<!-- Archivo: codigo136.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- Mostrar valor -->
<button onclick = "varPrueba()">Mostrar</button>
<!-- Códigos de JavaScript -->
<script>
function varPrueba() {
// Declara variable e inicializar
var x = 5;
// Bloque de códigos
{
// Declarar variable e inicializar
var x = 10;
// Mostrar valor de la variable
alert(x);
}
alert(x);
}
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo136.html
En la Figura 152, al presionar el botón, la variable x muesta su valor que es 10 y en la Figura 153, la variable x vuelve mostrar su valor que es 10 porque la variable x es una variable global.
Código 136: La Sentencia var
Código 136: La Sentencia var
En el Código 137, dentro de la función letPrueba(), la variable x se declara con valor 5 fuera del bloque de códigos y dentro del bloque de códigos se vuelve declarar la variable x con valor 10, el valor de x declarado fuera del bloque de códigos no se pierde porque son variables diferentes. La función letPrueba() se invoca al hacer click en el botón que es la etiqueta <button>.
Código 137: La Sentencia let
<!-- Archivo: codigo137.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- Mostrar valor -->
<button onclick = "letPrueba()">Mostrar</button>
<!-- Códigos de JavaScript -->
<script>
function letPrueba() {
// Declara variable
let x = 5;
// Bloque de códigos
{
// Declarar variable
let x = 10;
// Mostrar valor de la variable
alert(x);
}
alert(x);
}
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo137.html
En la Figura_154, al presionar el botón, la variable x muesta su valor que es 10 y en la Figura_155, la variable x vuelve mostrar su valor que es 5 porque la variable x no es una variable global.
Código 137: La Sentencia let
Código 137: La Sentencia let
Es una manera de declarar variables, la sentencia const no puede modificar su valor y no se puede volver a declarar.
En el Código 138, al cargar la página, dentro de la sentencia try se declara la constante con su valor que es 5 y después se intenta cambiar el valor de la constate por otro valor que es 10, eso genera un error porque las constantes no se puede cambiar su valor.
Código 138: La Sentecia const
<!-- Archivo: codigo138.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- Códigos de JavaScript -->
<script>
try {
// Declarar la constante y dar su valor
const x = 5;
// Cambiar de valor a la variable x
x = 10;
}
catch(err) {
// Mostrar error por pantalla
document.write(err);
}
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo138.html
En la Figura_156, al cargar la página, se genera un error y lo muestra dentro de la sentencia catch porque no se puede cambiar el valor a una constante.
Código 138: La Sentecia const
Comentarios
Publicar un comentario