HASTA AHORA

• Introducción a HTML
• Estándares y conceptos WEB
• Estilos básicos con CSS
• Novedades de HTML5
• Formularios

HOY

• DOM

• Javascript

SOBRE JAVASCRIPT

• Desarrollado en Netscape por Brendan Eich

• Script del lado del cliente

• Interpretado por el navegador

• Se usa para acceder y modificar el DOM

Y NO ES JAVA!

DOM

Document object model

• Interfaz de programación 
• Grupo de nodos y objetos 
• Cross-platform
• Independiente del lenguaje

Java vs. Javascript

1. Java es un lenguaje de programación orientado a objetos
2. Javascript es un lenguaje de scripting basado en objetos 

La aclaración de siempre..

JS en HTML

Externo

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

Interno

<script type="text/javascript">
   
    // Declaraciones aqui

</script>

Declaraciones y variables

• Cada instrucción es una declaración
• En las variables se guardan valores

Tipos primitivos

• Numeros - Whole o float
• Strings
• Boolean - True o False
• Undefined
• Null - Explicitamente vacio

Declarando variables

var miNumero,
    miString,
    otroNumero = 25,
    otraString = 'Hola Mundo!'; 


miString = 'Hola todos!';

Variables

• Empiezan con: letras, $, _
• Contienen solamente: letras, números,$,_
• Sensibles a las mayus
• Convenciones para nombrar
• Almacenan valores y expresiones
• Con Typeof podemos saber el tipo de variable

FAVOR PULSAR F12

o Ctrl + shift + j

Comentarios

/* a multi-line
   comment
   oh yeah */


// a single line comment 

x = 3;
y = x * 3; // a single line comment after a statement!

Operadores

++

--

-

+

*

/

%

Funciones

Son una colección de declaraciones, y hay varias formas de declarar ellos (vamos a entrar en por qué la próxima vez)

function myFunction() {
  // my statements run here
  console.log('my first function!');
}

myFunction(); 

var myFunction = function(){
    // my statements run here
    console.log('my first function!'); 
};

myFunction();

Funciones

• Argumentos
• Retorna valores
• Scope de la función
• Funciones dentro de funciones

Write, alert, promt

document.write('this will be written to screen');

alert('this will pop up an alert');

prompt('this will ask the user for a prompt and return the value'); 

Tip: Para el ejercicio de hoy

var myElement = getElementByID('my-element-id');

myElement.innerHTML = "whatever HTML I want to assign";

ACTIVIDAD

1. Crear un documento HTML
   • Titulo
   • Nombre
   • Contenido
2. Asignar ID's a cada uno de los elementos
3. Hacer un script interno con Javascript
   • Preguntar por un valor al usuario
   • Insertar los valores en HTML