Manejo de La Sintaxis Del Lenguaje

JavaScript
2. Manejo de la sintaxis del

lenguaje
Características de JavaScript
§ ¿Qué es JavaScript?
ú Lenguaje de programación interpretado utilizado
fundamentalmente para dotar de comportamiento
dinámico a las páginas web.
ú Cualquier navegador web actual incorpora un
intérprete para código JavaScript.
Características de JavaScript
§ Su sintaxis se asemeja a la de C++ y Java.
§ Sus objetos utilizan herencia basada en
prototipos.
§ Es un lenguaje débilmente tipado.
Integración del código con etiquetas HTML
§ JavaScript en el mismo documento HTML.
ú Uso de unas etiquetas predefinidas para marcar el texto
(<script> y </script>).
ú Puede incluirse en cualquier parte del documento, aunque
se recomienda que se defina dentro de la cabecera del
documento HTML. (uso de async y defer)
ú Esta técnica suele utilizarse cuando se definen
instrucciones que se referenciarán desde cualquier parte
del documento o cuando se definen funciones con
fragmentos de código genéricos.
§ JavaScript en el mismo documento HTML.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
alert("Prueba de JavaScript");
</script>
</head>
<body>
<h1>Ejemplo 1: código embebido</h1>
</body>
</html>
§ JavaScript en un archivo externo.
ú Las mismas instrucciones de JavaScript que se
incluyen entre un bloque <script></script> pueden
almacenarse en un fichero externo con extensión .js.
ú La forma de acceder y enlazar esos ficheros .js con el
documento HTML/XHTML es a través de la propia
etiqueta <script>.
ú No existe un límite en el número de ficheros .js que
pueden enlazarse en un mismo documento
HTML/XHTML
§ JavaScript en un archivo externo.
Archivo mensaje.js:
alert("Hola Mundo");
Archivo ejemplo2.html:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="/inc/mensaje.js"></script>
</head>
§ JavaScript en elementos HTML.
ú Consiste en insertar fragmentos de JavaScript dentro
de atributos de etiquetas HTML de la página.
ú Forma de controlar los eventos que suceden
asociados a un elemento HTML concreto.
ú Principal desventaja: el mantenimiento y
modificación del código puede resultar más
complicado.
§ JavaScript en elementos HTML.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p onclick="alert(‘Hola Mundo’);”>
Ejemplo 3: código en atributos
</p>
</body>
</html>
Actividad
§ Modificar con JS el color de fondo de la página.
document.bgColor = red;
alert(‘Cambiamos el color de la
p\xE1gina’);
</script>
El lenguaje JavaScript: sintaxis
§ La sintaxis de JavaScript es muy similar a la de
Java o C++.
§ Especifica aspectos como:
ú Definición de comentarios.
ú Nombre de las variables.
ú Separación entre las diferentes instrucciones del
código.
ú Etc.
§ Mayúsculas y minúsculas:
ú El lenguaje distingue entre mayúsculas y

