פוסט זה יסביר את השימוש בתכונות נתונים ב-JavaScript.
כיצד להשתמש בתכונות נתונים ב-JavaScript?
ב-JavaScript, ה' נתונים תכונות ' משמשות לאחסון מידע נוסף שאינו מוצג בדף האינטרנט. מידע זה ניתן לכתוב, לגשת, לקרוא ולשנות באופן דינמי בהתאם לדרישות המשתמש. חלק זה ביצע את המשימה הנדונה באופן מעשי על תכונות נתונים.
תחביר
< נתוני אלמנט -*= 'ערך מסוים' >
בתחביר לעיל:
- ' אֵלֵמֶנט ' מייצג את רכיב ה-HTML שבו נעשה שימוש בתכונת הנתונים.
- ' נתונים-* ” מציין את תכונות הנתונים המרובות(*) המתחילות בקידומת (data-) כלומר מילת מפתח נתונים ואחריה מקף.
- ערך מסוים: הוא מציין את הערך של תכונת הנתונים.
כעת, השתמש בתחביר לעיל כדי ליצור תכונת נתונים.
צור תכונות נתונים
< מזהה div = 'myDiv' נתונים - שֵׁם = 'אלווין' נתונים - גיל = '40' נתונים - מִין = 'זָכָר' > div >קוד ה-HTML הנקוב בשורה אחת יוצר את ה-' שם נתונים ',' גיל נתונים ', וה ' נתונים-מגדר ' תכונות בתוך האלמנט 'div' שהמזהה שלו הוא 'myDiv'.
בואו לקרוא/לגשת לתכונות הנתונים שנוצרו.
דוגמה 1: תכונת קריאה/גישה לנתונים באמצעות מאפיין 'ערכת נתונים'.
דוגמה זו מיישמת את המאפיין 'מערך נתונים' כדי לקרוא/לגשת למאפייני הנתונים הספציפיים או לכל תכונות הנתונים.
ראשית, תסתכל על ' לַחְצָן אלמנט הקורא ל- jsFunc() 'כאשר זה קשור' בלחיצה אירוע מופעל בלחיצת כפתור:
< כפתור בלחיצה = 'jsFunc()' > תכונת נתוני גישה לַחְצָן >כעת, עברו להגדרה 'jsFunc()':
< תַסרִיט >פונקציה jsFunc ( ) {
const אֵלֵמֶנט = מסמך. getElementById ( 'myDiv' ) ;
לְנַחֵם. עֵץ ( אֵלֵמֶנט. מערך נתונים ) ;
}
תַסרִיט >
בשורות הקוד לעיל:
- ה ' jsFunc() ' מכריז תחילה על משתנה 'elem' שמחיל את ' document.getElementById() ' שיטה לגישה לרכיב ה-div שנוסף באמצעות המזהה שלו 'myDiv'.
- לאחר מכן, הוא משתמש ב' console.log() שיטה שתשתמש ב- מערך נתונים ' מאפיין כדי לגשת לתכונות הנתונים של רכיב ה-div שנגיש ולהציג אותם במסוף האינטרנט.
תְפוּקָה
הקש F12 כדי לפתוח את מסוף האינטרנט:
ניתן לראות כי בלחיצה על הכפתור הנתון, הקונסולה מציגה ' DOMStringMap ' המכיל את כל תכונות הנתונים של האלמנט div.
גישה לערך ספציפי
אם המשתמש רוצה לגשת לתכונת הנתונים הספציפית, ציין את שמו עם המאפיין 'מערך נתונים' כך:
< תַסרִיט >פונקציה לקבל ( ) {
const אֵלֵמֶנט = מסמך. getElementById ( 'myDiv' ) ;
לְנַחֵם. עֵץ ( אֵלֵמֶנט. מערך נתונים . שֵׁם ) ;
}
תַסרִיט >
בשלב זה, ניתן לגשת לתכונות הנתונים 'שם' באמצעות ' מערך נתונים ' תכונה.
תְפוּקָה
ניתן לראות שהקונסולה מציגה רק את הערך של תכונות הנתונים שצוינו בלחיצת כפתור.
דוגמה 2: תכונת קריאה/גישה לנתונים באמצעות שיטת 'getAttribute()'.
דוגמה זו משתמשת בשיטת 'getAttribute()' כדי לקרוא/לגשת לתכונות הנתונים.
בתרחיש זה, רכיב הכפתור של הדוגמה הראשונה נכלל גם:
< כפתור בלחיצה = 'jsFunc()' > תכונת נתוני גישה לַחְצָן >בואו נראה את הפונקציונליות של שיטת 'getAttribute()':
< תַסרִיט >פונקציה jsFunc ( ) {
const אֵלֵמֶנט = מסמך. getElementById ( 'myDiv' ) ;
לְנַחֵם. עֵץ ( אֵלֵמֶנט. getAttribute ( 'שם נתונים' ) ) ;
לְנַחֵם. עֵץ ( אֵלֵמֶנט. getAttribute ( 'גיל נתונים' ) ) ;
לְנַחֵם. עֵץ ( אֵלֵמֶנט. getAttribute ( 'נתונים-מגדר' ) ) ;
}
תַסרִיט >
בקטע הקוד שלמעלה:
- המשתנה 'elem' מחיל את ' document.getElementById() ' שיטה לגשת לרכיב div שנוסף באמצעות המזהה שלו 'myDiv'.
- לאחר מכן, ה' console.log() השיטה משתמשת ב- getAttribute() ' השיטה כדי לקבל את ערך התכונה שצוין 'נתונים' של רכיב ה-div שאוחזר ולאחר מכן להציג אותו במסוף האינטרנט.
- אותה משימה מבוצעת כדי לגשת לשאר תכונות הנתונים שצוינו.
הערה: השיטה 'getAttribute()' מציינת את תכונת הנתונים עם הקידומת 'data' ואחריה מקף (-) כלומר (data-) שאינו מצריך בעת שימוש במאפיין 'dataset()'.
תְפוּקָה
הפלט לעיל מציג את כל ערכי תכונת הנתונים שצוינו בלחיצת כפתור.
דוגמה 3: כתוב תכונה נתונים באמצעות המאפיין 'מערך נתונים'.
דוגמה זו כותבת את תכונות הנתונים באמצעות המאפיין 'ערכת נתונים'.
התוכן של רכיב הכפתור משתנה בהתאם לתרחיש הנוכחי:
< כפתור בלחיצה = 'jsFunc()' > כתוב תכונה נתונים לַחְצָן >כעת, כתוב את תכונת הנתונים החדשה ברכיב div נוסף:
< תַסרִיט >פונקציה jsFunc ( ) {
const אֵלֵמֶנט = מסמך. getElementById ( 'myDiv' ) ;
אֵלֵמֶנט. מערך נתונים . תְעוּדַת זֶהוּת = 'אדם'
לְנַחֵם. עֵץ ( אֵלֵמֶנט. מערך נתונים ) ;
}
תַסרִיט >
בגוש הקוד שלמעלה:
- ה ' מערך נתונים ' מאפיין כותב שם תכונת נתונים חדש 'מזהה' עם ערך מחרוזת שצוין.
- לאחר מכן, ה' conolse.log() ' משתמש במאפיין 'ערכת נתונים' כדי להציג את ממשק 'DOMStringMap' המכיל את תכונת הנתונים החדשים שנכתבו במסוף האינטרנט.
תְפוּקָה
כאן, המסוף מציג את 'DOMStringMap' המכיל את תכונת הנתונים החדשה 'id' שנכתבה באמצעות המאפיין 'dataset'.
דוגמה 4: עדכון ערך תכונת נתונים
דוגמה זו מעדכנת את הערך הקיים של תכונת נתונים ספציפית בעזרת המאפיין 'ערכת נתונים'.
הטקסט של רכיב הכפתור משתנה בהתאם לתרחיש הנתון:
< כפתור בלחיצה = 'jsFunc()' > עדכן את תכונת הנתונים לַחְצָן >כעת, עברו לקטע JavaScript:
< תַסרִיט >פונקציה jsFunc ( ) {
const אֵלֵמֶנט = מסמך. getElementById ( 'myDiv' ) ;
אֵלֵמֶנט. מערך נתונים . שֵׁם = 'ג'ון'
לְנַחֵם. עֵץ ( אֵלֵמֶנט. מערך נתונים . שֵׁם ) ;
}
תַסרִיט >
בגוש הקוד לעיל, ערך תכונת הנתונים שצוין 'שם' מתעדכן בעזרת ה-' מערך נתונים ' תכונה.
תְפוּקָה
המסוף מציג את הערך המעודכן של תכונות הנתונים שצוינו בלחיצת כפתור.
דוגמה 5: מחק את תכונת הנתונים
דוגמה זו מוחקת את תכונת הנתונים הספציפית על ידי שימוש במילת המפתח 'מחק'.
הטקסט של רכיב הכפתור משתנה בהתאם לדרישה:
< כפתור בלחיצה = 'jsFunc()' > מחק את תכונת הנתונים לַחְצָן >כעת, עקוב אחר בלוק קוד JavaScript:
< תַסרִיט >פונקציה jsFunc ( ) {
const אֵלֵמֶנט = מסמך. getElementById ( 'myDiv' ) ;
מחק אלמנט. מערך נתונים . גיל ;
לְנַחֵם. עֵץ ( אֵלֵמֶנט. מערך נתונים . גיל ) ;
}
תַסרִיט >
קטע הקוד שלמעלה מציין את ' לִמְחוֹק ' מילת מפתח עם המאפיין 'מערך נתונים' כדי למחוק את תכונת הנתונים שנגישה אליהם.
תְפוּקָה
יש לציין שהקונסולה מציגה ' לא מוגדר ' על לחיצה על כפתור המאמת בבירור שתכונת הנתונים שהגישה אליהם נמחקה נמחקה.
סיכום
ב-JavaScript, ניתן להשתמש בתכונות הנתונים בדרכים שונות כגון קריאה, גישה, כתיבה, עדכון ומחיקה בהתאם לדרישות. ניתן לבצע את כל המשימות הללו בעזרת ה'מובנה' מערך נתונים ' תכונה. עם זאת, המשתמש יכול גם לגשת לתכונת הנתונים בזה אחר זה בעזרת ' getAttribute() ' שיטה. פוסט זה הסביר באופן מעשי את השימוש בתכונות נתונים ב-JavaScript.