Introducing
Your new presentation assistant.
Refine, enhance, and tailor your content, source relevant images, and edit visuals quicker than ever before.
Trending searches
2
JavaScript - JS
INICIO
UTILIDAD
LOGRO
LOGRO DE LA SESIÓN
Al finalizar la sesión los estudiantes construyen documentos HTML empleando JavaScript utilizando sentencias condicionales.
JavaScript
¿Qué es JavaScript?
Es un lenguaje de programación del tipo intérprete (vas traduciendo las sentencia una tras otra y no todas).
Su principal fortaleza es en la programación web, pero se puede encontrar en distintos tipos de proyectos y aplicaciones.
Insertar JavaScript en HTML
JavaScript puede ser insertado dentro de un documento HTML mediante la etiqueta <script> o en documentos .js separados que pueden ser llamados en la etiqueta <script>
<head>
<script src="doc.js" type="text/javascript"></script>
</head>
<script type="text/javascript">
//Código JS
</script>
}
Declarando variables
Para declarar cualquier variable: numérica, texto, lógico, objeto o colección se usa la palabra reservada var.
/*
Aprendiendo a declarar variables
*/
var numero = 100; // variable numérica
var texto = "hola :v"; // variable String
var logico = false; // variable lógica
var objeto = {nombre: "Argos", peso: 23}; // variable tipo objeto
var arreglo = ["Argos","Gardfield","Shyrley", "Pelusa"]; // variable tipo array
Comentarios
Los comentarios de línea son con // y los de bloque se delimitan mediante /* y */
/*
Aprendiendo a declarar variables
*/
var numero = 100; // variable numérica
var texto = "hola :v"; // variable String
var logico = false; // variable lógica
var objeto = {nombre: "Argos", peso: 23}; // variable tipo objeto
var arreglo = ["Argos","Gardfield","Shyrley"]; // variable tipo array
OPERADORES Y SENTENCIAS
OPERADORES JS
Tenemos:
- Aritméticos: la adición ( + ), resta ( - ), multiplicación ( * ), división ( / ) y cálculo del residuo de una división ( % )
- Lógicos: la conjunción ( && ), disyunción ( || ), negación ( ! ), comparación de "valor" ( == ) y comparación de "valor" y tipo de variable ( ===)
Estructura condicional
Las estructuras condicionales permiten ejecutar bloques de sentencias de código para una determinada condición, si esta no se cumple se puede optar por no realizar nada o llevar a cabo otro bloque de sentencias, de manera que no pueden ejecutarse ambos bloques, solo uno de ellos.
Ejemplo práctico: al ingresar nuestra contraseña de una red social, si es incorrecta no podemos ingresar, pero si es correcta ingresamos a nuestra cuenta.
Condicional simple y múltiple
/*Condicional múltiple/
swicht (expresión) {
case x :
//Sentencias si expresión es "x"
break;
case x :
//Sentencias si expresión es "y"
break;
default:
//Sentencias para otros casos
}
/*Condicional simple*/
if (condicion1) {
//Sentencias si
//Condicion1 es verdad
}else if (condicion2) {
//Sentencias si
//Condicion2 es verdad
}else {
//Sentencias si condicion1 y
//condicion2 no son verdad
}
Operador ternario
Cuando tenemos una estructura condicional simple no anidad y sin "else if", lo más óptimo es utilizar un operador ternario, hay que tener en cuenta que no debe ser usado a diestra y siniestra
/*Codicional clásico*/
[variable u otro] (condicion) ?
//Sentencias si
//Condicion es verdad
:
//Sentencias si condicion
//no son verdad
; // cerrar la sentencia al final
/*Codicional clásico*/
if (condicion) {
//Sentencias si
//Condicion es verdad
}else {
//Sentencias si condicion
//no son verdad
}
Estructura repetitiva
Las estructuras repetitivas permiten ejecutar bloques de sentencias múltiples veces, aun si no conocemos el número de veces que debe repetirse el código. Se puede usar para ello una determinada condición, de manera que el bloque se detendrá cuando no se cumpla la condición.
Ejemplo práctico: al ingresar productos en una factura, el proceso se repite una y otra vez.
Estructura FOR
for ( var i = [valor inicial]; i <= [valor máximo]; i++ ) {
//Sentencias que se van a repetir: "(valor máximo - valor inicial)" veces
}
for ( var i in [variable tipo arreglo] ) {
//Sentencias que se van a repetir tantas veces como elementos tenga
//el arreglo
}
Estructura WHILE y DO WHILE
Las sentencias en while solo se ejecutan si la condición es verdadera, por lo tanto hay posibilidad que nunca se ejecuten, en do while siempre se ejecuta por lo menos una vez
while ( condición ) {
//Sentencias que se van a repetir mientras condición sea verdadera
}
do {
//Sentencias que se van a repetir mientras condición sea verdadera
}while ( condición ) ;
ARRAY en JS (Vectores o matrices)
// Tenemos el siguiente arreglo de Strings que contiene 3 elementos:
var mascotas = ["Argos","Pelusa","Shirley"];
// Podemos capturar un valor:
alert(mascota[ 1 ]); //mostrará Pelusa
//Recorrer el arreglo
for ( var i in mascota ) {
alert(mascota[ i ]);
}
//Y muchas otras cosas más con diversas funciones.
Captura de datos PROMPT
//Caso 1: Sin parámetros
prompt();
//Caso 2: Con un parámetro
prompt('Ingrese su edad');
//Caso 3: Con dos parámetros
prompt('Ingrese su edad', '18');
Salida de datos ALERT
alert ( 'Yo soy un alert' );
Función CONFIRM
confirm ( 'Elige sabiamente' );
JQuery - AJAX
Asynchronous
JavaScript
And
Xml
¿Qué es AJAX?
Es la transferencia de datos de manera asíncrona, esta combina por lo general tres cosas:
- Lenguaje de programación servidor: ASP, PHP, Python, cgi, etc.
- Lenguaje de intercambio: XML, Json, text, html, yaml, etc.
- Lenguaje de programación cliente: html, JS (JQuery, prototype)
Se envía datos desde el cliente hacia el servidor por GET o POST, luego se recibe una respuesta del servidor como XML o Json
¿Qué es jQuery?
jQuery es una biblioteca de JavaScript que permite programar en JavaScript de manera muy sencilla y con una curva de aprendizaje muy fácil.Nos permite agregar clases a los elementos (etiquetas HTML), propiedades, estilos, animaciones, etc.
Por ejemplo, la siguiente función en la primera línea declara que de la página se prepara una función, en la segunda línea que al hacer clic en el elemento button se ejecute lo de la tercera línea que indica que el elemento con id="animado" se mueva 900 px desde la izquierda.
$(document).ready(function(){
$("button").click(function(){
$("#animado").animate({left: '900px'});
});
});
PRACTICAMOS
CIERRE
JS es un lenguaje de programación que se ejecuta en tiempo real, generando gran flexibilidad en diversos tipos de dispositivos y mucha adaptación a los documentos en HTML.
Permite utilizar sentencias condicionales, repetitivas y otras en páginas Web.