Scribd
Cargar
15 vistas40 páginas

Javascript

Cargado por

jorge vasquez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
15 vistas40 páginas

Javascript

Cargado por

jorge vasquez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 40

JAVASCRIPT

INTRODUCCIÓN
• JavaScript (abreviado como JS), es un lenguaje de
programación nacido en 1995 de alto nivel (su sintaxis esta
más cercano al hombre que a la máquina), que se ejecuta en
tiempo de compilación (no hay un paso previo de compilar el
código en un binario). Todo ello nos facilitará su aprendizaje y
posterior desarrollo.
¿Donde pongo mi código JavaScript?
Debe estar dentro en la etiqueta <script></script>, pero te
preguntarás… ¿donde debe estar esa etiqueta en mi HTML?
Opción 1:
Dentro de <head> suelta.
¿Donde pongo mi código JavaScript?
Opción 2:
Al final de <body>.
¿Donde pongo mi código JavaScript?
Opción 3:
con el código en un archivo externo.
Comentarios
• Los comentarios serán ignorados por el lenguaje, por lo que no
ahorres en ellos. Cuanto más documentado esté tu código más
fácil será de modificar y que crezca.
En línea
Debe empezar por //.
Comentarios
• En bloque
Empezará por /* y se cerrará con */.
Posibilidades de visualización de
JavaScript
• Escribir en la salida HTML usando document.write().
• Escribir en un cuadro de alerta, usando window.alert().

<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
Posibilidades de visualización de JavaScript
Para que tu código pueda interactuar con el usuario. Lo haremos con el método
prompt().

let nombre;
nombre = prompt("Introduce tu nombre");
document.write("Bienvenido/a a mi sitio web, " + nombre);

Gracias a prompt(), se despliega una ventanita parecida a la del alert(), solo que en
este caso, a parte de informar con un string, va a permitir introducir algo con el
teclado. Lo que se introduzca, quedará almacenado en la variable nombre y podrá
ser utilizado como un valor más en el código.
Variables
• Las variables son una herramientas de guardar un contenido
en la memoria. Se estructuran de la siguiente forma:

[tipo] [clave] = [valor];

Ejemplo:
const nombre = 'Andrea';
Variables
• Las claves no pueden contener espacios, acentos, ñ o empezar por un
número.

const nombre = 'Andrea'; // Bien


const 2nombre = 'Joan'; // Mal
const nombre con apellido = 'Joan Chamorro'; // Mal
const nombreConApellido = 'Andrea Motis'; // Bien
Variables
• Tipos
https://www.w3schools.com/js/js_let.asp

const: acceso local, solo lectura.


let: acceso local, editable.
var: alcance global, editable.

Ejemplo:
const discografica = 'jazztojazz’;
let pistas = 16;
var titulo = 'Feeling good';
Operaciones aritméticas
• Sumar • Multiplicar
const resultado = num1 + num2; const resultado = num1 * num2;

• Restar • Resto
const resultado = num1 - num2; const resultado = num1 % num2;

• Dividir • Potencia (Elevado a…)


const resultado = num1 / num2; const resultado = num1 ** num2;
Condicionales
Los condicionales nos permiten tomar decisiones: ¿bajo que
condiciones debo ejecutar las instrucciones? ¿qué hago si no se
cumple mis condiciones?
if (condición) {
... ... ...
}
Operadores de comparación
Símbolo Explicación Ejemplo

> es mayor que if (1 > 0)

< es menor que if (1 < 0)

&& y if (1 > 0 && 67 > 0)

|| o if (1 > 10 || 67 > 0)

== es igual en valor if ('3' == 3)

!= no es igual if ('Doctor' != 'Who')

>= es mayor o igual que if (10 >= 10)

<= es menor o igual que if (10 <= 20)

