JavaScript es un lenguaje de programación de scripts (son fracmentos de código que tienen como objetivo realizar o añadir funciones dentro de una página web) orientado a objetos.
Es utilizado para crear pequeños programitas encargados de realizar acciones dentro del ámbito de una página web. Con Javascript podemos crear efectos especiales en las páginas y definir interactividades con el usuario. El navegador del cliente es el encargado de interpretar las instrucciones Javascript y ejecutarlas para realizar estos efectos e interactividades, de modo que el mayor recurso, y tal vez el único, con que cuenta este lenguaje es el propio navegador.
Los scripts son en su mayoría interpretados. JavaScript es un lenguaje interpretado, lo que significa que es es necesario contar con un intérprete para ejecutar código Javascript, y el intérprete que se utiliza se incluye en tu navegador de internet. Cada navegador tiene un intérprete Javascript, que varía en función del navegador. Si está utilizando Mozilla Firefox el interprete se llama SpiderMonkey y el motor V8 es el de Google Chrome, por ejemplo.
Sintaxis de Javascript
Las instrucciones deben estar separadas por un punto y coma que se coloca al final de cada instrucción:
Javascript no es sensible a los espacios. Esto significa que puedes alinear las instrucciones que quieras, siempre que no interfiera con la secuencia de comandos. Por ejemplo, esto es correcto: }
Código JavaScript
instruccion_1; instruccion_1_1;
instruccion_1_2; instruccion_2;
instruccion_3;
La sangría en la programación informática, es una manera de estructurar el código para hacerlo más legible.
Código: JavaScript
function interruptor(elemID)
{ var elem = document.getElementById(elemID);
if (elem.style.display == 'block') {
elem.style.display = 'none'; }
else {
elem.style.display = 'block';
}
}
Los comentarios son anotaciones realizadas por el desarrollador para explicar el funcionamiento de un script, una instrucción o incluso un grupo de instrucciones. Los comentarios no interfieren con la ejecución de un script. Hay dos tipos de comentarios: los de fin de línea y los multilínea. Comentarios de fin de línea. Se utilizan para comentar una instrucción. Comienza con dos barras de división
sentencia_1 / / Esta es mi primera instrucción
Comentarios multilínea. Este tipo permite saltos de línea. Un comentario multilínea comienza con / * y termina con * /:
/ * Este script consta de tres pasos:
- Instrucción uno está haciendo algo
- Instrucción dos para otra cosa
- Instrucción tres que pone fin a la secuencia de comandos
* /
Funciones
Una función consiste en dos partes: su nombre, seguido por un par de paréntesis (una apertura y un cierre):
alert ('Hola mundo!');
Dónde colocar el código en la página
Los códigos JavaScript son insertados a través del elemento <script>. Este elemento tiene un
atributo de tipo que se utiliza para indicar el tipo de lenguaje que vamos a utilizar. En nuestro
caso, es JavaScript, pero podría ser otra cosa, como por ejemplo VBScript, jquery u otros.
Javascript "en la página"
Para situar el código JavaScript directamente en una página web, nada más simple, siguiendo
el ejemplo de ¡Hola, mundo!: se coloca el código en el elemento <script>:
<!DOCTYPE html>
<html>
<head>
<title>Hello mundo!</title>
</head>
<body>
<script>
alert('Hola mundo!');
</script>
</body>
</html>
Javascript externo
Es posible, y conveniente escribir el código JavaScript en un archivo externo con la extensión.
Js. Este archivo se llama desde la página web mediante el elemento <script> y su atributo src
que contiene la dirección URL del archivo. js.
Se utiliza la instrucción
<script type="text/javascript" src="nombre_del_archivo.js"> </script>
Como una página web es leída por el navegador de forma lineal, es decir, en primer lugar lee <head>,
después los elementos de <body> uno después del otro. Si se llama a un archivo JavaScript
desde el principio de la carga de la página, el navegador por lo tanto cargará este archivo, y si
es grande, la carga de la página se desacelerará. Esto es normal, ya que el navegador cargará
el archivo antes de empezar a mostrar el contenido de la página.
Para superar este problema, es conveniente colocar los elementos <script> justo antes de
cerrar <body>
Así que la ubicación de la instrucción para cargar el archivo js. dependerá de la p´gina y ña velocidad de la misma
Ejemplo.
Archivo UNO.JS
alert("Un mensaje de prueba");
Archivo HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="uno.js"> </script>
</head>
<body>
<p>Un párrafo de texto.</p>
</body>
</html>
Variables
Para declarar una variable, se utiliza la palabra reservada var para indicar que se declara una variable. Una vez que se declara, se puede almacenar lo que quieras, ejemplo:
var miVariable;
JavaScript es sencible a mayúsculas y minúsculas, así que las siguientes variables son distintas
var miVariable;
var mivariable;
var MIVARIABLE;
Para asignar un valor a una variable es necesario declararla primero
var miVariable;
miVariable = 2;
El signo = se utiliza para asignar un valor a la variable, aquí le hemos asignado el número 2. Es posible simplificar el código en una sola línea, ejemplo
var miVariable = 5.5
Otro ejemplo
var miVariable1, miVariable2 = 4, miVariable3;
Tipos de variables
Javascrip no necesita que declares el tipo de variable, al asignarle un valor automáticamente le asigna el tipo a la variable, así por ejemplo.
var numero = 5; Es de tipo entera
var número = 3.65 Es de tipo flotante
var text1 = "Mi primer texto" Es de tipo texto
Operadores aritméticos
Ejemplo
Archivo UNO.JS
var numero1=3, numero2 = 2, resultado;
resultado = numero1 * numero2;
alert (resultado);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="uno.js"> </script>
</head>
<body>
<p>suma dos números.</p>
</body>
</html>
También es posible indicarla operación antes de la asignación, ejemplo
var numero = 3;
numero + = 5;
alert (numero)
En javascript es posible concatenar palabras, ejemplo
var hola= 'Hola ', nombre = 'tu', resultado;
resultado = hola + nombre;
alert (resultado);
Interactuar con el usuario
La interacción con el usuario a través de la función prompt ()
Achivo uno.js
var inicio = 'Hola ', nombre, final = ' eres número', n=1, resultado;
nombre= prompt ('¿Cuál es tu nombre? ');
resultado = inicio + nombre + final + n;
alert (resultado);
Archivo HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="uno.js"> </script>
</head>
<body>
<p>Solicita tu nombre y lo escribe.</p>
</body>
</html>
Ejemplo que suma dos números
Archivo calcula.js
var primero, segundo, resultado;
primero = prompt ('Ingrese el primer número: ');
segundo = prompt ('Ingrese el segundo número:');
resultado = parseInt (primero) + parseInt (segundo);
alert (resultado);
Los operadores de comparación
Otra forma de interactuar con el usuario es con la función confirm. ejemplo
confirm("¿Desea continuar?")
Condición "if else"
Esta condición la ilustrareos con el siguiente ejemplo
const edad = 18, otro=12;
if (edad >= 18 && otro<5) {
alert("Isauro es un adulto.");
} else if(edad<18 || otro>=5){
alert("Isauro es un niño.");
}
La condición "switch"
Hemos estudiado el funcionamiento de la condición if else que es muy útil en muchos casos, sin embargo, no es muy conveniente para cada caso, y es aquí donde es importante un “interruptor”, que se logra con la instrucción switch. Un ejemplo: tenemos un mueble con cuatro cajones, cada uno conteniendo diferentes objetos, y es necesario que el usuario pueda conocer el contenido de cada cajón, que ha sido cifrado. Si lo hiciéramos con if else sería muy largo y tedioso
var cajon = parseInt(prompt('Elegir el cajón abierto (1-4): '));
if (cajon == 1) {
alert('Contiene varias herramientas de dibujo: papel, lápices, etc. ');
} else if (cajon == 2) {
alert('Contenido hardware: cables, componentes, etc. ');
} else if (cajon == 3) {
alert('¿Ah, el cajón está cerrado malo?');
} else if (cajon == 4) {
alert('Contiene la ropa: camisas, pantalones, etc. ');
}else{
alert('La noticia del día: el gabinete contiene sólo cuatro cajones y hasta que se demuestre lo contrario, otros cajones no existen');
}
Es largo, ¿verdad? Además de que no es muy adecuado para lo que quieres hacer. El mayor problema es tener que volver a escribir siempre la condición, pero con switch es un poco más fácil
switch (cajon) {
case 1:
alert ('Contiene varias herramientas de dibujo: papel, lápices, etc. ');
break;
case 2:
alert ('Contenido hardware: cables, componentes, etc. ');
break;
case 3:
alert ('¿Ah, el cajón está cerrado malo?');
break;
case 4:
alert ('Contiene ropa: camisas, pantalones, etc. ');
break;
default:
alert ('La noticia del día: el gabinete contiene sólo cuatro cajones y, hasta que se demuestre lo contrario, los cajones negativos no existen');
}
Como se puede ver, el código no es especialmente corto, pero se organiza mejor y por lo tanto es más comprensible.
Ahora el detalle de cómo funciona: Escribimos la palabra clave switch seguida de la variable a analizar entre paréntesis y un par de llaves; Entre las llaves se encuentra en todos los casos la variable definida por la palabra clave case seguida del valor se debe tener en cuenta (esto puede ser un número, o también texto) y dos puntos; Todo lo que sigue a los dos puntos de case se ejecutará si la variable analizada por switch contiene el valor de case; Al final de case está la sentencia break para "romper" el switch y así evitar la ejecución del resto del código que contiene;
Y finalmente escribir la palabra clave default seguida de dos puntos. El código que sigue a esta instrucción será ejecutado si ninguno de los casos anteriores se han ejecutado. Advertencia, esta parte es opcional, no es necesario para la integración con el código.
Arrays
Las variables también pueden almacenar varios valores al mismo tiempo en una estructura
llamada array. Los arrays se pueden crear usando una sintaxis simple que incluye los valores
separados por comas dentro de corchetes. Los valores se identifican luego mediante un índice,
comenzando desde 0 (cero).
Ejemplo.
var miarray = ["rojo", "verde", "azul"];
alert(miarray)// "rojo";
creamos un array llamado miarray con tres valores, las cadenas de caracteres "rojo", "verde" y "azul". JavaScript asigna automáticamente el índice 0 al primer valor, 1 al segundo, y 2 al tercero. Para leer estos datos, tenemos que mencionar el índice del valor entre corchetes después del nombre de la variable. Por ejemplo, para obtener el primer valor de miarray, tenemos que escribir la instrucción miarray[0],.
La función alert() puede mostrar no solo valores independientes, sino arrays completos. Si queremos ver todos los valores incluidos en el array, solo tenemos que especificar el nombre del array.
tal como se muestra en el ejemplo anterior
Comentarios
Publicar un comentario