01 introduccion a java script

de 39
JAVA SCRIPT
1° Ejercicio:
<doctype html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script> //Nota: Java script puede ir en el HEAD o en el BODY depende donde reacciona distinto.
alert("Bienvenidos a mi pagina Web")
//document.write("Bienvendo Augusto") //---> muestra arriba en la izquierda es otro código de JS
</script>
</head>
<body>
<font color="#EE0000FF"><center><h1> COLEGIO PROVINCIAL ERNESTO SABATO </h1> </center></font>
<h3>Trabajando para uds</h3>
//------------> También se puede trabajar con un archivo externo .js
</body>
</html>
2° Ejercicio:
<doctype html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src= "Jsfileexterno.js"> //---------> Trabajando con un archivo externo .js llamado “Jsfileexterno.js”
</script>
</head>
<body>
</body>
</html>
Archivo externo
alert("Deja de pavear Killer"); // ----> Archivo externo guardado como “Jsfileexterno.js”
// ----> No es necesario poner el texto entre <script> </script>

de 39
Otro ejemplo:
<doctype html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src= "Jsfileexterno.js"> //---------> Trabajando con un archivo externo .js llamado “Jsfileexterno.js”
// Funcionara en todas la páginas donde tengamos el link
alert("Bienvenidos a mi pagina Web") //---> Y también tiene su propio Script dentro de la página.
//---> Funcionara solo en la pagina que tenga código escrito.
</script>
</head>
<body>
</body>
</html>
3° Ejercicio:
<doctype html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src= "Jquery/jquery-1.6.3.min.js"> //--> Trabajando con un archivo externo de JQuery y ruta”
//---------> Ojo con la dirección de ruta.
<script>
$(function() {
$("body").hide().fadeIn(3000); //------> fadeIn es el efecto de desvanecimiento
});
</script>
</script>
</head>
<body>
</body>
</html>
Archivo externo
alert("Deja de pavear Killer"); //----> Archivo externo guardado como “Jsfileexterno.js”
//----> No es necesario poner el texto entre <script> </script>

de 39
ESTRUCTURAS BÁSICAS
SENTENCIAS (UNIDADES BÁSICAS DE PROGRAMACIÓN) – FUNCIONES SIEMPRE CON PARENTESIS.
aler(“Hola Mundo”);
documento.write(“Hola Mundo”);
FUNCIONES PREDIFINIDADS JS
arlert();
documento.write();
IsNan();
FUNCIONES PROPIAS JS
TIPOS DE DATOS
Tres tipos básicos
Numéricos ---------- ej. 50
Strings ---------- ej. “Juan” ‘Juan’
Booleanos ---------- ej. True, false
VARIABLES
Es un espacio en la memoria del ordenador (RAM) donde se almacenará un valor que podrá cambiar durante la
ejecución del programa.
Sintaxis (declaración)
Ej. - var puntuación
Reglas a la hora de dar nombre a una variable
 Han de comenzar por letra, símbolo $ o _ // puntuación $puntuacion _puntuación
 Han de comenzar solo letras, números, $ y _ // puntuación1 puntuacion_1
 Son case sensitive (distingue entre mayúsculas y minúsculas) // Puntuación PUNtuacion
 No deben ser palabras reservadas // palabra clave como var varpuntuacion
 Se recomienda que sean descriptivas // Puntuacion_Final

USANDO E INICIANDO VARIABLES
 Iniciar una variable
 Declaración de varias variables en la misma línea
var puntuacion;
puntuacion=0;
var puntuacion=0;
var puntuacion.record.jugador; var puntuacion=0, record.jugador=5000, jugador=”Juan”;

de 39
Ejemplo de variables:
<!doctype html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var nombre="Augusto";
var puntuacion="0";
var record;
record=5000;
alert(nombre); //Porque no hay comilla, porque está trabajando con la variable nombre. En este caso
es Augusto.
</script>
</head>
<body>
</body>
</html>
Nota: Localizar error en el navegador en la consola - Presionando F12
OPERADORES BÁSICOS
+ Suma
- Resta
* Multiplicación
/ División
Ejemplo de operadores
<!doctype html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
var precioUnidad, cantidad, total;
precioUnidad=5;

de 39
cantidad=100;
total=precioUnidad*cantidad;
alert("El importe tota de la compra es: " + total + "$") // signo + permite concatenar variables.
//En este caso no sirve poner el alert() antes de las varibles (no va a devolver nada "Undenfile")
/* Bien comentarios amplios
comentarios amplios.........
OJO CON EL SIGNO +  NOS PUEDE JUGAR UNA MALA PASADA
Ejemplo:  totalArticulo=Number(camisas)+pantalones
Funciones predifinidas Number(…);  transforma a valor numérico aque texto que introducis entre
parentis siempre cuando se pueda -- IsNan (No es numérico)
*/
</script>
</head>
<body>
</body>
</html>
USO DE VARIABLES. OPERADORES INCREMENTO / DECREMENTO
Petición de datos. Uso de la fución prompt (petición de datos)
Ejemplo de valores fijos con hoja de estilos CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Jugando con variables</title>
<link rel="stylesheet" href="css/micss2.css">
</head>
<body>
<div class="contenedor">
<div class="header">
<p class="logo">Curso JavaScript Píldoras Informáticas</p>
</div>
<div class="contenido">
<div class="principal">
<h1>Jugando con las variables</h1>
<script> //Hay que agregar este Script
var nombre = "Augusto";
var apellido = "Mamani";

