JavaScript
Introducción a JavaScript
¿Qué es JavaScript?
JavaScript es un lenguaje de programación de scripts (secuencia de comandos) orientado a objetos.
Esta descripción es un poco rudimentaria, hay varios elementos que vamos a diseccionar.
- Un lenguaje de programación
En primer lugar, un lenguaje de programación es un lenguaje que permite a los desarrolladores
escribir código fuente que será analizado por un ordenador.
Un desarrollador o programador es una persona que desarrolla programas. Puede ser un profesional
(un ingeniero, programador informático o analista) o un aficionado.
El código fuente está escrito por el desarrollador. Este es un conjunto de acciones, llamadas
instrucciones, lo que permitirá dar órdenes al ordenador para operar el programa. El código fuente
es algo oculto, como un motor en un automóvil está oculto, pero está ahí, y es quien asegura que el
coche puede ser conducido. En el caso de un programa, es lo mismo, el código fuente rige el
funcionamiento del programa.
• Scripts de programación
JavaScript te permite programar scripts. Como se mencionó anteriormente, un lenguaje de
programación es utilizado para escribir código fuente a ser analizada por un ordenador. Hay tres
formas de usar el código fuente: Lenguaje compilado como: El código fuente se da a un programa
llamado compilador que lee el código fuente y lo convierte en un lenguaje que el equipo será capaz
de interpretar: el lenguaje binario, es de 0 y 1. Lenguajes como C o C ++ son lenguajes compilados
muy conocidos.
• Lenguaje orientado a objetos
Queda un aspecto a analizar: orientado a objetos. Este concepto es bastante complicado de
configurar ahora y se profundizará sobre todo después de la parte 2. Sin embargo, un lenguaje de
programación orientado a objetos es un lenguaje que contiene elementos, llamados objetos y los
objetos diferentes tienen características específicas y formas de uso diferente. El lenguaje
proporciona objetos básicos, como imágenes, fechas, cadenas de caracteres... También es posible
crear tus propios objetos para hacer la vida más fácil y obtener un código fuente más claro (fácil de
leer) y una forma de programar mucho más intuitivo (lógica)
JavaScript, el lenguaje de scripts
Javascript actualmente es principalmente utilizado en internet, junto con las páginas web (HTML o
XHTML). Javascript está directamente incluido en la página web (o en un archivo externo) y mejora
una página HTML, añadiendo interacción del usuario, animación, ayudas a la navegación, tales como:
• Mostrar / ocultar el texto;
• Deslizamiento de imágenes;
• Crear presentaciones de diapositivas;
• Crear burbujas de información.
De JavaScript se dice que es un lenguaje del lado del cliente, es decir que los scripts son ejecutados
por el navegador del usuario (cliente). Esto difiere de los llamados lenguajes de script del lado del
servidor que son ejecutadas por el servidor web. Este es el caso de lenguajes como PHP
Javascript no es la Web
Si Javascript está diseñado para ser usado en conjunción con HTML, el lenguaje ha evolucionado
desde entonces hacia otros destinos. Javascript es regularmente utilizado para hacer extensiones
para diferentes programas, como los scripts codificados en Lua o Python.
JavaScript también se puede utilizar para construir aplicaciones. Mozilla Firefox es el ejemplo más
famoso: la interfaz del navegador se crea con una especie de HTML llamado XUL y JavaScript que se
utiliza para animar la interfaz. Otros programas también están basados en esta tecnología, como por
ejemplo de TomTom HOME que se utiliza para administrar tu navegador GPS TomTom a través de tu
PC
Muestra un cuadro de diálogo
A continuación se muestra un programa HTML simple que contiene la instrucción Javascript,
situada dentro de un elemento
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Hola</title>
</head>
<body>
<script>
alert('Hello world!');
</script>
</body>
</html>
Resultado:
Código: JavaScript
alert ('Hello world');
Es una declaración, es decir, una orden, o más bien una acción que el equipo tendrá que hacer. los
lenguajes de programación consisten en una secuencia de instrucciones que, colocados de extremo
a extremo, permiten obtener un programa o un script completo. En este ejemplo, no es una
instrucción: se llama a la función alerta.
El cuadro de diálogo de alert ()
alert () es una declaración simple, llamada función, que muestra un cuadro de diálogo que contiene
un mensaje. este mensaje se coloca entre comillas, entre los paréntesis de la function alert ().
Sintaxis de Javascript
Instrucción
La sintaxis de Javascript no es complicada. Generalmente, las instrucciones deben estar separadas
por un punto y coma que se coloca al final de cada instrucción:
Código: JavaScript
sentencia_1;
sentencia_2;
sentencia_3;
En realidad, el punto y coma no es necesario si la instrucción siguiente está en la línea posterior como
en nuestro ejemplo. Sin embargo, si escriben varias instrucciones en una sola línea, como en el
siguiente ejemplo, el punto y coma es obligatorio. Si lo virtual punto
Código JavaScript
sentencia_1; sentencia_2
sentencia_3
Comentarios
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: Código: JavaScript
sentencia_1 / / Esta es mi primera instrucción
sentencia_2;
/ / La tercera declaración es la siguiente: sentencia_3;
El texto colocado en un comentario se ignora cuando se ejecuta un script, lo que significa que puedes
poner un comentario, incluso en una instrucción (que, obviamente, no se ejecutará):
Código: JavaScript
sentencia_1 / / Esta es mi primera instrucción
sentencia_2;
/ / La tercera declaración da problemas, la cancelo temporalmente
/ / sentencia_3;
Funciones
En el ejemplo de ¡Hola mundo!, Se utilizó la función alert (). Discutiremos en detalle la funciones de
trabajo, en los capítulos siguientes, necesitarás saber el resumen de la sintaxis.
Una función consiste en dos partes: su nombre, seguido por un par de paréntesis (una apertura y un
cierre):
Código: JavaScript
myFunction () / / "function" quiere decir "función" en Inglés
Entre paréntesis se indican los argumentos que también se llaman parámetros
Dónde colocar el código en la página L
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, aunque esto es extremadamente
raro.
En HTML 4 y XHTML 1.x, el tipo de atributo es obligatorio. En contraste, en HTML5, no lo es. Esta es
la razón por la que los ejemplos aquí mostrados, no incluirán este atributo. Si no estás usando HTML5,
sabemos que el atributo de tipo toma como valor text / javascript, que es en realidad el tipo MIME
de un código Javascript. El tipo MIME es un identificador que describe un formato de datos. Aquí,
con text / javascript, se trata de datos de texto y JavaScript
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>¡Hola 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.
Código: JavaScript - contenido de ficheros hola.js
alert ('¡Hola mundo!')
Código: HTML - Página Web
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>¡Hola Mundo!!</title>
</head>
<body>
<script src="hola.js"></script>
</body>
</html>
Se supone que el archivo hola.js se encuentra en el mismo directorio que el programa en HTML.
alert ('¡Hola mundo!');
Variables
¿Qué es una variable?
En pocas palabras, una variable es un espacio de almacenamiento en un ordenador para grabar
cualquier tipo de datos como una cadena de caracteres, un valor numérico o estructuras un poco
más específicas. Declarar una variable En primer lugar, ¿qué significa "declarar una variable"
significa? Se trata simplemente de espacio de almacenamiento de reserva en memoria, nada más.
Una vez que se declara la variable, puedes comenzar a almacenar datos sin problema.
En las palabras clave utilizadas por JavaScript, se pueden llamar "palabras reservadas", simplemente
porque no tienes el derecho de usarlos como nombres de variables.
Para declarar una variable, simplemente hay que escribir la siguiente línea:
Código: JavaScript
var miVariable;
JavaScript es un lenguaje sensible en las denominaciones, ten cuidado de no confundir las mayúsculas
y minúsculas. En el siguiente ejemplo, tenemos tres variables diferentes declaradas:
Código: JavaScript
var miVariable;
var mivariable;
var MIVARIABLE;
La palabra clave var está presente para indicar que se declara una variable. Una vez que se declara,
se puede almacenar lo que quieras:
Código: JavaScript
var miVariable;
miVariable = 2;
El signo = se utiliza para asignar un valor a la variable, aquí le hemos asignado el número 2. Cuando
das un valor a una variable, decimos que se trata de una asignación, ya que asigna un valor a la
variable.
Tipos de variables
A diferencia de muchos lenguajes, JavaScript es un lenguaje de tipado dinámicamente. Esto significa,
generalmente, que cualquier declaración de variables se hace con la palabra clave var
independientemente de su contenido, mientras que en otros lenguajes, como el C, es necesario
especificar el tipo de contenido que tendrá que contener la variable.
En Javascript, nuestras variables son tipadas dinámicamente, lo que significa que puedes asignarle
texto primero y luego borrarlo y poner un número cualquiera y sin restricciones.
Vamos a empezar por ver cuáles son los tres tipos principales de Javascript:
Numérico (número): representa cualquier número, ya sea un entero, un número negativo, en
notación científica, etc. En pocas palabras, este es el tipo de números.
Cadenas de caracteres (alias string): Este tipo representa texto. Puede asignarse de dos maneras
diferentes.
Código: JavaScript
var text1 = "Mi primer texto" / / Con comillas
var text2 = 'Mi segundo mensaje' / / Con apóstrofes
Booleanos (booleano): son un tipo particular de que se tratará más adelante. Mientras tanto, en
pocas palabras, un tipo booleano permite dos estados verdadero o falso. Estos dos estados se puede
escribir como sigue:
Código: JavaScript
var EsVerdadero = true;
var EsFalso = false;
Operadores aritméticos
Ahora que se declara una variable y se asignar un valor, podemos comenzar la sección sobre los
operadores aritméticos. Se verá más adelante que hay varios tipos de operadores, pero por ahora
nos centraremos exclusivamente en los operadores aritméticos. Estos son la base para todos los
cálculos y son cinco.
Algunos cálculos sencillos Programar el cálculo es casi tan fácil como en una calculadora, por ejemplo:
Código: JavaScript
function init(){
var resultado = 3 + 2;
alert (resultado) // Muestra « 5 »
}
window.onload = init;
Resultado:
Así que puedes hacer cálculos con dos números, es bueno, pero con dos variables que contienen
números en sí es más útil:
Código: JavaScript
function init(){
var numero1=3, numero2=8, resultado;
resultado = numero1 * numero2;
alert (resultado) // Muestra: « 24 »
}
window.onload = init;
Resultado:
Podemos ir aún más lejos al escribirlo como cálculos con operadores múltiples y variables:
Código: JavaScript
function init(){
var divisor = 3, resultado1, resultado2, resultado3;
resultado1 = (16 + 8) / 2 - 2; // 10
resultado2 = resultado1 / divisor;
resultado3 = resultado1 % divisor;
alert (resultado2) // Resultado de la división: 3,33
alert (resultado3) // Resto de la división: 1
var numero1=3, numero2=8, resultado;
resultado = numero1 * numero2;
alert (resultado) // Muestra: « 24 »
}
window.onload = init;
Resultado:
Notarás que usamos paréntesis para el cálculo de la variable resultado1. Se utilizan como en
matemáticas: el navegador que primero calcula 16 + 8 y divide el resultado por 2.
Operadores aritméticos
Son los que realizan operaciones de tipo aritmético con las variables
Suma +
Se trata de un operador usado para sumar dos valores numéricos o para concatenar
cadenas entre sí o números y cadenas.
<script>
var numero1 = 10;
var numero2 = 31;
var texto1 = "Buenos";
var texto2 = " días";
document.write(numero1 + numero2 + "<br>"); /* resultado: 41 */
document.write(texto1+texto2 + "<br>"); /* resultado: Buenos días*/
document.write(numero1+texto2 + "<br>"); /* resultado: 10 días */
</script>
Resultado:
Resta –
Operador usado para restar valores numéricos. Puede actuar sobre un único operando
numérico cambiándole de signo.
<script>
var numero1 = 10;
var numero2 = 31;
var resultado = 0;
resultado = numero1- numero2;
document.write(resultado + "<br>"); /* resultado: -21 */
resultado = -resultado;
document.write(resultado + "<br>"); /* resultado: 21 */
</script>
Resultado:
Producto * y cociente /
Realizan las operaciones aritméticas de multiplicar y dividir dos valores.
<script>
var numero1 = 50;
var numero2 = 4;
document.write(numero1 * numero2 + "<br>"); /* resultado: 200 */
document.write(numero1 / numero2 + "<br>"); /* resultado: 12.5 */
</script>
Resultado:
Resto o modulo %
Calcula el resto de una división.
<script>
var numero1 = 50;
var numero2 = 4;
document.write(numero1 % numero2 + "<br>"); /* resultado: 2 */
</script>
Resultado:
Incremento y decremento
Estos dos operadores solamente son válidos para las variables numéricas y se utilizan para
incrementar o decrementar en una unidad el valor de una variable.
<script>
var numero = 10;
++numero;//incremento en uno
alert(numero); // numero = 11
</script>
Resultado:
El operador de incremento se indica mediante el prefijo ++ en el nombre de la variable. El resultado
es que el valor de esa variable se incrementa en una unidad. Por tanto, el anterior ejemplo es
equivalente a:
<script>
var numero = 10;
numero = numero + 1;
alert(numero); // numero = 11
</script>
De forma equivalente, el operador decremento (indicado como un prefijo -- en el nombre de la
variable) se utiliza para decrementar el valor de la variable:
<script>
var numero = 5;
--numero; //decremento en uno
alert(numero); // numero = 4
</script>
Resultado:
El anterior ejemplo es equivalente a:
<script>
var numero = 5;
numero = numero - 1;
alert(numero); // numero = 4
</script>
Ejemplo
Cálculo de presupuesto en un hospital. Dado un valor de presupuesto, se calcula el total
asignado a tres áreas del hospital: Dermatología, Traumatología y Pediatría.
a) Crear el archivo Presupuesto.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Presupuesto</title>
</head>
<body>
<section>
<article>
<table>
<caption>ÁREAS</caption>
<thead>
<tr>
<th>ÁREA</th>
<th>PORCENTAJE DEL PRESUPUESTO</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dermatología</td>
<td>40%</td>
</tr>
<tr>
<td>Traumatología</td>
<td>35%</td>
</tr>
<tr>
<td>Pediatría</td>
<td>25%</td>
</tr>
</tbody>
</table>
<div id="distribucion" class="color-10"></div>
<script src="js/presupuesto.js"></script>
</article>
</section>
</body>
</html>
Resultado:
b) Crear el archivo de java Presupuesto.js
function init(){
//prompt() permite obtener entrada de datos del usuario
var presupuesto = prompt('Ingrese el presupuesto anual','');
var derma, trau, pedi, i;
var div = document.getElementById('distribucion');
//Realizando los cálculos para distribución del presupuesto
derma = presupuesto*0.40;
trauma = presupuesto*0.35;
pedia = presupuesto*0.25;
//Creando el código que se insertará dentro del elemento div id=d
istribucion
var html = "<ul>\n\t<li>\n";
html += "\t\t<a href='#' class='move-right'>\n";
html += "\t\t\tEl presupuesto asignado para Ginecología es: $ " +
derma + "\n";
html += "\t\t</a>\n";
html += "\t</li>\n";
html += "\t<li>\n";
html += "\t\t<a href='#' class='move-right'>\n";
html += "\t\t\tEl presupuesto asignado para Traumatología es: $ "
+ trauma + "\n";
html += "\t\t</a>\n";
html += "\t</li>\n";
html += "\t<li>\n";
html += "\t\t<a href='#' class='move-right'>\n";
html += "\tEl presupuesto asignado para Pediatría es: $ " + pedia
+ "\n";
html += "\t\t</a>\n";
html += "\t</li>\n";
html += "</ul>\n";
//Insertando dentro del elemento div el código asignado en la var
iable html
div.innerHTML = html;
//Hacer referencia a los elementos h1 dentro de la página web
var links = document.getElementsByTagName('a');
//Recorrer todos los elementos a y asignar el manejador de evento
//mediante una función anónima
for(i=0; i<links.length; i++){
links[i].onmouseover = function(){
this.className = 'move-right-hover';
};
links[i].onmouseout = function(){
this.className = 'move-right';
};
}
}window.onload = init;
Resultado:
Actividades:
1. Agregar estilos al ejemplo anterior
2. Declare variables para cada número y para el resultado, genera un script que ejecute la
siguiente operación y muestre el resultado en pantalla: 28 + (12 * (7 / 2)) - 20.
3. Réstale 5 al valor de resultado mediante un operador compuesto y muestra el valor final de
la variable resultado en pantalla.
4. Decrementa en uno el valor de resultado mediante el operador decremento y muestra el
valor final de la variable resultado en pantalla
Referencia:
https://www.um.es/docencia/barzana/DAWEB/Lenguaje-de-programacion-JavaScript-
1.pdf
http://dis.um.es/~lopezquesada/documentos/IES_1314/IAW/curso/UT7/libroswebjavas
cript/www.librosweb.es/javascript/capitulo3/operadores.html
https://jairogarciarincon.com/clase/introduccion-a-las-aplicaciones-web-con-html5-css3-
y-javascript/los-operadores-en-javascript
