domingo, 16 de octubre de 2016


[2016-11-10]

CLASE 32:

Explicación prompt:

Sintaxis de javascript, captura información del Usuario. Toda la información que captura es cadena.

La función prompt se utiliza para la entrada de datos por teclado. 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 inicial a mostrar.

TOMADO DE:
http://www.tutorialesprogramacionya.com/javascriptya/temarios/descripcion.php?cod=4&inicio=

EJEMPLO:

<html>
<head></head>
<script>

var a=parseInt(prompt("Digite el primer número"));
var b=parseInt(prompt("Digite el segundo número"));
alert(parseInt(a)+parseInt(b));

</script>
<body></body>

</html>

Traducción de Algoritmo a javascript:



EJERCICIOS:

2) Programa que visualice 10 líneas horizontales: Utilizando un código de 2 líneas.

<html>
<head></head>
<script>
for(i=1;i<=10;i++){
document.write(i+"<hr>");
}

</script>
<body></body>

</html>

Otra forma de enumerar las líneas:

for(i=10;i<=100;i+=10){

3) Leer dos notas y decir si paso o no la materia pero agregando el nombre del estudiante.

<html>
<head></head>
<script>
var nombre=prompt("Digite su nombre");
var nota1=parseFloat(prompt("nota1"));
var nota2=parseFloat(prompt("nota2"));

var def=(nota1+nota2)/2;
if (def>=75){
alert(nombre+ "paso");
}
else{
alert(nombre+ "no paso");

}

</script>
<body></body>

</html>

4) El anterior ejercicio pero con ciclo for:

<html>
<head></head>
<script>

for(i=1;i<=5;i++){
var nombre=prompt("Digite su nombre estudiante No."+i);
var nota1=parseFloat(prompt("nota1"));
var nota2=parseFloat(prompt("nota2"));

var def=(nota1+nota2)/2;
if (def>=75){
alert(nombre+ "paso");
}
else{
alert(nombre+ "no paso");

}
}
</script>
<body></body>

</html>

Se realizó evaluación del Segundo Indicador:

<html>
<head></head>
<script>

 var a=prompt("digite un numero");