de 39
//var nombre = prompt("Introduce tu nombre por favor: "); //prompt  Permite ingresar nombre
//var apellido = prompt("Introduce tu apellido por favor: "); //prompt  Permite ingresar nombre
//  Se puede poner el script en el Head
//  y dejar el document.write(“ ”) en el Body
document.write("<p>");
document.write(“Bienvenido ” + nombre + " " + apellido);
document.write("</p>");
</script>
</div>
</div>
</div>
</body>
</html>
Hoja de estilo CSS
/* reset */
html, body, div, span, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
html , body{
line-height: 1;
background-color: #334873;
background-image: url(../_images/bg-page2.png);
}
ol, ul {
list-style: none;
}
blockquote, q {

de 39
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
contenido: '';
contenido: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* end reset*/
.contenido {
max-width: 760px;
margin: 20px 0 0 100px;
}
.logo {
letter-spacing: -1px;
color: rgb(204,102,0);
text-shadow: 2px 2px 1px rgba(0,0,0,.25);
font-family: Verdana, Geneva, sans-serif;
font-size: 54px;
font-style: normal;
font-weight: normal;
font-variant: normal;
margin: 20px 0 0 20px;
}
.header {
position: relative;
border-top: solid 6px white;
padding: 10px 0 10px 0;
margin-bottom: 20px;
}
.principal {
xxposition: relative;
padding-bottom: 1em;
border-bottom: solid 1px rgba(255,255,255,.5);
xxoverflow:hidden;
xxmin-height: 300px;
}
.principal h1 {
font-size: 32px;
color: white;
text-shadow: 1px 1px 1px rgba(0,0,0,.75);
border-bottom: solid 1px rgba(255,255,255,.5);

de 39
margin-bottom: 0.75em;
}
p{
color:#FFF;
font-weight:bold;
font-size:1.2em;
}
OPERADORES INCREMENTO / DECREMENTO
+= Incrementa en x el valor de una variable Record += 10
-= Decrementa en x el valor de una variable Record -= 7
*= Multiplica en x el valor de una variable Record *= 3
/= Divide en x el valor de una variable Record /= 4
++ Incrementa en 1 el valor de una variable Record ++
-- Decrementa en 1 el valor de una variable Record --
Ejemplo  Restando la edad  Script modificado al código anterior…….
<script>
var nombre = prompt("Introduce tu nombre por favor: ");
var apellido = prompt("Introduce tu apellido por favor: ");
var edad = prompt("Introduce tu edad: ");
var restando = prompt("Cuantos años deseas quitarte");
edad -= restando;
document.write("<p>");
document.write("Bievenido " + nombre + " " + apellido + "<br/>" + "Te gustaria tener" + edad + "
años");
document.write("</p>");
</script>

de 39
ARRAYS…. O ARREGLOS …. O MATRICES
Espacio en la memoria que se almacenar un valor.
Ejemplo con variables:
var nombre; var edad; var peso;
Ejemplo con ARRAYS:
Artículo 1: Zapatillas deporte var zapatillas;
Artículo 2: Pantalon deporte var pantalon;
Artículo 3: Camisas deporte var camisas;
Artículo 4: Calcetines deporte var calcetines;
var artículos=[“zapatillas”, “pantalon”, “camisas”, “calcetines”];
var artículos=new array(“zapatillas”, ”pantalon”, “camisas”, “calcetines”);
Nota: (No tiene que ser todo de tipo texto, sino que puede ser texto, numero o booleano) ¿?
ACCEDIENDO A LOS ELEMENTOS DEL ARRAY
Nota: Comienza desde la posición 0 (cero).
Ej.  alert(artículos[1]);
PROPIEDADES Y MÉTODOS DEL ARRAY IMPORTANTES
[0] [1] [2] [3]
Augusto 18 65
?
Zapatillas Camisas Pantalon Calcetines
Propiedad length
Artículos.length=4;
Método push
Artículos.push(“balon”);
Método unshift
Artículos.unshift(“balon”);
Articulos.unshift(“balon”, “raquetea”, “bolsa”);
Propiedad pop
Artículos.pop();
Propiedad shift
Artículos.shift()

de 39
Propiedad Length  Cuantos elementos hay en un array
Método Push Para agregar elemento/s en un array al final)
Unshift  Para agregar elemento/s al principio de un array
Pop Eliminar un array al final de un array
Shift Para eliminar elementos de un array al principio
Declarando un array
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Usando Arrays</title>
<link rel="stylesheet" href="css/micss.css">
<script>
var articulos=["zapatillas", "camisas", "pantalon", "calcetines"]
//var articulos=new Arrays("zapatillas", "camisas", "pantalon", "calcetines"); // --> otro forma de
declarar arrays
//var articulos=[]; // Arrays a futuro sin saber cuantos espacios necesitaré.....
</script>
</head>
<body>
<div class="contenedor">
<div class="header">
<p class="logo">JavaScript Arrays <i class="mm">Píldoras Informáticas
</p>
</div>
<div class="contenido">
<div class="principal">
<h1>Manejando Arrays</h1>
<script>
document.write("<p> El primer articulo es: <strong>");
document.write(articulos[0] + "</strong></p>");
//alert(articulos.length); //Nos va a mostrar cuantos elementos del array hay...
document.write("<p> El ultimo elemento es <strong>");
//document.write(articulos[3]) //mostrando cual es el último array
document.write(articulos[articulos.length-1] + "</strong></p>"); // mostrando el ultimo array sin
saber cual es... con length que muestra y - 1 que descuenta del ultimo...
articulos.unshift("balon"); // agregando un array al principio del array....

de 39
document.write("<p> Casi no olvidadamos !!! agregamos este elemento: <strong>");
document.write(articulos[0] + "</strong> </p>");
document.write("<p> Agregemos un elemento mas al final: <strong> "); //Estamos agregando un
elemento al final del array
articulos.push(prompt("Introduce el articulo: ")); //Agregara un elemento al final del array y
introuciendo el array el usuario
document.write(articulos[articulos.length-1] + "</strong> </p>");
document.write("<p>" + articulos[0] + "<br/>");
document.write(articulos[1] + "<br/>");
document.write(articulos[5] + "<br/></p>");
/*alert("Barraremos el primer elemento del array");
articulos.shift();
document.write(articulos[4] + "<br/></p>"); */
/* alert("Ahora borraremos el ultimo array");
articulos.pop();
document.write(articulos[4] + "<br/></p>"); */
</script>
</div>
</div>
</div>
</body>
</html>
Hoja de estilo CSS
body{
background-color:#334873;
}
h1{

de 39
color:#FC0;
border-top:2px solid #FFF;
border-bottom:2px solid #FFF;
padding-bottom:50px;
text-align:center;
}
p{
color:#FC0;
font-size:2em;
}
p span{font-size:2em;
}
POO  PROGRAMACIÓN ORIENTADA A OBJETOS CON JAVASCRIPT
¿Y QUÉ ES ESTO DE LA P.O.O.?
CAR MESA LAVARROPAS
Características Capacidades
Lavarropas Ancho – Largo- Color Lavarropa  Lava ropa
CAR Ancho – Largo- Color CAR  Arrancar
MESA Ancho – Largo- Color MESA  Sostener plato
Propiedades (Cómo es): Métodos (¿Qué puede hacer?)
Tiene puertas Arrancar
Tiene ruedas Acelerar
Tiene ventanas Frenar
Tiene motor Girar
Etc. Etc.
Instancia de coche. Instancia de coche.
Coche 1 Coche 2
Puertas = Azules Puertas = Amarillas
Ruedas = pequeñas Ruedas = Grandes
Ventanas = pequeñas Ventanas = Grandes
Motor = pequeño Motor = Grande
Ambas:
 Arrancan
 Aceleran
 Frenan
 Giran

de 39
Ejemplo  Boton de formulario se considera Objeto  tendrá una serie de propiedades o característica. O
una serie de métodos o capacidades
Propiedades del botón de formulario
Ancho
Alto
Color
Capacidades del botón de formulario
Capturar el foco
Seleccionarse
Clickearse
Moverse
NOMENCLATURA DEL PUNTO
Se utiliza la jerarquía y el operador punto
Ejemplos:
 document.write();
 window.alert();
 botón.style.width=”500px”;
 botón.style.backgroundColor=”red”;
 botón.focus();
ej.  renault.color=”azul”;
(nombre del objeto . propiedad . valor)
ej.  renault.frenar();
(acceder al método o capacidad)
style.width  ancho
style.backgroundColor  color
focus  foco
alert  trabaja con el objetowindow  window.alert();
prompt  trabaja con el objeto window  window.prompt();
Ejemplo 1  Creando mi primer botón con un determinado ancho
<!doctype html>
<!DOCTYPE html>
<html>
<head>
<meta charset="urf=8">
<title>POO-BOTON1</title>
</head>

de 39
<body>
<input type="button" id="Boton1">
<input type="button" id="Boton2">
<input type="text" id="MiCuadro">
<script>
var miboton1=document.getElementById("Boton1"); //.getElementById --> metodo o propiedades
var miboton2=document.getElementById("Boton2");
var cuadrotexto=document.getElementById("MiCuadro");
miboton1.style.width="300px";
miboton1.style.height="300px";
//miboton.style.backgroundColor="blue";
miboton2.style.width="300px";
miboton2.style.height="300px";
miboton2.focus(); // Poniendo el foco al segundo botón (Boton2)
cuadrotexto.style.backgroundColor="red";
cuadrotexto.value = "Escriba aqui .....";
cuadrotexto.style.height="20px";
</script>
</body>
</html>
ESTRUCTURAS DE CONTROL DE FLUJO. CONDICIONALES Y BUCLES
CONDICIONALES I
OPERADOR SIGNIFICADO
== Igual que…
!= Diferente que…
> Mayor que…
< Menor que…
>= Mayor igual…
<= Menor igual…
=== Estrictamente igual que (comprueba también tipos)
!== Estrictamente diferente que…(Comprueba tipos)
&& Y Lógico
|| O Lógico

de 39
Ejemplo condicional
<!doctype html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
var precioCoche=60000;
var dineroAhorrado=prompt("Ingrese la cantidad de dinero ahorra ");
if (dineroAhorrado>=precioCoche) {
alert("Puedes comprar el coche !")
}
else
{
alert("No puede comprar el coche ");
}
alert("Continuamos con la ejecución del programa ");
</script>
</head>
<body>
</body>
</html>
Otro Ejemplo:
<script>
var precioCoche=60000;
var dineroAhorrado=prompt("Ingrese la cantidad de dinero ahorra ");
var edad=prompt("Ingrese su edad, por favor: ")
if (dineroAhorrado>=precioCoche && edad>=18) {
alert("Puedes comprar el coche !")
}
else
{
alert("No puede comprar el coche ");
}
alert("Continuamos con la ejecución del programa ");
</script>

de 39
Condicional POO  ej. 12
<!doctype html>
<html>
<head>
<title>Documento sin título</title>
<style>
table{
margin:auto;
}
</style>
</head>
<body id="cuerpo">
<form name="form1" method="post" action="" id="miformulario">
<table width="25%" border="1" id="mitabla">
<tr>
<td>Nombre:</td>
<td><label for="textfield"></label>
<input type="text" name="textfield" id="textfield"></td>
</tr>
<tr>
<td>Apellidos:</td>
<td><input type="text" name="textfield2" id="textfield2"></td>
</tr>
<tr>
<td>Edad:</td>
</tr>
<tr>
<td>Carnet:</td>
</tr>
<tr>
<td><input type="submit" name="button" id="button" value="Enviar"></td>
<td><input type="reset" name="button2" id="button2" value="Restablecer"></td>
</tr>
</table>
</form>
<script>
var cuerpo=document.getElementById("cuerpo");

de 39
var colorWeb=prompt("Introduce el color de fondo. Azul/Verde/Rojo");//.toLowerCase(); // A
cualquier texto que ingreses lo convierte en minuscula
if (colorWeb=="Azul") {
cuerpo.style.backgroundColor="blue";
}
else if (colorWeb=="Rojo") {
cuerpo.style.backgroundColor="red";
}
else if (colorWeb=="Verde") {
cuerpo.style.backgroundColor="green";
}
else {
alert("El color no esta contemplado !!!")
}
</script>
</body>
</html>
Métodos  ej. Para cuando ingresamos el color con minúscula y no lo toma.
toLowerCase();  Convertir esa cadena de mayúscula a Toda minúscula  Azul - azul
toUpperCase();  Convertir esa cadena de minúscula a toda mayusculla  azul – Azul
Nota: Siempre lo convierte y lo guarda en minúscula toLowerCase();
ej.  var colorWeb=prompt("Introduce el color de fondo. Azul/Verde/Rojo").toLowerCase(); // A cualquier
texto que ingreses lo convierte en minúscula
Nota2: con toUpperCase(); seria lo mismo solo que a c/ if (colorWeb=="AZUL") escribir en mayuscula
Creando un calculadora básica:
typeof  Te devuelve el tipo que hay
isNan  Comprueba si lo que ingresamos en un isNan() no es un numero.
<!doctype html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>

de 39
var num1=prompt("Ingrese el primer numero: ");
var num2=prompt("Ingrese el segundo numero: ");
//alert(typeof(num1)); --> me muestra si hay un String o numero entero
var operacion=prompt("¿Que operacion quieres realizar: ");
if (operacion=="suma") {
alert(parseInt(num1)+parseInt(num2)); // parseInt --> me convierte de string a
numero entero.
}
else if (operacion=="resta") {
alert(parseInt(num1)-parseInt(num2))
}
else if (operacion=="multiplicación" || operacion=="multiplicacion") {
alert(parseInt(num1)*parseInt(num2))
}
else if (operacion=="división" || operacion=="division") {
alert(parseInt(num1)/parseInt(num2))
}
else{
alert("No contamos con esa operacion matematica")
}
</script>
</head>
<body>
</body>
</html>
Ejemlo  más complejo ---- no devuelve nada ERRORRRRRRRR (modificación del código anterior).
<script>
var num1=prompt("Ingrese el primer numero: ");
var num2=prompt("Ingrese el segundo numero: ");
//isNan si n° y n°2 NO ES UN NUMERO --> ! (Con este signo estamos afirmando que sean numeros el
numero 1 y numero 2) ! signo de la negacion.

