חפש מאמרים:
שלום אורח
24.12.2024
 
   
מאמרים בקטגוריות של:

   
 

איך לכתוב חלונות קופצים לאתרכם בעזרת Javascript

מאת: יוסי סיגורהבניית אתרים08/08/20111686 צפיות שתף בטוויטר |   שתף בפייסבוק

בעזרת קוד Javascript אתם יכולים להציג לגולשים באתר שלכם את שלושת סוגי חלוניות ההודעה הקופצות המובנות בשפה: הודעה פשוטה, הודעה הדורשת מהמשתמש ללחוץ על כפתור "כן" או "לא" והודעה שבה נדרש המשתמש להשיב על שאלה. 
כדי להציג את ההודעות נעשה שימוש בפונקציה Alert ובפונקציה Prompt  וכן בפונקציה Confirm שהן פונקציות מובנות בשפת Javascript.

ראשית אראה כיצד להציג הודעה פשוטה למשתמש שביכולתו לסגור לאחר שילחץ על כפתור ה - "OK". בהודעות מסוג זה נשתמש כאשר ברצוננו להציג למשתמש אינפורמציה מסוימת או כאשר ברצוננו להזהירו מפני משהו.

דוגמת קוד לפונקציה כללית להצגת הודעה קופצת פשוטה:

<!DOCTYPE HTML>
<html>

<head>
<script language="JavaScript" type="text/javascript">

function MessageBox(Message)
{
   alert(Message);
}
</script>
</head>

<body>
<input type="button" onclick="MessageBox('Hello World')" value="Click Me" />

</body>
</html>

בדוגמה למעלה יצרנו פונקציה ששמה MessageBox המקבלת טקסט כלשהו כפרמטר ומציגה אותו בחלונית קופצת. כדי לסגור סוג זה של הודעה על המשתמש ללחוץ על הכפתור OK המובנה בחלונית ההודעה.

 בדוגמה הבאה אציג פונקציה בשם ConfirmBox המקבלת שאלה כלשהי כפרמטר ומציגה אותה למשתמש באמצעות חלונית קופצת שעליה שני כפתורים: OK ו - Cancel. המשתמש נדרש ללחוץ על אחד משני כפתורים אלה כדי לסגור את ההודעה והערך של הכפתור שנלחץ מוחזר לפונקציה שקראה לחלונית ההודעה

דוגמת קוד לפונקציה כללית להצגת הודעה קופצת מסוג כן / לא

<!DOCTYPE HTML>
<html>
<head>
<script language="JavaScript" type="text/javascript">
function ConfirmBox(question)
{
  var q=confirm(question);
  if (q==true)
{
  alert("The OK button was clicked");
}
  else
{
  alert("The Cancel button was clicked");
}
}
</script>
</head>
<body>
<input type="button" onclick="ConfirmBox('Select OK or Cancel')" value="Click Me" />
</body>
</html>

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

דוגמת קוד לפונקציה כללית להצגת שאלה למשתמש וקבלת תשובה מילולית

<!DOCTYPE HTML>
<html>
<head>
<script language="JavaScript" type="text/javascript">
function InputBox(question)
{
  var q=prompt(question, "18");

  if (q.length>0)
{
  alert("Your age is: " + q);
}
}
</script>
</head>
<body>
<input type="button" onclick="InputBox('What is your age?')" value="Click Me" />
</body>
</html>

בדוגמת הקוד האחרונה השתמשנו בפונקציה המובנית prompt כדי להציג שאלה למשתמש. בדקנו האם המשתמש השיב על השאלה באמצעות בדיקת אורך התשובה. יש לציין שבמקרה שהמשתמש בחר ללחוץ על הכפתור Cancel יתקבל Null כתשובה.

את ההודעות השונות ניתן לעצב בעזרת קוד CSS וכמובן בעזרת HTML5 אולם זהו כבר נושא למאמר נפרד.


 

 



תגיות המאמר: JavaScript, DEVSCHOOL, popup windows


 
     
     
     
   
 
אודות כותב המאמר:

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

יוסי סיגורה עורך את אתרי האינטרנט:

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

DevSchool - אתר מדריכי הפיתוח המקוונים המוביל בישראל

 
     
   
 

מאמרים נוספים מאת יוסי סיגורה

מאת: יוסי סיגורהשיווק באינטרנט19/09/101131 צפיות
RSS - ראשי תיבות של Really Simple Syndication הוא פורמט XML שמטרתו להפיץ ולשתף תכנים באמצעות האינטרנט. הוא עושה זאת בעזרת הפצת רשימות קישורים בצד מידע נוסף על קישורים אלה וכל מטרתו לסייע לנו לקבל רשימות ממוינות של קישורים למידע שאנו מעוניינים לדעת עליו

