2. • Es un framework basado en JavaScript
• No es un lenguaje como tal sino una librería
• Es posible escribir jQuery sin conocer
JavaScript pero no es recomendable
jQuery
3. Uso de JavaScript
• Existen dos opciones para usar JavaScript en
una página web:
1. Con el tag script
2. Con un archivo externo de JavaScript(.js)
<script type="text/javascript">
//Código a implementar
</script>
<script type=“text/javascript” src= “archivo.js”></script>
4. Uso de JavaScript
• Por lo general los scripts externos son
llamados desde la sección <head> o después
de la sección </body>
• Por cuestión de performance se recomienda
llamarlos después de la sección </body>
• Esto hace que los scripts sean cargados
después de que la página ha sido interpretada
• De otro modo, se detendría el render de la
página para esperar a que todos los scripts
sean cargados
5. Convenciones de Sintaxis
• El uso de “;” es opcional pero es
recomendado
• Los comentarios pueden ser escritos en dos
maneras:
• Para declarar una variable se usa la palabra
reservada var y se iguala a un valor
• Si una variable se declara sin valor, se le
asigna el valor undefined
// Línea simple
/* Comentario escrito
en tipo multilínea */
6. Convenciones de Sintaxis
• Undefined es un valor especial que significa
que no le ha sido asignado un valor
• Los operadores aritméticos son: * + - /
• Las variables pueden contener números,
letras, guiones bajos pero no deben empezar
con número
var twoPlusThree = 5;
var twoPlusTwo = 4;
var valueNotDefined;
7. Tipos de datos
• En JavaScript los valores de las variables
pueden ser reemplazados por valores de otro
tipo
• Así mismo los elementos en un arreglo no
deben ser necesariamente del mismo tipo
var testVariable = 5;
testVariable = “Hello”;
var square = [2, 4, 16];
var mixed = [1, “hello”, true, 6.5];
8. Tipos de datos
• El tipo object es un tipo especial:
var carWheel = 4;
var carColor = “red”;
var carSeatCount = 5;
var carMaxSpeed= 160;
Var car {
Wheel = 4,
Color = “red”,
SeatCount = 5,
MaxSpeed= 160
};
9. Tipos de datos
• Los objetos en JavaScript se describen con
una dupla de llave-valor, separando cada
dupla con una coma al final del valor, excepto
para el último elemento
• Las propiedades de un objeto se acceden:
car.wheelCount;
car[“wheelCount”];
10. Funciones
• Para declarar una función se usa la palabra
reservada function
• El código de una función se escribe entre
llaves {}
• Los paréntesis sirven para recibir parámetros
function alertTwo(){
alert(“2”);
}
function alertSomething(something){
alert(something);
}
11. Funciones
• Las funciones pueden aceptar múltiples
argumentos separados por coma
function alertThings(thing1, thing2){
alert(thing1);
alert(thing2);
}
alertThings(“Hello”, “World”);
12. Funciones
• jQuery por lo general pasa un objeto en vez de
variables en un argumento
Function aPerson(person){
alert(person.firstName);
alert(person.lastName);
alert(person.age);
}
var jack = {
firstName = “Jack”,
lastName = “Doe”,
Age = 20
}
aPerson(jack);
13. Funciones
• Las funciones regularmente regresan un valor
function inchesToCm (inches){
return inches * 2.54;
}
14. Condicionales
var age = 20;
If(age < 12){
alert(“Child”);
}
var age = 15;
If(age < 12){
alert(“Child”);
}else{
alert(“Not a Child”);
}
15. • Los operadores lógicos && (and), || (or)
• Las comparaciones de igualdad se realizan
con ===
Condicionales
var age = 15;
var name = “jack”;
if(age > 18 && name === “jack”){
alert(“You’re Jack you’re older than 18”);
}
16. • Por lo general se evita el uso del operador de
negación “!”
Condicionales
var age = 18;
if(!age < 10){
alert(“Hello, Adult”);
}
17. • Un arreglo es una simple lista de valores
• Acceder a los elementos de un arreglo:
• Los arreglos son base 0
• length sirve para obtener la longitud de un
arreglo
• ¿Cómo puede obtenerse el último elemento de
un arreglo sin conocerse su longitud?
Arrays
var classMates = [“Jack”, “Jamie”, “Rich”, “Will”];
classMates[1]; //Jamie;
classMates[classMates.length - 1];
18. • Los arreglos en JavaScript pueden contener
cualquier cosa, inclusive objetos u otros
arreglos
Arrays
var twoDimArray= [
[“Jack”, “Jamie”, “Rich”, “Will”],
[“Sue”, “Heather”, “Amy”, “Sarah”]
];
twoDimArray[0][1]; //Jack
twoDimArray[1][0]; //Sue
19. • Para añadir un elemento al final de un arreglo
se usa el método Push
• No hay un método que permita eliminar
fácilmente un elemento de un arreglo.
• El operador delete reemplaza con el valor
undefined el elemento seleccionado del
arreglo, pero no lo elimina
Arrays
delete classMates[1];
console.log(“classMates[1]: ", classMates[1]);
classMates.push("Sam");
20. • El aspecto crucial de delete es que no
remueve el elemento del arreglo, solo lo
reemplaza con undefined
Arrays
21. • Ciclo while
Ciclos
var count = 0;
while(count < classMates.length){
console.log(classMates[count]);
count++;
}
22. • Ciclo for
Ciclos
var classMates = {
"Jamie": 20,
"Will": 21,
"Rich": 22,
"Jack": 23
};
for(classMate in classMates){
console.log(classMate + " is " +
classMates[classMate] + " years old");
}
23. • Es ideal para probar fragmentos de código
• console .log() registra la información en la
pantalla de la consola
Uso de Consola
ctrl + shift + k F12 ctrl + shift + j