HTML, CSS, JAVASCRIPT: octubre 2016

miércoles, 12 de octubre de 2016

03 Javascript Bucles y Condicionales

En este video muestro como se realizan repeticiones y condicionales con Javascript, usando IF, FOR, WHILE, DO WHILE y SWITCH.
Podeis ver el video aqui.

Entre las etiquetas script va el codigo de ejemplo. Os pongo el codigo aqui:

<!doctype html>
<html lang="ES">
<head>
<title>
Condicionales y bucles - JavaScript
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Titulo Principal</h1>
<h2>Titulo Secundario</h2>
</hgroup>
<p>Parrafos</p>
<script>
//Condicional IF
var num1=7;
var num2=10;
if(num1<num2){
    alert("Numero 1 es menor que Numero 2");
} else if (num1>num2){
    alert("Numero 1 es mayor que Numero 2");
}
//Switch
switch(num1){
    case 1:
        document.write("La var num1 es 1 en el switch");
        break;
    case 7:
            document.write("La var num1 es 7 en el switch");
        break;
    default:
        break;
}

//repeticion FOR
document.write("<br>Bucle For<br>");
for(i=1;i<=20;i++){

    document.write(i+"<br>");
}
//repeticion While
document.write("<br>Bucle While<br>");
var i=0;
while(i<=15){
document.write(i+"<br>");
i++;
}
var i=0;
//repeticion Do While
document.write("<br>Bucle DoWhile<br>");
do{
document.write(i+"<br>");
i++;
} while(i<=5);
</script>
</article>
</section>
<aside>
</aside>
<footer>
<h4>Pie de pagina</h4>
</footer>

</body>
</html>

martes, 4 de octubre de 2016

02 Javascript Variables y operadores

Introduccion sobre variables y operadores javascript:

Declaramos una variable usando la palabra reservada var, le damos un valor y la imprimimos en el documento web, todo mediante este codigo encerrado entre las etiquetas script (dentro del html):

<!doctype html>
<html lang="ES">
<head>
<link rel="stylesheet" type="text/css" href="css/display.css">
<title>
Variables
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1></h1>
<h2></h2>
</hgroup>
<script>
var x=16;
document.write(x);
</script>
</article>
</section>
<aside>
</aside>
<footer>
<h4>Pie de pagina</h4>
</footer>
</body>
</html>

Si quisieramos imprimir comillas u otros caracteres especiales dentro del documento, tendremos que usar escapes como la "\", por ejemplo: document.write("\"Hola\""); de esta forma imprime "Hola" con las comillas.
Los operadores que podemos manejar son:
Primitivos + - * / %

var x=10+6;//x vale 16
document.write(x);
var x=26%6; //modulo, valor de x es 2 que es el resto

Incremento / decremento

var a=0;
var b=10;
var a =b++;//a vale 10 en este se incrementa despues
var a=++b;//a vale 11 en este se incrementa antes

//igual ocurre en decremento b-- y --b PROBARLO

Asignacion

var a=0;
var b=12;
a=b;//ahora a es 12
a+=b;//equivale a a=a+b
a-=b;//equivale a a=a-b

Comparacion

//lo veremos con detalle en bucles y condicionales
a==b; a===b; a!=b; a!==b; a>b; a<b; a>=b; a<=b;

Logicos

(4<2)&&(10<15); // daria False por que no se cumplen las 2 condiciones
&& //operador and, se tienen que cumplir las 2 condiciones
|| operador or, se tienen que cumplir una condicion

Ternario

variable(condicion)?valor1:valor2;
var Mayor(edad<18)?"Es menor":"Es mayor";

Todos los operadores los iremos viendo conforme avancemos con el codigo, ahora nos vale con conocerlos y ver de que disponemos.
Espero os sea util, gracias.

domingo, 2 de octubre de 2016

01 Javascript Toma de contacto

En este video se muestra como empezar con Javascript, mostrando mensajes en HTML de manera sencilla.
El codigo se puede realizar con cualquier editor de texto.

El codigo javascript lo insertamos dentro del documento HTML, abriendo y cerrando con la etiqueta "script".
Los comentarios van con // si es una linea o /* */ si son varias lineas, esto nos sirve para insertar texto que no se tendra en cuenta en la ejecucion y nos puede valer para indicar que hacemos en el codigo, para facilitar su comprension si se ve tiempo despues o si lo ven otras personas con las que colaboramos para que entiendan el codigo con mayor facilidad.
Lo siguiente que expongo en este primer contacto es como insertar texto dentro del documento HTML, con "document.write("texto");", donde podremos insertar etiquetas HTML, tal y como hacemos insertando un titulo H1.

<script>
//comentario de una linea
/*comentario de varias lineas
*/
document.write("Hola, bienvenidos a JavaScript");
document.write("<h1>Mensaje con formato</h1>");
alert("Ventana javascript");
</script>

El codigo completo del archivo HTML seria asi:

<!doctype html>
<html lang="ES">
<head>
<title>
Toma de contacto - JavaScript
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Titulo Principal</h1>
<h2>Titulo Secundario</h2>
</hgroup>
<p>Parrafos</p>
<script>
//comentario de una linea
/*comentario de varias lineas
*/
document.write("Hola, bienvenidos a JavaScript");
document.write("<h1>Mensaje con formato</h1>");
alert("Ventana javascript");</script>
</article>
</section>
<aside>
</aside>
<footer>
<h4>Pie de pagina</h4>
</footer>

</body>
</html>

Espero os sea util, gracias.