Basic (or advance) Javascript – 3

יום ראשון, פברואר 15, 2015

בהמשך לפוסטים הבסיסיים על JS שלפעמים זה נכנס לעולם ה – Advance JS, הפעם נסתכל על פונקציות כאובייקטים.   כולנו יודעים שהגדרת אוביקט בסיסי עם מאפיין, ניתן לכתוב בצורה הבאה: Code Snippet var obj = {};obj.prop = "some value";   אבל האם קטע הקוד הבא גם כן יעבוד ? Code Snippet var fn = function () {};fn.prop = "some value";   מסתבר שכן, ברמה הכי בסיסית כל פונקציה היא אובייקט ב – JS, נוכל לשכלל את זה לשמירת מידע על המידע שחוזר מפונקציה במטמון של עצמה, בצרה הבאה: Code Snippet function getElements(name) {   ...
אין תגובות

bootstrap-combobox-angular

יום שני, פברואר 2, 2015

בפוסט בעבר כתבתי על שימוש על שימוש ב – bootstrap-combo, יחד עם אנגולר, בפוסט שם לא רציתי ליצור directive מיוחד, אבל בסופו של דבר החלטתי כן ליצור אותו, ולמעשה הקוד הוא די פשוט. (לינק להורדה) בבואנו ליצור directive שעוטף control כלשהו, עלינו לוודא כמה דברים: בטעינה הראשונית להפוך אותו לפקד המתאים שלנו (לרוב באנגולר נעבוד ב – SPA, כך שלא מתאים לכתוב קוד ב – document.ready). עדכון המודל שלנו כשהפקד משתנה. עדכון הפקד כשהמודל משתנה. במקרה של פקד עם מקור מידע (כמו בדוגמא שלנו – קומבו) צריך גם לשמור על סנכרון הפקד במידה והרשימה השתנתה....
אין תגובות

Basic (or advance) Javascript – 2

יום חמישי, ינואר 1, 2015

בהמשך לפוסטים על Advance JS שאני לא בטוח האם זה Basic או Advance, הפעם אכתוב על שמות לפונקציות. (הרעיון לפוסטים ורוב הדוגמאות מגיעות מכאן)   לכולם די ברור שהקריאה לפונקציה היא לפי השם שלה, וכמובן ניתן לכתוב קוד רקורסיבי, לדוגמא חישוב הפקטור של מספר יכול להיראות כך: Code Snippet function factorial(num) {    // If the number is less than 0, reject it.    if (num < 0) {        return -1;    }        // If the number is 0, its factorial is 1.    else if (num == 0) {        return 1;    }        // Otherwise, call this recursive procedure again.   ...
תגובה אחת

Basic (or advance) Javascript – 1

יום שלישי, דצמבר 30, 2014

לאחרונה העברתי שיעור על Advance Javascript, במהלך השיעור, לא הייתי סגור על עצמי האם הכותרת של Advance JS היא נכונה, או שבעצם אני מלמד Basic JS ופשוט אנשים בדרך כלל לא יודעים את החומר הנ”ל. אז אני אכתוב על הנושא – מדובר בפוסטים קצרצרים אשר יאירו נקודות שונות בנושא. הגדרת פונקציות הדבר הבסיסי ביותר ב – JS היא הגדרת פונקציות, ישנם שלושה דרכים להגדרת פונקציות: Code Snippet function MyFunction1() {    return "MyFunction 1";}var MyFunction2 = function () {    return "MyFunction 2";};window.MyFunction3 = function () {    return "MyFunction 3";}; מה ההבדל ביניהם, והאם הסדר משנה, כלומר האם נוכל...
אין תגובות

AngularJS – todolist

יום שני, דצמבר 22, 2014

בפוסט זה נלמד מספר דברים בסייסים על עבודה עם אנגולר,  הפוסט יציג דוגמה לניהול רשימת משימות (todo list) עם היכולות הבאות: רשימת המשימות תגיע ב – ajax מהשרת. כל משימה יש לה טקסט והאם היא בוצעה. ניתן להוסיף משימות חדשות. ניתן לסמן האם המשימה בוצעה או לא. ניתן להסתיר את המשימות שבוצעו. המשימות יהיו מסודרים ברשימה ממויינת. הדמו עצמו נלקח חלקית מהאתר של angular וברובו מתוך הספר (המדהים) Pro AngularJS. חשוב לציין העיצוב בדוגמאות הבאות מבוססות Bootstrap, ואני לא מסביר אותם במהלך הפוסט. ניתן להוריד את הדוגמה המלאה מכאן, (צד השרת מבוסס ASP.NET...
4 תגובות

הגדרת גלילה פנימית, והתאמה בזמן שינוי גודל המסך

יום שני, דצמבר 8, 2014

לפעמים בדפי ה – html שלנו, יש לנו חלק עליון שיכול להיות מורכב מכותרת או תפריט, תוכן העמוד, וטקסט כלשהו בתחתית, במידה והתוכן יהיה מספיק גדול, זה כמובן יגרום לגלילה, במצבים מסויימים ייתכן שנרצה להגדיר גלילה פנימית לתוכן, כך שהכותרת או התפריט והטקסט בתחתית המסך ייראו תמיד. הבעייה אינה בלהגדיר זאת, אלא בלתת את הגובה לתוכן עצמו, כלומר כדי לעשות זאת יש לעטוף את התוכן ב – div כלשהו שיקבל ערך קבוע עבור מאפיין height והגדרת scroll, הבעייה שגובה האלמנט אמור להשתנות לפי גובה המסך. (קוד המקור להורדה) לדוגמה במידה וה – html שלנו נראה כך: Code...
אין תגובות

HTML + JS Basic demos

יום ראשון, נובמבר 23, 2014

בהמשך לפוסטים אודות קוד למתחילים בעולם ה – WEB, הפעם נרצה לכתוב משהו דומה לפעם הקודמת. נרצה להציג תמונה על המסך, ולמשתמש יהיה שני תיבות טקסט, שהוא יוכל לקבוע את המיקום של התמונה על המסך, כמו כן בדיוק כמו בפעם הקודמת, יהיה לחצן של מיקום רנדומלי (רק שהפעם נוודא שאנחנו לא חורגים מגודל המסך) וכמובן לחצן Start שבכל X זמן, תקבל התמונה מיקום רנדומלי אחר, והפעם גם נוסיף Stop כדי שה – interval ידע לעצור. ראשית, נסתכל על קוד ה – html + css שלנו. Code Snippet <head>    <meta charset="utf-8" />    <title></title>    <style>        #myImg {            position: absolute;           ...
אין תגובות

שליחת אובייקטים עם תתי אובייקטים ב – ajax לשרת

יום שבת, מרץ 22, 2014

כדי לשלוח אובייקט מצד לקוח לצד שרת ב – ajax, בעזרת jQuery זה די פשוט, בהנחה שיש לנו אובייקט בשם Person בצד השרת ו – action שמקבל אותו – הקוד ייראה ככה: Code Snippet public class Person{    public int Id { get; set; }    public string Name { get; set; }    public int Age { get; set; }} Code Snippet public ActionResult Update(Person model){} נוכל בצד לקוח לפנות בעזרת jQuery לשרת ולשלוח את המידע כך: Code Snippet var obj = {    id: 1,    name: 'shlomo',    age:29};$.post('/home/save', obj);   אבל במידה שהאוביקט בצד שרת...
תגיות: , , , , , ,
תגובה אחת

break row in html tooltip (title attribute

יום שבת, ינואר 25, 2014

לאחרונה הייתי צריך להציג tooltip על div כלשהו ב – html, הצגת tooltip הינה באמצעות המאפיין title Code Snippet <div title="Shlomo Goldberg">    ...<br />    ...<br />    ...<br />    ...<br />    ...<br />    ...<br />    ...<br /></div> זה ייתן את התוצאה הבאה: הדרישה של הלקוח הייתה, שהשם והמשפחה יופיע כל אחד בשורה נפרדת, ניסיון להוסיף r\n\ רק גרם להופעת התווים הללו ב – tooltip, לאחר ניסויים מעטים, התברר שמקוד javascript ניתן לעשות זאת. Code Snippet <script>    onload = function () {        document.getElementById('myDiv').setAttribute('title', 'Shlomo\r\nGoldberg');    }</script>   זה אכן עבד וגרם לירידת השורה המבוקשת ב –...
תגיות: , , ,
4 תגובות

jQuery events and singelton

יום שישי, דצמבר 20, 2013

אחד הדברים ש – jQuery מאפשר, זה להגדיר בקלות אירועים לאובייקטים מותאמים אישית. לדוגמא, נניח שיש לנו אובייקטי שתפקידו בחיים הוא לייצר ריבועים עלהמסך, (לדוגמא בזמן קליק) ונרצה בנוסף להרים אירוע שנוצר ריבוע חדש למי שיאזין לו.   Code Snippet <style>    .rect {        position: absolute;        background-color: silver;    }</style><script src="Scripts/jquery-1.8.2.js"></script><script>    var RectManager = function () {        $(document).click(function (e) {            var rect = new Rect(e.pageX, e.pageY, 100, 100);            rect.append();            $(RectManager).trigger('rectCreatedEvent', rect);        });    }    var Rect = function (x, y, w, h) {        var self = this;        self.x = x;        self.y = y;        self.width = w;        self.height = h;       ...
תגיות: , , ,
2 תגובות