10 דברים שלא ידעתם ש- JavaScript יכול לעשות

תוֹכֶן

• 01. הגיע הזמן ל- hangout
• 02. $ ('אור'). FadeIn ();
• 03. הידיים שלך מיועדות לדפדפן
• 04. משחקי תלת מימד הנשלטים באמצעות לוח המשחקים שלך
• 05. הפעלת פלאש באייפד שלך
• 06. כתיבת אפליקציות לסמארטפון שלך
• 07. הפעלת Ruby and Python בדפדפן שלך
• 08. כתיבת תוכניות שולחן עבודה עצמאיות
• 09. הפעלת שרת אינטרנט
• 10. גירוד באינטרנט וצילומי מסך
• לַחֲכוֹת! יש עוד...

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

במאמר הבא נגלה 10 מקרי שימוש ב- JavaScript השונים מאלה הנפוצים "בדפדפן", שהיית רגילה אליהם.

01. הגיע הזמן ל- hangout

האם אתה זוכר את החזון של שנות ה -80 של תקשורת וידיאו כמו Facetime?

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

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

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

באמצעות Node.js כשרת בחלק האחורי של יישום כזה, קל להפליא להעביר את אות הווידיאו דרך האוויר ללקוח אחד או יותר. למרבה המזל, עד לכתיבת שורות אלה רק Chrome ואופרה תומכים ב- API, אך אחרים יתעדכנו במהירות.

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

למען הכיף, בדוק את יישום Photo Booth של סינדרה סורהוס שנעשה ב- 121 בתים!

var video = document.getElementsByTagName ('וידאו') [0],
navigator.getUserMedia ('וידאו', successCallback, errorCallback);

פונקציה successCallback (זרם) {
video.src = זרם;
}

פונקציה errorCallback (שגיאה) {
console.log (שגיאה);
}

02. $ ('אור'). FadeIn ();

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

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

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

אך כיצד ניתן לגשת ליציאה הטורית באמצעות JavaScript? ברור שלא מהדפדפן.
Node.js להצלה!

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

הספרייה הכי חמה ומגניבה ברחבי הבלוק לתכנות ארדואינו מונע על ידי JS היא jonny-five. בדוק בבלוג של Bocoup איזה חרא שעשו עם פלטפורמת Arduino והרבה תוספים. כמו כן הסרטון JSConf של ניקולאי אונקן וג'ורן זאפרר עשוי לתת לכם ספין למה שאפשר היום עם מעט קוד.

03. הידיים שלך מיועדות לדפדפן

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

עם מהדורת Kinect SDK של מיקרוסופט, חבורה של אנשים עברה את הגשר של השימוש בדפדפן עבור Kinect. ראשית כל החבר'ה של ChildNodes שבנו ספריית kinect.js עובדת, המאפשרת שימוש ב- Kinect של מיקרוסופט בדפדפן שלך.

