# יום | נושאים |
---|---|
01 | מבוא |
02 | סוגי נתונים |
03 | Booleans, Operators, Date |
04 | Conditionals |
05 | מערכים |
06 | לולאות |
07 | פונקציות |
08 | אוביקטים |
09 | Higher Order Functions |
10 | Sets and Maps |
11 | Destructuring and Spreading |
12 | Regular Expressions |
13 | Console Object Methods |
14 | Error Handling |
15 | Classes |
16 | JSON |
17 | Web Storages |
18 | Promises |
19 | Closure |
20 | Writing Clean Code |
21 | DOM |
22 | Manipulating DOM Object |
23 | Event Listeners |
24 | Mini Project: Solar System |
25 | Mini Project: World Countries Data Visualization 1 |
26 | Mini Project: World Countries Data Visualization 2 |
27 | Mini Project: Portfolio |
28 | Mini Project: Leaderboard |
29 | Mini Project: Animating characters |
30 | Final Projects |
🧡🧡🧡 HAPPY CODING 🧡🧡🧡
Author:
Asabeneh Yetayeh
January, 2020
🇬🇧 English 🇪🇸 Spanish 🇮🇹 Italian 🇷🇺 Russian 🇹🇷 Turkish 🇦🇿 Azerbaijan 🇰🇷 Korean 🇻🇳 Vietnamese 🇵🇱 Polish
- 30 Days Of JavaScript
- 📔 Day 1
- 💻 Day 1: Exercises
מזל טוב על ההחלטה להשתתף ב-30 יום של אתגר תכנות JavaScript. באתגר הזה תלמדו את כל מה שצריך כדי להיות מתכנת JavaScript, ובכלל, את כל הקונספט של תכנות. בסוף האתגר תקבלו תעודת סיום אתגר תכנות 30DaysOfJavaScript. במקרה שאתה צריך עזרה או אם תרצה לעזור לאחרים, אתה יכול להצטרף לקבוצת הטלגרם.
אתגר 30DaysOfJavaScript הוא מדריך למפתחי JavaScript למתחילים ומתקדמים כאחד. ברוכים הבאים ל-JavaScript. JavaScript היא שפת האינטרנט. אני נהנה להשתמש וללמד JavaScript ואני מקווה שגם אתם תעשו זאת.
באתגר JavaScript שלב אחר שלב זה תלמד JavaScript, שפת התכנות הפופולרית ביותר בהיסטוריה של האנושות. JavaScript משמש כדי להוסיף אינטראקטיביות לאתרי אינטרנט, לפיתוח אפליקציות מובייל, יישומי שולחן עבודה, משחקים וכיום ניתן להשתמש ב-JavaScript עבור למד מכונה ו בינה מלאכותית. JavaScript (JS) גדל בפופולריות בשנים האחרונות והיה שפת תכנות המובילה במשך שש שנים רצופות והיא שפת התכנות הנפוצה ביותר בGithub.
אין צורך בידע מוקדם בתכנות כדי לעמוד באתגר הזה. אתה צריך רק:
- מוטיבציה
- מחשב
- אינטרנט
- דפדפן
- עורך קוד
אני מאמין שיש לך מוטיבציה ורצון עז להיות מפתח, מחשב ואינטרנט. אם יש לך את זה, אז יש לך הכל כדי להתחיל.
ייתכן שלא תזדקק ל-Node.js ממש כעת, אך ייתכן שתזדקק לו למועד מאוחר יותר. להתקין node.js.
לאחר ההורדה לחץ פעמיים והתקן
אנו יכולים לבדוק אם הצומת מותקן במחשב המקומי שלנו על ידי פתיחת המסוף או שורת הפקודה.
asabeneh $ node -v
v12.14.0
בעת הכנת המדריך הזה השתמשתי ב-Node גרסה 12.14.0, אבל כעת הגרסה המומלצת של Node.js להורדה היא v14.17.6, עד שתשתמש בחומר זה ייתכן שיהיה לך גרסה גבוהה יותר של Node.js.
יש הרבה דפדפנים בחוץ. עם זאת, אני ממליץ בחום על Google Chrome.
התקן את Google Chrome אם עדיין אין לך. אנחנו יכולים לכתוב קוד JavaScript קטן בקונסולת הדפדפן, אבל אנחנו לא משתמשים בקונסולת הדפדפן כדי לפתח אפליקציות.
אתה יכול לפתוח את קונסולת Google Chrome על ידי לחיצה על שלוש נקודות בפינה השמאלית העליונה של הדפדפן, בחירת כלים נוספים -> כלים עבור מפתחים או שימוש בקיצור מקלדת. אני מעדיף להשתמש בקיצורי דרך.
כדי לפתוח את קונסולת Chrome באמצעות קיצור מקשים.
Mac
Command+Option+J
Windows/Linux:
Ctl+Shift+J
לאחר פתיחת מסוף Google Chrome, נסה לחקור את הכפתורים המסומנים. נבלה את רוב הזמן בקונסולה. הקונסולה היא המקום שאליו מגיע קוד ה-JavaScript שלך. מנוע Google Console V8 משנה את קוד ה-JavaScript שלך לקוד מכונה. תן לנו לכתוב קוד JavaScript בקונסולת Google Chrome:
אנחנו יכולים לכתוב כל קוד JavaScript בקונסולת גוגל או כל קונסולת דפדפן. עם זאת, עבור אתגר זה, אנו מתמקדים רק בקונסולת Google Chrome. פתח את המסוף באמצעות:
Mac
Command+Option+I
Windows:
Ctl+Shift+I
כדי לכתוב את קוד ה-JavaScript הראשון שלנו, השתמשנו בפונקציה מובנית ()console.log. העברנו ארגומנט כנתוני קלט, והפונקציה מציגה את הפלט. העברנו את 'Hello, World'
כנתוני קלט או ארגומנט בפונקציה ()console.log.
console.log('Hello, World!')
הפונקציה ()console.log
יכולה לקחת פרמטרים מרובים המופרדים בפסיקים. התחביר נראה כך:(ערך3, ערך2, ערך1)console.log
console.log('Hello', 'World', '!')
console.log('HAPPY', 'NEW', 'YEAR', 2020)
console.log('Welcome', 'to', 30, 'Days', 'Of', 'JavaScript')
כפי שניתן לראות מקוד הקטע שלמעלה, ()console.log
יכול לקחת ארגומנטים מרובים.
מזל טוב! כתבת את קוד ה-JavaScript הראשון שלך באמצעות ()console.log
.
אנחנו יכולים להוסיף הערות לקוד שלנו. הערות חשובות מאוד כדי להפוך את הקוד לקריאה יותר וכדי להשאיר הערות בקוד שלנו. JavaScript אינו מבצע את חלק ההערות בקוד שלנו. ב-JavaScript, כל שורת טקסט שמתחילה ב-// ב-JavaScript היא הערה, וכל מה שמצורף כך //
הוא גם הערה.
דוגמה: הערה בשורה אחת
// זה ההערה הראשונה שלי
// זה ההערה השנייה שלי
// אני הערה בשורה אחת
דוגמה: הערה מרובת שורות
/*
This is a multiline comment
Multiline comments can take multiple lines
JavaScript is the language of the web
*/
שפות תכנות דומות לשפות אנושיות. עברית או שפות רבות אחרות משתמשות במילים, ביטויים, משפטים, משפטים מורכבים ועוד כדי להעביר מסר משמעותי. המשמעות העברית של תחביר היא הסדר של מילים וביטויים ליצירת משפטים מעוצבים היטב בשפה. ההגדרה הטכנית של תחביר היא מבנה ההצהרות בשפת מחשב. לשפות תכנות יש תחביר. JavaScript היא שפת תכנות וכמו שפות תכנות אחרות יש לה תחביר משלה. אם לא נכתוב תחביר ש-JavaScript מבין, זה יעלה סוגים שונים של שגיאות. אנו נחקור סוגים שונים של שגיאות JavaScript מאוחר יותר. לעת עתה, הבה נראה שגיאות תחביר.
עשיתי טעות מכוונת. כתוצאה מכך, הקונסולה מעלה שגיאות תחביר. למעשה, התחביר הוא מאוד אינפורמטיבי. זה מודיע איזה סוג של טעות נעשתה. על ידי קריאת הנחיות המשוב על השגיאות, נוכל לתקן את התחביר ולתקן את הבעיה. תהליך הזיהוי וההסרה של שגיאות מתוכנה נקרא איתור באגים. תן לנו לתקן את השגיאות:
console.log('Hello, World!')
console.log('Hello, World!')
עד כה, ראינו כיצד להציג טקסט באמצעות ()console.log
. אם אנו מדפיסים טקסט או מחרוזת באמצעות ()console.log
, הטקסט חייב להיות בתוך המירכאות הבודדות, המירכאות הכפולות או סמל אחורי.
דוגמה:
console.log('Hello, World!')
console.log("Hello, World!")
console.log(`Hello, World!`)
כעת, הבה נתרגל יותר כתיבת קודי JavaScript באמצעות console.log()
במסוף Google Chrome עבור סוגי נתוני מספרים.
בנוסף לטקסט, נוכל גם לבצע חישובים מתמטיים באמצעות JavaScript. הבה נעשה את החישובים הפשוטים הבאים.
אפשר לכתוב קוד JavaScript במסוף Google Chrome ישירות ללא הפונקציה ()console.log
. עם זאת, הוא נכלל בהקדמה זו מכיוון שרוב האתגר הזה יתקיים בעורך טקסט שבו השימוש בפונקציה יהיה חובה. אתה יכול לשחק ישירות עם הוראות בקונסולה.
console.log(2 + 3) // חיבור
console.log(3 - 2) // חסור
console.log(2 * 3) // כפל
console.log(3 / 2) // חילוק
console.log(3 % 2) // מודולוס - מציאת שארית
console.log(3 ** 2) // Exponentiation 3 ** 2 == 3 * 3
אנחנו יכולים לכתוב את הקודים שלנו בקונסולת הדפדפן, אבל זה לא יהיה עבור פרויקטים גדולים יותר. בסביבת עבודה אמיתית, מפתחים משתמשים בעורכי קוד שונים כדי לכתוב את הקודים שלהם. ב-30 הימים האלה של אתגר JavaScript, נשתמש ב-Visual Studio Code.
Visual Studio Code הוא עורך טקסט בקוד פתוח פופולרי מאוד. הייתי ממליץ להוריד את Visual Studio Code, אבל אם אתה בעד עורכים אחרים, אתה מוזמן לעקוב אחרי מה שיש לך.
אם התקנת Visual Studio Code, תן לנו להתחיל להשתמש בו.
פתח את קוד Visual Studio code על ידי לחיצה כפולה על הסמל שלו. כשתפתח אותו, תקבל ממשק מסוג זה. נסה ליצור אינטראקציה עם הסמלים המסומנים.
ניתן להוסיף JavaScript לדף אינטרנט בשלוש דרכים שונות:
- סקריפט מוטבע
- סקריפט פנימי
- סקריפט חיצוני
- סקריפטים חיצוניים מרובים
הסעיפים הבאים מציגים דרכים שונות להוספת קוד JavaScript לדף האינטרנט שלך.
צור תיקיית פרויקט בשולחן העבודה שלך או בכל מקום, תקרא לה 30DaysOfJS וצור קובץ index.html
בתיקיית הפרויקט. לאחר מכן הדבק את הקוד הבא ופתח אותו בדפדפן, לדוגמה Chrome.
<!DOCTYPE html>
<html lang="en">
<head>
<title>30DaysOfScript:Inline Script</title>
</head>
<body>
<button onclick="alert('Welcome to 30DaysOfJavaScript!')">Click Me</button>
</body>
</html>
עכשיו, בדיוק כתבת את התסריט המוטבע הראשון שלך. אנו יכולים ליצור הודעת התראה קופצת באמצעות הפונקציה המובנית ()alert
.
את הסקריפט הפנימי ניתן לכתוב ב-head
או ב-body
, אך עדיף לשים אותו בגוף מסמך ה-HTML.
ראשית, הבה נכתוב על החלק הhead של הדף.
<!DOCTYPE html>
<html lang="en">
<head>
<title>30DaysOfScript:Internal Script</title>
<script>
console.log('Welcome to 30DaysOfJavaScript')
</script>
</head>
<body></body>
</html>
כך אנו כותבים תסריט פנימי רוב הזמן. כתיבת קוד ה-JavaScript בקטע הbody היא האפשרות המועדפת ביותר. פתח את מסוף הדפדפן כדי לראות את הפלט מה-'()console.log'.
<!DOCTYPE html>
<html lang="en">
<head>
<title>30DaysOfScript:Internal Script</title>
</head>
<body>
<button onclick="alert('Welcome to 30DaysOfJavaScript!');">Click Me</button>
<script>
console.log('Welcome to 30DaysOfJavaScript')
</script>
</body>
</html>
פתח את מסוף הדפדפן כדי לראות את הפלט מה-'()console.log'.
בדומה לסקריפט הפנימי, קישור הסקריפט החיצוני יכול להיות בכותרת או הbody, אך עדיף לשים אותו בbody. ראשית, עלינו ליצור קובץ JavaScript חיצוני עם סיומת .js. כל הקבצים המסתיימים בסיומת js הם קובצי JavaScript. צור קובץ בשם introduction.js בתוך ספריית הפרויקט שלך וכתוב את הקוד הבא וקשר את קובץ ה-.js הזה בתחתית הbody.
console.log('Welcome to 30DaysOfJavaScript')
סקריפטים חיצוניים ב-head:
<!DOCTYPE html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:External script</title>
<script src="introduction.js"></script>
</head>
<body></body>
</html>
סקריפטים חיצוניים ב-body:
<!DOCTYPE html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:External script</title>
</head>
<body>
<!-- JavaScript external link could be in the header or in the body -->
<!-- Before the closing tag of the body is the recommended place to put the external JavaScript script -->
<script src="introduction.js"></script>
</body>
</html>
פתח את מסוף הדפדפן כדי לראות את הפלט של ה-console.log()
.
אנו יכולים גם לקשר מספר קובצי JavaScript חיצוניים לדף אינטרנט.
צור קובץ helloworld.js
בתוך התיקיה 30DaysOfJS וכתוב את הקוד הבא.
console.log('Hello, World!')
<!DOCTYPE html>
<html lang="en">
<head>
<title>Multiple External Scripts</title>
</head>
<body>
<script src="./helloworld.js"></script>
<script src="./introduction.js"></script>
</body>
</html>
קובץ main.js שלך צריך להיות מתחת לכל שאר הסקריפטים. חשוב מאוד לזכור זאת.
ב-JavaScript וגם בשפות תכנות אחרות, ישנם סוגים שונים של סוגי נתונים. להלן סוגי נתונים פרימיטיביים של JavaScript:
String (מחרוזת), Number (מספר), Boolean (בוליאן), undefined, Null, ו Symbol.
- מספרים שלמים: מספרים שלמים (שלילי, אפס וחיובי). דוגמא: ... -3, -2, -1, 0, 1, 2, 3 ...
- מספרי נקודה צפה: מספר עשרוני דוגמא ... -3.5, -2.25, -1.0, 0.0, 1.1, 2.2, 3.5 ...
אוסף של תו אחד או יותר בין שתי מרכאות בודדות, מרכאות כפולות או גרשיים אחוריים (``).
דוגמה:
'a'
'Asabeneh'
"Asabeneh"
'Finland'
'JavaScript is a beautiful programming language'
'I love teaching'
'I hope you are enjoying the first day'
`We can also create a string using a backtick`
'A string could be just as small as one character or as big as many pages'
'Any data type under a single quote, double quote or backtick is a string'
ערך בוליאני הוא אמת-true או שקר-false. כל השוואה מחזירה ערך בוליאני, שהוא true או false.
סוג נתונים בוליאני הוא ערך האם זה נכון או לא נכון.
דוגמה:
true // אם האור דולק, הערך נכון
false // אם האור כבוי, הערך הוא false
ב-JavaScript, אם לא נקצה ערך למשתנה, הערך הוא undefined (לא מוגדר). בנוסף לכך, אם פונקציה לא מחזירה כלום, היא מחזירה undefined.
let firstName
console.log(firstName) // undefined, כי הוא עדיין לא מוקצה לערך
Null ב-JavaScript פירושו ערך ריק.
let emptyValue = null
כדי לבדוק את סוג הנתונים של משתנה מסוים, אנו משתמשים באופרטור typeof. ראה את הדוגמה הבאה.
console.log(typeof 'Asabeneh') // string
console.log(typeof 5) // number
console.log(typeof true) // boolean
console.log(typeof null) // object type
console.log(typeof undefined) // undefined
זכור שהערה ב-JavaScript דומה לשפות תכנות אחרות. הערות חשובות להפיכת הקוד שלך לקריאה יותר. ישנן שתי דרכים להגיב:
- הערה בשורה אחת
- הערות מרובות שורות
// commenting the code itself with a single comment
// let firstName = 'Asabeneh'; single line comment
// let lastName = 'Yetayeh'; single line comment
הערות מרובות שורות:
/*
let location = 'Helsinki';
let age = 100;
let isMarried = true;
This is a Multiple line comment
*/
משתנים הם מכלים לאכסן נתונים. משתנים משמשים ל_אחסון_ נתונים במיקום זיכרון. כאשר משתנה מוצהר, מיקום זיכרון שמור. כאשר משתנה מוקצה לערכים מסויימים, שטח הזיכרון יתמלא בנתונים אלו. כדי להצהיר על משתנה, אנו משתמשים במילות מפתח var, let או const. עבור משתנה שמשתנה בזמן אחר, אנו משתמשים ב-let. אם הנתונים אינם משתנים כלל, אנו משתמשים ב-const. לדוגמה, פאי, שם מדינה, כוח משיכה לא משתנים, ונוכל להשתמש ב-const. לא נשתמש ב-var באתגר הזה ואני לא ממליץ לך להשתמש בו. זוהי דרך מועדת לשגיאה להכריז על משתנה שיש לו הרבה דליפה ולא נשאר בתוך ההיקף שלו. נדבר יותר על var, let ו-const בפירוט בסעיפים אחרים (היקף). לעת עתה די בהסבר לעיל.
שם משתנה JavaScript חוקי חייב לעמוד בכללים הבאים:
- שם משתנה JavaScript לא אמור להתחיל במספר.
- שם משתנה JavaScript אינו מאפשר תווים מיוחדים למעט סימן דולר וקו תחתון.
- שם משתנה JavaScript עוקב אחר מוסכמה של camelCase (אות גדולה בתחילת המילה).
- שם משתנה JavaScript לא צריך לכלול רווח בין מילים.
להלן דוגמאות למשתני JavaScript חוקיים.
firstName
lastName
country
city
capitalCity
age
isMarried
first_name
last_name
is_married
capital_city
num1
num_1
_num_1
$num1
year2020
year_2020
המשתנה הראשון והשני ברשימה עוקבים אחר מוסכמות camelCase של הכרזה ב-JavaScript. בחומר זה, נשתמש במשתני camelCase(אות גדולה בתחילת מילה החל מהמילה השנייה). אנו משתמשים ב-CamelCase(אות גדולה גם במילה הראשונה) כדי להכריז על מחלקות, נדון על מחלקות ואובייקטים בחלק אחר. דוגמה למשתנים לא חוקיים:
first-name
1_num
num_#_1
הבה נכריז על משתנים עם סוגי נתונים שונים. כדי להצהיר על משתנה, עלינו להשתמש במילת המפתח let או const לפני שם המשתנה. לאחר שם המשתנה, אנו כותבים סימן שווה (אופרטור הקצאה), וערך (נתונים שהוקצו).
// תחביר
let nameOfVariable = value
nameOfVriable הוא השם המאחסן נתונים בעלי ערך שונים. ראה להלן דוגמאות מפורטות.
דוגמאות למשתנים מוצהרים
// הצהרת משתנים שונים מסוגי נתונים שונים
let firstName = 'Asabeneh' // שם פרטי של אדם
let lastName = 'Yetayeh' // שם משפחה של אדם
let country = 'Finland' // מדינה
let city = 'Helsinki' // עיר
let age = 100 // גיל
let isMarried = true
console.log(firstName, lastName, country, city, age, isMarried)
Asabeneh Yetayeh Finland Helsinki 100 true
// הצהרת משתנים עם ערכי מספר
let age = 100 // גיל השנים
const gravity = 9.81 // כוח הכבידה של כדור הארץ ב-m/s2
const boilingPoint = 100 // נקודת רתיחה של מים, טמפרטורה ב-°C
const PI = 3.14 // קבוע גיאומטרי
console.log(gravity, boilingPoint, PI)
9.81 100 3.14
// משתנים יכולים גם להכריז בשורה אחת מופרדות בפסיק, אולם אני ממליץ להשתמש בשורה נפרדת כדי להפוך את הקוד לקריאה יותר
let name = 'Asabeneh', job = 'teacher', live = 'Finland'
console.log(name, job, live)
Asabeneh teacher Finland
כאשר אתה מפעיל את קובץ index.html בתיקייה 01-Day, אתה אמור לקבל את זה:
🌕 אתה מדהים! זה עתה סיימת את אתגר היום הראשון ואתה בדרך לגדולה. עכשיו תעשה כמה תרגילים למוח ולשרירים שלך.
-
כתוב הערה בשורה אחת שאומרת, הערות יכולות להפוך את הקוד לקריא
-
כתוב עוד תגובה בודדת שאומרת, ברוכים הבאים ל-30DaysOfJavaScript
-
כתוב הערה מרובת שורות האומרת, הערות יכולות להפוך את הקוד לקריא, קל לשימוש חוזר ואינפורמטיבי
-
צור קובץ variable.js והכרז על משתנים והקצה סוגי נתונים מחרוזת, בוליאנית, undefined ו-null
-
צור קובץ datatypes.js והשתמש באופרטור JavaScript typeof כדי לבדוק סוגי נתונים שונים. בדוק את סוג הנתונים של כל משתנה
-
הכרז על ארבעה משתנים מבלי להקצות ערכים
-
הכרז על ארבעה משתנים עם ערכים מוקצים
-
הצהר על משתנים לאחסון שמך הפרטי, שם המשפחה, המצב המשפחתי, המדינה והגיל שלך במספר שורות
-
הצהר על משתנים לאחסון שמך הפרטי, שם המשפחה, מצבך המשפחתי, המדינה והגיל בשורה אחת
-
הכריז על שני משתנים myAge ו-yourAge והקצה להם ערכים ראשוניים ויומן למסוף הדפדפן.
I am 25 years old.
You are 30 years old.
🎉 מזל טוב ! 🎉