עמוד 1 מתוך 2 12 אחרוןאחרון
מציג תוצאות 1 עד 10 מתוך סך הכל של 17

אשכול: קורס|למתחילי JavaScript (הוא קצת ארוך)...

  1. #1

    Post קורס|למתחילי JavaScript (הוא קצת ארוך)...

    אם באמת הקורס לא כזה ארוך, את כל המקום טפס הטקסט...

    קורס שפת JavaScript


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

    הערה: מומלץ לדעת את הבסיס של HTML.
    הערה: מומלץ לגעת אלגיברה.
    הערה: /=חילוק *=כפל
    הערה: כותבים את קוד JavaScript ב-Notepad (פנקס ראשימות) ושומרים את זה כקובץHTML.

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

    (כדי לראות את התמונה צריך ללחוץ עליה וההערה בתחילת התמונה).^
    אתם צריכים ללחוץ על כפטור הימני באחבר על הערה ואז ללחוץ על Allow Blocked Content אם תופיע לכם עוד הודעה מהמחשב אז תלחצו על yes.
    [לחלקכם יכולה לא להופיע ההודעה הראשונה והשניה]!

    נתחיל!
    הקדמה ל-JavaScript:


    כדי להבין את שפת JavaScript, יש להבין את הסיבה בה אנו מפתחים-סביבת HTTP.
    בסביבת עבודה זו ישנם שרתי HTTP ולכוחות. השרתים הם מחשבים אשר מחוברים 24 שאות ביממה לרשת אינטרנט וממתינים להעתיק שירות לקוחות הפונים אליהם. כאשר אנו מקלידים בדפדפן את הטקסט הזה:http://www.travian.co.il, המחשב שלנו פונה כלקוח אל שרת travian ומבקש ממנו בקשת HTTP. הבקשה היא בקשת GET כלומר, המחשב שלנו, הלקוח, מבקש מהשרת לקבל דבר מה.

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

    (כדי להגדיל את התמונה צריך ללחוץ אליה).



    מסמך הטקסט המגיע מן השרת הוא למעשה מסמך HTML.

    הודעת הקפצה ושורות קוד ראשיות:

    כפי שידוע לכם ב-HTML כל אות/מספר שמופיע מחוץ לסוגריים '<>' נמצע על המסך.
    שאלה: אז איך כותבים קוד JavaScript בלי שיופיע על המסך?
    תשובה: כדי להמנע מהצגת קוד JavaScript, יש לדווח לדפדפן על מעבר מ-HTML ל-JavaScript.

    אם אתה כותב קוד של JavaScript אז צריך לכתוב את התגיות הבאות ובתוכם לכתוב את הקוד של JavaScript:
    קוד HTML:
    <script language="javascript">
    כאן יכתב הקוד של JavaScript
    </script>
    אם אתה כותב קוד VBScript אז צריך לכתוב את התגיות הבאות ובתוכם קוד VBScript:
    קוד HTML:
    <script language="vbscript">
    כאן יכתב קוד של VBScript
    </scruipt>

    הודעת הקפצה:

    העתיקו את הקוד הבה ושמרו אותו כמסמך HTML.
    קוד HTML:
    <script language="javascript">
    alert("Welcome to travian!")
    </script>
    בדוגמה זו השתמשנו באחת השיטות הפפולריות של השפה, אשר "מקפיצה" הודעה למשתמש.
    (יש לזכור שבגרסאות מסוימות של Netscape עלולות להציג סימני שאלה במקום טקסט).

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

    לבסוף צריך לצאת לכם הודעה כזאת:

    (כדי להגדיל את התמונה צריך ללחוץ עליה).

    שאלה: היכן שותלים את קוד JavaScript?
    תשובה:בעיקרון, ניתן לשתול את קוד JavaScript בכל מקום במסמך HTML.
    אני ממליץ לכם לכתוב אותו לפני התגית <HTML>.
    אבל בקורס הזה לא תצתרכו לערבב אותו עם קוד הבסיס של HTML.

    הערות ל-JavaScript:

    • שפת JavaScript רגישה לאותיות גדולות ולאותיות קטנות.

    • בדרך כלל, בכתיבת הקוד דרושות הערות. את ההערות ניתן לכתוב בשני דרכים:


    קוד HTML:
    /*This is how you create a multiple row remark-
    לוכסן וכוכבית פותחים את הערה מרובת שורות.
    וכוכבית ולוחסן סוגרים אותה.

    הדרך השניה היא:
    קוד HTML:
    //This is how you create a multiple row remark-
    שני לוחסנים יוצרים הערה בת שורה אחת.

  2. #2

    ברירת מחדל המשך-חלק 2

    מתחילים לכתוב!


    אובייקט המסמך - Document


    היגיע הזמן שאני יכיר לכם את האובייקט JavaScript הראשון שלכם - אובייקט המסמך, Document.
    אובייקט זה מתאר את מסמך HTML ולכן הוא מכיל את תכונות המסך, בגוון צבע הרקע. תוכנה צבע הרקע תבוטא ב-JavaScript , כך: document.bgColor (מסמך.צבע.רקע). שימו לב לאות C הגדולה!

    ניתן להשתמש בתוכנה בשתי דרכים:
    בדיקת ערך התוכנה:
    קוד HTML:
    <body bgcolor=blue>
    <script language="javascript">
    alert("document.bgColor")
    </script>
    קביעת ערך התוכנה:
    קוד HTML:
    <script language="javascript">
    documant.bgColor="red"
    </script>
    בדרך הראשונה ביקשנו לקבל את ערך התוכנה bgColor ולכן קבענו את ערך צבע הרקע בתגית <body> של HTML. לאחר מכן, השתמשנו בשיתת alert() להצגת התוכנה. שימו לב כי התוכנה נמצאת בין הסוגריים ללא גרשיים!

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

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

    שימוש בשיטה write():


    האובייקט document מכיל שיטה ליצירת מסמך HTML ושמה הוא write(). בעזרתה נוכל לחולל מסמך בדרך שמוצגת בדוגמה הבאה:
    קוד HTML:
    <script language="javascript">
    document.write("<body bgcolor=red text=yellow><h1>Hello")
    </script>
    ניתן אף להציג ערכי ביטואיים, או תוכנות, ללא שימוש בגרשיים. נעשה זאת כפי שמוצג בדוגמה הבאה:
    קוד HTML:
    <body bgcolor=red>
    <script language="javascript">
    document.wite(document.bgColor)
    </script>
    נסו להריץ את הדוגמאות במחשב!

    שרשור


    כאשר רוצים להעריץ שני איברים או יותר ב-JavaScript, כמו למשל מחרוזת טקסט ותכונות, אנו משתמשים בסימן השרשור '+'.
    קוד HTML:
    body bgcolor=red>
    <script language="javascript">
    documenr.write("The value of the background color is " + document.bgColor)
    </script>
    בדוגמה זו שרשרנואת מחרוזת הטקסט "The value of the background color is " למאפיין bgColor של אובייקט document. נסו להעריץ במחשב את הדוגמה.

    משתנים:

    משתנים (variables) הם תנאי זכרון השומרים ארכים. לכל משתנה יש שם המאפשר גישה אליו. לדוגמה אפשר לצור משתנה בשם kotik ולאכסן בתוכו את הערך 12. לאחר מכן אפשר לבצע חישוב ארתמטי המתחייס למשתנה זה. לדוגמה: kotik + 5 התוצאה תהיה 17, מכיוון שערכו של kotik בתחילת החישוב היה 12.

    שמות משתנים


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

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

    יצירת משתנה:


    התחביר ליצירת משתנה הוא ver dog=12. המילה השומורה var יוצרת את המשתנה ולאחריה יש לכתוב את שם המשתנה. הצבת ערך משתנה נעשית בעזרת סימן = אך אין צורך להציב לו ערך אם לא דרוש כיוון שניתן להגדיר משתנה ללא ערך.
    קוד HTML:
    <script lamguage="javascript">
    var shishlik=4
    document.write("My cat's age is " + shishlik)
    </script>
    ערכי משתנים


    משתנים ב-JavaScript יכולים לקבל מספר רב של סוגי ערכים. משתנים אלה נקראים משתנים חופשיים (free variables) לפניכם פירוט של מישתנים מותרים:
    • מחרוזת טקסט - בספר תווים בין גרשיים כמו "hello". ניתן להעניק למשתנה ערך זה על ידי כתיבת: var a="hello".


    • ערך מספרי - מספר שהוא ערך חיובי או שללי עד 1 ו-308 אפסים אחריו! לאחר מכן, מתייחסת JavaScript למספרים Infinity (אינסוף).


    • ערך בוליאני: משתנה יכול לקבל ערך אמת או ערך שקר כלומר var a=true או var a=false.


    • ערך ריק - אם לא מצהירים על ערך של משתנה , הוא מקבל ערך ריק. כלומר null. לא ניתן לבצע פעולות ארתימטיות על ערך null.

  3. #3

    ברירת מחדל המשך חלק 3

    אנו מתקדמים!
    לולאות

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

    לולאה While
    התחביר לכתיבת לולאה while הוא:
    קוד HTML:
    while(condition)
    {
    JavaScript statement
    }
    כלומר, כל עוד (while) מתבצע התנאי (condition) שרשום בין הסוגריים, יתבצעו הוראות JavaScript שכתובות בין זוג הסוגריים המסולסלים {}. לאחר בייצוע ההוראות ייבדק התנאי שוב. אם התנאי ימשיך להתקיים, יבוצעו ההוראות שבין הסוגריים המסולסלים שוב ושוב ייבדק התנאי.
    הנה דוגמה:
    קוד HTML:
    <script language="javascript">
    var a =1
    while(a<5)
     {
      document.write(a + "<br>")
     }
    </script>
    הסבר:
    בדוגמה זו, נוצר משתנה בשם a שערכו המספרי הוא 1. כל עוד ערכו של a כטן מ-5, ערך זה יוצג על המסך. הלולאה שבדוגמה זו תפעל לנצח, כי בכל פעם שהתנאי ייבדק הוא יתקיים (ערכו 'אמת') וההוראות יתבצעו שוב.
    אם רוצים להגביל את מספר הריצות של הלולאה, יש לדאוג שהתנאי יחדל להתקיים. נעשה זאת על ידי שינוי ערכו של a שיגדל מעבר ל-5.
    דוגמה 1 V
    קוד HTML:
    <script language="javascript">
    var a =1
    while(a<5)
     {
      document.write(a + "<br>")
      a=a+1
     }
    </script>
    הסבר:
    בדוגמה זו הוספנו בתוך תכום ריצת הלולאה, שבין סוגריים מסולסלים, ביטוי המגדיל את ערכו של a ב-1. לפיכך, הלולאה תפעל 4 פעמים בלבד, כי בכל ריצה יגדל ערכו של a וכשערך זה יגיע ל-5 התנאי יחדל להתקיים.

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

    אופרטורים להשבעת ערכים:

    == בדיקת שוויון
    =! בדיקת אי שוויון
    =< גדול או שווה
    => קטן או שווה
    < גדול מ-
    > קטן מ-
    % מודלוס, המציין שארית של פעולת חילוק (לדוגמה 50%4=5)

    אופרטורים לוגיים:

    && וגם (צירוף של תנאים: כל התנאים צריכים להתקיים
    || או (לפחות תנאי אחד צריך להתקיים).

    ניתן לבדוק קיום של מספר תנאים בדרך זו:
    קוד HTML:
    while (a>1 && a<10)
    כלומר, כל עוד a גדול מ-1 וגם a קטן מ-10.

    הצבת ערך במשתנה


    בדוגמה 1 השתמשנו בביטוי a=a+1 כדי להגדיל את ערכו של a באחד. ניתן לבצע כל פעולה ארתימטית פשוטה בדרך זו, כמו a=a*19 או a=a/2.
    לדוגמה:
    קוד HTML:
    <script language="javascript">
    var a=4
    var a_counter=0
    while (a<=100)
      {
       document.write(a + ",")
       a=a+4
       a_counter=a_counter+1
      }
    document.write("<hr>There are " + a_counter + " numbers that can be divided by 4 between 1 & 100")
    </script>
    תוכנית זו מציגה את כל הכפולות של 4 בין 1 ל-100, בופרת ומציגע אותן. לשם כך יצרנו שני משתנים: משתנה a מקבל את ערכי הכפולה 4 על ידי הגדלת ערכו ב-4 בכל ריצה של הלולאה, ומשתנה a_counter סופר את המחרוזת מספר פעמים שהלולאה רצה על ידי הגדלת ערכו ב-1 בכל ריצה של הלולאה.

    תנאי הלולאה הוא ש-a לא יעבור בערכו את 100.

    במהלך ריצת הלולאה מוצג ערכו של a המשרשר אל המחרוזת המכילה פסיק, כדי להפריד בין המספרים. כמו כן עולה ערכו של a ב-4 כדי להגיע לכפולה הבאה של 4, ולכן עולה ערכו של a_counter ב-1 כדי לספור את מספר הפעמים שהלולאה רצה. לאחר סיום ריצת הלולאה מודפס קו הפרדה ולאחריו מחרוזת המשלבת את ערכו של a_counter, כדי להציג את מספר הפעמים שהלולאה רצה. הלולאה מציגה את מספר הכפולות של 4 בין 1 ל-100.

    קביעת ערך:

    ניתן לקבוע ערך למשתנה במספר דרכים לדמגמה, במקום לכתוב:
    a_countr=a_counter+1

    אפשר לכתוב:
    a_countr += 1
    וכך גם פעולה ארתימטית אחרת.

    הערה:
    שיטת סימון זו מקובלת בשפות שונות C++ , C ו-Java.

    אפשרות נוספת להצבת ערך היא לדוגמה a++. ערכו של a יעלה ב-1. אפשר גם לכתוב a-- כדי לבטא חיסור של 1 מערך המשתנה a.
    קוד HTML:
    <script language="javascript">
    var a=1
    while(a<5)
     {
      document.write(a++  + "<br>")
     }
    </script>
    הערה:
    אני לא ממליץ לכם לשנות את המספר 5 למיליון.
    המחשב יכול להתקע לכם (מחשב ישן) בדקתי את זה כבר.... המחשב יתקע לכם בגלל המשימה שנתתם לו...

    לולאות מקוננות - לולאה בתוך לולאה


    לעיתים יש צורך לשלב לולאות בתוך לולאות. במצבים כאלה כדאי להקפיד על כתיבה מסודרת.
    הנה דוגמה:
    קוד HTML:
    <script language="javascript">
    for (I=1;I<10;I++)
    {
          for(x=1;x<3;x++)
          {
           document.write(I +" " +x +"<br>")
           }
          document.write("<br>")
     }
    </script>
    משימה:


    עלינו להציג את לוח הכפל של מספרים 1 עד 100. נעשה זאת כמובן ב-10 שורות של 10 מספרים בכל אחת.

    פתרון


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

    1) דרוש משתנה אשר יכיל את ערכי המספרים מ-1 עד 100.
    2) דרושה לולאה אשר תרוץ 10 פעמים ולאחריה תעבור לשורה הבאה (<br>).
    3) דרושה לולאה אשר תדאג שהלולאה הכודמת תפעל 10 פעמים, כדי להציג את הסיפרה עד 100.

    נגדיר את המשתנה שיכיל את הערכים שעשתנו מ-10 עד 100: var mispar=1. כאת, נגדיר את הלולאה המציגה שורה של 10 מספרים ונשתמש במשתנה נוסף, I:
    קוד HTML:
    for (I=1;I<=10;I++)
    {
       document.write(a++ + " ")     הכנסנו מחרוזת ריקה עבור רווח
    }
    document.write("<br>")     לאחר הצגת 10 מספרים תשבר השורה
    (מה שכתוב בעיברית זה הסבר על השורה, לא צריך לכתוב את הקוד הזה)!

    נכניס את הלולאה ואת שבירת השורה ללולאה גדולה שתרוץ בעצמה 10 פעמים.
    קוד HTML:
    <script language="javascript">
    var a=1
    for(x=1;x<=10;x++)
    {
     for (I=1;I<=10;I++)
      {
       document.write(a++ + " ") 
      }
      document.write("<br>")
    }
    </script>
    הכנסת מספרים לטבלת HTML

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

    נמחק את הקוד שעבר ובמקומו נכתוב את הקוד הבה שבו מצורפת טבלת HTML:
    קוד HTML:
    <script language="javascript">
    var a=1
    document.write("<table border=1>")
    for(x=1;x<=10;x++)
    {
      document.write("<tr>")
     for (I=1;I<=10;I++)
      {
       document.write("<td>" + a++ +"</td>") 
      }
      document.write("</tr>")
    }
    document.write("</table>")
    </script>
    לבסוף זה מה שאמור לצאת לך:

    (כדי להגדיל את התמונה צריך ללחוץ עליה).

    עכשיו נמחק את הקוד הקודם ונעתיק את הקוד הבה לסימון באדום כפולות של 7:
    קוד HTML:
    <script language="javascript">
    var a=1
    document.write("<table border=1>")
    for(x=1;x<=10;x++)
    {
     document.write("<tr>")
     for (I=1;I<=10;I++)
      {
        if (a%7==0)
          {
           document.write("<td bgcolor=red>" + a++ +"</td>")
          }
         else
          {
           document.write("<td>" + a++ +"</td>") 
          }
      }
      document.write("</tr>")
    }
    document.write("</table>")
    </script>
    וזה מה שנקבל:




    משימת סיכום!!!
    משימה:
    נבנה מחשבון!

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

    הנה הקוד:
    קוד HTML:
    <script language="javascript">
    
    function calculator()
    {
    this.add=a
    this.subtract=s
    this.multiply=m
    this.divide=d
    }
    
    function a(x,y)
    {
    x*=1
    y*=1
    return x+y
    }
    function s(x,y)
    {
    x*=1
    y*=1
    return x-y
    }
    function m(x,y)
    {
    x*=1
    y*=1
    return x*y
    }
    function d(x,y)
    {
    x*=1
    y*=1
    return x/y
    }
    mooki=new calculator()
    
    </script>
    <form name=formi>
    <input name=x>
    <input type=button name=sign value=?>
    <input name=y>
    =
    <input name=texti>
    <br>
    <input type=button value="+" onclick=document.formi.sign.value="+";document.formi.texti.value=mooki.add(document.formi.x.value,document.formi.y.value)>
    <input type=button value="-" onclick=document.formi.sign.value="-";document.formi.texti.value=mooki.subtract(document.formi.x.value,document.formi.y.value)>
    <input type=button value="*" onclick=document.formi.sign.value="*";document.formi.texti.value=mooki.multiply(document.formi.x.value,document.formi.y.value)>
    <input type=button value="/" onclick=document.formi.sign.value="/";document.formi.texti.value=mooki.divide(document.formi.x.value,document.formi.y.value)>
    </form>
    תהנו עם המחשבון החדש שלכם!

    והינה, סוף הקורס!!!

    -------------------------------------------------
    ת"ב עבדתי על הקורס יומיים שלמים!

  4. #4
    LoSio
    Guest

    ברירת מחדל

    כל הכבוד על ההשקעה !!!
    נערך לאחרונה על ידי LoSio, 05-05-2010 בשעה 19:35

  5. #5

  6. #6
    LoSio
    Guest

    ברירת מחדל

    ציטוט פורסם במקור על ידי kotik צפה בהודעה
    תמחק את המילה זו...
    תודה!
    מחקתי , תודה !

  7. #7

  8. #8

    ברירת מחדל

    ציטוט פורסם במקור על ידי streetfighter צפה בהודעה
    פשש יפה יפה, מזכיר קצת #c...
    תודה!
    אתה צודק, חלק קטן ב-JavaScript זה מ-C++ , C#,C,java...

  9. #9
    gold
    Guest

    ברירת מחדל

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

  10. #10

    ברירת מחדל

    זה לא קורס HTML!
    אתה בכלל יודע מה זה JavaScript???
    זאת הרחבה ל-HTML כמו CSS!!!

    ובמה אני מפריע לך???? זה קורס שונה משלך!
    זה כמו שאני יעשה קורס על וויז'אל בייסיק!
    ואתה רוצה לדעת למה בחרתי דווקאה ב-JavaScript?
    מיפני שלא היה שום מדריך/קורס על JavaScript!

Thread Information

Users Browsing this Thread

ישנם כרגע 1 משתמשים הקוראים באשכול זה. (0 חברים ו1 אורחים)

חוקי משלוח הודעות

  • אתה אינך רשאי לפתוח שרשורים חדשים
  • אתה אינך רשאי לפרסם תגובות
  • אתה אינך רשאי לצרף קבצים
  • אתה אינך רשאי לערוך את הודעותיך
  •