jQuery - 01 Conceptos básicos de java script

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]; //Jack
twoDimArray[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);

jQuery - 01 Conceptos básicos de java script

Más contenido relacionado

La actualidad más candente

Destacado

Similar a jQuery - 01 Conceptos básicos de java script

jQuery - 01 Conceptos básicos de java script