Introducción Javascript.pdf

Introducción a Javascript
Elementos Básicos del Lenguaje
Programación Javascript

¿Qué es un Script?
 Un Script puede definirse como una serie de comandos, que
pueden ejecutarse sin necesidad de ser compilados.
 Por lo general, pueden acompañar un documento HTML, o
estar contenido dentro de éste.
 Se distinguen dos tipos:
 Los que se ejecutan al cargar la página en el navegador.
 Los que se ejecutan cuando el usuario activa un evento.

¿Qué es un Lenguaje Script?
 Un lenguaje Script o de edición de scripts, es un tipo de
lenguaje de programación cuyo código se inserta en un
documento HTML y puede ejecutarse sin ser compilado.
 Se distinguen dos tipos:
Server Side Scripting
• Pearl
• Python
• PHP
Client Side Scripting
• VBScript
• Jscript
• JavaScript

¿Qué es Javascript?
 Javascript es un lenguaje de programación interpretado; es
decir, que no necesita compilar los programas creados, antes
de ejecutarlos.
 Fue creado en 1995 por Brendan Eich, cofundador del
proyecto Mozilla, e incialmente fue llamado LiveScript.
 Está basado ECMAScript, un estándar para lenguaje script
multiplataforma e independiente.
 Soporta programación orientada a objetos.
 Se utiliza para crear páginas web dinámicas.

Ventajas
 Los archivos generados, no necesitan ser compilados.
 Es muy rápido ya que se ejecuta del lado del cliente.
 Es un lenguaje fácil de aprender y escribir.
 Facilita el desarrollo rápido de aplicaciones.
 Es multiplataforma.
 Es soportado por los navegadores más populares.

Desventajas
 En algunos casos, puede llegar a ser más lento que un
programa compilado.
 El código debe descargarse completamente.
 Los usuarios tienen la opción de desactivarlo en el navegador.
 El código frontend esta visible para cualquier usuario.

Elementos Básicos de Javascript

Estructura básica de un Script
Script en Head
Script en Body
<script type=”text/javascript”>
</script>
<script type="text/javascript” src="/archivo1.js">
</script>

Tipos de datos
 Es un lenguaje débilmente tipado (no se obliga a declarar el
tipo de dato).
 Todas las variables admiten todos los tipos de datos.
 Las variables pueden ser reescritas: una misma variable
pueden almacenar diferentes tipos de datos.
 Se distiguen 4 tipos de datos primitivos:
 Number (valores numéricos).
 String (caracteres o palabras).
 Boolean (true o False).
 Undefined (Sin definir).
 También admite el tipo de dato: Object.

Definición de variables/constantes
 Case Sensitive: Diferencia mayúscula de minúscula.
 Camel Case: Nombre de variables compuestas, la primera
palabra inicia en minúscula, la segunda en mayúscula, sin
espacio en blanco. Ej. numDos
 El nombre de una variable no puede iniciar con un número.
 Sólo puede estar formado por letras, números y los símbolos
$ (dólar) y _ (guión bajo).
 Formato:
var num1 = 14;
var carNombre = “Hyundai“;
const num = 25;

Sintaxis General en JavaScript
 No se consideran los espacios en blanco y avances de línea.
 Se distingue entre mayúsculas y minúsculas, variables serán
diferentes.
 No se define el tipo de variables.
 No es necesario finalizar con punto y coma (;).
 Pueden añadirse comentarios para documentar.
 // comentario de una sola línea
 /* comentario de varias líneas */

Expresiones y operadores
 Aritméticos
Operadores Ejemplo
Asignación (=) Resp = 1;
Suma (+) resp = num1 + num2;
Resta (-) resp = num1 - num2;
Multiplicación (*) resp = num1 * num2;
División (/) resp = num1 / num2;
Módulo (%) resp = 20 % 9; // resp es igual a 2
Incremento (++) ++num; // num se incrementa en 1 unidad
Decremento (--) --num; // num se decrementa en 1 unidad

 Relacionales
Operadores Ejemplo
mayor que (>) Resp = num1 >= num2;
menor que (<) resp = num1 < num2;
mayor o igual (>=) resp = num1 >= num2;
menor o igual (<=) resp = num1 <= num2;
igual que (==) resp = num1 == num2;
distinto de (!=) resp = num1 != num2;

operador variable1 variable2 respuesta
AND (&&) True True True
AND (&&) True False False
AND (&&) False True False
AND (&&) false False False
OR (||) True True True
OR (||) True False True
OR (||) False True True
OR (||) false False False
Negación (!) var num1 = true; !num1; False
 Lógicos

