jquery - 01 conceptos básicos de java script
DESCRIPTION
TRANSCRIPT
![Page 1: jQuery - 01 Conceptos básicos de java script](https://reader036.vdocuments.pub/reader036/viewer/2022081413/54842d59b47959ec0c8b4b84/html5/thumbnails/1.jpg)
Conceptos básicos de JavaScript
![Page 2: jQuery - 01 Conceptos básicos de java script](https://reader036.vdocuments.pub/reader036/viewer/2022081413/54842d59b47959ec0c8b4b84/html5/thumbnails/2.jpg)
• 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
![Page 3: jQuery - 01 Conceptos básicos de java script](https://reader036.vdocuments.pub/reader036/viewer/2022081413/54842d59b47959ec0c8b4b84/html5/thumbnails/3.jpg)
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>
![Page 4: jQuery - 01 Conceptos básicos de java script](https://reader036.vdocuments.pub/reader036/viewer/2022081413/54842d59b47959ec0c8b4b84/html5/thumbnails/4.jpg)
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
![Page 5: jQuery - 01 Conceptos básicos de java script](https://reader036.vdocuments.pub/reader036/viewer/2022081413/54842d59b47959ec0c8b4b84/html5/thumbnails/5.jpg)
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 */
![Page 6: jQuery - 01 Conceptos básicos de java script](https://reader036.vdocuments.pub/reader036/viewer/2022081413/54842d59b47959ec0c8b4b84/html5/thumbnails/6.jpg)
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;
![Page 7: jQuery - 01 Conceptos básicos de java script](https://reader036.vdocuments.pub/reader036/viewer/2022081413/54842d59b47959ec0c8b4b84/html5/thumbnails/7.jpg)
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];
![Page 8: jQuery - 01 Conceptos básicos de java script](https://reader036.vdocuments.pub/reader036/viewer/2022081413/54842d59b47959ec0c8b4b84/html5/thumbnails/8.jpg)
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
};
![Page 9: jQuery - 01 Conceptos básicos de java script](https://reader036.vdocuments.pub/reader036/viewer/2022081413/54842d59b47959ec0c8b4b84/html5/thumbnails/9.jpg)
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”];
![Page 10: jQuery - 01 Conceptos básicos de java script](https://reader036.vdocuments.pub/reader036/viewer/2022081413/54842d59b47959ec0c8b4b84/html5/thumbnails/10.jpg)
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);
}
![Page 11: jQuery - 01 Conceptos básicos de java script](https://reader036.vdocuments.pub/reader036/viewer/2022081413/54842d59b47959ec0c8b4b84/html5/thumbnails/11.jpg)
Funciones
• Las funciones pueden aceptar múltiples argumentos separados por coma
function alertThings(thing1, thing2){alert(thing1);alert(thing2);
}
alertThings(“Hello”, “World”);
![Page 12: jQuery - 01 Conceptos básicos de java script](https://reader036.vdocuments.pub/reader036/viewer/2022081413/54842d59b47959ec0c8b4b84/html5/thumbnails/12.jpg)
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);
![Page 13: jQuery - 01 Conceptos básicos de java script](https://reader036.vdocuments.pub/reader036/viewer/2022081413/54842d59b47959ec0c8b4b84/html5/thumbnails/13.jpg)
Funciones
• Las funciones regularmente regresan un valor
function inchesToCm (inches){return inches * 2.54;
}
![Page 14: jQuery - 01 Conceptos básicos de java script](https://reader036.vdocuments.pub/reader036/viewer/2022081413/54842d59b47959ec0c8b4b84/html5/thumbnails/14.jpg)
Condicionales
var age = 20;If(age < 12){
alert(“Child”);}
var age = 15;If(age < 12){
alert(“Child”);}else{
alert(“Not a Child”);}
![Page 15: jQuery - 01 Conceptos básicos de java script](https://reader036.vdocuments.pub/reader036/viewer/2022081413/54842d59b47959ec0c8b4b84/html5/thumbnails/15.jpg)
• 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”);}
![Page 16: jQuery - 01 Conceptos básicos de java script](https://reader036.vdocuments.pub/reader036/viewer/2022081413/54842d59b47959ec0c8b4b84/html5/thumbnails/16.jpg)
• Por lo general se evita el uso del operador de negación “!”
Condicionales
var age = 18;if(!age < 10){
alert(“Hello, Adult”);}
![Page 17: jQuery - 01 Conceptos básicos de java script](https://reader036.vdocuments.pub/reader036/viewer/2022081413/54842d59b47959ec0c8b4b84/html5/thumbnails/17.jpg)
• 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];
![Page 18: jQuery - 01 Conceptos básicos de java script](https://reader036.vdocuments.pub/reader036/viewer/2022081413/54842d59b47959ec0c8b4b84/html5/thumbnails/18.jpg)
• 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
![Page 19: jQuery - 01 Conceptos básicos de java script](https://reader036.vdocuments.pub/reader036/viewer/2022081413/54842d59b47959ec0c8b4b84/html5/thumbnails/19.jpg)
• 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");
![Page 20: jQuery - 01 Conceptos básicos de java script](https://reader036.vdocuments.pub/reader036/viewer/2022081413/54842d59b47959ec0c8b4b84/html5/thumbnails/20.jpg)
• El aspecto crucial de delete es que no remueve el elemento del arreglo, solo lo reemplaza con undefined
Arrays
![Page 21: jQuery - 01 Conceptos básicos de java script](https://reader036.vdocuments.pub/reader036/viewer/2022081413/54842d59b47959ec0c8b4b84/html5/thumbnails/21.jpg)
• Ciclo while
Ciclos
var count = 0;while(count < classMates.length){
console.log(classMates[count]);count++;
}
![Page 22: jQuery - 01 Conceptos básicos de java script](https://reader036.vdocuments.pub/reader036/viewer/2022081413/54842d59b47959ec0c8b4b84/html5/thumbnails/22.jpg)
• 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");
}
![Page 23: jQuery - 01 Conceptos básicos de java script](https://reader036.vdocuments.pub/reader036/viewer/2022081413/54842d59b47959ec0c8b4b84/html5/thumbnails/23.jpg)
• 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
![Page 24: jQuery - 01 Conceptos básicos de java script](https://reader036.vdocuments.pub/reader036/viewer/2022081413/54842d59b47959ec0c8b4b84/html5/thumbnails/24.jpg)
<!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
![Page 25: jQuery - 01 Conceptos básicos de java script](https://reader036.vdocuments.pub/reader036/viewer/2022081413/54842d59b47959ec0c8b4b84/html5/thumbnails/25.jpg)
• console.log acepta múltiples argumentos
Uso de Consola
var classMates = ["Jack", "Jamie", "Rich", "Will"];console.log("Classmates: ", classMates);