if (a<0){

a=a*-1;
document.write(Math.sqrt(a)+ "Raiz imaginaria <br>");
else{

document.write(Math.sqrt(a)+ " <br>");
}

</script>
<body></body>
</html>

domingo, 9 de octubre de 2016


[2016-04-10]

CLASE 31:

EXPLICACIÓN FUNCIONES MATEMÁTICAS.

Redondear:

Redondear un valor:

1 var redondea = Math.round(9.45);
2 alert("Valor redondeado 9.45= "+redondea);

Redondear un número al entero más cercano:

1 redondea = Math.ceil(9.01);

2 alert("Valor ceil 9.01= "+redondea);

Calcular el Coseno de un número

1 var coseno = Math.cos(30);
2 alert("El coseno de 30 = "+coseno);
// // Coseno

Raíz cuadrada
1 var raizCuadrara = Math.sqrt(9);
2 alert(raizCuadrara);


EJERCICIO DE RAÍZ CUADRADA:

<html>
<head>
</head>
<script>

x=-9;
if(x<0){
x=x*-1;
document.write(Math.sqrt(x)+ "raiz imaginaria <br>");
}
else{
document.write(Math.sqrt(x)+"<br>");
}
</script>
<body></body>
</html>


IMPORTANTE: Cuando se va a redondear un número, hay que tener en cuenta que su decimal se mayor o igual a 5 si cumple con esta condición, aumenta en uno su número entero.

NOTA: Algunos ejercicios no son posibles ejecutarlos en distintos navegadores, hay que tener en cuenta la versión del navegador y para obtener HTML5 es necesario actualizar su navegador.

Funciones Útiles para Cadenas de Texto:

substring(inicio, final):

Extrae una porción de una cadena de texto.

El segundo parámetro es opcional. Si sólo se indica el parámetro inicio, la función devuelve la parte de la cadena original correspondiente desde esa posición hasta el final:

var mensaje = "Hola Mundo";
var porcion = mensaje.substring(2); // porcion = "la Mundo"
porcion = mensaje.substring(5);     // porcion = "Mundo"
porcion = mensaje.substring(7);     // porcion = "ndo"

Si se indica un inicio negativo, se devuelve la misma cadena original:

var mensaje = "Hola Mundo";
var porcion = mensaje.substring(-2); // porcion = "Hola Mundo"

la posición inicio está incluida y la posición final no y se asigna el valor más pequeño al inicio y el más grande al final.

NOTA:

En el substring se colocan dos valores, ejemplo: substring(5,5); para sustraer una porción de un mensaje pero el primer valor que se asigna es el de la Posición Inicial y el Segundo es para determinar cuantos valores se imprimen o se llevan.

Los espacios se empiezan a contar desde 0.

toUpperCase(), transforma todos los caracteres de la cadena a sus correspondientes caracteres en mayúsculas:
var mensaje1 = "Hola";
var mensaje2 = mensaje1.toUpperCase(); // mensaje2 = "HOLA"
TOMADO DE:

 Símbolos:

++ , aumenta en 1, los dos signos + van seguidos sin ningún espacio en blanco.

  • a= a+1 = a++
  • a= a-1  = a--
  • a= a+10 = a+=10
  • a= a-10= a-=10
EJERCICIO:

<html>

<head>
</head>

<script>
a=10;
a=a+1;
document.write(a + "<br>");
a++;
document.write(a + "<br>");
a=a-1;
document.write(a + "<br>");
a--;
document.write(a + "<br>");
a+=10;
document.write(a + "<br>");
a-=60;
document.write(a + "<br>");
</script>

<body></body>
</html>


EJERCICIO DE ARRAY: (Vector)

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio 3 - Arrays simples</title>
<script type="text/javascript">
// Array que almacena los 12 meses del año

var meses = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];

// Se muestra el nombre de cada mes
alert(meses[0]);
alert(meses[1]);
alert(meses[2]);
alert(meses[3]);
alert(meses[4]);
alert(meses[5]);
alert(meses[6]);
alert(meses[7]);
alert(meses[8]);
alert(meses[9]);
alert(meses[10]);
alert(meses[11]);
</script>
</head>

<body>
<p>Esta página muestra los 12 meses del año</p>
</body>
</html>




martes, 27 de septiembre de 2016


[2016-27-09]

CLASE 30:

Continuación Tema JavaScript:
Se realiza la Evaluación Primer Indicador.

OPERADORES ARITMÉTICOS:

Asignar un valor a una variable:

 Operador de Asignación:   =  (igual)
  • Suma(+):Sumar dos valores numéricos. Concatenar cadenas entre sí o números y cadenas.
  • Resta(-):Restar valores numéricos. Puede actuar sobre un único operando numérico cambiándole de signo.  
  • Producto(*) Y Cociente(/): Multiplica(*) y divide(/) dos valores numéricos.
  • Resto(%): Operador Modulo, calcula el resto o residuo de una división.
  • Incremento(++) y Decremento(--): Incrementar (aumentar) o Decrementar (disminuir) en 1 el valor de una variable.
Si el Operador se antepone a la variable, la operación de Incremento o Decremento es prioritaria sobre cualquier otra.
  • Operadores Compuestos: (+,-,*,/): Pueden asociarse con el Operador de asignación. Cambian el valor de una variable; Incrementándola, Decrementándola, Multiplicándola y Dividiéndolo por un valor.
Operador += : Variables de cadena.


IMPORTANTE:

En la multiplicación de este lenguaje no se utiliza el símbolo X ni en la División se utiliza el símbolo  %.

Ejemplo:

a=10;

b=20;
c=a+b;
c=a-b;
c=a*b;
c=a/b;

