Javascript 101

Red de Investigaciones de
Tecnología Avanzada
Universidad Distrital Francisco José de Caldas

Javascript 101
● Historia
● Características
● Motores
● Aplicaciones
● Herramientas
● Sintaxis
● Tipos de datos
● Operadores
● Control de flujo
○ Condiciones
○ Bucles
● Funciones
○ Callbacks
○ Closures
○ Scope
● DOM (Document Object Model)
● Eventos
● jQuery

Historia
Brendan Eich
LiveScript
JavaScript
ECMA International
1995
1997
ECMAScript

Características
● Lenguaje de interpretado
● Débilmente tipado
● Multiparadigma
● Cuenta con funciones first-class
● Basado en prototipos

Motores
Gecko Webkit
WebkitPresto

Sintaxis (I)
● Sensible a Mayúsculas y minúsculas
● Cada instrucción termina con ;
● Los bloques de código están delimitados por { }
● Comentarios para múltiples líneas /* */
● Comentario de una línea //

<!DOCTYPE html>
<html>
<head>
<script src="script1.js"></script>
<script> // código </script>
</head>
<body>
<script src="script2.js"></script>
</body>
</html>
Sintaxis (II)
--------------------
------------
---------------------
--------------------
----------------------
------------------------
---------------------
---------
script1.js

Tipos de datos (I)
Números
Especiales
Float
Integer var a = 10
var b =
-10.6
var c = 10/0
//Infinity
var d = Math.sqrt(-1) //NaN Not a Number
var a = 10
var b = -10.6
var c = 10/0 //Infinity
Strings var cadena = “Hola Mundo” var cadena = ‘Hola mundo’
typeof [variable] ;
Retorna el tipo de dato
de la variable.
Object
var persona = {
nombre: "Javier",
apellido: "Bautista",
};

Tipos de datos (II)
Boolean
true
false
null var e = null;
undefined var e; //undefined
Arreglos
var a = [];
var c = [‘Javascript’, 1, true];
var f = c.length; //Tamaño del arreglo
var g = c.pop(); //Elimina el último elemento
var h = c.push(10.5); //Agrega elemento al final
var j = c.shift(); //ELimina primer elemento
Definición
Operaciones

Operadores => Relacionales
Operadores => Aritméticos
+
-
*
**
/
%
var a = -2
var b = 3
console.log(a+b);
console.log(a-b);
console.log(a*b);
console.log(a**b);
console.log(a/b);
console.log(a%b);
==
!=
<
<=
>
>=
var a = -2
var b = 3
console.log(a==b);
console.log(a!=b);
console.log(a<b);
console.log(a<=b);
console.log(a>b);
console.log(a>=b);

Operadores => Asignación
Operadores => Lógicos
=
+=
-=
var i = 0
var j = 10
while(i != j){
i+=1
j-=1
console.log(‘i = ’+i)
console.log(‘j = ’ + j)
}
&&
||
!
var a = true
var b = false
if(a && b){
console.log(“No”);
}
if(a || b){
console.log(“Ok”);
}
if(!b){
console.log(“No”);
}

Control de flujo -> Condiciones
if([condición]){
[sentencia]
}
else{
[sentencia]
}
var a = 23;
var b = 10;
if(a < b){
console.log(a + ”es menor que” + b)
}
else{
console.log(a + ”es mayor que” + b)
}
switch(variable){
case 1:
[sentencia]
break;
case 2:
[sentencia]
break;
.
.
default:
[sentencia]
}
var opcion = 2;
switch(opcion){
case 1:
console.log(‘Opción 1 elegida’);
case 2:
console.log(‘Opción 2 elegida’);
default:
console.log(‘Opción no válida’);
break;
}

Control de flujo -> Bucles
for(var i=0;i<=10;i++){
console.log(i);
}
var cont = 0
while(cont <= 10){
console.log(cont);
cont++;
}
var cont = 10;
do{
console.log(cont);
}while(--cont>=0);

DOM -> Document Object Model (I)
<!DOCTYPE html>
<html>
<head>
<title>MY TITLE</title>
</head>
<body>
<div>
<h1></h1>
<p>
<a></a>
</p>
</div>
</body>
</html>

DOM -> Document Object Model (II)
Acceso a nodos
getElementsByTagName()
getElementsByName()
getElementsById()
var elements = document.getElementsByTagName(‘div’);
var elements = document.getElementsByName(‘nombre’);
var elements = document.getElementsById(‘logo’);

DOM -> Document Object Model (III)
Otras acciones
createElement(etiqueta)
createTextNode(contenido)
appendChild(nodo)
var label = document.createElement(‘label’);
var contenido = document.createTextNode(“Hola mundo”);
label.appendChild(contenido);
document.body.appendChild(label);
querySelector(selector) var element = document.querySelector(‘form .nombre’);

Eventos
onclick
onkeypress
onfocus
onload
onkeydown
onmouseover
Ejercicio: Colores
var label = document.querySelectorAll(‘label’);
label.onclick = function(){console.log(‘Click en label’)};

Funciones
var nombreFuncion = function(param1, param2){
[sentencia];
[sentencia];
return valor;
}
Funciones -> Callback
function miFuncion (param1, callback){
[sentencia]
callback();
}
miFuncion(‘arg1’, function(){
[sentencia]
});
function miFuncion (param1, callback){
var nombre = ‘Sandra’;
callback();
}
miFuncion(‘Javier’, function(){
console.log(‘Hola por segunda vez’ +
nombre);
});

Scope
function sumar(a,b) {
var suma = a + b;
}
sumar(1,2);
console.log(suma);
var suma = 0;
function sumar(a,b){
suma = a + b
}
sumar(1,2);
console.log(suma);
function sumar(a,b){
suma = a + b;
}
sumar(1,2);
console.log(suma);
(I)
(II)
(II)

Funciones -> Closures y funciones anónimas
function iniciarSaludo(){
var nombre = “Dany”;
function saludar(){
console.log(nombre);
}
saludar();
}
iniciarSaludo();
function addHandler(){
var clickHandler = function(){
this.style.background = ‘red’;
};
(function(){
var elemento = document.getElementById(‘el’);
elemento.onclick = clickHandler;
})();
}
(I) (II)

jQuery
$("#boton").on("click",function(){
$(".cuadro").show();
});
$.ajax({
url: "/datos/archivo.php",
method: ‘POST’,
data: {
nombre: $(".nombre").val()
},
success: function(data) {
$("#temporal").html("<span>"+data+"</span>");
}
});
Ejercicio 1: Colores
Ejercicio 2: Google maps
Ejercicio 3: Send Data (AJAX)

Ejercicio: Colores (sin jQuery)
Herramienta: http://jsfiddle.net/

Ejercicio: Colores (con jQuery)
Herramienta: http://jsfiddle.net/

Ejercicio: Google Maps
Herramienta: www.jsbin.com

Ejercicio: Send Data (AJAX)
Herramienta: Cualquier IDE

Referencias
● https://developer.mozilla.org/es/docs/Web/JavaScript
● https://jsfiddle.net/
● https://jsbin.com
● https://jquery.com/
● http://javascriptweekly.com/

Javascript 101

Recomendados

Recomendados

Más contenido relacionado

Similar a Javascript 101

Similar a Javascript 101 (20)

Más de RedRITA

Más de RedRITA (8)

Último

Último (20)

Javascript 101