מאת: יוסי סיגורהדיוור אלקטרוני05/09/101325 צפיות
חמישה טיפים שיהפכו את הדוא"ל השיווקי שלכם מספאם למה שהם יכולים להיות - כלי השיווק מספר 1 באינטרנט

מאת: יוסי סיגורהמחשבים וטכנולגיה - כללי15/08/101214 צפיות
מדריך ממוחשב ללימוד שפת השאילתות SQL מתוך אתר www.DEVSCHOOL.co.il

מאת: יוסי סיגורהבניית אתרים07/08/101649 צפיות
Cookie הוא אמצעי יעיל ונוח לשמור מידע ספציפי על גולש. למשל אם האתר שלכם מאפשר לבחור את צבע הרקע של דף מסוים אזי זה יהיה רעיון טוב לשמור צבע זה בדיסק הקשיח של הגולש בעזרת Cookie ובכל פעם שהגולש נכנס לאתרכם לגשת ולקרוא את הצבע שבו בחר ולשנות את צבע הרקע של הדף בהתאם.

מאת: יוסי סיגורהבניית אתרים01/08/101628 צפיות
כולנו מכירים את האתרים שכל זמן קצוב מרעננים את הדף שבו אנו נמצאים (לפעמים עוד לפני שסיימנו לעיין בו). בדרך כלל ישתמשו בתכונת הרענון הקצוב אתרי חדשות או אתרים שבהם חלים שינויים תכופים ברמת הדף הבודד. אם שאלתם את עצמכם איך הם עושים זאת אזי התשובה במאמר שלפניכם

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

מאמרים נוספים בנושא בניית אתרים

מאת: דוד כהןבניית אתרים18/11/214065 צפיות
סוג נפוץ של אתרים הוא חנות וירטואלית שמציעה לגולשים מגוון מוצרים לרכישה מקוונת. קיראו מה ניתן למכור בחנות הווירטואלית וכיצד לעשות זאת נכון.

מאת: יאירבניית אתרים18/06/194209 צפיות
לא ניתן להפריז בתיאורים לגבי חשיבותו של אתר מקצועי וטוב לתמהיל המיתוג של כל עסק וחברה. האתר מהווה את "חלון הראווה" של העסק, את אמצעי הקשר הישיר שלו אתכם, ולא בכדי הוא נחשב למהותי ביצירת מותג מנצח.

מאת: עידן שלומןבניית אתרים22/08/175905 צפיות
החלטתם לבנות אתר חדש וכעת אתם בשלב הראשוני של התהליך, אך זהו שלב שללא ספק אחד החשובים ביותר – רכישת דומיין (שם מתחם) לאתר שלכם.

מאת: עידן שלומןבניית אתרים05/06/175044 צפיות
לפני שאתם שואלים את עצמכם איך להשיג לקוחות חדשים לעסק, אולי כדאי לדבר על אתר האינטרנט שלכם ועל תרומתו. אם השקעתם לא מעט על האתר הקודם והלקוחות סרבו להגיע, אולי כדאי שתבדקו את הבעיה לעומקה. ייתכן מאוד שיש לכם בעיה בבחירה של דומיין. מה זה דומיין ואיך הוא יכול לעזור לכם להשיג יותר לקוחות ובפרט לקוחות שאתם באמת צריכים לבית העסק?

מאת: vodplaceבניית אתרים22/03/172874 צפיות
בניית אתרים, על וורדפרס או לא?

מאת: Droxitבניית אתרים26/01/172415 צפיות
כאשר אנו משווקים אם מוצר או שירות, באמצעות האינטרנט, דף הנחיתה, הינו דף שמתוכנן למטרה אחת והיא יצירת לידים.. בדף הנחיתה, אין ניווט שקושר את הגולש לאתר, אך הסיבה המרכזית לכך היא צמצום אפשרויות שעומדות בפני הגולש...

מאת: vodplaceבניית אתרים20/12/162252 צפיות
מחיר יכול להטעות - הנה הסיבה למה.

 
 
 

כל הזכויות שמורות © 2008 ACADEMICS
השימוש באתר בכפוף ל תנאי השימוש  ומדיניות הפרטיות. התכנים באתר מופצים תחת רשיון קראייטיב קומונס - ייחוס-איסור יצירות נגזרות 3.0 Unported

christian louboutin replica