Variables
Declaración de Variables
Las variables se puede guardar valores y se puede cambiar los valores en la ejecución de los códigos.
En el Código 9, se usa var para declarar la variable x, se da un valor y las variables num y Num son diferentes en JavaScript, distingue la mayúscula de la minúscula.
Descargar archivo codigo009.html
Copiar enlace:
Pegar enlace en la url del explorador web y descarga el archivo:
Código 9: Variables
<!-- Archivo: codigo009.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>
// Variables
var x = "Ana";
var num = 2;
var Num = 3;
</script>
</body>
</html>
Este código es para mostrar la teoría, no para ejecutarlo.
<!-- Archivo: codigo009.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>
// Variables
var x = "Ana";
var num = 2;
var Num = 3;
</script>
</body>
</html>
Este código es para mostrar la teoría, no para ejecutarlo.
Variables
En el Código 10, las variables: nombre, apellido y edad, se usa para almacenar datos, los datos almacenados puede ser un número o un texto, el uso de las variables en JavaScript es muy fácil.
Descargar archivo codigo010.html
Código 10: Variables
<!-- Archivo: codigo010.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>
// Variables
var nombre = "Ana";
var apellido = "Mora";
var edad = 25;
</script>
</body>
</html>
Este código es para mostrar la teoría, no para ejecutarlo.
<!-- Archivo: codigo010.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>
// Variables
var nombre = "Ana";
var apellido = "Mora";
var edad = 25;
</script>
</body>
</html>
Este código es para mostrar la teoría, no para ejecutarlo.
Tipos de Variables
Hay diferentes tipos de variables en JavaScript: texto (string), numérico, fecha y hay más tipos.
Variable Tipo String
La variable tipo String se le puede introducir letras y números (cualquier carácter).
En el Código 11, la variable tipo String se puede encerrar con comillas simples o dobles los caracteres introducidos, el valor de la variable nombre1 es “Dora Ferras” y el valor de la variable nombre2 es ‘Dora Ferras’.
Descargar archivo codigo011.html
Código 11: Variable Tipo String
<!-- Archivo: codigo011.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>
// Variables
var nombre1 = "Dora Ferras";
var nombre2 = 'Dora Ferras';
</script>
</body>
</html>
Este código es para mostrar la teoría, no para ejecutarlo.
<!-- Archivo: codigo011.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>
// Variables
var nombre1 = "Dora Ferras";
var nombre2 = 'Dora Ferras';
</script>
</body>
</html>
Este código es para mostrar la teoría, no para ejecutarlo.
En el Código 12, se puede anidar comillas simples o dobles, el valor de la variable oración1 es Ella está llamando a “Raquel”, Raquel está con millas simples y el valor de la variable oración2 es Ella está llamando a ‘Raquel’, Raquel está con millas dobles.
Descargar archivo codigo012.html
Código 12: Comillas Simples o Dobles
<!-- Archivo: codigo012.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>
// Comillas dentro de un string
var oracion1 = "Su nombre es 'Raquel'";
var oracion2 = 'Su nombre es "Raquel"';
// Imprimir en Pantalla
document.write(oracion1);
// Escribir en la línea de abajo
document.write("<br/>");
document.write(oracion2);
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo012.html
<!-- Archivo: codigo012.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>
// Comillas dentro de un string
var oracion1 = "Su nombre es 'Raquel'";
var oracion2 = 'Su nombre es "Raquel"';
// Imprimir en Pantalla
document.write(oracion1);
// Escribir en la línea de abajo
document.write("<br/>");
document.write(oracion2);
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo012.html
En la Figura 12, se ve Su nombre es ‘Raquel’ con comillas simples y también se ve Su nombre es “Raquel” con comillas dobles.
Figura 12 – Vista en el explorador Web
Código 12: Comillas simples o dobles
Comillas dentro de un String
En el Código 13, se usa slash invertido (\) para introducir comillas dentro de un string, el valor de la variable str1 es Ella está llamando a “Raquel”, Raquel está con millas dobles y el valor de la variable str2 es Ella está llamando a ‘Raquel’”, Raquel está con millas simples.
Código 13: Slash Invertido
<!-- Archivo: codigo013.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>
// Comillas dentro de un string
var str1 = "Ella esta llamando a \"Raquel\"";
var str2 = 'Ella esta llamando a \'Raquel\'';
// Imprimir en Pantalla
document.write(str1);
// Escribir en la línea de abajo
document.write("<br/>");
document.write(str2);
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo013.html
En la Figura 13, se ve Su nombre es “Raquel” con comillas dobles y también se ve Su nombre es ‘Raquel’ con comillas simples.
Figura 13 – Vista en el explorador Web
Código 13: Slash invertido
Variable Tipo Number
La variable tipo Number se introduce solo números, puede ser un número entero o un número decimal.
En el Código 14, la variable tipo Number es un integer (entero) o un float (número con decimal). La variable x1, su valor es 4, es una variable tipo number que un integer (entero) y la variable x2 , su valor es 5.5, es una variable tipo number que un float (flotante).
Código 14: Variable Tipo Number
<!-- Archivo: codigo014.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>
// Variable integer (entero)
var x1 = 4;
// Variable float (número con decimal)
var x2 = 5.5;
</script>
</body>
</html>
Este código es para mostrar la teoría, no para ejecutarlo.
Variable Tipo Boolean
La variable tipo Boolean solo puede tener dos valores: true (verdader) o false (falso).
En el Código 15, la variable tipo Boolean puede tener el valor true o false. La variable codificarEsDivertido es tipo boolean porque su valor es true (verdadero).
Código 15: Variable Tipo Boolean
<!-- Archivo: codigo015.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>
// Variable boolean
var codificarEsDivertido = true;
</script>
</body>
</html>
Este código es para mostrar la teoría, no para ejecutarlo.
Variable Tipo Indefinido
Al declarar una variable y no se le asigna una valor, la variable queda indefinida y puede generar errores.
En el Código 16, si una variable no se le asigna un valor, el valor de la variable es indefinido. La variable x es indefinido porque no tiene un valor.
Código 16: Variable Tipo Indefinido
<!-- Archivo: codigo016.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<title> Ejercicio </title>
</head>
<body>
<!-- Códigos de JavaScript -->
<script>
// Variable no definida
var x;
// Mensaje
alert(x);
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo016.html
En la Figura 14, la función alert() muestra el valor undefined porque la variable x no tiene un valor asignado.
Figura 14 – Vista en el explorador Web
Código 16: Variable Tipo Indefinido
Variable Tipo Null
La variable null, es una variable que no está vacía y su valor no es cero.
En el Código 17, la variable tipo null es un tipo de dato especial que significa que la variable no es vacía y no es cero. La variable x, es una variable.
Código 17: Variable Tipo Null
<!-- Archivo: codigo017.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>
// Variable
var x = null;
// Mensaje
alert(x);
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo017.html
En la Figura 15, la función alert() muestra el valor null.
Figura 15 – Vista en el explorador Web
Código 17: Variable Tipo Null
Variable Tipo Arrays
La variable tipo Arrays se puede guardar varios valores.
En el Código 18, la variable tipo Arrays es una colección de valores. La variable frutas se declaró como un arreglo (array), después se le asigna 3 (tres) valores (“manzana”, “naranja, “banana”) a 3 (tres) índices (0, 1, 2) a la variable frutas.
Código 18: Variable Tipo Arrays
<!-- Archivo: codigo018.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>
// Variable Arrays
var frutas = [ ];
frutas[0] = ["manzana"];
frutas[1] = ["naranja"];
frutas[2] = ["banana"];
// Mensaje
alert(frutas[0]+", "+frutas[1]+", "+frutas[2]);
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo018.html
En la Figura_16, la función alert() muestra los valores: frutas[0], frutas[1] y frutas[2].
Figura 16 – Vista en el explorador Web
Código 18: Variable Tipo Arrays
Comentarios
Publicar un comentario