Darmowe fragmenty kodu JavaScript 15 dla twoich stron internetowych

Zaktualizowano: 23 września 2019 r. / Artykuł: WHSR Guest

JavaScript jest obecnie używane wszędzie online - aby poprawić interaktywność strony internetowej, zweryfikować informacje i / lub poprawić wygląd strony internetowej.

JavaScript pojawił się po raz pierwszy w 1995 i od tego czasu przeszedł długą drogę pod względem akceptacji i sposobu użycia. Składnia użyta w JavaScript była pod silnym wpływem C; ale Java, Pearl, Python i Scheme również odegrały swoją rolę.

Wskazówki dla początkujących JavaScrip: Co musisz wiedzieć?

Na początek kilka podstawowych rzeczy, które musisz wiedzieć, to:

  • JavaScript można wyłączyć w przeglądarce
  • JavaScript będzie uruchamiany przy każdym załadowaniu strony
  • Wczytanie kodu JavaScript zajmuje trochę czasu na wolnym połączeniu internetowym
  • JavaScript jest nadal uruchamiany z buforowanych stron
  • Możesz obsługiwać JavaScript na stronie internetowej lub zewnętrznie z pliku .js
  • JavaScript jest zupełnie inny niż Java

Ważne jest również, aby zrozumieć, że JavaScript faktycznie prowadzi do katastrofy, gdy jest używany w niewłaściwy sposób.

Źle skonfigurowane i niedbale zakodowane skrypty JavaScript spowalniają Twoją witrynę i uszkadzają ogólną nawigację w witrynie. To z kolei wpływa na współczynnik zwrotów odwiedzających (z powodu złego doświadczenia użytkownika), a także rankingi wyszukiwarek (ze względu na powolne wskaźniki odpowiedzi witryny i indeksowanie botów). Aby pomóc mi w potwierdzeniu mojego przypadku, postaw się w sytuacji widza. Gdyby witryna, którą odwiedzasz, ładowała się powoli, była trudna w nawigacji i ogólnie nieatrakcyjna - czy wróciłbyś do niej? Nie chciałbym.

Poniżej znajduje się mała lista rzeczy do przemyślenia podczas dodawania JavaScript Twoja strona internetowa.

  • Czy JavaScript jest wymagany do prawidłowego działania witryny?
  • Jak będzie wyglądać strona, jeśli JavaScript zostanie zablokowany?
  • Czy JavaScript zaszkodzi wydajności serwera?
  • Czy dodanie kodu JavaScript pomoże przenieść Twoją witrynę w kierunku, w którym chcesz, aby się udała?

Nie, nie próbuję cię odstraszyć tymi punktami.

W rzeczywistości nie bój się używaj JavaScript na swoich stronach ponieważ zapewnia mnóstwo korzyści i, jak wspomniano, jest używany przez większość. Kluczową kwestią, którą staram się tu przekazać, jest nie tylko dodawanie funkcji JavaScript do witryny, gdy są one niepotrzebne. Niektóre witryny będą potrzebować więcej JavaScript niż inne; niektórzy po prostu potrzebują mniej - to, że jedna witryna to robi, nie oznacza, że ​​powinieneś robić to samo.

Darmowe graty: 15 Cool Snippets JavaScript dla Twojej strony

Teraz przejdźmy do rzeczy, dla których tu przyszedłeś - poniżej znajduje się lista 15 fragmentów kodu JavaScript, które poprawią Twoją witrynę pod względem funkcjonalności lub wyglądu. Kod zostanie podzielony na dwie sekcje, nagłówek i treść lub plik .js. Jeśli nie podano tytułu sekcji, nie jest on potrzebny dla tego konkretnego fragmentu.

1. Zrozumienie wideo HTML5

Szybka próbka

function understands_video() {
return !!document.createElement('video').canPlayType; // boolean
}

if ( !understands_video() ) {
// Must be older browser or IE.
// Maybe do something like hide custom
// HTML5 controls. Or whatever...
videoControls.style.display = 'none';
}

Do czego służy fragment kodu JavaScript?

Ten krótki fragment uniemożliwi Twojej witrynie wyświetlanie wideo, którego przeglądarka nie obsługuje, oszczędzając przepustowość i moc przetwarzania.

2. Pliki cookie JavaScript

Szybka próbka

/**

* Sets a Cookie with the given name and value.

*

* name       Name of the cookie

* value      Value of the cookie

* [expires]  Expiration date of the cookie (default: end of current session)

* [path]     Path where the cookie is valid (default: path of calling document)

* [domain]   Domain where the cookie is valid

*              (default: domain of calling document)

* [secure]   Boolean value indicating if the cookie transmission requires a

*              secure transmission

*/                        

function setCookie(name, value, expires, path, domain, secure) {

    document.cookie= name + "=" + escape(value) +

        ((expires) ? "; expires=" + expires.toGMTString() : "") +

        ((path) ? "; path=" + path : "") +

        ((domain) ? "; domain=" + domain : "") +

        ((secure) ? "; secure" : "");

}








/**

* Gets the value of the specified cookie.

*

* name  Name of the desired cookie.

*

* Returns a string containing value of specified cookie,

*   or null if cookie does not exist.

*/

function getCookie(name) {

    var dc = document.cookie;

    var prefix = name + "=";

    var begin = dc.indexOf("; " + prefix);

    if (begin == -1) {

        begin = dc.indexOf(prefix);

        if (begin != 0) return null;

    } else {

        begin += 2;

    }

    var end = document.cookie.indexOf(";", begin);

    if (end == -1) {

        end = dc.length;

    }

    return unescape(dc.substring(begin + prefix.length, end));

}








/**

* Deletes the specified cookie.

*

* name      name of the cookie

* [path]    path of the cookie (must be same as path used to create cookie)

* [domain]  domain of the cookie (must be same as domain used to create cookie)

*/

function deleteCookie(name, path, domain) {

    if (getCookie(name)) {

        document.cookie = name + "=" +

            ((path) ? "; path=" + path : "") +

            ((domain) ? "; domain=" + domain : "") +

            "; expires=Thu, 01-Jan-70 00:00:01 GMT";

    }

}

Do czego służy fragment kodu JavaScript?

Ten fragment kodu jest trochę długi, ale bardzo przydatny, umożliwia witrynie przechowywanie informacji na komputerze użytkownika, a następnie odczytanie go w innym momencie. Ten fragment można wykorzystać na wiele różnych sposobów, aby wykonać różne zadania.

3. Wstępnie załaduj swoje zdjęcia

Szybka próbka

var images = new Array();

function preloadImages(){

    for (i=0; i 

Do czego służy fragment kodu JavaScript?

Ten fragment uniemożliwi Twojej stronie korzystanie z tego niezręcznego czasu, gdy wyświetla tylko część witryny; to nie tylko wygląda źle, ale jest również nieprofesjonalne. Wszystko, co musisz zrobić, to dodać zdjęcia do sekcji preloadImages i jesteś gotowy do rzucenia.

4. Weryfikacja adresu e-mail

Szybka próbka

Głowa:


function validateEmail(theForm) {
if (/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/.test(theForm.email-id.value)){
return(true);
}
alert("Invalid e-mail address! Please enter again carefully!.");
return(false);
}


Ciało: Adres e-mailowy:

Do czego służy fragment kodu JavaScript?

Ten fragment potwierdzi, że poprawnie sformatowany adres e-mail jest wprowadzony w formularzu, nie może zagwarantować, że adres e-mail jest prawdziwy, nie ma możliwości sprawdzenia tego za pomocą JavaScript.

5. Bez kliknięcia prawym przyciskiem myszy

Szybka próbka

function f1() {
  if(document.all) { return false; }
}
function f2(e) {
  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;
}
else {
  document.onmouseup = f2;
  document.oncontextmenu = f1;
}
document.oncontextmenu = new function("return false");

Do czego służy fragment kodu JavaScript?

Ten urywek uniemożliwi widzowi kliknięcie prawym przyciskiem myszy na stronie. Może to zniechęcić przeciętnego użytkownika do wypożyczania obrazów lub kodu z Twojej witryny.

6. Wyświetlaj losowe cytaty

Szybka próbka

Głowa:
  writeRandomQuote = function () {
    var quotes = new Array();
    quotes[0] = "Action is the real measure of intelligence.";
    quotes[1] = "Baseball has the great advantage over cricket of being sooner ended.";
    quotes[2] = "Every goal, every action, every thought, every feeling one experiences, whether it be consciously or unconsciously known, is an attempt to increase one's level of peace of mind.";
    quotes[3] = "A good head and a good heart are always a formidable combination.";
    var rand = Math.floor(Math.random()*quotes.length);
    document.write(quotes[rand]);
  }
  writeRandomQuote();


Ciało: writeRandomQuote();

Do czego służy fragment kodu JavaScript?

Ok, więc nie jest to fragment, z którego korzystają wszystkie witryny, ale może być używany do wyświetlania więcej niż tylko losowych cytatów. Możesz zmienić treść ok cytatów na dowolne miejsce i wyświetlać losowe obrazy lub tekst w dowolnym miejscu na swojej stronie.

7. Poprzednie / Następne linki

Szybka próbka

Poprzednia strona | Następna strona

Do czego służy fragment kodu JavaScript?

Ten fragment jest świetny, jeśli masz wiele stron w artykule lub samouczku. Pozwoli to użytkownikowi łatwo przeglądać strony. Jest to również mały i lekki z punktu widzenia zasobów.

8. Dodaj stronę do zakładek

Szybka próbka

Dodaj do ulubionych

Do czego służy fragment kodu JavaScript?

Ten fragment kodu pozwala użytkownikowi na łatwe dodawanie zakładek do strony; wszystko, co musisz zrobić, to kliknąć link. Takie małe funkcje, które mogą zwiększyć ogólne wrażenia widzów.

9. Łatwy wydruk strony

Szybka próbka

Drukuj stronę

Do czego służy fragment kodu JavaScript?

Ten mały link pozwoli Twoim widokom łatwo wydrukować stronę. Wykorzystuje funkcję szybkiego drukowania już skonfigurowaną przez przeglądarkę i nie wykorzystuje żadnych zasobów, dopóki nie zostanie kliknięta.

10. Pokaż sformatowaną datę

Szybka próbka

Głowa:
  function showDate() {
    var d = new Date();
    var curr_date = d.getDate();
    var curr_month = d.getMonth() + 1; //months are zero based
    var curr_year = d.getFullYear();
    document.write(curr_date + "-" + curr_month + "-" + curr_year);
  }


Ciało: showDate();

Do czego służy fragment kodu JavaScript?

Ten fragment kodu umożliwia wyświetlenie bieżącej daty w dowolnym miejscu na stronie internetowej i nie wymaga aktualizacji. Po prostu umieść go na miejscu i zapomnij o tym.

11. Separator przecinków

Szybka próbka

Głowa:
function addCommas(num) {
  num += '';
  var n1 = num.split('.');
  var n2 = n1[0];
  var n3 = n1.length > 1 ? '.' + n1[1] : '';
  var temp = /(d+)(d{3})/;
  while (temp.test(n2)) {
    n2 = n2.replace(temp, '' + ',' + '');
  }
  var out = return n2 + n3;
  document.write(out);
}


Ciało: addCommas("4550989023");

Do czego służy fragment kodu JavaScript?

Ten fragment będzie używany głównie przez witryny, które często używają liczb. Ten urywek sprawi, że twoje numery będą wyglądały tak samo na całej planszy. Wszystko, co musisz zrobić, to skopiować linię ciała, w której chcesz dodać numer, i zastąpić tam numer swoim numerem.

12. Uzyskaj obszar wyświetlania przeglądarki

Szybka próbka

Your viewport width is '+viewportwidth+'x'+viewportheight+'');

//-->

Do czego służy fragment kodu JavaScript?

Ten fragment pozwala uzyskać szerokość i wysokość obszaru wyświetlania w przeglądarce widoków. Daje to projektantowi możliwość tworzenia i używania różnych wyświetlaczy w zależności od rozmiaru okna przeglądarki użytkownika.

13. Przekieruj z opcjonalnym opóźnieniem

Szybka próbka

setTimeout( "window.location.href =

'http://walkerwines.com.au/'", 5*1000 );

Do czego służy fragment kodu JavaScript?

Ten fragment pozwoli ci przekierować widzów na inną stronę i ma możliwość ustawienia opóźnienia. Użycie tego fragmentu jest dość zrozumiałe i jest bardzo cennym narzędziem do noszenia na pasku.

14. Wykryj iPhone'y

Próba

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {

    if (document.cookie.indexOf("iphone_redirect=false") == -1) {

        window.location = "http://m.espn.go.com/wireless/?iphone&i=COMR";

    }

}

Do czego służy fragment kodu JavaScript?

Ten fragment pozwoli Ci wykryć, czy Twoja przeglądarka znajduje się na iPhonie lub iPodzie, umożliwiając wyświetlanie różnych treści. Ten fragment jest nieoceniony w związku z tym, jak duży jest rynek telefonii komórkowej i będzie nadal się powiększał.

15. Wydrukuj wiadomość na pasku stanu

Szybka próbka

 
"; 
// --> 

Do czego służy fragment kodu JavaScript?

Ten mały fragment pozwala wydrukować wiadomość na pasku stanu. Możesz wyświetlić najnowsze lub ważne wiadomości w obszarze, który przyciągnie wzrok użytkownika.

O gościu WHSR

Ten artykuł został napisany przez współpracownika gościa. Poniższe poglądy autora są w całości jego i mogą nie odzwierciedlać poglądów WHSR.