if (10 > 2 && true && 'HBO' != 'Netflix') {


document.write('Entro seguro’);
}
else
• Nos permite realizar otras acciones si no se cumple la
condición.

if (condición) {
...
} else {
...
}
elseif
• Es posible tener varios condicionales, aunque solo se ejecutará
uno de ellos.
if (condición) {
...
} else if (condición) {

}else{

}
EJEMPLO
var cajon = parseInt(prompt('Elegir el cajón abierto (1-4):'));
if (cajon == 1) {
alert('Contiene varias herramientas de dibujo: papel, lápices, etc.');
} else if (cajon == 2) {
alert('Contenido hardware: cables, componentes, etc.');
} else if (cajon == 3) {
alert('Ah, el cajón está cerrado, ¡qué malo!');
} else if (cajon == 4) {
alert('Contiene la ropa: camisas, pantalones, etc.');
} else {
alert('La noticia del día: el gabinete contiene sólo cuatro cajones y hasta que se demuestre
lo contrario, los cajones negativos no existen.');
}
Switch
Se comporta como un condición cuyo valor es igualado en todos los casos.

switch (variable) {
case 0:
...
break;

case 1:
...
break;
case 2:
...
break;
default:
...
break;
}
Ejemplo

const edad = 18;


switch (edad) {
case 0: document.write('Recién nacio’);
break;
case 18: document.write('Ya es un hombre’);
break;
case 65: document.write('Recién jubilado’);
break;
default: document.write('¿Aún estas vivo?’);
break;
}
EJERCICIOS CONDICIONALES
1. Teniendo una nota de 0 a 10, mostrarla de la forma: Insuficiente, Suficiente, Bien, notable, Sobresaliente.
De 0 a 4.9 Insuficiente.
De 5.0 a 5.9 Suficiente
De 6.0 a 6.9 Bien.
De 7.0 a 8.9 Notable.
De 9.0 a 10 Sobresaliente.

2. Desarrolla un programa donde por medio del tipo de un motor, determinar qué tipo de fluido puede
trasportar éste según las siguientes condiciones:
- Si el tipo de motor es 0, mostrar un mensaje por consola indicando “No hay establecido un valor definido
para el tipo”.
- Si el tipo de motor es 1, mostrar un mensaje por consola indicando “Agua”.
- Si el tipo de motor es 2, mostrar un mensaje por consola indicando “Gasolina”.
- Si el tipo de motor es 3, mostrar un mensaje por consola indicando “Hormigón”.
- Si no se cumple ninguno de los valores anteriores mostrar el mensaje “No existe un valor válido”.
Bucles FOR
for ([expresionInicial]; [condicion]; [expresionIncremento])

En este ejemplo donde mostramos los números del 0 al 3.

// Bucle for tradicional

for (let i = 0; i <= 3; i += 1) {


document.write(i);
}

//0 //1 //2 //3


Bucles FOR
// Decrecer del 10 al 0
let i=0;

for (i = 10; i > 0; i -= 1) {


document.write(i);
} //

Intervalo de 5 entre el 0 a 100


for (let i = 0; i <= 100; i += 5) {
document.write(i);
}
Bucles For In
La declaración de JavaScript for in recorre las propiedades de un objeto:

Sintaxis:

for (key in object) {


// code block to be executed
}

Ejemplo 1:

const person = {fname:"John", lname:"Doe", age:25};

let text = "";


for (let x in person) {
text += person[x];
}
Bucles For In
Ejemplo 2:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript For In</h2>


<p>The for in statement can loops over array values:</p>

<p id="demo"></p>

<script>
const numbers = [45, 4, 9, 16, 25];

let txt = "";


for (let x in numbers) {
txt += numbers[x] + "<br>";
}

document.getElementById("demo").innerHTML = txt;
</script>

</body>
</html>
While
Solo admite un condicional, por lo que si nuestro software
no llega a cambiar esa variable tendremos un bucle infinito.

let i = 0;

while (i<=5) {
document.write('me ejecuto hasta que alguien que la condición
sea verdadera’);
i += 1;
}
While
Un sencillo ejemplo que recorre los números del 30 al 50.

let num = 30;

while (num <= 50) {


num += 1;
document.write(num);
}
Do While
El do whilebucle es una variante del bucle while. Este ciclo
ejecutará el bloque de código una vez, antes de verificar si la
condición es verdadera, luego repetirá el ciclo mientras la
condición sea verdadera.

Sintaxis:
do {
// code block to be executed
}
while (condition);
Do While
Ejemplo:
<html>
<body>
<h2>JavaScript Do While Loop</h2>
<p id="demo"></p>
<script>
let text = ""
let i = 0;

do {
text += "<br>The number is " + i;
i++;
}
while (i < 10);

document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
EJERCICIO BUCLES

1. Dado un número N, mostrar todos los números del 1 al N.

2. Dado N sueldos. Mostrar su suma y cuantos hay mayores de $1.000.000.

3. Hacer un programa que imprima los números del 10 a 20 pero saltando cada otro número, es
decir, que imprima 10, 12, 14, 16, 18 y 20.

4. Imprimir los números del 1 a al 100 pero deforma descendente, es decir, 100, 99, 98 ... 1
JavaScript Arrays
• Un array es una variable especial, que puede contener
más de un valor:

const cars = ["Saab", "Volvo", "BMW"];

Accede a un elemento de array haciendo referencia


al número de índice :

const cars = ["Saab", "Volvo", "BMW"];


let car = cars[0];
JavaScript Arrays
Con JavaScript, se puede acceder al array completoa haciendo referencia al nombre de la matriz:

<html>
<body>
<h2>JavaScript Arrays</h2>

<p id="demo"></p>

<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>
JavaScript Arrays
La length propiedad de una matriz devuelve la longitud de una matriz (el número de
elementos de la matriz).

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>
<p>The length property returns the length of an array.</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.length;
</script>

</body>
</html>
JavaScript Arrays
Una forma de recorrer un array es usando un for bucle:
<html>
<body>
<h2>JavaScript Arrays</h2>
<p>The best way to loop through an array is using a standard for loop:</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;

for (let i = 0; i < fLen; i++) {


text += "<li>" + fruits[i] + "</li>";
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>
Ejercicios con arrays

• Almacene en un array los 10 primeros números pares y luego imprímalos en pantalla.

• Desarrollar un programa que por medio de un array de permita almacenar el peso de 5 personas para
posteriormente:

‐ Determinar el promedio del peso de las 5 personas.


‐ Determinar cuántas personas superar el promedio del peso.
‐ Determinar cuántas personas son inferiores al promedio del peso.
• parseInt()

• Convierte una cadena a un número entero.


• Sintaxis: parseInt(string, radix)
• parseFloat()

• Convierte una cadena a un número de punto flotante.


• Sintaxis: parseFloat(string)
• Number()

• Convierte un valor a un número.


• Funciona con cadenas que representan enteros o flotantes, pero
devuelve NaN si la conversión no es posible.
• Sintaxis: Number(value)
• Boolean()

• Convierte un valor a su equivalente booleano.


• Sintaxis: Boolean(value)
• String()

• Convierte un valor a una cadena de texto.


• Sintaxis: String(value)

También podría gustarte