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 con...
Uso de JavaScript
• Existen dos opciones para usar JavaScript en
una página web:
1. Con el tag script
2. Con un archivo ex...
Uso de JavaScript
• Por lo general los scripts externos son
llamados desde la sección <head> o después
de la sección </bod...
Convenciones de Sintaxis
• El uso de “;” es opcional pero es
recomendado
• Los comentarios pueden ser escritos en dos
mane...
Convenciones de Sintaxis
• Undefined es un valor especial que significa
que no le ha sido asignado un valor
• Los operador...
Tipos de datos
• En JavaScript los valores de las variables
pueden ser reemplazados por valores de otro
tipo
• Así mismo l...
Tipos de datos
• El tipo object es un tipo especial:
var carWheel = 4;
var carColor = “red”;
var carSeatCount = 5;
var car...
Tipos de datos
• Los objetos en JavaScript se describen con
una dupla de llave-valor, separando cada
dupla con una coma al...
Funciones
• Para declarar una función se usa la palabra
reservada function
• El código de una función se escribe entre
lla...
Funciones
• Las funciones pueden aceptar múltiples
argumentos separados por coma
function alertThings(thing1, thing2){
ale...
Funciones
• jQuery por lo general pasa un objeto en vez de
variables en un argumento
Function aPerson(person){
alert(perso...
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 ...
• Los operadores lógicos && (and), || (or)
• Las comparaciones de igualdad se realizan
con ===
Condicionales
var age = 15;...
• Por lo general se evita el uso del operador de
negación “!”
Condicionales
var age = 18;
if(!age < 10){
alert(“Hello, Adu...
• Un arreglo es una simple lista de valores
• Acceder a los elementos de un arreglo:
• Los arreglos son base 0
• length si...
• Los arreglos en JavaScript pueden contener
cualquier cosa, inclusive objetos u otros
arreglos
Arrays
var twoDimArray= [
...
• 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 ...
• 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){
con...
• Es ideal para probar fragmentos de código
• console .log() registra la información en la
pantalla de la consola
Uso de C...
<!DOCTYPE html>
<html>
<head>
<title>Hey</title>
<script type="text/javascript" charset="utf-8">
console.log("Jack");
</sc...
• console.log acepta múltiples argumentos
Uso de Consola
var classMates = ["Jack", "Jamie", "Rich", "Will"];
console.log("...
Próxima SlideShare
Cargando en…5
×

jQuery - 01 Conceptos básicos de java script

1.590 visualizaciones

Publicado el

0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
1.590
En SlideShare
0
De insertados
0
Número de insertados
3
Acciones
Compartido
0
Descargas
101
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

jQuery - 01 Conceptos básicos de java script

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

×