ventana
El objeto de la ventana no solo actúa como un alcance global, sino que también representa una ventana del navegador.
El objeto de la ventana tiene propiedades interiores y de InnerHeight, que pueden obtener el ancho interno y la altura de la ventana del navegador. El ancho interno y la altura se refieren al ancho neto y la altura utilizadas para mostrar la página web después de eliminar los elementos de los marcadores de posición, como la barra de menú, la barra de herramientas, el borde, etc., también hay un ancho externo y atributos externos, que pueden obtener todo el ancho y la altura de la ventana del navegador.
Reponer:
El ancho de área visible de la página web: document.body.clientwidth la altura del área visible de la página web: document.body.clientHeight el ancho de área visible de la página web: document.body.offsetwidth (incluido el ancho de la barra de desplazamiento y la barra de desplazamiento). document.body.scrollwidth la altura del texto completo de la página web: document.body.scrollHeight la altura de la página web que se está implementando: document.body.scrolltop o jQuery (document) .scrolltop () La parte izquierda de la página web que se está agotando: document.body.scrollleft en la página de la página web: ventana. Window.screen.Height el ancho de la resolución de la pantalla: Window.screen.Width la pantalla disponible en la altura del espacio de trabajo: Window.screen.availheight la pantalla disponible en el espacio de trabajo del espacio de trabajo: window.screen.availwidth el color de la pantalla dígitos: ventana.screen.colordepth la ventana de la pantalla de la pantalla de la pantalla: la altura de la altura de la altura de la altura de la altura de la altura de la altura de la altura de la altura de la altura: $ (ventana) .Height () El ancho de la ventana del navegador: $ (ventana) .Width ()
Especial 1: Solución a document.body.scrolltop es siempre 0 var scrollPos; if (typeof window.pageyOffset! = 'Undefined') {scrollpos = window.pageyOffset; } else if (typeof document.compatmode! = 'Undefined' && document.compatmode! = 'backCompat') {scrollPos = document.documentelement.scrolltop; } else if (typeof document.body! = 'Undefined') {scrollpos = document.body.scrolltop; } alerta (scrollPos); Especial 2: El ancho de texto completo de la página web: "+ document.body.scrollwidth; la altura de texto completo de la página web:"+ document.body.scrollheight; Las funciones anteriores no se pueden obtener a veces, así que use el siguiente método. var xscroll, yScroll; if (window.innerheight && window.scrollmaxy) {xscroll = document.body.scrollwidth; yscroll = window.innerheight + window.scrollmaxy; } else if (document.body.scrollheight> document.body.offsetheight) {// Todos menos explorador mac xscroll = document.body.scrollwidth; yscroll = document.body.scrollheight; } else {// Explorer Mac ... también funcionaría en Explorer 6 Strict, Mozilla y Safari xscroll = document.body.offsetWidth; yscroll = document.body.offsetheight; }navegador
El objeto Navigator representa la información del navegador. Las propiedades más utilizadas incluyen:
• Navigator.appname: nombre del navegador;
• Navigator.Apversion: Versión del navegador;
• Navigator.Language: el idioma establecido por el navegador;
• Navigator.platform: Tipo de sistema operativo;
• Navigator.Useragent: la cadena de agente de usuario establecido por el navegador.
Para escribir diferentes código para diferentes navegadores, a los principiantes les gusta usar si juzgar la versión del navegador, por ejemplo:
Var ancho; if (getieVersion (navigator.useragent) <9) {width = document.body.clientwidth;} else {width = window.innerwidth;} Pero esto puede ser inexacto en el juicio y también es difícil mantener el código. La forma correcta es hacer el uso completo de la característica de JavaScript al devolver undefined para propiedades inexistentes y usar directamente el operador de cortocircuito || Para calcular:
VAR Width = Window.innerWidth || document.body.clientwidth;
pantalla
El objeto de pantalla representa la información de la pantalla. Las propiedades comunes incluyen:
• screen.width: ancho de pantalla, en píxeles;
• Screen.Height: Altura de pantalla, en píxeles;
• Screen.Colordepth: Devuelve el número de dígitos de color, como 8, 16, 24.
ubicación
El objeto de ubicación representa la información de URL de la página actual. Por ejemplo, una URL completa:
http://www.example.com:8080/path/index.html?a=1&b=2#top
Se puede obtener usando location.href . Para obtener los valores de cada parte de la URL, puede escribirlo así:
ubicación.protocol; // 'http'location.host; // 'www.example.com' ubicación.port; // '8080'location.pathName; // '/path/index.html'location.search; // '? A = 1 y B = 2'location.hash; // 'ARRIBA'
Para cargar una nueva página, puede llamar a la ubicación.assign (). Si desea volver a cargar la página actual, es muy conveniente llamar al método Ubication.Reload ().
documento
El objeto de documento representa la página actual. Dado que HTML se representa como una estructura de árbol en el navegador en forma de DOM, el objeto de documento es el nodo raíz de todo el árbol DOM.
El atributo de título del documento se lee desde <title> xxx </title> en el documento HTML, pero se puede cambiar dinámicamente:
El objeto de documento también tiene un atributo de cookies, que puede obtener las cookies de la página actual.
Una cookie es un identificador de valor clave enviado por el servidor. Debido a que el protocolo HTTP es estatoso, el servidor puede distinguir entre qué solicitud del usuario enviada por él, y puede distinguirse por cookies. Cuando un usuario inicia sesión con éxito, el servidor envía una cookie al navegador, como el usuario = ABC123XYZ (cadena cifrada). Después de eso, cuando el navegador visita el sitio web, adjuntará esta cookie al encabezado de solicitud, y el servidor puede distinguir al usuario en función de la cookie.
Las cookies también pueden almacenar algunas configuraciones del sitio web, como el idioma de la página que se muestra, etc.
JavaScript puede leer las cookies en la página actual a través de document.cookie:
document.cookie; // 'V = 123; recordar = verdadero; preferir = zh '
Dado que JavaScript puede leer cookies en la página, y la información de inicio de sesión del usuario generalmente también existe en cookies, esto crea un gran riesgo de seguridad. Esto se debe a que se permite la introducción de código JavaScript de terceros en las páginas HTML:
<
Si existe código malicioso en JavaScript del tercero introducido introducido, el sitio web www.foo.com obtendrá directamente la información de inicio de sesión del usuario del sitio web wwww.example.com.
Para resolver este problema, el servidor puede usar httponly al configurar cookies. JavaScript no las leerá las cookies que establecen httponly. Este comportamiento es implementado por el navegador, y los navegadores convencionales admiten la opción Httponly. Para garantizar la seguridad, el servidor siempre debe insistir en usar httponly al configurar cookies.
document.write () solo genera nuevo contenido al documento
Si document.write se ejecuta después de cargar el documento, toda la página HTML se sobrescribirá:
Referencia: http://www.w3school.com.cn/tiy/t.asp?f=js_write_over
DOM | Documento
// devuelve el nodo con id 'test': var test = document.getElementById ('test'); // Obtener todos los nodos infantiles directos en el nodo Test: var cs = test.children; var primero = test.FirstelementChild; El segundo método es usar querySelector() y querySelectorAll() . Debe comprender la sintaxis del selector y luego usar condiciones para obtener el nodo, que es más conveniente:
// Obtenga el nodo con ID Q1 a través de QuerySelector: var q1 = document.querySelector ('#q1'); // Obtenga todos los nodos en el nodo Q1 que cumplen con las condiciones a través de QuerySelectorAll: var PS = Q1.QueryselectorAll ('Div.highled> p');Estrictamente hablando, el nodo DOM aquí se refiere al elemento, pero el nodo DOM es en realidad el nodo. En HTML, el nodo incluye muchos tipos de elementos, comentarios, cdata_section, etc., así como el tipo de documento del nodo raíz. Sin embargo, la mayoría de las veces solo nos importa el elemento, es decir, el nodo que realmente controla la estructura de la página e ignora otros tipos de nodos. El documento del nodo raíz se ha unido automáticamente a un documento de variable global.
Modificar DOM
La modificación de CSS también es una operación común. El atributo de estilo del nodo DOM corresponde a todos los CSS y se puede recuperar o establecer directamente. Debido a que CSS permite nombres como Font-Size, pero no es un nombre de propiedad válido para JavaScript, debe reescribirse a un nombre de estilo camello en JavaScript:
// get <p id = "p-id"> ... </p> var p = document.getElementById ('p-id'); // set css: p.style.color = '#ff0000'; p.style.fontsize = '20px'; p.style.paddingtop = '2em';Insertar DOM
Hay dos formas de insertar un nuevo nodo. Una es usar AppendChild para agregar un nodo secundario al último nodo secundario del nodo principal. Por ejemplo:
<!-estructura html-> <p id = "js"> javascript </p> <div id = "list"> <p id = "esquema"> esquema </p> </div>
Agregar <p id="js">JavaScript</p> al último elemento de <div id="list"> ::
var js = document.getElementById ('js'), list = document.getElementById ('list'); list.appendChild (js);Ahora, la estructura HTML se vuelve así:
<!-estructura html-> <div id = "list"> <p id = "esquema"> esquema </p> <p id = "js"> javascript </p> </div>
Debido a que el nodo js que insertamos ya existe en el árbol de documentos actual, este nodo primero se eliminará de su ubicación original y luego se insertará en una nueva ubicación.
La mayoría de las veces, crearemos un nuevo nodo desde cero e insertaremos en la ubicación especificada:
Haskell = document.createElement ('P'); Crear dinámicamente un nodo y luego agregarlo al árbol DOM puede lograr muchas funciones. Por ejemplo, el siguiente código crea dinámicamente un nodo <style> y lo agrega al final del nodo <head> , agregando dinámicamente una nueva definición CSS al documento:
var d = document.createElement ('style'); d.setattribute ('type', 'text/css'); d.innerhtml = 'p {color: rojo}'; document.getElementsByTagName ('Head') [0] .AppendChild (d);insertar
¿Qué pasa si queremos insertar nodos infantiles en la ubicación especificada? Puede usar matrement.EnsertBefore (NewElement, ReferenceElement); y el nodo infantil se insertará antes del elemento de referencia.
Muchas veces, es necesario recorrer a todos los niños de un nodo principal, que puede implementarse iterando sobre el atributo de los niños:
var i, c, list = document.getElementById ('list'); for (i = 0; i <list.children.length; i ++) {c = list.children [i]; // consigue el nodo infantil i-thEliminar Dom
Para eliminar un nodo, primero debe obtener el nodo en sí y su nodo principal, y luego llamar al nodo principal RemoVeChild para eliminar a sí mismo:
// Haga que el nodo se elimine: var self = document.getElementById ('to-be-removed'); // Obtenga el nodo principal: var parent = self.ParentElement; // delete: var removed = parent.removechild (self); eliminado === self; // verdaderoNoté que aunque el nodo eliminado ya no está en el árbol de documentos, en realidad todavía está en la memoria y se puede agregar a otra ubicación en cualquier momento.
Cuando atraviese a un hijo de un nodo principal y realice una operación de eliminación, tenga en cuenta que el atributo de niños es un atributo de solo lectura y se actualizará en tiempo real cuando cambie el nodo secundario. Por lo tanto, al eliminar múltiples nodos, es importante tener en cuenta que los atributos de los niños están cambiando todo el tiempo.
Formulario de operación
El uso de JavaScript para manipular formas es similar a la operación de DOM, porque la forma en sí también es un árbol DOM.
Sin embargo, el cuadro de entrada del formulario, el cuadro desplegable, etc. pueden recibir la entrada del usuario, por lo que el uso de JavaScript para operar el formulario puede obtener el contenido ingresado por el usuario o establecer un nuevo contenido para un cuadro de entrada.
Existen principalmente los siguientes controles de entrada para formularios HTML:
• Cuadro de texto, el correspondiente <input type = "text">, se usa para ingresar texto;
• Cuadro de contraseña, el correspondiente <input type = "contraseña">, se utiliza para ingresar contraseñas;
• El cuadro de radio, el correspondiente <input type = "radio">, se usa para seleccionar un elemento;
• casilla de verificación, la correspondiente <input type = "checkbox"> se usa para seleccionar múltiples elementos;
• El cuadro desplegable, el correspondiente <elect>, se usa para seleccionar un elemento;
• Texto oculto, el correspondiente <input type = "oculto"> no es visible para el usuario, pero el texto oculto se enviará al servidor cuando se envíe el formulario.
Obtener el valor
Si obtenemos una referencia a un nodo <input>, podemos llamar al valor directamente para obtener el valor de entrada del usuario correspondiente:
// <input type = "text" id = "correo electrónico"> var input = document.getElementById ('correo electrónico'); input.value; // 'Valor ingresado por el usuario' Este método se puede aplicar a text , password , hidden y select . Sin embargo, para las casillas de radio y de verificación, value devuelve siempre el valor preestablecido HTML, y lo que necesitamos obtener es en realidad si el usuario ha "verificado" la opción, por lo que se checked usar para juzgar:
// <label> <input type = "Radio" name = "Weekday" id = "lunes" value = "1"> lunes </label> // <label> <input type = "radio" name = "weekday" id = "martes" value = "2"> martes </etiqueta> var mon = document.getElementByid ('lunes'); var tue = document.getElementByid ('martes'); mon.value; // '1'tue.Value; // '2'Mon.Cecked; // Verdadero o falsoEstablecer valor
Establecer el valor es similar a obtener el valor. Para texto, contraseña, oculto y selección, puede establecer el valor directamente:
// <input type = "text" id = "correo electrónico"> var input = document.getElementById ('correo electrónico'); input.value = '[email protected]'; // El contenido del cuadro de texto se ha actualizadoPara la radio y las casillas de verificación, establezca verificado en verdadero o falso.
Controles HTML5
HTML5 ha agregado una gran cantidad de controles estándar, los que se usan comúnmente incluyen fecha, fecha y hora de fecha y hora, color, etc. Todos usan la etiqueta <put>:
<input type = "date" value = "2015-07-01">
<input type = "DateTime-Local" Value = "2015-07-01T02: 03: 04">
<input type = "color" value = "#ff0000">
Los navegadores que no admiten HTML5 no pueden reconocer nuevos controles y los mostrarán como tipo = "texto". Los navegadores que admiten HTML5 recibirán cadenas formateadas. Por ejemplo, se garantizará que el valor de la entrada de tipo = "fecha" será una fecha válida en formato AAA YYYY-MM-DD, o una cadena vacía.
Enviar un formulario
Finalmente, JavaScript puede manejar el envío de formularios de dos maneras (el método AJAX se introduce en el siguiente capítulo).
El primer método es enviar un formulario a través del método Subt () del elemento <Form>. Por ejemplo, en respuesta a un evento <botón>, haga clic en el formulario en el código JavaScript:
<Form ID = "Test-Form"> <input type = "text" name = "test"> <button type = "button" onClick = "dosubMiTform ()"> enviar </botón> </form> <script> function dosubMitForm () {var form = document.getElementById ('testForm'); // puede modificar la entrada del formulario aquí ... // Enviar formulario: form.submit ();} </script> La desventaja de este método es que interrumpe la sumisión normal del navegador a la forma. El navegador envía el formulario al hacer clic en <button type="submit"> de forma predeterminada, o el usuario presiona la tecla Intro en el último cuadro de entrada. Por lo tanto, la segunda forma es responder al evento onsubmit de <form> en sí mismo y realizar cambios al enviar el formulario:
<Form ID = "Test-Form" onSubMit = "return checkform ()"> <input type = "text" name = "test"> <button type = "enviar"> enviar </botón> </form> <script> function checkform () {var form = document.getElementById ('test-form'); // Puede modificar la entrada del formulario aquí ... // Continuar al siguiente paso: return true;} </script> Tenga en cuenta que return true se requiere para decirle al navegador que continúe enviando. Si return false , el navegador no continuará enviando el formulario. Esta situación generalmente corresponde al error de entrada del usuario, y se le solicita al usuario los mensajes de error y se termina el formulario.
Al verificar y modificar <input> , haga un uso completo de <input type="hidden"> para pasar datos.
Por ejemplo, muchos formularios de inicio de sesión desean que los usuarios ingresen nombres de usuario y contraseñas, pero, por razones de seguridad, no transmiten contraseñas de texto sin formato al enviar el formulario, sino MD5 de la contraseña. Los desarrolladores de JavaScript ordinarios modificarán directamente <input> :
<Form ID = "Login-Form" Method = "Post" onSubMit = "return checkform ()"> <input type = "text" id = "username" name = "username"> <input type = "contraseña" id = "contraseña" name = "contraseña"> <botón type = "Subt"> enviar </button> </form> <script> function checkForm () {var pwd = documento de documento. // Cambiar el texto sin formato ingresado por el usuario a MD5: pwd.value = tomd5 (pwd.value); // Continuar al siguiente paso: return true;} </script> Este método parece estar bien, pero cuando el usuario ingresa la contraseña para enviar, el cuadro de contraseña se mostrará repentinamente de varios * a 32 * (porque MD5 tiene 32 caracteres).
Para no cambiar la entrada del usuario, puede usar <input type="hidden"> para implementar:
<form de formular ID = "login-form" método = "post" onSubMit = "return checkform ()"> <input type = "text" id = "username" name = "username"> <input type = "contraseña" id = "inpass-pasword"> <input type = "hidden" id = "md5-password" name = "contraseña"> <button tyte checkform () {var input_pwd = document.getElementById ('input-password'); var md5_pwd = document.getElementById ('md5-password'); // Cambie el texto sin formato ingresado por el usuario a MD5: md5_pwd.value = tomd5 (input_pwd.value); // Continuar al siguiente paso: return true;} </script>Tenga en cuenta que <input> con ID de md5-password marcó nombre = "contraseña", mientras que la ID ingresada por el usuario es la pasada de entrada sin el atributo de nombre. El atributo de datos sin nombre <input> no se enviará.
Archivos de operación
En formularios HTML, el único control que puede cargar archivos es <input type = "file">.
NOTA: Cuando un formulario contiene <input type = "file">, el enctype del formulario debe especificarse como multipart/formy-data, y el método debe especificarse como post, para que el navegador pueda codificar correctamente y enviar los datos del formulario en formato multipart/formato de formato.
Por razones de seguridad, el navegador solo permite a los usuarios hacer clic en <Input type = "archivo"> para seleccionar archivos locales. El uso de JavaScript para asignar valor a <input type = "file"> no tiene ningún efecto. Cuando el usuario elige cargar un archivo, JavaScript no puede obtener la ruta real al archivo:
Archivo a cargar:
Por lo general, los archivos cargados son procesados por el servidor de backend. JavaScript puede verificar la extensión del archivo al enviar el formulario para evitar que los usuarios carguen archivos en formatos no válidos:
var f = document.getElementById ('test-file-supload'); var filename = f.Value; // 'c: /fakepath/test.png'if (! FileName || devolver falso;}API de archivo
Debido a que JavaScript tiene operaciones muy limitadas en archivos cargados por usuarios, especialmente la incapacidad de leer contenido de archivos, muchas páginas web que requieren archivos operativos deben implementarse utilizando complementos de terceros como flash.
Con la popularidad de HTML5, la API de archivo recientemente agregada permite a JavaScript leer el contenido del archivo y obtener más información del archivo.
La API de archivo de HTML5 proporciona dos objetos principales: File y FileReader, que puede obtener información del archivo y leer archivos.
El siguiente ejemplo demuestra cómo leer un archivo de imagen seleccionado por el usuario y obtener una vista previa de la imagen en un <div>:
Vista previa de la imagen:
var fileInput = document.getElementById ('test-image-file'), info = document.getElementById ('test-file-info'), previsible = document.getElementById ('test-iMage-preview'); // Escuche para cambiar eventos: fileInput.adDeventListener ('Change', function () {// claro imagen de fondo: preview.style.backgroundimage = '' ;/ ver verifique si el archivo está seleccionado: if (! FileInput.value) {info.innerhtml = 'no seleccionado'; return;} // get File reference: var fileinput.files [files]; info.innerhtml = 'file:' + file.name + '<br>' + 'size:' + file.size + '<br>' + 'modificado:' + file.lastModifiedDate Archivo! ') la forma de DataUrl: Reader.readasDataurl (archivo);});El código anterior demuestra cómo leer el contenido del archivo a través de la API de archivo de HTML5. El archivo leído en forma de DataUrl es una cadena, similar a los datos: Image/JPEG; Base64,/9J/4AAQSK ... (codificación base64). A menudo se usa para establecer imágenes. Si se requiere el procesamiento del lado del servidor, envíe los caracteres después de la cadena base64 al servidor y lo decodifique con Base64 para obtener el contenido binario del archivo original.
Llamar de vuelta
El código anterior también demuestra una característica importante de JavaScript, que es el modo de ejecución de un solo hilo. En JavaScript, el motor de ejecución de JavaScript del navegador siempre se ejecuta en modo de subproceso único al ejecutar el código JavaScript, lo que significa que en cualquier momento, es imposible que el código JavaScript se ejecute más de 1 hilo al mismo tiempo.
Puede preguntar, ¿cómo manejar la multitarea en modo de un solo hilo?
En JavaScript, la multitarea se llama en realidad asincrónicamente, como el código anterior:
lector.readasdataurl (archivo);
Se iniciará una operación asincrónica para leer el contenido del archivo. Debido a que es una operación asincrónica, no sabemos cuándo la operación finaliza en el código JavaScript, por lo que primero debemos establecer una función de devolución de llamada:
Reader.onload = function (e) {// Cuando se lee el archivo, esta función se llama automáticamente:};Cuando se completa el archivo que se lee, el motor JavaScript llamará automáticamente la función de devolución de llamada que establecemos. Cuando se ejecuta la función de devolución de llamada, el archivo se ha leído, por lo que podemos obtener de manera segura el contenido del archivo dentro de la función de devolución de llamada.
El artículo anterior habla brevemente sobre el objeto JavaScript Browser es todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.