Scribd
Cargar
57 vistas

Unidad 2. Sintaxis de JavaScript

Este documento proporciona una introducción a la sintaxis de JavaScript. Explica que JavaScript es un lenguaje de scripting interpretado que se ejecuta en el cliente, y que se puede introducir código JavaScript mediante la etiqueta <script>. También cubre temas como comentarios, salida y entrada de datos, variables, y arrays en JavaScript.

Cargado por

pehhh
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
57 vistas

Unidad 2. Sintaxis de JavaScript

Este documento proporciona una introducción a la sintaxis de JavaScript. Explica que JavaScript es un lenguaje de scripting interpretado que se ejecuta en el cliente, y que se puede introducir código JavaScript mediante la etiqueta <script>. También cubre temas como comentarios, salida y entrada de datos, variables, y arrays en JavaScript.

Cargado por

pehhh
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 52

Unidad 2.

Sintaxis de JavaScript

2º CFGS DAW
Desarrollo Web en Entorno Cliente
2021-22

Pedro Vte. Sánchez Martínez


1 – Introducción
Al haber superado el módulo Programación de primer curso se tienen los
conocimientos de programación mínimos.

En esta unidad se repasarán esos conocimientos aplicados a la sintaxis de


JavaScript

Toda la documentación de JavaScript se puede consultar en el siguiente


enlace:
https://www.w3schools.com/js/default.asp 2

Pedro Vte. Sánchez Martínez


1 – Introducción

JavaScript es un lenguaje de script interpretado que se ejecuta en el cliente.

De Script: documento con instrucciones en un lenguaje de programación.

Interpretado: se ejecuta traduciendo línea a línea cada instrucción.

Pedro Vte. Sánchez Martínez


1 – Introducción

Para introducir código en JavaScript se utiliza la etiqueta <script>.

<script>
alert(‘Mensaje desde JavaScript’);
</script>

Pedro Vte. Sánchez Martínez


1 – Introducción

El punto y coma!

Al ser interpretado, Javascript, reconoce cada línea como una instrucción


independiente. Cuando hay un salto de línea acaba una instrucción.

Esto significa que no es necesario poner el punto y coma al final de cada


instrucción, pero como buena costumbre al programar, será obligatorio
ponerlo.

No pasa nada, estáis acostumbrados ya que en Java lo poníais. XD


5

Pedro Vte. Sánchez Martínez


1 – Introducción

<script type="text/javascript" language="javascript">


alert(‘Mensaje desde JavaScript’);
</script>

Atributos
type: en HTML5 es opcional.

language: está obsoleto y no debe utilizarse aunque si se utiliza no da


error, debería usarse type en su lugar.
6

Pedro Vte. Sánchez Martínez


1 – Introducción
Dos opciones:

<script type="text/javascript">
alert(‘Mensaje desde JavaScript’);
</script>

<script type="text/javascript">
alert(‘Mensaje desde JavaScript’);
</script>
7

Pedro Vte. Sánchez Martínez


1 – Introducción
Tercera y mejor opción:

Es conveniente separar la lógica de negocio de la aplicación web del


contenido (html) y del estilo (css). Por ello se recomienda incluir el código
JavaScript en archivos propios con extensión .js igual que con los archivos
con css.

<script src="ruta_hasta_un_fichero_con_extensión_js">
</script>

Al usar esta opción no puede haber contenido dentro de la etiqueta script.


8

Pedro Vte. Sánchez Martínez


1 – Introducción

Se puede usar la etiqueta script para introducir tanto código JavaScript


como se quiera.

Aunque se puede añadir el código JavaScript en cualquier parte del código


HTML lo recomendable es incluirlo dentro de la sección <head>.

Pedro Vte. Sánchez Martínez


2 – Comentarios

En JavaScript existen dos tipos de comentarios.

Comentario de línea: //

Comentario de bloque: /*
*/

Los comentarios no son interpretados por el interprete de JavaScript del


navegador.
10

Pedro Vte. Sánchez Martínez


3 – Salida de datos
Mediante Javascript se puede generar salida en diferentes puntos:

Ventana de alerta:
 window.alert("mensaje");
 alert("mensaje");
Con \n se pone un salto de línea.

Consola del navegador:


 console.log("mensaje");

Dentro del documento HTML:


 document.write("mensaje"); 11
 document.getElementById("body").innerHTML = "mensaje“;