de 39
if (!isNaN(num1) && !isNaN(num2)) {
//alert(typeof(num1)); --> me muestra si hay un String o numero entero
var operacion=prompt("¿Que operacion quieres realizar: ");
alert(parseInt(num1)+parseInt(num2)); // parseInt --> me convierte de string a
numero entero.
}
alert(parseInt(num1)-parseInt(num2));
}
else if (operacion=="multiplicación" || operacion=="multiplicacion") {
alert(parseInt(num1)*parseInt(num2));
}
else if (operacion=="división" || operacion=="division") {
alert(parseInt(num1)/parseInt(num2));
}
else{
alert("No contamos con esa operacion matematica");
}
}
else{
//Evalua el tipo de dato si es String
if (typeof(num1)=="string") || typeof((num2)=="string") {
alert("Has introducido valores numericos");
}
else{
alert("Ha ocurrido un error no identificado");
}
}
</script>

de 39
BUCLES
Ambos repiten código x veces
Determinados  Sabemos cuantas veces lo va a determinar
Indeterminados  Sin ejecutar el programa a priori no sabemos cuanto va a repetir hasta ejecutarlo y ver el
resultado.
While (Condicion){
//código a repetir mientas la condición del bucle sea cierta
}
//continuación del programa
While (Primer ejemplo)  ejemplo 15 – muestra los meses del año con un array utilizando While
!doctype html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
var meses=["Enero ", "Febrero ", "Marzo ", "Abril ", "Mayo ", "Junio ", "Julio ", "Agosto ",
"Septiembre ", "Octubre ", "Noviembre ", "Diciembre"];
var contador = 0;
while(contador<meses.length){
document.write(meses[contador] + "<br/>");
contador++;
}
</script>
</head>
<body>
</body>
</html>
Determinados Indeterminados
For While
Do While

