Der Einsatz von Java-Skripten
JavaScript - Prototyp-basierte Szenario Programmiersprache. Es ist ein Dialekt der ECMAScript-Sprache.
JavaScript ist allgemein als eingebettete Sprache für programmatischen Zugriff auf Anwendungsobjekte verwendet. Die am weitesten verbreitete Browser wie Skriptsprache, um interaktive Web-Seiten zu machen. Die wichtigsten architektonischen Besonderheiten: dynamische Typisierung schwache Typisierung, automatische Speicherverwaltung, Prototyp-basierte Programmierung, Funktion als First-Class-Objekte. Auf JavaScript von vielen Sprachen beeinflusst wurde, war das Design Ziel , eine Sprache ähnlich wie Java, aber zugleich einfach zu bedienen nonprogrammer zu machen. JavaScript - Sprache besitzen keine Unternehmen oder eine Organisation , die es von einer Reihe von Programmiersprachen verwendet in Web - Entwicklung unterscheidet. Der Name «JavaScript» ist ein eingetragenes Warenzeichen der Oracle Corporation.
10 besten Eigenschaften in JavaScript
Moderne JavaScript-Frameworks, natürlich, sie wissen , wie all diese Funktionen. Aber manchmal braucht man etwas , ohne den Rahmen zu tun. Aus einer Vielzahl von Gründen. Um dies zu tun, und dies ist eine Sammlung von nützlichen Funktionen.
10) addEvent ()
Zweifellos das wichtigste Werkzeug bei der Verwaltung der Ereignisse! Unabhängig davon, welche Version Sie verwenden, und von wem wurde es geschrieben, es tut genau das, was sie sagt im Titel, den sie auf das Element legt die Event-Handler.
Funktion addEvent (Elem, evType, fn) { if (elem.addEventListener) { elem.addEventListener (evType, fn, false); } else if (elem.attachEvent) { elem.attachEvent ( 'auf' + evType, fn) } else { Elem [ 'auf' + evType] = fn } }
Dieser Code hat zwei Vorteile - es ist einfach und Cross-Browser kompatibel.
Sein Hauptnachteil - in der Tat ist es nicht die Prozedur für IE passieren. Genauer gesagt, das tut attachEvent.
Eine einfache Abhilfe für dieses
Um dieses Recht übertragen kann durch eine entsprechende addEvent Linie ersetzt werden, um:
elem.attachEvent("on"+evType, function() { fn.apply(elem) })
Dadurch wird das Problem mit der Übertragung der dieses Problem zu lösen, aber der Prozessor nicht entfernt werden kann, weil detachEvent sollte dazu führen, genau die Funktion, die attachEvent übertragen wurde.
Es gibt zwei Möglichkeiten, um dieses Problem:
1) gibt eine Funktion, die für den Zweck Handler verwendet:
Funktion addEvent (Elem, evType, fn) { if (elem.addEventListener) { elem.addEventListener (evType, fn, false) Rückkehr fn } iefn = function () {fn.call (ELEM)} elem.attachEvent ( 'auf' + evType, iefn) Rückkehr iefn } Funktion removeEvent (Elem, evType, fn) { if (elem.addEventListener) { elem.removeEventListener (evType, fn, false) Rückkehr } elem.detachEvent ( 'auf' + evType, fn) }
Es wird wie folgt verwendet:
Funktion Handler () { Alarm (this) } var fn = addEvent (Elem, "Klick", Handler) ... removeEvent (Elem, "Klick", fn)
2) Sie können diese Ereignishandler verwenden überhaupt, und durch ein Schaltungselement:
Funktion addEvent (Elem, evType, fn) { if (elem.addEventListener) { elem.addEventListener (evType, fn, false) Rückkehr fn } iefn = function () {fn.call (ELEM)} elem.attachEvent ( 'auf' + evType, iefn) Rückkehr iefn } Funktion removeEvent (Elem, evType, fn) { if (elem.addEventListener) { elem.removeEventListener (evType, fn, false) Rückkehr } elem.detachEvent ( 'auf' + evType, fn) }
Es wird wie folgt verwendet:
Funktion Handler () { // Verwenden Sie das nicht, eine Variable, die auf das Element verweist alert (ELEM) } ...
9) onReady ()
So initialisieren wurde die Seite historisch window.onload Ereignis verwendet, der ausgelöst wird , nachdem die Seite vollständig geladen ist und alle Objekte auf sie: Zähler, Bilder, etc.
OnDOMContentLoaded Ereignis - eine viel bessere Wahl in 99% der Fälle. Dieses Ereignis wird ausgelöst, sobald das DOM-Dokument ist bereit, um Bilder hochzuladen und andere nicht die Struktur des Dokumentobjekts zu beeinflussen.
Dies ist sehr praktisch, weil Bilder können für eine lange Zeit geladen werden, und onDOMContentLoaded Handler die notwendigen Änderungen auf der Seite zu machen und Schnittstellen sofort initialisieren, ohne für die gesamte Download warten.
folgende Cross-Browser-Code kann verwendet werden, um einen Handler hinzuzufügen:
Funktion bindReady (Handler) { var genannt = false Funktion bereit () {// (1) if (genannt) Rückkehr genannt = true Handler () } if (document.addEventListener) {// (2) document.addEventListener ( "DOMContentLoaded", function () { bereit () }, False) } Else if (document.attachEvent) {// (3) // (3.1) if (document.documentElement.doScroll && Fenster == window.top) { funktionieren tryScroll () { if (genannt) Rückkehr if (! document.body) Rückkehr try { document.documentElement.doScroll ( "links") bereit () } Catch (e) { setTimeout (tryScroll, 0) } } tryScroll () } // (3.2) document.attachEvent ( "onreadystatechange", function () { if (document.readyState === "complete") { bereit () } }) } // (4) if (window.addEventListener) window.addEventListener ( 'load', bereit, false) else if (window.attachEvent) window.attachEvent ( 'onload', betriebsbereit) / * Else // (4.1) window.onload = bereit * / }
readyList = [] Funktion onReady (Handler) { if (! readyList.length) { bindReady (function () { for (var i = 0; i <readyList.length; i ++) { readyList [i] () } }) } readyList.push (Handler) }
Verwendung:
onReady (function () { // ... })
8) getElementsByClass ()
Ursprünglich insbesondere nicht von jedermann geschrieben. Viele Entwickler schrieb ihre eigene Version und ein Unentschieden ist nicht bewiesen, besser als andere.
Die folgende Funktion verwendet eine integrierte Methode getElementsByClass, falls vorhanden, und der Suche nach Elementen in ihrem eigenen Browser, wobei dieses Verfahren nicht der Fall ist.
if (document.getElementsByClassName) { getElementsByClass = function (classlist, node) { return (Knoten || Dokument) .getElementsByClassName (classlist) } } Else { getElementsByClass = function (classlist, node) { var node = Knoten || Dokument, list = node.getElementsByTagName ( '*'), length = List.length, classArray = classList.split (/ \ s + /), Klassen = classArray.length, result = [], i, j for (i = 0; i <Länge; i ++) { for (j = 0; j <Klassen; j ++) { if (Liste [i] .className.search ( '\\ b' + classArray [j] + '\\ b')! = -1) { result.push (Liste [i]) Pause } } } Rückgabeergebnis } }
classlist - Liste der Klassen durch Leerzeichen getrennt, die Elemente , aus denen gesucht werden muss.
Knoten - Suchkontext, Suche innerhalb einer Website
Zum Beispiel:
var div = document.getElementById ( "mydiv") Elemente = getElementsByClass ( 'klasse1 klasse2', div)
7) addClass () / removeClass ()
Die nächsten beiden Funktionen hinzufügen und DOM-Element-Klasse entfernen.
Funktion addClass (o, c) { var re = new RegExp ( "(^ | \\ s)" + c + "(\\ s | $)", "g") if (re.test (o.className)) return o.className = (o.className + "" + c) .replace (/ \ s + / g, "") .replace (/ (^ | $) / g, "") } Funktion removeClass (o, c) { var re = new RegExp ( "(^ | \\ s)" + c + "(\\ s | $)", "g") o.className = o.className.replace (re, "$ 1") ersetzen (/ \ s + / g, "") (. .replace / (^ | $) / g, "") }
6) Toggle ()
Um ehrlich zu sein, wahrscheinlich für diese Funktion gibt es mehr verschiedene Möglichkeiten, als es sonst notwendig sein.
Diese Option ist nicht so, wie er nicht behauptet hat die universelle Features- "Schalter" zu sein, aber er hat die meisten der Funktionalität zeigt und spryatyvaniya.
Funktion Toggle (), die Worte der Menschen
Funktion Knebel (el) { el.style.display = (el.style.display == 'none')? '': 'Keine' }
Beachten Sie, dass in der Funktion kein Wort über das Display = "Block", stattdessen ein leeres Display = ''. Ein leerer Wert bedeutet, dass die Entladungseigenschaften, das heißt, die Eigenschaft gibt den Wert in dem CSS angegeben.
Wenn also der Anzeigewert für das Element, genommen von CSS - keine (das Element ist standardmäßig ausgeblendet), schalten Sie dann wird diese Funktion nicht.
Diese Version bietet wechseln schön und einfach, aber dass einige andere Mängel machen es vielseitig genug.
5) insert ()
Als getElementsByClass ist diese Funktion aus irgendeinem Grund nicht in der DOM - Standard. Vielleicht, um Doppelfunktionen zu vermeiden, weil insert implementiert nur eine Zeile.
Funktion insert (Eltern, Knoten, referenceNode) { parent.insertBefore (Knoten, referenceNode.nextSibling); }
4) InArray ()
Es ist schade, dass es nicht eine integrierte Funktionalität des DOM ist. Aber jetzt haben wir die Möglichkeit, jederzeit diese Hinweise hier einfügen!
Für diese Funktion die geprüft === verwendet, die für den exakten Vergleich sucht, ohne Gips.
Array.prototype.indexOf Methode in allen Browsern nicht unterstützt wird, so verwendet, wenn es vorhanden ist .
InArray = Array.prototype.indexOf? Funktion (arr, val) { Rückkehr arr.indexOf (val)! = -1 }: Funktion (arr, val) { var i = arr.length während (i--) { if (arr [i] === val) return true } return false }
3, 2 und 1) getCookie (), setCookie () , deleteCookie ()
In JavaScript gibt es keine Möglichkeit mit einem Cookie zu arbeiten normalerweise ohne zusätzliche Funktionen. Ich weiß nicht , wer die document.cookie entworfen, aber extrem schlecht gemacht.
Daher sind die folgenden Funktionen oder deren Analoga wesentlich.
// Gibt das Cookie, wenn es oder nicht definiert Funktion getCookie (name) { var entspricht = document.cookie.match (new RegExp ( "(?: ^ |;)" + Name.replace (/([\.$?* | {} \ (\) \ [\] \\\ / \ + ^]) / g, '\\ $ 1' ) + "= ([^] *)" )) Rückspiele? decodeURIComponent (treffer [1]): undefined } // Plätzchen uctanavlivaet Funktion setCookie (name, value, Requisiten) { Requisiten = Requisiten || {} var exp = props.expires if (typeof exp == "number" && exp) { var d = new Date () d.setTime (d.getTime () + exp * 1000) exp = props.expires = d } if (exp && exp.toUTCString) {props.expires = exp.toUTCString ()} Wert = encodeURIComponent (Wert) var updatedCookie = name + "=" + Wert for (var propName in Requisiten) { updatedCookie + = ";" + propName var propValue = Requisiten [propName] if (propValue! == true) {updatedCookie + = "=" + propValue} } document.cookie = updatedCookie } // Löscht das Cookie Funktion deleteCookie (name) { setCookie (Name, null, {gültig bis: -1}) }
Argumente:
- Name Cookie - Namen
- Wert Cookie - Wert (string)
- Requisiten Objekt mit zusätzlichen Eigenschaften des Cookie zu setzen:
- Cookie Ablaufzeit abgelaufen ist .
Es wird unterschiedlich interpretiert, abhängig von der Art der:
- Wenn die Zahl der - die Anzahl der Sekunden vor.
- Ist das Objekt vom Typ Datum - der genaue Ablaufdatum.
- Wenn im letzten abgelaufen, wird das Cookie gelöscht.
- Wenn abgelaufen ist abwesend oder gleich 0 ist, dann wird das Cookie als Session gesetzt werden und verschwinden, wenn der Browser geschlossen wird.
- Pfad Pfad für das Cookie.
- Domain - Domain für Cookie.
- Leiten Sie sicheres Cookie nur auf eine sichere Verbindung.
- Cookie Ablaufzeit abgelaufen ist .
Es wird unterschiedlich interpretiert, abhängig von der Art der:
Letzte, aber oft nützlich: function byId
Es ermöglicht Ihnen die gleichen Funktionen bei der Übertragung DOM-Knoten oder die ID zu arbeiten.
Funktion byId (Knoten) { Rückkehr typeof Knoten == 'string'? document.getElementById (Knoten): Knoten }
Es verwendet einfach:
Funktion zum Verbergen (Knoten) { Knoten = byId (Knoten) node.style.display = 'none' } Funktion animateHide (Knoten) Knoten = byId (Knoten) etwas (Knoten) hide (Knoten) }
Hier sind sowohl polymorphe Funktion und erlauben Knoten und seine ID und hat sehr bequem, weil machen lässt keine unnötigen Änderungen Knoten <-> id.
Kommentare
im Auge kommentierte halten , dass der Inhalt und der Ton Ihrer Nachrichten , die Gefühle von echten Menschen verletzen können, Respekt und Toleranz gegenüber seinen Gesprächspartnern, auch wenn Sie Ihr Verhalten in Bezug auf die Meinungsfreiheit und die Anonymität des Internets, ändert ihre Meinung nicht teilen, nicht nur virtuell, sondern realen Welt. Alle Kommentare werden aus dem Index, Spam - Kontrolle versteckt.