מדריך ניווט בין תיקיות | לינוקס

---

בשביל לראות את המיקום בו אתם נמצאים, הקלידו:

pwd

פקודת הניווט לתיקייה אחרת, דומה לאותה הפקודה בווינדוס:

cd

שזה אומר, שכדי להגיע לצורך הדוגמא לתיקייה /boot/grub, אנו נבצע את הפקודה הבאה:

cd /boot/grub

בכדי לראות את הקבצים והתיקיות במיקום בו אתם נמצאים, הקלידו:

ls

שימו לב ש-ls אינו מציג את כל הפריטים הנמצאים בתיקייה. משום שבשביל לראות גם את הקבצים המוסתרים בתיקייה, נצטרך להוסיף לאחר פקודת ה-ls את התוספת הבאה:

ls -a

לפקודה ls יש עוד אפשרויות, נסקור את חלקם.
להצגת מידע יותר מפורט ומסודר לכל קובץ או תיקייה:

ls -l

כמובן שנוכל לשלב ולהציג גם קבצים מוסתרים וגם מידע מפורט:

ls -la

להצגת ה-inode של הקבצים והתיקיות, אנו נוסיף:

ls -i

גם כאן ניתן לשלב בין האפשרויות.
להצגת הקבצים מסודרים לפי תאריך, אנו נוסיף:

ls -t

להצגה לפי גודל הקבצים:

ls -S

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

-r

ניתן להציג רשימת קבצים של תיקיה מסויימת גם אם לא נמצאים בתוכה, ע"י שמוסיפים את הנתיב לאותה תיקיה:

ls /boot/grub

ניתן לחפש בתוך התיקייה ע"י שנכתוב:

ls filename

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

ls -d filename

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

ls /boot/grub | grep filename

וכאמור, במקום filename אנו כותבים את שם הקובץ.

ובכן, נחזור לפקודת הניווט – cd.

בכדי לנווט אל תחילת העץ בלינוקס, משתמשים בסימון - /.
לדוגמה:

cd /

תיקיית הבית של המשתמש מסומנת ע"י הסימון - ~.
כך שבשביל לנווט לתיקיית הבית של המשתמש הנוכחי, נבצע:

cd ~

בכדי לחזור לתיקייה הקודמת שהיינו בה, נוסיף:

cd -

לחזור תיקייה אחת אחורה במיקום של עץ הניווט:

cd ..

