Darmowe fragmenty kodu JavaScript 15 dla twoich stron internetowych

Artykuł napisany przez:
  • Polecane artykuły
  • Zaktualizowano: Sep 23, 2019

JavaScript jest obecnie używane wszędzie online - w celu poprawy interaktywności strony internetowej, weryfikacji informacji i / lub poprawy wyglądu 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 niechlujne skrypty JavaScript spowalniają twoją stronę i szkodzą jej ogólnej nawigacji. To z kolei wpływa na współczynnik zwrotu użytkowników (z powodu złego doświadczenia użytkownika), a także na rankingi wyszukiwarek (z powodu niskiego wskaźnika odpowiedzi na stronie i indeksowania botów). Aby pomóc tutaj zweryfikować moją sprawę, postaw się w sytuacji widza. Jeśli strona, którą odwiedzasz, ładuje się powoli, nawigacja była trudna i ogólnie rzecz biorąc, nieatrakcyjna - czy wróciłbyś na tę stronę? Nie zrobiłbym tego.

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ść. Kluczowym punktem, który staram się tutaj omówić, jest nie tylko dodawanie funkcji JavaScript do strony, gdy są one niepotrzebne. Niektóre witryny będą wymagały więcej kodu JavaScript niż pozostałe; niektórzy po prostu potrzebują mniej - tylko dlatego, że robi to jedna strona, nie oznacza, że ​​powinieneś zrobić to samo.

Darmowe graty: 15 Cool Snippets JavaScript dla Twojej strony

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

1. Zrozumienie wideo HTML5

Szybka próbka

