Inicio>Tutorial de diseño web>Tutorial de JavaScript

De esto se trata JavaScript (compilación de conocimientos básicos de JS)

Autor：Eve Cole Fecha de actualización：2009-06-11 16:26:36

1 Cree un bloque de script

para hacer referencia al código del programa de contenido.
<lenguaje de escritura="JavaScript">
El código JavaScript está escrito aquí.
</script>

2 Ocultar código de script
Código del programa de contenido de referencia
<lenguaje de escritura="JavaScript">
<!--
documento.write(“Hola”);
// -->
</script>
El código relevante no se ejecutará en navegadores que no admitan JavaScript

3. Se muestra cuando el navegador no lo admite.
Código del programa de contenido de referencia
<sin guión>
Hola al navegador que no es JavaScript.
</noscript>

4 Vincular archivos de script externos
Código del programa de contenido de referencia
<script language="JavaScript" src="/"filename.js""></script>

5 script de comentarios
Código del programa de contenido de referencia
// Este es un comentario
document.write(“Hola”); // Este es un comentario
/*
todo esto
es un comentario
*/

6 Salida al navegador
Código del programa de contenido de referencia
document.write(“<strong>Hola</strong>”);

7 Definir variables
Código del programa de contenido de referencia
var myVariable = “algún valor”;

adición de 8 cadenas
Código del programa de contenido de referencia
var myString = “String1” + “String2”;

9 Búsqueda de cadenas
Código del programa de contenido de referencia
<lenguaje de escritura="JavaScript">
<!--
var miVariable = “Hola”;
var allíPlace = myVariable.search("allí");
documento.write(allíLugar);
// -->
</script>

10 Reemplazo de cadena
Código del programa de contenido de referencia
thisVar.replace(“Lunes”,”Viernes”);

11 Cadena de formato
Código del programa de contenido de referencia
<lenguaje de escritura="JavaScript">
<!--
var miVariable = “Hola”;
document.write(miVariable.big() + “<br>”);
document.write(miVariable.blink() + “<br>”);
document.write(miVariable.bold() + “<br>”);
document.write(miVariable.fixed() + “<br>”);
document.write(myVariable.fontcolor(“rojo”) + “<br>”);
document.write(myVariable.fontsize(“18pt”) + “<br>”);
document.write(miVariable.cursiva() + “<br>”);
document.write(miVariable.small() + “<br>”);
document.write(miVariable.strike() + “<br>”);
document.write(miVariable.sub() + “<br>”);
document.write(miVariable.sup() + “<br>”);
document.write(myVariable.toLowerCase() + “<br>”);
document.write(myVariable.toUpperCase() + “<br>”);
var firstString = "Mi cadena";
var finalString = firstString.bold().toLowerCase().fontcolor("rojo");
// -->
</script>

12 Crear matriz
Código del programa de contenido de referencia
<lenguaje de escritura="JavaScript">
<!--
var miArray = new Array(5);
myArray[0] = "Primera entrada";
myArray[1] = “Segunda entrada”;
myArray[2] = “Tercera entrada”;
myArray[3] = “Cuarta entrada”;
myArray[4] = “Quinta entrada”;
var anotherArray = new Array("Primera entrada","Segunda entrada","Tercera entrada","Cuarta entrada","Quinta entrada");
// -->
</script>

13 Clasificación de matrices
Código del programa de contenido de referencia
<lenguaje de escritura="JavaScript">
<!--
var miArray = new Array(5);
miArray[0] = "z";
miArray[1] = "c";
miArray[2] = "d";
miArray[3] = "a";
miArray[4] = "q";
documento.write(myArray.sort());
// -->
</script>

14 Cadena dividida
Código del programa de contenido de referencia
<lenguaje de escritura="JavaScript">
<!--
var miVariable = "a,b,c,d";
var stringArray = miVariable.split(",");
document.write(stringArray[0]);
document.write(stringArray[1]);
document.write(stringArray[2]);
document.write(stringArray[3]);
// -->
</script>

15 Mensaje de advertencia emergente
Código del programa de contenido de referencia
<lenguaje de escritura="JavaScript">
<!--
ventana.alert(“Hola”);
// -->
</script>

