Mfano wa 15 wa bure wa JavaScript kwa Wavuti zako

Kifungu kilichoandikwa na:
  • Matukio ya Makala
  • Iliyasasishwa Septemba 23, 2019

JavaScript ni kutumika kila mahali mtandaoni siku hizi - Kuboresha uingiliano wa wavuti, kuhalalisha habari, na / au kuboresha utendaji wa wavuti.

JavaScript ilionekana kwanza katika 1995 na imetoka mbali sana tangu wakati huo katika suala la kukubalika na jinsi inatumiwa. Syntax iliyotumiwa katika JavaScript ilisukumwa sana na C; lakini Java, Lulu, Python, na Scheme pia ilicheza pia.

Vidokezo vya Mwanzo vya JavaScript: Unachohitaji Kujua?

Kwa mwanzo, misingi ya chini unayohitaji kujua ni:

  • JavaScript inaweza kuzima kwenye kivinjari
  • JavaScript itaendesha kila wakati ukurasa umebeba
  • JavaScript inachukua muda wa kupakia uunganisho wa polepole wa Intaneti
  • JavaScript bado imekimbia kutoka kurasa zilizofichwa
  • Unaweza mwenyeji wa JavaScript ndani ya ukurasa wa wavuti au nje kutoka kwa faili ya .js
  • JavaScript ni tofauti kabisa na Java

Ni muhimu pia kuelewa kuwa JavaScript itasababisha maafa wakati itatumiwa kwa njia mbaya.

Jalada zilizosanidiwa vizuri na zisizo na maana zitapunguza tovuti yako na kuharibu urambazaji wa tovuti kwa jumla. Hii pia inathiri kiwango cha kurudi kwa wageni wako (kwa sababu ya uzoefu mbaya wa watumiaji) na viwango vya injini za utaftaji (kwa sababu ya viwango vya mwitikio wa tovuti polepole na kutambaa kwa bot). Ili kusaidia kuhalalisha kesi yangu hapa, jiweke mwenyewe katika viatu vya mtazamaji. Ikiwa tovuti uliyokuwa ukitembelea imepakia polepole, ilikuwa ngumu kuteleza, na kwa jumla, kutokuwa na mpango - ungerejea kwenye tovuti? Sikuweza.

Hapo chini kuna orodha ndogo ya vitu vya kufikiria wakati wa kuongeza JavaScript kwa tovuti yako.

  • Javascript inahitajika ili tovuti itafanya kazi vizuri?
  • Tovuti itaonekanaje kama JavaScript imefungwa?
  • Je JavaScript itaumiza utendaji wa seva?
  • Je, utaongeza usaidizi wa Javascript kuhamisha tovuti yako kwa uongozi unayotaka?

Hapana, sijaribu kukutisha mbali na nukta hizi.

Kwa kweli, usiogope tumia JavaScript kwenye wavuti zako kwani hutoa faida ya tani na, kama ilivyotajwa, hutumiwa na makuu. Hoja muhimu ninayojaribu kupata hapa sio kuendelea kuongeza huduma za JavaScript kwenye tovuti wakati sio lazima. Tovuti zingine zitahitaji JavaScript zaidi kuliko zingine; wengine wanahitaji kidogo tu - Kwa sababu tovuti moja inafanya hivyo haimaanishi unapaswa kufanya vivyo hivyo.

Freebies: 15 Cool JavaScript Snippets Kwa Website yako

Sasa, wacha tufike chini kwa vitu ambavyo ulikuja hapa - hapa chini kuna orodha ya vijikuta vya 15 JavaScript ambazo zitaongeza tovuti yako katika utendaji au kuonekana. Nambari hiyo itavunjika katika sehemu mbili, kichwa na mwili au faili ya .js. Ikiwa hakuna kichwa cha sehemu kinachopewa basi hazihitajike kwa snippet hiyo.

1. Kuelewa Video ya HTML5

Mfano wa haraka