להישאר באותו מיקום (זה אולי נשמע מטופש, אבל כבר נראה בהעתקת קבצים וכו' שנצטרך את זה):

cd .

כעת נתחיל ליצור קבצים ותיקיות.

ליצירת קובץ אנו נכתוב:

touch filename

כשבמקום filename אנו נכתוב את שם הקובץ שאנו רוצים שכך הוא ייקרא.
ניתן גם ליצור מספר קבצים בפקודה אחת:

touch file1 file2

אפשר גם באמצעות globing אבל לא ניכנס לזה:

touch file{1..2}

בכדי לקרוא לקובץ שם בעל יותר ממילה אחת, נקיף אותו בסוגריים:

touch "file name"

או שנוסיף את הסימון - \ בסוף המילה:

touch file\ name

בשביל למחוק קבצים, נכתוב את הפקודה:

rm filename

לצורך גזירת קובץ ממקום למקום, נכתוב:

mv filename /path

כשבמקום לכתוב path אנחנו נכתוב את הנתיב של ההדבקה של הקובץ.
ניתן גם לשנות כך את שם הקובץ:

mv filename filename2

בשביל להעתיק קובץ, נבצע:

cp filename /path

יצירת תיקייה:

mkdir foldername

מחיקת תיקייה:

rm foldername

---

מקווה שהועלתי לכם... בהצלחה!!

@נ-נח צריך לציין שישימו לב: השינויים נשמרים. עבדנו על זה שהם יישמרו. כך שאם הסתרתם את הלוגו, הוא יישאר מוסתר, וגם הגודל של האימוג'ים נשאר כפי שתגדירו אותו.

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

בהצלחה לכולם!!

:::

אל תקשיבו ל @נ-נח התותח.. הוא כתב כמעט את כל הסקריפט..

:::

הסבר על מודל הקופסה (box-model) בשפת CSS

--

כל אלמנט (Block) בדף HTML מורכב מארבעה חלקים. ניתן לשחק עם החלקים הללו ולשנות להם את הגודל, הצבע ועוד.

נתחיל לפי הסדר:

• החלק הראשון Content (תוכן), משמעותו היא התוכן של האלמנט. אם זה טקסט, אז זה הטקסט (מיד נראה שאפשר לשחק גם עם זה ולהגדיר את התוכן ליותר מגודל הטקסט) ואם זה תמונה זו התמונה, וכו' וכו' (כמובן שמדובר בתגית <img> שהוגדרה כ – Block. תכף נראה איך משנים את זה).

• החלק השני הינו ה – padding. תפקידו הוא לרווח בין הגבול (מסגרת) של האלמנט לבין תוכנו.

• השלישי הוא ה – border, ובעברית: גבול (מסגרת) הגבול עצמו יש לו רוחב מסוים וניתן לעצב אותו.

• והרביעי, margin פירושו הוא הריווח שתופס האלמנט הזה בינו לבין האלמנטים האחרים. כמובן שגם אותו ניתן לשנות.

בכדי לראות בבירור את מודל הקופסה, נפתח את ה – Developer-tool (כלי המפתחים) של הדפדפן שלנו (במקרה שלי – כרום). לפתיחת כלי המפתחים לחצו מקש ימני על העכבר באתר אינטרנט כל שהוא, ובחרו מהתפריט 'בדיקה'.

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

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

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

טוב, נתחיל לעבוד על ה – content. נניח שיש לי אלמנט div לצורך העניין שאני רוצה להגדיר לתוכן שלו גודל, אני ישתמש במידות אורך ורוחב בשביל זה, כדלהלן:

div {
  width: רוחב;
  height: גובה;
}

ניתן להגדיר רוחב וגובה בפיקסלים כמו בדוגמה:

div {
  width: 400px;
  height: 250px;
}

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

אם נרצה לראות את המשמעות של הגודל הזה, נוסיף לתגית ה – div צבע רקע, שימו לב לדוגמה:

div {
  width: 400px;
  height: 250px;
  background-color: red;
}

בדוגמה הזאת הגדרתי את צבע הרקע (background-color) לאדום (red), בואו נראה מה יצא לנו:

יפה! אז מה יש לנו כאן? div שהרוחב שלו הוא 400 פיקסלים, הגובה הוא 250 פיקסלים וצבע הרקע שלו אדום.

אם נציץ בכלי הפיתוח שלנו, נראה את הדבר הבא:

בטח שמתם לב שכתוב בתא הכי פנימי (שהוא בעצם התוכן כנאמר לעיל) של הקופסה את הגודל שהגדרנו 400x250.
ניתן גם להגדיר מקסימום של רוחב וגובה, כמו בדוגמה:

div {
  max-width: 400px;
  height: 250px;
  background-color: red;
}

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

קיימות עוד אפשרויות למדידה של אורך ורוחב, אנחנו נראה עוד אפשרות חשובה אחת.

div {
  width: 40%;
  height: 35%;
  background-color: red;
}

כפי שאתם רואים, מדובר באחוזים.

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

טוב, נראה לי מספיק... נעבור ל – padding.

ה – padding תפקידו הוא לרווח בין התוכן לבין הגבול של האלמנט כנאמר למעלה.

את ה – padding ניתן להגדיר בצורה כוללת לכל הצדדים, כמו בדוגמה:

div {
  width: 40%;
  height: 35%;
  padding: 40px;
  background-color: red;
}

כעת כל הצדדים קיבלו ריווח של 40 פיקסלים.

ניתן גם להגדיר לכל צד ספציפי, כמו בדוגמה הבאה:

div {
  width: 40%;
  height: 35%;
  padding-right: 40px;
  background-color: red;
}

בדוגמה הזו רק צד ימין קיבל ריווח של 40 פיקסלים, ושאר הצדדים לא.

כמובן שאפשר להשתמש בכל צד שהוא:

• padding-right – ימין,
• padding-left – שמאל,
• padding-top – כלפי מעלה,
• padding-bottom – כלפי מטה.

אפשר גם להגדיר כל צד בנפרד, על ידי קיצור כמו בדוגמה:

div {
  width: 40%;
  height: 35%;
  padding: 40px 30px 25px 35px;
  background-color: red;
}

הסדר הוא מ – top (למעלה) בכיוון השעון. top, right, bottom, left.

אם ניתן רק שני ערכים, הערך הראשון ישפיע על ה – top וה – bottom, והשני על ה – left ו – right.

כעת נדבר על border.

בשביל להגדיר את הרוחב של המסגרת, משתמשים ב – border-width.

להגדיר את הצבע, border-color.

הגדרת סגנון המסגרת, border-style. בדרך כלל משתמשים ב – solid, שמשמעותו היא מסגרת בודדת.

ניתן להגדיר כל צד מהמסגרת בסגנון אחר, כמו padding:

div {
  width: 40%;
  height: 35%;
  padding: 40px 30px 25px 35px;
  border-right-style: solid;
  border-left-style: double;
  background-color: red;
}

ניתן לקצר את ההגדרות באמצעות border:

div {
  width: 40%;
  height: 35%;
  padding: 40px 30px 25px 35px;
  border: 3px solid blue;
  background-color: red;
}

כמו שאתם רואים, כתבנו border ולאחר מכן את ההגדרות של המסגרת. רוחב, סגנון וצבע.

ניתן גם להגדיר זוויות מעוגלות, על ידי התכונה border-radius:

div {
  width: 40%;
  height: 35%;
  padding: 40px 30px 25px 35px;
  border: 5px double black;
  border-radius: 7px;
  background-color: red;
}

אוקיי, מיצינו את ענייני content, padding ו – border, כעת נעבור על margin.

בתכונת ה – margin כמו ב – padding קיימים ארבעה צדדים.

• margin-top – הריווח מלמעלה,
• margin-bottom – הריווח מלמטה,
• margin-left – הריווח מצד שמאל,
• margin-right – הריווח מצד ימין.

ניתן לקצר את התכונה (גם כן כמו ב – padding) על ידי התכונה margin:

div {
  width: 40%;
  height: 35%;
  padding: 40px 30px 25px 35px;
  border: 5px double black;
  border-radius: 7px;
  margin: 30px 20px 25px 35px;
  background-color: red;
}

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

מדריך בניית אתר בסיסי בשפת HTML

--

בבניית אתרים, משתמשים (בצד הclient) בעיקר בשלושת השפות דלהלן: html, css, javascript.
שפת html הינה שפת תגים ומשמשת לכתיבת הגוף והתוכן של האתר.
שפת css לעומת זאת משמשת לעיצוב האתר.
ואילו שפת javascript (שאגב, היא שפת תכנות לכל דבר ועניין), משמשת להוספת פונקציונליות ועוד לאתר.

המבנה של תגי ה – html נראה כך:

כפי שאנחנו רואים, יש את התג הפותח והסוגר שהוא קובע את סוג התוכן שלו. לדוגמה: התג p, מייצג paragraph (פיסקת טקסט) והתג img, מייצג image (תמונה).

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

כמעט שכחתי, אבל אתם צריכים סביבת עבודה מסודרת לכתיבת המסמך. המלצה שלי, notepad++, תוכנה נחמדה לעריכת טקסט (אני יודע שיש תוכנות הרבה יותר טובות כמו VSCode, intellijIDEA, Atom וכו' וכו'. אבל בשביל ההתחלה אני חושב שזה המומלץ). אז פשוט תורידו את התוכנה ותתקינו אותה (התקנה מאוד פשוטה), ובתוכנה הזאת תכתבו את המסמך. שימו לב שכשאתם שומרים את המסמך, תשמרו אותו עם סיומת html, ולא עם סיומת txt. בשביל שתוכלו לפתוח אותו בדפדפן.

אז נכתוב את הבסיס של האתר ונעבור עליו להבהיר קצת את העניינים:

<!DOCTYPE html>
<html>
  <head>
    <title>html document</title>
  </head>
  <body>
    <h1>html document</h1>
    <p>this is my first html document</p>
  </body>
</html>

יש את השורה הראשונה, שבטח שמתם לב לכך שהיא אינה מכילה תג סוגר. השורה הזאת מצהירה על תקן ה-HTML שאנו משתמשים בו, במקרה שלנו – HTML-5.
קיימים מספר תקנים אבל אנחנו נדבר על התקן הזה, משום שהוא התקן הכי מעודכן.
שורה מספר 2:
תג פותח של מסמך ה – HTML. אם תשימו לב תראו שהוא גם נסגר בסוף המסמך.
בתוך האלמנט <html>, קיימים שני תגיות קבועות. <head> שהוא מכיל את ההגדרות של הדף, ו – <body> שמכיל את גוף המסמך. כל התוכן של הדף ייכנס ל – body. כל ההגדרות של הדף כגון התגית שרואים פה <title>, נכנסים ל – head.
תגית ה – <title> מגדירה את הכותרת שתופיע בלשונית של הכרטיסייה בדפדפן.
תגית ה – <h1> שאנו רואים ב – body, תפקידה הוא להגדיר כותרת בתוך המסמך. מהי הכותרת? מה שמופיע בין התגית הפותחת והסוגרת. קרי – html document. בדרך אגב, קיימים 6 גדלים של כותרות כמו <h1>, <h2>, <h3> וכו' וכו' עד <h6>. כותרת h1 היא הכותרת הכי גדולה, וכותרת h6 היא הכי קטנה מביניהם.
לאחר מכן אנחנו רואים את התגית <p> שדיברנו עליה קודם, שתפקידה הוא להכיל פסקאות טקסט. הפסקה שתופיע תהיה כמובן זאת שכתובה בין התגית הפותחת לתגית הסוגרת. קרי – this is my first html document.

טוב. עד כאן להיום, ושיהיה בהצלחה! (בהמשך נדבר על עוד תגיות חשובות ב-html).

@פישל ביקשת קיבלת

let mainPanel = document.getElementsByClassName('col-lg-9')[0];
mainPanel.classList.remove('col-lg-9');
mainPanel.classList.add('col-lg-12');

let sfiraPanel = document.getElementsByClassName('col-lg-3')[0];
sfiraPanel.classList.remove('col-lg-3');
sfiraPanel.classList.add('col-lg-12');

let sfiraIframe = document.getElementsByTagName('iframe')[0];
sfiraIframe.style.height = '100px';

sfiraIframe.style.display = 'block';
sfiraIframe.style.margin = 'auto';

$(mainPanel).before(sfiraPanel);

ואולי גם להזיז

האמת שזה היה די כבד לי , אבל בסוף הצלחתי להזיז..

מדריך משתנים ב - JS

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

משתנים

בגאווהסקריפט ישנם שלושה דרכים להגדרת משתנים.

• var
• let
• const

בואו ננסה להבין מה ההבדלים ביניהם.
אז ההבדל בין const לבין השאר ברור. משתנה שהוצהר על ידי const הוא קבוע ואינו ניתן לשינוי, ואילו על ידי var, let הוא ניתן לשינוי.

אבל מה ההבדל בין var ל – let?

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

var num1 = 1;
function getNumber() {
  return num1; // 1
}
function getAnotherNum() {
  var num2 = 2;
}
getAnotherNum();
console.log(num2) // num2 is not defined

אבל מה קורה בסקופ שאינו של פונקציה, של לולאה לצורך הענין? כאן יש הבדל בין let ל – var. אם המשתנה הוגדר עם let, הוא לא יהיה מוכר מחוץ לסקופ של הבלוק. אבל אם הוא הוגדר עם var, הוא יהיה מוכר מחוץ לסקופ. וזה לא מוצלח מדי.

for (var i = 0; i < 10; i++ ) {
  console.log(i);
}
console.log(i) // 10

כעת נעשה אותו דבר רק עם let.

for (let i = 0; i < 10; i++ ) {
  console.log(i);
}
console.log(i) // i is not defined

שימו לב ש const בקטע הזה הוא כמו let, שתחום לסקופ שלו גם בבלוק, ולא רק בפונקציות.

עד כאן משתנים, המשך יבוא בעז"ה.
נ.ב. מומלץ לקרוא את המאמר כאן, בבלוג של @chv התותח. מפרט שם על הנושא הזה.

מדריך התקנת חבילות תוכנה | לינוקס

---

במדריך הבא אנו נלמד איך להתקין חבילות תוכנה (Packages) במערכת ההפעלה לינוקס דרך הטרמינל.

אז דבר ראשון, הקדמה קטנה. צריך לדעת שיש הבדלים בין הפצות הלינוקס השונות באופן ההתקנה, כתוצאה מכך שמערכת ניהול החבילות שונה בדרך כלל מהפצה להפצה. במדריך זה נתמקד בהפצות המבוססות על Debian ו – red hat (נוכל למצוא בקטגוריית דביאן את ההפצות ubuntu, kali ועוד).

ה – package manager (מנהל החבילות) נקרא בהפצות דביאן apt, ואילו ברד-האט הוא מכונה yum. משום כך, בכל פקודה שנריץ במדריך דלהלן, תדעו שצריך לרשום לפני הפקודה בהפצות דביאן את המילה apt, ובהפצות רד-האט את המילה yum.

סיומות הקבצים: בדביאן deb וברד-האט rpm.

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

sudo

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

אם אין לכם כוח בכל פעם להקליד sudo לפני הפקודה, הריצו:

sudo su

והקלידו את הסיסמה.

בואו נתחיל. בכדי לעדכן את מנהל החבילה נריץ:

update

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

בשביל לעדכן את כל התוכנות המותקנות נקליד:

upgrade

ניתן גם לעדכן חבילות תוכנה ספציפיות על ידי הוספת השם שלהם לאחר הפקודה upgrade. בדוגמה הבאה אני יעדכן את התוכנה nmap:

upgrade nmap

נעבור להתקנות. בשביל להתקין חבילה באופן אוטומטי:

install appname

כשבמקום appname אנו נכתוב את שם התוכנה.

לאחר מכן התהליך יופסק והמערכת תשאל את השאלה הבאה:

After this operation, 34.2 MB of additional disk space will be used. Do you want to continue?

שזה אומר 'האם להתקין את כל קבצי התלות של החבילה?' (יוסבר בהמשך) הקלידו y ולחצו על מקש ה – enter.

ניתן להוסיף את התוספת הבאה בשביל שהשאלה הזאת לא תוצג וזה יתבצע אוטומטית:

install -y appname

אפשר לכתוב גם כן

install --yes appname

אם אתם רוצים להוריד חבילה בלי להתקין אותה באופן אוטומטי אלא ידנית (לא מומלץ למתחילים), נקליד:

download appname

ניתן גם להקליד install -d appname או install --download-only appname בשביל להוריד ללא התקנה.

ניתן להתקין גירסה ספציפית של התוכנה ע"י הוספת הסימן =, ואחריו מספר הגירסה:

appname=2.7

הסרת תוכנה ללא קבצי ההגדרות והתלות (קבצי התלות הינם תוכנות נוספות שנצרכות לפעילות של התוכנה):

remove appname

למחיקת התוכנה וקבצי ההגדרה שלה בלי התלות:

purge appname

למחוק גם את קבצי התלות:

autoremove appname

מקווה שנהניתם. בהצלחה!!

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

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

בכל אופן, הנה הסקריפט שלנו:

(function () {
    /*
     created by moti-oren
     Add a referral tab to other forums
    */
    let panel12 = document.createElement('div');
    let text12 = document.createElement('div');
    let linksArray12 = [
        'https://tchumim.com/',
        'https://www.prog.co.il/',
        'https://www.tora-forum.co.il/',
        'https://forum-office.ml/',
        'https://xn--9dbazrsfz.com/',
        'https://f2.freeivr.co.il/',
        'https://www.meatzvim.cf/',
        'https://www.techno-tech.cf/'
    ];
    let imagesArray12 = [
        'https://mitmachim.top/assets/uploads/files/1602702078674-tchumim.png',
        'https://mitmachim.top/assets/uploads/files/1602702061746-prog.png',
        'https://www.tora-forum.co.il/ext/tatiana5/favicon/favicon.ico',
        'https://upload.wikimedia.org/wikipedia/commons/5/5f/Microsoft_Office_logo_%282019%E2%80%93present%29.svg',
        'https://mitmachim.top/assets/uploads/files/1602701994040-mk.png',
        'https://mitmachim.top/assets/uploads/files/1602704764319-%D7%99%D7%9E%D7%95%D7%AA.png',
        'https://meatzvim.cf/assets/uploads/system/favicon.ico',
        'https://techno-tech.cf//favicon.ico?v=e4jmu7vr78u'
    ];

    panel12.addEventListener('mouseenter', (event) => {
        panel12.style.width = '60px';
        text12.style.transform = 'scale(1, 1)';
        for (let image of document.getElementsByClassName('image12')) {
            image.style.transform = 'scale(1, 1) translate(0, 0)';
        }
    });

    panel12.addEventListener('mouseleave', (event) => {
        panel12.style.width = '20px';
        text12.style.transform = 'scale(0, 0)';
        for (let image of document.getElementsByClassName('image12')) {
            image.style.transform = 'scale(0, 0) translate(-40px, 0)';
        }
    });

    panel12.style.transition = 'width 0.5s';
    panel12.style.position = 'fixed';
    panel12.style.width = '20px';
    panel12.style.height = 'auto';
    panel12.style.left = '35px';
    panel12.style.bottom = '50%';
    panel12.style.transform = 'translate(0, 50%)';
    panel12.style.paddingTop = '12px';
    panel12.style.paddingBottom = '8px';
    panel12.style.flexDirection = 'column';
    panel12.style.alignItems = 'center';
    panel12.style.justifyContent = 'center';
    panel12.style.borderTopRightRadius = '20px';
    panel12.style.borderBottomRightRadius = '20px';
    panel12.style.backgroundColor = '#e4e8ff';

    text12.style.transform = 'scale(0, 0)';
    text12.style.transition = '0.5s';
    text12.style.display = 'block';
    text12.style.marginRight = 'auto';
    text12.style.marginBottom = '6px';
    text12.style.marginLeft = 'auto';
    text12.style.fontFamily = 'Varela Round, sans-serif';
    text12.style.lineHeight = '18px';
    text12.style.fontWeight = '700';
    text12.style.textAlign = 'center';

    text12.innerHTML = 'שווה לבקר<br>';
    panel12.appendChild(text12);

    for (let i in linksArray12) {
        let link = document.createElement('a');
        link.href = linksArray12[i];
        link.target = '_blank';
        let image12 = document.createElement('img');
        image12.src = imagesArray12[i];
        image12.style.display = 'block';
        image12.style.margin = 'auto';
        image12.style.width = '37px';
        image12.style.marginBottom = '15px';
        image12.style.transition = '0.5s';
        image12.classList.add('image12');
        image12.style.transform = 'scale(0, 0) translate(-40px, 0)';
        link.appendChild(image12);
        panel12.appendChild(link);
    };

    document.body.appendChild(panel12);

})()

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

שיהיה בהצלחה! מקווה שנהנתם.

עריכה: בשביל להתקין עם Tampermonkey את הסקריפט, תתקינו קודם כל את Tampermonkey מהקישור הזה , אחר כך תכנסו ל - Create a new script, תמחקו את כל מה שיש שם, ותדביקו שם את הקוד הבא:

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Add a referral tab to other forums
// @author       moti-oren
// @match        https://mitmachim.top/*
// @match        https://tchumim.com/*
// @match        https://www.tora-forum.co.il/*
// @match        https://forum-office.ml/*
// @match        https://xn--9dbazrsfz.com/*
// @match        https://f2.freeivr.co.il/*
// @match        https://www.meatzvim.cf/*
// @match        https://techno-tech.cf/*
// @grant        none
// ==/UserScript==
(function() {
    'use strict';
 
     (function () {
    /*
     created by moti-oren
     Add a referral tab to other forums
    */
    let panel12 = document.createElement('div');
    let text12 = document.createElement('div');
    let linksArray12 = [
        'https://tchumim.com/',
        'https://www.prog.co.il/',
        'https://www.tora-forum.co.il/',
        'https://forum-office.ml/',
        'https://xn--9dbazrsfz.com/',
        'https://f2.freeivr.co.il/',
        'https://www.meatzvim.cf/',
        'https://www.techno-tech.cf/',
        'https://www.mitmachim.top/'
    ];
    let imagesArray12 = [
        'https://mitmachim.top/assets/uploads/files/1602702078674-tchumim.png',
        'https://mitmachim.top/assets/uploads/files/1602702061746-prog.png',
        'https://www.tora-forum.co.il/ext/tatiana5/favicon/favicon.png',
        'https://upload.wikimedia.org/wikipedia/commons/5/5f/Microsoft_Office_logo_%282019%E2%80%93present%29.svg',
        'https://mitmachim.top/assets/uploads/files/1602701994040-mk.png',
        'https://mitmachim.top/assets/uploads/files/1602704764319-%D7%99%D7%9E%D7%95%D7%AA.png',
        'https://meatzvim.cf/assets/uploads/system/favicon.ico',
        'https://techno-tech.cf//favicon.ico?v=e4jmu7vr78u',
        'https://mitmachim.top//favicon.ico?v=a54dqpiknn4'
    ];
 
    panel12.addEventListener('mouseenter', (event) => {
        panel12.style.width = '60px';
        text12.style.transform = 'scale(1, 1)';
        for (let image of document.getElementsByClassName('image12')) {
            image.style.transform = 'scale(1, 1) translate(0, 0)';
        }
    });
 
    panel12.addEventListener('mouseleave', (event) => {
        panel12.style.width = '20px';
        text12.style.transform = 'scale(0, 0)';
        for (let image of document.getElementsByClassName('image12')) {
            image.style.transform = 'scale(0, 0) translate(-40px, 0)';
        }
    });
 
    panel12.style.transition = 'width 0.5s';
    panel12.style.position = 'fixed';
    panel12.style.width = '20px';
    panel12.style.height = 'auto';
    panel12.style.left = '35px';
    panel12.style.bottom = '50%';
    panel12.style.transform = 'translate(0, 50%)';
    panel12.style.paddingTop = '12px';
    panel12.style.paddingBottom = '8px';
    panel12.style.flexDirection = 'column';
    panel12.style.alignItems = 'center';
    panel12.style.justifyContent = 'center';
    panel12.style.borderTopRightRadius = '20px';
    panel12.style.borderBottomRightRadius = '20px';
    panel12.style.backgroundColor = '#e4e8ff';
 
    text12.style.transform = 'scale(0, 0)';
    text12.style.transition = '0.5s';
    text12.style.display = 'block';
    text12.style.marginRight = 'auto';
    text12.style.marginBottom = '6px';
    text12.style.marginLeft = 'auto';
    text12.style.fontFamily = 'Varela Round, sans-serif';
    text12.style.lineHeight = '18px';
    text12.style.fontWeight = '700';
    text12.style.textAlign = 'center';
 
    text12.innerHTML = 'שווה לבקר<br>';
    panel12.appendChild(text12);
 
    for (let i in linksArray12) {
        let link = document.createElement('a');
        link.href = linksArray12[i];
        link.target = '_blank';
        let image12 = document.createElement('img');
        image12.src = imagesArray12[i];
        image12.style.display = 'block';
        image12.style.margin = 'auto';
        image12.style.width = '37px';
        image12.style.marginBottom = '15px';
        image12.style.transition = '0.5s';
        image12.classList.add('image12');
        image12.style.transform = 'scale(0, 0) translate(-40px, 0)';
        link.appendChild(image12);
        panel12.appendChild(link);
    };
 
    document.body.appendChild(panel12);
 
})()
 
})();

אחר כך פשוט תשמרו את זה עם קונטרול + s, או דרך התפריט.

עריכה: הוספתי עכשיו שתי פורומים (רעיון של @איציק-דייטש )

מדריך מחלקות ב - JS

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

אז ישנם שני דרכים להגדרת מחלקות ב JavaScript (אותו הדבר גם בפונקציות למי שיודע). דרך אחת, הצהרה על מחלקה באמצעות המילה class ולאחר מכן את שם המחלקה. והדרך השנייה היא, הגדרת משתנה או קבוע שיכיל את המחלקה, לדוגמה:

const MyClass = class {

};

דרך אגב, בוודאי שמתם לב שהאות הראשונה בשם של המחלקה נכתבה באות גדולה. כך מגדירים מחלקה, עם אות גדולה בתחילת שם המחלקה.

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

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

אחרי שהגדרנו את המחלקה, נגדיר את ה – constructor (הבנאי) שמאתחל את האובייקטים הנוצרים מהמחלקה.
הבנאי נכתב כך:

class MyClass {
  constructor(value1, value2) {
    this.key1 = value1;
    this.key2 = value2;
  }
}

אם אתם מכירים כתיב של אובייקטים, הכתיב הזה צריך להיות מוכר לכם. הקונסטרקטור פשוט מאתחל את האובייקט עם המפתחות key1 ו – key2, ועם הערכים value1 ו – value2.

אם נרצה לכתוב מתודת GETTER לאובייקט, נרשום את המילה get לפני המתודה. שימו לב שמה שמיוחד במתודת GETTER הוא שלא קוראים לה כפונקציה, אלא היא נהיית חלק מסוים באובייקט, וקוראים לה בלי סוגריים.

אפשר להגדיר מתודות סטטיות למחלקה, על ידי השימוש במילה static לפני המתודה. הרעיון של מתודה סטטית הוא שהיא לא מקבלת שום אובייקט this, אלא אפשר לקרוא לה רק עם שם המחלקה. לדוגמה: ()Math.random נקראת מהמחלקה עצמה, ולא כמתודה של אובייקט כלשהו.

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

לגבי ירושה, ניתן להגדיר מחלקה שיורשת ממחלקה אחרת את התכונות ואת המתודות שלה באמצעות המילה extands, כך:

class AnotherClass extands MyClass {

};

בכדי להגדיר את התכונות באמצעות מחלקת העל, נשתמש ב – super כך:

class AnotherClass extands MyClass {
  constructor(value1, value2, value3) {
    super(value1, value2);
    this.key3 = value3;
  }
}

טוב, מספיק להיום. אני מותש מהנושא הזה..

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

ביטויים רגולרים ב - JS

המדריך דלהלן נכתב לחבר'ה טיפה מתקדמים, אבל אל דאגה, בהמשך יבואו מדריכים פשוטים יותר.

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

הגדרת ביטוי רגולרי יכולה להתבצע בשתי צורות:

• כתיבת הביטוי בין שני סלשים (קו נטוי)
• שימוש בפונקציה בנאית – new RegExp(regularExpression, modifiers).

אנחנו נשתמש באופציה הראשונה והפשוטה.

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

let site = /mitmachim/;

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

let site = /mitmachim/;
let text = 'mitmachim';
let isCompatible = site.test(text);

כמו שאתם רואים, השתמשתי במתודה test השמורה לביטויים רגולרים, בכדי לבדוק התאמה לסטרינג המאוחסן במשתנה text.

בטח תשאלו, מה הרווחנו? הרי אותו דבר יכולנו לבדוק באמצעות השוואת מחרוזת רגילה! רגע, לא כזה מהר.

שימו לב לדוגמה הבאה:

let site = /mitmachim/i;
let text = 'mitmachim';
let isCompatible = site.test(text);

אל תפספסו את האות i שהוספתי לביטוי הרגולרי לאחר הסלש. מה הרווחתי מזה? נניח שבטקסט היה כתוב 'Mitmachim', אם היינו משווים את זה לטקסט רגיל היינו בצרות צרורות, כי במקרה כזה ההשוואה הייתה נפסלת מהסיבה ש 'mitmachim' !== 'Mitmachim'. אז מה בכל זאת מה עושים? ביטוי רגולרי בתוספת של האות i שקובע שאין להתייחס להבדלים בגודל האותיות, והכול מסודר! שימו לב כמה שזה עושה לנו חיים קלים, אחרת היינו צריכים להתחיל לחשוב על לוגיקה הרבה יותר מורכבת..

נ.ב. השימוש באות i מכונה modifiers. ישנם עוד שתי אותיות כאלו:

• g – מוצא את כל ההתאמות (במקום לבדוק אחת בלבד)

• m – הביטוי הרגולרי יתחשב בריבוי שורות.

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

let site = /^mitmachim/;
let text = 'mitmachim';
let isCompatible = site.test(text);

מה שיקרה הוא, שרק אם הטקסט מתחיל באותיות 'mitmahim' הבדיקה תאושר.

ניתן לבדוק גם את התווים בסוף המחרוזת על ידי הסימן '$' כך:

let site = /mitmachim$/;
let text = 'mitmachim';
let isCompatible = site.test(text);

במקרה הזה, כל סטרינג המסתיים באותיות 'mitmachim' יאושר.

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

let site = /mitmachim/;
let text = 'mitmachim';
let isCompatible = text.search(site);

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

let site = /mitma.chim/;
let text = 'mitma1chim';
let isCompatible = site.test(text);

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

אם נרצה לכמת (מלשון כמות) תווים, נשתמש באחד מהתווים הבאים:

• '+' - מציין אחד או יותר מהתו המופיע לפניו
• '*' - מציין אפס או יותר מהתו המופיע לפניו
• '?' – מציין אפס או תו בודד מהתו המופיע לפניו.

ניתן להגדיר בביטוי הרגולרי טווח של תווים, באמצעות סוגריים מרובעים:

• [0-9] – ספרות בלבד
• [a-z] – אותיות קטנות בלבד
• [A-Z] – אותיות גדולות בלבד.

כמובן שניתן להקטין את הטווח. לדוגמה: [0-5] משמעותו היא, ספרות מאפס ועד הספרה חמש בלבד, וכן הלאה.

טוב. הנושא הזה הוא מידי ארוך, אולי נחזור אליו בהמשך. בהצלחה!

מדריך אפשרויות שונות לכתיבת JavaScript

--

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

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

במדריך דלהלן נעבור על האפשרויות השונות לכתיבת JavaScript.

נתחיל מהאפשרות הפשוטה ביותר. האפשרות הפשוטה היא פשוט לכתוב את הקוד בין שתי תגיות <script> כדלהלן:

<script>
  // Your code here!
</script>

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

<script>
  /*
  Your code here!
  */
</script>

בכל אופן, נמשיך עם הכתיבה של הסקריפט עצמו. אפשרות נוספת היא לכתוב את כל הסקריפט בקובץ נפרד, ולתת בתגית script מאפיין של src (מקור) ובתור ערך לכתוב את המיקום של קובץ ה – JavaScript כך:

<script src="scripts/script.js"></script>

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

אז ככה. בנוגע למיקום של תגית הסקריפט, בדרך כלל נשים אותה למטה בסוף הקובץ, לפני התגית הסוגרת של <body/>, מהסיבה שאם נכתוב אותה לפני כן, הדפדפן יטען את הסקריפט לפני ה – html, ולא יבצע לנו את הקוד כמו שצריך. יש מקרים שאפשר לשים את הסקריפט בתוך תגית ה - <head>, אבל זה לא לעכשיו.

טוב, נראה לי מספיק בשביל ההתחלה. מקווה שנהניתם, ושיהיה בהצלחה!

נ.ב. אל תדאגו, עוד לא נגמרו המדריכים על CSS...

מדריך ליצירת אנימציות בסיסיות באמצעות CSS

--

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

בשביל לשלוט בזמן של מעבר אלמנט כלשהו ממצב כלשהו למצב אחר, נניח שהאלמנט div נמצא במצב שהרוחב שלו הוא 100 פיקסלים ואנחנו רוצים שבמעבר של העכבר עליו על ידי המשתמש, הרוחב שלו יגדל באיטיות ל – 250 פיקסלים, נשתמש בתכונה transition.

div {
  width: 100px;
}
div:hover {
  width: 250px;
}

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

div {
  width: 100px;
  transition: width 2s;
}
div:hover {
  width: 250px;
}

בדוגמה האחרונה, נתנו לתכונה transition בתור ערך את התכונה שצריכה להשתנות (במקרה שלנו – הרוחב), ואת הזמן שאנחנו רוצים שהשינוי יארך (במקרה שלנו – 2 שניות).

אם נרצה שהצבע של האלמנט ישתנה באיטיות, נעשה את אותו דבר, רק עם התכונה background.

div {
  background: red;
  transition: background 2s;
}
div:hover {
  background: green;
}

מקווה שהתחביר מובן.

ניתן להשהות את כניסת האנימציה לפעולה על ידי התכונה transition-delay.

div {
  background: red;
  transition: background 2s;
  transition-delay: 1s;
}
div:hover {
  background: green;
}

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

ל – transform ישנן אפשרויות רבות, נסקור את חלקם.

בשביל לשנות את המיקום יחסית למיקום הנוכחי, נשתמש ב – translate כמו בדוגמה:

div {
  transition: transform 2s;
  transition-delay: 1s;
}
div:hover {
  transform: translate(50px, 80px);
}

כשהפרמטר הראשון שאנחנו נותנים בסוגריים של translate הוא המרחק משמאל (כמובן שניתן לתת ערכים שליליים), והפרמטר השני הוא המרחק מלמעלה.

בשביל לסובב את האלמנט, נשתמש ב – rotate כדלהלן:

div {
  transition: transform 2s;
  transition-delay: 1s;
}
div:hover {
  transform: rotate(25deg);
}

rotate מקבלת כפרמטר את מידת הסיבוב במעלות (deg), במקרה שלנו נתנו 25 מעלות סיבוב.

בשביל להגדיל או להקטין את האלמנט, נשתמש ב – scale:

div {
  transition: transform 2s;
  transition-delay: 1s;
}
div:hover {
  transform: scale(2, 3);
}

scale מקבלת כפרמטר את מידת ההגדלה יחסית לגודל המקורי. שזה אומר, שהאלמנט יגדל ברוחבו פי 2 מהגודל המקורי, ובגובהו פי 3.

בדרך זו אפשר להקטין אלמנט על ידי שימוש באפס כמו בדוגמה:

div {
  transition: transform 2s;
  transition-delay: 1s;
}
div:hover {
  transform: scale(0.3, 0.7);
}

בשביל להקטין את ציר ה – y או את ציר ה – x בלבד, נצטרך להשתמש ב – scaleY ו – scaleX.

בשביל לעקם את האלמנט, נשתמש ב – skew.

div {
  transition: transform 2s;
  transition-delay: 1s;
}
div:hover {
  transform: skew(50deg, 80deg);
}

הפרמטר הראשון קובע את העקומה (במעלות) בציר ה – x, והשני בציר ה – y. גם כאן ניתן להתייחס ספציפית ל – x או ל – y על ידי המתודות skewX ו – skewY.

אפשר להשתמש בכולם על ידי שנותנים ערכים שלהם לפי הסדר למתודה matrix:

div {
  transition: transform 2s;
  transition-delay: 1s;
}
div:hover {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}

הסדר של הפרמטרים הוא כדלקמן:

• scaleX
• skewY
• skewX
• scaleY
• translateX
• translateY

@אלישי ממש יפה! אני חושב שכדאי להגיד תודה על ההשקעה הבלתי נגמרת של האיש האלוף והבלתי נלאה @אלישי התותח. תודה רבה!

טקסט ב – JavaScript

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

אבל מה נעשה במקרה כזה?

let variant = 'I'm here!

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

מה שאפשר לעשות זה מה שנקרא escaping:

let variant = 'I\'m here!'

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

מה נעשה אם נרצה לחבר טקסטים? אפשר לעשות את זה ככה:

let variant = 'Hello!';
let variant2 = 'my name is';
let name = 'moti-oren';
let allText = variant + ' ' + variant2 + ' ' + name;
console.log(allText); // Hello! my name is moti-oren

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

קיימת דרך יותר אלגנטית ומקובלת לעשות את זה, והיא באמצעות השימוש בבקטיקים - `, כך:

let variant = 'Hello!';
let variant2 = 'my name is';
let name = 'moti-oren';
let allText = `${variant} ${variant2} ${name}`;
console.log(allText); // Hello! my name is moti-oren

כמו שאתם בטח רואים, כל משתנה שאני רוצה להכניס לטקסט, אני עוטף אותו בדולר וצומדיים - ${} והוא נכנס בשלמותו לטקסט.

מדריך לעיצוב רקעים באמצעות CSS

--

בכדי להוסיף צבע רקע לאלמנט כלשהו, נשתמש בתכונה background-color כך:

p { background-color: lightblue; }

בדוגמה הזו כל הפסקאות בדף יקבלו צבע רקע תכלת (lightblue).

אם נרצה לתת צבע רקע לכל הדף, נאפיין את תגית ה – body עם תכונת background-color.

קיימת תכונה מעניינת שניתן להוסיפה בכדי להגדיר בהירות לצבע. התכונה נקראת opacity:

p { 
  background-color: green; 
  opacity: 0.7; 
}

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

p { background-color: rgba(0, 200, 0, 0.4); }

כשבפרמטר האחרון (מימין) נכתוב את מידת האטימות של הצבע.

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

נניח שנרצה להגדיר תמונת רקע ל – div כלשהו. בשביל לעשות את זה נשתמש בתכונה background-image.

div { background-image: url("./images/image.jpg"); }

כשב – url ניתן את מיקום התמונה.

בכדי להגדיר את מיקום התמונה באלמנט ה – div, נשתמש בתכונה background-position.

div { 
  background-image: url("./images/image.jpg"); 
  background-position: right top;
}

בדוגמה שלעיל התמונה תוצב במיקום הימני העליון של האלמנט.

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

div { 
  background-image: url("./images/image.jpg"); 
  background-repeat: no-repeat; 
  packground-position: right top; 
}

בדוגמה הזאת קבענו את תכונת ה – repeat ל – no-repeat, כלומר ללא חזרה על התמונה כלל.

ניתן לקבוע את החזרה של התמונה רק לאורך ציר ה – y או ציר ה – x של האלמנט:

div { 
  background-image: url("./images/image.jpg"); 
  background-repeat: repeat-y; 
}

אם נרצה לקבוע שהתמונה לא תזוז עם גלילת הדף (זה יוצר אפקט ויזואלי מעניין ואפילו משתמשים בזה הרבה), נשתמש בתכונה background-attachment:

div { 
  background-image: url("./images/image.jpg"); 
  background-attachment: fixed; 
}

ניתן להגדיר שהתמונה תיגלל, אם נשנה את הערך של התכונה ל – scroll:

div { 
  background-image: url("./images/image.jpg"); 
  background-attachment: scroll; 
}

את כל מה שראינו עד עכשיו, ניתן לכתוב בקיצור על ידי התכונה background:

div { 
  background: green url("./images/image.jpg") no-repeat left top; 
}

שכחתי לציין את תכונת הגודל, שמקבלת כמה ערכים:

• width & height – רוחב וגובה של התמונה. ניתן לקבוע זאת באמצעות אחוזים פיקסלים ועוד.
• cover – משמעותו היא שכל האלמנט יקבל את תמונת הרקע. ואם האלמנט לא מתאים בגודלו, התמונה תחתך בכדי שתתאים לגודל האלמנט.
• contain – האלמנט יכיל את כל התמונה. אם הגודל לא מתאים, התמונה תקטן.

תכונת הגודל נכתבת כך:

div { 
  background-image: url("./images/image.jpg"); 
  background-size: cover; 
}

מדריך ליצירת אנימציות מתקדמות באמצעות CSS

--

במדריך הזה נצטרך להתחיל להשתמש ב – rule חדש. בינתיים הכרנו את ה – rule (הכלל) font-face ואת ה – rule import, כעת נכיר את keyframes@.

בשביל להגדיר שם לאנימציה בכדי שנוכל לגשת אליה מאלמנט כלשהו ולהשתמש בה, נכתוב לאחר המילה keyframes@ את שם האנימציה, כמו בדוגמה.

@keyframes my-animation {}

בדוגמה הזאת, האנימציה שנגדיר בתוך הבלוק של הסוגריים המסולסלים, תשמר בשם 'my-animation' ונוכל לגשת אליה מכל אלמנט שנרצה להצמיד אליו את האנימציה.

בתוך הבלוק של @keyframes אנחנו מגדירים את שלבי האנימציה, כצעד ראשון נגדיר את זה באמצעות שתי מילים פשוטות שהם: 'from' ו – 'to'. כלומר, הקוד שייכנס לבלוק של ה – from יהווה את נקודת ההתחלה של האנימציה, והקוד שייכנס לבלוק של to, יהיה נקודת היציאה מהאנימציה. ניקח לצורך העניין את האלמנט div. נניח ויש ל – div שלנו צבע רקע ירוק ואנחנו רוצים שהצבע ישתנה באיטיות לצהוב, נכתוב זאת כך:

@keyframes my-animation {
  from { background-color: green; }
  to { background-color: yellow; }
}

כמובן שבשביל שה – div שלנו יכיר את האנימציה, נצטרך לקשר אותו אליה. ואת זה נעשה באמצעות התכונה animation-name.

@keyframes my-animation {
  from { background-color: green; }
  to { background-color: yellow; }
}
div {
  animation-name: my-animation;
  background-color: green;
}

כמובן שנצטרך להגדיר את הזמן של השהיית האנימציה. את זה נבצע עם תכונת animation-duration.

@keyframes my-animation {
  from { background-color: green; }
  to { background-color: yellow; }
}
div {
  animation-name: my-animation;
  animation-duration: 3s;
  background-color: green;
}

שימו לב שאם לא נכתבה התכונה דלעיל לא תתבצע שום אנימציה, משום שערך ברירת המחדל עבור התכונה הזאת הינו 0.

ניתן לעכב את תחילת פעולת האנימציה באמצעות התכונה animation-delay.

@keyframes my-animation {
  from { background-color: green; }
  to { background-color: yellow; }
}
div {
  animation-name: my-animation;
  animation-duration: 3s;
  background-color: green;
  animation-delay: 2s;
}

נוכל לקבוע את מספר הפעמים שהאנימציה תתבצע, באמצעות animation-iteration-count. בדוגמה שלהלן היא תתבצע 5 פעמים.

@keyframes my-animation {
  from { background-color: green; }
  to { background-color: yellow; }
}
div {
  animation-name: my-animation;
  animation-duration: 3s;
  animation-iteration-count: 5;
  background-color: green;
}

ניתן לתת את הערך infinite (אין סוף) בכדי שהאנימציה לא תפסיק להתבצע.

נחזור רגע ל – keyframes. במידה ונרצה לתת קצת יותר מנקודת כניסה ונקודת יציאה בלבד, נוכל להשתמש באחוזים, כך:

@keyframes my-animation {
  0% { background-color: green; }
  25% { background-color: yellow; }
  50% { background-color: red; }
  75% { background-color: blue; }
  100% { background-color: pink; }
}

ניתן להפעיל את האנימציה בכיוון ההפוך מהכיוון שנקבע ב – keyframes על ידי התכונה animation-direction:

@keyframes my-animation {
  from { background-color: green; }
  to { background-color: yellow; }
}
div {
  animation-name: my-animation;
  animation-duration: 3s;
  animation-direction: reverse;
  background-color: green;
}

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

• alternate

• alternate-reverse

הערך alternate משמעותו היא שהאנימציה תתבצע פעמיים. פעם ראשונה בסדר הקבוע מראש, ופעם שניה בסדר הפוך.

הערך alternate-reverse קובע, שהאנימציה תתבצע פעמיים, פעם ראשונה בסדר הפוך, ופעם שניה בסדר המקורי.

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

@keyframes my-animation {
  from { background-color: green; }
  to { background-color: yellow; }
}
div {
  animation-name: my-animation;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  background-color: green;
}

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

ניתן לכתוב את כל זה בקיצור על ידי התכונה animation:

@keyframes my-animation {
  from { background-color: green; }
  to { background-color: yellow; }
}
div {
  /* animation-name, animation-duration, animation-delay, animation-iteration-count, animation-direction */
  animation: my-animation 3s 2s 5 reverse;
}

ולסיום העניין, כתבתי פה קוד לאנימציה קטנה, שווה לנסות:

HTML:

<div>
  <h1>I am learning CSS!</h1>
</div>

CSS:

div {
  width: 300px;
  height: 200px;
  background-color: lightblue;
  animation: my-animation 5s 2s 1 forwards;
}

@keyframes my-animation {
  0% {
    transform: translate(0, 0) rotate(0deg);
    background-color: lightblue;
  }
  10% {
    transform: translate(0, 0) rotate(15deg);
    background-color: lightgreen;
  }
  30% {
    transform: translate(500px, 20px) rotate(50deg);
    background-color: lightpink;
  }
  50% {
    transform: translate(500px, 20px) rotate(150deg);
    background-color: lightsalmon;
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

אפשר לראות את התוצאה של הקוד, בקישור הזה.

מדריך סלקטורים בסיסיים ב - CSS

--
קודם כל נתחיל מהשאלה איפה כותבים את ה – CSS. את ה – CSS כותבים (יש יותר מאפשרות אחת, אבל כרגע נלך עם האופציה הזאת) בתוך תגית <style> שממוקמת ב - head כדלהלן:

<style>
    p { color: blue; }
</style>

באמצעות CSS ניתן לעצב תגיות בדף ה – HTML שלנו. בשביל זה אנחנו צריכים להבין את המושג שנקרא סלקטורים (selectors) ובתרגום לעברית 'בוחרים'. תפקיד הסלקטורים הוא כשמם: לבחור תגיות/רכיבים בדף ה – HTML בכדי שנוכל לעצב אותם.

יודעים מה? נתחיל שנייה מתחביר פשוט של CSS, בשביל להבין מדוע אנו צריכים את הסלקטורים האלו:

p { color: blue; }

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

אז הנה רשימת סלקטורים בסיסיים נחוצים:

#id { color: blue; }

אז בדוגמה הזאת בחרנו תגית לפי id מסויים שהגדרנו לתגית.

להזכירכם, את ה – id מגדירים כתכונה ב – HTML כך:

<p id="paragraph">bla bla bla</p>

כך שאם נרצה לעצב את התגית הזאת ב - CSS נכתוב כך:

#paragraph { color: blue; }

כאשר לפני ה – ID נכתוב את הסימן '#' (סולמית).

החיסרון בתכונה הזאת (ID) הוא שלא ניתן לתת יותר מ – ID אחד בדף ה – HTML. ובדיוק בשביל כך באה לעזרתנו התכונה class, שמגדירה מזהה לקבוצה של אלמנטים. התחביר ב - HTML הוא:

<p class="paragraphs" >bla bla bla</p>
<p class="paragraphs">od bla bla bla</p>

וכעת, ל – CSS:

.class { color: blue; }

ובמקרה שלנו:

.paragraphs { color: blue; }

מה שבעצם ייקרה הוא שכל התגיות שמוגדרות כ – class של paragraphs, יקבלו עת העיצוב שנכתב בין הסוגריים המסולסלים. ובמקרה שלנו, צבע טקסט כחול.

ישנה אפשרות להגדיר עיצוב רק על תגית מסויימת שמוגדרת ל – class מסויים. כדלהלן:

p.paragraphs { color: blue; }

מה שאומר, שאם יהיה לנו אלמנט שמוגדר כ – class של paragraphs אך איננו תגית ספציפית של p, העיצוב לא יחול עליו.

ניתן גם לבחור את כל האלמנטים בדף באמצעות '*' (כוכבית):

* { box-sizing: border-box; }

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

ניתן לבחור באמצעות כמה סלקטורים, על ידי הסימן ',' (פסיק).

#paragraph, .paragraphs, p { color: blue; }

אפשר לבחור אלמנט שמקונן ישירות בתוך אלמנט אחר (המושג הזה נקרא child מלשון 'ילד') באמצעות הסלקטור '<':

div > .paragraphs { color: blue; }

בדוגמה שלעיל בחרנו את כל האלמנטים שמוגדרים ב – class של paragraphs, שממוקמים בתוך תגית div.

ניתן גם לבחור את כל האלמנטים של class שנקרא paragraphs, לכל רמה של עומק (אפילו שאינם מקוננים ישירות בתוך התגית div) באמצעות space (ריווח).

div .paragraphs { color: blue; }

אנחנו יכולים גם לבחור את האלמנטים האחים של תגית מסויימת (שממוקמים מיד לאחריה) באמצעות הסימן '+' (פלוס):

div + .paragraphs { color: blue; }

כאן בחרנו את ה – class של paragraphs, שממוקמים מיד לאחר תגיות div.
אפשר לבחור גם כן את כל האחים של div (שממוקמים לאחריו) באמצעות הסימן '~' (טילדה).

div ~ .paragraphs { color: blue; }

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

תגיות נוספות ותכונות ב - HTML

--
בואו נכיר עוד כמה תגיות חשובות ב HTML.

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

הדוגמה הפשוטה לתגית כזאת היא התגית <img>, שמגדירה תמונה. וכך המסמך שלנו בתוספת התגית img ייראה:

<!DOCTYPE html>
<html>
  <head>
    <title>html document</title>
  </head>
  <body>
    <h1>html document</h1>
    <p>this is my first html document</p>
    <img>
  </body>
</html>

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

התחביר של תכונה לתגית HTML הוא כזה:

<"img attribute="value>

ובנוגע אלינו, התכונה שמעניינת אותנו היא src, בעברית "מקור", מקור לתמונה, שהדפדפן יטען אותה משם. ולמעשה:

<"img src="path/to/the/image.jpg>

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

בואו נתקדם. התגים ב – HTML מתחלקים ל2 קבוצות נוספות.

1: תגיות inline – תגיות שלא תופסות שורה שלמה,

2: תגיות Block – תגיות שתופסות את השורה.

תגית <p> לשם הדוגמה, היא תגית מסוג block. נסו לשים שתי תגיות p, ותראו לבד שהם מופרדות אחת מהשנייה עם ריווח. מהסיבה הפשוטה שתגית p היא תגית block שתופסת את השורה של עצמה.

אם תשימו שתי תגיות img אחת אחרי השנייה, תראו שזו תגית מסוג inline, שניהם יישארו באותה שורה.

בטח שמתם לב שהדפדפן לא מתייחס לירידות שורה ואנטרים, ולא מציג אותם בשורה נפרדת. אם בכל זאת אני רוצה לרדת שורה בתוך תגית p לצורך הענין, נשתמש בתגית הבודדת <br>, שמשמשת לירידת שורה.
בואו נכיר עוד תגית חשובה בשם <a>, שימו לב שהתגית הזאת חייבת להיסגר.

תפקידה של התגית הזאת הוא קישורים בדף האינטרנט.

התחביר שלה הוא כזה:

<a href="www.google.com">go to google</a>

בואו נעבור על זה. פתחנו עם הגדרת התגית a, לאחר מכן נתנו לו תכונה שנקראת href שאומרת לאיפה היעד של הקישור (כמו שאתם בטח רואים היעד הוא www.google.com), ובין התגית הפותחת והסוגרת מופיע המשפט שאנחנו רוצים שלחיצה עליו תוביל לקישור המוגדר.

טוב, לסיכום:

למדנו על תכונות לתגיות HTML,

למדנו על שתי סוגים בתגיות, 1: תגית פותחת ותגית סוגרת 2: תגית שאינה נסגרת.

למדנו על עוד שתי סוגים של תגיות,

1: inline tag

2: block tag

ובקיצור, נתראה במדריך הבא. ושיהיה בהצלחה!
נ.ב. אשמח להערות והארות.

מדריך הגדרת הרשת | לינוקס

במדריך נלמד להגדיר את שירותי הרשת בלינוקס באופן בסיסי דרך הטרמינל. אני מדגיש שלא יוסבר כאן יותר מידי על התאוריה שמאחורי כל העניינים פה, כמו DNS, מסכת רשת, כתובת IP, Default geteway וכו', על זה נדבר אולי בפעם אחרת, הפעם רק נסביר את החלק הטכני הבסיסי של העניין הזה בלינוקס. אני לא מתיימר שכתבתי פה את כל האינפורמציה האפשרית, ואדרבה אשמח להערות/הארות אם משהו חשוב חסר.

בקיצור, בואו נתחיל:

על מנת להציג את כתובות ה – IP של כרטיסי הרשת, הקלידו את הפקודה

ifconfig

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

בשביל להציג פרטי כרטיס רשת ספציפי, לדוגמה פרטי כרטיס הרשת eth0, הקלידו

ifconfig eth0

בכדי לכבות את כרטיס הרשת, הריצו

sudo ifconfig eth0 down

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

אם ברצונכם כן לראות את כל כרטיסי הרשת שבמכונה וגם את הכבויים, הוסיפו אחר כך:

ifconfig -a

בשביל להפעיל את כרטיס הרשת שוב פעם, הריצו

sudo ifconfig eth0 up

ניתן גם להשתמש בפקודה המקוצרת:

sudo ifdown eth0
sudo ifup eth0

בכדי להציג את כתובת ה – Default getway הקלידו

route -n

בכדי לבקש כתובת IP משירות ה – DHCP שלנו, נכתוב

dhclient eth0

על מנת לתשאל את שרת ה – DNS (למפות בין כתובת DNS לכתובת IP ולהיפך) בשביל הכתובת IP של גוגל לדוגמה נריץ

nslookup www.google.com

שאגב זהה לאותה הפקודה בווינדוס.
אפשר גם לכתוב

host www.google.com

בכדי להגדיר את כתובת ה – IP נריץ

sudo ifconfig eth0 192.168.0.3 netmask 255.255.255.0

כשב – netmask אנחנו קובעים את מסכת הרשת של כתובת ה - IP.

אם אינכם יודעים, קיימת פקודה חדשה בלינוקס שנקראת 'ip', שיכולה להחליף את פקודת ה – ifconfig הישנה והטובה. כעת נראה כיצד ניתן להשתמש בה בכדי להגדיר את הרשת.

בכדי לראות את כתובות ה – IP הקלידו

ip addr show

בשביל להציג פרטי כרטיס רשת ספציפי כתבו

ip addr show eth0

בשביל לכבות או להדליק את כרטיס הרשת נשתמש בפקודה

sudo ip link set eth0 down
sudo ip link set eth0 up

בכדי להציג את ה – Default geteway בפקודה החדשה, כתבו

ip route show

בשביל להגדיר את כתובת ה – IP וה – Subnet mask של כרטיס הרשת נמחק את הקודם, ונוסיף את החדש בצורה הזו

sudo ip addr del 192.168.0.3/24 dev eth0
sudo ip addr add 192.168.0.15/24 dev eth0

כש - 24 מסמן את מסכת הרשת.
אפשר גם לכתוב את מסכת הרשת בצורה הרגילה:

ip addr add 192.168.0.3/255.255.255.0 dev eth0

להצגת כל שירותי הרשת הפעילים, נהוג להשתמש בפקודה netstat עם הדגלים הבאים:

netstat -tuna

מיקום קבצי הרשת:

הנתיב של הקובץ המכיל את שם העמדה שלנו ברשת

/etc/hostname

הגדרת שרת ה – DNS

/etc/resolv.conf

קובץ ההגדרות של ה – DNS (אותו דבר כמו קובץ ה – hosts של ווינדוס)

/etc/hosts

מקווה שנהניתם... בהצלחה!

מדריך אפשרויות שונות לכתיבת CSS

--

במדריך הזה נעבור על האפשרויות לכתיבת CSS.

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

ישנם שלושה אפשרויות כתיבה של CSS:

• inline – כתיבה בתוך התגיות
• internal – כתיבה בתוך תגית <style> (מומלץ לשים אותה בתוך תגית ה - <head>, למרות שלא חובה)
• external – כתיבת ה – CSS בקובץ נפרד.

נתחיל מה – inline

inline-css נכתב בתור תכונה בתגית שאנחנו רוצים לעצב. שימו לב לדוגמה הבאה:

<p style="color: blue; background-color: white;">bla bla bla</p>

כאן אנחנו ניגשים לתגית p וכותבים בתוכה תכונה של style כמו בדוגמה. הערכים בתוך ה – style, מופרדים ב – ';' (נקודה פסיק).

internal-css

את internal-css אנו רושמים בתוך תגית <style> שנמצאת ב – head, כמו שהזכרנו למעלה (ובמדריך הקודם).

external-css

external-css נכתב בקובץ נפרד בעל הסיומת css., כמובן שצריך לייבא את הקובץ לדף ה – HTML ולשם כך נראה מספר אפשרויות.

אפשרות ראשונה:

נכתוב בתגית ה – head, תגית שנקראת <link>, כך:

<head>
    <link rel="stylesheet" href="file-name.css">
</head>

תכונת ה – rel אומרת שמדובר בגיליון מסוג 'style sheet' שזה אומר CSS. ותכונת ה – href קובעת את המקור ממנו נטען את הקובץ.

אפשרות שנייה:

נכתוב תגית style, ונכניס לתוכה את השורה הבאה:

<head>
    <style>
        @import url('source of the css file')
    </style>
</head>

כאשר במקום השורה שבתוך ה – URL, נכתוב את מקור הקובץ.

קדימות CSS

שימו לב שבכתיבת CSS ישנם כללי קדימות. נניח לדוגמה שכתבנו בקובץ ה – external עיצוב מסוים עבור תגית מסוימת, ואילו ב – internal עיצוב שונה שמתנגש עם העיצוב הקודם, בעבור אותה תגית ספציפית, מה יקרה אז?

בשביל זה יש לנו את כללי הקדימות של CSS. בקצרה, inline קודם להכול, internal קודם ל – external ואילו external לא קודם לשום דבר.