16 Cuadro de confirmación emergente
Código del programa de contenido de referencia
<lenguaje de escritura="JavaScript">
<!--
var resultado = window.confirm(“Haga clic en Aceptar para continuar”);
// -->
</script>

17 Función personalizada
Código del programa de contenido de referencia
<lenguaje de escritura="JavaScript">
<!--
función múltiple(número1,número2) {
resultado var = número1 * número2;
resultado de devolución;
}
// -->
</script>

18 Llamar a la función JS
Código del programa de contenido de referencia
<a href=”#” onClick=”functionName()”>Texto del enlace</a>
<a href="/”javascript:functionName"()”>Texto del enlace</a>

19 Ejecute la función después de cargar la página
Código del programa de contenido de referencia
<cuerpo onLoad="nombrefunción();">
Cuerpo de la pagina
</body>

20 Juicio condicional
Código del programa de contenido de referencia
<guión>
<!--
var userChoice = window.confirm(“Elija Aceptar o Cancelar”);
var resultado = (elección de usuario == verdadero)? “Aceptar”: “Cancelar”;
documento.write(resultado);
// -->
</script>

21 Especifique el número de bucles
Código del programa de contenido de referencia
<guión>
<!--
var miArray = new Array(3);
myArray[0] = "Elemento 0";
myArray[1] = "Elemento 1";
myArray[2] = "Elemento 2";
for (i = 0; i < miArray.length; i++) {
document.write(myArray[i] + “<br>”);
}
// -->
</script>

22 Establecer ejecución futura
Código del programa de contenido de referencia
<guión>
<!--
función hola() {
ventana.alert(“Hola”);
}
ventana.setTimeout("hola()",5000);
// -->
</script>

23 Función de ejecución programada
Código del programa de contenido de referencia
<guión>
<!--
función hola() {
ventana.alert(“Hola”);
ventana.setTimeout("hola()",5000);
}
ventana.setTimeout("hola()",5000);
// -->
</script>

24 Cancelar la ejecución programada
Código del programa de contenido de referencia
<guión>
<!--
función hola() {
ventana.alert(“Hola”);
}
var myTimeout = window.setTimeout("hola()",5000);
ventana.clearTimeout(miTiempo de espera);
// -->
</script>

25 Ejecutar la función cuando se descarga la página.
Código del programa de contenido de referencia
<cuerpo onUnload="nombrefunción();">
Cuerpo de la pagina
</body>

JavaScript es así 2: Salida del navegador

26 Acceder al objeto del documento
Código del programa de contenido de referencia
<lenguaje de escritura="JavaScript">
var miURL = documento.URL;
ventana.alert(miURL);
</script>

27 Generar HTML dinámicamente
Código del programa de contenido de referencia
<lenguaje de escritura="JavaScript">
document.write(“<p>Aquí hay información sobre este documento:</p>”);
documento.write(“<ul>”);
document.write(“<li>Documento de referencia: “ + document.referrer + “</li>”);
document.write(“<li>Dominio: “ + documento.dominio + “</li>”);
document.write(“<li>URL: “ + documento.URL + “</li>”);
documento.write(“</ul>”);
</script>

28 Nueva línea de salida
Código del programa de contenido de referencia
document.writeln(“<strong>a</strong>”);
document.writeln(“b”);

29 fecha de salida
Código del programa de contenido de referencia
<lenguaje de escritura="JavaScript">
var estaFecha = nueva Fecha();
document.write(thisDate.toString());
</script>

30 Especifique la zona horaria de la fecha
Código del programa de contenido de referencia
<lenguaje de escritura="JavaScript">
var miDesplazamiento = -2;
var fechaactual = nueva fecha();
var userOffset = currentDate.getTimezoneOffset()/60;
var timeZoneDifference = userOffset - myOffset;
fechaactual.setHours(fechaactual.getHours() + timeZoneDifference);
document.write(“La hora y fecha en Europa Central es: “ + currentDate.toLocaleString());
</script>