<script mofuta = "maandishi / javascript"> kazi inaelewa_video () {kurudi !! hati.createElement ('video') .PPTType; // boolean} ikiwa (! anaelewa_video ()) {// Lazima iwe kivinjari cha zamani au IE. // Labda fanya kitu kama kujificha vidhibiti // HTML5. Au chochote ... videoControls.style.display = 'hakuna'; } </script>

Snippet ya JavaScript inafanya nini?

Snippet hii ndogo itazuia tovuti yako kutoka kujaribu kujaribu video ambayo kivinjari haiwezi kuunga mkono, kukuokoa bandwidth na nguvu ya usindikaji.

2. Vidakuzi vya JavaScript

Mfano wa haraka

<script aina = "maandishi / javascript"> / ** * Inaweka kuki kwa jina na thamani uliyopewa. * * jina Jina la cookie * Thamani ya kuki * [inaisha] tarehe ya kumalizika kwa kidakuzi (chaguo-msingi: mwisho wa kikao cha sasa) * [njia] Njia ambapo kuki ni halali (chaguo-msingi: njia ya hati ya kupiga simu) * [ kikoa] Kiko ambapo kuki ni halali * (chaguo-msingi: kikoa cha hati ya kupiga simu) * [salama] Thamani ya Boolean inayoonyesha ikiwa maambukizi ya kuki yanahitaji * usalama wa maambukizi * / kazi setCookie (jina, thamani, kumalizika, njia, kikoa, salama) {hati.cookie = jina + "=" + kutoroka (thamani) + ((muda wake)? "; muda wake =" + expires.toGMTString (): "") + ((njia)? "; njia =" + njia: "") + ((kikoa)? "; kikoa =" + kikoa: ") + ((salama)?"; salama ":" "); } </script> <script aina = "maandishi / JavaScript"> / ** * Inapata thamani ya kuki iliyoainishwa. * * jina Jina la kuki inayotakiwa. * * Hurejesha kamba iliyo na thamani ya kuki maalum, * au null ikiwa kuki haipo. * / kazi GetCookie (jina) {var dc = hati.cookie; prefix = jina + "="; var kuanza = dc.indexOf (";" + kiambishi awali); ikiwa (anza == -1) {kuanza = dc.indexOf (kiambishi awali); ikiwa (anza! = 0) rudisha null; } mwingine {anza + = 2; } var end = hati.cookie.indexOf (";", anza); ikiwa (mwisho == -1) {mwisho = dc.length; } kurudi unescape (dc.substring (kuanza + prefix.length, mwisho)); } </script> <script ya aina = "maandishi / JavaScript"> / ** * Hushughulikia kidakuzi kilichoainishwa. * * jina la jina la kuki jina, njia, kikoa) {if (GetCookie (jina)) {hati.cookie = jina + "=" + ((njia)? "; njia =" + njia: "") + ((kikoa)? "; kikoa = "+ kikoa:" ") +"; muda wake = Thu, 01-Jan-70 00: 00: 01 GMT "; }} </script>

Snippet ya JavaScript inafanya nini?

Snippet hii ni muda mrefu lakini ni muhimu sana, itawawezesha tovuti yako kuhifadhi habari kwenye kompyuta ya mtazamaji kisha uisome wakati mwingine. Snippet hii inaweza kutumika kwa njia nyingi za kufanikisha kazi tofauti.

3. Pakia picha zako mapema

Mfano wa haraka

<script aina = "maandishi / javascript"> picha za var = Array mpya (); preloadImages () {kwa (i = 0; i <preloadImages.arguments.length; i ++) {picha [i] = Picha mpya (); picha [i] .src = preloadImages.arguments [i]; }} preloadImages ("logo.jpg", "main_bg.jpg", "body_bg.jpg", "header_bg.jpg"); </script>

Snippet ya JavaScript inafanya nini?

Snippet hii itauzuia tovuti yako kuwa na wakati usio wakati usioonyesha tu sehemu ya tovuti; hii sio tu inaonekana mbaya bali pia haina faida. Wote unapaswa kufanya ni kuongeza picha zako kwenye sehemu ya preloadImages na uko tayari kuingia.

4. Uthibitishaji wa barua-pepe

Mfano wa haraka

kichwa:

<script aina = "maandishi / javascript"> inafanya kazi idhibitishoEmail (theForm) {if (/^w+ audioku- >?w+)*@w+ ~ /.test(theForm.email-id.value)) {kurudi (kweli); } arifu ("Anwani batili ya barua pepe! Tafadhali ingiza tena kwa uangalifu !."); kurudi (uwongo); } </script>

Mwili: <form onSubmit = "kurudi halaliEmail (hii);" action = ""> Anwani ya barua-pepe: <aina ya pembejeo = "maandishi" jina = "emailid" /> <aina ya pembejeo = "tolea" value = "Toa" /> <aina ya pembejeo = "reset" value = "Rudisha" /> </form>

Snippet ya JavaScript inafanya nini?

Kivinjari hiki kitahakikisha kuwa anwani ya barua pepe iliyowekwa vizuri imeingizwa katika fomu, haiwezi kuhakikisha kuwa anwani ya barua-pepe ni kweli, hakuna njia ya kuangalia hiyo na JavaScript.

5. Hakuna Bonyeza-kulia

Mfano wa haraka

<script mofuta = "maandishi / javascript"> kazi f1 () {if (hati.all) {kurudi uongo; }} kazi f2 (e) {if (hati.layers || (hati.getElementById &! hati.all)) {if (e.which == 2 || e.which = = 3) {kurudi uongo; }}} ikiwa (document.layers) {hati.captureEvents (Tukio.MOUSEDOWN); hati.onmousedown = f1; } mwingine {hati.onmouseup = f2; hati.oncontextmenu = f1; } hati.oncontextmenu = kazi mpya ("kurudi uongo"); </script>

Snippet ya JavaScript inafanya nini?

Snippet hii itawazuia mtazamaji kuwa na uwezo wa kubofya haki kwenye ukurasa wako. Hii inaweza kudhoofisha mtumiaji wastani wa kukopa picha au msimbo kutoka kwenye tovuti yako.

6. Onyesha nukuu za bila mpangilio

Mfano wa haraka

Kichwa: <script ya aina = "maandishi / javascript"> kuandikaRandomQuote = kazi () {quotes = Array mpya (); nukuu [0] = "Kitendo ni kipimo halisi cha akili."; quotes [1] = "baseball ina faida kubwa juu ya kriketi ya kumaliza mapema."; quotes [2] = "Kila lengo, kila hatua, kila fikra, kila anahisi uzoefu, iwe ni wazi au inajulikana, ni jaribio la kuongeza kiwango cha amani ya akili."; quotes [3] = "Kichwa nzuri na moyo mzuri daima ni mchanganyiko hatari."; var rand = Math.floor (Math.random () * quotes.length); hati.write (nukuu [rand]); } andikaRandomQuote (); </script>

Mwili: <script ya aina = "maandishi / javascript"> AndikaRandomQuote (); </script>

Snippet ya JavaScript inafanya nini?

Ok hivyo hii sio snippet ambayo maeneo yote yatatumia lakini inaweza kutumika kuonyesha zaidi ya quotes tu. Unaweza kubadilisha yaliyomo vyema kila kitu unachotaka na uwe na picha za random au maandiko yaliyoonyeshwa mahali popote kwenye tovuti yako.

7. Viungo vilivyotangulia / vilivyofuata

Mfano wa haraka

<a href="javascript:history.back(1)"> Ukurasa wa awali </a> | <a href="javascript:history.back(-1)"> Ukurasa unaofuata </a>

Snippet ya JavaScript inafanya nini?

Snippet hii ni nzuri ikiwa una kurasa nyingi kwenye makala au mafunzo. Itawawezesha mtumiaji kuvinjari kati ya kurasa kwa urahisi. Pia ni uzito mdogo na mwembamba kutoka kwa mtazamo wa rasilimali.

8. Weka alama kwenye Ukurasa

Mfano wa haraka

<a href="javascript:window.external.AddFavorite elo'http://www.yoursite.com', 'Jina lako la Tovuti')"> Ongeza kwa Unayopendelea zaidi

Snippet ya JavaScript inafanya nini?

Snippet hii itawawezesha mtumiaji kufungua ukurasa wako kwa urahisi; wote wanapaswa kufanya ni bonyeza kiungo. Makala yake ndogo kama hii ambayo inaweza kuongeza watazamaji wako uzoefu kamili.

9. Kiungo cha Ukurasa wa Printa rahisi

Mfano wa haraka

<a href="javascript:window.print() ;"> Ukurasa wa Printa </a>

Snippet ya JavaScript inafanya nini?

Kiunganisho hiki kidogo kitaruhusu maoni yako kwa urahisi kuchapisha ukurasa wako. Inatumia kipengele cha kuchapisha haraka kilichowekwa tayari na kivinjari chako na haitumii rasilimali mpaka kinapobofya.

10. Onyesha Tarehe Iliyopangwa

Mfano wa haraka

Kichwa: <script ya aina = "maandishi / javascript"> show showDate () {var d = Tarehe mpya (); var curr_date = d.getDate (); var curr_month = d.getMonth () + 1; // miezi ni sifuri kulingana na cur curr_year = d.getFullYear (); hati.andika (curr_date + "-" + curr_month + "-" + curr_year); } </script>

Mwili: <script ya aina = "maandishi / javascript"> showDate (); </script>

Snippet ya JavaScript inafanya nini?

Snippet hii itawawezesha kuonyesha tarehe ya sasa popote kwenye ukurasa wako wa wavuti na haipaswi kuwa updated. Kuweka tu mahali na kusahau kuhusu hilo.

11. Mgawanyaji wa Comma

Mfano wa haraka

Kichwa: <script aina = "maandishi / javascript"> kazi kaziCommas (num) {num + = ''; var n1 = num.split ('.'); var n2 = n1 [0]; var n3 = n1.length> 1? '.' + n1 [1]: ''; var temp = / (d +) (d {3}) /; wakati (temp.test (n2)) {n2 = n2.replace (temp, '' + ',' + ''); } var nje = kurudi n2 + n3; hati.andika (nje); } </script>

Mwili: <script ya aina = "maandishi / javascript"> addCommas ("4550989023"); </script>

Snippet ya JavaScript inafanya nini?

Snippet hii itatumiwa hasa na maeneo ambayo hutumia namba mara nyingi. Snippet hii itaweka namba zako zitazama sawa kwenye ubao. Wote unapaswa kufanya ni nakala ya mstari wa mwili ambapo unataka kuongeza namba na uweke nafasi ya namba pale na nambari yako.

12. Pata eneo la Kuonyesha la Kivinjari

Mfano wa haraka

<script aina = "maandishi / javascript"> <! - var viewportwidth; var mtazamo wa kuona; // vivinjari zaidi vinavyoendana na viwango (mozilla / netscape / opera / IE7) hutumia windows.innerWidth na windows.innerHeight ikiwa (Typeof windows.innerWidth! = 'undefined') {viewportwidth = windows.innerWidth, viewportheight = windows.innerHeight} / / IE6 katika hali ya kufuata viwango (yaani na aina halali kama fungu la kwanza kwenye hati) mwingine ikiwa (typof hati.documentElement! = 'Haijafafanuliwa' && typof hati.documentElement.clientWidth! = 'Haijafafanuliwa' && hati.documentElement.clientWidth ! = 0) {viewportwidth = hati.documentElement.clientWightth, viewportheight = hati.documentElement.clientHeight} // matoleo ya zamani ya IE mwingine {viewportwidth = hati.getElementsByTagName ('body') [0] .clientWountth ('body') [0] .clientHeight} document.write ('<p> Upana wa kituo chako cha kutazama ni' + viewportwidth + 'x' + viewportheight + '</p>'); // -> </script>

Snippet ya JavaScript inafanya nini?

Snippet hii itawawezesha kupata upana na urefu wa eneo la kuonyesha kwenye kivinjari chako cha maoni. Hii itampa designer uwezo wa kuunda na kutumia maonyesho tofauti kulingana na ukubwa wa dirisha la kivinjari cha mtumiaji.

13. Ielekeze tena na Ucheleweshaji wa Hiari

Mfano wa haraka

<script mofuta = "maandishi / javascript"> setTimeout ("windows.location.href = 'http://walkerwines.com.au/'", 5 * 1000); </script>

Snippet ya JavaScript inafanya nini?

Snippet hii itawawezesha kurejesha watazamaji wako kwenye ukurasa mwingine na ina fursa ya kuweka kuchelewa. Matumizi ya snippet hii ni nzuri sana na ni chombo muhimu sana kuwa na ukanda wako.

14. Gundua iPhones

Sampuli

<script mofuta = "maandishi / javascript"> ikiwa ((navigator.userAgent.match (/ iPhone / i)) || (navigator.userAgent.match (/ iPod / i)) {if (hati.cookie.indexOf ( "iphone_redirect = uongo") == -1) {windows.location = "http://m.espn.go.com/wireless/?iphone&i=COMR"; }} </script>

Snippet ya JavaScript inafanya nini?

Snippet hii itawawezesha kuchunguza ikiwa mtazamaji wako kwenye iPhone au iPod inakuwezesha kuonyesha maudhui tofauti kwao. Snippet hii ni muhimu sana na soko kubwa la soko la simu na linaendelea kukua.

15. Chapisha Ujumbe kwa Bar ya Hali

Mfano wa haraka

<script lugha = "javascript" aina = "maandishi / javascript"> <! - windows.status = "<TYPE MESI YAKO>"; // -> </script>

Snippet ya JavaScript inafanya nini?

Snippet hii ndogo itawawezesha kuchapisha ujumbe kwenye bar ya hali. Unaweza kuonyesha habari za hivi karibuni au muhimu katika eneo ambalo litaona jicho la mtumiaji.

Kuhusu Guest WHSR

Makala hii imeandikwa na mchangiaji wa mgeni. Maoni ya mwandishi hapa chini ni yake mwenyewe na hawezi kutafakari maoni ya WHSR.