JavaScript - בלוג MSDN ישראל

חדש: אפליקציות Windows Store תומכות מעתה ב- jQuery 2.0

פורסם בתאריך 02/04/2013 08:12 על ידי Eran Sharvit

WinRT_Cyan_S_rgb אם אתם מפתחי HTML5 ו- JavaScript, אתם יכולים לפתח אפליקציות Windows 8 עם הידע שכבר רכשתם ועם הספריות שאתם רגילים להשתמש בהן. עבור קוד ה- jQuery שלכם, עדכנו את הספריה לגרסה החדשה jQuery 2.0 בטא ועקבו אחרי דוגמאות השימוש על מנת ללמוד לנצל את כל היכולות החדשות.

אם פיתחתם כבר אפליקציות Windows 8 וניסיתם להשתמש ב- jQuery בגרסאות קודמות, לעתים הייתם נתקלים בהודעות שגיאה בעיקר בכל מה שקשור לתכנים דינמיים. הבעיה נבעה מהעובדה שאפליקציות Windows Store יכולות לגשת ישירות ל- API’s של ה- Windows Runtime” מה שחייב מודל אבטחה חדש שהגביל את jQuery וגרם לעתים לשגיאות.

בגרסה החדשה של jQuery 2.0 Beta, צוות הפיתוח עבד רבות על מנת לתקן את כל הבעיות ושחרר גרסה שמאפשרת לפתח בנוחות אפליקציות Windows Store משולבות ב- jQuery ללא בעיות. פרטים נוספים כאן.

שאלות בנושא פיתוח אפליקציות Windows Store? כנסו לפורום שלנו בעברית!

קרא עוד >>

תגים:DEV, HTML5, jQuery, JavaScript, Windows 8

קורסים חדשים באקדמיית מיקרוסופט הוירטואלית: פיתוח ל- Windows 8

פורסם בתאריך 17/02/2013 06:29 על ידי Eran Sharvit

החודש הגענו למספר הנפלא של 1,000,000 משתמשים רשומים לאקדמיה הוירטואלית של מיקרוסופט או בקיצור MVA!

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

זכרו שהתוכן הוא חופשי - דרושה רק הרשמה קצרה ואתם יכולים ללמוד בזמן ובמקום המתאים לכם!

2 קורסים חדשים בנושא אפליקציות Windows 8:

להרשמה ל- MVA

קרא עוד >>

תגים:DEV, JavaScript, Windows 8, Windows Store

מדריך: איך לפתח אפליקציית Windows 8 ב- JavaScript או ++C

פורסם בתאריך 13/02/2013 08:14 על ידי Eran Sharvit

Win8_Mag218_S_rgb צוות מיקרוסופט Patterns and Practices האחראי על מדריכים שונים שנועדו לאפשר לכם ללמוד כיצד לפתח אפליציות מבוססות תשתית מיקרוסופט בדרך הנכונה, שחרר מדריך חדש הנועד למפתחים אשר מעוניינים ללמוד כיצד לפתח אפליקציות Windows Store.

המדריך החדש מגיע ילווה אותך בפיתוח אפליקצית Hilo מהתחלה ועד הסוף כמו גם יספק לכם את קוד המקור המלא.
המדריך מגיע בגרסת JavaScript + HTML או בגרסת ++C ו- XAML – איך שנוח לכם לפתח!

להורדה ופרטים מלאים באתר MSDN – גרסת JavaScript + HTML או גרסת ++C ו- XAML

The Hilo start page

מה זה Patterns and Practices?

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

נתקעם בפיתוח ויש לכם שאלה למומחה? כנסו לפורום מפתחי Windows 8 שלנו!

קרא עוד >>

תגים:DEV, Patterns & Practices, JavaScript, Windows 8, Windows Store

JsRender: הדרך הקלה והנוחה ליצירת תבניות JavaScript ב- HTML5, חלק 2

פורסם בתאריך 11/02/2013 08:09 על ידי Eran Sharvit

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

תזכורת – ספריית JsRender באה לספק לנו דרך טיפה יותר נחמדה כדי ליצור תבניות JS ב-5 HTML.
היתרון והחשיבות של תבניות ברור – לכתוב קוד מובנה פעם אחת ולהשתמש בהרבה מקומות והתחלנו לראות כיצד עושים זאת בחלק הראשון של המאמר.

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

JsRender מאפשר לנו לנווט למעלה ולמטה בהירארכיה של אובייקטים. לניווט למטה משתמשים בנקודה או סוגריים מרובעות. ל-Car יש מאפיין מסוג Art, ולו יש מאפיין בשם ImageUrl. כדי להגיע אליו אפשר להשתמש ב - Art.ImageUrl,
או Art[“ImageUrl”] :

<img class='pic' src = '{{>Art.ImageUrl}}' title='{{>Name}}'/>

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

