עבור אל תוכן

מדריך JavaScript.



  • אנא התחבר בכדי להגיב
2 תגובות לנושא זה

#1
 Bing

Bing

    Bing- יותר טוב מגוגל.. ;)

  •  חברים רשומים
  • 536 הודעות
    • מונה תודות: 14 תודות
13
רגיל
פרק 1| לפני שמתחילים.

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


להכין למדריך:

  • Notepad++- תוכנה חינמית ונוחה לכתיבת קוד, במקרה שלנו JS.
  • Google Chrome- נוח מאוד לתכנות JS.
  • ידע בשפת התגים HTML.

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


הסבר על השפה:

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

את הקוד של JS שמים בתג script בקובץ הHTML (ניתן לכתוב קוד על אותו קובץ ו/או לקשר לקובץ חיצוני עם הסיומת "name.js").


הערות קוד:

כדי להוסיף הערות על הקוד נכתוב // ואז כל השורה תהיה הערה או /**/ וכל מה שבאמצע יהיה הערה.

ממליץ לכתוב הערות כדי לדעת בדיוק מה כל קטע קוד עושה ולמה (בעיקר אם לא רק אתם עובדים על הפרויקט).


פרק 2| משתנים ואופרטורים.

מהכותרת בטח הבנתם על מה אני עומד ללמד, אך אני מאמין שחלקכם שאל את עצמו "מה זה בכלל?"- בשביל זה אני כאן. הנה מתחילים :)


משתנים:

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

  • boolean- מכיל true (אמת) או false (שקר).
  • integer- מכיל מספר שלם (ללא ספרות אחרי הנקודה).
  • double- מכיל מספר שלם או לא שלם (עם ספרות אחרי הנקודה).
  • char- מכיל תו אחד בכל שפה.
  • string- מכיל טקסט שלם בכל שפה.
  • date- מכיל תאריך, שעה, אזור זמן וכו'.
  • []- מסמן על מערך. ניתן לעשות מערך של כל דבר וכשמגדירים אות שמים סימן זה.

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

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

אופרטורים:

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

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

  • "+"- מוסיף ערך לערך. אפשר להשתמש בזה כפעולת חשבון- פלוס- או כצירוף של string/char לעוד string/char- מחזיר string.
  • "-"- מוריד ערך מערך- פועל על משתנים שמכילים מספר- מחזיר מספר.
  • "/"- מחלק ערך בערך- פועל על משתנים שמכילים מספר- מחזיר מספר.
  • "*"- מכפיל ערך בערך- פועל על משתנים שמכילים מספר- מחזיר מספר.
  • "%"- מחלק ערך בערך ומחזיר שארית- פועל על משתנים שמכילים מספר- מחזיר מספר.
  • "++"- מקבל מספר ומחזיר אותו בתוספת אחד.
  • "--"- מקבל מספר ומחזיר אותו  פחות אחד.
  • "=="- מקבל שני ערכים ובודק אם הם שווים אחד לשני- מחזיר boolean.
  • "!="- מקבל שני ערכים ובודק אם הם לא שווים אחד לשני- מחזיר boolean.
  • "===" מקבל שני ערכים ובודק אם הסוג שלהם הוא אותו סוג- מחזיר boolean.
  • "<=", ">="- מקבל שני פרמטרים ובודק אם התנאי נכון (גדול שווה או קטן שווה)- מחזיר boolean.
  • "<", ">"- מקבל שני פרמטרים ובודק אם התנאי נכון (גדול או קטן)- מחזיר boolean.

לא הבנתם הכל? לא נורא, לא ציפתי שתבינו דברים כאלו בלי להשתמש בהם. אל דאגה- במדריכים הבאים אתם תבינו את זה טוב יותר.


פרק 3| הודעות קופצות.

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


סוגי הודעות קופצות:

  • alert- הודעה קופצת שלא מחזירה כלום, סתם מקפיצה מידע.
  • confirm- מקפיץ שאלה כמו "האם אתה בטוח?" ומחזיר boolean לפי התשובה.
  • promp- מקבל שני פרמטים- שאלה וערך ברירת מחדל. התשובה זה מה שחוזר מתיבת הטקסט שקפצה.

איך להריץ:

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



פרק 4| לולאות.

בואו נאמר שאנחנו רוצים להקפיץ 4 פעמים את הודעה הודעה קופצת, איך נעשה זאת בצורה הקלה ביותר- לולאה.

ישנם שני סוגי לולאות בjs- לולאת for ולולאת while.


for:

לולאת for מקבל 3 פרמטרים- משתנה שישתנה בכל סיבוב + תנאי + מה לעשות כל פעם שסיבוב מתחיל.