de 39
Segundo ejemplo While
<!doctype html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#contenedor{
width: 25%;
background-color: #FFC;
margin: auto;
padding: 15px;
}
</style>
<script>
var Nombre, Edad, Pobacion;
Nombre=prompt("Introduce tu nombre por favor: ");
Edad=prompt("Introduce tu edad por favor: ");
//Niega la edad y si es asi devuelve texto introduce la edad valida
while(Edad<=0 || Edad>105){
Edad=prompt("Introduce una edad válidad");
}
Pobacion=prompt("Introduce tu poblacion por favor: ");
</script>
</head>
<body>
<div id="contenedor">
<p>Nombre: </p>
<script> document.write(Nombre);</script>
<p>Edad: </p>
<script> document.write(Edad);</script>
<p>Pobación: </p>
<script> document.write(Pobacion);</script>
</div>
</body>
</html>

de 39
Modificación del código anterior
<script>
Nombre=prompt("Introduce tu nombre por favor: "," Escribe aqui tu nombre"); // un ayuda
diciendole al usuario que ingrese el nombre --> o ," " (deja espacio en blanco)
//No permite ingresar datos numericos por el sigo !isNaN
while(!isNaN(Nombre)){
Nombre=prompt("Introduce un nombre valido");
}
Edad=prompt("Introduce tu edad por favor: ");
while(Edad<=0 || Edad>105 || isNaN(Edad)){
Edad=prompt("Introduce una edad válida");
}
Pobacion=prompt("Introduce tu poblacion por favor: ");
while(!isNaN(Pobacion)){
Pobacion=prompt("Introduce una poblacion valida");
}
</script>
</head>
<body>
<div id="contenedor">
<p>Nombre: </p>
<script> document.write(Nombre);</script>
<p>Edad: </p>
<script> document.write(Edad);</script>
<p>Pobación: </p>
<script> document.write(Pobacion);</script>
</div>