אני ממליץ בחום לבדוק את ההדגמות והסרטונים שלהם, זה פיצוץ. חסרון אחד עיקרי בספריית kinect.js, לעומת זאת, הוא שחייבת להיות תוכנית שרת WebSocket הפועלת בחלק האחורי של הלקוח (זהו למעשה הדבק של Kinect -> C # -> JS).

כמה סטודנטים לתהילת MIT עובדים על פיתרון להפיל את הקיר הזה, שנקרא DepthJS,
תוסף בדפדפן המאפשר שימוש ב- Kinect עבור Chrome ו- Safari, אפילו עבור אתרים שאינם מותאמים לשימוש מבוסס Kinect בכל צורה שהיא. DepthJS כרגע נמצא בשלב פיתוח מוקדם, אך בהחלט כדאי לעקוב אחריו.

04. משחקי תלת מימד הנשלטים באמצעות לוח המשחקים שלך

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

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

האם זה לא יהיה אחלה אם רק תוכלו לחבר את בקר ה- Xbox למחשב האישי ולהתחיל לשחק את משחק הדפדפן האהוב עליכם? זה כבר לא חזון עתידי, אמור שלום ל- API של Gamepad!

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

div id = "gamepads"> / div>
סקריפט>
function gamepadConnected (אירוע) {
var gamepads = document.getElementById ("gamepads"),
gamepadId = event.gamepad.id;

gamepads.innerHTML + = "Gamepad מחובר (id =" + gamepadId + ")";
}

window.addEventListener ("MozGamepadConnected", gamepadConnected, false);
/ סקריפט>

אם תרצה לדעת יותר על יכולות התלת-ממד של הדפדפנים בדוק את מנוע סימולטור התלת-ממד המקורי הפתוח של Three.js ו- Jens Arps, שנבנה על גבי זה. מארק המיל תיזהר, ייתכן שנצטרך אותך להמשך מפקד אגף נוסף!

05. הפעלת פלאש באייפד שלך

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

כעובד סוכנות, אני חייב לומר שזה מצב ממש גרוע עבור הלקוחות שלנו.
רובם נאלצים לשלם פעמיים עבור מודעה או קמפיין פשוט שהם משיקים בכדי להכיל תוכן אינטראקטיבי ב- IE7 או IE8 ישנים באמצעות Flash ובדפדפנים מודרניים כמו גם iDevices באמצעות HTML5.

מילוי רב של תכונות הדפדפנים הישנות כולל גבולות, בעיקר ביצועים. אז האם אין יכולת להריץ פלאש ב- iDevices ללא פלאש?

כמובן שיש אחד, וכמובן שהוא מובנה ב- JavaScript.

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

כאשר טוביאס הצטרף לחברת ueberJS UXEBU, הם העלו רעיון חדש.
וכך, ביקשד נולד. Bikeshed עצמו הוא סוג של מסגרת אנימציה של JavaScript, אך הוא גם JavaScript לפלאש לכל מה שאתה רוצה שיהיה מהדר (הוא מבוסס מתאם, כך שתוכל לכתוב מתאמים לכל דבר שתרצה, אם כי ההתנהגות הסטנדרטית היא הידור פלאש ל- JavaScript) . זה תואם ל- Flash 10 ו- ActionScript 3. עיין בדף האינטרנט שלו כדי ללמוד עוד על שפע התכונות שלו מלבד המהדר.

06. כתיבת אפליקציות לסמארטפון שלך

כתיבת יישומים מקוריים לסביבות טלפון נייד היא דרך סלעית. זה מתחיל בהחלטה באיזו פלטפורמה אתה רוצה לתמוך. האם היישום שלך יפעל במכשירי iPhone ו- iPad, מכשיר סלולרי שמופעל על ידי אנדרואיד, Windows Mobile, מכשירי Blackberry, פלאש מבוסס webOS ... וכן הלאה.

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

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

אבל במה צריך לבנות את האפליקציות האלה? מה משותף לכל הפלטפורמות הללו? אולי אתה יודע את התשובה, זה דפדפן אינטרנט ולכן מנוע JavaScript.

זה הרעיון שעומד מאחורי אפאצ'י קורדובה, הידועה יותר בשמה הקודם PhoneGap.
קורדובה היא מסגרת JavaScript הממצה את ממשקי ה- API של כל סביבה ניידת וחושף ממשק API מסודר של JavaScript לשליטה בכולם. זה מאפשר לך לשמור על בסיס קוד יחיד, אותו אתה בונה ופורס במכשירים ניידים שונים.

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

07. הפעלת Ruby and Python בדפדפן שלך

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

Emscripten מאפשר לך לקחת קוד סיביות LLVM - אותו ניתן ליצור מספריות מבוססות C / C ++ ל- JavaScript. היא עושה זאת על ידי הידור הספריות לקוד סיביות ואז, לקיחת קוד הסיביות הזה והפיכתו ל- JavaScript. מסודר, אבל מה אני באמת יכול לעשות עם זה, אתה יכול לשאול את עצמך?

יש לי שאלה נגדית עבורך: האם שמעת אי פעם את המשפט "השימוש ב- CoffeeScript ובפרוטוטייפ הוא הכי קרוב שאתה יכול להשיג להפעלת Ruby בדפדפן"? לא? אל תדאג, כי זה כבר לא נכון.

בעזרת Emscripten תוכלו פשוט לקחת את מקורות הרובי, להפוך אותם ל- JavaScript ו- voilà, להפעיל את הרובי האמיתי בדפדפן שלכם! אבל זה לא חל רק על רובי, גם פייתון למשל תואר.

או עיין בדפדפן h.264 מפענח ברודווי. זוהי למעשה ספריית C ++ מתווית!

עבור ל repl.it כדי לראות כמה שפות תכנות (כולל רובי ופייתון) הפועלות בדפדפן שלך!

08. כתיבת תוכניות שולחן עבודה עצמאיות

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

הפתרונות הראשונים הגיעו מהחבר'ה של אקסלרטור עם חבילת שולחן העבודה Titanium ומ- Adobe פלטפורמת האוויר הנפוצה.

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

app.js הוא פרויקט די צעיר ולכן תומך רק ב- Windows וב- Linux עד עכשיו, אך על פי רשימת התפוצה, התמיכה ב- Mac בדרך.

09. הפעלת שרת אינטרנט

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

אבל עם ההצלחה המדהימה של Node.js זה למרבה המזל רחוק מעכשיו. לא רק שזה כבר לא מפתיע אנשים, בגלל האופי הא-סינכרוני שלו Node.js הוא סוג של נפלא בביצועים, במיוחד כשמדובר בהתמודדות עם הבעיה של הרבה חיבורים מקבילים. לא רק הביצועים שלה הם פיצוץ, ממשק ה- API הפשוט באמת מושך אליו הרבה מפתחים. בואו נבדוק את הדוגמה "שלום עולם" מעולם הצומת, זה לא רק הדפס "שלום עולם" בדוגמת המסך, זה שרת אינטרנט http!

var http = דורש ('http');
http.createServer (פונקציה (req, res) {
res.writeHead (200, {'סוג תוכן': 'טקסט / רגיל'});
res.end ('שלום עולם n');
האזינו (1337, '127.0.0.1');

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

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

10. גירוד באינטרנט וצילומי מסך

אז, אחרון חביב, בואו נסתכל על פרויקט שאני אישית אוהב לתת לי להריץ את מבחני ה- QUnit ללא ראש בשורת הפקודה. PhantomJS הוא דפדפן מבוסס ראש ללא WebKit עם ממשק API מבוסס JavaScript (או CoffeScript) מסודר.

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

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

var var = דף אינטרנט חדש ();
page.open ('http://google.com', פונקציה (סטטוס) {
page.render ('google.png');
phantom.exit ();
});

זה כל מה שאתה צריך כדי ליצור צילום מסך ומכיוון שהוא מבוסס JavaScript, אתה יכול גם להשתמש ב- jQuery ולתפעל את תוכן הדף לפני שמצלמים אותו!

לַחֲכוֹת! יש עוד...

אז, אני מקווה שאתה נדהם כמו שאני, כשגיליתי את כל אחד מהכלים האלה. מאמר זה פשוט גירד את פני השטח של מה שאפשר עם JavaScript בימינו. יש הרבה יותר כמו IDE שנכתבו לגמרי ב- JS Cloud9 או דברים אבטחה גבוהים שנעשו איתו (כרטיס האשראי שלך נעשה עם JavaScript).

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