Espera, por favor ...Java Script
Se utiliza principalmente en su forma del lado del cliente (client-side), implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas4 aunque existe una forma de JavaScript del lado del servidor (Server-side JavaScript o SSJS). Su uso en aplicaciones externas a la web, por ejemplo en documentos PDF, aplicaciones de escritorio (mayoritariamente widgets) es también significativo.
JavaScript se diseñó con una sintaxis similar al C, aunque adopta nombres y convenciones del lenguaje de programación Java. Sin embargo Java y JavaScript no están relacionados y tienen semánticas y propósitos diferentes.Todos los navegadores modernos interpretan el código JavaScript integrado en las páginas web. Para interactuar con una página web se provee al lenguaje JavaScript de una implementación del Document Object Model (DOM).
Tradicionalmente se venía utilizando en páginas web HTML para realizar operaciones y únicamente en el marco de la aplicación cliente, sin acceso a funciones del servidor. JavaScript se interpreta en el agente de usuario, al mismo tiempo que las sentencias van descargándose junto con el código HTML.Una cuarta edición está en desarrollo e incluirá nuevas características tales como paquetes, espacio de nombres y definición explícita de clases.[cita requerida]
Las siguientes características son comunes a todas las implementaciones que se ajustan al estándar ECMAScript, a menos que especifique explícitamente en caso contrario.
Imperativo y estructurado
JavaScript soporta gran parte de la estructura de programación de C (por ejemplo, sentencias if, bucles for, sentencias switch, etc.). Con una salvedad, en parte: en C, el ámbito de las variables alcanza al bloque en el cual fueron definidas; sin embargo en JavaScript esto no es soportado, puesto que el ámbito de las variables es el de la función en la cual fueron declaradas. Esto cambia con la versión de JavaScript 1.7, ya que soporta block scoping por medio de la palabra clave let. Como en C, JavaScript hace distinción entre expresiones y sentencias. Una diferencia sintáctica con respecto a C es la inserción automática de punto y coma, es decir, en JavaScript los puntos y coma que finalizan una sentencia pueden ser omitidos.17
Tipado dinámico
Como en la mayoría de lenguajes de scripting, el tipo está asociado al valor, no a la variable. Por ejemplo, una variable x en un momento dado puede estar ligada a un número y más adelante, religada a una cadena. JavaScript soporta varias formas de comprobar el tipo de un objeto, incluyendo duck typing.18 Una forma de saberlo es por medio de la palabra clave typeof.
JavaScript está formado casi en su totalidad por objetos. Los objetos en JavaScript son arrays asociativos, mejorados con la inclusión de prototipos (ver más adelante). Los nombres de las propiedades de los objetos son claves de tipo cadena: obj.x = 10 y obj['x'] = 10 son equivalentes, siendo la notación con punto azúcar sintáctico. Las propiedades y sus valores pueden ser creados, cambiados o eliminados en tiempo de ejecución. La mayoría de propiedades de un objeto (y aquellas que son incluidas por la cadena de la herencia prototípica) pueden ser enumeradas a por medio de la instrucción de bucle for... in. JavaScript tiene un pequeño número de objetos predefinidos como son Function y Date.
Evaluación en tiempo de ejecución
JavaScript incluye la función eval que permite evaluar expresiones como expresadas como cadenas en tiempo de ejecución. Por ello se recomienda que eval sea utilizado con precaución y que se opte por utilizar la función JSON.parse() en la medida de lo posible, pues resulta mucho más segura.
Funciones de primera clase
A las funciones se les suele llamar ciudadanos de primera clase; son objetos en sí mismos. Como tal, poseen propiedades y métodos, como .call() y .bind().19 Una función anidada es una función definida dentro de otra. Esta es creada cada vez que la función externa es invocada. Además, cada función creada forma una clausura; es el resultado de evaluar un ámbito conteniendo en una o más variables dependientes de otro ámbito externo, incluyendo constantes, variables locales y argumentos de la función externa llamante. El resultado de la evaluación de dicha clausura forma parte del estado interno de cada objeto función, incluso después de que la función exterior concluya su evaluación.20
Prototipos
JavaScript usa prototipos en vez de clases para el uso de herencia.21 Es posible llegar a emular muchas de las características que proporcionan las clases en lenguajes orientados a objetos tradicionales por medio de prototipos en JavaScript.22
Funciones como constructores de objetos
Las funciones también se comportan como constructores. Prefijar una llamada a la función con la palabra clave new crear una nueva instancia de un prototipo, que heredan propiedades y métodos del constructor (incluidas las propiedades del prototipo de Object).23 ECMAScript 5 ofrece el método Object.create, permitiendo la creación explícita de una instancia sin tener que heredar automáticamente del prototipo de Object (en entornos antiguos puede aparecer el prototipo del objeto creado como null).24 La propiedad prototype del constructor determina el objeto usado para el prototipo interno de los nuevos objetos creados. Se pueden añadir nuevos métodos modificando el prototipo del objeto usado como constructor. Constructores predefinidos en JavaScript, como Array u Object, también tienen prototipos que pueden ser modificados. Aunque esto sea posible se considera una mala práctica modificar el prototipo de Object ya que la mayoría de los objetos en Javascript heredan los métodos y propiedades del objeto prototype, objetos los cuales pueden esperar que estos no hayan sido modificados.25
Entorno de ejecución
JavaScript normalmente depende del entorno en el que se ejecute (por ejemplo, en un navegador web) para ofrecer objetos y métodos por los que los scripts pueden interactuar con el "mundo exterior". De hecho, depende del entorno para ser capaz de proporcionar la capacidad de incluir o importar scripts (por ejemplo, en HTML por medio del tag <script>). (Esto no es una característica del lenguaje per se, pero es común en la mayoría de las implementaciones de JavaScript.)
Un número indefinido de parámetros pueden ser pasados a la función. La función puede acceder a ellos a través de los parámetros o también a través del objeto local arguments. Las funciones variádicas también pueden ser creadas usando el método .apply().
Funciones como métodos
A diferencia de muchos lenguajes orientados a objetos, no hay distinción entre la definición de función y la definición de método. Más bien, la distinción se produce durante la llamada a la función; una función puede ser llamada como un método. Cuando una función es llamada como un método de un objeto, la palabra clave this, que es una variable local a la función, representa al objeto que invocó dicha función.
Al igual que muchos lenguajes de script, arrays y objetos (arrays asociativos en otros idiomas) pueden ser creados con una sintaxis abreviada. De hecho, estos literales forman la base del formato de datos JSON.
Expresiones regulares
JavaScript también soporta expresiones regulares de una manera similar a Perl, que proporcionan una sintaxis concisa y poderosa para la manipulación de texto que es más sofisticado que las funciones incorporadas a los objetos de tipo string.26
1. Función alert
Sintaxis:
alert(mensaje a mostrar)
A continuación se muestra un ejemplo donde aparece en la pantalla una pequeña ventana con un mensaje de saludo:
<html>
<head>
<title> Ejemplo alert </title>
<script language="javascript" type="text/javascript">
</script>
</head>
</body>
</html>
2. Función write
Sintaxis:
document.write(mensaje)
<html>
<head><title>Ejemplo write </title>
<script language="javascript" type="text/javascript">
document.write( "Hola, nos alegra que estés por aquí... ")
</script>
</head>
<body>
</body>
</html>
3. Función prompt
Sintaxis:
variable = prompt(mensaje, valor inicial)
<html>
<head><title>Ejemplo prompt </title>
<script language="javascript" type="text/javascript">
var nombre = prompt ("Ingrese su nombre", "")
document.write( "Hola "+ nombre)
</head>
<body>
</body>
https://aprendeenlinea.udea.edu.co/lms/moodle/mod/resource/view.php?inpopup=true&id=47109
https://librosweb.es/javascript/
3.1. Variables
Las variables en los lenguajes de programación siguen una lógica similar a las variables utilizadas en otros ámbitos como las matemáticas. Una variable es un elemento que se emplea para almacenar y hacer referencia a otro valor. Gracias a las variables es posible crear "programas genéricos", es decir, programas que funcionan siempre igual independientemente de los valores concretos utilizados.
De la misma forma que si en Matemáticas no existieran las variables no se podrían definir las ecuaciones y fórmulas, en programación no se podrían hacer programas realmente útiles sin las variables.
Si no existieran variables, un programa que suma dos números podría escribirse como:
resultado = 3 + 1
El programa anterior es tan poco útil que sólo sirve para el caso en el que el primer número de la suma sea el 3 y el segundo número sea el 1. En cualquier otro caso, el programa obtiene un resultado incorrecto.
Sin embargo, el programa se puede rehacer de la siguiente manera utilizando variables para almacenar y referirse a cada número:
numero_1 = 3
numero_2 = 1
resultado = numero_1 + numero_2
Los elementos numero_1 y numero_2 son variables que almacenan los valores que utiliza el programa. El resultado se calcula siempre en función del valor almacenado por las variables, por lo que este programa funciona correctamente para cualquier par de números indicado. Si se modifica el valor de las variables numero_1 y numero_2, el programa sigue funcionando correctamente.
Las variables en JavaScript se crean mediante la palabra reservada var. De esta forma, el ejemplo anterior se puede realizar en JavaScript de la siguiente manera:
var numero_1 = 3;
var numero_2 = 1;
var resultado = numero_1 + numero_2;
La palabra reservada var solamente se debe indicar al definir por primera vez la variable, lo que se denomina declarar una variable. Cuando se utilizan las variables en el resto de instrucciones del script, solamente es necesario indicar su nombre. En otras palabras, en el ejemplo anterior sería un error indicar lo siguiente:
var numero_1 = 3;
var numero_2 = 1;
var resultado = var numero_1 + var numero_2;
Si cuando se declara una variable se le asigna también un valor, se dice que la variable ha sidoinicializada. En JavaScript no es obligatorio inicializar las variables, ya que se pueden declarar por una parte y asignarles un valor posteriormente. Por tanto, el ejemplo anterior se puede rehacer de la siguiente manera:
var numero_1;
var numero_2;
numero_1 = 3;
numero_2 = 1;
var resultado = numero_1 + numero_2;
Una de las características más sorprendentes de JavaSript para los programadores habituados a otros lenguajes de programación es que tampoco es necesario declarar las variables. En otras palabras, se pueden utilizar variables que no se han definido anteriormente mediante la palabra reservada var. El ejemplo anterior también es correcto en JavaScript de la siguiente forma:
var numero_1 = 3;
var numero_2 = 1;
resultado = numero_1 + numero_2;
La variable resultado no está declarada, por lo que JavaScript crea una variable global (más adelante se verán las diferencias entre variables locales y globales) y le asigna el valor correspondiente. De la misma forma, también sería correcto el siguiente código:
numero_1 = 3;
numero_2 = 1;
resultado = numero_1 + numero_2;
En cualquier caso, se recomienda declarar todas las variables que se vayan a utilizar.
El nombre de una variable también se conoce como identificador y debe cumplir las siguientes normas:
• Sólo puede estar formado por letras, números y los símbolos $ (dólar) y _ (guión bajo).
• El primer carácter no puede ser un número.
Por tanto, las siguientes variables tienen nombres correctos:
var $numero1;
var _$letra;
var $$$otroNumero;
var $_a__$4;
Sin embargo, las siguientes variables tienen identificadores incorrectos:
var 1numero; // Empieza por un número
var numero;1_123; // Contiene un carácter ";"
Los programas que se pueden realizar utilizando solamente variables y operadores son una simple sucesión lineal de instrucciones básicas.
Sin embargo, no se pueden realizar programas que muestren un mensaje si el valor de una variable es igual a un valor determinado y no muestren el mensaje en el resto de casos. Tampoco se puede repetir de forma eficiente una misma instrucción, como por ejemplo sumar un determinado valor a todos los elementos de un array.
Para realizar este tipo de programas son necesarias las estructuras de control de flujo, que son instrucciones del tipo "si se cumple esta condición, hazlo; si no se cumple, haz esto otro". También existen instrucciones del tipo "repite esto mientras se cumpla esta condición".
Si se utilizan estructuras de control de flujo, los programas dejan de ser una sucesión lineal de instrucciones para convertirse en programas inteligentes que pueden tomar decisiones en función del valor de las variables.
3.4.1. Estructura if
La estructura más utilizada en JavaScript y en la mayoría de lenguajes de programación es la estructura if. Se emplea para tomar decisiones en función de una condición. Su definición formal es:
if(condicion) {
...
}
Si la condición se cumple (es decir, si su valor es true) se ejecutan todas las instrucciones que se encuentran dentro de {...}. Si la condición no se cumple (es decir, si su valor es false) no se ejecuta ninguna instrucción contenida en {...} y el programa continúa ejecutando el resto de instrucciones del script.
Ejemplo:
var mostrarMensaje = true;
if(mostrarMensaje) {
alert("Hola Mundo");
}
En el ejemplo anterior, el mensaje sí que se muestra al usuario ya que la variable mostrarMensaje tiene un valor de true y por tanto, el programa entra dentro del bloque de instrucciones del if.
El ejemplo se podría reescribir también como:
var mostrarMensaje = true;
if(mostrarMensaje == true) {
alert("Hola Mundo");
}
En este caso, la condición es una comparación entre el valor de la variable mostrarMensaje y el valor true. Como los dos valores coinciden, la igualdad se cumple y por tanto la condición es cierta, su valor es true y se ejecutan las instrucciones contenidas en ese bloque del if.
La comparación del ejemplo anterior suele ser el origen de muchos errores de programación, al confundir los operadores == y =. Las comparaciones siempre se realizan con el operador ==, ya que el operador = solamente asigna valores:
var mostrarMensaje = true;
// Se comparan los dos valores
if(mostrarMensaje == false) {
...
}
// Error - Se asigna el valor "false" a la variable
if(mostrarMensaje = false) {
...
}
La condición que controla el if() puede combinar los diferentes operadores lógicos y relacionales mostrados anteriormente:
var mostrado = false;
if(!mostrado) {
alert("Es la primera vez que se muestra el mensaje");
}
Los operadores AND y OR permiten encadenar varias condiciones simples para construir condiciones complejas:
var mostrado = false;
var usuarioPermiteMensajes = true;
if(!mostrado && usuarioPermiteMensajes) {
alert("Es la primera vez que se muestra el mensaje");
}
La condición anterior está formada por una operación AND sobre dos variables. A su vez, a la primera variable se le aplica el operador de negación antes de realizar la operación AND. De esta forma, como el valor de mostrado es false, el valor !mostrado sería true. Como la variable usuarioPermiteMensajes vale true, el resultado de !mostrado && usuarioPermiteMensajes sería igual a true && true, por lo que el resultado final de la condición del if() sería true y por tanto, se ejecutan las instrucciones que se encuentran dentro del bloque del if().
Estructura if...else
En ocasiones, las decisiones que se deben realizar no son del tipo "si se cumple la condición, hazlo; si no se cumple, no hagas nada". Normalmente las condiciones suelen ser del tipo "si se cumple esta condición, hazlo; si no se cumple, haz esto otro".
Para este segundo tipo de decisiones, existe una variante de la estructura if llamada if...else. Su definición formal es la siguiente:
if(condicion) {
...
}
else {
...
}
Si la condición se cumple (es decir, si su valor es true) se ejecutan todas las instrucciones que se encuentran dentro del if(). Si la condición no se cumple (es decir, si su valor es false) se ejecutan todas las instrucciones contenidas en else { }. Ejemplo:
var edad = 18;
if(edad >= 18) {
alert("Eres mayor de edad");
}
else {
alert("Todavía eres menor de edad");
}
Si el valor de la variable edad es mayor o igual que el valor numérico 18, la condición del if() se cumple y por tanto, se ejecutan sus instrucciones y se muestra el mensaje "Eres mayor de edad". Sin embargo, cuando el valor de la variable edad no es igual o mayor que 18, la condición del if() no se cumple, por lo que automáticamente se ejecutan todas las instrucciones del bloque else { }. En este caso, se mostraría el mensaje "Todavía eres menor de edad".
El siguiente ejemplo compara variables de tipo cadena de texto:
var nombre = "";
if(nombre == "") {
alert("Aún no nos has dicho tu nombre");
}
else {
alert("Hemos guardado tu nombre");
}
La condición del if() anterior se construye mediante el operador ==, que es el que se emplea para comparar dos valores (no confundir con el operador = que se utiliza para asignar valores). En el ejemplo anterior, si la cadena de texto almacenada en la variable nombre es vacía (es decir, es igual a "") se muestra el mensaje definido en el if(). En otro caso, se muestra el mensaje definido en el bloque else { }.
La estructura if...else se puede encadenar para realizar varias comprobaciones seguidas:
if(edad < 12) {
alert("Todavía eres muy pequeño");
}
else if(edad < 19) {
alert("Eres un adolescente");
}
else if(edad < 35) {
alert("Aun sigues siendo joven");
}
else {
alert("Piensa en cuidarte un poco más");
}
No es obligatorio que la combinación de estructuras if...else acabe con la instrucción else, ya que puede terminar con una instrucción de tipo else if().
https://librosweb.es/javascript/capitulo_3/estructuras_de_control_de_flujo.html
Ciclos en JavaScript
A menudo cuando se escribe código, se desea que el mismo bloque de código se ejecute una y otra, y otra vez en forma consecutiva. En vez de agregar muchas líneas casi iguales de código, en el script se pueden utilizar los ciclos para desempeñar una tarea como ésta.
En Javascript hay dos tipos distintos de ciclos (o loops):
• for – Ciclos a través de un bloque de código un número especificado de veces.
• while – Itera a través de un bloque de código mientras una condición específica es cierta.
El ciclo for
El ciclo for se utiliza cuando se conoce cuantas veces debe correr el script.
Sintaxis
For (var = varlorInicial; var <= valorFinal; var = var+incremento){
//código a ser ejecutado
}
Ejemplo
Explicación: El siguiente ejemplo define un ciclo que empieza con i = 0. El ciclo continuará corriendo siempre que i sea menor o igual a 10, i será incrementado en 1 cada iteración.
Nota: El parámetro de incremento podría ser también negativo, y el <= podría ser cualquier expresión de comparación.
<html>
<body>
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++){
document.write("El número es " + i)
document.write("<br />")
}
</script>
</body>
</html>
El ciclo while
El ciclo while se utiliza cuando se quiere que el ciclo se ejecute mientras que una condición especificada sea cierta.
while (var <= valorFinal){
//código a ser ejecutado
}
Nota: el <= puede ser cualquier expresión de comparación
Ejemplo
Explicación: El siguiente ejemplo define un ciclo que empieza con i = 0. El ciclo continuará siempre y cuando i sea menor o igual a 10. i se incrementará en 1 cada iteración.
<html>
<body>
<script type="text/javascript">
var i=0
while (i<=10){
document.write("El número es " + i)
document.write("<br />")
i=i+1
}
</script>
</body>
</html>
El ciclo do…while
El ciclo do…while es una variante del ciclo while. Este ciclo siempre ejecuta el bloque de código al menos una vez, y entonces se repetirá siempre y cuando la condición especificada sea cierta.
Este ciclo siempre ejecutará al menos una vez, aún si la condición es falsa, porque el código es ejecutado antes de que la condición sea evaluada.
do
{
//código a ser ejecutado
}
while (var <= valorFinal)
Ejemplo
<html>
<body>
<script type="text/javascript">
var i=0
do{
document.write("El número es " + i)
document.write("<br />")
i=i+1
}while (i<0)
</script>
</body>
</html>
Declaraciones break y continue
Hay dos declaraciones especiales que pueden ser usadas dentro de ciclos: break y continue.
Break
El comando break detendrá el ciclo y continuará ejecutando el código que sigue después del bloque del ciclo (si hay más código)
Ejemplo
<html>
<body>
<script type="text/javascript">
var i = 0
for (i = 0; i <= 10; i++){
if (i==3){
break
}
document.write("El número es " + i)
document.write("<br />")
}
</script>
</body>
</html>
Continue
El comando continue obliga a que el ciclo continúe con el próximo valor.
Ejemplo
<html>
<body>
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++){
if (i==3){
continue
}
document.write("El número es " + i)
document.write("<br />")
}
</script>
</body>
</html>
Ciclo for…in
La declaración for…in se utiliza para iterar a través de los elementos de un array o a través de las propiedades de un objeto.
El código en el cuerpo (body) del ciclo for…in es ejecutado una vez por cada elemento o propiedad.
Sintaxis
for (variable in objeto){
//código a ser ejecutado
}
La variable argumento puede ser una variable, un arreglo o la propiedad de un elemento.
Ejemplo
Utilizando for…in para iterar sobre un arreglo:
<html>
<body>
<script type="text/javascript">
var x
var misCarros = new Array()
misCarros[0] = "Saab"
misCarros[1] = "Volvo"
misCarros[2] = "BMW"
for (x in misCarros){
document.write(misCarros[x] + "<br />")
}
</script>
</body>
</html>
Sentencia Switch
La sentencia switch permite que se seleccione un grupo de sentencias entre varias posibles.
La sintaxis de esta sentencia es:
switch ( Expresión )
{
case Valor 1: Instrucción o bloque de instrucciones;
[break;]
case Valor 2: Instrucción o bloque de instrucciones;
[break;]
case Valor 3: Instrucción o bloque de instrucciones;
[break;]
...
case Valor N: Instrucción o bloque de instrucciones;
[break;]
[default:]Instrucción o bloque de instrucciones;
}
Los prámetros utilizados en la sentencia switch son:
• Expresión: Es una variable que es comparada con cada uno de los case.
• Case X : Identificador usado para comparar la expresión.
• Instrucciones: Instrucción o bloque de instrucciones que son ejecutadas, una vez se identifica a qué case pertenece Expresión.
El funcionamiento general de la sentecia switch se describe a continuación: La Expresión entre paréntesis del switch debe ser entera. Su resultado se comparará con los distintos valores del case. Si coincide con uno de ellos se pasará a la instrucción siguiente al case con dicho valor y se seguirán ejecutando las instrucciones consecutivas hasta encontrar una instrucción break o alcanzar el cierra llaves del switch. En caso de que el resultado de la expresión no coincida con ningún valor se pasará la ejecución a la instrucción siguiente de la etiqueta default, si la hubiera, y se continuará como un case. Los valores en los case pueden ser una expresión constante. No puede haber dos case con el mismo valor.
Ejemplo:
<!-- Ejemplo Sentencia Switch-->
<html>
<head>
<title>Ejemplo Javascript</title>
</head>
<body>
<script language="JavaScript">
for(var Frutas=1; Frutas<=5; Frutas++)
{
switch (Frutas)
{
case 1 : document.write("Las Naranjas cuestan $100.");
break;
case 2 : document.write("Las Manzanas cuestan $200.");
break;
case 3 : document.write("Las Bananas cuestan $50.");
break;
case 4 : document.write("Las Cerezas cuestan $500.");
break;
default : document.write("Lo siento, pero esa Fruta no la tenemos.");
}
document.write("<br>");
}
document.write("<br>");
document.write("Desea comprar algo más?");
</script>
</body>
</html>
La sentencia break dentro de un switche, está asociada con cada case y su función es asegurar que el programa salte fuera del switche una vez que la expresión haya coincidido con un case y se hayan ejecutado las instrucciones correspondientes. Así, el break hará que se ejecute la instrucción siguiente al switche. Si la sentencia break es omitida, el programa continua la ejecución en la siguiente instrucción dentro del switch.
