דילוג לתוכן

JavaScript ES6

100 נושאים 760 פוסטים

קטגוריות משנה


  • מדריכים ל-JS מהדורת ES6

    7 20
    7 נושאים
    20 פוסטים
    גיפהג
    [image: nagishli_v2_he.png] היי חברים כיום מקובל ויש שיאמרו שאף חייבים מבחינה חוקית תוסף נגישות באתר שלכם. אמנת הנגישות אז לענייננו - תורידו את הקובץ הבא: nagishli_v3.0_beta_rev170120200211.zip ואז יש להעלות את הקבצים הבאים לשרת: nagishli_beta.js ואת התיקייה nagishli-files לאחר מכן התאימו את הקוד (ע"פ ההוראות המסומנות בצבע ירוק) והדביקו אותו בקטע של התוכן <body> <script> nagishli_config = { // צבע התוסף - האפשרויות הן Blue (כחול), Red (אדום), Green (ירוק), Purple (סגול), Pink (ורוד), Yellow (צהוב), Gray (אפור), Orange (כתום), Brown (חום), Turquoise (טורקיז) ו-Black (שחור) color: "blue", // שפת התוסף, he - עברית, en - אנגלית language: "he" }; </script> // כתובת אל קובץ התוסף nagishli_beta.js <script src="url/to/nagishli_beta.js?v=3.0b" charset="utf-8" defer></script> מקור: נגיש-לי
  • 93 נושאים
    740 פוסטים
    י
    שלום לכולם בפרק הקודם דיברנו על קובץ הcss ואפשרויות העיצוב שבו. למדנו על צבע טקסט וצבע רקע, גודל פונט ועיצוב פונט וקינחנו בהוספת מסגרת לטקסט. היום נלמד עוד על איך להוסיף תמונה לקובץ הhtml ואיך לעצב אותה ואת המסגרת שלה דרך קובץ הcss. ראשית נבחר את תמונה מסוימת, בשביל הדוגמא ניקח את התמונה הזאת: [image: 1770559160911-abfec74f-3086-4791-9b30-c507e3a73d63-image.jpg] נשים אותה באותה תיקיה של קובץ הHTML והCSS ולצורך הדוגמא נקרא לה image. חשוב לזכור את הסיומת שלה גם לדוגמא jpg נפתח את קובץ ה-HTML עם עורך הטקסט ונוסיף את התמונה דבר ראשון ניצור בתחילת הbody תגית IMG שתאחסן בתוכה את התמונה. <img> בתוך התגית נוסיף את הקישור של התמונה. אחרי IMG נכתוב =SRC ואחריו את שם הקובץ עם הסיומת בתוך גרשיים לדוגמא <img src="image.jpg"> ככה זה נראה בקובץ שלנו: קובץ HTML <!DOCTYPE html> <html dir="rtl"> <head> </head> <body> <img src="image.jpg"> <h1>הפרויקט שלי</h1> <p>שלום לכולם</p> <a href="https://mitmachim.top/">קישור לפורום</a> <br> <br> <input type="text" placeholder="input"> <button>שלח טופס</button> </body> </html> (שימו לב שהתגית IMG היא בלי תגית סוגרת כמו כן לשים לב לשם התמונה המדויק) עכשיו נשמור את הקובץ ונפתח אותו בדפדפן. אם הכל יעבוד כשורה נראה את התמונה בדף אבל רגע... התמונה גדולה מידי! לכן אנחנו נלמד לעצב אותה.. נפתח את קובץ הCSS בעורך הטקסט. כדי להגדיר גובה ורוחב למדנו כבר זה ההגדרה width ו height והערך הוא הגודל בפיקסלים px. כדי ליצור מסגרת נשתמש בהגדרה border ובערך solid. כדי להגדיר רווח בין התמונה עצמה למסגרת שלה נשתמש בהגדרה padding ובערך של הגודל בפיקסלים לדוגמא 10px. כדי לעגל את הפינות נשתמש בהגדרה border-radius ובערך בפיקסלים לדוגמא 100px. כדי להגדיר ריווח בין התמונה והמסגרת לבין תמונות אלמנטים אחרים בדף נשתמש בהגדרה margin ובערך בפיקסלים לדוגמא 10px. ישום: קובץ CSS img { Height: 200px; Width: 200px; Border: solid; Border-radius: 0px 100px 0px 100px; Padding: 10px; margin: 10px; } אם עשיתם הכל כשורה כך תיראה לכם התמונה [image: 1770560060127-f7cf7aca-c688-4eda-91ac-f4664a0c94e7-image.png] שימו לב! בהגדרת ה-border-radius, padding, margin ישנה אפשרות להגדיר רק פינה אחת או צבע אחד. יש לכתוב תחילה את ההגדרה ואז בערך לכתוב ארבע ערכים עם ריווח ביניהם. כגון בדוגמא למעלה בהגדרת BORDER-RADIUS הערך הראשון תקף לפינה השמאלית למעלה, השני לימנית למעלה, השלישי לימנית למטה, והרביעית לשמאלית למטה. כמו כן בpadding וmargin הערך הראשון מתיחס לצד העליון, השני לצד ימין, השלישי לצד התחתון, והרביעי לצד שמאל. אמנם בזה כתבנו רק ערך אחד והוא תקף לכל הפינות ורק שנכתוב את ארבע הערכים באותו ערך אז הוא יחול על הערכים הנבחרים דווקא. נוסיף את מה שלמדנו לקובץ css שלנו ונשמור אותו. נפתח את קובץ הHTML בדפדפן. אם הכל יעבוד כשורה הדף צריך להיראות כך: [image: 1770560631340-a518358e-a660-457f-b8cb-fbb061beab11-image.png] בשיעור הבא אנחנו נסכם את כל מה שלמדנו עד עכשיו ונתחיל לבנות את הפרויקט הראשון שלנו: דף נחיתה! עד אז תכתבו לי (בתגובות)[https://mitmachim.top/topic/93025/עזרה-תגובות-ל-מדריך-המדריך-למתכנת-המתחיל-javascript]...