jquery - 01 conceptos básicos de java script
DESCRIPTION
TRANSCRIPT
Conceptos básicos de JavaScript
• 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
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>
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
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 */
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;
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];
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
};
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”];
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);
}
Funciones
• Las funciones pueden aceptar múltiples argumentos separados por coma
function alertThings(thing1, thing2){alert(thing1);alert(thing2);
}
alertThings(“Hello”, “World”);
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);
Funciones
• Las funciones regularmente regresan un valor
function inchesToCm (inches){return inches * 2.54;
}
Condicionales
var age = 20;If(age < 12){
alert(“Child”);}
var age = 15;If(age < 12){
alert(“Child”);}else{
alert(“Not a Child”);}
• 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”);}
• Por lo general se evita el uso del operador de negación “!”
Condicionales
var age = 18;if(!age < 10){
alert(“Hello, Adult”);}
• 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];
• 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]; //JacktwoDimArray[1][0]; //Sue
• 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");
• El aspecto crucial de delete es que no remueve el elemento del arreglo, solo lo reemplaza con undefined
Arrays
• Ciclo while
Ciclos
var count = 0;while(count < classMates.length){
console.log(classMates[count]);count++;
}
• 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");
}
• 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
<!DOCTYPE html><html>
<head> <title>Hey</title> <script type="text/javascript" charset="utf-8">
console.log("Jack"); </script></head><body></body>
</html>
Uso de Consola
• console.log acepta múltiples argumentos
Uso de Consola
var classMates = ["Jack", "Jamie", "Rich", "Will"];console.log("Classmates: ", classMates);