A JavaScriptet manapság az interneten mindenütt használják – a weboldal interaktivitásának javítása, az információk érvényesítése és / vagy a webhely kilátásainak javítása érdekében.


A JavaScript először 1995-ben jelent meg, és azóta hosszú utat tett az elfogadás és a felhasználás szempontjából. A JavaScriptben alkalmazott szintaxist erősen befolyásolta C; de a Java, a Pearl, a Python és a Scheme szintén szerepet játszottak.

JavaScripti kezdő tippek: Tudnivalók?

A kezdőknek néhány alapvető tudnivalót kell tudni:

  • A JavaScriptet ki lehet kapcsolni a böngészőben
  • A JavaScript minden oldal betöltésekor fut
  • A JavaScript igénybe vesz egy lassú internetkapcsolat betöltését
  • A JavaScript továbbra is a tárolt oldalakból fut
  • A JavaScriptet weboldalon vagy .js fájlból is tárolhatja
  • A JavaScript teljesen más, mint a Java

Fontos megérteni azt is, hogy a JavaScript valódi katasztrófához vezet, ha rosszul használják.

A rosszul konfigurált és hanyagkódú JavaScriptek lelassítják webhelyét, és károsítják az általános navigációt. Ez viszont befolyásolja a látogatók visszatérési arányát (a rossz felhasználói élmény miatt), valamint a keresőmotorok rangsorolását (a webhely lassú válaszadási aránya és a robot robotok bejárása miatt). Annak érdekében, hogy itt megerősítsem az esetem, tedd magad a néző cipőjébe. Ha egy meglátogatott webhely lassan töltődött be, nehéz volt navigálni, és általánosságban nem vonzó – visszatérsz a webhelyre? Nem lennék.

Az alábbiakban egy kis listát találunk a dolgokról, amelyekre gondolkodni kell, amikor a JavaScriptet hozzáadja a webhelyéhez.

  • A webhely megfelelő működéséhez JavaScript szükséges??
  • Milyen lesz az oldal, ha a JavaScriptet blokkolták?
  • A JavaScript károsítja-e a szerver teljesítményét??
  • A JavaScript hozzáadásával segít abban, hogy webhelyét az Ön által kívánt irányba mozgassa?

Nem, nem próbálom megijeszteni ezeket a pontokat.

Valójában ne félj a JavaScriptet használni a webhelyein, mivel rengeteg előnyt jelent, és amint már említettük, a többség is használja. A legfontosabb kérdés, amelyet megpróbálok itt átjutni, az nem csak a JavaScript funkciók hozzáadása egy webhelyhez, ha ezek szükségtelenek. Néhány webhelyhez több JavaScriptre lesz szükség, mint a többihez; néhánynak kevesebbre van szüksége – Csak azért, mert egy webhely csinál, ez nem azt jelenti, hogy ugyanazt kell tennie.

Freebies: 15 remek JavaScript-kivonat az Ön webhelyéhez

Most térjünk át azokhoz a dolgokhoz, amelyekre itt jöttél – az alábbiakban felsoroljuk a 15 JavaScript-kódrészletet, amelyek javítják webhelyét akár a funkcionalitás, akár a megjelenés szempontjából. A kódot két részre bontják: fej és test vagy .js fájl. Ha nem adunk meg egy szakaszcímet, akkor erre az adott részletre nincs szükség.

1. A HTML5 videó megértése

Gyors minta

függvény érti_video () {
return !! document.createElement (‘video’). canPlayType; // logikai
}

if (! érti_video ()) {
// Régebbi böngészőnek vagy IE-nek kell lennie.
// Talán csinálsz olyasmit, mint az elrejtés
// HTML5 vezérlők. Vagy mindegy…
videoControls.style.display = ‘nincs’;
}

Mit csinál a JavaScript kódrészlet??

Ez a kis részlet megakadályozza, hogy webhelye megpróbáljon megjeleníteni egy olyan videót, amelyet a böngésző nem tud támogatni, sávszélességet és feldolgozási energiát takarítva meg.

2. JavaScript sütik

Gyors minta

/ **

* Beállít egy cookie-t a megadott névvel és értékkel.

*

* név A süti neve

* érték A süti értéke

* [lejár] a süti lejárati ideje (alapértelmezett: az aktuális munkamenet vége)

* [elérési út] Az az út, ahol a süti érvényes (alapértelmezett: a hívó dokumentum elérési útja)

* [domain] Tartomány, ahol a süti érvényes

* (Alapértelmezett: a hívó dokumentum domainje)

* [biztonságos] logikai érték, amely jelzi, hogy a süti átviteléhez szükség van-e a

* Biztonságos átvitel

* /

setCookie függvény (név, érték, lejár, elérési út, domain, biztonságos) {

document.cookie = név + "=" + escape (érték) +

((Lejár) ? "; lejár =" + expires.toGMTString (): "") +

((pálya) ? "; path =" + pálya : "") +

((tartomány) ? "; domain =" + tartomány : "") +

((Biztonságos) ? "; biztos" : "");

}

/ **

* Beolvassa a megadott süti értékét.

*

* név a kívánt süti neve.

*

* A megadott süti értékét tartalmazó karakterláncot ad vissza,

* Vagy semleges, ha a süti nem létezik.

* /

getCookie (név) függvény {

var dc = document.cookie;

var prefix = név + "=";

var begin = dc.indexOf ("; " + előtag);

if (kezdődik == -1) {

begin = dc.indexOf (előtag);

if (kezdje! = 0) visszatér null értékre;

} más {

kezdődik + = 2;

}

var end = document.cookie.indexOf (";", kezdődik);

if (vége == -1) {

vége = dc.length;

}

unescape visszatérés (dc.substring (kezdőpont + előtag.hossz, vége));

}

/ **

* Törli a megadott sütit.

*

* a süti neve

* a süti elérési útja (ugyanaz, mint a süti létrehozásához használt útvonal)

* a cookie [domain] domain (ugyanazzal kell lennie, mint a cookie létrehozásához használt domain)

* /

deleteCookie funkció (név, elérési út, domain) {

if (getCookie (név)) {

document.cookie = név + "=" +

((pálya) ? "; path =" + pálya : "") +

((tartomány) ? "; domain =" + tartomány : "") +

"; lejár = csütörtök, január-70. 01: 00:01 GMT";

}

}

Mit csinál a JavaScript kódrészlet??

Ez a részlet egy kicsit hosszú, de nagyon hasznos, lehetővé teszi az Ön webhelyén, hogy információkat tároljon a néző számítógépén, majd egy másik időpontban elolvassa. Ez a kivonat sokféleképpen felhasználható különféle feladatok elvégzésére.

3. Töltse be előre a képeit

Gyors minta

var képek = új tömb ();

preloadImages () függvény {

for (i = 0; i < preloadImages.arguments.length; i ++) {

képek [i] = új kép ();

képek [i] .src = preloadImages.arguments [i];

}

}

preloadImages ("logo.jpg", "main_bg.jpg", "body_bg.jpg", "header_bg.jpg");

Mit csinál a JavaScript kódrészlet??

Ez a kivonat megakadályozza, hogy webhelye olyan kellemetlen időben legyen, amikor csak a webhely egy részét jeleníti meg; ez nem csak rossznak tűnik, de nem szakszerű. Csak annyit kell tennie, hogy hozzáadja képeit az preloadImages szakaszhoz, és készen áll a gördítésre.

4. E-mail érvényesítés

Gyors minta

Fej:

function validateEmail (theForm) {
ha (/ ^ w + ([.-]? w +) * @ w + ([.-]? w +) * (. w {2,3}) + $ /. teszt (aForm.email-id.érték)) {
return (true);
}
éber("Érvénytelen e-mail cím! Kérjük, írja be újra óvatosan!.");
visszatérés (false);
}

Test:

Email cím:

Mit csinál a JavaScript kódrészlet??

Ez a kivonat ellenőrzi, hogy a megfelelő formátumú e-mail címet beírták-e egy űrlapba, nem garantálja, hogy az e-mail cím valódi, ezt nem lehet JavaScript-rel ellenőrizni.

5. Nincs jobb kattintás

Gyors minta

f1 () {függvény
if (document.all) {return false; }
}
f2 (e) függvény {
if (document.layers || (document.getElementById &! document.all)) {
if (e.which == 2 || e.which == 3) {return false; }
}
}
if (document.layers) {
document.captureEvents (Event.MOUSEDOWN);
document.onmousedown = f1;
}
más {
document.onmouseup = f2;
document.oncontextmenu = f1;
}
document.oncontextmenu = új funkció ("hamis visszaadást");

