05 Primeros Programas en JavaScript

8/19/2019 05 Primeros Programas en JavaScript

http://slidepdf.com/reader/full/05-primeros-programas-en-javascript 1/7

Material facilitado por Ing. Gerardo Josué Portillo ([email protected])

Primeros Pasos en la Programación con JavaScript

Introducción

En este material les expongo algunos programas para iniciarse en la programación de sitios

WEB auxiliándose con JavaScript, este documento les servirá como ayuda para la

realización del proyecto de este parcial, no será evaluado en examen escrito pero sus

conocimientos ponen en practica toda la teoría de los materiales anteriores.

Por lo tanto recomiendo que pongan en práctica todo lo que aquí se menciona y además

que complementen con los videos y demás información que puedan encontrar en Internet

al respecto.

Los programas en JavaScript van dentro de las páginas WEB (HTML),así que podremos realizar todos los ejemplos de este material en un

bloc de notas y posteriormente guardar el archivo como un archivo

con extensión HTML como lo hemos venido haciendo desde el

comienzo de esta clase.

Nuestro Primer Programa

Escribir el código siguiente:

<html><body>

<script type="text/javascript">

document.write("Hola programador!!!")

</script>

</body></html>

En la página realizada hemos incrustado un script en el código HTML, porqué decimos esto?

Porque el código del script se encuentra en el cuerpo de la página, o sea dentro de las

etiquetas <body></body>




Explicación del ejemplo:

1.

Se comienza con el tag <script>

2.

La orden document.write, establece que se escriba en el documento html la frase “Hola

programador” que debe ir entre comillas dobles o simples.

3. Se finaliza con el tag </script>

Ejemplo mediante un EventoEscribir el código siguiente:

<html><body>

<FORM>

<INPUT TYPE="button"

NAME="boton"

VALUE="Presione"

onClick="document.write('Hola Programador!!!')">

</FORM>

</body></html>

En este caso incorporamos una expresión javascript en un formulario en donde declaramos

un botón con el texto presione. Al presionar el botón escribe en el documento la frase Hola

Programador.

Primero observen que definimos dos tags: <FORM> y </FORM> con ellos establecemos que

vamos a crear un formulario, a dicho formulario le vamos a poner un botón con el tag

INPUT Type=”button”.

La expresión onClick es de JavaScript, observen el siguiente detalle:

Luego de onClick = la expresión document.write está entre comillas

dobles y el texto se encuentra en comillas simples.

Esto es porque las comillas dobles encierran a lo que mandamos a llamar con la función

onClick que es el evento que se dispara cuando alguien hace click en el botón.

Las comillas simples también pueden ser usadas en JavaScript para presentar cadenas de

texto, o sea que en JavaScript tanto las comillas dobles como las comillas simples pueden

usarse para presentar texto y combinarse entre si.




Ejemplo: Mostrar un MensajeEscribir el código siguiente:

<html><body>


alert("Bienvenidos a mi pagina")

</script>

</body></html>

Esta página mostrará un mensaje de bienvenida al cargar la página.

Ejemplo: Mostrar un Mensaje a través de un EventoEscribir el código siguiente:

<html><body>

<FORM> <INPUT TYPE="button"

NAME="boton"

VALUE="Presione"

onClick="alert('Hola Programador!!!')">

</FORM>

</body></html>

Este ejemplo lo que hace es que muestra un botón en la página y al hacer click en él

muestra un mensaje.




Ejemplo: Poner Comentarios a nuestro códigoCuando se escribe un programa, muchas veces es necesario documentar las tareas que

realiza, muchas veces son líneas importantes que no hacen tareas de programación en sí:

<script type=”text/javascript”>

//comentario de una línea

/*Comentario que puede abarcar

Más de una línea*/

</script>

Ejemplo: Operaciones Matemática BásicasEscribir el código siguiente:

<HTML><HEAD><TITLE>LABORATORIO 1</TITLE></HEAD>

<script>

document.write('texto que saldrá en el script<br>');

var a = 6 , b = 2;

c = a*b;

d = a/b;

e = a%b;

f = a+b;

document.write('a= '+ a + '<br>b= ' + b + '<br>c= ' + c);

document.write('<br>d= ' + d +'<br>e= ' + e + '<br>f='+f);

</script>

</BODY></HTML>

Resultado:

1.

var es el método que utilizamos para crear variables, en JavaScript la variables toman eltipo de dato según el valor con que son asignadas.




2. En muchos navegadores, el operador de suma es interpretado como la concatenación de

caracteres como se mostró en el ejemplo anterior.

Ejemplo: Captura de DatosEscribir el código siguiente:


var a,b,s;

a = prompt("ingrese numero a");

b = prompt("ingrese numero b");

s = a + b;

alert(s);

</script>

1. Para capturar datos utilizamos la función prompt, esta muestra un mensaje para

solicitar al usuario que ingrese un dato y este se puede almacenar en una variable.

2.

La variable s muestra la concatenación de a y b




¿Cómo solucionamos esto?

Para evitar que los resultados de los prompt se concatenen hay que convertir el valor

capturado a un valor numérico:


var a,b,s;

a = prompt("ingrese numero a");

b = prompt("ingrese numero b");

s = parseInt(a) + parseInt(b);alert(s);

</script>

1. Observe que utilizamos la function parseInt, esta función convierte a número entero

el contenido de una variable.

2.

La función parseFloat convierte a número con valores decimales el contenido de unavariable.




Ejemplo: Mensaje de PreguntaEscribir el código siguiente:

<html><body>


resp = confirm("Carrera de Programador?");

alert(resp)

</script>

</body></html>

1.

Para preguntar al usuario utilizamos la función confirm la cual muestra un mensaje para

preguntar algo al usuario, la respuesta que el usuario de será almacenada en la variable

llamada resp.

2.

Posteriormente a la pregunta, se muestra otro mensaje con la función alert el cualmuestra lo que el usuario ha respondido (almacenado en la variable resp), dicho valor

será del tipo booleano por lo tanto si se responde Aceptar entonces se retornará true,

de lo contrario se retornará false:

En el siguiente parcial aprenderemos sobre las estructuras de control, los ciclos, las

funciones y el acceso a datos.

Éxitos y bendiciones para ustedes futuros ingenieros.

Documents

05 Primeros Programas en JavaScript