Pedro Vte. Sánchez Martínez
3 – Salida de datos
Mediante Javascript se puede generar salida en diferentes puntos:

Dentro del documento HTML:

document.write("mensaje");

Con la función anterior se pueden añadir elementos a la página web.

document.write("<p>Esto es un párrafo</p>");
document.write("<div>");
document.write("Hola "+ nick +", esto es una etiqueta div.");
document.write("</div>"); 12

Pedro Vte. Sánchez Martínez


4 – Entrada de datos
Mediante Javascript se puede capturar datos de entrada:

confirm():
var respuesta;
respuesta = confirm("¿Seguro que quiere cancelar?");
alert("Ha pulsado: "+ respuesta);

prompt():
var provincia;
provincia = promtp("Introduzca la provincia");
alert("Ha introducido: "+ provincia);
13

Pedro Vte. Sánchez Martínez


Nota importante
Las funciones vistas anteriormente:

alert();
console.log();
confirm();
prompt();

Se usan principalmente en del desarrollo de la aplicación web. Sustituyendo


esas funcionalidades por otras funciones o instrucciones que otorgan una
interacción más integrada y fluida.

14

Pedro Vte. Sánchez Martínez


Nota importante
Las funciones vistas anteriormente:

alert();
confirm();
prompt();

Paran la ejecución del script hasta que el usuario actúe con la ventana
emergente.

Esto puede derivar en que la página web no se haya cargado del todo
cuando aparece dicha ventana emergente dando una mala experiencia de
usuario. 15

Pedro Vte. Sánchez Martínez


5 – Variables

JavaScript es un lenguaje débilmente tipado por lo que cuando se declara


una variable no es necesario indicar el tipo de dato que va a almacenar.

Además se puede cambiar el tipo de dato que almacena durante a


ejecución del script.

Hay que tener cuidado con este comportamiento cuando se programa.

16

Pedro Vte. Sánchez Martínez


5 – Variables

Para usar una variable en JavaScript simplemente se utiliza un identificador,


nombre de la variable.

Aunque es mejor utilizar la palabra reservada var para declarar una variable
antes de usarla.

var nombre;
var edad;

17

Pedro Vte. Sánchez Martínez


5 – Variables
Tipos de variables

Como se ha visto no se declaran las variables según su tipo.

Aún así, las variables pueden contener los siguientes tipos de valores:

 Números: enteros (7, -13, 26) o reales/decimales (3.1, 5.0, -2.9).

 Lógicos: true false

 Cadenas o strings: se pueden usar comillas simples o dobles, las cadenas


son arrays de caracteres. 18

Pedro Vte. Sánchez Martínez


5 – Variables
Tipos de variables

var edad=23, nueva_edad, incremento;

var nombre="Rosa García";

inc=4;

nueva_edad=edad+inc;

alert(nombre +" dentro de "+ inc +" años tendrá "+ nueva_edad +" años");
19

Pedro Vte. Sánchez Martínez


5 – Variables
Tipos de variables

Aunque JavaScript es débilmente tipado, se pueden usar funciones de


conversión para forzar el tipo de dato almacenado.

parseInt()

parseFloat()

variable.toString()

20

Pedro Vte. Sánchez Martínez


5 – Variables
Tipos de variables

var num="100"; // Es una cadena


var num2="100.13"; // Es una cadena
var num3=11; // Es un entero
var n=parseInt(num); // Almacena un entero. Si hubiera habido
// parte decimal la truncaría.
var n2=parseFloat(num); // Almacena un decimal
var n3=num3.toString(); // Almacena una cadena

21

Pedro Vte. Sánchez Martínez


5 – Variables
Tipos de variables

Es importante saber que los datos recibidos con la función prompt siempre
se almacenan como una cadena.

var anyo;
var edad;
anyo = promtp("¿En qué año naciste?");
edad = 2019 – anyo; // Esto producirá un error
edad = 2019 – parseInt(anyo);
alert("Tienes "+ edad +" años. ");
22

Pedro Vte. Sánchez Martínez


6 – Arrays
Arrays

También conocidos como vectores, son una colección de elementos.


Se puede definir un array de diferentes maneras:

var vector = new Array();

var frutas = new Array("Manzana", "Pera", "Melocotón", "Sandía");

var consolas = ["Switch", "PS4", "Xbox"];

