1 javascript

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.