Incluir JavaScript en el mismo documento XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de código JavaScript en el propio documento</title>
<script type="text/javascript">
alert("Un mensaje de prueba");
</script>
</head>
<body>
<p>Un párrafo de texto.</p>
</body>
</html>
Definir JavaScript en un archivo externo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de código JavaScript en el propio documento</title>
<script type="text/javascript" src="/js/codigo.js"></script>
</head>
<body>
<p>Un párrafo de texto.</p>
</body>
</html>
Nota: en esta URL "https://studentplace98.blogspot.com/2018/12/google-drive-como-servidor-web-usando.html" se indica como crear un archivo .js en Google Drive.
Incluir JavaScript en los elementos XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de código JavaScript en el propio documento</title>
</head>
<body>
<p onclick="alert('Un mensaje de prueba')">Un párrafo de texto. </p>
</body>
</html>
Uso de <noscript>:
<head> ... </head>
<body>
<noscript>
<p>Bienvenido a Mi Sitio</p>
<p>La página que estás viendo requiere para su funcionamiento el uso de JavaScript. Si lo has deshabilitado intencionadamente, por favor vuelve a activarlo.</p>
</noscript>
</body>
Comentario de una sola línea (//):
// a continuación se muestra un mensaje
alert("mensaje de prueba");
Comentario 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");
Hola Mundo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>El primer script</title>
<script type="text/javascript">
alert("Hola Mundo!");
</script>
</head>
<body>
<p>Esta página contiene el primer script</p>
</body>
</html>
Las variables se crean mediante la palabra reservada var:
Ejemplo 1:
var numero_1 = 3;
var numero_2 = 1;
var resultado = numero_1 + numero_2;
Ejemplo 2:
var numero_1;
var numero_2;
numero_1 = 3;
numero_2 = 1;
var resultado = numero_1 + numero_2;
Variables numéricas:
var iva = 16; // variable tipo entero
var total = 234.65; // variable tipo decimal
Variables tipo texto (string):
var mensaje = "Bienvenido a nuestro sitio web";
var nombreProducto = 'Producto ABC';
var letraSeleccionada = 'c';
/* El contenido de texto1 tiene comillas simples, por lo que se encierra con comillas dobles */
var texto1 = "Una frase con 'comillas simples' dentro";
/* El contenido de texto2 tiene comillas dobles, por lo que se encierra con comillas simples */
var texto2 = 'Una frase con "comillas dobles" dentro';
var texto3 = 'Una frase con \'comillas simples\' dentro';
var texto4 = "Una frase con \"comillas dobles\" dentro";
Nota:
Si se quiere incluir... Se debe incluir...
Una nueva línea \n
Un tabulador \t
Una comilla simple \'
Una comilla doble \"
Una barra inclinada \\
Variables booleanas:
var clienteRegistrado = false;
var ivaIncluido = true;
Arreglos:
Sintaxis:
var nombre_array = [valor1, valor2, ..., valorN];
Ejemplo:
var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado","Domingo"];
var diaSeleccionado = dias[0]; // diaSeleccionado = "Lunes"
var otroDia = dias[5]; // otroDia = "Sábado"
Operador de asignación (=):
var numero1 = 3;
Operador de incremento (++):
Ejemplo 1:
var numero = 5;
++numero;
alert(numero); // numero = 6
Ejemplo 2:
var numero = 5;
numero++;
alert(numero); // numero = 6
Ejemplo 3:
var numero1 = 5;
var numero2 = 2;
numero3 = numero1++ + numero2;
// numero3 = 7, numero1 = 6
Ejemplo 4:
var numero1 = 5;
var numero2 = 2;
numero3 = ++numero1 + numero2;
// numero3 = 8, numero1 = 6
Operador de decremento (--):
var numero = 5;
--numero;
alert(numero); // numero = 4
Operador lógico de negación (!):
var visible = true;
alert(!visible); // Muestra "false" y no "true"
var cantidad = 0;
vacio = !cantidad; // vacio = true
cantidad = 2;
vacio = !cantidad; // vacio = false
var mensaje = "";
mensajeVacio = !mensaje; // mensajeVacio = true
mensaje = "Bienvenido";
mensajeVacio = !mensaje; // mensajeVacio = false
Operador lógico AND (&&):
var valor1 = true;
var valor2 = false;
resultado = valor1 && valor2; // resultado = false
valor1 = true;
valor2 = true;
resultado = valor1 && valor2; // resultado = true
Operador lógico OR (||):
var valor1 = true;
var valor2 = false;
resultado = valor1 || valor2; // resultado = true
valor1 = false;
valor2 = false;
resultado = valor1 || valor2; // resultado = false
Operadores aritméticos (+, -, *, / y %):
Ejemplo 1:
var numero1 = 10;
var numero2 = 5;
resultado = numero1 / numero2; // resultado = 2
resultado = 3 + numero1; // resultado = 13
resultado = numero2 – 4; // resultado = 1
resultado = numero1 * numero 2; // resultado = 50
Ejemplo 2:
var numero1 = 10;
var numero2 = 5;
resultado = numero1 % numero2; // resultado = 0
numero1 = 9;
numero2 = 5;
resultado = numero1 % numero2; // resultado = 4
Combinación del operador de asignación con los operadores aritméticos:
var numero1 = 5;
numero1 += 3; // numero1 = numero1 + 3 = 8
numero1 -= 1; // numero1 = numero1 - 1 = 4
numero1 *= 2; // numero1 = numero1 * 2 = 10
numero1 /= 5; // numero1 = numero1 / 5 = 1
numero1 %= 4; // numero1 = numero1 % 4 = 1
Operadores relacionales (>, <, >=, <=, == y !=):
Ejemplo 1:
var numero1 = 3;
var numero2 = 5;
resultado = numero1 > numero2; // resultado = false
resultado = numero1 < numero2; // resultado = true
numero1 = 5;
numero2 = 5;
resultado = numero1 >= numero2; // resultado = true
resultado = numero1 <= numero2; // resultado = true
resultado = numero1 == numero2; // resultado = true
resultado = numero1 != numero2; // resultado = false
Ejemplo 2:
var texto1 = "hola";
var texto2 = "hola";
var texto3 = "adios";
resultado = texto1 == texto3; // resultado = false
resultado = texto1 != texto2; // resultado = false
resultado = texto3 >= texto2; // resultado = false
Operador de concatenación (+):
var mensaje1 = "Hola";
var mensaje2 = " Mundo";
var mensaje = mensaje1 + mensaje2; // mensaje = "Hola Mundo"
var variable1 = "Hola ";
var variable2 = 3;
mensaje = variable1 + variable2; // mensaje = "Hola 3"
Estructura de control de flujo if:
Ejemplo 1:
var mostrarMensaje = true;
if(mostrarMensaje) {
alert("Hola Mundo");
}
Ejemplo 2:
var mostrarMensaje = true;
if(mostrarMensaje == true) {
alert("Hola Mundo");
}
Ejemplo 3:
var mostrado = false;
if(!mostrado) {
alert("Es la primera vez que se muestra el mensaje");
}
Ejemplo 4:
var mostrado = false;
var usuarioPermiteMensajes = true;
if(!mostrado && usuarioPermiteMensajes) {
alert("Es la primera vez que se muestra el mensaje");
}
Estructura de control de flujo if...else:
Ejemplo 1:
var edad = 18;
if(edad >= 18) {
alert("Eres mayor de edad");
}
else {
alert("Todavía eres menor de edad");
}
Ejemplo 2:
var nombre = "";
if(nombre == "") {
alert("Aún no nos has dicho tu nombre");
}
else {
alert("Hemos guardado tu nombre");
}
Ejemplo 3:
if(edad < 12) {
alert("Todavía eres muy pequeño");
}
else if(edad < 19) {
alert("Eres un adolescente");
}
else if(edad < 35) {
alert("Aun sigues siendo joven");
}
else {
alert("Piensa en cuidarte un poco más");
}
Estructura de control de flujo lazo for:
Ejemplo 1:
var mensaje = "Hola, estoy dentro de un bucle";
for(var i = 0; i < 5; i++) {
alert(mensaje);
}
Ejemplo 2:
var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];
for(var i=0; i<7; i++) {
alert(dias[i]);
}
Estructura de control de flujo lazo for...in:
var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];
for(i in dias) {
alert(dias[i]);
}
Función length (longitud de cádena):
var mensaje = "Hola Mundo";
var numeroLetras = mensaje.length; // numeroLetras = 10
var vocales = ["a", "e", "i", "o", "u"];
var numeroVocales = vocales.length; // numeroVocales = 5
Función concat (concatenar):
var mensaje1 = "Hola";
var mensaje2 = mensaje1.concat(" Mundo"); // mensaje2 = "Hola Mundo"
var array1 = [1, 2, 3];
array2 = array1.concat(4, 5, 6); // array2 = [1, 2, 3, 4, 5, 6]
array3 = array1.concat([4, 5, 6]); // array3 = [1, 2, 3, 4, 5, 6]
Función toUpperCase (convertir a mayúsculas):
var mensaje1 = "Hola";
var mensaje2 = mensaje1.toUpperCase(); // mensaje2 = "HOLA"
Función toLowerCase (convertir a minúsculas):
var mensaje1 = "HolA";
var mensaje2 = mensaje1.toLowerCase(); // mensaje2 = "hola"
Función charAt (posición):
var mensaje = "Hola";
var letra = mensaje.charAt(0); // letra = H
letra = mensaje.charAt(2); // letra = l
Función indexOf (carácter):
var mensaje = "Hola";
var posicion = mensaje.indexOf('a'); // posicion = 3
posicion = mensaje.indexOf('b'); // posicion = -1
Función lastIndexOf (carácter):
var mensaje = "Hola";
var posicion = mensaje.lastIndexOf('a'); // posicion = 3
posicion = mensaje.lastIndexOf('b'); // posicion = -1
Función substring (sub cadena):
Ejemplo 1:
var mensaje = "Hola Mundo";
var porcion = mensaje.substring(2); // porcion = "la Mundo"
porcion = mensaje.substring(5); // porcion = "Mundo"
porcion = mensaje.substring(7); // porcion = "ndo"
Ejemplo 2:
var mensaje = "Hola Mundo";
var porcion = mensaje.substring(-2); // porcion = "Hola Mundo"
Ejemplo 3:
var mensaje = "Hola Mundo";
var porcion = mensaje.substring(1, 8); // porcion = "ola Mun"
porcion = mensaje.substring(3, 4); // porcion = "a"
Ejemplo 4:
var mensaje = "Hola Mundo";
var porcion = mensaje.substring(5, 0); // porcion = "Hola "
porcion = mensaje.substring(0, 5); // porcion = "Hola "
Función split (separador):
Ejemplo 1:
var mensaje = "Hola Mundo, soy una cadena de texto!";
var palabras = mensaje.split(" ");
// palabras = ["Hola", "Mundo,", "soy", "una", "cadena", "de", "texto!"];
Ejemplo 2:
var palabra = "Hola";
var letras = palabra.split(""); // letras = ["H", "o", "l", "a"]
Función join (unión):
var array = ["hola", "mundo"];
var mensaje = array.join(""); // mensaje = "holamundo"
mensaje = array.join(" "); // mensaje = "hola mundo"
Función pop (elimina el último elemento del array y lo devuelve):
var array = [1, 2, 3];
var ultimo = array.pop(); // ahora array = [1, 2], ultimo = 3
Función push (añade un elemento al final del array):
var array = [1, 2, 3];
array.push(4); // ahora array = [1, 2, 3, 4]
Función shift (elimina el primer elemento del array y lo devuelve):
var array = [1, 2, 3];
var primero = array.shift(); // ahora array = [2, 3], primero = 1
Función unshift (añade un elemento al principio del array):
var array = [1, 2, 3];
array.unshift(0); // ahora array = [0, 1, 2, 3]
Función reverse (modifica un array colocando sus elementos en el orden inverso):
var array = [1, 2, 3];
array.reverse(); // ahora array = [3, 2, 1]
Función isNaN (no es un número):
var numero1 = 0;
var numero2 = 0;
if(isNaN(numero1/numero2)) {
alert("La división no está definida para los números indicados");
}
else {
alert("La división es igual a => " + numero1/numero2);
}
Función toFixed (digitos):
var numero1 = 4564.34567;
numero1.toFixed(2); // 4564.35
numero1.toFixed(6); // 4564.345670
numero1.toFixed(); // 4564
Valor NaN para indicar un valor numérico no definido:
var numero1 = 0;
var numero2 = 0;
alert(numero1/numero2); // se muestra el valor NaN
Valor Infinity (hace referencia a un valor numérico infinito y positivo, también existe el valor –Infinity para los infinitos negativos):
var numero1 = 10;
var numero2 = 0;
alert(numero1/numero2); // se muestra el valor Infinity
Estructura de una función:
function nombre_funcion() {
...
}
Ejemplo 1:
// Definición de la función
function calculaPrecioTotal(precio) {
var impuestos = 1.16;
var gastosEnvio = 10;
var precioTotal = ( precio * impuestos ) + gastosEnvio;
}
// Llamada a la función
calculaPrecioTotal(23.34);
Ejemplo 2:
// Definición de la función
function calculaPrecioTotal(precio) {
var impuestos = 1.16;
var gastosEnvio = 10;
var precioTotal = ( precio * impuestos ) + gastosEnvio;
return precioTotal;
}
// Llamada a la función
var precioTotal = calculaPrecioTotal(23.34);
Sentencia break:
var cadena = "En un lugar de la Mancha de cuyo nombre no quiero acordarme...";
var letras = cadena.split("");
var resultado = "";
for(i in letras) {
if(letras[i] == 'a') {
break;
}
else {
resultado += letras[i];
}
}
alert(resultado);
// muestra "En un lug"
Sentencia continue:
var cadena = "En un lugar de la Mancha de cuyo nombre no quiero acordarme...";
var letras = cadena.split("");
var resultado = "";
for(i in letras) {
if(letras[i] == 'a') {
continue;
}
else {
resultado += letras[i];
}
}
alert(resultado);
// muestra "En un lugr de l Mnch de cuyo nombre no quiero cordrme..."
Estructura while:
Sintaxis:
while(condicion) {
...
}
Ejemplo:
var resultado = 0;
var numero = 100;
var i = 0;
while(i <= numero) {
resultado += i;
i++;
}
alert(resultado);
Estructura do...while:
Sintaxis:
do {
...
} while(condicion);
Ejemplo:
var resultado = 1;
var numero = 5;
do {
resultado *= numero; // resultado = resultado * numero
numero--;
} while(numero > 0);
alert(resultado);
Estructura switch:
Sintaxis:
switch(variable) {
case valor_1:
...
break;
case valor_2:
...
break;
...
case valor_n:
...
break;
default:
...
break;
}
Document Object Model (DOM):
getElementsByTagName():
Obtener todos los párrafos de una página XHTML:
var parrafos = document.getElementsByTagName("p");
Obtener el primer párrafo de la página:
var primerParrafo = parrafos[0];
Obtener todos los enlaces del primer párrafo de la página:
var parrafos = document.getElementsByTagName("p");
var primerParrafo = parrafos[0];
var enlaces = primerParrafo.getElementsByTagName("a");
getElementsByName():
Obtener directamente el único párrafo con un nombre indicado:
var parrafoEspecial = document.getElementsByName("especial");
<p name="prueba">...</p>
<p name="especial">...</p>
<p>...</p>
getElementById():
Devuelve el elemento XHTML cuyo atributo id coincide con el parámetro indicado en la función. Como el atributo id debe ser único para cada elemento de una misma página, la función devuelve únicamente el nodo deseado.
var cabecera = document.getElementById("cabecera");
<div id="cabecera">
<a href="/" id="logo">...</a>
</div>
Creación de elementos XHTML simples:
Añadir un párrafo simple al final de una página XHTML:
// Crear nodo de tipo Element
var parrafo = document.createElement("p");
// Crear nodo de tipo Text
var contenido = document.createTextNode("Hola Mundo!");
// Añadir el nodo Text como hijo del nodo Element
parrafo.appendChild(contenido);
// Añadir el nodo Element como hijo de la pagina
document.body.appendChild(parrafo);
Eliminación de nodos:
Eliminar un nodo del árbol DOM de una página:
var parrafo = document.getElementById("provisional");
parrafo.parentNode.removeChild(parrafo);
<p id="provisional">...</p>
Acceso directo a los atributos XHTML:
Obtener de forma directa la dirección a la que enlaza un enlace:
var enlace = document.getElementById("enlace");
alert(enlace.href); // muestra http://www...com
<a id="enlace" href="http://www...com">Enlace</a>
Obtener el valor de la propiedad margin de una imagen:
var imagen = document.getElementById("imagen");
alert(imagen.style.margin);
<img id="imagen" style="margin:0; border:0;" src="logo.png" />
Obtener el valor de la propiedad de un parrafo:
var parrafo = document.getElementById("parrafo");
alert(parrafo.style.fontWeight); // muestra "bold"
<p id="parrafo" style="font-weight: bold;">...</p>
61
***
Código para conectar JavaScript con MySQL:
ResponderEliminarvar connection = new ActiveXObject("ADODB.Connection") ;
var connectionstring="Data Source=;Initial Catalog=;User ID=;Password=;Provider=SQLOLEDB";
connection.Open(connectionstring);
var rs = new ActiveXObject("ADODB.Recordset");
rs.Open("SELECT * FROM table", connection);
rs.MoveFirst
while(!rs.eof)
{
document.write(rs.fields(1));
rs.movenext;
}
rs.close;
connection.close;