1 javascript
DESCRIPTION
aprendiendo javascriptTRANSCRIPT
L I C . : E V E L I N A L Á
INTRODUCCIÓN A JAVASCRIPT
QUÉ ES JAVASCRIPT?
JavaScript no es un lenguaje de programación
propiamente dicho como C, C++, Delphi, etc. Es un
lenguaje script u orientado a documento. No se
puede desarrollar un programa con JavaScript que
se ejecute fuera de un Navegador.
JavaScript es un lenguaje interpretado que se
embebe en una página web HTML. Un lenguaje
interpretado significa que a las instrucciones las
analiza y procesa el navegador en el momento que
deben ser ejecutadas.
CARACTERISTICAS DE JAVASCRIPT
• Se ejecuta en el cliente
• Es interpretado (no compilado)
• Es de respuesta inmediata
• Agrega interactividad a los sitios web
• Proporciona efectos visuales dinámicos
CARACTERISTICAS DE JAVASCRIPT
• JavaScript se ha diseñado para añadir
interactividad a las páginas HTML.
• Un lenguaje de scripting es un lenguaje de
programación ligero.
• Todo el mundo puede usar JavaScript sin
necesidad de adquirir una licencia.
• JavaScript es Case Sensitive.
JQUERY
Un la librería de código JavaScript ya elaborado, libre, de código abierto y disponible para que cualquier programador la utilice en sus proyectos.
Simplifica los dos principales inconvenientes de JavaScript:
• Dificultad a la hora de programar
• Incompatibilidad entre navegadores
• Jquery permite agregar funcionalidades avanzadas a nuestros sitios web
• Jquery se utiliza en millones de sitios web y algunos de los CMS mas conocidos: Drupal, WordPress,etc..
MOSTRAR UN MENSAJE JAVASCRIPT
<script>
alert("Hola estudiantes");
</script>
• Dentro del HEAD
• Dentro del BODY
ESCRIBIR TEXTO JAVASCRIPT EN EL DOCUMENTO HTML
Es decir que escriba en el documento HTML el
mensaje "Buenas noches estudiantes". Darle el
formato de H1.
<script>
document.write("buenas noches estudiantes");
</script>
INSERTAR ARCHIVO JAVASCRIPT
<script type="text/javascript" src="js/jquery.js"></script>
EJERCICIO 1
• Realizar un programa que muestre su nombre y su
edad en una página HTML.
Emplear el comando write del objeto document
para imprimir.
Tener en cuenta que si queremos que cada dato
quede en una fila distinta de la página debemos
insertar la marca <br> (salto de linea en HTML), es
decir debemos disponer: document.write('<br>').
FUNCIONES
Vienen incluidas en el lenguaje, ejemplo:
• alert();
• Document.write();
• isNan();
Después del nombre tenemos las ()
Terminar cada instrucción en ;
TIPOS DE DATOS
• Tres tipos básicos:
• Números
• Cadenas
• Booleanas
VARIABLES
• Una variable es un espacio de memoria donde se almacena un valor que podrá cambiar durante la ejecución del programa. Consta de un nombre y pertenece a un tipo (numérico, cadena de caracteres, etc.).
Tipos de variable: Una variable puede almacenar:
• Numéricos Valores Enteros (100, 260, etc.) Valores Reales (1.24, 2.90, 5.00, etc.)
• Cadenas de caracteres ("Juan", "Compras", "Listado", etc.)
• Valores lógicos (true, false).
VARIABLES
• Reglas a la hora de dar un nombre a una
variable
Comenzar por letra, simbolo $ o _
Contener solo letras, números,$ o _
Son Case Sensitiva
No deben ser palabras reservadas (son las que forman
parte del lenguaje)
Recomendable que sean descriptivos pero no
demasiado largos
EJEMPLO
• Declarar e inicializar una variable.
• Nombrar una variable.
• Mostrar variables en una página HTML.
<script >
var nombre="Evelin";
var puntuacion=0;
var record;
record=5000;
alert(nombre);
</script>
EJERCICIO 2
• Confeccionar una programa en JavaScript que
defina e inicialice una variable real donde
almacenar el sueldo de un operario y otra de tipo
cadena de caracteres donde almacenaremos el
nombre. Imprimir cada variable en una línea
distinta en pantalla.
ENTRADA DE DATOS POR TECLADO
• Para la entrada de datos por teclado tenemos la
función prompt. Cada vez que necesitamos
ingresar un dato con esta función, aparece
una ventana donde cargamos el valor.
• La sintaxis de la función prompt es:
<variable que recibe el dato>=prompt(<mensaje a
mostrar en la ventana>,<valor inicial a mostrar en la
ventana>);
• La función prompt tiene dos parámetros: uno es el
mensaje y el otro el valor incial a mostrar.
EJEMPLO
<script >
var nombre;
var edad;
nombre=prompt('ingrese su nombre','');
edad=prompt('ingrese su edad','');
document.write('Hola ');
document.write(nombre);
document.write(' así que tienes ');
document.write(edad);
document.write(' años');
</script>
EJERCICIO 3
• Confeccionar un programa que permita cargar el
nombre de un usuario y su mail por teclado. Mostrar
posteriormente los datos en la página HTML.
OPERDORES ARITMÉTICOS
EJEMPLO
• Ejemplo de algoritmo con estructura secuencial:
Realizar la carga de dos números por teclado y
mostrar en un mensaje su suma y su producto: <script >
var numero1, numero2;
numero1=prompt('ingrese el primer número','');
numero2=prompt('ingrese el segundo número','');
var resultado= Number(numero1) + Number(numero2);
alert("La suma es: "+ resultado);
alert("El producto es: "+numero1*numero2);
</script>
EJERCICIOS
• PROBLEMAS 1 - Realizar la carga del lado de un cuadrado, mostrar por pantalla el perímetro del mismo (El perímetro de un cuadrado se calcula multiplicando el valor del lado por cuatro). 2 - Escribir un programa en el cual se ingresen cuatro números, calcular e informar la suma de los dos primeros y el producto del tercero y el cuarto. 3 - Realizar un programa que lea cuatro valores numéricos e informar su suma y producto. 4 - Se debe desarrollar un programa que pida el ingreso del precio de un artículo y la cantidad que lleva el cliente. Mostrar lo que debe abonar el comprador.