- Estréllate y Arde - https://www.estrellateyarde.org -
Manual de JavaScript: Lo más básico
JavaScript es un lenguaje de scripts desarrollado por Netscape para incrementar las funcionalidades del lenguaje HTML. Sus principales características son:
Recursos
Para embeber un script JavaScript en una página HTML se utiliza la etiqueta <script>, que habitualmente va en el HEAD, especificando el atributo type=text/javascript. Por ejemplo, este código captura el evento onclick y ejecuta una función Javascript:
<html> <head> <script type="text/javascript"> <!-- function mensaje() { alert("Esto es un mensaje de JavaScript") } // --> </script> </head> <body> <form name="formulario"> <input type="button" name="but" value=1 onclick="mensaje()"> </form> </body> </html>
También es muy habitual ubicar el código JavaScript en un archivo externo (extensión .js) que se cargará con la página HTML. Para ello incluiremos en el HEAD la URL del archivo mediante la etiqueta <script> con el atributo type=text/javascript:
<html> <head> <script type="text/javascript" src="script.js"> </script> </head> <body> <form name="formulario1"></p> <input type="button" name="but" value=1 onclick="mensaje()"> </form> </body> </html>
Siendo el contenido del fichero script.js:
function mensaje() { alert("Esto es un mensaje de JavaScript") }
Comentario de una línea:
// comentario de una linea
Comentario de varias líneas:
/* comentario de varias
lineas */
Si utilizamos la etiqueta <script> para embeber JavaScript tenemos que "comentar" el código situándolo entre etiquetas de comentarios HTML ya que de no hacerlo así los navegadores antiguos mostrarán el código en pantalla. Además, la etiqueta de cierre del comentario (-->) debe ir precedida por una etiqueta de comentario JavaScript (//) para que el script no tome la etiqueta de cierre HTML por una instrucción y devuelva un error:
<script type="text/javascript"> <!-- document.write("Hola<br />") // --> </script>
Los bloques de código que integran una unidad van entre llaves y pueden anidarse:
function mensaje() { alert("Esto es un mensaje de JavaScript") }
JavaScript es case sensitive, es decir, es sensible a mayúsculas y minúsculas, las funciones MiFuncion() y mifuncion() son distintas.
Los datos se almacenan en variables, que deben considerarse como contenedores de información: las variables son espacios de memoria que contienen un dato al que se accede mediante el nombre de la variable.
var year_inicio // variable local year_inicio = 2004
o bien podemos declararla y asignarle un valor a la vez:
var year_inicio = 2004 // variable local
mes_inicio = 2004 // variable global
Para saber el tipo de dato contenido en un variable o en el resultado de una expresión disponemos del operador typeof que devuelve el tipo de dato contenido en una variable y puede devolver seis valores diferentes: number, string, object, function, boolean o undefined. Por ejemplo:
<script language="javascript"> <!-- dato = prompt("Teclea cualquier cosa:") tipo = typeof dato document.write("<p>Entrada: " + dato + "<br />Tipo: " + tipo + "<p>") //--> </script>
Si tecleamos hola devuelve:
Has tecleado: hola Tipo de dato: string
mi_variable = "Hola" otra_variable = 'Hola'
mi_variable = "Comillas dobles con 'simples' en el interior" otra_variable = 'Comillas simples con "dobles" en el interior'
mi_variable = "Prueba de " + "\"concatenado\" " + '\'doble\''
También escaparemos la propia barra inclinada (\\), por ejemplo para incluirla en una URL:
document.write("http:\\\\temp")
Caracteres especiales | |
Carácter | Significado |
\n | Nueva línea |
\t | Tabulador |
\r | Retorno de carro |
\f | Alimentación de formulario |
\b | Retroceso de un espacio |
Admiten dos sintaxis, la clásica y la alternativa, combinados con el signo "=".
Operadores aritméticos | ||
Operador | Descripción | Sintaxis alternativa |
x = z | Asigna a x el valor de z | |
+ | Suma dos números | A += B equivale a: A = A + B |
+, & | Concatenación de cadenas: "A" & "B" = "AB" Devuelve una cadena aunque alguna de las variables no sea una cadena: "AB" + 123 = "AB123" |
A &= B equivale a: A = A & B |
- | Resta dos números | A -= B equivale a: A = A - B |
* | Multiplica dos números | A *= B equivale a: A = A * B |
/ | Divide dos números y devuelve un número de coma flotante: 5 / 2 = 2.5 El separador decimal es un punto |
A /= B equivale a: A = A / B |
ˆ | Potencia: xˆ2 = x2 | A ˆ= B equivale a: A = A ˆ B |
% | Devuelve el resto de la división: 5 % 2 = 1 |
A %= B equivale a: A = A % B |
x++ | Incrementa x en una unidad | x++ es equivalente a x = x + 1 |
x-- | Decrementa x en una unidad | x-- es equivalente a x = x - 1 |
z = ++x | Incrementa x en una unidad y asigna x a z | |
z = --x | Decrementa x en una unidad y asigna x a z | |
z = x++ | Asigna x a z y luego incrementa x en una unidad | |
z = x-- | Asigna x a z y luego decrementa x en una unidad | |
-x | Devuelve x negado |
Hay tres posibles estados lógicos: verdadero (TRUE, 1), falso (FALSE, 0) y nulo (Null, undefined).
Operadores lógicos | |
Operador | Descripción |
&& | Y, AND: sólo devuelve TRUE si todos los operandos son TRUE Si cualquiera de las expresiones es FALSE devuelve FALSE En el resto de casos devuelve NULL |
|| | O, OR: sólo devuelve FALSE si todos los operandos son FALSE Si cualquiera de las expresiones es TRUE devuelve TRUE En el resto de casos devuelve NULL |
! | NO, NOT: devuelve TRUE si el operando es FALSE y FALSE si es TRUE Si el operando es NULL devuelve NULL |
ˆ | XOR: si una y sólo una de las expresiones es TRUE devuelve TRUE Si cualquiera de las expresiones es NULL devuelve NULL |
Devuelven verdadero (TRUE) o falso (FALSE) y se utilizan habitualmente en condicionales.
Operadores de comparación | |
Operador | Descripción |
== | Devuelve TRUE si los dos operandos son iguales, sin tener en cuenta el tipo de dato 2 == "2" devuelve TRUE |
=== | Devuelve TRUE si los dos operandos son iguales y coincide el tipo de dato 2 === "2" devuelve FALSE |
!= | Devuelve TRUE si los operadores son distintos |
!== | Devuelve TRUE si los operadores son distintos en valor o en tipo de datos |
> | Devuelve TRUE si el primer operando es mayor que el segundo |
< | Devuelve TRUE si el primer operando es menor que el segundo |
>= | Devuelve TRUE si el primer operando es mayor o igual que el segundo |
<= | Devuelve TRUE si el primer operando es menor o igual que el segundo |
Article printed from Estréllate y Arde: https://www.estrellateyarde.org
URL to article: https://www.estrellateyarde.org/discover/manual-javascript-lo-mas-basico
Click here to print.
Copyright © 2010 Estrellate y Arde