Instrucciones de salida (consola)
Instrucciones Funcionalidad
window.prompt() Ventana emergente para ingresar datos
prompt()
Ventana emergente para ingresar datos:
prompt("Texto descriptivo","Texto por defecto");
console.log () Envía mensaje por consola
console.clear() Limpia la consola
window.alert() Ventana emergente de alerta o mensaje
alert() Ventana emergente de alerta o mensaje
document.write () Escribe texto directo en el documento HTML
document.writeln ()
Escribe texto directo en el documento HTML e
incluye una nueva línea

Sentencias de Control
 Sentencias condicionales.
Estructura If
If (condicion) {
// aquí código
}
Estructura If…Else
If (condicion) {
// código
}
else {
// aquí código
}

Switch
switch (expresion) {
case valor1:
// aquí código
[break;]
case valorN:
// aquí código
[break;]
default:
// aquí código
[break;]
}
 Sentencias condicionales.

For
for(var i = 0; i < 5; i++) {
console.log (i);
}
While
while (i < 10) {
console.log (i);
i++;
}
Do…While
do {
console.log (i);
i++;
}
while (i < 10);
 Sentencias Repetitivas.

Funciones en JavaScript
 Por lo general, una función es un subprograma o rutina que
puede ser llamado por un código externo.
 En Javascript, una función es un objeto de primera clase; es
decir, objetos que pueden manipularse y transmitirse.
 Facilitan la reutilización de líneas de código.
 Pueden ser de dos tipos:
 Las que sólo realizan una tarea.
 Las que realizan un cálculo y devuelven un valor.

Manejo de funciones
 Definición de funciones: palabra reservada function
Palabra Reservada Formato y Ejemplo
function
(sin retorno)
function myFunction() {
alert (“don’t spoil the end game”);
}
function sumaNum (num1,num2) {
alert (num1+num2);
}
function
(con retorno)
function multiNum (num1,num2) {
var resultado = num1*num2;
return resultado;
}

Manejo de funciones
 Definición de funciones: instrucción new
Instrucción Formato y Ejemplo
New
sin retorno
var myfunction = new Function (alert ("dontspoil"));
var sume = new Function ("num1", "num2", "alert (num1 + num2)");
New
con retorno
var prod = new Function ("num1", "num2", "return num1 * num2");
document.writeln (prod (14,9));

Llamado de funciones
 Ejemplos de llamado a funciones:
function
(sin retorno)
myFunction() ;
sumaNum (5, 4);
function
(con retorno)
var respuesta = multiNum (12, 3);
document.writeln (prod (14,9));

Objetos en JavaScript
 Un objeto se define como una colección de propiedades y
métodos agrupadas en una estructura.
 PROPIEDADES: Relación entre un nombre y un valor.
 MÉTODOS: Es una función que puede ser llamada.
 Ejemplos de objetos nativos: Date, Math,Window,Array.

Definición de Objetos en JavaScript
 Definición de objetos y propiedades con inicializador
Uso de inicializador
var
var estudiante = {
nombre: "Pepe",
apellido: "Pérez",
edad: 22,
};
Acceso a propiedades
estudiante.nombre
//nombreObjeto.nombrePropiedad
estudiante["nombre"]
//nombreObjeto[“nombrePropiedad”]

 Definición de objetos, propiedades y funciones con var
Uso de inicializador
var
var estudiante = {
nombre: "Pepe",
apellido: "Pérez",
edad: 22,
tuNombre : function() {
return this.nombre + " " + this.apellido;
}
};
Acceso a propiedades
nuevo = estudiante.tuNombre();

 Definición de objetos con New
Instrucción
New
var auto = new Object();
auto.marca = "Hyundai";
auto.modelo = "coupe";
auto.color = "gris";

 Definición de objetos mediante función constructora
Creación de Clase
(función)
Function Autos (marca, modelo, color) {
this.marca = marca;
this.modelo = modelo;
this.color = color;
}
Creación de una
instancia de objeto
New
var carrito1 = new Autos("Hyundai", "coupe","gris");

Manejo de arreglos
 Una arreglo o array es un tipo especial de variable que
maneja varios valores a la vez.
 El objeto global array permite crear objetos tipo lista en
Javascript y almacena muchos valores en una sola variable.
 Sintaxis para la creación:
 Ejemplo:
var nombre_array = [item1, item2, ...];
var carros = ["Hyundai", "Toyota", "Suzuki"];

Manejo de arreglos
 Características básicas de los arreglos:
 Utilizan números para acceder a sus elementos (índices).
 Pueden manejar diferentes tipos de datos.
 Pueden contener objetos.
 Pueden contener funciones.
 Pueden contener arreglos.

Recorrido de arreglos
 Para el recorrido de un arreglo, puede utilizarse la estructura
