15 Бесплатни фотоапарати со примерок од JavaScript за вашите веб-страници

Член напишан од:
  • Избрани статии
  • Ажурирано: Сеп 23, 2019

JavaScript е се користи насекаде на Интернет деновиве - да се подобри интерактивноста на веб-страницата, да се потврдат информациите и / или да се подобрат гледиштата на веб-страницата.

JavaScript за прв пат се појави во 1995 и оттогаш помина долг пат од аспект на прифаќање и како се користи. Синтаксата користена во JavaScript беше под силно влијание од C; но и Јава, Перл, Пајтон и Шема, исто така, ја одиграа својата улога.

Совети за почетници на JavaScript: Што треба да знаете?

За почеток, неколку основи што треба да знаете се:

  • JavaScript може да се исклучи во прелистувачот
  • JavaScript ќе се извршува секој пат кога ќе се вчита страницата
  • Го вклучите Javascript-от потребно време да се вчита на бавна интернет врска
  • JavaScript сеуште тече од кеширани страници
  • Може да биде домаќин на JavaScript во рамките на веб-страница или надворешно од .js-датотека
  • JavaScript е сосема поинаков од Јава

Исто така е важно да се разбере дека JavaScript всушност ќе доведе до катастрофа кога се користи на погрешен начин.

Лошо конфигурираните и невешт кодирани JavaScript ќе ја забават вашата веб-страница и ќе ја оштетат целокупната навигација на страницата. Ова пак влијае на повратната стапка на вашите посетители (поради лошото искуство на корисникот), како и на рангот на пребарувачите (поради бавните стапки на одговор на веб-страниците и ползењето со бот). Да ви помогнеме да го потврдите мојот случај овде, ставете се во чевлите на гледачот. Ако некоја веб-страница што ја посетувавте натоварена бавно, беше тешко да се навигирате, а во целина, неисцрпувајќи - дали би се вратиле на страницата? Не би

Подолу е мал список на работи за кои треба да размислите кога додавате JavaScript на Твојот веб-сајт.

  • Дали JavaScript е потребен за правилно функционирање на веб-страницата?
  • Каква страница ќе изгледа ако JavaScript е блокиран?
  • Дали JavaScript ќе му наштети на перформансите на серверот?
  • Ќе додадете помош за вклучите ја вашата страница во насока на која сакате да одите?

Не, не се обидувам да ве исплашам со овие точки.

Всушност, не плашете се користете го JavaScript на вашите веб-страници бидејќи обезбедува тони придобивки и, како што споменавме, се користи од мнозинството. Клучната точка што јас се обидувам да ја разгледам тука е не само да продолжувам да додавате карактеристики на JavaScript на некоја страница кога тие се непотребни. На некои страници ќе им треба повеќе JavaScript од останатите; на некои само им треба помалку - Само затоа што една страница го прави тоа не значи дека треба да го сторите истото.

Слободен: 15 Кул JavaScript фрагменти за вашиот веб-сајт

Сега, ајде да се спуштиме на материјалите за кои дојдовте тука - подолу е список на 15 влезови JavaScript што ќе ја подобрат вашата страница или во функционалност или изглед. Кодот ќе биде поделен на два дела, главата и телото или датотеката .js. Ако не се даде наслов на делот, тогаш не е потребен за тој посебен дел.

1 Разбирање на видеото HTML5

Брз примерок

