אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » פתרונות ומאמרים על פיתוח אינטרנט » אפקטים בקונסולה

אפקטים בקונסולה

רן בר-זיק יולי 1, 2018 7:07 am 3 תגובות

כך אפשר להכניס קצת צבע לחיים בקונסולה

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

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

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

Stop! This is a browser feature intended for developers. If someone told you to copy-paste something here to enable a Facebook feature or "hack" someone's account, it is a scam and will give them access to your Facebook account. See https://www.facebook.com/selfxss for more information.

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

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

פורמט בסיסי

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


console.log("My Name is %s, Prepare to die", "Inigo Montoya");

אני אראה את הטקסט המתבקש מתוך הנסיכה הקסומה.

My name is Inigo Montoya. You killed my father. Prepare to die
My name is Inigo Montoya. You killed my father. Prepare to die

ה-s% הוא בעצם סימן של מחרוזת טקסט שניתנת כארגומנט השני, אני יכול להכניס עוד כמה כרצוני:


console.log("My Name is %s, Prepare to %s", "Inigo Montoya", "live a long life!");

אם אני רוצה להכניס מספר, אני יכול לעשות את זה עם d%. למשל:


console.log("My Name is %s, Prepare to %s X %d", "Inigo Montoya", "live a long life!", 10);

מה שאקבל זה:
My Name is Inigo Montoya, Prepare to live a long life! X 10

אז d% ו-s% הם מוכרים ובאמת אין טעם להרחיב, אבל יש עוד כמה מגניבים כמו למשל O% שמאפשר הדפסה של האובייקט כעץ ג'אווהסקריפטי מגניב ושימושי למדי.


console.log("This is my body: %O", document.querySelector('body'));

אם רוצים להדפיס רק את האלמנט בלי מחרוזת, אפשר להשתמש ב-console.dir. למשל:


console.dir(document.querySelector('body'));

console dir

שימו לב שזה שונה לגמרי מהדפסה "רגילה" של אלמנט שמראה לנו את ה-HTML. פה אנו רואים את הייצוג הג'אווהסקריפטי של האובייקט.

העיצוב המגניב

ובדיוק כפי שאפשר לעשות פורמטינג לטקסט, מספר ואובייקטים אפשר להכניס לקונסולה גם… CSS עם c%!


console.log("%cThis is nice font", "color:orange;font-size: 65px;font-weight: bold;");

ומה נקבל? ובכן – את זה:

This is a nice font בצבע ובגודל
This is a nice font בצבע ובגודל

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
ג'אווה סקריפט ו-jQuery באתרי אינטרנט

3 תגובות

  1. ספלינטור הגב יולי 1, 2018 בשעה 10:34 am

    יש חברות שמשתמשות בזה כדי למצוא מתכנתים…
    http://elijahmanor.com/find-good-devs/
    https://www.reddit.com/r/ProgrammerHumor/comments/4k4x50/my_friend_got_tired_of_all_the_were_hiring/

  2. מתן הגב יולי 1, 2018 בשעה 3:07 pm

    רן אתה אחד המגניבים!
    תודה

  3. משתמש אנונימי (לא מזוהה) הגב יולי 1, 2018 בשעה 8:24 pm

    מעולה…

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד