15 Cool JavaScript Sample Snippets

Artykuł napisany przez:
  • Polecane artykuły
  • Zaktualizowano: Mar 06, 2012

Szybki przegląd w JavaScript

JavaScript jest obecnie używany wszędzie w Internecie - w celu poprawy interaktywności strony internetowej, sprawdzania poprawności informacji i / lub poprawy perspektyw witryny. JavaScript pojawił się po raz pierwszy w 1995 i od tego czasu przeszedł długą drogę, jeśli chodzi o akceptację i sposób jego użycia. Składnia używana w JavaScript była pod silnym wpływem C; ale Java, Pearl, Python i Scheme również odegrały swoją rolę.

Co to jest JavaScript?

Stary film z YouTube dobrze odpowiada na pytanie. Tutaj idzie.

Porady dla początkujących: 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 rzeczywiście doprowadzi do katastrofy, gdy zostanie wykorzystany w niewłaściwy sposób. Źle skonfigurowane i niechlujnie kodowane skrypty JavaScript spowolnią działanie witryny i uszkodzą ogólną nawigację witryny. To z kolei wpływa na stopę zwrotu Twoich użytkowników (ze względu na złe doświadczenia użytkowników), a także rankingi w wyszukiwarkach (ze względu na powolne wskaźniki reakcji na witryny). Aby pomóc zweryfikować moją sprawę tutaj, postaw się w sytuacji widza. Jeśli witryna, którą odwiedzałeś, ładowała się powoli, była trudna w nawigacji i ogólnie rzecz biorąc, nieatrakcyjna - wróciłbyś na stronę? Nie zrobiłbym tego.

Poniżej znajduje się mała lista rzeczy do przemyślenia podczas dodawania kodu JavaScript do witryny.

  • 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żywać JavaScript na swoich stronach internetowych, ponieważ zapewnia mnóstwo korzyści i, jak wspomniano, jest używany przez większość. Kluczowym punktem, na który próbuję się tu dostać, jest nie tylko dodawanie funkcji JavaScript do witryny, gdy są one niepotrzebne. Niektóre witryny będą potrzebowały więcej JavaScript niż reszta; niektóre po prostu potrzebują mniej - tylko dlatego, że jedna strona to robi, nie oznacza to, że powinieneś zrobić to samo.

Darmowe graty: 15 Cool Snippets JavaScript dla Twojej strony

Fragment kodu JavaScript

Przejdźmy teraz do rzeczy, które tu przyszliście - poniżej znajduje się lista fragmentów kodu JavaScript 15, które poprawią funkcjonalność lub wygląd witryny. Kod zostanie podzielony na dwie części: plik head and body lub plik .js. Jeśli nie podano tytułu sekcji, nie jest potrzebny dla tego konkretnego fragmentu.

Zrozumienie wideo HTML5

Szybka próbka

<script type="text/javascript">

funkcja zrozumieć_video () {
return !! document.createElement ('video'). canPlayType; // boolean
}

if (! zrozumieć_video ()) {
// Musi to być starsza przeglądarka lub IE.
// Może zrobić coś takiego jak niestandardowe ukrywanie
// Formanty 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.

Cookies 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

* [wygaśnie] Data wygaśnięcia ciasteczka (domyślnie: koniec bieżącej sesji)

* [ścieżka] Ścieżka, w której plik cookie jest ważny (domyślnie: ścieżka do wywoływania dokumentu)

* [domain] Domena, w której plik cookie jest prawidłowy

* (domyślnie: domena dokumentu wywołującego)

* [secure] Wartość logiczna wskazująca, czy transmisja plików cookie wymaga

* bezpieczna transmisja

*/

function setCookie (nazwa, wartość, wygasa, ścieżka, domena, bezpieczne) {

document.cookie = name + "=" + escape (wartość) +

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

(? (Ścieżka) "; path =" + ścieżka: "") +

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

((Bezpieczne) "; bezpieczne": "");

}

</ Script>

<script type="text/javascript">

/ **

* Pobiera wartość określonego pliku cookie.

*

* name Nazwa żądanego pliku cookie.

*

* Zwraca ciąg znaków 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 (przedrostek ";" +);

if (begin == -1) {

begin = dc.indexOf (prefix);

jeśli (begin! = 0) zwróci wartość null;

} Else {

begin + = 2;

}

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

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 [domain] pliku cookie (musi być taka sama jak domena używana do utworzenia cookie)

*/

funkcja deleteCookie (nazwa, ścieżka, domena) {

if (getCookie (name)) {

document.cookie = name + "=" +

(? (Ścieżka) "; path =" + ścieżka: "") +

((domena)? "; domena =" + 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.

Wczytaj 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];

}

}

preloadImages ("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.

Sprawdzanie poprawności wiadomości e-mail

Szybka próbka

Głowa:

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

Ciało:

<form onSubmit = "return validateEmail (this);" action = "">
E-mail:
<input type = "text" name = "emailid" />
<input type = "submit" value = "Submit" />
<typ wejścia = „reset” wartość = „Reset” />
</ Form>

Do czego służy fragment kodu JavaScript?

Ten urywek potwierdzi, że prawidłowo sformatowany adres e-mail został wprowadzony w formularzu, nie może zagwarantować, że adres e-mail jest prawdziwy, nie ma możliwości sprawdzenia, czy jest to możliwe przy użyciu JavaScript.

Nie kliknij 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 = new function („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.

Wyświetl losowe notowania

Szybka próbka

Głowa:

<script type="text/javascript">
writeRandomQuote = function () {
var quotes = new Array ();
quotes [0] = "Akcja jest prawdziwą miarą inteligencji.";
quotes [1] = "Baseball ma wielką przewagę nad krykietem wcześniejszego zakończenia.";
cytaty [2] = "Każdy cel, każde działanie, każda myśl, każde uczucie, którego doświadczasz, czy to świadomie czy nieświadomie, jest próbą podniesienia poziomu spokoju umysłu.";
quotes [3] = "Dobra głowa i dobre serce są zawsze potężną 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.

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.

Dodaj stronę do zakładek

Szybka próbka

<a href="javascript:window.external.AddFavorite('http://www.yoursite.com','Your Site Name')"> 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.

Link do strony łatwego drukowania

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.

Pokaż datę sformatowaną

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.

Separator przecinków

Szybka próbka

Głowa:

<script type="text/javascript">
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 = powrót 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.

Uzyskaj obszar wyświetlania przeglądarki

Szybka próbka

<script type="text/javascript">

<! -

var viewportwidth;

var viewportheight;

// bardziej zgodne z normami przeglądarki (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 zgodności z normami (tj. Z poprawnym typem dokumentu jako pierwszym wierszem w dokumencie)

else if (typeof document.documentElement! = 'undefined'

&& typeof document.documentElement.clientWidth! =

"undefined" && document.documentElement.clientWidth! = 0)

{

viewportwidth = document.documentElement.clientWidth,

viewportheight = document.documentElement.clientHeight

}

// starsze wersje IE

więcej

{

viewportwidth = document.getElementsByTagName ("body") [0] .clientWidth,

viewportheight = document.getElementsByTagName ("body") [0] .clientHeight

}

document.write ('<p> Twoja szerokość widocznego obszaru to' + viewportth + 'x' + viewportheight + '</ 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.

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.

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ł.

Drukuj 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.

Artykuł WHSR Gość

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.