Функција <script type = "text / javascript"> Underst_video () {Return !! document.createElement ('video'). canPlayType; // boolean} if (! разбира_video ()) {// Мора да биде постар прелистувач или IE. // Можеби направете нешто како прилагодено контроли // HTML5 контроли. Или што и да е ... videoControls.style.display = 'никој'; } </script>

Што прави десктопот на JavaScript?

Овој мал фрагмент ќе ја спречи вашата веб-страница да се обидува да прикаже видео што прелистувачот не може да го поддржи, заштедувајќи го пропусниот опсег и моќ на процесирање.

2 Колачиња JavaScript

Брз примерок

<script type = "text / javascript"> / ** * Поставува колаче со дадено име и вредност. * * име Име на колачето * вредност Вредност на колачето * [истекува] Датум на истекување на колачето (стандардно: крај на тековната сесија) * [патека] Пат каде што валидно колаче е валидно (стандардно: патека за повикување на документ) * [ домен] Домен каде колачето е валидно * (стандардно: домен на документ за повикување) * [сигурно] вредност на Булова што означува дали преносот на колачето бара * безбеден пренос * / функција за поставување куки (име, вредност, истекува, патека, домен, безбеден) {document.cookie = име + "=" + бегство (вредност) + ((истекнува)? ";; истекува =" + истекува.toGMTString (): "") + ((патека)? "; патека =" + патека: "") + ((домен)? "; домен =" + домен: "") + ((безбеден)? "; сигурен": ""); } </script> <script type = "text / javascript"> / ** * Ја дава вредноста на наведеното колаче. * * име Име на посакуваното колаче. * * Враќа низа што содржи вредност на одредено колаче, * или нула ако колаче не постои. * / функција getCookie (име) {var dc = документ.каки; var префикс = име + "="; var fill = dc.indexOf (";" + префикс); ако (почеток == -1) {започне = dc.indexOf (префикс); ако (започнете! = 0) се врати нулта; } друго {започне + = 2; } var end = document.cookie.indexOf (";", започнете); ако (крај == -1) {крај = dc.l должина; } Return unescape (dc.substring (почеток + префикс. должина, крај)); } </script> <script type = "text / javascript"> / ** * Ги брише одредено колаче. * * Име на името на колачето * [патека] патеката на колачето (мора да биде иста како патеката што се користи за создавање колаче) * доменот на колачето * [домен] на колачето (мора да биде исто како и доменот користен за креирање колаче) * / функција DeleteCookie ( име, патека, домен) {ако (getCookie (име)) {document.cookie = име + "=" + ((патека)? "; патека =" + патека: "") + ((домен)? "; домен = "+ домен:" ") +"; истекува = Thu, 01-Jan-70 00: 00: 01 GMT "; }} </script>

Што прави десктопот на JavaScript?

Овој фрагмент е малку долг, но многу корисен, тоа ќе ви овозможи на вашиот сајт да складира информации на компјутерот на гледачот, а потоа да го прочита во друга точка во времето. Овој фрагмент може да се користи на многу различни начини за остварување на различни задачи.

3 Преоптоварете ги вашите слики

Брз примерок

<скрипта тип = ”текст / JavaScript”> var слики = нова низа (); функција preloadImages () {за (i = 0; i <preloadImages.argument.l должи; i ++) {слики [i] = нова слика (); слики [i] .src = preloadImages.argument [i]; }} preloadImages ("logo.jpg", "main_bg.jpg", "body_bg.jpg", "header_bg.jpg"); </script>

Што прави десктопот на JavaScript?

Овој фрагмент ќе го спречи вашиот сајт да го има тоа непријатно време кога само покажува дел од страницата; ова не само што изгледа лошо туку исто така е непрофесионално. Сè што треба да направите е да ги додадете вашите слики во делот за прегрупирање и сте подготвени да се тркалаат.

4 Потврда за е-пошта

Брз примерок

Раководител:

<скрипта тип = "текст / JavaScript"> валидирана функција е-пошта (theForm) {ако (/^w+((.- Франција?w+)*@w+((.- збор?w+)*(.w{2,3})+$ /.test(theForm.email-id.value)) {Return (точно); } предупредување ("Невалидна адреса за е-пошта! Ве молиме внесете повторно внимателно!"); враќање (лажно); } </script>

Тело: <form onSubmit = "Врати го потврда Е-пошта (ова);" акција = ""> Адреса на е-пошта: <input type = "text" name = "emailid" /> <input type = "поднесе" вредност = "Поднеси" /> <input type = "reset" value = "Reset" /> </form>

Што прави десктопот на JavaScript?

Овој дел ќе потврди дека правилно форматирана адреса за е-пошта е внесена во форма, не може да гарантира дека е-пошта е реална, не постои начин да се провери за тоа со JavaScript.

5 Нема десен клик

Брз примерок

<script type = "text / javascript"> функција f1 () {ако (документ.all) {се врати неточно; }} функција f2 (e) {ако (документ.ликери || (документ.getElementById &! документ.all)) {ако (e.which == 2 || e.which == 3) {се врати погрешно; }}} ако (документ.Лејсерс) {документ. снимање Евенци (настан.МОУЗИТНО); документ.onmousedown = f1; } друго {документ.onmouseup = f2; документ.oncontextmenu = f1; } document.oncontextmenu = нова функција ("Врати се лажни"); </script>

Што прави десктопот на JavaScript?

Овој фрагмент ќе го спречи гледачот да биде во можност да кликнете со десното копче на вашата страница. Ова може да го обесхрабри просечниот корисник да позајмуваат слики или кодови од вашиот сајт.

6 Прикажи случајни цитати

Брз примерок

Глава: <script type = "text / javascript"> writeRandomQuote = функција () {var quotes = new Array (); quotes [0] = "Дејството е вистинска мерка на интелигенција."; quotes [1] = "Бејзболот има голема предност во однос на крикет што порано заврши."; quotes [2] = "Секоја цел, секоја акција, секоја мисла, секое чувство што го доживува, без оглед дали е свесно или несвесно, е обид да се зголеми нечијото ниво на мир на умот."; quotes [3] = "Добрата глава и добро срце се секогаш огромна комбинација."; var rand = Math.floor (Математика.random () * цитати. должина); документ.write (цитати [ранд]); } пишуваRandomQuote (); </script>

Тело: <script type = "text / javascript"> writeRandomQuote (); </script>

Што прави десктопот на JavaScript?

Добро, ова не е фрагмент што ќе го користат сите сајтови, но може да се користи за прикажување на повеќе од само случајни цитати. Можете да ја промените содржината во целите на она што сакате и да имате случајни слики или текст прикажан било каде на вашиот сајт.

7 Претходни / следни врски

Брз примерок

<a href="javascript:history.back(1) "> Претходна страница </a> | <a href="javascript:history.back(-1) "> Следна страница </a>

Што прави десктопот на JavaScript?

Овој фрагмент е одличен ако имате повеќе страници на статија или упатство. Тоа ќе му овозможи на корисникот прелистување помеѓу страниците со леснотија. Исто така е мала и мала тежина од гледна точка на ресурсите.

8 Означи страница

Брз примерок

<a href="javascript:window.external.AddFavorite('http://www.yoursite.com', 'Your Your Site Name') "> Додај во Омилени </a>

Што прави десктопот на JavaScript?

Овој фрагмент ќе му овозможи на корисникот да ја обележи вашата страница со леснотија; се што треба да направите е да кликнете на линкот. Нејзините мали функции како ова што може да го зголемат целокупното искуство на гледачите.

9 Лесна страница за печатење

Брз примерок

<a href="javascript:window.print(); "> страница за печатење </a>

Што прави десктопот на JavaScript?

Оваа мала врска ќе им овозможи на вашите ставови лесно да ја испечатат вашата страница. Таа користи функцијата за брзо печатење која веќе е поставена од вашиот прелистувач и не користи ресурси додека не се кликне.

10 Покажи форматиран датум

Брз примерок

Глава: <script type = "text / javascript"> функција showDate () {var d = нов Датум (); var curr_date = d.getDate (); var curr_month = d.getMonth () + 1; // месеци се нула базирани var curr_year = d.getFullYear (); документ.write (curr_date + "-" + curr_month + "-" + curr_year); } </script>

Тело: <script type = "text / javascript"> showDate (); </script>

Што прави десктопот на JavaScript?

Овој фрагмент ќе ви овозможи да го прикажете тековниот датум насекаде на вашата веб страница и не треба да се ажурираат. Едноставно ставете го на место и заборавете на тоа.

11 Сепаратор на запирка

Брз примерок

Глава: <script type = ”text / javascript”> функција addCommas (num) {num + = ''; var n1 = num.split ('.'); var n2 = n1 [0]; var n3 = n1. должина> 1? '' + n1 [1]: ''; var temp = / (d +) (d {3) /; додека (temp.test (n2)) {n2 = n2.replace (temp, '' + ',' + ''); } var out = вратете го n2 + n3; документ.write (надвор); } </script>

Тело: <script type = "text / javascript"> addCommas ("4550989023"); </script>

Што прави десктопот на JavaScript?

Овој фрагмент ќе се користи главно од сајтови кои често ги користат броевите. Овој фрагмент ќе ги задржи вашите броеви да изгледаат исто во таблата. Се што треба да направите е да ја ископирате телесната линија каде што сакате да додадете број и да го замените бројот со бројот.

12 Добијте ја областа за приказ на прелистувачот

Брз примерок

<скрипта тип = "текст / JavaScript"> <! - var Viewportwidth; варијартен поглед // колку повеќе стандарди кои се во согласност со стандардите, прелистувачи (mozilla / netscape / opera / IE7) користат windows.innerWidth и windows.innerHeight if (typof windows.innerWidth! = 'недефинирано') {viewportwidth = windows.innerWidth, viewportheight = windows.innerHeight} / / IE6 во режим што е во согласност со стандардите (т.е. со валиден доктор како прва линија во документот) друго ако (typof документ.documentElement! = 'Недефинирано' && typof документ.documentElement.clientWidth! = 'Недефинирано' && документ.documentElement.clientWidth ! = 0) {viewportwidth = document.documentElement.clientWidth, viewportheight = document.documentElement.clientHeight} // постари верзии на IE other {viewportwidth = документ.getElementsByTagName ('тело') [0] .clientWidlement ('body') [0] .clientHeight} document.write ('<pp. Вашата ширина на приказот е' + прегледна ширина + 'x' + прегледување + '</p>'); // -> </script>

Што прави десктопот на JavaScript?

Овој фрагмент ќе ви овозможи да ја добиете ширината и висината на површината за прикажување во прегледувачот на прегледи. Ова ќе му даде на дизајнерот можност да креира и користи различни прикази врз основа на големината на прозорецот на прелистувачот на корисникот.

13 Пренасочување со изборно одложување

Брз примерок

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

Што прави десктопот на JavaScript?

Овој фрагмент ќе ви овозможи да ги пренасочите вашите гледачи на друга страница и има можност за поставување на задоцнување. Употребата на овој фрагмент е доста очигледна и е многу важна алатка за да имате во вашиот појас.

14 Откријте iPhone-и

Примерок

<скрипта тип = "текст / JavaScript"> ако ((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>

Што прави десктопот на JavaScript?

Овој фрагмент ќе ви овозможи да откриете дали вашиот прегледувач е на iPhone или iPod, овозможувајќи ви да прикажувате различна содржина до нив. Овој фрагмент е непроценлив со тоа колку е голем мобилниот пазар и тоа само ќе продолжи да расте.

15 Печатете порака во лентата за статус

Брз примерок

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

Што прави десктопот на JavaScript?

Овој мал фрагмент ќе ви овозможи да отпечатите порака до статусната лента. Можете да прикажете неодамнешни или важни вести во област која ќе го привлече вниманието на корисникот.

За WHSR гостин

Оваа статија е напишана од гостин учесник. Погледите на авторот подолу се целосно негови и не може да ги одразуваат ставовите на КОСР.