15 קטעי דוגמא חינם של JavaScript לאתרי האינטרנט שלך

JavaScript משמש בכל מקום מקוון בימינו – כדי לשפר את האינטראקטיביות באתר, לאימות מידע ו / או לשיפור השקפות האתר..


JavaScript הופיע לראשונה בשנת 1995 ועבר דרך ארוכה מאז מבחינת התקבלה ואופן השימוש בו. התחביר ששימש ב- JavaScript הושפע מאוד מ- C; אבל ג’אווה, פרל, פייתון וסכמה מילאו גם הם את חלקם.

טיפים למתחילים של JavaScrip: מה שאתה צריך לדעת?

בתור התחלה, כמה יסודות שאתה צריך לדעת הם:

  • ניתן לכבות JavaScript בדפדפן
  • JavaScript יפעל בכל פעם שעמוד נטען
  • JavaScript לוקח זמן לטעון על חיבור אינטרנט איטי
  • JavaScript עדיין מנוהל מדפים שמורים
  • אתה יכול לארח JavaScript בדף אינטרנט או חיצונית מקובץ .js
  • JavaScript שונה לחלוטין מג’אווה

חשוב גם להבין ש- JavaScript אכן יוביל לאסון כאשר משתמשים בו בצורה לא נכונה.

קבצי JavaScripts המוגדרים כהלכה ומוגדרים בצורה לא נכונה יאטו את האתר שלכם ויפגעו בניווט הכללי באתר. זה בתורו משפיע על שיעור ההחזר של המבקרים שלך (עקב חווית משתמש גרועה) וכן על דירוג מנועי החיפוש (בגלל שיעורי התגובה האיטיים וסריקת בוטים). כדי לעזור בתיקוף המקרה שלי כאן, הכנס את עצמך לנעליו של הצופה. אם אתר אינטרנט בו ביקרת נטען באטיות, היה קשה לניווט, ובסך הכל לא מושך – האם היית חוזר לאתר? לא הייתי עושה זאת.

להלן רשימה קטנה של דברים שכדאי לחשוב עליהם בעת הוספת JavaScript לאתר שלך.

  • האם JavaScript נדרש כדי שהאתר יתפקד כראוי?
  • איך ייראה האתר אם ה- JavaScript היה חסום?
  • האם ה- JavaScript יפגע בביצועי השרת?
  • האם הוספת JavaScript עזרה בהעברת האתר שלך בכיוון אליו תרצה?

לא, אני לא מנסה להפחיד אותך מהנקודות האלה.

למעשה, אל תפחדו להשתמש ב- JavaScript באתרי האינטרנט שלכם שכן הוא מספק יתרונות טונות וכאמור, הוא משמש את הרוב העיקרי. נקודת המפתח שאני מנסה לעבור כאן היא לא רק להוסיף תכונות JavaScript לאתר כשהן מיותרות. חלק מהאתרים יצטרכו יותר JavaScript מהיתר; חלקם פשוט צריכים פחות – רק בגלל שאתר אחד עושה זאת לא אומר שאתה צריך לעשות אותו דבר.

חינונים חופשיים: 15 קטעי JavaScript מגניבים לאתר האינטרנט שלך

כעת, בואו ונדאג לחומר שאליו הגעתם לכאן – להלן רשימה של 15 קטעי JavaScript שישפרו את האתר שלכם בפונקציונליות או במראה. הקוד יתפרק לשני חלקים, הראש והגוף או קובץ ה- .js. אם לא ניתנת כותרת קטע אז אין צורך באותו קטע מסוים.

1. הבנת וידיאו HTML5

מדגם מהיר

פונקציה מבין_ווידיאו () {
return !! document.createElement (‘וידאו’). canPlayType; // בוליאני
}

אם (! מבין_ווידיאו ()) {
// חייב להיות דפדפן ישן יותר או Internet Explorer.
// אולי עשו משהו כמו להסתיר מנהג אישי
// פקדי HTML5. או מה שלא יהיה…
videoControls.style.display = ‘אין’;
}

מה עושה קטע ה- JavaScript?

קטע קטן זה ימנע מהאתר שלך לנסות להציג סרטון בו הדפדפן אינו יכול לתמוך, יחסוך לך רוחב פס וכוח עיבוד.

2. עוגיות JavaScript

מדגם מהיר

/ **

* מגדיר קובץ Cookie עם השם והערך הנתון.

*

* שם שם העוגיה

* ערך ערך העוגיה

* [תפוג] תאריך תפוגה של העוגיה (ברירת מחדל: סוף ההפעלה הנוכחית)