31 Establecer formato de salida de fecha
Código del programa de contenido de referencia
<lenguaje de escritura="JavaScript">
var estaFecha = nueva Fecha();
var thisTimeString = thisDate.getHours() + “:” + thisDate.getMinutes();
var thisDateString = thisDate.getFullYear() + “/” + thisDate.getMonth() + “/” + thisDate.getDate();
document.write(thisTimeString + “on” + thisDateString);
</script>

32 Leer parámetros de URL
Código del programa de contenido de referencia
<lenguaje de escritura="JavaScript">
var urlParts = document.URL.split("?");
var parametroPartes = urlParts[1].split(“&”);
para (i = 0; i <partesdeparámetro.longitud; i++) {
var partes de pares = partes de parámetros[i].split(“=");
var nombre de par = partes de par[0];
var pairValue = pairParts[1];
document.write(nombrePar + " : " +ValorPar);
}
</script>
¿Sigues pensando que HTML no tiene estado?

33 Abrir un nuevo objeto de documento
Código del programa de contenido de referencia
<lenguaje de escritura="JavaScript">
función nuevoDocumento() {
documento.open();
document.write(“<p>Este es un documento nuevo.</p>”);
documento.cerrar();
}
</script>

salto de 34 páginas
Código del programa de contenido de referencia
<lenguaje de escritura="JavaScript">
ventana.ubicación = “http://www.x-force.cn/”;
</script>

35 Agregar ventana de progreso de carga de página web
Código del programa de contenido de referencia
<html>
<cabeza>
<lenguaje de escritura='javaScript'>
var placeHolder = window.open('holder.html','placeholder','ancho=200,alto=200');
</script>
<title>La página principal</title>
</cabeza>
<cuerpo onLoad='placeHolder.close()'>
<p>Esta es la página principal</p>
</cuerpo>
</html>

Eso es todo para JavaScript 3: Imagen

36 Lectura de atributos de imagen
Código del programa de contenido de referencia
<img src="/”image1.jpg"” nombre="miImagen">
<a href=”# ” onClick=”window.alert(document.myImage.width)”>Ancho</a>

37 Cargando imágenes dinámicamente
Código del programa de contenido de referencia
<lenguaje de escritura="JavaScript">
miImagen = nueva Imagen;
myImage.src = “Cajeros1.jpg”;
</script>

38 Reemplazo de imagen simple
Código del programa de contenido de referencia
<lenguaje de escritura="JavaScript">
rollImage = nueva imagen;
rollImage.src = “rollImage1.jpg”;
Imagen predeterminada = nueva imagen;
defaultImage.src = “imagen1.jpg”;
</script>
<a href="/"myUrl"" onMouseOver="document.myImage.src = rollImage.src;"
onMouseOut=”document.myImage.src = defaultImage.src;”>
<img src="/"image1.jpg"" name="myImage" width=100 height=100 border=0>

39 Visualización aleatoria de imágenes
Código del programa de contenido de referencia
<lenguaje de escritura="JavaScript">
var imageList = nueva matriz;
ListaImagen[0] = "imagen1.jpg";
ListaImagen[1] = "imagen2.jpg";
ListaImagen[2] = "imagen3.jpg";
ListaImagen[3] = "imagen4.jpg";
var imageChoice = Math.floor(Math.random() * imageList.length);
document.write('<img src="' + imageList[imageChoice] + '">');
</script>

40 Reemplazo de imagen implementado por función
Código del programa de contenido de referencia
<lenguaje de escritura="JavaScript">
fuente var = 0;
reemplazo de var = 1;
función createRollOver (imagen original, imagen de reemplazo) {
var imageArray = nueva matriz;
imageArray[fuente] = nueva imagen;
imageArray[fuente].src = imagenoriginal;
imageArray[reemplazo] = nueva imagen;
imageArray[reemplazo].src = imagendereemplazo;
devolver matriz de imágenes;
}
var rollImage = createRollOver("image1.jpg","rollImage1.jpg");
</script>
<a href=”#” onMouseOver=”document.myImage1.src = rollImage1[reemplazo].src;”
onMouseOut=”document.myImage1.src = rollImage1[fuente].src;”>
<img src="/"image1.jpg"" ancho=100 nombre="miImagen1" borde=0>
</a>

41 Crear una presentación de diapositivas
Código del programa de contenido de referencia
<lenguaje de escritura="JavaScript">
var imageList = nueva matriz;
imageList[0] = nueva imagen;
listaimagen[0].src = “imagen1.jpg”;
imageList[1] = nueva imagen;
listaimagen[1].src = “imagen2.jpg”;
imageList[2] = nueva imagen;
listaimagen[2].src = “imagen3.jpg”;
imageList[3] = nueva imagen;
ListaImagen[3].src = “imagen4.jpg”;
función presentación de diapositivas (número de imagen) {
document.slideShow.src = listaimagen[númeroimagen].src;
númeroimagen += 1;
if (númeroimagen <listaimagen.longitud) {
window.setTimeout ("presentación de diapositivas (" + número de imagen + ")", 3000);
}
}
</script>
</cabeza>
<cuerpo onLoad="presentación de diapositivas(0)">
<img src="/”image1.jpg"” width=100 name=”slideShow”>

42 imágenes publicitarias aleatorias
Código del programa de contenido de referencia
<lenguaje de escritura="JavaScript">
var imageList = nueva matriz;
ListaImagen[0] = "imagen1.jpg";
ListaImagen[1] = "imagen2.jpg";
ListaImagen[2] = "imagen3.jpg";
ListaImagen[3] = "imagen4.jpg";
var urlList = nueva matriz;
urlList[0] = "http://some.host/";
urlList[1] = "http://otro.host/";
urlList[2] = "http://en algún lugar.else/";
urlList[3] = "http://right.here/";
var imageChoice = Math.floor(Math.random() * imageList.length);
document.write('<a href="' + urlList[imageChoice] + '"><img src="' + imageList[imageChoice] + '"></a>');
</script>

Eso es todo para JavaScript 4: Formulario

43 Composición del formulario
Código del programa de contenido de referencia
<método de formulario =”publicar” acción =”destino.html” nombre =”este formulario”>
<tipo de entrada=”texto” nombre=”miTexto”>
<seleccionar nombre="miSelección">
<option value="1">Primera elección</option>
<option value=”2”>Segunda opción</option>
</seleccionar>
<br>
<tipo de entrada=”enviar” valor=”Enviarme”>
</form>

44 Acceder al contenido del cuadro de texto en el formulario
Código del programa de contenido de referencia
<nombre del formulario="miformulario">
<tipo de entrada=”texto” nombre=”miTexto”>
</formulario>
<a href='#' onClick='window.alert(document.myForm.myText.value);'>Comprobar campo de texto</a>

45 Copie dinámicamente el contenido del cuadro de texto
Código del programa de contenido de referencia
<nombre del formulario="miformulario">
Ingrese algo de texto: <input type=”text” name=”myText”><br>
Copiar texto: <tipo de entrada=”texto” nombre=”copiarTexto”>
</formulario>
<a href=”#” onClick=”document.myForm.copyText.value =
document.myForm.myText.value;”>Copiar campo de texto</a>

46 Detectar cambios en el cuadro de texto
Código del programa de contenido de referencia
<nombre del formulario="miformulario">
Ingrese algo de texto: <input type=”text” name=”myText” onChange=”alert(this.value);”>
</form>

47 Acceder al seleccionado Seleccionar
Código del programa de contenido de referencia
<nombre del formulario="miformulario">
<seleccionar nombre="miSelección">
<option value=”Primera elección”>1</option>
<option value=”Segunda elección”>2</option>
<option value=”Tercera opción”>3</option>
</seleccionar>
</formulario>
<a href='#' onClick='alert(document.myForm.mySelect.value);'>Verificar lista de selección</a>

48 Agregar dinámicamente elementos seleccionados
Código del programa de contenido de referencia
<nombre del formulario="miformulario">
<seleccionar nombre="miSelección">
<option value=”Primera elección”>1</option>
<option value=”Segunda elección”>2</option>
</seleccionar>
</formulario>
<lenguaje de escritura="JavaScript">
document.myForm.mySelect.length++;
document.myForm.mySelect.options[document.myForm.mySelect.length - 1].text = “3”;
document.myForm.mySelect.options[document.myForm.mySelect.length - 1].value = “Tercera opción”;
</script>

49 Validar campos de formulario
Código del programa de contenido de referencia
<lenguaje de escritura="JavaScript">
función checkField(campo) {
si (campo.valor == "") {
window.alert(“Debe ingresar un valor en el campo”);
campo.focus();
}
}
</script>
<formulario nombre="myForm" action="destino.html">
Campo de texto: <input type="text" name="myField" onBlur="checkField(this)">
<br><tipo de entrada=”enviar”>
</form>

50 Verificar Seleccionar elementos
Código del programa de contenido de referencia
función lista de verificación (selección) {
if (selección. longitud == 0) {
window.alert(“Debe realizar una selección de la lista.”);
devolver falso;
}
devolver verdadero;
}

51 Cambiar dinámicamente la acción del formulario
Código del programa de contenido de referencia
<formulario nombre="myForm" action="login.html">
Nombre de usuario: <tipo de entrada=”texto” nombre=”nombre de usuario”><br>
Contraseña: <tipo de entrada=”contraseña” nombre=”contraseña”><br>
<tipo de entrada=”botón” valor=”Iniciar sesión” onClick=”this.form.submit();”>
<tipo de entrada="botón" valor="Registrarse" onClick="this.form.action = 'register.html'; this.form.submit();">
<input type="button" value="Recuperar contraseña" onClick="this.form.action = 'contraseña.html'; this.form.submit();">
</form>

52 Uso de botones de imagen
Código del programa de contenido de referencia
<formulario nombre="myForm" action="login.html">
Nombre de usuario: <tipo de entrada=”texto” nombre=”nombre de usuario”><br>
Contraseña: <tipo de entrada=”contraseña” nombre=”contraseña”><br>
<tipo de entrada="imagen" src="/"login.gif"" valor="Iniciar sesión">
</form>

53 Cifrado de datos del formulario
Código del programa de contenido de referencia
<IDIOMA DE ESCRITURA='JavaScript'>
<!--
función cifrar (elemento) {
var nuevoItem = '';
for (i=0; i < elemento.longitud; i++) {
newItem += item.charCodeAt(i) + '.';
}
devolver nuevo artículo;
}
función cifrarForm(miFormulario) {
for (i=0; i < miForma.elementos.longitud; i++) {
myForm.elements[i].value = encrypt(myForm.elements[i].value);
}
}

//-->
</SCRIPT>
<nombre del formulario='myForm' onSubmit='encryptForm(this); window.alert(this.myField.value);'>
Ingrese algo de texto: <tipo de entrada=nombre de texto=micampo><tipo de entrada=enviar>
</form>

Eso es todo por JavaScript 5: Ventana y marco

54 Cambiar el mensaje de texto de la barra de estado del navegador
Código del programa de contenido de referencia
<lenguaje de escritura="JavaScript">
window.status = “Un nuevo mensaje de estado”;
</script>

55 Cuadro emergente de confirmación
Código del programa de contenido de referencia
<lenguaje de escritura="JavaScript">
var userChoice = window.confirm(“Haga clic en Aceptar o Cancelar”);
si (elección de usuario) {
document.write(“Elegiste Aceptar”);
} demás {
document.write(“Elegiste Cancelar”);
}
</script>

56 Solicitar entrada
Código del programa de contenido de referencia
<lenguaje de escritura="JavaScript">
var userName = window.prompt("Ingrese su nombre","Ingrese su nombre aquí");
document.write(“Su nombre es “ + nombre de usuario);
</script>

57 Abrir una nueva ventana
Contenido citado //Abra una nueva ventana del navegador con un código de programa llamado myNewWindow
<lenguaje de escritura="JavaScript">
ventana.open("http://www.liu21st.com/","myNewWindow");
</script>

58 Establecer el tamaño de la nueva ventana
Código del programa de contenido de referencia
<lenguaje de escritura="JavaScript">
ventana.open("http://www.liu21st.com/","myNewWindow",'height=300,width=300');
</script>

59 Establecer la posición de la nueva ventana
Código del programa de contenido de referencia
<lenguaje de escritura="JavaScript">
window.open("http://www.liu21st.com/","myNewWindow",'height=300,width=300,left=200,screenX=200,top=100,screenY=100');
</script>

60 Si se muestra la barra de herramientas y la barra de desplazamiento
Código del programa de contenido de referencia
<lenguaje de escritura="JavaScript">
window.open("http://www.x-force.cn/",barra de herramientas=no, barra de menú=no);
</script>

61 ¿Es posible escalar el tamaño de la nueva ventana?
Código del programa de contenido de referencia
<lenguaje de escritura="JavaScript">
window.open('http://www.x-force.cn/', 'myNewWindow', 'resizable=yes' );</script>

62 Cargue un nuevo documento en la ventana actual
Código del programa de contenido de referencia
<a href='#' onClick='document.location = '125a.html';' >Abrir nuevo documento</a>

63 Establecer la posición de desplazamiento de la página
Código del programa de contenido de referencia
<lenguaje de escritura="JavaScript">
if (document.all) { //Si es el navegador IE, use el atributo scrollTop
documento.body.scrollTop = 200;
} else { //Si es un navegador NetScape, utilice el atributo pageYOffset
ventana.pageYOffset = 200;
}</script>

64 Abrir una ventana de pantalla completa en IE
Código del programa de contenido de referencia
<a href='#' onClick=”window.open('http://www.devdao.com/','newWindow','fullScreen=yes');”>Abrir una ventana de pantalla completa</a>

65 Operaciones de ventanas nuevas y ventanas principales.
Código del programa de contenido de referencia
<lenguaje de escritura="JavaScript">
//definir nueva ventana
var nuevaVentana = ventana.open("128a.html","nuevaVentana");
newWindow.close(); //Cierra la nueva ventana abierta en la ventana principal
</script>Cierre el código del programa de la ventana principal en una nueva ventana
window.opener.close()

66 Escribir contenido en la nueva ventana
Código del programa de contenido de referencia
<lenguaje de escritura="JavaScript">
var nuevaVentana = ventana.open("","nuevaVentana");
nuevaVentana.document.open();
newWindow.document.write(“Esta es una ventana nueva”);
nuevaWIndow.document.close();
</script>

67 Cargar la página en la página marco
Código del programa de contenido de referencia
<cols del conjunto de marcos =”50%,*”>
<nombre del marco="frame1" src="/"135a.html"">
<nombre del marco="frame2" src="/"about:blank"">
</conjunto de marcos>
Cargue la página en el marco2 en el marco1
parent.frame2.document.location = “135b.html”;

68 Compartir scripts entre páginas de marco
Citando contenido si hay un código de secuencia de comandos en el archivo html en el marco 1
función hacer alerta() {
window.alert(“El cuadro 1 está cargado”);
}

Entonces el

código del programa

del método

se puede llamar así en el cuadro 2.


<body onLoad="parent.frame1.doAlert();">
Este es el cuadro 2.
</body>

69 Datos públicos
El contenido de referencia puede definir elementos de datos en una página de marco para que el código de utilidad de página pueda utilizar los datos en varios marcos.
<lenguaje de escritura="JavaScript">
var persistenteVariable = “Este es un valor persistente”;
</script>
<cols del conjunto de marcos =”50%,*”>
<nombre del marco="frame1" src="/"138a.html"">
<nombre del marco="frame2" src="/"138b.html"">
</frameset>

De esta manera, la variable persistVariable se puede utilizar tanto en el marco1 como en el marco2

.
Contenido citado De acuerdo con algunas de las ideas anteriores, podemos usar una página de marco oculta como código de programa base

de

todo el conjunto de marcos.


<cols del conjunto de marcos =”0,50%,*”>
<nombre del marco="codeFrame" src="/"140code.html"">
<nombre del marco="frame1" src="/"140a.html"">
<nombre del marco="frame2" src="/"140b.html"">
</conjunto de marcos>
Artículos relacionados