בואו נכתוב לולאה שתקפיץ 4 פעמים alert פשוט + מספר הalert-

for (var i = 0; i < 4; i++)

{

alert(‘number alert = ‘ + i);

}


while:

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



פרק 5| פונקציות.

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

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


איך כותבים:

פונקציה כותבים בצורה כזו:

funcion name()
{

}

במידה והפונקציה צריכה לקבל פרמטרים נכתוב זאת כך:

funcion name(parameter, parameteTow)
{

}
כדי להפעיל פונקציה כותבים את השם של + () ואם היא צריכה לקבל פרמטרים אז בסוגריים שמים את הפרמטרים.


פרק 6| document.


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


קריאה לדברים:

הנה הinput שלו שאנו רוצים לקרוא לו. שמתי לו class וid ואראה לכם איך לקרוא לו בשני הדרכים.

<input type=”text” id=”input” class=”input”/>
document.getElementById('input');
document.getElementsByClassName('input');

בראשון מה שיבוא זה הinput בגלל הId שלו. בשני יחזור מערך בגלל שקראנו לפי class וזה לא מוגבל לאחד.

ניתן לקרוא גם לפי tagName וName. בשניהם יחזור מערך (שוב, מאותה סיבה).

כדי לקרוא לhead או לbody לא נצטרך לקרוא לפי tagName או כל דבר אחר, אלא יספיק לנו קוד כזה:

document.head;
document.body;


שינוי תוכן:

כדי לשנות את התוכן של הדברים שקראנו נשתמש בtextContact או בvalue, תלוי בסוג של האלמנט.

value במקרה של משהו שהמשתמש יכול לשנות, כל השאר בtextContent.


יצירת אלמנט:

