javascript: sintaxis básica€¦ · sintaxis sintaxis similar a java y c distingue entre...
TRANSCRIPT
JavaScript: Sintaxis básica
Qué es JavaScript?
Lenguaje de programación interpretado
orientado a objetos, imperativo,
debilmente tipado y dinámico
Derivado del estándar ECMAScript
Client-side (Navegador web)
Páginas web dinámicas
También existe versión para el servidor,
Server Side JavaScript (SSJS): Node.js
Un poco de historia
Escasa velocidad de las conexiones de internet en 1990 => Lenguaje de programación con ejecución en cliente
Brendan Eich (Netscape): LiveScript-JavaScript.
Microsoft: JScript
ECMA (European Computer Manufacturers Association) Estandariza JavaScript en1997 (ECMA-262) => ECMAScript
ISO adopta ECMA-262 => ISO/IEC-16262
Marca registrada de Oracle Corporation.
Usado con licencia por los productos creados por:
◦ Netscape Communications
◦ Fundación Mozilla
JavaScript y JScript, son compatibles con ECMAScript, aunque también proprocionan características adicionales, no descritas en la especificaciones de ECMA
Incluir Javascript en XHTML
El código JavaScript se encierra entre etiquetas <script> y se puede incluir
en cualquier parte del documento aunque se recomienda definirlo en la
cabecera del documento (dentro de la etiquetas <head)>:
Incluir JavaScript en un archivo
externo Las instrucciones JavaScript se pueden incluir en un archivo externo de tipo
JavaScript que los documentos XHTML enlazan mediante la etiqueta <script>. Se
pueden crear todos los archivos JavaScript que sean necesarios y cada documento
XHTML puede enlazar tantos archivos JavaScript como necesite.
Incluir JavaScript dentro del código
HTML
El mayor inconveniente de este método es que
ensucia innecesariamente el código XHTML de
la página y complica el mantenimiento del
código JavaScript.
Cuando el navegador no soporta JavaScript
Algunos navegadores no disponen de soporte completo de JavaScript, e incluso algunos usuarios bloquean completamente el uso de JavaScript.
En estos casos, es habitual que si la página web requiere JavaScript para su correcto funcionamiento, se incluya un mensaje de aviso al usuario indicándole que debería activar JavaScript para disfrutar completamente de la página.
El lenguaje HTML define la etiqueta <noscript> para mostrar un mensaje al usuario cuando su navegador no puede ejecutar JavaScript. El siguiente código muestra un ejemplo del uso de la etiqueta <noscript>
La etiqueta <noscript> se debe incluir en el interior de la etiqueta <body> (normalmente se incluye al principio de <body>). El mensaje que muestra <noscript> puede incluir cualquier elemento o etiqueta XHTML.
Cuando el navegador no soporta JavaScript
El código de los scripts se suele poner
dentro de comentarios
◦ Para evitar problemas con navegadores
antiguos
◦ O si el usuario ha desactivado JavaScript
Entrada desde teclado
prompt
Permite mostrar una ventana con un campo
de texto donde el Usuario puede introducir
información
Salida en JavaScript Desde JavaScript podemos escribir en:
◦ La página HTML (document.write())
◦ Un cuadro de diálogo (window.alert())
◦ En la consola del navegador (console.log())
◦ Un elemento HTML (innerHTML)
Sintaxis Sintaxis similar a Java y C
Distingue entre mayúsculas y minúsculas
Hola ≠ HOLA ≠ hola ≠ hOLa
El código siguiente es perfectamente válido
var Var=VAR;
No se define el tipo de las variables: al crear una variable, no es necesario indicar el tipo de dato que almacenará. De esta forma, una misma variable puede almacenar diferentes tipos de datos durante la ejecución del script.
No es necesario terminar cada sentencia con el carácter de punto y coma (;) pero si recomendable. Si es obligatorio el uso del punto y coma si la línea que contiene más de una instrucción.
var a=5; var b=6;
var a=5
var b=6
Sintaxis
Se pueden incluir comentarios. El contenido de los mismos no se visualiza por pantalla, PERO SI que se envían al navegador del usuario junto con el resto del script, por lo que es necesario ser cuidadoso con la información incluida en esos comentarios.
Comentarios de una línea
// a continuación se muestra un mensaje
alert("mensaje de prueba");
var nombre="" // comentario después del código
Comentarios de varias líneas /* Los comentarios de varias líneas son muy útiles cuando se necesita incluir bastante información en los comentarios */
alert("mensaje de prueba");
No se tienen en cuenta los espacios en blanco y las nuevas líneas.
Sintaxis
Palabras reservadas Las siguientes son palabras reservadas y no pueden ser utilizadas como variables, funciones, métodos o identificadores de objetos.
Reserved keywords as of ECMAScript 6
◦ break
◦ Case, class, catch, const, continue
◦ Debugger, default, delete, do,
◦ else, export, extends
◦ Finally, for, function,
◦ if, import, in, instanceof, let,
◦ new, return, super, switch, this, throw
◦ Try, typeof, var, void
◦ While, with
◦ yield
Las siguientes estan reservadas como palabras futuras por la especificación ECMAScript:
◦ Enum, Implements, package, protected, static, interface, private
Sintaxis
Palabras reservadas
Futuras Palabras Reservadas en estandares antiguos
Las siguientes estan reservadas como palabras futuras por la antigua especificación ECMAScript (ECMAScript 1 hasta 3).
◦ abstract,
◦ Boolean, byte, char
◦ double
◦ Final, float
◦ goto
◦ int
◦ long
◦ native
◦ Short, synchronized, transient
◦ volatile
Adicionalmente, también están reservados los literales "null", "true", y "false".
Variables y tipos de datos
Variables
Tipos de datos
◦ Números
◦ Cadenas de texto
◦ Valores booleanos
◦ Otros
Variables Zonas de memoria que almacenan datos.
Nombres de variable ◦ Pueden contener unicamente caracteres alfanúmeros, $ y
_
◦ Empiezan por una letra, $ o _
Declaración
var mi_variable_1;
var otra_variable;
var una_variable, dos_variable;
Inicialización
var mi_variable_1=1;
var otra_variable=“Pedro”;
var una_variable=otra_variable;
var variable1=5, variable2=6;
var dos_variable=prompt(“Inicializa la variable tu mismo”);
Palabras reservadas
Descriptivos
No hay que declarar el tipo
Variables
Cuáles de los siguientes son nombres de variable válidos en JavaScript?
◦ edad
◦ 2telefono
◦ tu nombre
◦ Apellido%1
◦ paisNacimiento
◦ _nombre
◦ Return
◦ $dia_semana
Variables: ámbito
Ámbito de las variables: http://librosweb.es/libro/javascript/capitulo_4/ambito_de_las_variables.html
Ámbito global (la página). ◦ Declaradas
<script>
var variable_global;
function unaFuncion () {
// resto del código de la función
}
</script>
◦ No declaradas <script>
function unaFuncion () {
variable_global=8;
// resto del código de la función
}
</script>
Variables: ámbito local
Ámbito local.
◦ Declaradas (siempre) <script>
function unaFuncion () {
var variable_local_función;
// resto del código de la función
}
function otraFuncion () {
variable_global=8;
if condicion {
var variable_local_if;
// resto del código del if
}
// resto del código de la función
}
</script>
Nombre_Variable_Global ≠ Nombre_variable_local
(dentro del ámbito local)
Variables: ámbito local
Ámbito local (declaración de una variable
mediante let, (ECMAScript 2015 (ES6) standard.)
◦ La sentencia let declara una variable de
alcance local, la cual, opcionalmente, puede ser
inicializada con algún valor:
Variables: tipos de datos Tipo Descripción Ejemplo
Cadena Una serie de caracteres dentro de comillas dobles o
simples.
"Hola mundo"
’adiós mundo’
Número Un número con o sin decimales, con o sin signo. 9.45
-9
Boolean Un valor verdadero o falso. true
false
Null Sin contenido, simplemente es un valor null. null
Object
Cualquier objeto software definido por sus propiedades
y métodos (los arrays también son objetos).
Function La definición de una función.
Variables: tipos de datos
Numéricas ◦ Se utilizan para almacenar valores numéricos enteros (integer) o
decimales (float). Los números decimales utilizan el carácter . (punto) en
vez de , (coma) para separar la parte entera y la parte decimal
Cadenas de texto ◦ Se utilizan para almacenar caracteres, palabras y/o frases de texto. Para
asignar el valor a la variable, se encierra el valor entre comillas dobles o
simples
Para incluir caracteres especiales ‘\’
Secuencias de escape
Secuencia Resultado
\\
\’
\”
\n
\t
\v
\f
\r
\b
\
’
”
Salto de línea
Tabulación horizontal
Tabulación vertical
Salto de página
Retorno de carro
Retroceso
Variables: tipos de datos
Valores booleanos
◦ Una variable de tipo boolean almacena un tipo
especial de valor que solamente puede tomar
dos valores: true (verdadero) o false (falso).
Variables indefinidas
◦ Se les asigna el valor null
Indefinida = null
Objetos
Conversiones entre tipos de datos
4 + 5 // resultado = 9
4 + "5" // resultado = "45"
4 + 5 + "6“ // resultado = "96"
Orden de evaluación de las operaciones
DE A Función Ejemplo Resultado
Cadena
Número
entero parseInt
parseInt("34") 34
parseInt("89.76") 89
Número parseFloat
parseFloat("34") 34
parseFloat("89.76") 89.76
4 + 5 + parseInt("6") 15
Número Cadena (" " + 3400) "3400"
(" " + 3400).length 4