<script type = "text / javascript"> funkcja interpretands_video () {return !! document.createElement ('video'). canPlayType; // boolean} if (! rozumands_video ()) {// Musi być starszą przeglądarką lub IE. // Może zrób coś takiego jak ukrycie niestandardowych // elementów sterujących HTML5. Lub cokolwiek ... videoControls.style.display = 'none'; } </script>

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

<script type = "text / javascript"> / ** * Ustawia plik cookie o podanej nazwie i wartości. * * nazwa Nazwa pliku cookie * wartość Wartość pliku cookie * [wygasa] Data wygaśnięcia pliku cookie (domyślnie: koniec bieżącej sesji) * [ścieżka] Ścieżka, w której plik cookie jest ważny (domyślnie: ścieżka wywołania dokumentu) * [ domena] Domena, w której plik cookie jest ważny * (domyślnie: domena wywoływanego dokumentu) * [bezpieczna] Wartość logiczna wskazująca, czy transmisja pliku cookie wymaga * bezpiecznej transmisji * / funkcji setCookie (nazwa, wartość, wygasa, ścieżka, domena, bezpieczna) {document.cookie = nazwa + "=" + escape (wartość) + ((wygasa)? "; expires =" + expires.toGMTString (): "") + ((ścieżka)? "; ścieżka =" + ścieżka: „”) + ((domena)? ”; domena =„ + domena: „”) + ((bezpieczna)? ”; bezpieczna„: „”); } </script> <script type = "text / javascript"> / ** * Pobiera wartość określonego pliku cookie. * * nazwa Nazwa żądanego pliku cookie. * * Zwraca ciąg zawierający wartość określonego pliku cookie, * lub null, jeśli plik cookie nie istnieje. * / 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 (";", start); if (end == -1) {end = dc.length; } return unescape (dc.substring (begin + prefix.length, end)); } </script> <script type = "text / javascript"> / ** * Usuwa określony plik cookie. * * nazwa pliku cookie * [ścieżka] ścieżka pliku cookie (musi być taka sama jak ścieżka użyta do utworzenia pliku cookie) * [domena] domena pliku cookie (musi być taka sama jak domena użyta do utworzenia pliku cookie) * / function deleteCookie ( nazwa, ścieżka, domena) {if (getCookie (name)) {document.cookie = name + "=" + ((path)? "; path =" + path: "") + ((domain)? "; domain = „+ domena:„ ”) +”; wygasa = Czw, 01-Jan-70 00: 00: 01 GMT ”; }} </script>

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

<script type = "text / javascript"> var images = new Array (); funkcja preloadImages () {for (i = 0; i <preloadImages.arguments.length; i ++) {images [i] = new Image (); images [i] .src = preloadImages.arguments [i]; }} preloadImagesImages („logo.jpg”, „main_bg.jpg”, „body_bg.jpg”, „header_bg.jpg”); </script>

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:

<script type = "text / javascript"> funkcja validateEmail (theForm) {if (/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$ /.test(theForm.email-id.value)) {return (true); } alert („Nieprawidłowy adres e-mail! Wpisz ponownie ostrożnie!”); return (false); } </script>

Ciało: <form onSubmit = "return validateEmail (this);" action = ""> Adres e-mail: <input type = "text" name = "emailid" /> <input type = "upload" wartość = „Submit” /> <input type = „reset” wartość = „Reset” /> </form>

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

<script type = "text / javascript"> funkcja f1 () {if (document.all) {return false; }} funkcja 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 = nowa funkcja („return false”); </script>

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: <script type = "text / javascript"> writeRandomQuote = function () {var quotes = new Array (); quotes [0] = "Działanie jest prawdziwą miarą inteligencji."; quotes [1] = "Baseball ma tę przewagę nad krykietem, że wcześniej skończył."; quotes [2] = "Każdy cel, każde działanie, każda myśl, każde uczucie, którego się doświadcza, czy to świadomie, czy nieświadomie, jest próbą podniesienia poziomu spokoju."; quotes [3] = "Dobra głowa i dobre serce są zawsze budzącą grozę kombinacją."; var rand = Math.floor (Math.random () * quotes.length); document.write (quotes [rand]); } writeRandomQuote (); </script>

Ciało: <script type = "text / javascript"> writeRandomQuote (); </script>

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

<a href="javascript:history.back(1)"> Poprzednia strona </a> | <a href="javascript:history.back(-1)"> Następna strona </a>

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

<a href="javascript:window.external.AddFavorite('http://www.yoursite.com', „Twoja nazwa strony” )"> Dodaj do ulubionych </a>

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

<a href="javascript:window.print();"> Drukuj stronę </a>

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: <script type = "text / javascript"> funkcja showDate () {var d = new Date (); var curr_date = d.getDate (); var curr_month = d.getMonth () + 1; // miesiące są zerowe var curr_year = d.getFullYear (); document.write (curr_date + "-" + curr_month + "-" + curr_year); } </script>

Ciało: <script type = "text / javascript"> showDate (); </script>

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: <script type = "text / javascript"> funkcja addCommas (num) {num + = ''; var n1 = liczba podświetlona ('.'); var n2 = n1 [0]; var n3 = n1.length> 1? „.” + n1 [1]: ''; var temp = / (d +) (d {3}) /; while (test temp. (n2)) {n2 = n2.replace (temp, '' + ',' + ''); } var out = return n2 + n3; document.write (out); } </script>

Ciało: <script type = "text / javascript"> addCommas („4550989023”); </script>

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

<script type = "text / javascript"> <! - var viewportwidth; var viewportheight; // przeglądarki bardziej zgodne ze standardami (mozilla / netscape / opera / IE7) używają window.innerWidth i window.innerHeight if (typeof window.innerWidth! = 'undefined') {viewportwidth = window.innerWidth, viewportheight = window.innerHeight} / / IE6 w trybie zgodnym ze standardami (tj. Z poprawnym typem dokumentu jako pierwszym wierszem dokumentu) jeszcze jeśli (typeof document.documentElement! = 'Undefined' && typeof document.documentElement.clientWidth! = 'Undefined' && document.documentElement.clientWidth ! = 0) {viewportwidth = document.documentElement.clientWidth, viewportheight = document.documentElement.clientHeight} // starsze wersje IE else {viewportwidth = document.getElementsByTagName ('body') [0] .clientWidth, viewportheightB document.agElements („body”) [0] .clientHeight} document.write („<p> Twoja szerokość rzutni to„ + szerokość widoku + „x” + wysokość widoku + ”</p>”); // -> </script>

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

<script type = "text / javascript"> setTimeout („window.location.href = 'http://walkerwines.com.au/'”, 5 * 1000); </script>

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

<script type = "text / javascript"> 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"; }} </script>

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

<script language = "javascript" type = "text / javascript"> <! - window.status = "<TYPE YOUR MESSAGE>"; // -> </script>

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.