כדי ליצור אלמנט כלשהו (div/span וכו') נשתמש גם בdocument:

document.createElement(‘input’);

קוד זה ייצור לנו input. אם נרצה להוסיף לו Attribute נשתמש בפונקציה createAttribute שמקבלת 2 פרמטרים:

  • שם הattribute
  • מה שרוצים להכניס לתוכו.

שינוי CSS:

ניתן גם לשנות CSS של element בצורה כזו:

document.createElement(‘input’).style.textAlign = ‘center’;

אז קודם כל אקדים ואומר שבמקרה שיש מקף בסוג של הCSS שאתם רוצים לשנו מוחקים את המקף ועושים את האות הראשונה במילה השנייה גדולה (כך גם במקרים של יותר מילים).


גישה לכתובת:

גם לכתובת נוכל לגשת דרך הdocument:

document.location;

זה מחזיר object שממנו אפשר לקחת כמה דברים. לדוג' אני יקח את הדומיין:

document.location.host;

דוג’ אחרונה: אני ייקח עכשיו את הפרמטרים (כל מה שאחרי ה?)-

document.location.search;

דרך הconsole בGoogle Chrome תוכלו לקבל השלמה אוטומטית ולראות מה עוד אפשר לקחת.



פרק 7| IF וELSE.

מילים אלו הם בעצם פונקציות מוכנות בJS. הפונקציה if מקבלת boolaen (או שאלה שמחזירה boolean) וכל מה שנמצא בבלוק שאחריה ייעשה רק במידה וחזר true מהשאלה. דוג':

var a = 10;
if (a == 10)
{
a = 11;
}

במקרה כזה בסוף הקוד a יהיה שווה 11. במידה ואתם לא יודעים מה זה "==" אתם מוזמנים ללכת לפרק של האופרטורים.
else זוהי פונקציה שהקוד שלה יבוצע רק אם הקוד של הif לא בוצע. דוג':

var a = 10;
if (a == 0)
{
a = 11;
}
else
{
a = 9;
}

במקרה כזה a יהיה שווה 9. אני אדגיש שאין חובה לעשות שימוש בelse אחרי כל if.

יש גם את פונקציה שנקראת else if, פונקציה היא כמו else וif ביחד. ז"T שאם לא נכנסו לתנאי הקודם הוא יבדוק את התנאי שתשים כאן ואם זה נכון הוא יבצע. דוג':

var a = 10;
if (a == 0)
{
a = 11;
}
else if (a == 10)
{
a = 0;
}
else
{
a = 9;
}

במקרה כזה a יהיה שווה 0.

במידה והבלוק קוד בתוך אחד מאלו נכנס בשורה אחת לא חייב לפתוח אותו עם "{}" אלא מספיק לעשות לשורה tab אחד יותר (tab עושה הזחה פנימה). דוג':

var a = 10;
if (a == 0)
a = 11;
else if (a == 10)
a = 0;
else
a = 9;

פרק 8| יצירת משחק זיכרון.

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


תכנון:

לפני שמתחילים לתכנת צריך לחשוב מה צריך בשביל הפרויקט. במקרה שלנו:

  • תיבת טקסט לכתיבת מספר הקלפים וכפתור "התחל לשחק".
  • פונקציה שתבדוק אם המספר אינו מספר אי-זוגי ותיצור את הקלפים + תשמור בצורה רנדומלית על כל קלף מספר שהמשתמש לא יוכל לראות ושיהיו 2 קלפים כאלו.
  • פונקציה שמראה מספר של קלף שנבחר לזמן מסוים ו/או בודקת הקלפים שנבחרו תואמים.

יצירת הHTML והCSS:

עכשיו תיצור HTML עם מה שצריך (ראה תכנון מס' 1) וCSS נחמד בשביל הקלפים.


כתיבת הקוד:

עכשיו זו הפעם הראשונה שאנחנו נשתמש בjQuery. ספרייה זו (jQuery) באה להפוך את החיים לקלים יותר. אני ישתדל להסביר את עצמי בכל פונקציה שאני ישתמש, אך אם לא הבנתם משהו מוזמנים לשאול במייל leibale1998@gmail.com


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

ואז אני נכנס ללולאת for שרצה לפי מה שהפונקציה קיבלה כשהפעילו אותה (ניגע בפונקציה זו אח"כ).

בתוך הלולאה יצרתי משתנה שנקרא random שמשתמש בMath.random() שמחזיר מספר בין 0 ל-1 הכפלתי במספר הקלפים כדי שייצאו לי מספרים מ0 עד מספר הקלפים וחילקתי ב2 (כי כל מספר הוא ל2 קלפים) והשתמשתי בtoFixed שמקבל מספר ומעגל את המספר שהוא קיבל ום לו עד המספר ששלחת לו אחרי הנקודה.

אח"כ בדקתי בobject שיצרנו מקודם (valueCards) אם המספר הזה עוד לא נספר או שהוא נספר והוא לא גדול מ2 וש המספר הרנדומלי לא יצא 0 (אני לא רוצה שיהיה קלף 0, זה יהיה קלף מיותר). אם זה נכון אז אני יוצר כאן קלף בjQuery- אבל אני יעצור כאן ויסביר על הפונקציות בהם השתמשתי:

$('<input>')

יוצר לי element מסוג input

prop('type', 'button')

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

addClass('Card')

פשוטו כמשמעו- מוסיף לו class.

data('number', random)

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

click(TestCradFunction)

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

appendTo('#Cards')

append זה מוסיף בסוף. appendTo זה תוסיף ל*. אני נתתי לו ID של div שאני שמתי בעמוד. שימו לו מה שאתם רוצים מבחינתי (רק שיהיה אמיתי.. תיצרו div שיכיל את כל הקלפים).

אוקי, נחזור לנושא.. :)

בelse (במקרה והif החזיר false) הורדתי לi אחד כדי שהוא לא ייצא מהפונקציה לפני שהוא יסיים את כל הקלפים.


עכשיו נעבור לפונקציה TestCradFunction.

בהתחלה אני בודק אם הקלף שלחצו עליו (this זה הקלף שלחצו עליו) הvalue שלו לא שווה ריק (כי אם זה לא שווה ריק זה אומר שהקלף הזה כבר פתוח ואין אפשרות ללחוץ עליו שוב).

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

במידה וזה נכון אני שם בcardsSelect את המספר שנבחר ולאחר מכן מוסיף לקלף שנלחץ את המספר שלו מהdata ושם לו class של CardActive.

במידה וזה לא נכנס לif הוא בודק אם יש קלף אחד ב cardsSelect ואם זה נכון הוא שם שם במקום השני (מערכים מתחילים מ0) את המספר של זה ושם בקלף את המספר. עכשיו אני בודק אם הקלפים שנבחרו הם עם אותו מספר. במידה וזה נכון אני מוחק משני הקלפים את הclass של הקלפים- Card ועושה להם העלמות חמוד כזו (fadeOut) שמקבלת מספר של זמן כמה זמן האנימציה תפעל (במילי שניות).

אח"כ אני עושה setTimeout (זה מקבל פונקציה ומספר של מילי שניות עוד כמה זמן הפונקציה תפעל) בתוכה אני עושה each (זה כמו for רק שבפנים כל פעם this שווה מה שצריך) ומוחק מהקלפים שנבחרו את הclass של קלפים שנבחרו- CardActive ומוחק מהם את הvalue. לאחר מכן אני מאפס את cardsSelect.


עכשיו נעבור לפונקציה האחרונה- הפונקציה NewGame.

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

אז קודם כל אני מכניס למשתנה numberCrads את מה שהוזן בinput ואז עושה את הבדיקות. במידה והבדיקות נכשלו אני מקפיץ alert שכותב את הסיבה. אם זה לא אז אני הולך לפונקציה SetCardes עם המספר.


עכשיו אני רק יגיד מה צריך לשים בHTML שבונים בהתחלה:

צריך רק להכניס לכפתור שפעולתו היא להתחיל את המשחק attrebute של קליק (onclick) ובפנים לשים את הפונקציה NewGame.

הנה קוד המלא שלי:


<html>
<head>
<title>זיכרון</title>
<script src="http://code.jquery.c...1.js"></script>
<script type="text/javascript">
var cardsSelect = [];
function SetCardes(numberCrads)
{
$('#Cards').hide(300);
$('#Cards').html('');
var TestCradFunction = function() {
if ($(this).val() == '')
{
if (cardsSelect.length == 0)
{
cardsSelect[0] = $(this).data().number;
$(this).val($(this).data().number).addClass('CardActive');
}
else if (cardsSelect.length == 1)
{
cardsSelect[1] = $(this).data().number;
$(this).val($(this).data().number).addClass('CardActive');
if (cardsSelect[0] == cardsSelect[1])
$('.CardActive').removeClass('Card').fadeOut(500);

setTimeout(function() {
$('.CardActive').each(function() {
$(this).removeClass('CardActive').val('');
});
cardsSelect = [];
}, 500);
}
}
if ($('#Cards').html() == '')
$('#Cards').text('כל הכבוד :)');
};

var valueCards = {};
for (var i = 0; i < numberCrads; i++)
{
var random = (Math.random() * numberCrads / 2).toFixed(0);
if ((!valueCards[random] || valueCards[random] < 2) && random != '0')
{
var $NewCard = $('<input>').prop('type', 'button').addClass('Card').data('number', random).click(TestCradFunction).appendTo('#Cards');
valueCards[random] == null ? valueCards[random] = 1 : valueCards[random]++;
}
else
i--;
}
$('#Cards').show(500);
}

function NewGame()
{
var numberCrads = Number($('#NumberCrads').val());
if (isNaN(numberCrads))
window.alert('אנא הקלד מספר');
else if (numberCrads % 2 != 0)
window.alert('אנא הקלד מספר זוגי');
else if (numberCrads < 4)
window.alert('אנא הזן מספר שגדול או שווה ל4');
else
SetCardes(numberCrads);
}
</script>
<style type="text/css">
body {
direction: rtl;
font-family: arial;
}

.Card {
background-color: #eeeeee;
transition: 0.2s;
color: #333333;
border: 1px solid #cccccc;
display: inline-block;
width: 30px;
height: 30px;
text-align: center;
vertical-align: middle;
outline: 0 !important;
margin: 5px;
font-size: 10px;
}

.Card:hover {
background-color: #FEF9DB;
}

.CardActive {
background-color: #DAECF1 !important;
border: 1px solid #aaaaaa;
display: inline-block;
width: 30px;
height: 30px;
text-align: center;
vertical-align: middle;
outline: 0 !important;
margin: 5px;
font-size: 12px;
}
</style>
</head>
<body>
<div id="Cards"></div>
<input type="text" id="NumberCrads"/>
<input type="button" onclick="NewGame()" value="שחק!"/>
</body>
</html>

אם אתם מעוניינים תעתיקו את הקוד שלי לnotepad++ ותוכלו לראות אותו בצורה נורמלית.

מקווה שלמדתם משהו.

שיהיה לכם בהצלחה בהמשך הדרך :)


שמו לב: המדריך מאוחסן על Google Drive ובמידה ויהיו עדכונים הם יופיעו שם (ובלי נדר גם פה).

לכניסה לתיקיה לחץ כאן.


נערך על-ידי Elementary, 18.01.2014 - 23:36 PM.


#2
 JonSnow

JonSnow

    Game Of Thrones

  •  מפקחים
  • 2607 הודעות
    • מונה תודות: 447 תודות
327
מעולה
אם החכם הקטן כאן היה שם לב שזה צריך להיות בפורום מדריכים ולא בפורום הנ"ל.  היית שם לב שיש תיוג מתאים.

אחלה מדריך
תודה על הפרסום:)

#3
 Oxygen

Oxygen

    Legendary user

  •  חברים בכירים
  • 788 הודעות
    • מונה תודות: 63 תודות
38
בינוני
  • מיקום: תל אביב
מדריך מצוין!
תודה רבה!!





תויגו גם עם אחת או יותר ממילות המפתח הללו: מדריך כללי

0 משתמשים קוראים נושא זה

0 משתמשים, 0 אורחים, 0 משתמשים אנונימיים