de 39
FOR
Bucle Infinito  Ejemplo
<!doctype html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
for ( ; ; ) {
alert("Augusto");
}
</script>
</head>
<body>
</body>
</html>
DO – WHILE
Modificando el While anterior por Do-While
<script>
//Nombre=prompt("Introduce tu nombre por favor: "," Escribe aqui tu nombre"); // un ayuda
diciendole al usuario que ingrese el nombre --> o ," " (deja espacio en blanco)
//No permite ingresar datos numericos por el sigo !isNaN
do{
Nombre=prompt("Introduce un nombre valido");
} while(!isNaN(Nombre));
//Edad=prompt("Introduce tu edad por favor: ");
do{
Edad=prompt("Introduce una edad válida");
} while(Edad<=0 || Edad>105 || isNaN(Edad));
//Pobacion=prompt("Introduce tu poblacion por favor: ");
do{
Pobacion=prompt("Introduce una poblacion valida");
} while(!isNaN(Pobacion));
</script>

de 39
Math  Objeto que no tiene propiedades para redondear valores numéricos …. Etc.
Math.random();  automáticamente ya trabaja de 0 a 1 con valores ej. 0,0050003
<script>
var aleatorio = Math.random(); // automaticamente tira valores de 0 a 1 ej. 0,0039393949 etc cada
vez que actualizo y en decimales.
alert(aleatorio);
</script>
Ejemplo terminado 
<!doctype html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
var aleatorio = Math.round(Math.random()*100); // automaticamente tira valores de 0 a 1 ej.
0,0039393949 etc cada vez que actualizo.
//round --> redondea un numero a entero
//alert(aleatorio);
var minum, intentos;
minum=0;
intentos=0;
do{
minum=prompt("Introduce un numero de 0 y 100");
if (aleatorio > minum) {
alert("Mas alto");
}
if (aleatorio<minum) {
alert("Más bajo");
}
intentos++;
} while(aleatorio!=minum);
alert("Correcto. Has consumido " + intentos + " intentos"); // te dice en cuantos
ntentos has adivinado,
</script>
</head>
<body>
</body>
</html>

