Upload
gabriel-sosa
View
213
Download
0
Embed Size (px)
Citation preview
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>
8/19/2019 05 Primeros Programas en JavaScript
http://slidepdf.com/reader/full/05-primeros-programas-en-javascript 2/7
Material facilitado por Ing. Gerardo Josué Portillo ([email protected])
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.
8/19/2019 05 Primeros Programas en JavaScript
http://slidepdf.com/reader/full/05-primeros-programas-en-javascript 3/7
Material facilitado por Ing. Gerardo Josué Portillo ([email protected])
Ejemplo: Mostrar un MensajeEscribir el código siguiente:
<html><body>
<script type="text/javascript">
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.
8/19/2019 05 Primeros Programas en JavaScript
http://slidepdf.com/reader/full/05-primeros-programas-en-javascript 4/7
Material facilitado por Ing. Gerardo Josué Portillo ([email protected])
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.
8/19/2019 05 Primeros Programas en JavaScript
http://slidepdf.com/reader/full/05-primeros-programas-en-javascript 5/7
Material facilitado por Ing. Gerardo Josué Portillo ([email protected])
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:
<script type="text/javascript">
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
8/19/2019 05 Primeros Programas en JavaScript
http://slidepdf.com/reader/full/05-primeros-programas-en-javascript 6/7
Material facilitado por Ing. Gerardo Josué Portillo ([email protected])
¿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:
<script type="text/javascript">
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.
8/19/2019 05 Primeros Programas en JavaScript
http://slidepdf.com/reader/full/05-primeros-programas-en-javascript 7/7
Material facilitado por Ing. Gerardo Josué Portillo ([email protected])
Ejemplo: Mensaje de PreguntaEscribir el código siguiente:
<html><body>
<script type="text/javascript">
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.