עבודה עם טקסטים - String
length מחזיר את מספר התווים. charAt מחזיר את התו באינדקס שנשלח, כשהאינדקס הראשון הוא 0.indexOf מחזיר את המיקום הראשון של מחרוזת שמחפשים, ו-lastIndexOf מחפש מהסוף. אם הערך לא נמצא, מוחזר מינוס 1.slice מחזיר פיסה בין שני אינדקסים, כשהאינדקס הסופי לא נכלל. substr מקבל התחלה וכמות תווים, ו-substring מקבל התחלה וסוף, כמו slice.split מחלק את המחרוזת למערך לפי מפריד, למשל רווח. אפשר להגביל את מספר החלקים שיוחזרו.concat מוסיף לסוף המחרוזת את הערכים שנשלחו, ומחזיר מחרוזת חדשה, בלי לשנות את המחרוזת המקורית.toLowerCase הופך את כל התווים לאותיות קטנות, ו-toUpperCase לאותיות גדולות.charCodeAt מחזיר את קוד התו. לאות H גדולה הקוד הוא 72. היוניקוד מתחיל באותם 128 תווים הראשונים כמו ב-ASCII.bold, italics, fontcolor ו-fontsize עוטפים את המחרוזת בתגיות HTML ישנות. היום מעצבים בעזרת CSS.lastIndexOf, מוסיפים לו 1 ולוקחים את מה שאחריו בעזרת substring. אם אין נקודה, מחזירים מחרוזת ריקה.isLegalEmail שבודקת שיש @, שיש תווים לפניו, ושאחריו יש נקודה עם תווים אחריה.str.length, str.charAt(0), str.indexOf("lo"), str.slice(1, 3), str.split(" "), str.substring(6, 10), str.toLowerCase().concat ו-slice לא משנות את המחרוזת המקורית, אלא מחזירות תוצאה חדשה. כדי להשתמש בתוצאה צריך לשמור אותה במשתנה.להורדת קוד מקור של כל הדוגמאות בקורס JAVA SCRIPT למתחילים -לחץ כאן לתלמידי המכללה בלבד
להורדת קוד מקור של כל הדוגמאות בקורס JAVA SCRIPT למתקדמים- לחץ כאן לתלמידי המכללה בלבד
פרקי ההרצאה: עבודה עם טקסטים - String
תמלול ההרצאה: עבודה עם טקסטים - String
הטקסט המלא של הדקות הראשונות בהרצאה «עבודה עם טקסטים - String» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
הדבר הבא שאנחנו הולכים לראות זה עבודה עם מכרוזות. מכרוזת זה מידע טקסטואלי ואנחנו מסוגלים לפתוח משתנה, בואו נקרא לו str, ולהכניס לתוכו איזושהי מכרוזת.
אוקיי, בואו נציג אותה. נריץ את התוכנית ונראה באלרט את המכרוזת שהצגנו. עכשיו אנחנו מסוגלים לבצע כל מיני פעולות על המכרוזת על ידי כל מיני פונקציות שקיימות במכרוזות ומשתנים שקיימים במכרוזות.
לדוגמה, בואו נציג את האורך שלה. מרפרש, ונראה שהאורך זה 5. זאת אומרת שמשתנה של האורך, או יותר נכון מאפיין של האורך, נקרא Length.
פונקציה נוספת שקיימת לנו נקראת charAt. charAt מקבלת איזשהו אינדקס, לדוגמה 2, ומחזירה לנו את התו שנמצא באינדקס הזה. בואו נסתכל מה יוחזר.
אנחנו רואים L. בואו ניתן 0 ואנחנו רואים h. כלומר התו הראשון האינדקס שלו זה 0. אז בעברת char at אנחנו מסוגלים לדעת מה התו שקיים באינדקס מסוים באותה מכרוזת. הפונקציה הבאה שאנחנו הולכים לראות נקראת bold.
זאת פונקציה ישנה שכבר לא כל כך משתמשים איתה, אבל בואו נראה מה היא עושה. הפונקציה לא מקבלת כלום, מחזירה ערך שאנחנו יכולים להציג, בואו נריץ, ונראה שמה שחזר זה בעצם אותה מכרוזת עטופה בתגית b, פתיחה וסגירה.
פעם ב-HTML הישן, התגית הזאת אפשרה לצבוע את הטקסט בצורה מושחרת. כמובן שגם היום הטקסט הזה יכול להצבוע בצורה מושחרת עם התגית הזאת, אבל זה פחות שימושי.
כאשר אנחנו רוצים לבצע כל מיני דברים שקשורים לעיצוב, אנחנו לא משתמשים בתגיות האלה יותר בדרך כלל, אלא משתמשים בשפת CSS. אבל מטעמים היסטוריים הפונקציה הזאת נשמרה.
פונקציה דומה מאפשרת לנו לבצע italics. בואו נראה מה זה עושה. זה מחזיר לנו את אותה מחרוזת התעופה ב-i, קיצור של italics כלומר כתב מוטה. גם כאן אנחנו יכולים היום להשתמש בcss בשביל להשיג את אותו אפקט.
פונקציה הבאה נקראת concat. concat קיצור של concatenation כלומר שורשור. אני מסוגל עכשיו להעביר כל מיני ערכים לפונקציה הזאתי ומה שconcat תעשה זה תשרשר אותם למחרוזת הנוכחית.
בואו נסתכל ונראה ששורשרתי עם המחרוזת הנוכחית את high ו-1,2,3,4,5. השאלה היא האם המחרוזת שונתה גם כן. בואו נציג כאן את str.
זאת בעצם ההחזרה של השרשור ואם אני מציג את str אני רואה שstr עצמה המחרוזת עצמה לא שונתה זאת אומרת שהפונקציה concat כל מה שהיא עשתה זה בעצם החזירה את המחרוזת שקיימת ב-str משועשרת עם הערכים שהיא קיבלה היא רק החזירה אותה היא לא שינתה את המחרוזת המקורית.
הפונקציה הבאה שאנחנו הולכים לראות זאת charcode at פונקציה שדומה לצ'אר אט אבל צ'אר אט החזירה לנו את התו במיקום שנתנו כאן אנחנו הולכים לתת מיקום פוזישן ולקבל בחזרה את הקוד האסקי של התו הזה בואו נסתכל אם אנחנו נותנים אפס אז אנחנו הולכים לקבל בחזרה את הקוד האסקי של התו במיקום אפס כלומר h מה זה קוד אסקי לכל תו יש בעצם קוד או יותר נכון מספר שמייצג
את התו הזה מבחינת המחשב טבלה מאוד עתיקה טבלת אסקי שבה יש את כל התווים והאותיות באנגלית ותווים סטנדרטי במקלדת. טבלה יותר מתקדמת נקראת יוניקוד אבל ההתחלה של היוניקוד, כלומר ה-128 תווים הראשונים של היוניקוד זהים לחלוטין ל-128 התווים הראשונים של האסקי בכדי שתהיה תאימות בין הטבלאות האלה.
בואו נראה כרגע מה יוצג לנו. אז אנחנו רואים את הקוד 72 שזה בעצם הקוד האסקי של האות h גדולה. פונקציה פרה-היסטורית נוספת שדומה לפונקציה בולד ולפונקציה איטליק נקראת font-color.
font-Color מקבלת שם של צבע, לדוגמה גרין, ומחזירה את המחרוזת עטופה בתגית פונט, תגית עתיקה שפעם שימשה בשביל להגדיר גופן וצבע של גופן.
בואו נבדוק, ונראה כרגע שהמחרוזת Hello עטופה בתגית פונט, Color שווה גרין וסגורה בתגית פונט. בדומה יש לנו את str.font-size שמקבלת גודל של פונט ואנחנו רואים font-size שווה 12 והמכרוזת שלנו היא low.
שוב, ב-JavaScript הפונקציות האלה נשארו מהעבר כאשר השתמשו באמת בשיטות האלה, כיום לא נהוג להשתמש בהן אלא נהוג להשתמש בשפת CSS בכדי לבצע כל מה שקשור לעיצוב.
כמובן ש-JavaScript יכולה להשפיע על CSS בכמה דרכים, אנחנו נראה את זה בהמשך וגם שפת jquery. הפונקציה הבאה נקראת index of.
index of מקבלת מכרוזת של מה אני רוצה לחפש. לדוגמה אני רוצה לחפש את lo. לאחר מכן היא מקבלת תו שמציין מאיפה אני רוצה לחפש, מאיזה מיקום אני רוצה לחפש. אם אני לא נותן אז כמובן שהוא יחפש מההתחלה.
בואו נציג את המיקום של lo במכרוזת הלו ואנחנו רואים שהמיקום זה 3. בואו נספור. h זה 0, e זה 1, l זה 2 וההתחלה של lo זה מיקום 3. ואם אני רוצה לחפש מיקום של איזשהו ערך בתוך מכרוזת, אינדקס אוף עונה לי על התנאי הזה.
בדומה לאינדקס אוף יש לנו את last index of. last index of מחפשת לי את המופע האחרון של אותותיו. בואו נסתכל. נניח שאני מחפש כרגע את המופע l. יש לנו במחרוזת שני אלים, אחד באינדקס מספר 2 והשני באינדקס מספר 3.
אם אני אריץ כרגע את זה הוא ימצא לי כמובן את המופע האחרון, זה אומר אינדקס מספר 3. אז אני יכול לחפש בעזרת אינדקס אוף מההתחלה, או על ידי last index of מהסוף.
הפונקציה הבאה זאת פונקציה שראינו אותה גם במערכים והיא נקראת slice. היא מאפשרת לי לקחת פיסה מהמחרוזת. המילה slice זה פיסה. לדוגמה, אני מחפש מכרוזת שמתחילה באינדקס 1 ומסתיימת באינדקס 3, לא כולל אינדקס 3. זאת אומרת שמה שאני אמור לקבל בחזרה זה אינדקס 1 ואינדקס 2, כי זה לא כולל את הסיום.
בואו נריץ את זה ונדפיס קודם, ונראה שקיבלנו EL. E מתחיל באינדקס 1, L נמשך לאינדקס 2, וזה עד אינדקס 3, לא כולל. הפונקציה הבאה נקראת split, זו פונקציה מאוד חשובה שמאפשרת לקחת מחרוזת ולחלק אותה לחלקים וזה אומר שהיא הולכת להחזיר לנו מערך שכל חלק
הוא בעצם נמצא בתא במערך. לצורך כך בואו נרחיב את המחרוזת שלנו. יש לנו Hello, This is my string ואני עכשיו הולך לבצע ספליט על המחרוזת כאשר אני נותן איזשהו תו רווח ומה שאנחנו נקבל עכשיו זה בעצם מערך שבו כל תא מכיל חלק במחרוזת שמופרד על
ידי הרווח. בואו נסתכל, ואנחנו מקבלים Hello, This is my String.