There are no {{>#parent.data.Name}} currently for rent

כאן אנחנו עולים 2 רמות:

{{for Colors}}
  <li>
    <div style='color:{{>ColorName}}'>{{>ColorName || 'No color available'}}  {{>#parent.parent.data.Name}}
    </div>                      
  </li> 
{{/for}}

הרחבות

ניתן גם לכתוב פונקציות, ממירים, פרמטרים ו -Custom Tags על מנת להרחיב את היכולות, ולהרוויח עוד Reuse. בכל המקרים צריך תחילה לרשום את ההרחבה, ואז לצרוך אותה. נגדיר פונקציה toUpper שתעשה Upper Case לשמות המכוניות

$.views.helpers({
            toUpper: function (val) {
                return val.toUpperCase();
            }
        });

צריך לוודא שהקוד רץ בעליית הדף או לפני שימוש כמובן. כעת לגבי השימוש – קוראים לפונקציה עם ~ ומעבירים את הערך הרצוי:

{{>~toUpper(Name)}}

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

$.views.converters ({
            quality: function (val) {
                return val > 2010? 'Premium':'Vintage';
            }
        });

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

{{quality:Model}}

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

$.views.helpers({
            noDataMessage: { msg: 'No Data' },
            toUpper: function (val) {
                return val.toUpperCase();
            }
        });

ונצרוך אותו בתוך התבנית – במקום לכתוב את המחרוזת 'No Data' נשתמש בפרמטר שהגדרנו:

<div >Miles Per Gallon: {{>MilesPerGallon || ~noDataMessage.msg}}</div>

עוד לגבי תבניות

ניתן לשמור את התבנית עצמה כמחרוזת, בבסיס נתונים לדוגמה, ולצרוך אותה בזמן ריצה. כאן בדוגמה אנחנו יכולים לראות שאחרי שקיבלנו את רשימת הרכבים אנחנו מגדירים תבנית כמחרוזת, קוראים ל $.templates(tmplString) שהופך את המחרוזת לתבנית, קוראים ל render ומצימדים את התוצר ל DOM

$.get("/CarRentalService.svc/GetRentalCars", "", function (data) {
            var cars = data.d;
            var tmplString = "<li><div class='item'><div class ='caption'>{{>~toUpper(Name)}} {{>Model}} </div></li>";
            
            var tmpl = $.templates(tmplString);
            var htmlString = tmpl.render(cars);
            $("#carRentalList").html(htmlString);

נקבל:

BMW 2009
FIAT 2011
MERCEDES 2012

עוד אפשרות הינה לרשום את המחרוזת של התבנית, ולצרוך אותה מאוחר יותר, בפונקציה אחרת למשל. לאחר רישום התבנית עם שם, נראה אותה ב Intellisense של $.render.

כדי לרשום תבנית משתמשים שוב ב $.templates, עם עוד פרמטר של השם שניתן לתבנית - $.templates('customTmpl', tmplString)

$.get("/CarRentalService.svc/GetRentalCars", "", function (data) {
            var cars = data.d;
            var tmplString = "<li><div class='item'><div class ='caption'>{{>~toUpper(Name)}} {{>Model}} </div></li>";
            
            $.templates('customTmpl', tmplString);//רישום
            var htmlString = $.render.customTmpl(cars);//צריכה
            $("#carRentalList").html(htmlString);
        }, "json");

נריץ ונקבל את אותו פלט כמו מקודם.

סיכום

JsRender הינה ספרייה שעוזרת לנו לכתוב קוד מובנה ולהשתמש בו בהרבה מקומות. ראינו את ה syntax הבסיסי שנע בין מיצוב מאפיינים בתבנית, דרך תמיכה בלולאות, ניווט בהירארכיה של אובייקטים ותמיכה בתנאים. ניתן להרחיב את הפונקציונליות על ידי שימוש ב- functions, converters, tags ו – template parameters. היכולת להשתמש במחרוזות כתבניות, שילוב בין מחרוזות ועוד, מאפיינת את הספרייה כדינאמית וגמישה.

יש לכם עוד שאלות בנושאי פיתוח לווב? היכנסו לפורום Web Development שלנו בעברית!

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

קרא עוד >>

תגים:DEV, HTML5, Web, jQuery, JavaScript

JsRender: הדרך הקלה והנוחה ליצירת תבניות JavaScript ב- HTML5, חלק 1

פורסם בתאריך 21/01/2013 03:56 על ידי Eran Sharvit

javascript_logo היתרון והחשיבות של תבניות בהנדסת תוכנה ברור – Code Reuse. לכתוב קוד מובנה פעם אחת ולהשתמש בהרבה מקומות.

JsRender הוא עוד יהלום קטן בנוף האינסופי של סקריפטים חדשים שיוצאים בעת האחרונה והוא הממשיך הישיר של Jquery Templates שננטש באיזור 2011.

JsRender בא לספק לנו דרך טיפה יותר נחמדה כדי ליצור תבניות JS ב-5 .HTML ויש לו מספר שיפורים ומאפיינים ייחודים:

אין תלות ב Jquery
אין תלות ב DOM
תומך ביצירת פונקציות הרחבה (בהמשך...)
ביצועים גבוהים(String based rendering)

הבה נצלול פנימה קצת ונראה את האפשרויות השונות של הספריה.

הכנה

ניצור שירות שיספק לנו רשימת רכבים להשכרה. נקים פרויקט חדש מסוג Web Application Project.
אתם יכולים להשתמש בגרסה החינמית Visual Studio Express 2012 for Web.

נוסיף פריט חדש - Ajax-Enabled Web Service, נקרא לו CarRentalService ונגדיר את המחלקה Car:

public class Car
    {
        public string Name { get; set;}
        public int Model { get; set;}
        public List<Color> Colors { get; set;}
        public Art Art { get; set;}
        public bool IsInStock { get; set;}
        public int MilesPerGallon { get; set;}
        public int ListPrice { get; set;}
        public int CurrentPrice { get; set;}    }

    public class Color
    {
        public string ColorName { get; set; }
    }

    public class Art
    {
        public string ImageUrl { get; set; }
    }

וכמובן את השירות עצמו:

[ServiceContract(Namespace = "")]
public class CarRentalService
{
    [WebGet] 
    [OperationContract]
    public List<Car> GetRentalCars()
    {
        Car car1 = new Car
        {
            Name = "BMW",
            Model = 2009,
            Colors = new List<Color> { new Color { ColorName = "Blue" }, new Color { ColorName = "Black" } },
            Art = new Art { ImageUrl = "/Images/Bmw1.png" },
            IsInStock = true, 
            MilesPerGallon = 25,
            ListPrice = 50,
            CurrentPrice = 40
        };
        Car car2 = new Car
        {
            Name = "Fiat",
            Model = 2011,
            Colors = new List<Color> { new Color { ColorName = "Orange" }, new Color { ColorName = "Yellow" } },
            Art = new Art { ImageUrl = "/Images/Fiat.png" },
            IsInStock = true,
            MilesPerGallon = 30,
            ListPrice = 50,
            CurrentPrice = 60
        };
        Car car3 = new Car
        {
            Name = "Mercedes",
            Model = 2012,
            Colors = new List<Color> { new Color { ColorName = "White" }, new Color { ColorName = "Blue" } },
            Art = new Art { ImageUrl = "/Images/Mercedes.png" },
            IsInStock = false,
            ListPrice = 50,
            CurrentPrice = 60
            
        };
        return new List<Car>
        {
            car1, car2, car3
        };
    }

בסיס

כעת, נוריד את Jsrender מאתר הפרוייקט ב- GitHub ונוסיף לספריית Scripts.

נוסיף פריט חדש, דף HTML5, ונוסיף references ל- Jquery ו JsRender.

באופן כללי, ישנם תמיד 3 מרכיבים ביצירת תבנית:

התבנית עצמה.
אלמנט ה Html שיכיל את התבנית המלאה בנתונים.
קוד שיוצק תוכן לתבנית ומכניס אותה לאלמנט ה- HTML.

התבנית הינה קטע של Script עם טיפוס של text/x-jsrender בשם carRentalTemplate. שימו לב ל Syntax של JsRender בתוך התבנית, הכל במחרוזות, ויש התאמה לשמות המאפיינים ב Car, שם ושנת יצור, עטופים ב {{}}

<script id="carRentalTemplate" type="text/x-jsrender">
        <li>
            {{>Name}} {{>Model}}
        </li>
</script>

בצורה זו (שימוש ב <), הנתון עובר HtmlEncoding, אם רוצים לבטל את זה ולהציג Html, משתמשים בנקודותיים:

<script id="carRentalTemplate" type="text/x-jsrender">
        <li>
            {{:Name}} {{:Model}}
        </li>
</script>

אפשר גם לעשות מספר רץ במקום LI:

<script id="carRentalTemplate" type="text/x-jsrender">
        <div>{{>#index+1}} {{:Name}} {{:Model}}</div> 
</script>

בתוך ה BODY אנחנו רואים את ה'מיכל' – לשם נכניס את התבנית המלאה. במקרה זה מדובר ברשימה UL, והתבנית עצמה הינה אוסף של LI.

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.7.1.min.js"></script>   1:  
   2:     <script src="Scripts/jsrender.js">
   1: </script>
   2:     
   3:     <script id="carRentalTemplate" type="text/x-jsrender">
   4:         <li>
   5:             {{>Name}} {{>Model}}
   6:         </li>
   7:     
</script>   1:  
   2:     
   3:     <script type="text/javascript">
   4:  
   5:         $.get("/CarRentalService.svc/GetRentalCars", "", function (data) {
   6:             var cars = data.d;
   7:             $("#carRentalList").html(
   8:             $("#carRentalTemplate").render(cars));
   9:  
  10:         }, "json");
  11:  
  12:     
</script>
</head>
<body>
    <ul id="carRentalList" />
</body>
</html>

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

כעת, אם נריץ את הדף נקבל את הפלט הבא:

BMW 2009
Fiat 2011
Mercedes 2012
BMW 2011

פשוט ונחמד. כעת בואו נראה כמה אפשרויות והרחבות.

אפשרויות

נוסיף קצת עיצוב לתבנית , הכל בעצם HTML ו- CSS במחרוזת:

<script id="carRentalTemplate" type="text/x-jsrender">
        <li>
            <div class ='caption'>
                {{>Name}} {{>Model}}
            </div>        
 </li>
    </script>

ב Car יש מאפיין IsInStock, בוליאני. JsRender תומך בתנאים בצורה של If-Else. אם IsInStock=true, נציג את הצבעים שניתן לבחור מהם, אם False, נציג הודעה.

{{if IsInStock}}
    <div class='available'>Available now!!</div>
{{else}}
    There are no cars currently for rent
{{/if}}

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

{{if Model > 2010}}
        Premium
{{else}}
        Vintage
{{/if}}

אגב, באותה שיטה אפשר לשאול על null:

{{if Color}}
    Not Null
{{else}}
    The instance is null
{{/if}}

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

<div >Miles Per Gallon: {{>MilesPerGallon || 'No Data'}}</div>

כעת, אם יש רכבים להשכרה, כלומר IsInStock=true, נרצה להציג את כל הצבעים לבחירה.
שימו לב שהאובייקט Car מכיל מערך של אובייקט אחר, Color. במקרה של מערך אנחנו יכולים להגדיר לולאה בתוך התבנית, רק צריך לציין את שם המאפיין שמחזיק את המערך, במקרה זה Colors

{{for Colors}}
   <li>{{>ColorName || 'No color available'}}</li> 
{{/for}}

אפשר לשלב נתונים דינמיים ממש בתוך ה Html, למשל, נרצה שכל שם של צבע יהיה בצבע המתאים:

{{for Colors}}
     <li> 
<div style='color:{{>ColorName}}'>{{>ColorName || 'No color available'}}
</div>
     </li> 
{{/for}}

נריץ כעת ונקבל את הפלט הבא:

לסיכום

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

יש לכם עוד שאלות בנושאי פיתוח לווב? היכנסו לפורום Web Development שלנו בעברית!

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

קרא עוד >>

תגים:DEV, HTML5, Web, jQuery, JavaScript

פיתוח לווב באמצעות Visual Studio 2012 - היכולות החדשות עבור מפתחי צד הלקוח

פורסם בתאריך 11/09/2012 10:57 על ידי Eran Sharvit

יש האומרים שאנשי פיתוח ווב מתחלקים לשתי מחנות. מצד אחד אנשי ה- server side - בדרך כלל הם אוהבים להתעסק בתכנות של לוגיקה ואלגוריתמיקה. מן הצד השני אנשי ה- Front end - אלו בדרך כלל אלופים ב- Java script ובבניית CSSים, עם ידע מעמיק בכל היכולות המיוחדות של כל הדפדפנים על מנת להוציא את מירב הפוטנציאל מכל דפדפן.

לאנשי ה- server side יש בדרך כלל רתיעה מהעבודה על ה- Front end. הם בדרך כלל מתלוננים על כך שסביבות הפיתוח בתכנות Java Script ו- CSS לא עשירות כמו סביבות הפיתוח ב- C#, וכל הידע בנושא היכולות של הדפדפנים מצוי אך ורק בראשם של המתכנתים ולא בסביבות הפיתוח עצמן.
ובכן, תפיסה זו עלולה להשתנות עם Visual Studio 2012.

מה התחדש ב- Visual Studio 2012

טוב, אין ספק ש- Visual Studio 2012 לבדו לא יהפוך מתכנת Server Side למומחה Front End.. אך הגרסה החדשה של VS עושה צעד משמעותי בהקלת העבודה עבור מי שאינו מומחה Front End ובוודאי עוזרת מאוד למי שכבר מומחה. לראשונה, חוויית השימוש בפיתוח ווב דומה לחווית השימוש בכתיבת קוד Server Side כמו C#. בנוסף, Visual Studio 2012 כולל בתוכו ידע רב בנושא היכולות של הדפדפנים השונים ויודע להציע אוטומטית קוד אשר ממצה את הפוטנציאל הגלום בכל דפדפן.

שינוי באופן אוטומטי של תכונות שמתאימות לדפדפן ספציפי

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