Si en algún caso el valor de b es 0, ocurre en la división un error matemático.Este error se puede anteceder con un IF o Condicional.

EJEMPLO:

<html>

<head>
<title>condicional</title>
</head>
<script>
var a=10;
var b=20;
c=a+b;
document.write(c+ "<br>");
c=a-b;
document.write(c+ "<br>");
c=a*b;
document.write(c+ "<br>");
if(b==0){
document.write("Error matematico");
}
else{
c=a/b;
document.write(c+ "<br>");
}
</script>
<body>
</body>
</html>

Para incorporar una imagen al código JavaScript se realiza con el mismo código de HTML:

<'img src="ruta_de_la_imagen" '>

EJEMPLO: (Utilizando una imagen)

<html>

<head>
<title>condicional</title>
</head>
<script>
var a=10;
var b=0;
c=a+b;
document.write(c+ "<br>");
c=a-b;
document.write(c+ "<br>");
c=a*b;
document.write(c+ "<br>");
if(b==0){
document.write('<img src="lobito(2).gif">');
}
else{
c=a/b;
document.write(c+ "<br>");
}
</script>
<body>
</body>
</html>


OPERADORES COMPARATIVOS Y LÓGICOS:


OPERATOR
DESCRIPTION
==
Equal to
===
Equal value and equal type
!=
Not equal
!==
Not equal value or Not equal type
> 
Greater than
< 
Less than
>=
Greater than or equal to
<=
?
Less than or equal to
Ternary operator


IMPORTANTE:

== : Significan Igual a Y Deben ir Unidos sin nada de espacios entre los dos iguales.
Utilizar siempre minúsculas nada de Mayúsculas.

viernes, 23 de septiembre de 2016


[2016-20-09]

CLASE 29:

Se inicia CUARTO BIMESTRE, Inicio de Tema: JavaScript.

Cronograma de Actividades Cuarto Bimestre:



JAVASCRIPT:


Lenguaje de Programación que es de forma DINÁMICA (dinamismo), no necesita de un programa especial para ser ejecutado o un interprete específico.

Puede ir ubicado en diferentes lugares de la estructura de un documento ya sea dentro del <head></head> o antes del <body></body>.

la Sintaxis de javascript es Minúscula.

El documento de javasript empieza con la etiqueta: <script></script>.

Para visualizar información en una caja de Texto, se utiliza la etiqueta:<alert>
alert("Hola");

Visualización de Información en la Página Web, se utiliza: document.write. Este permite combinar HTML y javascript.

Diferencia entre <alert> y document.write: Se basa en que <alert> No interpreta código lo que realiza es la visualización de un código ejecutado mas document.write si interpreta código y lo ejecuta.

front-end: Es el diseño en Pantalla a los clientes.

back-end: Es la parte de diseño que pertenece al Programador.

COMENTARIOS: 

Los comentarios son partes del programa que el intérprete no lee y que, por tanto, sirven para explicar y aclarar. Van comprendidos entre barras y asteriscos como en el ejemplo siguiente:

/*comentario*/: Comentario para Varias Lineas.

El comentario puede constar de más de una línea o de una sola.

Otro tipo de comentario es la barra doble, es válida sólo para comentarios de una sola línea aunque no la ocupen por entero:

ent x: //comentario : Comentario para una sola Línea.


NOTA:
Los comentarios Javascript no pueden insertarse fuera de las marcas que individuan el script, ya que, en caso contrario, HTML los considera parte del texto. Y viceversa: no se pueden usar las marcas de comentarios HTML dentro del script. 
       

IMPORTANTE: Si se empieza utilizando comillas " (dobles), las Internas deben ir simples (').

javascript es muy DIFERENTE del lenguaje llamado java.

VARIABLES:

  • Númericas: Permiten realizar cálculos/operaciones.(+,-,*,%)(suma, resta, multiplicación,división).
  • Cadena: (" "/' ') Permiten unir o catenar.Cuando se utilizan las comillas se genera una cadena.
