Java Script
¿Que es JavaScript?
Es uno de los mas potentes e importantes lenguajes de programacion en la actualidad pro tres enfoques claros: es util,practico y esta disponible en cualquier navegador web.
JavaScript nace como oun lenguaje sencillo destinado a añadir algunas caracteristicas interactivas a las paginas web.
Caracteristicas de Java Script
- Es liviano.
- Multiplataformas,ya que se puede utilizar en Windows,Linux o Mac .
- Es imperatico y estructurado, mediante un conjunto de istrucciones indica al computador que tarea debe realizar.
- Prototipado,debido a que usa prototipos en vez de clases para el uso de herencia.
- Orientado a objetos y enventos.
- Es interpretado,no se compila para poder ejecutarse.
- Es interpretado por el navegador
Diferencia entre Java y JavaScript
Java:
- Es un lenguaje de progrmacion orientado a objetos.
- compilador, para programar en Java necesitamos un Kit de desarrollo y compilador.
- Java es un lenguaje de programacion fuertemente tipado, esto quere decir que al declarar una variable tendremos que indicar su tipo.
- Java es mucho mas complejo pero mucho mas potente,robusto y seguro.
Java Script:
- No orienta a objetos,esto quiere decir que podremos programar sin necesidad de crear clases.
- compilador, JavaScript , este lenguaje no necesita que sus programas se compilen si no que estos se interpretan por pate del navegador cuando este see lee.
- A diferenecia de java y su lenguaje tipado,javascript no tiene esas caracteristica, podemos meter en una variable la informacion que deseemos.
Formas de Incluir JavaScrip a una pagina html:
- La primera insertar JavaScript en HTML es directar.Utilizando la etiqueta <script> </script> que debe envolver todo el codigo JS que escribas.Se puede agregar el codigo JS: entre etiquetas <head> y entre etiquetas <body>.
Ejemplo:
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script>JAVASCRIPT IS USUALLY PLACED HERE</script> <title>Time right now is: </title> </head> <body> <script>JAVASCRIPT CAN ALSO GO HERE</script> </body> </html>
- Agregar codigo JavaScirpt a un archivo separado: a veces insertar JavaScript en HTML directamente no parece ser la mejor opcion.Sore todo porque algunoss scripts de JS debe utilizarse en varias paginas, por lo tanto , es mejor mantener el codigo JavaScript en archivos separado.Es por esto quee la forma mas aceptable de incluir JavaScirpt en archivos externos
Ejemplo:
Hacemos referiencia al archivo JavaScript desde HTML asi:
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Time right now:</title> </head> <body> </body> <script src="js/myscript.js"></script> </html>
El contenido del archivo myscirpt.js sera:
let d = new Date(); document.body.innerHTML = "<h1>Time right now is: " + d.getHours() + ":" + d.getMinutes()
+ ":" + d.getSeconds()</h1>"
Estructura basica de JavaScript:
Como colocar comentarios en JavaScirpt?
lineal:
<script>
// Este un comentario de una única línea
alert("Escibiendo comentarios en javascript!"); //Aquí puedo poner una nota de lo que hace esta línea
// alert("Esto no se ejecuta");
</script>
multilineal:
<script>
alert("Escribiendo comentarios multi-línea en javascript");
/*
alert("Esto no se ejecuta");
alert("Esto no se ejecuta");
alert("Esto no se ejecuta");
alert("Esto no se ejecuta");
alert("Y esto tampoco");
Y este texto puede decir lo que yo quiera
para acordarme de algo
*/
</script>Tipos de datos en JavaScript:
- Boolean: solo puede poner valores true o false
- Null: inexisten o invalido objeto o direccion
- Undefined: se le asigna a variable que solo han sido declarados o a los argumentos formales para los cuales no exite argumento
- Number: todo tipo de numeros (Integers, Floats, Doubles, or Bignums.)
- String: secuencia de caracteres utilizados pare representar el texto.
- Symbol(nuevo en ECMAScirpt 6)
- Object : se refiere a una estructura de datasos que contiene datos e instrucciones para trabajar con lo datos. Algunas veces los Objects se refieren a cosa del mundo real,por ejemplo, un object de un carro o mapa en una juego de carreras.
Variable:
Todas las variables de JavaSript se crean de la misma forma(median la palabra reservaada var)
Los tipos de datos basicos de JavaScript son los numeros,com 3 0 12.57; las cadenas,como "Hola Mundo"; los valores booleanos,cuyo valor puede ser true o false; el valor especial null y el valor especial undefined,que indica que no se asigno ningun valor para la variable.
Ejemplo:
El siguiente ejemplo prouduce unas salidad "a es 7"
Todas las variables de JavaSript se crean de la misma forma(median la palabra reservaada var)
Los tipos de datos basicos de JavaScript son los numeros,com 3 0 12.57; las cadenas,como "Hola Mundo"; los valores booleanos,cuyo valor puede ser true o false; el valor especial null y el valor especial undefined,que indica que no se asigno ningun valor para la variable.
quiere incluir... Se debe incluir... Una nueva línea \nUn tabulador \tUna comilla simple \'Una comilla doble \"Una barra inclinada \\
Constantes :
La idea de usar constantes es indicar a otras personas que cierto componente,funcion o variable no va a cambiar su referencia.Ejemplo:
El siguiente ejemplo prouduce unas salidad "a es 7"
const a = 7;
document.writeln("a es " + a + ".");Identificadores:
Un identificador es un conjunto de caraceres alfaumericos de cualquier longitud que sirve para indentificar las entidades del programa(clase,funciones,varables, tipos compuestos).Los identificadores pueden ser combinados de letrea u numeros.
JavaScript Operadors y Expresiones
Palabras reservadas en JavaScript
JavaScript Operadors y Expresiones
Operadores:
JavaScript tiene los siguientes tipos de operadores:- Operadores de asignacion:
| Nombre | Operador abreviado | Significado |
|---|---|---|
| Operadores de asignación | x = y | x = y |
| Asignación de adición | x += y | x = x + y |
| Asignación de sustracción | x -= y | x = x - y |
| Asignación de multiplicación | x *= y | x = x * y |
| Asignación de división | x /= y | x = x / y |
| Asignación de resto | x %= y | x = x % y |
| Asignación de exponenciación | x **= y | x = x ** y |
| Asignación de desplazamiento a la izquierda | x <<= y | x = x << y |
| Asignación de desplazamiento a la derecha | x >>= y | x = x >> y |
| Asignación de desplazamiento a la derecha sin signo | x >>>= y | x = x >>> y |
| Asignación AND binaria | x &= y | x = x & y |
| Asignación XOR binaria | x ^= y | x = x ^ y |
| Asignación OR binaria | x |= y | x = x | y |
- Operadorese de comparacion:
| Operador | Descripción | Ejemplos devolviendo true |
|---|---|---|
Igualdad (==) | Devuelve true si ambos operandos son iguales. | 3 == var1"3" == var13 == "3" |
Desigualdad(!=) | Devuelve true si ambos operandos no son iguales. | var1 != 4 |
Estrictamente iguales (===) |
Devuelve
true si los operandos son igual y tienen el mismo tipo. Mira también Object.is y sameness in JS. | 3 === var1 |
Estrictamente desiguales (!==) |
Devuelve
true si los operandos no son iguales y/o no son del mismo tipo. | var1 !== "3" |
Mayor que (>) |
Devuelve
true si el operando de la izquierda es mayor que el operando de la derecha. | var2 > var1 |
Mayor o igual que (>=) | Devuelve true si el operando de la izquierda es mayor o igual que el operando de la derecha. | var2 >= var1 |
Menor que (<) | Devuelve true si el operando de la izquierda es menor que el operando de la derecha. | var1 < var2 |
Menor o igual que (<=) | Devuelve true si el operando de la izquierda es menor o igual que el operando de la derecha. | var1 <= var2 |
- Operadores aritmeticos:
| Operador | Descripción | Ejemplo |
|---|---|---|
Resto (%) |
Operador binario correspondiente al módulo de una operación. Devuelve el resto de la división de dos operandos.
| 12 % 5 devuelve 2. |
Incremento(++) |
Operador unario. Incrementa en una unidad al operando. Si es usado antes del operando
(++x) devuelve el valor del operando después de añadirle 1 y si se usa después del operando (x++) devuelve el valor de este antes de añadirle 1. | Si x es 3, entonces ++xestablece x a 4 y devuelve 4, mientras que x++ devuelve 3 y, solo después de devolver el valor, establece x a 4. |
Decremento (--) |
Operador unario. Resta una unidad al operando. Dependiendo de la posición con respecto al operando tiene el mismo comportamiento que el operador de incremento.
| Si x es 3, entonces --xestablece x a 2 y devuelve 2, mientras que x-- devuelve 3 y, solo después de devolver el valor, establece x a 2. |
Negación Unaria (-) |
Operación unaria. Intenta convertir a número al operando y devuelve su forma negativa.
| -"3" devuelve -3.-true devuelve -1. |
Unario positivo (+) | Operación unaria. Intenta convertir a número al operando. | +"3" devuelve 3.+true devuelve 1. |
Exponenciación(**) | Calcula la potencia de la base al valor del exponente. Es equivalente a baseexponente | 2 ** 3 devuelve 8.10 ** -1 devuelve 0.1. |
- Operadores logicos:
| Operador | Uso | Descripción |
|---|---|---|
AND Lógico (&&) | expr1 && expr2 |
Devuelve
expr1 si puede ser convertido a false de lo contrario devuelve expr2. Por lo tanto, cuando se usa con valores booleanos, && devuelve true si ambos operandos son true, en caso contrario devuelve false. |
OR Lógico(||) | expr1 || expr2 |
Devuelve
expr1 si puede ser convertido a true de lo contrario devuelve expr2. Por lo tanto, cuando se usa con valores booleanos, || devuelve true si alguno de los operandos es true, o false si ambos son false. |
NOT Lógico(!) | !expr |
Devuelve
false si su operando puede ser convertido a true, en caso contrario, devuelve true. |
- Operadores Bit a bit:
| Expresión | Resultado | Descripción binaria |
|---|---|---|
15 & 9 | 9 | 1111 & 1001 = 1001 |
15 | 9 | 15 | 1111 | 1001 = 1111 |
15 ^ 9 | 6 | 1111 ^ 1001 = 0110 |
~15 | -16 | ~00000000...00001111 = 11111111...11110000 |
~9 | -10 | ~00000000...00001001 = 11111111...11110110 |
- Operadores de cadena de caractes:
var mistring = "alfa";
mistring += "beto"; // devuelve "alfabeto" y asigna este valor a "mistring".- Operador condicional(ternario):
El operador condicional es el uncio operador de JavaScirpt que enecesita tres operados.El operador asignado uno de dos valores basado en una condicion .La sintaxis es:
condición ? valor1 : valor2
Ejemplo
var estado = (edad >= 18) ? "adulto" : "menor";- Operador coma:
EL operaddor coma(,) simplemente evalua ambos operandos y tertona el balor del ultimo.Este eoperadodr es ante todk utilizado dentro de un ciclo for
- Operadores unarios:
Un operacion unaria es una operacion que solo necesita un operando
- Operadores relacionales:
Un operador relacional compara sus operandos y retorna un valor booleano basado en si la comparacion es verdadera.
Estructura de Control de Errores y manejo de Errores Java
Las estructuras de control en JavaScript y en la mayoria de los lenguajes de programacion se utilozan en para definir el flujo de instrucciones que se van ejecutando.Si no fuera por las estructuras de control lo unico que podriamos hacer es ejecutar una instruccion tras otra y no tendrinamos forma de aplicar unas funciones u otras segun las condiciones que nosostros queramos establecer.
Tipos de contro de control en JavaScript:
- Estructuras condicionales: este tipo de estructuras de control tiene ocmo objetivo realizar una bifurcacion del flujo de instrucciones.Por ejemplo cuando colocamos una condicion, y pedimos que si cumple con esa condicion haga algo dereminado y si no cumple que haga otra cosa ya determinada.
- Estructuras de repeticion: este tipo de estructuras de control tambien conocidas como bucles se utilizan para realizar de forma repetida varas acciones.
- Estructuras de control de errores: estas estructuras son clave en el mundo de la seguridad informatica.Son aquellas que permiten controlar los errores que el usuario fina comete de forma fortuita o intencionada y poder seguir trabajando de forma normal.
Estructuras Selectivas:
Estas estructuras son las que comúnmente son conocidas como Los Si,su función es validar objetos del software como por ejemplo que en una caja de texto solo puede ingresar números;También sirven para controlar acciones del software de modo que se pueda colocar a hacer algo al programa cuando pase esa acción.
Existen 4 tipos de c condicionales, Estas son:
Simples
Compuestos
Anidados
Horizontales
Estructuras Interactivas:
Estas estructuras son comúnmente llamadas como ciclos y se caracterizan porquw hacen una misma acción varias veces, Hay dos tipos y estas son:
For
While
Excepciones con Throw:
La forma mas sencilla para lanzar errores es sutilizando throw. Este comando permite enviar al navegador un evento similar al que se produce cuando ocurre algun imprevisto o nos encontramos anteun tipo inesperado de datos.El lenguaje permite enviar todo tipo de elementos,incluyendo texto,numeros,valores booleanos o incluso objetos.Sin embargo.la opciona mas usual es enviar el objetos nativo Error.
throw new Error( "Something bad happened." );
Un ejemplo tipico de uso es insetarlo como condicional ejemplo:
function mySum(){ var result = 0, l = arguments.length; if( l > 10 ) throw console.error( 'Too much arguments!' ); for( var x = 0; x < l; x++ ){ result += arguments[x]; } return result; } console.log( mySum( 3, 4, 34, 5, 7, 8, 1, 32 ) ); // 94 console.log( mySum( 3, 4, 34, 5, 7, 8, 1, 32, 3, 5, 8 ) ); // Error: Too much arguments // El resto del código, será ignorado tras lanzar la excepción... // ... // ...
Exepcion con Try/Catch
Try Catch corresponde a un tipo de estructura de control JavaScript conla que comprobar el flujo de un programa frente a comportamientos inesperados.La diferencai ente esta estructura y la anterior es que mientras throw detiene completamente la ejecucion,catch realiza una axxion determinada frente a los errores para proseguir despues conel flujo definido.
Este tipo de exepciones se estructuran mediante un bloque de codigo que evalua una condicion previa y propone en consecuencia una ejecucion predefinida y otra alternativa frente a anormalidades.La sintaxis es sencilla y actua como un condicional mas:
function checkPassword( my_string ){ var msg = {}; try { if( my_string.length < 6 ) throw 'SHORT'; if( my_string.length > 10 ) throw 'LONG'; msg.status = 'Pass Validated'; } catch( err ) { if( err == 'SHORT' ) msg.status = 'Pass is too short'; if( err == 'LONG' ) msg.status = 'Pass is too long'; } finally { console.log( 'Password evaluated: ' + msg.status ); } } checkPassword( '1234' ); // Password evaluated: Pass is too short checkPassword( '12345678901' ); // Password evaluated: Pass is too long checkPassword( '12345678' ); // Password evaluated: Pass Validated console.log( 'The execution continues here... ' );
¿Que es una función en JavaScript?
Una función de JavaScript se un bloque de código diseñado para realizar una tarea en particular.Una función de JavaScript se ejecuta cuando "algo" lo invoca(lo llama).
La forma mas común de definir una función es usando la palabra reservada "function" seguido de un único nombre de función, y de los parámetros deseados (puede ser sin parámetros), y un bloque de instrucciones dentro de llaves.
¿Cuales son las partes de una función?
function nombre_funcion(parametros){
instrucciones;
}
Ejemplo:
function sumar(){
var num1 = 5;
var num2 = 8;
suma = num1 + num2;
alert("La suma es: "+suma);
}Tipos de funciones en JavaScript:
Funciones Simples
¿Que es un parámetro?
El nombre de un argumento que se pasa a la función. Una función puede tener hasta 255 argumentos.
Los argumentos de una función se enumeran dentro de los paréntesis() en la definición de la función.
Funciones Predeterminadas en JavaScript:
JavaScript cuenta con una serie de funciones predefinidas.Estas funciones realizan una serie de tareas complejas,como por ejemplo la presentación de cuadros de dialogo en pantalla,adición de texto y especificaciones HTML a un documento,cálculos matemáticos ect.
Su formato general es función(parámetros).
Las funciones predefinidas suelen aplicarse a un objeto.Se indica asi:
objeto.funcion()
por ejemplo:
document.write()
documento es un objeto y write una función.
Algunas funciones actuan sobre objetos especiales : por ejemplo, las funciones matemáticas actúan sobre el objeto Math.
Una función asociada a un objeto se denomina método.
Hay funciones predeterminadas que no usan ningún argumento,como por ejemplo close(); otras usan uno,como alert(argumento), y otras usan dos,como es el caso de prompt(argumento_1,argumento_2).
Función PROMPT():
La función prompt() usa dos argumentos: con el primero se formular una pregunta y con el segundo se sugiere una respuesta por defecto.
Función CONFIRM():
La función confirm() usa un argumento que se traduce en un enunciado.Este argumento solo puede ser un literal, pero tambien puede venir dado por una variable.La función preseta el enunciado acompañado de dos botones,uno de confirmación y otro de desconformidad.
Funcion ALERT()
Presenta una ventana pequeña con el mensaje indicado y un boton de conformidad.El mensaje pude se dato por un literal o una varialbe.
alert(mensaje)
Funciones Anidadas:
Es cuando puedes usar funciones dentro de otras
- eval: tiene como argumento una expresión y devuelve el valor de la misma.
- escape y unescape: estas funciones permiten codificar cadenas de caracteres en formato URL. Esta codificación es necesaria en la creación automática de enlaces de hipertexto o en la definición de propiedades persistentes como los cookies.
- parseFloat: convierte un string a un numero en punto flotante.Si se encuentra otros caractes que no sean numeros, el signo +, el - o un exponente,devuelve el valor encontrado hasta ese punto.
- isNaN: comprueba si el valor pasado por parametros es numerico o no.El resultado de esta función es un booleano.Es decir,evalua un argumento para ver si es NaN:Not Number
- parseInt: convierte una cadena de caracteres de entrada a un numero entero con una base especifica
