JavaScript
PROGRAMACIÓN PÁGINAS WEB
¿Qué es JavaScript?
• Lenguaje de script (guión: secuencia de instrucciones) para la creación de páginas web
dinámicas
• Crear visualizaciones más atractivas y mayor interactividad
• Lenguaje interpretado (no se compila)
• El navegador se encarga de interpretar y ejecutar el código JavaScript
• JavaScript NO es Java, Basa su sintaxis en C
• Trabaja con los elementos del HTML
• No se declaran los tipos de variables
¿Qué es JavaScript?
• Se ejecuta en el cliente, nunca en el servidor. No interactúa con el servidor
• Es un lenguaje de programación.
• Javascript por si sólo no permite la creación de aplicaciones independientes.
Necesita estar insertado en un HTML para poder operar.
• Para programarlo sólo necesita de un editor de texto o de html que le permita
editar sus documentos.
• Muy utilizado para validación de datos
• Muy utilizado para poner efectos en las páginas de Web
Ventajas de JavaScript
• Ventajas
• Desarrollo rápido
• (Relativamente) fácil de aprender
• Independencia de plataforma
• Gastos mínimos
• Desventajas
• Rango limitado de métodos y funciones integradas
• No cuenta con ocultación de código, por tanto, limita la seguridad
Inclusión JavaScript
La etiqueta <SCRIPT> </SCRIPT>
• Sintaxis
<SCRIPT type="text/javascript" src="[Link]"></SCRIPT>
• Atributo SRC: fichero código fuente
<SCRIPT type="text/javascript"> SRC: Especifica el URL del archivo con
function valor_abs(form) { JavaScript, de no estar en la misma página. El
var num = eval([Link])
if (num >= 0) [Link] = num archivo deberá tener la extensión .js
else num = -num
[Link] = num LANGUAGE: Especifica el lenguaje de
} guiones utilizado, ya que JavaScript no es el
</SCRIPT> único que se puede utilizar
Ocultamiento de guiones
• Algunos navegadores no soportan scripts, por lo que ignorarán la marca
<SCRIPT>, pero no el contenido
• Solución: ocultarlo como comentario
<script language="JavaScript">
<!– Ocultar guion
Programa en JavaScript
// fin de ocultamiento -->
</script>
No soporta JavaScript
Sintaxis JavaScript. Mayúsculas y minúsculas.
Espacios, tabuladores, saltos línea y ;
Salida de texto
• La función básica de casi cualquier programa es producir texto con resultados
• En JavaScript, la operación básica es la salida de texto en la ventana del
navegador
• Se utilizan dos comandos
[Link]( )
[Link]( )
• Se pueden incluir marcas
[Link]( "<b>Hola</b>" );
Ventanas de diálogo
• Hacen aparecer ventanas adicionales con mensajes o entradas de datos
• Advertencia:
alert( "Haz click en OK para continuar" );
• Entrada:
prompt( "¿Cuál es tu color favorito?", "azul" );
Sintaxis JavaScript. Variables
• Son identificadores que pueden contener valores, y éstos pueden variar su valor
• No es preciso declararlas, pero se recomienda Declaración
• var ejemplo;
Declaración y asignación
• var ejemplo = "Hola";
Asignación
• ejemplo = "Hola";
Invocación
• [Link]( ejemplo );
Sintaxis JavaScript. Variables. Definición
Sintaxis JavaScript. Variables. Definición
No recomendado
Sintaxis JavaScript. Identificadores y caracteres
especiales
Sintaxis JavaScript. Identificadores
Sintaxis JavaScript. Variables.
Se tienen cuatro tipos básicos: • Números
• 17, 21.3, 34e3 (decimales)
• Números (enteros, decimales, etc...)
• 056 (octal)
• Letras y números (cadenas de • 0x5F (hexadecimal)
caracteres)
• Cadenas de caracteres (cadenas)
• Valores lógicos (True y False) • "Hola!"
• Objetos (una ventana, un texto, un • Booleanos
formulario, el navegador, etc...) • true
• false
• Objetos
Sintaxis JavaScript. Números
Sintaxis JavaScript. Cadenas de texto (Strings) y
booleanos
Sintaxis JavaScript. Pedir un dato por pantalla
• Para pedir un dato por pantalla
• nombrevariable=prompt(“Frase a pedir: ”); <script>
var nombre; var edad;
<script> nombre=prompt(“Dame tu nombre: ”);
var nombre; var edad;
edad=prompt(“Dame tu edad: ”);
nombre=prompt(“Dame tu nombre: ”);
[Link](“Hola “+nombre);
edad=prompt(“Dame tu edad: ”);
[Link](”Tienes ”+edad+” años”);
[Link](“Hola “);
[Link](nombre); </script>
[Link](”Tienes”);
[Link](edad); Unión de cadenas
[Link](”años”); • "Hola, " + "qué tal!"
</script> • bienvenida += ", se bienvenido"
Sintaxis JavaScript. Conversión de tipos
<script language="javascript">
• Convertir a entero
var a = "334";
• var numero1=prompt(“Dame un nº sin decimales”); var b = 3;
var c = parseInt(a)+b;
• numero= parseInt(numero1)
var d = a+b;
• Convertir a Float [Link]("parseInt(a)+b = "+c);
[Link](" a+b = "+d);
• var numero2=prompt(“Dame un nº con decimales”);
</script>
• numero= parseFloat(numero2)
<script language="javascript">
var a = "334.33";
var b = 3;
var c = parseFloat(a)+b;
var d = a+b;
[Link]("parseFloat(a)+b = "+c);
[Link](" a+b = "+d);
</script>
Sintaxis JavaScript. Expresiones
• Colección de variables, operadores y otras expresiones que se evalúan a un solo valor
• Asignación
• asigna un valor a una variable Ejemplos:
• Aritméticas • x = y / m + 2;
• evalúan un número • y = x >= m + 2;
• Cadenas • if ( x + 5 >= 25 && peso < 30 )
• evalúan una cadena
• direccion = “Pino # 100” + “Col. Granjas”
• Lógicas
• evalúan un valor booleano
Sintaxis JavaScript. Asignación
Operadores asignación
Operador Significado Ejemplo Es igual a
= Asignación de datos x = 1;
+= Asignación y suma x += 1; x = x + 1;
-= Asignación y resta x -= 1; x = x - 1;
*= Asignación y producto x *= 1; x = x * 1;
/= Asignación y división x /= 1; x = x / 1;
%= Asignación y módulo x %= 1; x = x % 1;
Operadores asignación
Sintaxis JavaScript. Incremento y decremento
Sintaxis JavaScript. Incremento y decremento
Sintaxis JavaScript. Expresiones numéricas
Sintaxis JavaScript. Expresiones numéricas
Sintaxis JavaScript. Expresiones numéricas
Operadores aritméticos
Operador Significado Ejemplo
+ suma números y cadenas
- resta
* producto
/ división
% módulo (resto) 20 % 10 (= 0)
variable++; ++variable;
++ suma tipográfica
(variable = variable + 1)
variable--; --variable;
-- (dos guiones) resta tipográfica
(variable = variable - 1)
Operadores lógicos
Operador Significado Ejemplo
&& Y 1 == 1 && 2 < 1 es falso
|| O 1 == 2 || 15 > 2 es verdad
! NO !(1 > 2) es verdad
• && "y" lógico, devuelve true cuando ambos operandos son verdaderos y falso en otro caso
• || "o" lógico, devuelve true cuando alguno de los operandos es verdadero
• ! "no" lógico, devuelve true si el operando es falso, y false si el operando es verdadero
Sintaxis JavaScript. Expresiones lógicas. Negación
Sintaxis JavaScript. Expresiones lógicas. AND
Sintaxis JavaScript. Expresiones lógicas. OR
Sintaxis JavaScript. Expresiones comparación
Operadores de comparación
Operador Significado Ejemplo
== es igual a 5 == 8 es falso
!= no es igual a 5 != 1 es verdad
> es mayor que 5 > 1 es verdad
< es menor que 5 < 8 es verdad
>= es mayor o igual que 5 >= 8 es falso
<= es menor o igual que 5 <= 1 es falso
Control de flujo. Instrucciones condicionales. If
Control de flujo. Instrucciones condicionales. If
Control de flujo. Instrucciones condicionales. Switch
Control de flujo. Bucles. For
Control de flujo. Bucles. While
Control de flujo. Bucles. Do while
Control de flujo. Bucles. Break y continue
Arrays
Arrays
Arrays
Control de flujo. Bucles. For in
Funciones
• Una función es un conjunto de sentencias o procedimientos que realizarán unas
operaciones adecuadas, haciendo uso de determinadas variables y propiedades.
• Las funciones se definen con la palabra reservada function y en minúsculas.
Deben tener un return como norma.
• La funcion puede recibir parámetros no importando su tipo.
• El contenido de una función va entre llaves. { }
• Cada sentencia Javascript debe terminar con punto y coma (;)
Funciones. Sintaxis
Funciones: invocación
Ámbito variables
Ejemplo:
var variableGlobal=0;
function nuevaFuncion() {
var variableLocal=1;
variableGlobal =0;
}
Funciones. Argumentos
Funciones. Argumentos
Funciones. Argumentos
