INTRODUCCIÓN A JAVASCRIPT

@juliocesar_io

4 Junio 2015

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


Made with Slides.com