Para definir variables utilizamos var:

EJEMPLO:

var a=10;
var b=20;
var c=a+b;

alert("la respuesta es:..."+c);

Se realizó un ejercicio práctico de clase: 


<html>
<meta charset="utf-8"/>
<head>
<title>practica Jv</title>
</head>
<script>

document.write("<hr>");
document.write("<center> Maria Fernanda Garcia Chaparro </center>"); 
document.write("<hr>");
document.write("<center><font color=blue>15 </font></center>");
document.write("<hr>");
document.write("<marquee behavior=alternate width=60%>Colegio Integrado Nuestra señora Del Divino Amor</marquee>")
</script>

<body>
   hola
</body>
</html>

lunes, 19 de septiembre de 2016


[2016-13-09]

Receso Escolar.

Receso Escolar; Semana de Ferias de Bucaramanga.


Función: alert() / confirm() / prompt() en JavaScript
USO:
alert(mensaje);
var resultado = confirm(mensaje);
var resultado = prompt(mensaje, valor);

Con estos métodos (objeto window) mostraremos ventanas modales al usuario.
Con alert() simplemente, mostraremos un mensaje. Con confirm() haremos exactamente lo mismo, pero además obligará al usuario a seleccionar entre dos opciones, una positiva y otra negativa, que se devolverá como parámetro (boolean). Y con prompt() pediremos al usuario que introduzca un texto en una ventana modal.

Ejemplo:
// Pedimos al usuario que introduzca su nombre
var nombre = prompt(“Introduzca su nombre”);
// Pedimos confirmación
if (confirm(“¿Seguro que su nombre es ”+nombre+”?”)) {
// Respuesta afirmativa...
alert(“Hola ”+nombre);
}

confirm() es muy útil para confirmar clics en enlaces comprometidos, que hagan operaciones críticas como eliminación de datos.

<a href=”http://miweb.com/delete/record?id=123” onclick=”return confirm('¿Está seguro?');”>Eliminar registro</a>

Existen librerías Javascript como jQuery.

Internet Explorer no cumple el estándar ECMAScript/DOM (entre otros tantos estándares web), y puede que un método no funcione igual en IE que en Firefox o Safari.


TOMADO DE: 


domingo, 11 de septiembre de 2016


[2016-06-09]

CLASE 28:

Se Dieron a conocer las Notas Finales correspondientes al Tercer Bimestre y se realizaron las correcciones por parte de los estudiantes y el Docente, se realizan los acuerdos planteados en clases anteriores, se finaliza el Tercer Bimestre y se da la explicación de la metodología que se manejará en el  Cuarto Bimestre.


Mi Nota Definitiva Tercer Bimestre = 100.


JAVASCRIPT

Es un lenguaje de programación,  se utiliza principalmente del lado del cliente (es decir, se ejecuta en nuestro ordenador, no en el servidor) permitiendo crear efectos atractivos y dinámicos en las páginas web. Los navegadores modernos interpretan el código JavaScript integrado en las páginas web. JavaScript al estar alojado en el ordenador del usuario los efectos son muy rápidos y dinámicos, permite toda la potencia de la programación como uso de variables, condicionales, bucles, etc.

El uso de JavaScript es muy habitual en la programación web.

Diferencia entre HTML y JavaScript:

El código HTML se encarga de que en la pantalla se muestre algo, por ejemplo una imagen, un menú, etc. El código JavaScript se puede encargar de crear efectos dinámicos en respuesta a acciones del usuario, por ejemplo que se despliegue un menú tipo acordeón cuando el usuario pasa el ratón por encima de un elemento del menú.

TOMADO DE:

El código JavaScript podemos encontrarlo dentro de las etiquetas <body></body> de nuestras páginas web. Por lo general se insertan entre: <script></script>. También pueden estar ubicados en ficheros externos usando:

<script type="text/javascript" src="micodigo.js"></script>