For y la propiedad length del objeto array.
Recorrido con For
(length)
var myArray = ["Hyundai", "Toyota", "Suzuki"];
for (i = 0; i < myArray.length; i++) {
alert(“Me gusta un: " + myArray[i]);
}

Métodos y Propiedades
 Veamos:
miArray.length; Devuelve el tamaño del arreglo
miArray.map
Aplica una misma función a todos los elementos:
miArray.map(Math.sqrt)
miArray.sort(); Devuelve un nuevo array con los valores ordenados
miArray.pop(); Devuelve el último elemento del array y lo saca
miArray.push(); Inserta un nuevo elemento, devuelve nueva longitud
miArray.reverse(); Invierte el orden del array
miArray =[ 3, 2, 9, 14]

Manejo de Strings
 Un String se comporta como un Array, ya que es un
conjunto de caracteres, con índices que van del 0 hasta el
último carácter.
 Sintaxis para la creación:
 Ejemplo:
var texto = "Hola Mundo";
var texto = new String("Hola Mundo");
var mensaje = "¿Sabes qué hora es?";

Métodos y Propiedades
 Veamos:
slice(start, end) Extrae una porción de una cadena
substring(start, end) Extrae una porción de una cadena
substr(start, length)
Extrae una porción de una cadena.
Ej. micadena.substr (11, 17);
string.charAt(index) Extrae el carácter según el índice
String.length Longitud de una cadena de caracteres
mensaje = "¿Sabes qué hora es?"

Matrices: Array multidimensional
 Una matriz es una estructura que almacena valores en más de
una dimensión.
 En Javascript, la estructura se define creando un array dentro
de todas las posiciones de otro array principal.
 Para definir una matriz, debe definirse su dimensión inicial.
 Sintaxis para la creación: (define matriz 2x2)
var miArray = new Array(2);
miArray[0] = new Array(2);
miArray[1] = new Array(2);

Array de objetos
 Tipo de arreglo “especial” que puede contener objetos como
elementos.
 Sintaxis(1): Objetos creados en ejecución
 Sintaxis(2): Objetos creados previamente
// Array con tres objetos
var miArray = [{edad:30},{casa:53},{autos:2}];
var a = {edad:30}; // creación del objeto
var b = {casa: 53};
var c = {autos: 2};
unArray = [a,b,c]; // inserción de objetos en array

Array de elementos mixtos
 Javascript permite almacenar elementos de diferente tipo
dentro del Array.
 Ejemplo:
var miArray = ["Grazie", true, [3,2,1], 22, {valor: 5}];
// diferentes tipos de datos

Otras Clases: MATH
Math.PI Valor del número PI = 3.14592
Math.E Valor del número Euler= 2.718281
Math.random() Devuelve número aleatorio entre 0 y 1.
Math.pow(2,3) Número elevado a una potencia 23 = 8
Math.sqrt(4) Raíz cuadrada de un número
Math.min(4,3,1) Devuelve el valor mínimo contenido en una lista
Math.min(4,3,1) Devuelve el valor máximo contenido en una lista
Math.round(6.4) Redondea a la parte entera más próxima
Math.abs(x) Devuelve valor absoluto de un número

Otras Clases: DATE
Método Descripción
getDate() Devuelve el día del mes
getDay()
Devuelve el día de la semana entre (0) domingo y
(6) sábado
getMonth() Devuelve el mes. Entre 0 (enero) y 11 (diciembre)
getFullYear() Devuelve el año con (4) dígitos.
getSeconds() Devuelve los segundos, entre 0 y 59.
getMinutes() Devuelve los segundos, entre 0 y 59.
getHours() Devuelve la hora.

Ejercicios 1-2
1. Desarrolle una página básica HTML llamada “Curso de
JavaScript”. Coloque un Script dentro del código que
muestre por pantalla un mensaje que diga:
“Bienvenidos al curso 2019”.
2. Desarrolle una página básica HTML llamada “Curso de
JavaScript”. Coloque un Script dentro del código que
solicite al usuario escribir su nombre y edad, y luego,
mostrar un mensaje por consola que diga:
“Bienvenido nombre_persona” “No sabía que tenías
edad_persona años”. Documente su script con
comentarios.

Ejercicios 3-4
3. Desarrolle un script que solicite al usuario el nombre y
edad de dos personas. Determine quién es la persona
más longeva e indíquelo mediante un mensaje por
pantalla. Genere un archivo *.js y realice un llamado
de este script desde un documento HTML básico.
4. Desarrolle un script embebido que calcule el área y
longitud de un círculo considerando los valores de
radio y pi (3.141592) como datos de entrada.
 Área = pi x radio2
 Longitud = 2 x pi x radio

Ejercicios 5-6
5. Genere un script embebido que solicite dos números
al usuario. Determine e indique al usuario cuál es el
número mayor y si éste es positivo; determine e
indique al usuario si al incrementar el primer número
leído en una unidad, éste adquiriría un valor mayor o
igual al segundo número leído; determine si el
segundo número leído es par.
6. Genere un script externo que calcule
independientemente la suma de los números pares e
impares comprendidos entre 1 y 200.

Ejercicios 7-8
7. Genere un script externo que calcule el valor factorial
de un número escrito por el usuario y le muestre su
resultado por pantalla/consola.
8. Desarrolle un script que solicite al usuario ingresar
números hasta que se presione Cancelar. Al presionar
Cancelar, se deberá conocer la sumatoria de todos los
números ingresados.

Ejercicios 10
10. Desarrolle un script externo que solicite al usuario el diámetro de una
rueda y su grosor (en metros):
 Si el diámetro es superior a 1.4 debe mostrarse el mensaje: “La
rueda es para un carro grande”. Si es menor o igual a 1.4 pero
mayor que 0.8, se debe mostrar un mensaje que diga: “La rueda es
para un carro mediano”. Si no se cumplen ninguna de las
condiciones anteriores, se debe mostrar un mensaje que diga: “La
rueda es para un vehículo pequeño”.
 Si el diámetro es superior a 1.4 con un grosor inferior a 0.4, o si el
diámetro es menor o igual a 1.4 pero mayor que 0.8, con un grosor
inferior a 0.25, se deberá mostrar un mensaje que diga: “El grosor
de la rueda no cumple con el estándar recomendado”.

Ejercicios 11-12
11. Genere una función en Javascript que solicite un argumento numérico y
devuelva como respuesta un mensaje que diga: “Este número es par” o
“Este número es impar”. Considere también en su respuesta si el
número evaluado es positivo o negativo.
12. Desarrolle una función en Javascript que calcule el monto que debe
recibir un asalariado por su XIII mes. Para el cálculo deberá considerar lo
siguiente:
• Sumar el monto de los 4 pagos mensuales (salario) recibidos desde
su último XIII mes.
• Sume a esta cantidad el total de pagos recibidos en horas extras (en
caso de haber laborado horas extras).
• Divida el total de la sumatoria entre 12.

Ejercicios 13
13. Desarrolle una función Javascript que realice el cálculo de las
deducciones en seguro social y seguro educativo de un trabajador.
• Considere que la deducción en seguro educativo corresponde a
1.25%.
• Considere que la deducción en seguro social corresponde a 9.75%
(aplicable a XIII mes).
• Optimice la función anterior y aplique los descuentos
correspondientes al pago del XIII mes.

Ejercicios 14
14. Desarrolle una función Javascript que calcule el índice de masa corporal
e indique al usuario su condición de salud actual: “Saludable, tu peso es
normal”, “Por debajo del peso normal” o “Cuidado, estás en
sobrepeso”.
• IMC =
𝑃𝑒𝑠𝑜 𝐾𝑔
𝐴𝑙𝑡𝑢𝑟𝑎 𝑚 2
• Considere que una libra (1 lb.) equivale a 0.4536 Kilogramos.
• Peso normal: oscila en el rango de 18.5 a 25 IMC.
• Sobrepeso: Se considera un IMC mayor a 25.

Ejercicios 15
15. Escriba un algoritmo que permita calificar las respuestas
de un examen de selección múltiple que contiene 5
preguntas. Considere:
• Cada una de las respuestas dadas por el estudiante a
cada pregunta (Sólo 3 opciones posibles: a, b, c).
• Clave de respuestas correctas:
P1 = a, P2 = b, P3 = a, P4 = c, P5 = b
• Si el estudiante tiene 5 aciertos, su nota es “A”
• Si el estudiante tiene 4 aciertos, un nota es “C”.
• Por debajo de 4 aciertos, mostrar un mensaje que diga:
“Deberá repetir la prueba”.

Ejercicios 16
16. Escriba un algoritmo que lea un arreglo de números
enteros, y un número X, y escriba en pantalla todos
los índices de las posiciones del arreglo donde está X.
Por ejemplo, en el siguiente arreglo, X = 7, la
respuesta sería: Índices 1 y 3.
40 7 89 7 22

Ejercicios 17
17. Un Array de números se llama “partidario” si todo
número que está en una celda con índice par, es
mayor que cualquiera de los números que están en
celdas con índice impar. Escriba un algoritmo que lea
un arreglo de 10 números enteros y luego, muestre
un mensaje (Alert) que indique si el arreglo es
partidario o no.

Ejercicios 18
18. Desarrolle una función en Javascript que permita
capturar la fecha actual del sistema y mostrarla en el
navegador en el siguiente formato:
“Hoy es, lunes 13 de mayo de 2019”
• La función también deberá mostrar la hora del
sistema mediante un alert al usuario, en el
siguiente formato: “Hora: 21:05”

Introducción Javascript.pdf

Recomendados

Recomendados

Más contenido relacionado

Similar a Introducción Javascript.pdf

Similar a Introducción Javascript.pdf (20)

Último

Último (8)

Introducción Javascript.pdf