de 39
POO  en debés de utilizar un alert utilizamos un document.write
Ejemplo modificado del código anterior. - TIENE ERRORRRRRRRRRRR
<!doctype html>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table>
<tr>
<td><label for="textfield"></label>
<input type="text" name="textfield" id="c_mensaje"></td>
<td><label for="textfield2"></label>
<input type="text" name="textfield2" id="c_intentos"></td>
</tr>
</table>
<script>
var aleatorio = Math.round(Math.random()*100); // automaticamente tira valores de 0 a 1 ej.
0,0039393949 etc cada vez que actualizo.
//round --> redondea un numero a entero
//alert(aleatorio);
var minum, intentos;
var mensaje =document.getElementById("c_mensaje");
var intentos_consumidos=document.getElementById("c_intentos");
minum=0;
intentos=0;
do{
minum=prompt("Introduce un numero de 0 y 100");
if (aleatorio > minum) {
//document.write("Mas alto" + "<br/>");
//supuestamente con document.write debe mostrar dentro del
navegador.
mensaje.value="Mas alto"; //mensaje ahora es un objeto.
mensaje.style.fontSize="18px" //Dandole tamaño a los msjs
}
if (aleatorio<minum) {
//document.write("Mas bajo" + "<br/>");
mensaje.value="Mas bajo";
}
intentos++;
intentos_consumidos.value=intentos;
intentos_consumidos.style.fontSize="18px";
intentos_consumidos.style.color="red";
intentos_consumidos.style.textAlign="center"

de 39
} while(aleatorio!=minum);
//document.write("Correcto. Has consumido " + intentos + " intentos");
mensaje.value="Correcto !";
mensaje.style.color="red"
</script>
</body>
</html>
FOR
While (inicio; condicion; incremento/decremento){
//código a repetir mientas la condición del bucle sea cierta
}
//continuación del programa
<!DOCTYPE HTML>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script >
for (var i = 0; i < 10; i++) {
//for (var i = 0; i < 20; i+=2) {
// for(var i=10;i>0; i---) {
alert("Hola");
//alert("Saludos" + i)
}
</script>
</head>
<body>
</body>
</html>
Otro ejemplo
<!doctype html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
var meses["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto",
"Septiembre", "Octubre", "Noviembre", "Diciembre"];

de 39
/*document.write(meses[0] + "<br/>");
document.write(meses[1] + "<br/>"); */ // asi con cada uno de los meses...
for (var i = 0; i < 12; i++) {
//length --> te devuelve hasta el limete de los meses
//for (var i = 0; i < meses.length; i++) {
document.write(meses[i] + "<br/>");
}
</script>
</head>
<body>
</body>
</html>
CREANDO UN FOR SIN SABER CUANTOS DATOS TENDRA  MÁS ARRAY
<!doctype html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
var trabajadores = new Array();
var persona = " ";
var contador=0;
while(persona != "salir"){
persona=prompt("Introduce trabajador");
trabajadores[contador]=persona;
contador++;
}
trabajadores.pop(); // elimina la palabra salir osea no muestra en la pagina.
for (var i = 0; i < trabajadores.length; i++) {
document.write(trabajadores[i] + "<br/>");
}
</script>
</head>
<body>
</body>
</html>

de 39
FUNCIONES
Función nombre_funcion(){
//código a ejecutar por la funcion
}
//En otro punto de la pagina web llamamos a la función
Nombre_funcion(); // Llamando la función en el body
¿Podría traerme
un café, por favor? Soy nuevo. ¿Podría
indicarme dónde está la
máquina de café?
Si. Tienes que ir a la tercera planta.
Allí caminar por el pasillo principal
20 m y veras una puerta con el
cartel “Área de descanso”. Entras y
a mano derecha veras la máquina.
Enseguida se lo
traigo
Para la próxima ya sabe
donde está ubicado
(Sabe las instrucciones)

de 39
<!doctype html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.centrado{
text-align: center;
}
</style>
<script>
function dia_de_hoy(){
var hoy = new Date();
document.write(hoy.toDateString()); // toDateString deja que la fecha sea un poco
mas corto....
}
</script>
</head>
<body>
<h1 class="centrado"> <strong> ¿Y QUÉ DÍA ES HOY !? </strong></h1>
<p> Hoy es día: <script> dia_de_hoy();</script></p>
<p>Hemo dicho que hoy es dia: <script> dia_de_hoy(); </script></p>
<p>Insistto. Hoy es dia: <script> dia_de_hoy();</script> </p> // La funcion se crea en el HEAD y se llama desde el
BODY....
</body>
</html>
¿Podría traerme
un café, por favor? Soy nuevo. ¿Podría
indicarme dónde está la
máquina de café?
Argumento o
parámetro

