jairogarcíarincón
Contenidos
- Esquema de funcionamiento de un servicio web
- Lenguaje de marcas HTML
- Estructura de un documento HTML
- Hojas de estilo CSS (1/2)
- Hojas de estilo CSS (2/2)
- Diseño responsive con media-queries
- Ejercicios de Repaso HTML/CSS
- Introducción a JavaScript
- Elementos del lenguaje JavaScript
- Los operadores en JavaScript
- La gramática en JavaScript
- Ejercicios de repaso Javascript
JavaScript maneja cuatro tipos de datos: numéricos, de cadena, booleanos y punteros.
Los datos numéricos sirven para manejar cualquier número real, como 12, 56.5, -9. También son datos numéricos: 2.0E2 (notación científica de 2.0*102), 0xF0 (notación hexadecimal) o 012 (notación octal). En este curso, lo normal es que sólo uses valores decimales y a veces hexadecimales.
Los datos de cadena son los usados para cadenas alfanuméricas, o sea, para representar palabras, así los siguientes son datos de cadena: "prueba", "La clave es 4r5t". Estos datos siempre están encerados entre comillas. "41" es un dato de cadena mientras que 41 es el número cuarenta y uno.
Si queremos usar comillas dentro de nuestra cadena, deberemos utilizar un caracter de escape:
<script>
alert("El niño dijo \"Mamá, tengo hambre\".");
</script>
Existen mas caracteres especiales como tabulaciones, cambios de línea de escritura, borrado izquierda, la propia barra invertida:
<script>
alert("Esto usa una \t tabulación.");
alert("Esto usa un \n cambio de línea");
alert("Esto usa un \r retorno de carro");
alert("Esto es la barra invertida \\ ");
</script>
Los datos booleanos dan respuesta a preguntas que solo admiten dos posibles valores: verdadero (true) o falso (false). Por ejemplo, si yo me pregunto si son las 11 en punto, puede ser verdadero o falso, pero nada más. Este tipo de datos los utilizaremos para tomar decisiones, o sea, comprobar algo y actuar en consecuencia.
Existe un último tipo de datos que también se emplea a menudo en los scripts para la captura de eventos, son direcciones de memoria, o punteros, usadas para asignar funciones. En este curso no los veremos.
Ya dijimos que los datos, los valores numéricos no siempre pueden utilizarse de manera directa, sino que habitualmente se almacenan en una posición de memoria con nombre, esto es lo que llamamos una variable.
En otros lenguajes de programación existen diferentes tipos de variables en función del tipo de datos que pueden guardar: variables para cadenas, para números enteros, para números reales, etc.
JavaScript es muy permisivo en este aspecto de manera que una variable puede guardar cualquier tipo de dato y además pueden crearse en cualquier parte del programa. Esto último es cómodo pero peligroso pues puede llevar a programas difíciles de depurar y de modificar, es conveniente llevar un cierto control sobre las variables que vas usando en cada función y declararlas al principio de la misma.
Para asignar nombres a las variables:
- cualquier combinación de letras y dígitos, mas el guión bajo
- el primer carácter no puede ser un dígito
- JavaScript diferencia entre mayúsculas y minúsculas, así Edad y edad serían dos variables distintas.
- el nombre no puede coincidir con una palabra reservada del lenguaje, es decir, palabras con un significado especial para el intérprete como close, open, write...
Es aconsejable usar nombres autoexplicativos, es una forma de documentar tus programas. Por ejemplo una variable para guardar una dirección de un icono puede llamarse direc_icono o variable1, pero cuando empieces a tener muchas variables, no recordarás a quién se refería la variable1.
Otro aspecto a tener en cuenta a la hora de usar las variables es su ámbito, es decir, qué funciones tienen acceso a ellas. Si se crea una variable dentro de una función sólo será conocida dentro de esa función, se trata de variables locales. Si se necesita que varias funciones tengan acceso a una determinada variable ésta debe crearse como variable global, esto se hace creándola fuera de todas las funciones.
<script>
var navegador_version = "Mozilla Firefox";
function verNavegador() {
var version;
version = navigator.userAgent;
return version;
}
alert(verNavegador());
</script>
En este ejemplo navegador_version es una variable global mientras que version es local a la función verNavegador(). Observa que las variables están creadas con la palabra clave var, el uso de esta palabra es opcional, sólo es obligatorio si una variable local tienen el mismo nombre que una global. Otro detalle a tener en cuenta es que al mismo tiempo que creamos la variable podemos darle un valor, si no lo hacemos la variable contendrá el valor null.
Javascript no posee todas las características de los lenguajes orientados a objetos como Java o C++, pero si es capaz de manejar objetos e incluso crearlos. De hecho si un programa en este lenguaje es capaz de interactuar con el explorador es gracias a esta capacidad.
Javascript posee algunos objetos predefinidos u objetos intrínsecos como son: Array, Boolean, Date, Function, Global, Math, Number, Object, RegExp, y String. Además es posible crear objetos nuevos, con sus propios métodos y propiedades, adaptados a las necesidades concretas de cada aplicación.
Crear un objeto nuevo es tan simple como definir cuales serán sus propiedades y sus métodos, teniendo en cuenta que cualquier objeto que definamos ya posee heredados los métodos y propiedades del objeto predefinido object. En el ejemplo siguiente creamos un objeto coche que aclarará la forma de crear objetos propios:
<script>
function Coche(marca, modelo, color){
this.marca = marca;
this.modelo = modelo;
this.color = color;
this.length = 3;
}
var miCoche = new Coche("Porsche", "Panamera", "negro");
console.log("Me voy a comprar un " + miCoche.marca + " modelo " + miCoche.modelo + " de color " + miCoche.color);
</script>
Los arrays no son más que estructuras para almacenar listas de valores, esto es, como una lista con nombre donde podemos anotar cosas.
Cada anotación se identifica por su número de orden en el array (la lista), su índice.
El número total de espacios para anotar cosas en el array es su longitud.
De este modo, si en un array tenemos anotados los días de la semana, el primero de todos será el de índice 0 y el último tendrá como índice el 6, siendo 7 la longitud del array.
<script>
//Método directo
semana = new Array("Lunes","Martes","Miércoles","Jueves","Viernes","Sábado","Domingo");
//Método individual
semana[0] = "Lunes";
semana[1] = "Martes";
semana[2] = "Miércoles";
semana[3] = "Jueves";
semana[4] = "Viernes";
semana[5] = "Sábado";
semana[6] = "Domingo";
console.log(" Los días laborables de la semana son: " +semana[0] + " , " +semana[1] + " , " +semana[2] + " , " +semana[3] + " y " +semana[4] + " .\r Los días festivos son " +semana[5] + " y " +semana[6] + "." );
</script>
Las funciones como decíamos en la introducción, no son mas que bloques de instrucciones de programa con nombre y que pueden ejecutarse sin mas que llamarlas desde alguna parte de otra función o desde la página HTML, bien sea directamente o mediante eventos.
Habitualmente una función se crea para ejecutar una acción muy concreta. Javascript posee una serie de funciones predefinidas o funciones globales pero el programador puede crear las suyas propias.
Para crear una función, tan sólo es necesario indicárselo al intérprete mediante la palabra clave function seguida del nombre que deseemos darle a la función y, encerrados entre paréntesis, las variables que simbolizan los valores con los que deba trabajar la función, llamadas argumentos. Para los nombres de funciones seguimos las mismas reglas que para las variables: caracteres, dígitos y guión bajo, debiendo comenzar por un carácter o el guión bajo.
Importante: Los paréntesis deben escribirse aunque no haya argumentos.
<script>
function sumar(numero1, numero2){
var suma;
suma = numero1 + numero2;
return suma;
}
var operacion;
operacion = sumar(4,5);
console.log("La suma de 4 más 5 es igual a " + operacion + ".");
</script>
Para una mejor comprensión, se propone la visualización de los siguientes videos del canal de YouTube de Ada Lovecode:
Ejercicio propuesto: Modificar en el ejemplo anterior para que la función multiplique dos valores y devuelva el resultado.
Publicado el 21 de Noviembre de 2024
aplicacionesweb