Algunas características del lenguaje son:

Su sintaxis es similar a la usada en Java y C, al ser un lenguaje del lado del cliente este es interpretado por el navegador:

Variables:  var = “Hola”, n=103

Condiciones: if(i<10){ … }

Ciclos: for(i; i<10; i++){ … }

Arreglos: var miArreglo = new Array(“12”, “77”, “5”)

Funciones: Propias del lenguaje y predefinidas por los usuarios.

Comentarios para una sola línea: // Comentarios
Comentarios para varias lineas:
/*
Comentarios
*/

Permite la programación orientada a objetos: document.write("Hola");

Las variables pueden ser definidas como: string, integer, flota, bolean simplemente utilizando “var”. Podemos usar “+” para concatenar cadenas y variables.

TOMADO DE:  


domingo, 4 de septiembre de 2016



[2016-30-08]

CLASE 27:

Se Realizó el Acumulativo correspondiente al Tercer Bimestre, el cual tenía como base el proyecto que los estudiantes desarrollaron en clases pasadas y comprendía temas como Manejo de Tablas, HTML básico etc.

Exenta del Acumulativo.
NOTA= 100


Código (HTML) del Proyecto: Simulación de una Página Web.

<html>
<head>
<title>comex</title>
</head>
<body>

<table width="79%"align="center">
<tr>
<td><img src="imagenes/logo.jpg"></td>
</tr>
</table>
&nbsp
&nbsp

<table width="73%"valign="middle"align="center">
<tr>
<td align="center"valign="middle"><img src="imagenes/cabecera.jpg"></td>
</tr>
</table>

<br></br>
<br></br>

<table width="73%" valign="middle"align="center">

<tr>
<td><img src="imagenes/pintura.jpg"></td>
<td><img src="imagenes/segunda_pintura.jpg"></td>
<td align="rigth"><img src="imagenes/tercera_pintura.jpg"></td>
</tr>

<tr>
<td><pre><font color="sky blue"type="arial"size="4">&nbsp;&nbsp;Kontextura M</font>
<font color="grey"type="calibri"size="3">Ideal para crear acabados texturizados 
con grano medio, dejando la superficie
rallada.</font></pre></td>


<td><pre><font color="sky blue"type="arial"size="4">&nbsp;&nbsp;Kontextura R</font>
<font color="grey"type="calibri"size="3">Ideal para crear acabados texturizados 
con grano grueso, obteniendo texturas 
profundas y pronunciadas.</font></pre></td>

<td><pre><font color="sky blue"type="arial"size="4">&nbsp;&nbsp;Kontextura SG</font>
<font color="grey"type="calibri"size="3">Ideal para eliminar texturas antiguas,
obteniendo acabados sin grano. 
Versatilidad para crear texturas 
discretas.</font></pre></td>
</tr>

</table>
<br></br>

<br></br>

<table width="73%" valign="middle"align="center">

<tr>
<td><a href="http://maria2201garcia.blogspot.com.co/"target="blank"title="mirar blog de maria garcia">maria fernanda garcia chaparro</a></td>
<td rowspan="2"align="rigth"width="20%"><img src="imagenes/logo.jpg"></td>
</tr>

<tr>
<td><a href="http://saramejiao.blogspot.com.co/"target="blank"title="mirar blog de sara mejia">sara sofia mejia ortiz</td>
</tr>


Página original:  
http://www.comex.com.mx/CATALOGUE/Catalogue/Texturizados/Kontextura.aspx


NOTA: Deben estar guardadas las imágenes para poder abrirlas en la simulación de la Página (Código).


Imágenes:

Nombre de la imagen: cabecera.jpg




 imagen: logo.jpg



 imagen: pintura.jpg 


imagen: segunda_pintura.jpg


imagen: tercera_pintura.jpg



TOMADO DE: 
http://www.comex.com.mx/CATALOGUE/Catalogue/Texturizados/Kontextura.aspx