* [נתיב] נתיב בו העוגיה תקפה (ברירת מחדל: נתיב של מסמך קורא)

* [תחום] תחום בו קובץ ה- cookie תקף

* (ברירת מחדל: תחום המסמך המתקשר)

* [מאובטח] ערך בוליאני המציין אם העברת העוגיות דורשת א

* הילוכים מאובטחים

* /

פונקציה setCookie (שם, ערך, תפוג, נתיב, תחום, מאובטח) {

document.cookie = שם + "=" + בריחה (ערך) +

((יפוג) ? "; פג =" + expires.toGMTString (): "") +

((נתיב) ? "; נתיב =" + נתיב: "") +

((דומיין) ? "; תחום =" + תחום: "") +

((לבטח) ? "; לבטח" : "");

}

/ **

* מקבל את ערך העוגיה שצוינה.

*

* שם שם העוגיה הרצויה.

*

* מחזירה מחרוזת המכילה ערך של העוגיה שצוינה,

* או null אם קובץ ה- cookie אינו קיים.

* /

פונקציה getCookie (שם) {

var dc = document.cookie;

קידומת var = שם + "=";

var begin = dc.indexOf ("; " + קידומת);

אם (התחל == -1) {

begin = dc.indexOf (קידומת);

אם (התחל! = 0) החזר null;

} אחרת {

התחל + = 2;

}

var end = document.cookie.indexOf (";", התחל);

אם (סוף == -1) {

סוף = אורך dc.

}

החזר unescape (מחרוזת dc. (התחל + קידומת. אורך, סוף));

}

/ **

* מוחק את העוגיה שצוינה.

*

* שם של העוגיה

* [נתיב] הנתיב של העוגיה (חייב להיות זהה לנתיב המשמש ליצירת קובץ cookie)

* תחום [תחום] של העוגיה (חייב להיות זהה לתחום המשמש ליצירת קובץ cookie)

* /

פונקציה deleteCookie (שם, נתיב, תחום) {

אם (getCookie (שם)) {

document.cookie = שם + "=" +

((נתיב) ? "; נתיב =" + נתיב: "") +

((דומיין) ? "; תחום =" + תחום: "") +

"; תפוג = יום חמישי, 01-ינואר -70 00:00:01 GMT";

}

}

מה עושה קטע ה- JavaScript?

קטע זה מעט ארוך אך שימושי מאוד, הוא יאפשר לאתר שלך לאחסן מידע במחשב של הצופה ואז לקרוא אותו בנקודת זמן אחרת. ניתן להשתמש בקטע זה בדרכים רבות ושונות לביצוע משימות שונות.

3. טען מראש את התמונות שלך

מדגם מהיר

תמונות var = מערך חדש ();

PreeloadImages פונקציה () {

עבור (i = 0; i < preloadImages.arguments.length; אני ++) {

תמונות [i] = תמונה חדשה ();

תמונות [i] .src = preloadImages.arguments [i];

}

}

תמונות מראש"logo.jpg", "main_bg.jpg", "body_bg.jpg", "header_bg.jpg");

מה עושה קטע ה- JavaScript?

קטע זה ימנע מהאתר שלך זמן מביך זה כאשר הוא מציג רק חלק מהאתר; זה לא רק נראה רע אלא גם לא מקצועי. כל שעליכם לעשות הוא להוסיף את התמונות שלכם למקטע תמונות מראש, ואתם מוכנים לגלגל.

4. אימות דואר אלקטרוני

מדגם מהיר

ראש:

פונקציה validateEmail (theForm) {
אם (/ ^ w + ([.-]? w +) * @ w + ([.-]? w +) * (. w {2,3}) + $ /. מבחן (theForm.email-id.value)) {
להחזיר (נכון);
}
התראה ("כתובת דואר אלקטרוני לא חוקית! אנא הכנס שוב בזהירות!.");
להחזיר (שקר);
}

גוף:

כתובת דוא”ל:

מה עושה קטע ה- JavaScript?

קטע זה יאמת שכתובת דואר אלקטרוני מעוצבת כהלכה מוזנת בטופס, היא לא יכולה להבטיח שכתובת הדואר האלקטרוני אמיתית, אין דרך לבדוק זאת באמצעות JavaScript.

5. אין לחץ לחיצה ימנית

מדגם מהיר