var alumno = ["Ana", "Gómez", 23]; 23

Pedro Vte. Sánchez Martínez


6 – Arrays
Arrays

El acceso a los elementos de un array se realiza con el índice de la posición:

var frutas = new Array("Manzana", "Pera", "Melocotón", "Sandía");

var miFrutaFavorita = frutas[2];

for(var i=0; i<frutas.length; i++)


alert(frutas[i]);
24

Pedro Vte. Sánchez Martínez


6 – Arrays
Arrays

Los elementos de un array pueden ser a su vez otro array, así se crean los
arrays multidimensionales:

var consolas = [["Wii", "Switch"], ["PS3", "PS4"], ["Xbox", "Xbox ONE"]];

alert(consolas[2][0]);

25

Pedro Vte. Sánchez Martínez


6 – Arrays
Arrays

Sobre los arrays se pueden realizar diferentes acciones mediante funciones.


https://www.w3schools.com/js/js_array_methods.asp

miArray.length;

Obtiene la longitud del array.

26

Pedro Vte. Sánchez Martínez


7 – Operadores

Combinando variables, valores y operadores se formulan expresiones más


complejas que son parte esencial a la hora de programar.

Existen diferentes tipos de operadores.

Son los mismos que en la mayoría de lenguajes de programación.

27

Pedro Vte. Sánchez Martínez


7 – Operadores

Asignación Aritméticos Comparación Lógicos


= + == &&
+= - != ||
-= * > !
*= / <
/= % >=
%= ++ <=
--
28

Pedro Vte. Sánchez Martínez


8 – Estructuras de control

Permiten controlar el flujo de información en los programas.

Igual que pasa con los operadores, son similares a los usados en la mayoría
de lenguajes de programación.

A continuación se muestran ejemplos de uso de cada uno de ellos.

29

Pedro Vte. Sánchez Martínez


8 – Estructuras de control
if

if (condición) {
// instrucciones que se ejecutan si la condición se cumple
}

if (condición) {
// instrucciones que se ejecutan si la condición se cumple
}
else{
// instrucciones que se ejecutan si la condición no se cumple
} 30

Pedro Vte. Sánchez Martínez


8 – Estructuras de control
if

if (condiciónA) {
// instrucciones que se ejecutan si la condiciónA se cumple
}
else if (condiciónB) {
// instrucciones que se ejecutan si la condiciónB se cumple
}
else{
// instrucciones que se ejecutan si la condición no se cumple
}
31

Pedro Vte. Sánchez Martínez


8 – Estructuras de control
if

var dia;
dia=prompt("Introduce el día de la semana ");
if (xdia == "domingo") {
alert("Hoy es festivo");
}
else
alert ("Hoy no es domingo, es muy probable que tengas que trabajar");

32

Pedro Vte. Sánchez Martínez


8 – Estructuras de control
if

if (condición) {

}
else{
if (condiciónB) {
// instrucciones que se ejecutan si la condiciónB se cumple
}
else{
// instrucciones que se ejecutan si la condición no se cumple
} 33

} Pedro Vte. Sánchez Martínez


Actividades

Actividad 1
La estructura de control condicional

34

Pedro Vte. Sánchez Martínez


8 – Estructuras de control
switch

switch(expresion) {
case x: // bloque de código
break;
case y: // bloque de código
break;
default: // bloque de código
}

En case puede ponerse un número, un carácter ("s") o una variable. 35

Pedro Vte. Sánchez Martínez


Actividades

Actividad 2
La estructura de control condicional múltiple

36

Pedro Vte. Sánchez Martínez


8 – Estructuras de control
for

for (Inicialización del índice; Condición; Modificación en el índice){


// instrucciones
}

for (i=0; i<=100; i++) {


alert(i);
}

En case puede ponerse un número, un carácter ("s") o una variable. 37

Pedro Vte. Sánchez Martínez


8 – Estructuras de control
while

while (condición){
// instrucciones
}

var i=0;
while (i<=100) {
alert (i);
i += 1; // opciones similares: i++ i = i + 1;
}
38

Pedro Vte. Sánchez Martínez


8 – Estructuras de control
do – while

do {
// instrucciones
} while(condición);

do {
var auxclave = prompt("introduce la clave ","vivaYo");
} while (auxclave != "dracarys")
alert("Has acertado la clave");

39

Pedro Vte. Sánchez Martínez