de 39
Argumento o parámetro de una función es algo adicional o opcional que le proporcionamos a la
función para que pueda realizar su trabajo.
función suma(num1, num2){
var resultado=num1 + num2
}
//En otro punto de la pagina web llamamos a la función
Suma(5, 7);
<!doctype html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
function escribe_nombre(nombre){
document.write(nombre)
}
//var min_nombre="Juan"
var el_nombre=prompt("Introduzca su nombre por favor: ");
</script>
</head>
<body>
<p style="font-size: 24px; font-weight:bold"> Hola. <script> escribe_nombre(el_nombre);</script>
Bienvenido a mi pagina web. </p>
<p> Esta es una web que trata de explicar la funcion parametros <script >
escribe_nombre(el_nombre)</script> podes plantear las dudas que desees. </p>
</body>
</html>
CALCULADORA ARCAICA  SIN LLAMAR DESDE EL BODY… Eso se hará en la próxima.
<doctype html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
var repetir="si";
//do{ // se podria poner mas abajo para evitar reiterar mucho....
function suma(num1, num2){
alert("La suma es: " + (num1 + num2));
}

de 39
function resta(num1, num2){
alert("La resta es: " + (num1 - num2));
}
function multiplicar(num1, num2){
alert("La multiplicación es: " + (num1 * num2));
}
function division(num1, num2){
alert("La division es: " + (num1 / num2));
}
do{ // podria ir aca esta funcion para no repertir mucho, para optimizar
recursos
var operacion = prompt("¿Que operacion quiere realizar: ");
var operador1 = parseInt(prompt("Introduce el primer numero ")); // convierte el string en
numero para sumar -- p/ restar o multiplicar o dividir no es necesario????
var operador2 = parseInt(prompt("Introduce el segundo numero "));
suma(operador1, operador2);
}
resta(operador1, operador2);
}
else if (operacion=="multiplicar") {
multiplicar(operador1, operador2);
}
else if (operacion=="division") {
division(operador1, operador2);
}
else{
alert("Operacion no contemplada");
}
repetir = prompt("¿Desea repetir?");
} while(repetir=="si")
</script>
</head>
<body>
</body>
</html>

de 39
FUNCIONES CON EVENTOS. INTROCCIÓN A EVENTOS
Ej. De eventos cuando el usuario hace clic con el botón izquierda  acción (una venta de alert) o pasar el raton
por encima de la imagen.
Desencadenantes de la acción. Permiten interactuar con la página web.
Tres niveles marcados por W3C:
DOM Nivel 1 (Modelo básico de eventos)
DOM Nivel 2 (Modelo de eventos estándar)
Modelo de eventos de Internet Explorer
EVENTO DESCRIPCION ELEMENTO PARA LOS QUE ESTA DEFINIDO
onblur Deseleccionar el elemento <button>,<input>,<label>,<select>,<textarea>,<body>
onchange Deseleccionar un elemento
que se ha modificado
<input>, <select>, <textarea>
onclick Pinchar y soltar el ratón Todos los elementos
ondblclick Pinchar dos veces seguidas
con el ratón
Todos lo elementos
onfocus Seleccionar un elemento <button>,<input>,<label>,<select>,<textarea>,<body>
onkeydown Pulsar una tecla (sin soltar) Elementos de formulario y <body>
onkeypress Pulsar una tecla Elementos de formulario y <body>
onkeyup Soltar una tecla pulsada Elementos de formulario y <body>
<DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
function aviso(){
alert("Eventos en Java Scrip!!!!!");
}
//En el Body el evento oncli="aviso()"--> no me funciono
// En el Body el evento ondblcick()="aviso()"
</script>
</head>
<body>
<img src="C:UsersXXXXXXXDesktopJscss__01Java ScripPOOImages/Monedas.jpg" width="320"
height="290" onmouseover="aviso()">
</body>
</html>

de 39
EJEMPLO DE CALCULADORA EN JAVA SCRIPT
Nota: No me está funcionando el EVENTO onClick
Este código únicamente suma 
<!doctype html>
<html>
<head>
<title>Documento sin título</title>
<style>
.numero{
width:60px;
height:60px;
}
.igual{
width:120px;
height:60px;
}
table{
margin:auto;
}
.color_display{
height:30px;
background-color:#000;
border:medium #FFF;
font: "Space Age";
color:#0F0;
font-size:18px;
text-align:right;
padding:5px;
}
</style>
<script>
var cifra = ""; //cadana de caracteres vacio.... para ir concatenando
var acumulado=0;
var sumar=false;

de 39
function display_numeros(numero){
//alert("pruba");
document.getElementId("display").value=cifra+numero; // el mas esta concatenando...
//document.getElementId("display").value=1; //--> trabajar con funciones por eso no se uso eso sino
.value=numero;
cifra=document.getElementId("display").value; // con esta linea vamos aramando ej. 52 o 5655. 999 va
concatenando en cada bucle (digamos...) RECORDEMOS QUE PARA EL ACUMULA TEXTO
}
//document.getElementId("display").value=0; // esto esta mal x que ya esta en el head... !y tiraría error ...
La solucion seria llevarlo al final del Body
function suma(){
cifra=""; // al presionar un operador matematico volver a limpiar cifra que va acumulando el display o
permite sustituir al anterior numero
//el display esta armado con input text osea acumala texto y no numero.
acumulado=acumulado+parseInt(cifra) // esta aculando numero c/vez que presiono la suma -- parseInt
ya lo convierte en numero al texto.
cifra="";
document.getElementId("display").value=acumulado;
cifra="";
sumar=true;
}
function resultado(){
if (sumar) {}
document.getElementId("display").value=acumulado+parseInt(cifra); // hace la aculación y luego
cuando presiono el signo igual devuelve el resultado...
}
//No me funciona el evento onClick ??? ---
</script>
</head>
<body>
<table width="15%" border="1">
<tr>
<td colspan="4" align="center">
<input name="display" type="text" class="color_display" id="display" size="25"></td>
</tr>