Mit csinál a JavaScript kódrészlet??

Ez a kivonat megakadályozza, hogy a néző jobb egérgombbal kattintson az oldalára. Ez visszatarthatja az átlagos felhasználót attól, hogy képeket vagy kódot kölcsönvessen a webhelyéről.

6. A Véletlen idézetek megjelenítése

Gyors minta

Fej:

writeRandomQuote = function () {
var idézetek = új tömb ();
idézetek [0] = "A cselekvés az intelligencia valódi mértéke.";
idézetek [1] = "A baseballnak nagy előnye van a kriketttel szemben, hogy hamarosan véget ér.";
idézetek [2] = "Minden cél, minden cselekedet, minden gondolat, minden érzés, amelyet megtapasztalunk, akár tudatosan, akár öntudatlanul ismerjük, egy kísérlet arra, hogy növeljük a lelki nyugalom szintjét..";
idézetek [3] = "A jó fej és jó szív mindig félelmetes kombinációja.";
var rand = Math.floor (Math.random () * idézetek.hossz);
document.write (idézetek [rand]);
}
writeRandomQuote ();

Test:

writeRandomQuote ();

Mit csinál a JavaScript kódrészlet??

Rendben, tehát ez nem egy kivonat, amelyet az összes webhely használna, de felhasználható nem csupán véletlenszerű idézetek megjelenítésére. Meg lehet változtatni a tartalmat, az idézetek bármilyen kívánt, és véletlenszerű képeket vagy szöveget jeleníthet meg a webhelyén.

7. Előző / következő linkek

Gyors minta

Előző oldal | Következő oldal

Mit csinál a JavaScript kódrészlet??

Ez a kivonat nagyszerű, ha több oldal van egy cikkben vagy oktatóanyagban. Ez lehetővé teszi a felhasználó számára, hogy könnyedén böngészhet az oldalak között. Ez is kicsi és könnyű erőforrás szempontjából.

8. Jelöljön meg egy oldalt könyvjelzővel

Gyors minta

Add hozzá a kedvencekhez

Mit csinál a JavaScript kódrészlet??

Ez a kivonat lehetővé teszi a felhasználó számára, hogy könnyedén megjelölje az Ön oldalát könyvjelzővel; csak a linkre kell kattintaniuk. Az ilyen kis funkciók, amelyek növelik a nézők általános élményét.

9. Egyszerű nyomtatási oldal link

Gyors minta

Oldal nyomtatása

Mit csinál a JavaScript kódrészlet??

Ez a kis link lehetővé teszi, hogy a nézetek könnyen kinyomtassák az oldalt. Használja a böngésző által már beállított gyors nyomtatási funkciót, és a kattintásig nem használ forrásokat.

10. Mutassa a formázott dátumot

Gyors minta

Fej:

funkció showDate () {
var d = új dátum ();
var curr_date = d.getDate ();
var curr_month = d.getMonth () + 1; // A hónap nulla alapú
var curr_year = d.getFullYear ();
document.write (curr_date + "-" + curr_month + "-" + curr_year);
}

Test:

showDate ();

Mit csinál a JavaScript kódrészlet??

Ez a kivonat lehetővé teszi az aktuális dátum megjelenítését a weboldal bármely részén, és nem kell frissíteni. Egyszerűen tegye a helyére, és felejtsd el.

11. Vessző elválasztó

Gyors minta

Fej:

addCommas (num) függvény {
num + = ”;
var n1 = osztott rész (‘.’);
var n2 = n1 [0];
var n3 = n1.hossz > 1? ” + n1 [1]: ”;
var temp = / (d +) (d {3}) /;
míg (temp.teszt (n2)) {
n2 = n2.helyettesítés (temp, ” + ‘,’ + ”);
}
var out = visszatér n2 + n3;
document.write (out);
}

Test:

addCommas ("4550989023");

Mit csinál a JavaScript kódrészlet??

Ezt a kivonatot elsősorban azok a webhelyek használják, amelyek gyakran használnak számokat. Ez a kivonat a számokat az egész fedélzetén azonosnak fogja tartani. Csak annyit kell tennie, hogy lemásolja a törzsvonalat, ahova hozzá szeretne adni egy számot, és helyettesíti ott a számot a számával.

12. Szerezze be a böngésző megjelenítési területét

Gyors minta

Jeffrey Wilson Administrator

Sorry! The Author has not filled his profile.
follow me