פונקציה f1 () {
אם (document.all) {להחזיר שקר; }
}
פונקציה f2 (e) {
if (document.layers || (document.getElementById &! document.all)) {
אם (e.which == 2 || e.which == 3) {return falsk; }
}
}
אם (document.layers) {
document.captureEvents (Event.MOUSEDOWN);
document.onmousedown = f1;
}
אחרת {
document.onmouseup = f2;
document.oncontextmenu = f1;
}
document.oncontextmenu = פונקציה חדשה ("לחזור כוזב");

מה עושה קטע ה- JavaScript?

קטע זה ימנע מהצופה אפשרות ללחוץ באמצעות לחצן העכבר הימני על הדף שלך. זה יכול להרתיע את המשתמש הממוצע מלשאול תמונות או קוד מהאתר שלך.

6. הצגת ציטוטים אקראיים

מדגם מהיר

ראש:

writeRandomQuote = פונקציה () {
ציטוטים של var = מערך חדש ();
ציטוטים [0] = "פעולה היא המדד האמיתי לאינטליגנציה.";
ציטוטים [1] = "לבייסבול היתרון הגדול על פני קריקט של סיום מוקדם יותר.";
ציטוטים [2] = "כל מטרה, כל פעולה, כל מחשבה, כל תחושה שאדם חווה, בין אם זה ידוע במודע ובין שלא במודע, היא ניסיון להגדיל את רמת השקט הנפשי של האדם..";
ציטוטים [3] = "ראש טוב ולב טוב הם תמיד שילוב אימתני.";
var rand = Math.floor (Math.random () * ציטוטים. אורך);
document.write (ציטוטים [rand]);
}
writeRandomQuote ();

גוף:

writeRandomQuote ();

מה עושה קטע ה- JavaScript?

אוקי אז זהו לא קטע שבו כל האתרים היו משתמשים בו, אך ניתן להשתמש בו כדי להציג יותר מסתם ציטוטים אקראיים. אתה יכול לשנות את התוכן בסדר את הציטוטים לכל מה שאתה רוצה ולהציג תמונות או טקסט אקראיים בכל מקום באתר שלך.

7. קישורים קודמים / הבא

מדגם מהיר

דף קודם | עמוד הבא

מה עושה קטע ה- JavaScript?

קטע זה נהדר אם יש לך מספר דפים במאמר או במדריך. זה יאפשר למשתמשים לגלוש בקלות בין הדפים. זה גם קטן וקל משקל מבחינת המשאב.

8. הוסף דף לסימניות

מדגם מהיר

הוסף למועדפים

מה עושה קטע ה- JavaScript?

קטע זה יאפשר למשתמש לסמן את הדף שלך בקלות; כל מה שהם צריכים לעשות זה ללחוץ על הקישור. התכונות הקטנות שלו כמו זו שיכולות להגדיל את החוויה הכללית של הצופים שלך.

9. קישור הדפס קל

מדגם מהיר

הדפס דף

מה עושה קטע ה- JavaScript?

קישור קטן זה יאפשר לתצוגות שלך להדפיס את הדף שלך בקלות. הוא משתמש בתכונת ההדפסה המהירה שכבר הוגדרה על ידי הדפדפן שלך ואינו משתמש במשאבים עד לחיצה עליה.

10. הצג תאריך מעוצב

מדגם מהיר

ראש:

פונקציה showDate () {
var d = תאריך חדש ();
var curr_date = d.getDate ();
var curr_month = d.getMonth () + 1; // חודשים מבוססים על אפס
var curr_year = d.getFullYear ();
document.write (curr_date + "-" + חודש_חודש + "-" + curr_year);
}

גוף:

showDate ();

מה עושה קטע ה- JavaScript?

קטע זה יאפשר לך להציג את התאריך הנוכחי בכל מקום בדף האינטרנט שלך ולא צריך לעדכן אותו. פשוט הניחו אותו במקום ושכחו ממנו.

11. מפריד פסיקים

מדגם מהיר

ראש:

פונקציה 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 (זמני, ” + ‘,’ + ”);
}
var out = החזר n2 + n3;
document.write (out);
}

גוף:

addCommas ("4550989023");

מה עושה קטע ה- JavaScript?

קטע זה ישמש בעיקר על ידי אתרים המשתמשים במספרים לעתים קרובות. קטע זה ישאיר את המספרים שלך להיראות זהים לרוחב. כל שעליכם לעשות הוא להעתיק את קו הגוף בו תרצו להוסיף מספר ולהחליף את המספר שם במספר שלכם.

12. השג את אזור התצוגה של דפדפן

מדגם מהיר

Jeffrey Wilson Administrator

Sorry! The Author has not filled his profile.
follow me
    0
    Like this post? Please share to your friends:
    Adblock
    detector
    map