de 39
<tr>
<td width="26%"><input name="button" type="button" class="numero" id="button" value="+"
onclick="suma()"></td>
<td width="21%"><input name="button2" type="button" class="numero" id="button2" value="-"></td>
<td width="21%"><input name="button3" type="button" class="numero" id="button3" value="*" ></td>
<td width="32%"><input name="button4" type="button" class="numero" id="button4" value="/" ></td>
</tr>
<tr>
<td><input name="num7" type="button" class="numero" id="num7" value="7"
onClick="display_numeros(7)"></td>
<td> </td>
</tr>
<tr>
onClick="display_numeros(4)" ></td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
onclick="display_numeros(0)"></td>
<td><input name="button17" type="button" class="numero" id="button17" value=","></td>
<td colspan="2"><input name="button12" type="button" class="igual" id="button12" value="="
onclick="resultado" ></td>
</tr>
</table>
<script>
document.getElementId("display").value=0; // aca si funcionaria bien este codigo --- la calculadora siempre
mantendria 0 al actualizar el navegador.
</script>
</body>
</html>

de 39
CODIGO MODIFICADO DEL ANTERIOR  (SUMA Y RESTA)  LAS OTEAS OPERACIONES LO HACE EL
QUE QUIERA.
</style>
<script>
var cifra = ""; //cadana de caracteres vacio.... para ir concatenando
var acumulado=0;
var sumar=false;
var restar=false;
var p_operacion=true;
function display_numeros(numero){
//alert("pruba");
document.getElementId("display").value=cifra+numero; // el mas esta
concatenando...
//document.getElementId("display").value=1; //--> trabajar con funciones por eso
no se uso eso sino .value=numero;
cifra=document.getElementId("display").value; // con esta linea vamos aramando
ej. 52 o 5655. 999 va concatenando en cada bucle (digamos...) RECORDEMOS QUE PARA EL ACUMULA
TEXTO
}
//document.getElementId("display").value=0; // esto esta mal x que ya esta en el
head... !y tiraría error ... La solucion seria llevarlo al final del Body
function suma(){
if (p_operacion==false) {
}
if (restar) {
acumulado=acumulado-parseInt(cifra);
} else {

de 39
//cifra=""; // al presionar un operador matematico volver a limpiar cifra que va
acumulando el display o permite sustituir al anterior numero
//el display esta armado con input text osea acumala texto y no numero.
acumulado=acumulado+parseInt(cifra) // esta aculando numero c/vez que
presiono la suma -- parseInt ya lo convierte en numero al texto.
//cifra="";
}
} else{
acumulado=parseInt(cifra);
p_operacion=false;
}
cifra="";
sumar=true;
p_operacion=false;
}
function resta(){
if (sumar) {
acumulado=acumulado+parseInt(cifra);
} else{
acumulado=acumulado-parseInt(cifra);
}
cifra="";
sumar=false;
restar=true;
}
function resultado(){
if (sumar) {

de 39
document.getElementId("display").value=acumulado+parseInt(cifra); // hace la
aculación y luego cuando presiono el signo igual devuelve el resultado...
} else if (restar) {
document.getElementId("display").value=acumulado-parseInt(cifra);
}
aculando=parseInt(document.getElementId("display").value);
cifra=0;
}
//No me funciona el evento onClick ??? ---
</script>
</head>
<body>
<table width="15%" border="1">
<tr>
<td colspan="4" align="center">
<input name="display" type="text" class="color_display" id="display" size="25"></td>
</tr>
<tr>
<td width="26%"><input name="button" type="button" class="numero" id="button" value="+"
onclick="suma()"></td>
<td width="21%"><input name="button2" type="button" class="numero" id="button2" value="-"
onclick="resta()"></td>
<td width="21%"><input name="button3" type="button" class="numero" id="button3" value="*"
></td>
<td width="32%"><input name="button4" type="button" class="numero" id="button4" value="/"
></td>
</tr>
<tr>

de 39
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
onclick="display_numeros(0)"></td>
<td><input name="button17" type="button" class="numero" id="button17" value=","></td>
<td colspan="2"><input name="button12" type="button" class="igual" id="button12" value="="
onclick="resultado" ></td>
</tr>
</table>
<script>
document.getElementId("display").value=0; // aca si funcionaria bien este codigo --- la calculadora
siempre mantendria 0 al actualizar el navegador.
</script>

01 introduccion a java script

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a 01 introduccion a java script

Similar a 01 introduccion a java script (20)

Más de Don Augusto

Más de Don Augusto (20)

Último

Último (20)

01 introduccion a java script