minúsculas, a diferencia de por ejemplo HTML.
ú No es lo mismo utilizar alert() que Alert().
§ Comentarios en el código:
ú Los comentarios no se interpretan por el
navegador.
ú Existen dos formas de insertar comentarios:
Doble barra (//) – Se comenta una sola línea de

código.
Barra y asterisco (/* al inicio y */ al final) – Se
comentan varias líneas de código.
§ Comentarios en el código – Ejemplo:
// Este modo permite comentar una sola línea
/* Este modo permite realizar
comentarios de
varias líneas */
</script>
§ Tabulación y saltos de línea:
ú JavaScript ignora los espacios, las tabulaciones y

los saltos de línea con algunas excepciones.
ú Emplear la tabulación y los saltos de línea mejora
la presentación y la legibilidad del código.
§ Tabulación y saltos de línea:
var i,j=0;
for (i=0;i<5;i++){
alert("Variable i: "+i;
for (j=0;j<5;j++){
if (i%2==0){
document.write(i + "-" + j + "<br>");
}
}
}
</script>
§ El punto y coma:
ú Se suele insertar un signo de punto y coma (;) al

final de cada instrucción de JavaScript.
ú Su utilidad es separar y diferenciar cada
instrucción.
ú Se puede omitir si cada instrucción se encuentra
en una línea independiente (la omisión del punto
y coma no es una buena práctica de
programación).
§ Palabras reservadas:
ú Algunas palabras no se pueden utilizar para

definir nombres de variables, funciones o
etiquetas.
ú Es aconsejable no utilizar tampoco las palabras
reservadas para futuras versiones de JavaScript.
ú En www.ecmascript.org es posible consultar
todas las palabras reservadas de JavaScript.
Variables
§ Se pueden definir como zonas de la memoria

de un ordenador que se identifican con un
nombre y en las cuales se almacenan ciertos
datos.
§ El desarrollo de un script conlleva:
ú Declaración de variables.
ú Inicialización de variables.
30
Variables
§ Declaración de variables:
ú Se declaran mediante la palabra clave var

seguida por el nombre que se quiera dar a la
variable.
var mi_variable;
ú Es posible declarar más de una variable en una
sola línea.
var mi_variable1, mi_variable2;
31
Variables
§ Inicialización de variables:
ú Se puede asignar un valor a una variable de tres

formas:
Asignación directa de un valor concreto.
Asignación indirecta a través de un cálculo en el que se implican a otras variables o
constantes.
Asignación a través de la solicitud del valor al usuario del programa.
ú Ejemplos:
var mi_variable_1 = 30;
var mi_variable_2 = mi_variable_1 + 10;
var mi_variable_3 = prompt(‘Introduce
un valor:’);
32
Variables
§ Inicialización de variables:
var primer_saludo = "hola";
var segundo_saludo =
primer_saludo;
primer_saludo = "hello";
alert(segundo_saludo);
</script>
33
Variables locales ECMA 6
§ La variable tipo let, a diferencia de var no puede ser

accesible más allá de su scope:
(function() {
console.log(global); // undefined
console.log(local); // undefined
if(true) {
var global = "I'm global";
let local = "I'm only local";
}
console.log(global); // I'm global
console.log(local); //undefined
})();
34
Variables const
§ De forma análoga a otros lenguajes, se ha

definido un tipo de varaible que solo puede
asignarse en su declaración, y no puede ser
modificada.
const URL = 'www.mydomain.com’;
URL = 'whatever'; // ERROR!!
§ Si una const se define dentro de un scope,
solo pertenecerá a ese scope.
35
Tipos de datos
§ Los tipos de datos especifican qué tipo de valor

se guardará en una determinada variable.
§ Los seis tipos de datos primitivos de JavaScript
son:
ú Números.
ú Cadenas de texto.
ú Valores booleanos.
ú Undefined
ú Null
ú Symbol (ECMA 6 constantes con propiedades)
36
Tipos de datos
§ Números:
ú En JavaScript existe sólo un tipo de dato

numérico. (Entero, decimal, científico, octal,
hexadecimal)
ú Todos los números se representan a través del
formato de punto flotante de 64 bits.
ú Este formato es el llamado double en los
lenguajes Java o C++.
ú Dos especiales: Infinity (1/0) y NaN (Error “hola”/1)
37
Tipos de datos
§ Números:
var maxValue = Number.MAX_VALUE;
var minValue = Number.MIN_VALUE;
alert("Max Value: " + maxValue);
alert("Min Value: " + minValue);
alert("Valor especial: " + maxValue*2);
</script>
38
Tipos de datos
Actividad u2e1_numeros:
§ Crea un programa en el que crees 5 variables
numéricas (entero, decimal, científico, octal y
hexadecimal).
§ A las variables les asignarás valores en el formato de
cada tipo
§ Muestra con 5 alerts el valor de cada variable.
§ Comenta el código indicando tu nombre y el nombre
del ejercicio.
39
Tipos de datos
§ Cadenas de texto:
ú El tipo de datos para representar cadenas de texto

se llama string.
ú Se pueden representar letras, dígitos, signos de
puntuación o cualquier otro carácter de Unicode.
ú La cadena de caracteres se debe definir entre
comillas dobles o comillas simples.
40
Tipos de datos
§ Cadenas de texto - Secuencias de escape:

Secuencia de escape Resultado
\\ Barra invertida
\’ Comilla simple
\” Comillas dobles
\n Salto de línea
\t Tabulación horizontal
\v Tabulación vertical
\f Salto de página
\r Retorno de carro
\b Retroceso
41
Tipos de datos
§ Cadenas de texto - Secuencias de escape:

alert("I\'m = I am\nI don\'t = I do not");
</script>
42
Tipos de datos
§ Valores booleanos:
ú También conocido como valor lógico.

ú Sólo admite dos valores: true o false.
ú Es muy útil a la hora de evaluar expresiones
lógicas o verificar condiciones.
43
Tipos de datos
§ Función:
ú Typeof
var prueba = 12;
alert(typeof prueba);
ú Eval
var prueba = eval(“3+5")
44
Conversión tipos de datos
45
Operadores
§ JavaScript utiliza principalmente cinco tipo

de operadores:
ú Aritméticos.
ú Lógicos.
ú De asignación.
ú De comparación.
ú Condicionales.
46
Operadores
§ Operadores aritméticos:
ú Permiten realizar cálculos elementales entre
variables numéricas.
Operador Nombre
+ Suma
- Resta
* Multiplicación
/ División
% Módulo
++ Incremento
-- Decremento
47
Operadores Aritméticos
§ Ejemplos:
var numero = 5;
numero++;
alert(numero); // numero = 6
var numero = 5;
--numero;
alert(numero); // numero = 4
48
Operadores
§ Operadores lógicos:
ú Combinan diferentes expresiones lógicas con el fin
de evaluar si el resultado de dicha combinación es
verdadero o falso.
Operador Nombre
&& Y
|| O
! No
49
Operadores lógicos
50
Operadores
§ Operadores de asignación:
ú Permiten obtener métodos abreviados para evitar
escribir dos veces la variable que se encuentra a la
izquierda del operador.
Operador Nombre
+= Suma y asigna
-= Resta y asigna
*= Multiplica y asigna
/* Divide y asigna
%= Módulo y asigna
51
Operadores
§ Operadores de comparación:
ú Permiten comparar todo tipo de variables y
devuelve un valor booleano.
Operador Nombre
< Menor que
<= Menor o igual que
== Igual
> Mayor que
>= Mayor o igual que
!= Diferente
=== Estrictamente igual
!== Estrictamente diferente
52
Operadores
Actividad u2e2_comparacion:
§ Crea un programa en el que muestres el resultado de
varias operaciones mediante alert, mostrando el
texto exacto de la operación realizada y su resultado.
ú Ej: let operacion1 = 10 ==10;
alert(“La operación 10 == 10 es “+operacion1);
§ Las operaciones a realizar son:
10 == 10 10===10 10===10.0 “Mario” ==“mario”
“Mario” > “mario” “Mario” < “mario” “123” == 123
”123” === 123 parseInt(“123”)===123
§ Comenta el código indicando tu nombre y el nombre
del ejercicio.
53
Operadores
§ Operadores condicionales:
ú Permite indicar al navegador que ejecute una
acción en concreto después de evaluar una
expresión.
Operador Nombre
?: Condicional
Otros operadores de objetos: Punto, corchetes,

Delete, in, Instanceof
54
Operadores Condicionales
let dividendo = prompt("Introduce el dividendo: ");
let divisor = prompt("Introduce el divisor: ");
let resultado;
divisor != 0 ? resultado = dividendo/divisor :
alert("No es posible la división por cero");
alert("El resultado es: " + resultado);
</script>
55
Estructuras de control
§ Con las sentencias condicionales se puede

gestionar la toma de decisiones y el posterior
resultado por parte del navegador.
§ Dichas sentencias evalúan condiciones y
ejecutan ciertas instrucciones en base al
resultado de la condición.
§ Las sentencias condicionales en JavaScript son:
ú if.
ú switch.
ú while.
ú for.
56
Sentencia condicional: if
57
Ejemplo: if
var mostrado = false;

var usuarioPermiteMensajes =true;
If (!mostrado && usuarioPermiteMensajes)
{
alert("Mensaje");
}
58
Ejemplo: if - else
let edad = 18;
if (edad >= 18)
{
alert("Eres mayor de edad");
}
else {
alert("Todavía eres menor de edad");
}
59
Ejemplo: if - else
If (edad < 12) {
alert("Todavía eres muy pequeño");
}
else if (edad < 19) {
alert("Eres un adolescente");
} else {
alert("Piensa en cuidarte un poco más");
}
60
Estructuras de control
Actividad u2e3_ifelse:
§ Crea un programa que pida al usuario que introduzca una edad y
muestre el siguiente mensaje en función del número introducido:
0-12: Niño
13-26: Joven
26-60: Adulto
>60: Jubilado
§ Para guardar un valor del usuario utilizamos el siguiente código:

let respuesta = prompt (“Mensaje”);
§ También comprobará que no se meta un número menor de 0. Comenta
el código con los comentarios que estimes necesarios.
61
Sentencia condicional: switch
62
Sentencia condicional: switch
Ambos switch y case permiten expresiones arbitrarias.

63
Ejemplo: switch
var op = prompt("Ingrese un símbolo");
switch ( op )
{
case '+': alert("Suma");
break;
case '-': alert("Resta");
break;
default: alert("Otro");
break;
}
¿El tipo importa?

64
Sentencia condicional: while
65
Ejemplo: while
var i = 0;
var j = 10;
while (i < 100) {
if (i == j)
break;
i++;
}
document.write(i); // Output:
66
Sentencia condicional: do-while
67
Ejemplo: do-while
var i = 0;
do {
document.write(i + " ");
i++;
} while (i < 10);
// Output: 0 1 2 3 4 5 6 7 8 9
68
Sentencias condicional: for
69
Ejemplo: for
var mensaje = "Hola, estoy dentro de un bucle";
for (var i = 0; i < 5; i++)
{
alert(mensaje);
}
§ Romper el bucle: break et continue
70
Bucles
Actividad u2e4_bucle:
§ Crea un programa que genere un listado de horas que vayan desde las
9 hasta las 21:30 de 30 minutos en 30 minutos.
§ En lugar de mostrar un alert, utiliza la instrucción
document.write(“Mensaje”) que muestra los datos en el propio HTML.
§ Ten en cuenta que tendrás que utilizar un for para las horas y (por
ejemplo) una variable booleana que irá cambiando de true a false si es
hora en punto u hora media.
§ Comenta el código con los comentarios que estimes necesarios.
71
Bucles
Actividad u2e5_bucle2:
§ Crea un control parental para que no se pueda entrar en una página.
§ Se pedirá al usuario que escriba el apellido del primer presidente de la
democracia (si no sabes quién fue, busca en Google ;)
§ En caso de que el usuario introduzca mal nombre y apellido, muestre
como mensaje: “ERROR. Inténtelo de nuevo. ¿Cuál fue el primer
presidente de la democracia española?”
§ Mientras el usuario no introduzca el valor correcto, el mensaje seguirá
saliendo.
§ Comenta el código con los comentarios que estimes necesarios.
72

Manejo de La Sintaxis Del Lenguaje

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Manejo de La Sintaxis Del Lenguaje

Cargado por

Copyright:

Formatos disponibles

JavaScript

2. Manejo de la sintaxis del

ú El lenguaje distingue entre mayúsculas y

Doble barra (//) – Se comenta una sola línea de

ú JavaScript ignora los espacios, las tabulaciones y

ú Se suele insertar un signo de punto y coma (;) al

ú Algunas palabras no se pueden utilizar para

§ Se pueden definir como zonas de la memoria

ú Se declaran mediante la palabra clave var

ú Se puede asignar un valor a una variable de tres

§ La variable tipo let, a diferencia de var no puede ser

§ De forma análoga a otros lenguajes, se ha

§ Los tipos de datos especifican qué tipo de valor

ú En JavaScript existe sólo un tipo de dato

ú El tipo de datos para representar cadenas de texto

§ Cadenas de texto - Secuencias de escape:

§ Cadenas de texto - Secuencias de escape:

ú También conocido como valor lógico.

§ JavaScript utiliza principalmente cinco tipo

Otros operadores de objetos: Punto, corchetes,

§ Con las sentencias condicionales se puede

var mostrado = false;

§ Para guardar un valor del usuario utilizamos el siguiente código:

Ambos switch y case permiten expresiones arbitrarias.

¿El tipo importa?

§ Romper el bucle: break et continue

También podría gustarte