8 – Estructuras de control
break y continue

Se pueden utilizar en los bucles.

La instrucción break hace que el bucle deje de ejecutarse.

La instrucción continue hace que salte a la siguiente ejecución del bucle.

40

Pedro Vte. Sánchez Martínez


8 – Estructuras de control
break y continue

for (i = 0; i < 10; i++) {


if (i === 3)
break;
text += "The number is " + i + "<br>";
}

for (i = 0; i < 10; i++) {


if (i === 3)
continue;
text += "The number is " + i + "<br>";
41
}
Pedro Vte. Sánchez Martínez
Actividades

Actividad 3
Estructuras de control repetitivas

42

Pedro Vte. Sánchez Martínez


9 – Funciones

Las funciones y procedimientos aparecieron con la metodología de


programación modular.

Permiten extraer partes de código para estructurar los programas y para su


reutilización.

En la teoría, la diferencia entre funciones y procedimientos es que las


funciones devuelven un valor y los procedimientos no.

En JavaScript tanto funciones como procedimientos se tratan como


funciones. 43

Pedro Vte. Sánchez Martínez


9 – Funciones
La definición de una función consta de las siguientes partes básicas:

 Un identificador (nombre de la función).

 Una lista de parámetros de entrada.

 Las llaves que agrupan las instrucciones incluidas en la función.

Definir una función es simplemente especificar su nombre y definir qué


acciones realizará en el momento en que sea invocada, mediante la palabra
reservada function. 44

Pedro Vte. Sánchez Martínez


9 – Funciones
Función que no devuelve ningún valor  procedimiento

function nombrefuncion (parámetro1, parámetro2...){


// instrucciones
}

Función que devuelve un valor  función

function nombrefuncion (parámetro1, parámetro2...){


// instrucciones
return valor;
} 45

Pedro Vte. Sánchez Martínez


9 – Funciones
Las funciones se utilizan mediante una llamada:

var resultado = suma(23, 74, 18);

Para llamar a una función es necesario especificar su nombre e introducir


los parámetros que queremos que utilice.

Esta llamada se puede efectuar en una línea de órdenes o bien a la derecha


de una sentencia de asignación en el caso de que la función devuelva algún
valor debido al uso de la instrucción return. 46

Pedro Vte. Sánchez Martínez


9 – Funciones

La definición de una función se puede realizar en cualquier lugar del


programa.

Se recomienda hacerlo al principio del código o en un fichero "js " que


contenga funciones  biblioteca de funciones.

La llamada a una función se realizará cuando sea necesario, es decir, cuando


se demande la ejecución de las instrucciones que hay dentro de ella.
47

Pedro Vte. Sánchez Martínez


9 – Funciones
// Definiciones de las funciones
function suma (sumando1,sumando2){
return sumando1 + sumando2;
}
function profesor (){
alert ("El profesor es: Álex Torres");
}

var op1=5;op2=25;
var resultado;

resultado=suma(op1,op2);
console.log (op1 +"+"+ op2 +"="+ resultado); // console.log(op1 +"+"+ op2 +"="+ suma(op1, op2));

profesor();
48
10 – Ámbito de las variables
Las variables se pueden utilizar en el ámbito en el que se declaran.

Se deben declarar antes de ser usadas.

El ámbito de una variable se delimita por:

 Las llaves de apertura y cierre que delimitan los bloques de instrucciones.

 El archivo HTML donde se ejecuta el código JavaScript.

49

Pedro Vte. Sánchez Martínez


10 – Ámbito de las variables

var vbleglobal1 = 20;


function prueba(){
var vblelocal1 = 10; //Definición de variable local
var suma = vbleglobal1 + vblelocal1;
alert ("La suma de la vble local (10) y la global (20) es "+ suma);
}

prueba();
alert ("La variable global es "+vbleglobal1);

50

Pedro Vte. Sánchez Martínez


Spoiler
Desde JavaScript se pueden alterar los elementos HTML de una página web
y las propiedades de dichos elementos.

Es necesario conocer el valor del atributo id del elemento HTML.

Se usa la siguiente función getElementById() sobre el documento.

document.getElementById('matrix').src = “nuevaFoto.jpg";
51

Pedro Vte. Sánchez Martínez


Actividades

Actividad 4
Funciones

52

Pedro Vte. Sánchez Martínez

También podría gustarte