├── Lesson10 ├── app.js └── index.html ├── Lesson11-2 ├── app.js └── index.html ├── Lesson11 ├── app.js └── index.html ├── Lesson12 └── index.html ├── Lesson13 ├── index.html └── script.js ├── Lesson14 ├── index.html └── script.js ├── Lesson15 ├── index.html └── script.js ├── Lesson16-2 ├── app.js ├── img │ ├── css.jpg │ ├── html.jpg │ ├── javascript.jpg │ └── php-mysql.jpg └── index.html ├── Lesson16 ├── app.js ├── index.html └── script.js ├── Lesson17 ├── index.html └── script.js ├── Lesson18 ├── index.html └── script.js ├── Lesson19 ├── index.html └── script.js ├── Lesson2 ├── editor-websites-link.txt └── script.js ├── Lesson20 ├── index.html └── script.js ├── Lesson21 ├── index.html └── script.js ├── Lesson22 ├── index.html └── script.js ├── Lesson23 ├── index.html └── script.js ├── Lesson24 ├── index.html └── script.js ├── Lesson25 ├── index.html └── script.js ├── Lesson26 ├── index.html └── script.js ├── Lesson27 ├── index.html ├── javascript.png └── script.js ├── Lesson28 ├── app.js └── index.html ├── Lesson29 ├── app.js └── index.html ├── Lesson3 ├── index.html └── script.js ├── Lesson30 ├── index.html └── script.js ├── Lesson31 ├── index.html └── script.js ├── Lesson32 └── script.js ├── Lesson33 ├── index.html └── script.js ├── Lesson34 ├── index.html └── script.js ├── Lesson35 ├── index.html ├── logo.png └── script.js ├── Lesson36 ├── index.html └── script.js ├── Lesson37 ├── index.html └── script.js ├── Lesson38 ├── index.html └── script.js ├── Lesson39 ├── index.html └── script.js ├── Lesson4 ├── index.html └── script.js ├── Lesson40 ├── index.html └── script.js ├── Lesson41 ├── index.html └── script.js ├── Lesson42 ├── app.js ├── index.html ├── old-lesson.html └── script.js ├── Lesson43 ├── app.js └── index.html ├── Lesson44 └── editor │ ├── app.js │ ├── index.html │ ├── logo_icon.png │ └── style.css ├── Lesson45 ├── index.html ├── javascript.png └── script.js ├── Lesson46 ├── index.html ├── javascript.png ├── page2.html └── script.js ├── Lesson47 ├── home.html ├── index.html └── script.js ├── Lesson48 ├── index.html └── script.js ├── Lesson49 ├── index.html └── script.js ├── Lesson5 ├── index.html └── script.js ├── Lesson50 ├── index.html ├── logo.png └── script.js ├── Lesson51 └── website │ ├── img1.jpg │ ├── img2.jpg │ ├── img3.jpg │ ├── index.html │ ├── logo.png │ └── script.js ├── Lesson52 ├── index.html └── script.js ├── Lesson53 └── script.js ├── Lesson54 ├── app.js └── index.html ├── Lesson55 ├── index.html └── script.js ├── Lesson56 ├── app.js └── index.html ├── Lesson57 ├── app.js └── index.html ├── Lesson58 ├── app.js └── index.html ├── Lesson59 ├── app.js ├── index.html └── logo.png ├── Lesson6 ├── app.js └── index.html ├── Lesson61 └── index.html ├── Lesson62 ├── index.html └── script.js ├── Lesson63 └── script.js ├── Lesson64 ├── index.html └── logo_icon.png ├── Lesson65 ├── app.css ├── app.js ├── index.html └── logo_icon.png ├── Lesson66 ├── app.js └── index.html ├── Lesson67 ├── index.html └── script.js ├── Lesson68 ├── app.js └── index.html ├── Lesson69 ├── index.html ├── js.jpg └── script.js ├── Lesson7 ├── app.js └── index.html ├── Lesson70 ├── index.html ├── js.jpg └── script.js ├── Lesson71 ├── app.js └── index.html ├── Lesson72 ├── app.js ├── index.html └── script.js ├── Lesson73 ├── img │ ├── css.jpg │ ├── html.png │ └── js.jpg ├── index.html └── script.js ├── Lesson75 ├── index.html ├── js.jpg └── script.js ├── Lesson77 ├── time.css ├── time.html └── time.js ├── Lesson78 ├── time.css ├── time.html └── time.js ├── Lesson8 ├── app.js ├── index.html └── script.js ├── Lesson80 ├── index.html └── script.js ├── Lesson81 ├── index.html └── script.js ├── Lesson82 ├── index.html ├── music.mp3 └── script.js ├── Lesson83 ├── index.html ├── music.mp3 └── script.js ├── Lesson84_85_86_87_88 └── audio_player │ ├── audio │ └── music.mp3 │ ├── audio_player.html │ ├── css │ ├── article.css │ ├── audio_player.css │ ├── header_nav.css │ └── resize.js │ ├── img │ ├── back.png │ ├── logo.jpg │ ├── logo1.jpg │ ├── next.png │ ├── pause.png │ └── play.png │ └── scripts │ ├── colors.js │ ├── player_buttons.js │ ├── player_buttons.txt │ ├── resize.js │ ├── speedVolume.js │ └── volume.js ├── Lesson89 ├── index.html └── script.js ├── Lesson9 ├── app.js └── index.html ├── Lesson90 ├── index.html └── script.js ├── Lesson91 ├── index.html └── script.js ├── Lesson92 ├── index.html └── script.js ├── Lesson93 ├── app.js └── index.html ├── Lesson94 ├── app.js └── index.html ├── Lesson95 ├── app.html ├── app.js └── index.html ├── Lesson96 ├── app.js └── index.html └── Lesson97 └── geo-location ├── app.js ├── img.jpg ├── index.html └── logo.jpg /Lesson10/app.js: -------------------------------------------------------------------------------- 1 | 2 | // outerHTML يتم استخدامها لإستبدال عنصر المحدد مع القيمة الذي يتواجد ضمنها بقيمة جديدة 3 | // او يمكنك استخدامها للحصول على العنصر المحدد مع القيمة الذي يتوجد ضمنها 4 | // ----------------------------------------------------------------------------------------- 5 | // outerText يتم استخدامها لإستبدال عنصر المحدد مع القيمة الذي يتواجد ضمنها بنص جديد 6 | // او يمكنك استخدامها للحصول على العنصر المحدد مع القيمة الذي يتوجد 7 | // ضمنها بصيغة نص 8 | // ----------------------------------------------------------------------------------------- 9 | // innerHTML 10 | // يتم استخدامها لتعديل على القيمة العنصر المحدد 11 | // او يمكنك استخدامها لعرض للمحتوى العنصر المحدد 12 | // ----------------------------------------------------------------------------------- 13 | // innerText 14 | // text يتم استخدامها لعرض العنصر المحدد على شكل نص 15 | // text او لتحديد قيمة جديدة للعنصر المحدد بصيغة نص 16 | // ------------------------------------------------------------------------------------ 17 | 18 | 19 | let header = document.getElementById("header"); 20 | header.innerHTML = "

انا احب جافاسكربت

"; 21 | // alert(header.innerText); 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | // Coder Shiyar - YouTube : http://youtube.com/codershiyar 57 | // ----------------------------------------------------------- 58 | 59 | -------------------------------------------------------------------------------- /Lesson10/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Coder Shiyar 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Lesson11-2/app.js: -------------------------------------------------------------------------------- 1 | // JavaScript Console methods - اوامر الجاهزة الذي يستخدم مع لوحة تحكم في متصفح او يسمى وضع مطورين 2 | // --------------------------------------------------------------------------------------- 3 | // Method Description 4 | // ------------------------------------------------------------------------------------ 5 | // log() لإخراج رسالة إلى وحدة التحكم او لعرض بيانات بها 6 | // assert() يكتب رسالة خطأ إلى وحدة التحكم إذا كان التأكيد خاطئًا 7 | // error() إخراج رسالة خطأ إلى وحدة التحكم 8 | // info() إخراج رسالة إعلامية إلى وحدة التحكم 9 | // warn() يقوم بإخراج رسالة تحذير إلى وحدة التحكم 10 | // clear() يمسح وحدة التحكم 11 | // count() يسجل عدد المرات التي تم فيها استدعاء هذا الاستدعاء 12 | // groupCollapsed() ينشئ مجموعة مضمنة جديدة في وحدة التحكم. ومع ذلك ، يتم إنشاء المجموعة الجديدة 13 | // مطوية. سيحتاج المستخدم إلى استخدام زر الكشف لتوسيعه 14 | // groupEnd() يخرج من المجموعة المضمنة الحالية في وحدة التحكم 15 | // group() ينشئ مجموعة مضمنة جديدة في وحدة التحكم. هذه المسافة البادئة بعد رسائل وحدة التحكم بمستوى إضافي ، حتى يتم استدعاء console.groupEnd () 16 | // time() يبدأ مؤقتًا (يمكنه تتبع المدة التي تستغرقها العملية) 17 | // timeEnd() يوقف عداد الوقت الذي تم تشغيله مسبقًا بواسطة console.time () 18 | 19 | console.time() 20 | 21 | var name = "Coder Shiyar" 22 | console.group() 23 | console.warn(name) 24 | console.error(name) 25 | console.groupEnd() 26 | 27 | console.timeEnd() 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | // Method Description 43 | // ------------------------------------------------------------------------------------ 44 | // assert() Writes an error message to the console if the assertion is false 45 | // error() Outputs an error message to the console 46 | // info() Outputs an informational message to the console 47 | // log() Outputs a message to the console 48 | // warn() Outputs a warning message to the console 49 | // clear() Clears the console 50 | // count() Logs the number of times that this particular call to count() has been called 51 | 52 | // groupCollapsed() Creates a new inline group in the console. However, the new group is created collapsed. The user will need to use the disclosure button to expand it 53 | // groupEnd() Exits the current inline group in the console 54 | // group() Creates a new inline group in the console. This indents following console messages by an additional level, until console.groupEnd() is called 55 | // time() Starts a timer (can track how long an operation takes) 56 | // timeEnd() Stops a timer that was previously started by console.time() 57 | 58 | 59 | -------------------------------------------------------------------------------- /Lesson11-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Coder Shiyar - JavaScript 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Lesson11/app.js: -------------------------------------------------------------------------------- 1 | // JavaScript OutPut - بعض طرق عرض بيانات بجافا سكربت 2 | // ------------------------------------------------------------------------- 3 | // window.alert(); لعرض بيانات عبر إشعار منبثق 4 | // console.log(); لعرض البيانات في الوضع المتطورين كونسول 5 | // document.write(); لعرض البيانات عبر اتش تي ام ال 6 | // innerHTML لعرض بيانات عبر عناصر اتش تي ام ال 7 | // innerText لعرض البيانات عبر عناصر اتش تي ام ال على صيغة نص 8 | // ------------------------------------------------------------------------- 9 | 10 | console.log("Coder Shiyar"); 11 | 12 | document.write("

Coder Shiyar JavaScript

"); 13 | 14 | var text = "

تجربة عرض بيانات

"; 15 | document.getElementById("text").innerHTML =text; 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | // Coder Shiyar - YouTube : http://youtube.com/codershiyar 43 | // ----------------------------------------------------------- 44 | 45 | -------------------------------------------------------------------------------- /Lesson11/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Coder Shiyar 5 | 6 | 7 | 8 | 9 | 10 | 11 |

12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Lesson12/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Coder Shiyar 5 | 6 | 7 | 8 | 9 | 10 | 11 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Lesson13/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CODER SHIYAR 7 | 8 | 9 | 10 | 11 |

12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Lesson13/script.js: -------------------------------------------------------------------------------- 1 | // string.replace(searchvalue, newvalue) 2 | // "searchvalue" 3 | // / searchvalue /g 4 | // / searchvalue / i للبحث عن القيمة - دون تدقيق بالأحرف الصغير او الكبيرة 5 | 6 | // substring(start,end) 7 | // 8 | 9 | 10 | 11 | // length لإعادة طول النص 12 | // لإعادة تمركز اول قيمة يطابق مع القيمة الذي تحدده في حال توجدها في النص 13 | // indexOf(value) 14 | // lastIndexOf(value) لإعادة تمركز أخر قيمة يطابق مع القيمة الذي تحدده في حال توجدها في النص 15 | // search(value) للبحث عن تمركز 16 | // startsWith(value)للتحقق هل يبدأ النص بنفس القيمة الذي تحددها او لا ويقوم بإعادة قيمة ب صح او خطأ 17 | // endsWith(value) للتحقق هل ينتهي النص بنفس القيمة الذي تحددها او لا ويقوم بإعادة قيمة ب صح او خطأ 18 | 19 | 20 | 21 | // toUpperCase() لتحويل جميع أحرف إلى الأحرف الكبيرة 22 | // toLowerCase() لتحويل جميع أحرف إلى الأحرف الصغير 23 | // concat() لدمج 2 متغيرات من نوع النصي مع بعض 24 | // trim() لحذف الفراغات في البداية والنهاية القيمة المتغير 25 | // charAt() 26 | 27 | 28 | 29 | //let text = "he learn javascript"; 30 | //text = text.charAt(0).toUpperCase() + text.slice(1); 31 | //text = text.replace(text,text+"."); 32 | //alert(text); 33 | // text = text.charAt(0).toUpperCase() + text.slice(1); 34 | // alert(text); 35 | -------------------------------------------------------------------------------- /Lesson14/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CODER SHIYAR 7 | 8 | 9 | 10 | 11 |

12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Lesson14/script.js: -------------------------------------------------------------------------------- 1 | // string.replace(searchvalue, newvalue) 2 | // "searchvalue" 3 | // / searchvalue /g 4 | // / searchvalue / i للبحث عن القيمة - دون تدقيق بالأحرف الصغير او الكبيرة 5 | 6 | // substring(start,end) 7 | // 8 | 9 | 10 | 11 | // length لإعادة طول النص 12 | // لإعادة تمركز اول قيمة يطابق مع القيمة الذي تحدده في حال توجدها في النص 13 | // indexOf(value) 14 | // lastIndexOf(value) لإعادة تمركز أخر قيمة يطابق مع القيمة الذي تحدده في حال توجدها في النص 15 | // search(value) للبحث عن تمركز 16 | // startsWith(value)للتحقق هل يبدأ النص بنفس القيمة الذي تحددها او لا ويقوم بإعادة قيمة ب صح او خطأ 17 | // endsWith(value) للتحقق هل ينتهي النص بنفس القيمة الذي تحددها او لا ويقوم بإعادة قيمة ب صح او خطأ 18 | 19 | 20 | 21 | // toUpperCase() لتحويل جميع أحرف إلى الأحرف الكبيرة 22 | // toLowerCase() لتحويل جميع أحرف إلى الأحرف الصغير 23 | // concat() لدمج 2 متغيرات من نوع النصي مع بعض 24 | // trim() لحذف الفراغات في البداية والنهاية القيمة المتغير 25 | // charAt() 26 | 27 | 28 | 29 | //let text = "he learn javascript"; 30 | //text = text.charAt(0).toUpperCase() + text.slice(1); 31 | //text = text.replace(text,text+"."); 32 | //alert(text); 33 | // text = text.charAt(0).toUpperCase() + text.slice(1); 34 | // alert(text); 35 | -------------------------------------------------------------------------------- /Lesson15/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CODER SHIYAR 7 | 8 | 9 | 10 | 11 |

12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Lesson15/script.js: -------------------------------------------------------------------------------- 1 | // string.replace(searchvalue, newvalue) 2 | // "searchvalue" 3 | // / searchvalue /g 4 | // / searchvalue / i للبحث عن القيمة - دون تدقيق بالأحرف الصغير او الكبيرة 5 | 6 | // substring(start,end) 7 | // 8 | 9 | 10 | 11 | // length لإعادة طول النص 12 | // لإعادة تمركز اول قيمة يطابق مع القيمة الذي تحدده في حال توجدها في النص 13 | // indexOf(value) 14 | // lastIndexOf(value) لإعادة تمركز أخر قيمة يطابق مع القيمة الذي تحدده في حال توجدها في النص 15 | // search(value) للبحث عن تمركز 16 | // startsWith(value)للتحقق هل يبدأ النص بنفس القيمة الذي تحددها او لا ويقوم بإعادة قيمة ب صح او خطأ 17 | // endsWith(value) للتحقق هل ينتهي النص بنفس القيمة الذي تحددها او لا ويقوم بإعادة قيمة ب صح او خطأ 18 | 19 | 20 | 21 | // toUpperCase() لتحويل جميع أحرف إلى الأحرف الكبيرة 22 | // toLowerCase() لتحويل جميع أحرف إلى الأحرف الصغير 23 | // concat() لدمج 2 متغيرات من نوع النصي مع بعض 24 | // trim() لحذف الفراغات في البداية والنهاية القيمة المتغير 25 | // charAt() 26 | 27 | 28 | 29 | //let text = "he learn javascript"; 30 | //text = text.charAt(0).toUpperCase() + text.slice(1); 31 | //text = text.replace(text,text+"."); 32 | //alert(text); 33 | // text = text.charAt(0).toUpperCase() + text.slice(1); 34 | // alert(text); 35 | -------------------------------------------------------------------------------- /Lesson16-2/app.js: -------------------------------------------------------------------------------- 1 | // JavaScript Array - مصفوفات في جافا سكريبت 2 | // ------------------------------------------------------------- 3 | // يتم استخدامها لتخزين مجموعة من بيانات 4 | // ------------------------------------------------------------- 5 | // forEach() يتم استخدامها لتسهيل عرض البيانات ضمن ارراي 6 | // ---------------------------------------------------------------- 7 | 8 | var posts = 9 | [ 10 | ["img/html.jpg","https://youtube.com/codershiyar" ,"Course html in Arabic","#0b1023"], 11 | ["img/css.jpg","https://youtube.com/codershiyar","Course css in Arabic","#3799d6"], 12 | ["img/javascript.jpg","https://youtube.com/codershiyar","Course JavaScript in Arabic","#303030"], 13 | ["img/php-mysql.jpg","https://youtube.com/codershiyar/playlists","Course PHP and MySQL","#636cd1"] 14 | ] 15 | console.log(posts) 16 | 17 | var content = document.getElementById("content") 18 | posts.forEach(post =>{ 19 | content.innerHTML += 20 | `
21 | 22 |

${post[2]}

25 | 26 | 27 |
` 28 | }) 29 | 30 | -------------------------------------------------------------------------------- /Lesson16-2/img/css.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codershiyar/javascript/2fa0c4b8e35b7d9e8fc48b340e66111594d638f0/Lesson16-2/img/css.jpg -------------------------------------------------------------------------------- /Lesson16-2/img/html.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codershiyar/javascript/2fa0c4b8e35b7d9e8fc48b340e66111594d638f0/Lesson16-2/img/html.jpg -------------------------------------------------------------------------------- /Lesson16-2/img/javascript.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codershiyar/javascript/2fa0c4b8e35b7d9e8fc48b340e66111594d638f0/Lesson16-2/img/javascript.jpg -------------------------------------------------------------------------------- /Lesson16-2/img/php-mysql.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codershiyar/javascript/2fa0c4b8e35b7d9e8fc48b340e66111594d638f0/Lesson16-2/img/php-mysql.jpg -------------------------------------------------------------------------------- /Lesson16-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Coder Shiyar - JavaScript 7 | 29 | 30 | 31 | 32 |
33 | 34 |
35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /Lesson16/app.js: -------------------------------------------------------------------------------- 1 | // JavaScript Array - مصفوفات في جافا سكريبت 2 | // ------------------------------------------------------------- 3 | // يتم استخدامها لتخزين مجموعة من بيانات 4 | // ------------------------------------------------------------- 5 | // length لمعرفة عدد بيانات المخزنة ضمن مصفوفة الذي تحدده يبدا من 1 بدل 0 6 | // ----------------------------------------------------------------- 7 | // forEach() يتم استخدامها لتسهيل عرض البيانات ضمن ارراي 8 | // ---------------------------------------------------------------- 9 | // Array.isArray() يستخدم لتحقق من بيانات ان كان ارراي او لا 10 | // ---------------------------------------------------------------- 11 | // var data = ["Coder Shiyar",21,"JavaScript",["English","Arabic"]] 12 | // data[2] = "JavaScript" 13 | // data.splice(1,1) 14 | // delete data[1] 15 | 16 | // console.log(Array.isArray(data[2]) ) 17 | // console.log(data[data.length - 4]) 18 | // console.log(data[3][0]) 19 | var count = 0; 20 | var languages = ["Arabic","Kurdish","English","Dutch","German" ,"Afghan"] 21 | 22 | languages.forEach(language =>{ 23 | document.getElementById("list").innerHTML += `
  • ${language}
    • ` 24 | }) 25 | // data.forEach(item =>{ 26 | // count++ 27 | // console.log(count + " : ") 28 | // console.log(item) 29 | // }) 30 | 31 | 32 | -------------------------------------------------------------------------------- /Lesson16/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Coder Shiyar - JavaScript 7 | 26 | 27 | 28 |

    اللغات الذي اتحدث بها

    29 |
      30 | 31 |
    32 | 33 | 34 | -------------------------------------------------------------------------------- /Lesson16/script.js: -------------------------------------------------------------------------------- 1 | var name = "Diyar"; 2 | var age = 19; 3 | var isMarried = true; 4 | var country = "Netherlands"; 5 | 6 | var id_1 = ["Diyar",19,true,"Netherlands"]; 7 | 8 | console.log("Name: "+ id_1[0] + "\n Age: "+ id_1[1]+ "\nMarried: "+id_1[2] 9 | + "\nCountry: " + id_1[3] 10 | ); 11 | 12 | // console.log(id_1.indexOf("Netherlands")); 13 | 14 | // console.log(id_1.length); 15 | 16 | -------------------------------------------------------------------------------- /Lesson17/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Coder Shiyar 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Lesson17/script.js: -------------------------------------------------------------------------------- 1 | //JavaScript Objects - اوبجكت هي نسخة متطورة لتخزين البيانات في فاريبل واحد بجافاسكربت 2 | // --------------------------------------------------------------------- 3 | // {} يتم إنشاء اوبجكت عبر امر 4 | // 5 | // --------------------------------------------------------------------- 6 | // key : value وضمنها لتخزين بيانات ضمن اوبجكت يكون بشكل تالي القوانين : قيمة : مفتاح 7 | // --------------------------------------------------------------------- 8 | // يمكنك تخزين ضمن المفتاح : بيانات من نوع التالي 9 | // Arrays, boolean , String , Number , function Return , Objects 10 | 11 | var data = { 12 | name:"Coder Shiyar", 13 | age:20 , 14 | working: true , 15 | language: ["html","css","javscript"] , 16 | myFunction: function(){ 17 | return 10 * 10 18 | } }; 19 | data.name = "Coder Shiyar JavaScript"; 20 | // هنا قمنا بإنشاء مفتاح جديد وحددنا قيمة الذي نرغب بتخزينها ضمن المفتاح , وقمنا بإضافته للاوبجت المحدد 21 | data.color = "Red"; 22 | 23 | // delete لحذف بيانات من اوبجكت كل ما عليك بتحديد اي قيمة ترغب بحذفها 24 | // الذي يتواجد ضمن اوبجكت الذي ترغب بحذف بيانات منها مثال: 25 | // delete data.name; هنا قمنا بحذف مفتاح نئم من اوبجكت مع بياناتها 26 | 27 | // الطريقة الأول لعرض البيانات المخزنة ضمن مفاتيح في اوبجكت 28 | // object.key 29 | 30 | // الطريقة الثانية لعرض البيانات المخزنة ضمن مفاتيح في اوبجكت 31 | // object["key"] 32 | 33 | // مثال لطريقة عرض البيانات الموجودة ضمن اوبجكت - قد يفيدك اثناء البرمجة 34 | console.log(data); 35 | 36 | // مثال لطريقة لعرض بيانات المخزنة ضمن فاريبل الذي يتواجد ضمن احد مفاتيح في اوبجكت 37 | console.log(data.name); 38 | console.log(data["name"]); 39 | // مثال لعرض بيانات المخزنة ضمن ارراي الذي يتواجد ضمن احد مفاتيح في اوبجكت 40 | console.log(data.language[0]); 41 | // مثال لطريقة استدعى فونكشن مخزن ضمن مفتاح في اوبجكت 42 | console.log(data.myFunction()); -------------------------------------------------------------------------------- /Lesson18/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Coder Shiyar 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Lesson18/script.js: -------------------------------------------------------------------------------- 1 | var users = { 2 | user1:{email:"user1@gmail.com" , password:"test1234"} , 3 | user2:{email:"user2@gmail.com" , password:"134342355"} , 4 | user3:{email:"user3@gmail.com" , password:"setgfdrg"} 5 | }; 6 | 7 | 8 | alert(users.user3.password); 9 | alert(users["user1"]["email"]); -------------------------------------------------------------------------------- /Lesson19/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |
    13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Lesson19/script.js: -------------------------------------------------------------------------------- 1 | var points = 95; 2 | 3 | if (points >= 90) { 4 | alert("ممتاز"); 5 | } else if (points >= 80) { 6 | alert("جيد جدا"); 7 | } else if (points >= 70) { 8 | alert("جيد"); 9 | } else if (points >= 60) { 10 | alert("مقبول"); 11 | } else { 12 | alert("ضعيف"); 13 | } 14 | 15 | 16 | // إستخدامه الرمز 17 | // > علامة أكبر من 18 | // < علامة أصغر من 19 | // >= علامة أكبر من أو يساوي 20 | // <= علامة أصغر من أو يساوي 21 | // == القيمتين متساويتين بغض النظر 22 | // عن نوع البيانات أي أن القيمة 1 تساوي القيمة '1' 23 | // != القيمتين غير متساويتين 24 | // === القيمتين متساويتين ومن نفس نوع البيانات أي أن القيمة 1 لا تساوي القيمة '1' 25 | // !== القيمتين غير متساويتين مع الأخذ في الإعتبار نوع البيانات -------------------------------------------------------------------------------- /Lesson2/editor-websites-link.txt: -------------------------------------------------------------------------------- 1 | https://www.shiyarjemo.com/editor/ 2 | 3 | https://code.visualstudio.com/docs/?dv=win -------------------------------------------------------------------------------- /Lesson2/script.js: -------------------------------------------------------------------------------- 1 | alert('') -------------------------------------------------------------------------------- /Lesson20/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |
    13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Lesson20/script.js: -------------------------------------------------------------------------------- 1 | // Logical operators 2 | 3 | // && and 4 | // || or 5 | // ! not 6 | 7 | var a = true; 8 | var b = false; 9 | 10 | if(! a == false){ 11 | 12 | alert("تم تحقيق الشرط"); 13 | } 14 | else{ 15 | alert("لم يتحقق الشرط") 16 | } 17 | 18 | 19 | -------------------------------------------------------------------------------- /Lesson21/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |
    13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Lesson21/script.js: -------------------------------------------------------------------------------- 1 | var fruit = "Mangoe"; 2 | switch(fruit){ 3 | case "Banana": 4 | console.log("السعر الموز 1 دولار"); 5 | break; 6 | case "Appel": 7 | console.log("السعر التفاح 2 دولار"); 8 | break; 9 | case "Orange": 10 | console.log("السعر البرتقال 1 ونصف دولار"); 11 | break; 12 | default: 13 | console.log("نعتذر هذا النوع من الفاكهه غير متوفر لدينا"); 14 | break; 15 | } 16 | 17 | // var date = 1980; 18 | 19 | // switch(date) { 20 | 21 | // case 1992: 22 | // // Statements 23 | // alert("Date = 1992"); 24 | // break; 25 | 26 | // case 1991: 27 | // // Statements 28 | // alert("Date = 1991"); 29 | // break; 30 | // case '1990': 31 | // alert("Date = string 1990"); 32 | // break; 33 | // case 1990: 34 | // alert("Date = 1990"); 35 | // break; 36 | 37 | // default: 38 | // // Statements 39 | // alert("Default"); 40 | // break; 41 | 42 | // } 43 | 44 | -------------------------------------------------------------------------------- /Lesson22/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 |

    14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Lesson22/script.js: -------------------------------------------------------------------------------- 1 | var count = 0; 2 | while(count<=100){ 3 | document.getElementById("while-loop").innerHTML+="Student: "+ count + "
    "; 4 | 5 | ++count; 6 | } 7 | 8 | -------------------------------------------------------------------------------- /Lesson23/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |

    13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Lesson23/script.js: -------------------------------------------------------------------------------- 1 | 2 | // var count = 1; 3 | // while(count<=100){ 4 | // document.getElementById("while-test").innerHTML += "Student: "+ count + "
    "; 5 | // ++count; 6 | // } 7 | 8 | var id2 = ["اسم : شيار ", "عمر : 20 ","الدولة : هولندا"] 9 | for(var count = 0;count"; 11 | } 12 | // for(var count = 1;count<=10; ++count){ 13 | // document.getElementById("while-test").innerHTML += "Student: "+ count + "
    "; 14 | 15 | // } -------------------------------------------------------------------------------- /Lesson24/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |

    13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Lesson24/script.js: -------------------------------------------------------------------------------- 1 | 2 | // var count = 1; 3 | // while(count<=100){ 4 | // document.getElementById("while-test").innerHTML += "Student: "+ count + "
    "; 5 | // ++count; 6 | // } 7 | 8 | // var id2 = ["اسم : شيار ", "عمر : 20 ","الدولة : هولندا"] 9 | // for(var count = 0;count"; 11 | // } 12 | // // for(var count = 1;count<=10; ++count){ 13 | // // document.getElementById("while-test").innerHTML += "Student: "+ count + "
    "; 14 | 15 | // // } 16 | 17 | // var i = 1; 18 | 19 | // while(i<=10){ 20 | // if(i==7){ 21 | // break; 22 | // } 23 | // console.log("ID: "+i); 24 | // ++i; 25 | // } 26 | 27 | // for(var count = 1; count<=10; ++count){ 28 | // if(count == 8){ 29 | // continue; 30 | // } 31 | // document.getElementById("while-test").innerHTML += "ID: "+ count + "
    "; 32 | 33 | // } 34 | 35 | var count = 1; 36 | do { 37 | document.getElementById("while-test").innerHTML += "ID: "+ count + "
    "; 38 | 39 | count++; 40 | }while(count>=10); 41 | 42 | 43 | // إختبار 44 | for(var i = 0; i>=0; i--) 45 | { 46 | alert("We are the best"); 47 | } 48 | -------------------------------------------------------------------------------- /Lesson25/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Coder Shiyar 5 | 6 | 7 | 23 | 24 | 25 | 26 |
      27 | 28 |
    29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /Lesson25/script.js: -------------------------------------------------------------------------------- 1 | // يتم استخدام فور إئتش لتسهيل عرض بيانات المخزنة ضمن 2 | // Objects , Arrays . 3 | // ----------------------------------------------------- 4 | // forEach - نوع الأول من 5 | // ----------------------------------------------------- 6 | // for (variable in object) { 7 | // // do something 8 | // } 9 | // ----------------------------------------------------- 10 | // forEach - نوع الثاني من 11 | // Array.forEach(()=>{ // do something }); 12 | // Array.forEach(function); 13 | 14 | var myHobbies = ["Football" , "ICT" , "Swimming" , "Singing" , "Programming"]; 15 | 16 | // document.write(myHobbies[1]); 17 | 18 | // for(var i in myHobbies){ 19 | // console.log(myHobbies[i]); 20 | // } 21 | 22 | var list = document.getElementById("list"); 23 | myHobbies.forEach(items=>{ 24 | list.innerHTML += "
  • " + items + "
    • " ; 25 | // console.log(items); 26 | }); -------------------------------------------------------------------------------- /Lesson26/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Coder Shiyar 5 | 6 | 7 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 |
    Name: Password: User:
    38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /Lesson26/script.js: -------------------------------------------------------------------------------- 1 | // يتم استخدام فور إئتش لتسهيل عرض بيانات المخزنة ضمن 2 | // Objects , Arrays . 3 | // ----------------------------------------------------- 4 | // forEach - نوع الأول من 5 | // ----------------------------------------------------- 6 | // for (variable in object) { 7 | // // do something 8 | // } 9 | // ----------------------------------------------------- 10 | // forEach - نوع الثاني من 11 | // Array.forEach(()=>{ // do something }); 12 | 13 | 14 | var user = {name:"Coder Shiyar",password:"1234", user:"admin"}; 15 | var users = { 16 | user1:{name:"Coder Shiyar",password:"1234", user:"admin"} , 17 | user2:{name:"Coder Amin",password:"1234", user:"user"} , 18 | user3:{name:"Coder Amir",password:"1244", user:"Admin"} 19 | }; 20 | 21 | var table_items = document.getElementById("table_items"); 22 | 23 | // ForEach Loop نوع الأول من 24 | for(var items in users){ 25 | table_items.innerHTML += 26 | "" 27 | + " " + users[items].name + "" 28 | + " " +users[items].password + "" 29 | + " " + users[items].user +"" 30 | ""; } 31 | 32 | // ForEach Loop نوع الثاني من 33 | Object.keys(users).forEach(element=>{ }); -------------------------------------------------------------------------------- /Lesson27/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Lesson27/javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codershiyar/javascript/2fa0c4b8e35b7d9e8fc48b340e66111594d638f0/Lesson27/javascript.png -------------------------------------------------------------------------------- /Lesson27/script.js: -------------------------------------------------------------------------------- 1 | // document.getElementById("body") 2 | // .style.backgroundImage = "linear-gradient(to left, #000000e3, #232222d9)" 3 | 4 | var body = document.getElementById("body"); 5 | body.style.backgroundImage = "linear-gradient(to left, #000000e3, #232222d9)"; 6 | 7 | var logo = document.getElementById("logo"); 8 | logo.style.width = "100px"; 9 | logo.style.position= "absolute"; 10 | logo.style.top = "50%"; 11 | logo.style.left = "50%"; 12 | logo.style.transform= "translate(-50%, -50%)"; 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | // document.body.clientHeight 49 | // document.body.clientWidth 50 | // window.innerHeight 51 | // window.innerWidth 52 | 53 | 54 | // window.open() - open a new window فتح نافذة جديدة 55 | // window.close() - close the current window اغلاق نافذة الحالية 56 | // window.moveTo() - move the current window نقل نافذة الحالية 57 | // window.resizeTo() - resize the current window إعادة ضبط حجم الشاشة الحالية 58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /Lesson28/app.js: -------------------------------------------------------------------------------- 1 | // طرق أخر لتحديد عناصر اتش تي ام ال عبر جافا سكربت 2 | //------------------------------------------------------------------------- 3 | // css selectors - استخدام الطرق تحديد عناصر اتش تي ام ال عبر سي اس اس 4 | //------------------------------------------------------------------------- 5 | // document.querySelector() لتحديد عنصر واحد 6 | // document.querySelectorAll() لتحديد جميع العناصر 7 | 8 | // var header = document.querySelector(".header-class"); 9 | // header.innerHTML = "

    Hi Coder Shiyar

    "; 10 | 11 | var myElements = document.querySelectorAll("header , main"); 12 | myElements[2].style.color = "white"; 13 | 14 | // i = مجرد اسم فاريابل استخدمناها لاجل العدد 15 | // length قمنا بإستخدامها لجلب عدد عناصر الذي تم تحديدها 16 | for(var i = 0; i<= myElements.length; ++i){ 17 | // هنا طلبنا بأن بتم تنفيذ اوامر الذي نرغب به على جميع العناصر المحددة 18 | myElements[i].innerHTML += "I love Coder Shiyar" ; 19 | myElements[i].style.background = "red"; 20 | } -------------------------------------------------------------------------------- /Lesson28/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Coder Shiyar 5 | 6 | 7 | 8 | 9 | 10 | 11 |
    12 | test 13 |
    14 | 15 |
    16 | test 17 |
    18 | 19 |
    20 | 21 |
    22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /Lesson29/app.js: -------------------------------------------------------------------------------- 1 | 2 | // document.getElementById(""); ID لتحديد عناصر اتش تي ام ال عبر اسم 3 | // ----------------------------------------------------------------------------------- 4 | // innerHTML 5 | // يتم استخدامها لتعديل على القيمة عنصر المحدد 6 | // او يمكنك استخدامها لعرض للمحتوى العنصر المحدد 7 | // ----------------------------------------------------------------------------------- 8 | // innerText 9 | // text يتم استخدامها لعرض العنصر المحدد على شكل نص 10 | // text او تحديد قيمة جديدة للعنصر المحدد بصيغة نص 11 | // ------------------------------------------------------------------------------------ 12 | var content = document.getElementById("content"); 13 | content.innerHTML = "

    Coder Shiyar

    "; 14 | 15 | // document.getElementById("content").innerText = "

    Coder Shiyar JavaScript

    "; 16 | 17 | alert(content.innerText); 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | // Coder Shiyar - YouTube : http://youtube.com/codershiyar 41 | // ----------------------------------------------------------- 42 | 43 | -------------------------------------------------------------------------------- /Lesson29/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Coder Shiyar 5 | 6 | 7 | 8 | 9 | 10 | 11 |
    12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Lesson3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |

    Learn JavaScript

    11 | 12 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Lesson3/script.js: -------------------------------------------------------------------------------- 1 | alert("تم تنفيذ اوامر جافا سكربت") -------------------------------------------------------------------------------- /Lesson30/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Coder Shiyar 5 | 6 | 7 | 8 | 9 | 10 | 11 |

    Coder Shiyar

    12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Lesson30/script.js: -------------------------------------------------------------------------------- 1 | // function مهمة - وظيفة 2 | function run_codes(){ 3 | 4 | alert("تم استدعاء الوظيفة"); 5 | } 6 | 7 | 8 | -------------------------------------------------------------------------------- /Lesson31/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Coder Shiyar 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Lesson31/script.js: -------------------------------------------------------------------------------- 1 | // function مهمة - وظيفة 2 | // return - إرجاع = إعادة 3 | // parameters - فاريبل يتم تحديد لها قيمة عند إستدعاء الوظيفة 4 | // ----------------------------------- 5 | 6 | function plus(number1,number2){ 7 | 8 | return number1 + number2; 9 | } 10 | 11 | 12 | alert(plus(100 , 200)); -------------------------------------------------------------------------------- /Lesson32/script.js: -------------------------------------------------------------------------------- 1 | // الكلمة let تمكنك من تعريف متغيرات مقيّدة في الـ block (الدالة - الحلقة) الذي عُرّفت به (يحذها المُفسّر بعد الخروج من البلوك أي إنك إن عرفت a داخل دالة اسمها add لن يتعرف المفسّر على a خارج هذه الدالّة 2 | 3 | // الكلمة var تعرّف المتغيرات globally أي أنّ المتغيّر يعمل على كامل الكود و في أي block 4 | 5 | // const يجعل قيمة المتغير غير قابل للتعديل 6 | 7 | 8 | // var 9 | // تستعمل هذه الكلمة لإنشاء متغيرات داخل الكائن العلوي window وهذه المتغيرات إما أن تكون عامة global يمكن الوصول إليها في جميع أنحاء التطبيق أو قد تكون في نطاق محدد وهو نطاق دالة معينة (function-scoped) بحيث لا يمكن الوصول إليها خارج هذه الدالة (private variables). هذه الكلمة المفتاحية موجودة منذ الإصدارات الأولى لجافاسكريبت ولكن الوقت جاء لإضافة بدائل عنها تكون أكثر مرونة وأمانا حتى تساير هذه اللغة الإيقاع السريع الذي يتقدم به مجال برمجيات الويب والجافاسكريبت بصفة عامة. ولهذا ظهر let في الإصدار الأخير من الجافاسكريبت. 10 | 11 | // function varTest() { 12 | // var x = 1; 13 | // if (true) { 14 | // var x = 2; // نفس المتغير 15 | // console.log(x); // 2 16 | // } 17 | // console.log(x); // 2 18 | // } 19 | // let 20 | // بعكس var فإن let تمكننا من إنشاء متغيرات تابعة لنطاقات أضيق قد تكون دوال أو فقط تعابير شرطية أو حلقات متكررة وغيرها ولهذا تسمى هذه المتغيرات بالإنجليزية block-scoped أي أنك لا تستطيع الوصول إليها خارج ال block الذي صُرِّح بها فيه. 21 | 22 | // function letTest() { 23 | // let x = 1; 24 | // if (true) { 25 | // let x = 2; // متغير آخر 26 | // console.log(x); // 2 27 | // } 28 | // console.log(x); // 1 29 | // } 30 | // وعندما تحاول استعمال متغير قبل التصريح به فإنك ستحصل على خطأ جميل :) في برمجيتك من نوع ReferenceError على عكس ما اعتدنا علينا مع الكلمة المفتاحية var حيث كانت تعطى لكل متغير قيمة افتراضية وهي undefined حتى قبل إنشاء هذا المتغير. 31 | 32 | -------------------------------------------------------------------------------- /Lesson33/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Coder Shiyar 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Lesson33/script.js: -------------------------------------------------------------------------------- 1 | // value - قيمة 2 | // ----------------------------------------------- 3 | // يتم استخدامها للحصول على قيمة المحددة ضمن احد عناصر من النوع 4 | // input او select option او textarea 5 | // ----------------------------------------------- 6 | 7 | function getValue(){ 8 | var text = document.getElementById("text").value; 9 | console.log(document.getElementById("text").value); 10 | } -------------------------------------------------------------------------------- /Lesson34/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Coder Shiyar 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Lesson34/script.js: -------------------------------------------------------------------------------- 1 | // JavaScript OOP = object oriented programming 2 | // class - فئة 3 | // constructor - البناء 4 | // object - كائن 5 | // ------------------------------------ 6 | class App{ 7 | constructor(){ 8 | alert("تم استدعاء كونستركتور") ; 9 | } 10 | } 11 | 12 | onload = new App(); 13 | // var app_object = new App(); 14 | // var app_object2 = new App(); 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /Lesson35/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Coder Shiyar 5 | 6 | 7 | 8 | 9 | 10 | 11 |
    12 | 13 |
    14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Lesson35/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codershiyar/javascript/2fa0c4b8e35b7d9e8fc48b340e66111594d638f0/Lesson35/logo.png -------------------------------------------------------------------------------- /Lesson35/script.js: -------------------------------------------------------------------------------- 1 | // --------------------------------------- 2 | // parameters in methods and constructor 3 | // --------------------------------------- 4 | 5 | class App{ 6 | constructor(text,img){ 7 | let content = document.getElementById("content"); 8 | content.innerHTML = "

    " + text + "

    " ; 9 | } 10 | 11 | } 12 | 13 | onload = new App("Coder Shiyar","logo.png"); -------------------------------------------------------------------------------- /Lesson36/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Coder Shiyar 7 | 8 | 9 | 10 | 11 |

    Coder Shiyar

    12 | 13 | 14 | -------------------------------------------------------------------------------- /Lesson36/script.js: -------------------------------------------------------------------------------- 1 | // JavaScript OOP = object oriented programming 2 | // class - فئة 3 | // constructor - البناء 4 | // object - كائن 5 | // ------------------------------------ 6 | // method - طريقة - وظيفة 7 | // this يتم استخدامها لإخبار جافاسكربت بإنك ترغب بتحديد عنصر موجود ضمن ذلك الكلاس 8 | 9 | class App{ 10 | constructor(){ 11 | 12 | // this.change_background(); 13 | } 14 | change_background(){ 15 | document.getElementById("body").style.background = "red"; 16 | } 17 | 18 | } 19 | 20 | var app_object = new App(); 21 | // app_object.change_background(); 22 | 23 | function change_background2(){ 24 | document.getElementById("body").style.background = "red"; 25 | } 26 | 27 | // change_background2(); 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /Lesson37/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Coder Shiyar 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Lesson37/script.js: -------------------------------------------------------------------------------- 1 | // method - وظيفة | مهمة | طريقة 2 | // return - إعادة | إسترجاع 3 | // --------------------------------------- 4 | // method return وظيفة الذي يعيد قيمة 5 | // --------------------------------------- 6 | 7 | class App{ 8 | constructor(){ 9 | var message = this.getMessage(); 10 | document.getElementById("title").innerHTML = this.getMessage(); 11 | } 12 | 13 | getMessage(){ 14 | 15 | return "Hi ! مرحبا" 16 | } 17 | } 18 | 19 | onload = new App(); -------------------------------------------------------------------------------- /Lesson38/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Coder Shiyar 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
    13 | 14 |
    15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /Lesson38/script.js: -------------------------------------------------------------------------------- 1 | // method parameters 2 | // ------------------------------ 3 | class App{ 4 | constructor(){ 5 | this.setItem("CODER SHIYAR","انا مهندس معلوميات , احب تعليم برمجة للأخرين"); 6 | this.setItem("CODER TEST","انا مهندس معلوميات , احب تعليم برمجة للأخرين"); 7 | this.setItem("CODER TEST2","انا مهندس معلوميات , احب تعليم برمجة للأخرين"); 8 | this.getLanguage("English"); 9 | } 10 | setItem(title,text){ 11 | var article1 = document.getElementById("article1"); 12 | article1.innerHTML += "

    " + title + "

    "; 13 | article1.innerHTML += "

    " + text + "

    "; 14 | } 15 | 16 | getLanguage(language){ 17 | if(language == "Arabic"){ 18 | alert("قمت بتحديد : " + language); 19 | } 20 | if(language === "English"){ 21 | alert("موقعنا لا يدعم لغة الإنجليزية"); 22 | } 23 | 24 | } 25 | } 26 | onload = new App(); -------------------------------------------------------------------------------- /Lesson39/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Coder Shiyar 5 | 6 | 7 | 8 | 9 | 10 | 11 |

    Coder Shiyar

    12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Lesson39/script.js: -------------------------------------------------------------------------------- 1 | // List of Events - رابط مواقعين ستجد به جميع افنتس 2 | // ------------------------------------------------------------------------- 3 | // https://developer.mozilla.org/en-US/docs/Web/Events 4 | // https://www.w3schools.com/jsref/dom_obj_event.asp 5 | // ------------------------------------------------------------------------- 6 | // Event - :يستخدم لتنفيذ الأوامر عند 7 | // ------------------------------------------------------------------------- 8 | // load - عند اكتمال تحميل موقع او للعنصر المحدد 9 | // click - عندما يحدث نقر على العنصر الذي تم تزويده بالإفنت 10 | // ------------------------------------------------------------------------- 11 | 12 | // onload = ()=>{ 13 | // alert("تم تحميل الصفحة"); 14 | // }; 15 | 16 | // onload = function(){ 17 | // alert("تم تحميل الصفحة"); 18 | // } 19 | 20 | // onload = function run_codes(){ 21 | // alert("تم تحميل الصفحة"); 22 | // } 23 | 24 | // var button1 = document.getElementById("button1"); 25 | // button1.onclick = ()=>{ 26 | // alert("تم نقر"); 27 | // } 28 | 29 | class App{ 30 | constructor(){ 31 | document.getElementById("text").onclick = ()=>{ 32 | this.run_codes(); 33 | }; 34 | } 35 | 36 | run_codes(){ 37 | alert("تم تشغيل الوظيفة"); 38 | } 39 | } 40 | 41 | onload = new App(); 42 | -------------------------------------------------------------------------------- /Lesson4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Coder Shiyar 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Lesson4/script.js: -------------------------------------------------------------------------------- 1 | // كل شي ياتي بعد // في نفس ذلك السطر الذي تقوم بكتابة الأمر // سيصبح كا تعليق 2 | 3 | /* 4 | 5 | مثال لتعليق يتالف 6 | من اكثر من سطر 7 | 8 | */ 9 | // مثال لتعليق يتالف من سطر واحد 10 | // console.log("Coder Shiyar"); 11 | 12 | console.log("Coder Shiyar"); 13 | -------------------------------------------------------------------------------- /Lesson40/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Coder Shiyar 5 | 6 | 7 | 8 | 9 | 10 | 11 |

    Coder Shiyar

    12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Lesson40/script.js: -------------------------------------------------------------------------------- 1 | // List of Events - رابط مواقعين ستجد به جميع افنتس 2 | // ------------------------------------------------------------------------- 3 | // https://developer.mozilla.org/en-US/docs/Web/Events 4 | // https://www.w3schools.com/jsref/dom_obj_event.asp 5 | // ------------------------------------------------------------------------- 6 | // Event - - :يستخدم لتنفيذ الأوامر عند 7 | // ------------------------------------------------------------------------- 8 | // load - عند اكتمال تحميل موقع او للعنصر المحدد 9 | // click - عندما يحدث نقر على العنصر الذي تم تزويده بالإفنت 10 | // ------------------------------------------------------------------------- 11 | // addEventListener - يتم استخدامها لتزويد عناصر الذي تحدده ب افنت الذي تحدده 12 | // ------------------------------------------------------------------------- 13 | document.getElementById("text").addEventListener("click" , ()=>{ 14 | alert("تم نقر على العنصر"); 15 | }); 16 | 17 | 18 | // document.getElementById("text").addEventListener("click" , function(){ 19 | // alert("تم نقر على العنصر"); 20 | // }); -------------------------------------------------------------------------------- /Lesson41/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Coder Shiyar 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Lesson41/script.js: -------------------------------------------------------------------------------- 1 | // Coder Shiyar :) => http://youtube.com/codershiyar 2 | // --------------------------------------------------- 3 | class App{ 4 | constructor(){ 5 | 6 | } 7 | sayHallo(){ 8 | alert("مرحبا بك"); 9 | } 10 | 11 | } 12 | 13 | onload = new App(); 14 | 15 | 16 | document.getElementById("button1").addEventListener("click" ,()=>{ 17 | let app = new App(); 18 | app.sayHallo(); 19 | }); 20 | -------------------------------------------------------------------------------- /Lesson42/app.js: -------------------------------------------------------------------------------- 1 | // localStorage يتم استخدامها للوصول إلى ذاكرة تخزين المحلية في المتصفح 2 | // setItem() يتم استخدامها لتخزين البيانات في ذاكرة التخزين المحلية 3 | // "key" إنشاء اسم مفتاح لتخزين البيانات ضمنها 4 | // "value" القيمة - البيانات الذي ترغب بتخزينها ضمن اسم مفتاح 5 | // ------------------------------------------------------------------------------- 6 | // localStorage.getItem("key") 7 | // getItem() يتم استخدامها لإسترداد البيانات المخزنة عبر اسم المفتاح 8 | // "key" اسم المفتاح الذي ترغب بإسترداد القيمة(البيانات) المخزنة ضمنها 9 | // ------------------------------------------------------------------------------- 10 | // localStorage.removeItem("key") 11 | // remove() يتم استخدامها لحذف بيانات من ذاكرة التخزين المحلية 12 | // عبر تحديد اسم مفتاح 13 | // "key" اسم المفتاح الذي ترغب بحذفها مع القيمة المخزنة ضمنها 14 | // ------------------------------------------------------------------------------- 15 | // localStorage.clear() يتم استخدامها لحذف جميع 16 | // البيانات المخزنة في ذاكرة تخزين المحلية 17 | // ------------------------------------------------------------------------------- 18 | // نقاط أخرى مهمة 19 | // ------------------ 20 | // يمكنك تخزين بيانات يصل إلى 5 او 10 ميغا بايت في المتصفح حسب نوع المتصفح 21 | // يمكنك وصول إلى البيانات المخزنة في جميع صفحات الذي ينتمون إلى نفس دومين 22 | // حذف بيانات المخزنة ضمن ذاكرة تخزين المحلية يمكن عبر حذف متصفح 23 | // او حذف بيانات عبر اوامر جافا سكريبت او حذفها بشكل يدوي من المتصفح 24 | // البيانات الذي يتم تخزينها يتم تحويلها إلى البيانات من نوع النصي تلقائية 25 | // ------------------------------------------------------------------------------- 26 | // You can store data up to 5 or 10 MB in the browser depending on the type of browser 27 | // You can access the data stored in all pages belonging to the same domain 28 | // Delete the data stored within the local storage can be via delete browser 29 | // or delete data via javascript commands or delete it manually from the browser 30 | // The data that is stored is converted to string datatype 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | // localStorage.setItem("course","جافا سكريبت"); 40 | // localStorage.setItem("name","JavaScript"); 41 | // localStorage.removeItem("course"); 42 | // localStorage.clear(); 43 | 44 | // localStorage.setItem("number",21.10); 45 | // let number = parseFloat(localStorage.getItem("number")) 46 | // console.log( number + 20) 47 | 48 | // localStorage.setItem("array" , ["Arabic","Kurdish","Dutch","English"]) 49 | // var array = localStorage.getItem("array").split(",") 50 | // console.log(array) 51 | 52 | // var data = {name:"Coder Shiyar",age:21}; 53 | // localStorage.setItem("data", JSON.stringify(data)); 54 | // var data = JSON.parse(localStorage.getItem("data")) 55 | // console.log( data.name) 56 | 57 | 58 | 59 | document.getElementById("color").onchange = function(){ 60 | localStorage.setItem("color", document.getElementById("color").value); 61 | document.body.style.background = localStorage.getItem("color"); 62 | } 63 | 64 | if(localStorage.getItem("color")!=null ){ 65 | document.body.style.background = localStorage.getItem("color"); 66 | document.getElementById("color").value = localStorage.getItem("color"); 67 | } -------------------------------------------------------------------------------- /Lesson42/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Coder Shiyar - JavaScript 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Lesson42/old-lesson.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |

    12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Lesson42/script.js: -------------------------------------------------------------------------------- 1 | // localStorage.setItem("key", "value"); لإضافة بيانات جديدة او تحديثها 2 | // localStorage.getItem("key"); لإسترداد بيانات من ذاكرة تخزين المحلية 3 | // localStorage.removeItem("key"); لحذف احد بيانات من ذاكرة تخزين المحلية 4 | // localStorage.clear(); لحذف جميع البيانات المخزنة ضمن ذاكرة تخزين المحلية 5 | 6 | 7 | if(localStorage.getItem("Name")==null){ 8 | var setName = prompt("ضع اسمك"); 9 | localStorage.setItem("Name",setName); 10 | } 11 | 12 | function removeItem(){ 13 | localStorage.removeItem("Name"); 14 | } 15 | 16 | document.getElementById("getName").innerHTML = "اهلا بك " + localStorage.getItem("Name"); 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /Lesson43/app.js: -------------------------------------------------------------------------------- 1 | // sessionStorage.setItem("key", "value"); 2 | // sessionStorage يتم استخدامها للوصول إلى ذاكرة تخزين المؤاقتة في المتصفح 3 | // setItem() يتم استخدامها لتخزين البيانات في ذاكرة التخزين المؤاقتة 4 | // "key" إنشاء اسم مفتاح لتخزين البيانات ضمنها 5 | // "value" القيمة - البيانات الذي ترغب بتخزينها ضمن اسم مفتاح 6 | // ----------------------------------------------------------- 7 | // sessionStorage.getItem("key"); 8 | // getItem() يتم استخدامها لإسترداد البيانات المخزنة عبر اسم المفتاح 9 | // "key" اسم المفتاح الذي ترغب بإسترداد القيمة(البيانات) المخزنة ضمنها 10 | // ------------------------------------------------------------ 11 | // sessionStorage.removeItem("key"); 12 | // remove() يتم استخدامها لحذف بيانات من ذاكرة التخزين مؤقتة سشن عبر تحديد اسم مفتاح 13 | // "key" اسم المفتاح الذي ترغب بحذفها مع القيمة المخزنة ضمنها 14 | // ------------------------------------------------------------ 15 | // sessionStorage.clear(); يتم استخدامها لحذف جميع البيانات المخزنة في ذاكرة تخزين مؤاقتة سشن 16 | // --------------------------------------------------------- 17 | // sessionStorage vs localStorage الفرق بين الأثنين 18 | // هو عندما تخزن البيانات في سشن سيتم حذف البيانات بمجرد اغلاق المستخدم للمتصفح 19 | // وعند استخدام لوكال ستورج:ذاكرة تخزين المحلية-البيانات سيتم حذفها عند حذف المتصفح 20 | // او يقوم المستخدم بحذف البيانات المخزنة بنفسه 21 | 22 | // Coder Shiyar - YouTube : http://youtube.com/codershiyar 23 | //----------------------------------------------------------- 24 | 25 | 26 | 27 | // هنا طلبنا مباشرتن بتخزين البيانات الذي قمنا تحديدها ضمن الاسم الذي حددناها 28 | // في ذاكرة تخزين المؤاقتة سشن , قم بتحديد بنفسك البيانات والأسم و متى ترغب بتنفيذ الأوامر لتخزين البيانات 29 | sessionStorage.setItem("name" , "Coder Shiyar"); 30 | 31 | // sessionStorage.setItem("channel","http://youtube.com/codershiyar"); 32 | 33 | // هنا استخدمنا جملة الشرطية للتحقق إن كان المفتاح الذي نرغب بإسترداد قيمتها موجودة او لا 34 | // قم بتحديد الأوامر الذي ترغب بتنفيذها في حال كان المفتاح موجودة او لا 35 | if(sessionStorage.getItem("channel") != null){ 36 | alert(sessionStorage.getItem("channel")); 37 | }else{ 38 | alert("المفتاح الذي حددته غير موجود"); 39 | } 40 | 41 | // هنا طلبنا بحذف جميع البيانات المخزنة عند نقر على العنصر المحدد 42 | document.getElementById("removeItem").addEventListener("click" ,()=>{ 43 | // sessionStorage.removeItem("name"); 44 | sessionStorage.clear(); 45 | }); 46 | 47 | // هنا طلبنا بتحديث البيانات المخزنة في المفتاح عند نقر على العنصر المحدد 48 | document.getElementById("updateItem").addEventListener("click" ,()=>{ 49 | sessionStorage.setItem("name" , "C . Shiyar"); 50 | }); 51 | 52 | 53 | -------------------------------------------------------------------------------- /Lesson43/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Coder Shiyar 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Lesson44/editor/app.js: -------------------------------------------------------------------------------- 1 | let codes = document.getElementById("codes"); 2 | let play = document.getElementById("play"); 3 | let remove = document.getElementById("remove"); 4 | let result = document.getElementById("result"); 5 | 6 | play.onclick = ()=>{ 7 | result.innerHTML = codes.value; 8 | localStorage.setItem("RESULT" , codes.value); 9 | }; 10 | remove.onclick = ()=>{ 11 | result.innerHTML = ""; 12 | 13 | } 14 | 15 | onload = ()=>{ 16 | codes.value = localStorage.getItem("RESULT"); 17 | result.innerHTML = codes.value; 18 | } -------------------------------------------------------------------------------- /Lesson44/editor/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Coder Shiyar - Editor 7 | 8 | 9 | 10 | 11 | 12 | 13 | 21 | 22 |
    23 | 29 | 30 |
    31 | 32 | 33 |
    34 |
    35 |

    Result - النتيجة

    36 |
    37 | 38 |
    39 | 40 |
    41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /Lesson44/editor/logo_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codershiyar/javascript/2fa0c4b8e35b7d9e8fc48b340e66111594d638f0/Lesson44/editor/logo_icon.png -------------------------------------------------------------------------------- /Lesson44/editor/style.css: -------------------------------------------------------------------------------- 1 | nav img{ 2 | max-width: 64px; 3 | max-height: 64px; 4 | object-fit: scale-down; 5 | border-radius: 50%; 6 | } 7 | main{ 8 | text-align: center; 9 | } 10 | #codes{ 11 | width: 98%; 12 | min-height: 280px; 13 | border-radius: 16px; 14 | border: 2px solid rgb(131, 131, 131); 15 | } 16 | 17 | #buttons{ 18 | display: flex; 19 | justify-content: space-evenly; 20 | } 21 | #buttons button{ 22 | width: 47%; 23 | border-radius: 12px; 24 | border: 0px; 25 | padding: 10px; 26 | } 27 | #remove{ 28 | background-color: rgb(255, 30, 30); 29 | color: white; 30 | } 31 | #play{ 32 | background-color: rgb(39, 39, 39); 33 | color: white; 34 | } 35 | 36 | #title-result{ 37 | padding: 10px; 38 | border-bottom: 2px solid rgb(131, 131, 131); 39 | margin: 8px 0px; 40 | font-weight: bold; 41 | } 42 | #result{ 43 | max-width: 100% !important; 44 | } -------------------------------------------------------------------------------- /Lesson45/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Lesson45/javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codershiyar/javascript/2fa0c4b8e35b7d9e8fc48b340e66111594d638f0/Lesson45/javascript.png -------------------------------------------------------------------------------- /Lesson45/script.js: -------------------------------------------------------------------------------- 1 | 2 | alert(location.pathname); 3 | // location.protocol Return the protocol of the current URL: 4 | // location.href returns the href (URL) of the current page 5 | // location.hostname returns the domain name of the web host 6 | // location.pathname إرجاع المسار واسم الملف للصفحة الحالية 7 | 8 | // location.assign loads a new document 9 | // locatio.replace(); 10 | // location.reload(); 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | // document.body.clientHeight 49 | // document.body.clientWidth 50 | // window.innerHeight 51 | // window.innerWidth 52 | 53 | 54 | // window.open() - open a new window فتح نافذة جديدة 55 | // window.close() - close the current window اغلاق نافذة الحالية 56 | // window.moveTo() - move the current window نقل نافذة الحالية 57 | // window.resizeTo() - resize the current window إعادة ضبط حجم الشاشة الحالية 58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /Lesson46/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Lesson46/javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codershiyar/javascript/2fa0c4b8e35b7d9e8fc48b340e66111594d638f0/Lesson46/javascript.png -------------------------------------------------------------------------------- /Lesson46/page2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |

    الصفحة الثانية

    12 | 13 | -------------------------------------------------------------------------------- /Lesson46/script.js: -------------------------------------------------------------------------------- 1 | function reload(){ 2 | location.reload(); 3 | } 4 | function assign(){ 5 | location.assign("https://www.youtube.com/"); 6 | } 7 | function replace(){ 8 | location.replace("page2.html"); 9 | } 10 | // location.reload(); 11 | 12 | // location.assign() 13 | 14 | // location.replace(); 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | // document.body.clientHeight 54 | // document.body.clientWidth 55 | // window.innerHeight 56 | // window.innerWidth 57 | 58 | 59 | // window.open() - open a new window فتح نافذة جديدة 60 | // window.close() - close the current window اغلاق نافذة الحالية 61 | // window.moveTo() - move the current window نقل نافذة الحالية 62 | // window.resizeTo() - resize the current window إعادة ضبط حجم الشاشة الحالية 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /Lesson47/home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | page 2 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Lesson47/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CODER SHIYAR 7 | 8 | 9 | 10 | 11 |

    12 | 13 | 14 | -------------------------------------------------------------------------------- /Lesson47/script.js: -------------------------------------------------------------------------------- 1 | // 2 | let url = location.pathname; 3 | let index = url.lastIndexOf("/") + 1; 4 | let fileName = url.substring(index); 5 | 6 | if(fileName == "home.html"){ 7 | document.body.style.background = "red"; 8 | }else if(fileName == "index.html"){ 9 | document.body.style.background = "green"; 10 | document.getElementById("title").innerHTML = "Coder Shiyar"; 11 | } -------------------------------------------------------------------------------- /Lesson48/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Coder Shiyar 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Lesson48/script.js: -------------------------------------------------------------------------------- 1 | // document.URL للحصول على رابط العنوان الصفحة 2 | // document.documentURI للحصول على رابط العنوان الصفحة 3 | // document.domain للحصول على اسم دومين موقع 4 | const url = document.URL; 5 | document.write("URL : " + url); -------------------------------------------------------------------------------- /Lesson49/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Coder Shiyar 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Lesson49/script.js: -------------------------------------------------------------------------------- 1 | // Coder Shiyar - https://youtube.com/codershiyar 2 | // ---------------------------------------------------- 3 | // document.title يتم استخدامها للحصول على عنوان الصفحة او تعديل على عنوان الصفحة 4 | // document.head يتم استخدامها لتحديد راس الصفحة لتحكم بها 5 | // document.body يتم استخدامها لتحديد جسم الصفحة لتحكم بها 6 | // ---------------------------------------------------- 7 | let title = document.title; 8 | document.title = "كودر شيار"; 9 | document.head.innerHTML += ""; 10 | 11 | document.body.onload = ()=>{ 12 | alert("تم اكتمال تحميل الصفحة"); 13 | }; -------------------------------------------------------------------------------- /Lesson5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |

    13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Lesson5/script.js: -------------------------------------------------------------------------------- 1 | var text = "Coder Shiyar"; // string - بيانات من نوع النصي 2 | text = 'Coder Shityar'; 3 | var number = -2021.50; // double - بيانات من نوع ارقام الذي يحتوي على فاصلة 4 | var number2 = 10; // integer | int بيانات من نوع ارقام الذي لا يحتوي على فاصلة 5 | var isRunning = false; // boolean - بيانات من نوع ارقام صح او خطا 6 | var appName ; // undefind- بيانات من نوع غير محدد او غير معروف 7 | var appVersion = null; // object - بيانات من نوع اوبجكت ولا يملك شي 8 | var title = document.getElementById("title"); 9 | var href = location.href; 10 | var html = `

    تعلم جافا سكريبت

    ` 11 | document.write(html) 12 | console.log(href); 13 | -------------------------------------------------------------------------------- /Lesson50/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Coder Shiyar 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
    18 | 19 |
    20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /Lesson50/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codershiyar/javascript/2fa0c4b8e35b7d9e8fc48b340e66111594d638f0/Lesson50/logo.png -------------------------------------------------------------------------------- /Lesson50/script.js: -------------------------------------------------------------------------------- 1 | // Coder Shiyar - https://youtube.com/codershiyar 2 | // ----------------------------------------------------------------------------- 3 | // document.images لتحديد عناصر الصور المتواجدة في الصفحة 4 | // document.embeds لتحديد عناصر من نوع امبد المتواجدة في الصفحة 5 | // document.links لتحديد عناصر روابط في المتواجدة الصفحة 6 | // document.forms لتحديد عناصر فورم المتواجدة في الصفحة 7 | // length لمعرفة عدد العناصر من نوع المحدد 8 | // ----------------------------------------------------------------------------- 9 | 10 | for(var items in document.images){ 11 | document.images[items].src = "logo.png"; 12 | document.images[items].width = "200"; 13 | } 14 | console.log(document.forms.length); -------------------------------------------------------------------------------- /Lesson51/website/img1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codershiyar/javascript/2fa0c4b8e35b7d9e8fc48b340e66111594d638f0/Lesson51/website/img1.jpg -------------------------------------------------------------------------------- /Lesson51/website/img2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codershiyar/javascript/2fa0c4b8e35b7d9e8fc48b340e66111594d638f0/Lesson51/website/img2.jpg -------------------------------------------------------------------------------- /Lesson51/website/img3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codershiyar/javascript/2fa0c4b8e35b7d9e8fc48b340e66111594d638f0/Lesson51/website/img3.jpg -------------------------------------------------------------------------------- /Lesson51/website/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 25 | 26 | 29 | 30 |
    31 | 52 | 53 |
    54 | 55 | 56 |
    57 |
    58 |
    59 | About US 60 |
    61 |
    62 |

    63 | I am a teacher and a Software Developer

    64 | Contact us 66 |
    67 | 68 |
    69 | 70 |
    71 | 72 | 73 | 74 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /Lesson51/website/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codershiyar/javascript/2fa0c4b8e35b7d9e8fc48b340e66111594d638f0/Lesson51/website/logo.png -------------------------------------------------------------------------------- /Lesson51/website/script.js: -------------------------------------------------------------------------------- 1 | // Coder Shiyar - https://youtube.com/codershiyar 2 | // ---------------------------------------------------- 3 | 4 | 5 | let arabic = document.getElementById("arabic"); 6 | let english = document.getElementById("english"); 7 | let title = document.getElementById("title"); 8 | let welcome = document.getElementById("welcome-text"); 9 | let about = document.getElementById("about"); 10 | let aboutText = document.getElementById("about-text"); 11 | let contact = document.getElementById("contact"); 12 | 13 | arabic.onclick = ()=>{ 14 | setLanugage("arabic"); 15 | localStorage.setItem("Lang","arabic"); 16 | }; 17 | 18 | english.onclick = ()=>{ 19 | setLanugage("english"); 20 | localStorage.setItem("Lang","english"); 21 | }; 22 | 23 | onload = ()=>{ 24 | setLanugage(localStorage.getItem("Lang")); 25 | }; 26 | function setLanugage(getLanuage){ 27 | if(getLanuage === "arabic"){ 28 | title.innerHTML = "مبرمج شيار"; 29 | welcome.innerHTML = "مرحبا بكم في صفحة مبرمج شيار"; 30 | about.innerHTML = "حولنا"; 31 | aboutText.innerHTML = "انا استاذ برمجيات و مهندس برمجيات"; 32 | contact.innerHTML = "اتصل بنا"; 33 | }else if(getLanuage ==="english"){ 34 | title.innerHTML = "Coder Shiyar"; 35 | welcome.innerHTML = "Welcome to website of Coder Shiyar"; 36 | about.innerHTML = " About US"; 37 | aboutText.innerHTML = " I am a teacher and a Software Developer"; 38 | contact.innerHTML = "Contact us"; 39 | 40 | } 41 | 42 | 43 | } 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /Lesson52/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Coder Shiyar 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |

    13 |
    Test
    14 | 15 | Coder Shiyar

    16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /Lesson52/script.js: -------------------------------------------------------------------------------- 1 | // Event - توضيح 2 | // --------------------------------------------- 3 | // click - يحدث الحدث عندما ينقر المستخدم على عنصر 4 | // contextmenu - يحدث الحدث عندما ينقر المستخدم بزر الماوس الأيمن على عنصر لفتح قائمة السياق 5 | // dblclick - يحدث الحدث عندما ينقر المستخدم نقرًا مزدوجًا على عنصر 6 | // mousedown - يحدث الحدث عندما يضغط المستخدم على زر الماوس فوق عنصر 7 | // mouseenter - يحدث الحدث عند تحريك المؤشر إلى عنصر 8 | // mouseleave - يحدث الحدث عند تحريك المؤشر خارج عنصر 9 | // mousemove - يحدث الحدث عندما يتحرك المؤشر أثناء وجوده فوق عنصر 10 | // mouseout - يحدث الحدث عندما يحرك مستخدم مؤشر الماوس خارج عنصر أو خارج أحد العناصر التابعة له 11 | // mouseover - يحدث الحدث عند تحريك المؤشر على عنصر ، أو على أحد توابعه 12 | // mouseup -يحدث الحدث عندما يقوم مستخدم بوضع اصبعته على زر الماوس فوق عنصر 13 | 14 | document.getElementById("title").addEventListener("mouseup",()=>{ 15 | alert("تم تنفيذ الأوامر"); 16 | }); -------------------------------------------------------------------------------- /Lesson53/script.js: -------------------------------------------------------------------------------- 1 | // onbeforeunload - beforeunload يتم إستخدامها لكي تتمكن من تنفيذ اوامر عندما يقوم المستخدم بالإغلاق الصفحة او إعادة تحميل الصفحة 2 | 3 | // onbeforeprint - beforeprint يتم استخدامها لتنفيذ اوامر قبل بدء عملية الطبع 4 | 5 | // onafterprint - afterprint يتم استخدامها لتنفيذ الأوامر بعد اكتمال عملية الطبع 6 | -------------------------------------------------------------------------------- /Lesson54/app.js: -------------------------------------------------------------------------------- 1 | // Event - addEventListener 2 | // --------------------------------------------------------- 3 | // onkeyup - keyup لتنفيذ الأوامر عند نقر على احد ازرار كيبورد ورفع اصبع عنها 4 | // onkeydown - keydown لتنفيذ الأوامر بمجرد نقر على احد ازرار كيبورد 5 | //------------------------------------ 6 | // لتنفيذ الأوامر بمجرد نقر على احد ازرار كيبورد - يعمل فقط على ازرار حروف وارقام 7 | // onkeypress - keypress 8 | //------------------------------------ 9 | // method : key code 10 | // --------------------------------------------------------- 11 | // Coder Shiyar - YouTube : http://youtube.com/codershiyar 12 | //----------------------------------------------------------- 13 | 14 | document.addEventListener("keyup",(event)=>{ 15 | if(event.key === "Enter"){ 16 | alert("قمت بنقر على زر انتر"); 17 | } 18 | 19 | }); 20 | 21 | function run_key(event){ 22 | // if(event.key == "1"){ 23 | // location.reload(); 24 | // } 25 | // if(event.code === "KeyB"){ 26 | // alert(event.code); 27 | // } 28 | // alert(event.key); 29 | } 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /Lesson54/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Coder Shiyar 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Lesson55/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 |

    تعلم جافا سكريبت

    13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Lesson55/script.js: -------------------------------------------------------------------------------- 1 | class MyPage{ 2 | 3 | constructor(){ 4 | var text = document.getElementById("text"); 5 | 6 | text.addEventListener("copy",()=>{ 7 | this.copy(); 8 | }); 9 | 10 | var input = document.getElementById("input"); 11 | input.addEventListener("paste",()=>{ 12 | this.paste(); 13 | }) ; 14 | 15 | input.addEventListener("cut",()=>{ 16 | this.cut(); 17 | }); 18 | 19 | } 20 | 21 | copy(){ 22 | alert("تم نسخ النص"); 23 | } 24 | 25 | paste(){ 26 | alert("تم لصق النص"); 27 | } 28 | 29 | cut(){ 30 | alert("تم قص النص"); 31 | } 32 | } 33 | 34 | onload = new MyPage(); 35 | 36 | 37 | function copy(){ 38 | alert("تم نسخ النص"); 39 | } 40 | 41 | function paste(){ 42 | alert("تم لصق النص"); 43 | } 44 | 45 | function cut(){ 46 | alert("تم قص النص"); 47 | } 48 | 49 | // oncopy = copy عند نسخ 50 | // onpaste = paste عند لصق 51 | // oncut = cut عند قص -------------------------------------------------------------------------------- /Lesson56/app.js: -------------------------------------------------------------------------------- 1 | // event - addEventListener 2 | // ------------------------------------------- 3 | // onsubmit - submit تنفيذ أوامر عند يتم نقر على زر سوبميت ويحدث ارسال بنجاح 4 | // -------------------------------------------- 5 | // preventDefault() 6 | 7 | let email_form = document.getElementById("email_form"); 8 | email_form.addEventListener("submit",(error)=>{ 9 | 10 | let email = document.getElementById("email"); 11 | 12 | if(email.value.indexOf("@gmail") != -1){ 13 | 14 | return true; 15 | 16 | }else{ 17 | email.style.borderColor = "red"; 18 | document.getElementById("email_error").innerHTML = "ايميل غير صالح , قم بوضع ايميل من"; 19 | error.preventDefault(); 20 | } 21 | 22 | 23 | }); 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /Lesson56/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Coder Shiyar 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
    13 | 14 |
    15 |
    16 | 17 |
    18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /Lesson57/app.js: -------------------------------------------------------------------------------- 1 | 2 | // event - addEventListener 3 | //--------------------------------------------- 4 | // oninvalid - invalid تنفيذ أوامر عند يتم نقر على زر سوبميت ويحدث خطا بفورم 5 | // oninput - input لتنفيذ الأوامر عندما يقوم المستخدم بضغط على حقل المحدد لكتابة شي ضمنها 6 | 7 | // -------------------------------------------- 8 | 9 | // input = حقل | مدخل 10 | 11 | // setCustomValidity() لإعادة تعيين رسالة الخطأ الأفتراضية 12 | // validationMessage للحصول على رسالة الخطأ عند حدوث خطا ضمن احد حقول 13 | // validity.typeMismatch لتحقق إن كان نوع البيانات الذي إدخاله مستخدم صالحة او لا 14 | // validity.valueMissing للتحقق إن كان حقل المحدد يفقد للبيانات او لا 15 | 16 | 17 | let email_input = document.getElementById("email"); 18 | email_input.addEventListener("invalid", ()=>{ input_error();}); 19 | 20 | 21 | email_input.addEventListener("input", ()=>{ input_error();}); 22 | 23 | function input_error(){ 24 | if(email_input.validity.valueMissing){ 25 | email_input.setCustomValidity("لم تقم بوضع بيانات ضمن هذا الحقل"); 26 | }else if(email_input.validity.typeMismatch){ 27 | email_input.setCustomValidity("بيانات غير صالحة"); 28 | }else{ 29 | email_input.setCustomValidity(""); 30 | return true; 31 | } 32 | document.getElementById("error_message").innerText = email_input.validationMessage; 33 | } 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | // onchange - change لتنفيذ الاوامر عند حدوث اي تغيرات على العنصر المحدد عندما يفقد 49 | // select العنصر محدد التركيز وايضا يستخدم مع عنصر 50 | -------------------------------------------------------------------------------- /Lesson57/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Coder Shiyar 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
    13 | 14 | 15 |
    16 | 17 |
    18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /Lesson58/app.js: -------------------------------------------------------------------------------- 1 | // Event - addEventListener 2 | //------------------------------------------ 3 | // onchange - change 4 | 5 | // يستخدم هذا افنت لكي تتمكن من تنفيذ اوامر في كل مرة يتم تغير قيمة 6 | // select , input , checkbox 7 | 8 | 9 | document.getElementById("color").addEventListener("change", ()=>{ 10 | 11 | document.body.style.background = document.getElementById('color').value; 12 | }); 13 | 14 | document.getElementById("checkbox").addEventListener("change",()=>{ 15 | 16 | alert("تم تنفيذ الأوامر"); 17 | }); 18 | 19 | 20 | document.getElementById("password").addEventListener("input",()=>{ 21 | alert("تم تنفيذ الأوامر"); 22 | }); -------------------------------------------------------------------------------- /Lesson58/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Coder Shiyar 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /Lesson59/app.js: -------------------------------------------------------------------------------- 1 | // The btoa() method encodes a string in base-64. 2 | // btoa() : يتم استخدامها لتشفير بيانات النصية إلى تشفير بنظام القاعدة64 3 | // ---------------------------------------------------------------------------- 4 | // This method uses the "A-Z", "a-z", "0-9", "+", "/" and "=" characters to encode the string. 5 | // هذا عنصر يستخدم احرف اللغة الإنجليزية , الصغيرة والكبيرة , الأرقام و علامة 6 | // + و / و = 7 | // عندما يقوم بتشفير النص 8 | //------------------------------------------------------------------------------ 9 | // Tip: Use the atob() method to decode a base-64 encoded string. 10 | // atob() : يتم استخدام هذا العنصر لفك تشفير نص مشفر بنظام قاعدة64 11 | 12 | let text = "Coder Shiyar"; 13 | let encode_text = window.btoa(text); 14 | 15 | let decode_text = window.atob(encode_text); 16 | 17 | 18 | let textarea = document.getElementById("text"); 19 | let result = document.getElementById("result"); 20 | let select = document.getElementById("select"); 21 | 22 | textarea.addEventListener("input",()=>{ 23 | make_result(); 24 | }); 25 | select.addEventListener("change",()=>{ 26 | make_result(); 27 | }); 28 | function make_result(){ 29 | if(select.value == "decode"){ 30 | result.value = window.atob(textarea.value) ; 31 | }else{ 32 | result.value = window.btoa(textarea.value) ; 33 | } 34 | } 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | // Coder Shiyar - YouTube : http://youtube.com/codershiyar 60 | 61 | -------------------------------------------------------------------------------- /Lesson59/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Coder Shiyar 5 | 6 | 7 | 8 | 40 | 41 | 42 | 43 | 44 | 51 | 52 | 53 |
    54 | 55 |

    Text - نص

    56 | 60 | 61 | 62 | 63 |

    Result - نتيجة

    64 | 67 | 68 |
    69 | 70 |
    71 |
    72 | حولنا 73 |
    74 |
    75 |
    76 |

    موقع لفك تشفير النص المشفر بنظام 77 | القاعدة 64 , او تشفيرها بنظام القاعدة 64

    78 | 79 |
    80 |
    81 |
    82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /Lesson59/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codershiyar/javascript/2fa0c4b8e35b7d9e8fc48b340e66111594d638f0/Lesson59/logo.png -------------------------------------------------------------------------------- /Lesson6/app.js: -------------------------------------------------------------------------------- 1 | // القواعد العامة لإنشاء أسماء للمتغيرات هي: 2 | // --------------------------------------------------------------------------------- 3 | // يمكن أن تحتوي الأسماء على أحرف وأرقام وعلامة ناقص ال سفلية وعلامات الدولار. 4 | // يجب أن تبدأ الأسماء بحرف 5 | // _ يمكن أن تبدأ الأسماء أيضًا بـ $ و 6 | // الأسماء حساسة لحالة الأحرف , هناك فرق بين حرف صغير وحرف كبير 7 | // لا يمكن استخدام الكلمات المحجوزة كأسماء متغيرات 8 | 9 | 10 | 11 | // اسماء variable الذي يمكنك استخدامها 12 | // var i ; 13 | // var Name; 14 | // var name; 15 | // var _name; 16 | // var $name; 17 | // var TheNumberIsVeryBig; 18 | // var my_name_is; 19 | 20 | // // امثلة من اسماء غير ممكنة 21 | // var 12yaer; // _ لانه بدات بالرقم بدل الحرف او 22 | // var My-Name; // لانه اسم يحتوي على اشكال خاصة فهذا شي غير مسموح 23 | // var My&name; // لانه اسم يحتوي على اشكال خاصة فهذا شي غير مسموح 24 | // var break; // لانه يحتوي على كلمات محجوزة في جافا سكريبت 25 | // var false; // ايضا لانه يحتوي على كلمات محجوزة في جافا سكريبت 26 | 27 | 28 | 29 | // The general rules for constructing names for variables (unique identifiers) are: 30 | // --------------------------------------------------------------------------------- 31 | // Names can contain letters, digits, underscores, and dollar signs. 32 | // Names must begin with a letter 33 | // Names can also begin with $ and _ (but we will not use it in this tutorial) 34 | // Names are case sensitive (y and Y are different variables) 35 | // Reserved words (like JavaScript keywords) cannot be used as names 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /Lesson6/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Coder Shiyar 7 | 8 | 9 | 10 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Lesson61/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Coder Shiyar 11 | 12 | 47 | 48 | -------------------------------------------------------------------------------- /Lesson62/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Coder Shiyar 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Lesson62/script.js: -------------------------------------------------------------------------------- 1 | 2 | var deviceSystem = navigator.userAgent.toLowerCase(); 3 | 4 | // لأجل تنفيذ الأوامر على اجهزة بنظام اندرويد 5 | 6 | if(deviceSystem.includes("android")){ 7 | alert("انا مستخدم اندوريد"); 8 | } 9 | 10 | // لأجل تنفيذ الأوامر على اجهزة بنظام ايفون 11 | if(deviceSystem.includes("iphone")){ 12 | alert("انا مستخدم ايفون"); 13 | } 14 | 15 | // لأجل تنفيذ الأوامر على اجهزة بنظام ايباد 16 | if(deviceSystem.includes("ipad")){ 17 | alert("انا مستخدم ايباد"); 18 | } 19 | 20 | // لأجل تنفيذ الأوامر على اجهزة بنظام ويندوز 21 | if(deviceSystem.includes("windows")){ 22 | alert("انا مستخدم ويندوز"); 23 | } 24 | 25 | -------------------------------------------------------------------------------- /Lesson63/script.js: -------------------------------------------------------------------------------- 1 | 2 | var deviceSystem = navigator.userAgent.toLowerCase(); 3 | 4 | // لأجل تنفيذ الأوامر على اجهزة بنظام اندرويد 5 | 6 | if(deviceSystem.includes("android")){ 7 | alert("انا مستخدم اندوريد"); 8 | } 9 | 10 | // لأجل تنفيذ الأوامر على اجهزة بنظام ايفون 11 | if(deviceSystem.includes("iphone")){ 12 | alert("انا مستخدم ايفون"); 13 | } 14 | 15 | // لأجل تنفيذ الأوامر على اجهزة بنظام ايباد 16 | if(deviceSystem.includes("ipad")){ 17 | alert("انا مستخدم ايباد"); 18 | } 19 | 20 | // لأجل تنفيذ الأوامر على اجهزة بنظام ويندوز 21 | if(deviceSystem.includes("windows")){ 22 | alert("انا مستخدم ويندوز"); 23 | } 24 | 25 | -------------------------------------------------------------------------------- /Lesson64/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Coder Shiyar 5 | 6 | 7 | 57 | 58 | 59 | 60 |
    61 | × 62 | 63 | 64 |

    SHIYAR APP

    65 |

    Free on Google Play

    66 |     67 | 68 |
    69 | 70 | 71 | 101 | 102 | 103 | -------------------------------------------------------------------------------- /Lesson64/logo_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codershiyar/javascript/2fa0c4b8e35b7d9e8fc48b340e66111594d638f0/Lesson64/logo_icon.png -------------------------------------------------------------------------------- /Lesson65/app.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0px; 3 | } 4 | #iphone{ 5 | width: 100%; 6 | display: flex; 7 | justify-content: center; 8 | border-bottom: 2px solid #a9a9a8; 9 | padding: 3px 0px; 10 | display: none; 11 | } 12 | #iphone img{ 13 | height: 65px; 14 | width: 65px; 15 | object-fit: contain; 16 | border-radius: 50%; 17 | margin-right: 13px; 18 | } 19 | #close-iphone{ 20 | font-weight: bold; 21 | font-size: 26px; 22 | line-height: 65px; 23 | color: #888888; 24 | margin: 0px 13px; 25 | cursor: pointer; 26 | } 27 | #text-iphone{ 28 | width: 40%; 29 | } 30 | #app_name-iphone{ 31 | font-weight: bold; 32 | font-family: Arial, Helvetica, sans-serif; 33 | font-size: 18px; 34 | padding: 11px 0px; 35 | color: black; 36 | } 37 | #app_title-iphone{ 38 | font-size: 14px; 39 | font-family: monospace; 40 | color: black; 41 | } 42 | #iphone button{ 43 | width: 25%; 44 | background: rgb(255, 54, 54); 45 | color: white; 46 | height: 40px; 47 | border:0px; 48 | margin-top: 15px; 49 | border-radius: 14px; 50 | } -------------------------------------------------------------------------------- /Lesson65/app.js: -------------------------------------------------------------------------------- 1 | let section_iphone = document.getElementById("iphone"); 2 | 3 | // لجلب بيانات عن جهاز المستخدم 4 | let user_device = navigator.userAgent.toLocaleLowerCase(); 5 | 6 | // للتحقق من إن كان مستخدم يملك جهاز يعمل بنظام ايفون او لا 7 | if(user_device.includes("iphone")){ 8 | 9 | // لتاخير عرض الصندوق حسب المدة الذي تحدده بعد فتح مستخدم للموقعك 10 | setTimeout(()=>{ 11 | section_iphone.style.display = "flex"; 12 | },5*1000); 13 | 14 | // لكي يودي المستخدم إلى صفحة تحميل تطبيق عند نقر على الزر 15 | let app_downlaod = document.getElementById("app_downlaod-iphone"); 16 | app_downlaod.addEventListener("click", ()=>{ 17 | window.open("http://codershiyar.com/app","_blank") 18 | }); 19 | }else{ 20 | // لإخفاء العنصر عندما يكون مستخدم جهازه يعمل بنظام ليس بنظام ايفون 21 | section_iphone.style.display = "none"; 22 | } 23 | 24 | // لإخفاء العنصر عند نقر على علامة اكس 25 | let close_iphone = document.getElementById("close-iphone"); 26 | close_iphone.addEventListener("click", ()=>{ 27 | section_iphone.style.display = "none"; 28 | }); -------------------------------------------------------------------------------- /Lesson65/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Coder Shiyar 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
    13 | × 14 | 15 | 16 |

    SHIYAR APP

    17 |

    Free on Iphone Story

    18 |     19 | 20 |
    21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /Lesson65/logo_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codershiyar/javascript/2fa0c4b8e35b7d9e8fc48b340e66111594d638f0/Lesson65/logo_icon.png -------------------------------------------------------------------------------- /Lesson66/app.js: -------------------------------------------------------------------------------- 1 | // window.open(URL); يتم استخدامها لفتح رابط الذي تحدده في نافذة جديدة 2 | // window.top.close(); يتم استخدامها لإغلاق النافذة عندما يتم تنفيذها 3 | // window.stop(); يتم استخدامها لإيقاف تحميل النافذة عندما يتم تنفيذها 4 | // window.print(); يتم استخدامها لفتح طابعة لطبع صفحة عندما يتم تنفيذها 5 | //------------------------------------------------------------------ 6 | // Coder Shiyar - YouTube : http://youtube.com/codershiyar 7 | //--------------------------------------------------- 8 | 9 | 10 | document.getElementById("open_link").addEventListener("click",()=>{ 11 | 12 | window.open("http://codershiyar.com"); 13 | }); 14 | 15 | // document.getElementById("open_print").addEventListener("click",()=>{ 16 | // window.print(); 17 | // }); 18 | 19 | // window.top.close(); 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /Lesson66/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Coder Shiyar 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Lesson67/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Coder Shiyar 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Lesson67/script.js: -------------------------------------------------------------------------------- 1 | // window.prompt("message");لعرض شاشة منبثقة للمستخدم بها حقل يمكن لمستخدم كتابة نص ضمنها 2 | //---------------------------------------------------------------------------- 3 | // window.confirm("message");يتم استخدامها لعرض شاشة منبثة للمستخدم بها خيار تاكيد او الغاء 4 | //---------------------------------------------------------------------------- 5 | // Coder Shiyar - YouTube : http://youtube.com/codershiyar 6 | //-------------------------------------------------------------------------- 7 | // var username = prompt("ضع اسم المستخدم : "); 8 | // var password = prompt("ضع كلمة المرور"); 9 | // if(username === "admin1" && password ==="1234"){ 10 | // alert("بيانات صحيحة"); 11 | // }else{ 12 | // alert("بيانات غير صحيحة"); 13 | // } 14 | 15 | 16 | var confirm = confirm("هل انت متاكد انك ترغب بقيام بذلك"); 17 | 18 | if(confirm == true){ 19 | alert("قمت بنقر على موافق"); 20 | } -------------------------------------------------------------------------------- /Lesson68/app.js: -------------------------------------------------------------------------------- 1 | // remove(); يتم استخدامها لحذف العنصر الذي تحدده 2 | // click(); يتم استخدامها لنقر على العنصر الذي تحدده 3 | //--------------------------------------------------- 4 | // Coder Shiyar - YouTube : http://youtube.com/codershiyar 5 | //--------------------------------------------------- 6 | 7 | 8 | // 9 | 10 | document.getElementById("remove").addEventListener("click",()=>{ 11 | document.getElementById("text").remove(); 12 | }); 13 | 14 | document.getElementById("goToLink").addEventListener("click", ()=>{ 15 | document.getElementById("link").click(); 16 | }); 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | // ------------------------ يتم استخدامها لإعادة تعيين قيم جميع العناصر في نموذج 48 | // reset(); (مثل النقر على زر إعادة الضبط) 49 | // submit(); (يتم استخدامها لعمل سوبميت ل فورم(مثل النقر على زر من نوع سوبميت 50 | // focus(); يتم استخدامها لإضافة تركيز إلى عناصر الذي يمكنك اضافة تركيز لها 51 | // blur(); يتم استخدامها للحذف التركيز من عنصر مضاف اليه تركيز 52 | -------------------------------------------------------------------------------- /Lesson68/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Coder Shiyar 5 | 6 | 7 | 8 | 9 | 10 | 11 |

    Coder Shiyar

    12 | http://codershiyar.com 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /Lesson69/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /Lesson69/js.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codershiyar/javascript/2fa0c4b8e35b7d9e8fc48b340e66111594d638f0/Lesson69/js.jpg -------------------------------------------------------------------------------- /Lesson69/script.js: -------------------------------------------------------------------------------- 1 | var idLogo = document.getElementById("logo"); 2 | 3 | // if(idLogo.hasAttribute){ 4 | // alert("نعم"); 5 | // } 6 | 7 | 8 | console.log(idLogo.getAttribute("class")); 9 | 10 | idLogo.setAttribute("src","js.jpg"); 11 | idLogo.setAttribute("width","40%"); 12 | idLogo.setAttribute("height","300px"); 13 | 14 | idLogo.removeAttribute("class"); 15 | idLogo.removeAttribute("height"); 16 | 17 | // hasAttribute 18 | // getAttribute 19 | // setAttribute 20 | // removeAttribute 21 | 22 | if(idLogo.getAttribute("src")==null){ 23 | idLogo.removeAttribute("src"); 24 | } -------------------------------------------------------------------------------- /Lesson7/app.js: -------------------------------------------------------------------------------- 1 | var name = "Coder Shiyar" 2 | var html = ` 3 |

    تعلم برمجة مع كودر شيار

    4 |

    جافا سكريبت

    5 | ` 6 | 7 | document.write(html) 8 | -------------------------------------------------------------------------------- /Lesson7/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Coder Shiyar 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Lesson70/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |

    16 | 17 | 18 | -------------------------------------------------------------------------------- /Lesson70/js.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codershiyar/javascript/2fa0c4b8e35b7d9e8fc48b340e66111594d638f0/Lesson70/js.jpg -------------------------------------------------------------------------------- /Lesson70/script.js: -------------------------------------------------------------------------------- 1 | var months = ["January","March","February","March"]; 2 | 3 | 4 | 5 | // function removeLastItem(){ 6 | // months.push("April"); 7 | 8 | // document.getElementById("result").innerHTML =months; 9 | // } 10 | 11 | var numberPart1 = [1,2,3,4,5]; 12 | var numberPart2 = [6,7,8,9,10]; 13 | var numbers = numberPart1.concat(numberPart2); 14 | 15 | 16 | for(var counter = 0; counter"; 18 | } 19 | 20 | function addItem(){ 21 | 22 | var inputValue = document.getElementById("text").value; 23 | months.unshift(inputValue); 24 | document.getElementById("result").innerHTML =months; 25 | 26 | } 27 | // length 28 | // indexOf() 29 | // lastIndexOf() 30 | 31 | // pop() لحذف اخر قيمة من ارراي 32 | // push() يقوم باضافة قيمة جديدة لنهاية ارراي 33 | // unshift() يقوم بإضافة قيمة جديدة لبداية ارراي 34 | // sort() 35 | 36 | // includes() هل يحتوي القيمة الذي نحددها 37 | 38 | // concat() لدمج ارراي 39 | 40 | 41 | -------------------------------------------------------------------------------- /Lesson71/app.js: -------------------------------------------------------------------------------- 1 | // --------------------------------------------------------------- 2 | // setInterval - يستخدم لضبط تكرار تنفيذ اوامر الذي تحدده 3 | // --------------------------------------------------------------- 4 | // clearInterval - يستخدم لإيقاف تكرار تنفيذ اوامر 5 | 6 | // function runApp(){ 7 | // alert("تم تنفيذ اوامر") 8 | // } 9 | // setInterval(runApp,3*1000) 10 | 11 | 12 | // setInterval(function(){ 13 | // alert("تم تنفيذ اوامر") 14 | // },3*1000) 15 | var myInterval; 16 | var counter = 0; 17 | document.getElementById("setInterval").onclick = ()=>{ 18 | myInterval = setInterval(()=>{ 19 | counter = counter + 1; 20 | document.getElementById("counter").innerText = counter; 21 | if(counter == 10){ 22 | clearInterval(myInterval) 23 | alert("اكتمل ") 24 | } 25 | },1*1000) 26 | } 27 | 28 | document.getElementById("removeInterval").onclick = ()=>{ 29 | clearInterval(myInterval) 30 | } 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /Lesson71/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Coder Shiyar 7 | 8 | 9 | 10 | 11 | 12 |

    13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Lesson72/app.js: -------------------------------------------------------------------------------- 1 | function test(){ 2 | console.log("تجربة") 3 | } 4 | 5 | var interval; 6 | 7 | document.getElementById("startInterval").onclick = 8 | ()=>{ 9 | interval = setInterval(test, 2000 ) 10 | } 11 | 12 | document.getElementById("stopInterval").onclick = 13 | ()=>{ 14 | clearInterval(interval) 15 | } -------------------------------------------------------------------------------- /Lesson72/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Coder Shiyar - JavaScript 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Lesson72/script.js: -------------------------------------------------------------------------------- 1 | 2 | class MyPage{ 3 | constructor(){ 4 | this.myInterval = setInterval(()=>{ 5 | 6 | this.testInterVal(); 7 | this.test2(); 8 | },4000); 9 | 10 | document.getElementById("stop").addEventListener("click",()=>{ 11 | this.stopInterVal(); 12 | }); 13 | 14 | } 15 | testInterVal(){ 16 | alert("يعمل"); 17 | } 18 | test2(){ 19 | console.log("test"); 20 | } 21 | stopInterVal(){ 22 | clearInterval(this.myInterval); 23 | } 24 | } 25 | onload = new MyPage(); 26 | 27 | // function test(){ 28 | // alert("HI"); 29 | // } 30 | // var myInterval = setInterval(test,3000); 31 | 32 | // function stopInterval(){ 33 | // clearInterval(myInterval); 34 | // } 35 | 36 | -------------------------------------------------------------------------------- /Lesson73/img/css.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codershiyar/javascript/2fa0c4b8e35b7d9e8fc48b340e66111594d638f0/Lesson73/img/css.jpg -------------------------------------------------------------------------------- /Lesson73/img/html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codershiyar/javascript/2fa0c4b8e35b7d9e8fc48b340e66111594d638f0/Lesson73/img/html.png -------------------------------------------------------------------------------- /Lesson73/img/js.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codershiyar/javascript/2fa0c4b8e35b7d9e8fc48b340e66111594d638f0/Lesson73/img/js.jpg -------------------------------------------------------------------------------- /Lesson73/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /Lesson73/script.js: -------------------------------------------------------------------------------- 1 | class Slider{ 2 | constructor(){ 3 | this.images = []; 4 | this.images[0] = "img/js.jpg"; 5 | this.images[1] = "img/css.jpg"; 6 | this.images[2] = "img/html.png"; 7 | 8 | this.links=[]; 9 | this.links[0]= "https://www.youtube.com/playlist?list=PLMTdZ61eBnyp1nMM8mGRzpwuu6FNxFy0D"; 10 | this.links[1] = "#"; 11 | this.links[2] = "#"; 12 | this.counter = 0; 13 | 14 | this.playSlider(); 15 | 16 | setInterval(()=>{ 17 | this.playSlider(); 18 | },3000); 19 | 20 | } 21 | playSlider(){ 22 | if(this.counter< this.images.length - 1){ 23 | this.counter++; 24 | } 25 | else{ 26 | this.counter = 0; 27 | } 28 | 29 | document.slider_show.src = this.images[this.counter]; 30 | document.getElementById("LinkImg").href= this.links[this.counter]; 31 | 32 | 33 | } 34 | } 35 | onload = new Slider(); 36 | -------------------------------------------------------------------------------- /Lesson75/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 11 | 12 | 13 | 14 | 15 |

    16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /Lesson75/js.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codershiyar/javascript/2fa0c4b8e35b7d9e8fc48b340e66111594d638f0/Lesson75/js.jpg -------------------------------------------------------------------------------- /Lesson75/script.js: -------------------------------------------------------------------------------- 1 | var date = new Date(); 2 | var time = document.getElementById("time"); 3 | time.innerHTML = date.getDay().toLocaleString('ar-IQ'); 4 | 5 | // Method Description 6 | // getFullYear() Get the year as a four digit number (yyyy) 7 | // getMonth() Get the month as a number (0-11) 8 | // getDate() Get the day as a number (1-31) 9 | // getHours() Get the hour (0-23) 10 | // getMinutes() Get the minute (0-59) 11 | // getSeconds() Get the second (0-59) 12 | // getMilliseconds() Get the millisecond (0-999) 13 | // getTime() Get the time (milliseconds since January 1, 1970) 14 | // getDay() Get the weekday as a number (0-6) 15 | // Date.now() Get the time. ECMAScript 5. 16 | 17 | // getUTCDate() Same as getDate(), but returns the UTC date 18 | // getUTCDay() Same as getDay(), but returns the UTC day 19 | // getUTCFullYear() Same as getFullYear(), but returns the UTC year 20 | // getUTCHours() Same as getHours(), but returns the UTC hour 21 | // getUTCMilliseconds() Same as getMilliseconds(), but returns the UTC milliseconds 22 | // getUTCMinutes() Same as getMinutes(), but returns the UTC minutes 23 | // getUTCMonth() Same as getMonth(), but returns the UTC month 24 | // getUTCSeconds() Same as getSeconds(), but returns the UTC seconds -------------------------------------------------------------------------------- /Lesson77/time.css: -------------------------------------------------------------------------------- 1 | #outside_box{ 2 | max-width: 400px; 3 | max-height: 300px; 4 | height: 100%; 5 | width:100%; 6 | position: absolute; 7 | top: 50%; 8 | left: 50%; 9 | transform: translate(-50%,-50%); 10 | background: rgba(0, 0, 0, 0.514); 11 | } 12 | #inside_box{ 13 | position: absolute; 14 | top: 50%; 15 | left: 50%; 16 | transform: translate(-50%,-50%); 17 | width: 340px; 18 | height: 240px; 19 | text-align: center; 20 | background-color: aqua; 21 | } 22 | #time{ 23 | width: 100%; 24 | height: 200px; 25 | color: aliceblue; 26 | font-size: 50px; 27 | font-family: 'Saira Stencil One', cursive; 28 | background-color: black; 29 | line-height: 200px; 30 | } 31 | #date{ 32 | height: 40px; 33 | background: aliceblue; 34 | font-size: 22px; 35 | font-family: 'Saira Stencil One', cursive; 36 | } 37 | #setTime,#setDate{ 38 | margin: 0%; 39 | } 40 | input[type="color" i] { 41 | border:0px solid black; 42 | background-color: black; 43 | } -------------------------------------------------------------------------------- /Lesson77/time.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Coder Shiyar 8 | 9 | 10 | 11 | 12 | 13 |
    14 |
    15 |
    16 |

    23:00

    17 |
    18 |
    19 |

    11-11-2019

    20 |
    21 |
    22 | 23 |
    24 |
    25 |
    26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /Lesson77/time.js: -------------------------------------------------------------------------------- 1 | function updateDate(){ 2 | var date = new Date(); 3 | var setTime = document.getElementById("setTime"); 4 | setTime.innerHTML = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds(); 5 | var setDate = document.getElementById("setDate"); 6 | setDate.innerHTML =date.getDate()+"-"+parseInt(date.getMonth()+1) + " - " + date. getFullYear(); 7 | } 8 | 9 | setInterval(updateDate,100); 10 | onload = updateDate(); 11 | function getColor(){ 12 | var getColor = document.getElementById("setColor").value; 13 | localStorage.setItem("Color",getColor); 14 | document.getElementById("time").style.background = localStorage.getItem("Color"); 15 | document.getElementById("body").style.background =localStorage.getItem("Color"); 16 | } 17 | 18 | function setColor(){ 19 | document.getElementById("setColor").value = localStorage.getItem("Color"); 20 | document.getElementById("time").style.background =localStorage.getItem("Color"); 21 | document.getElementById("body").style.background = localStorage.getItem("Color"); 22 | } 23 | 24 | setInterval(setColor,100); -------------------------------------------------------------------------------- /Lesson78/time.css: -------------------------------------------------------------------------------- 1 | #outside_box{ 2 | max-width: 400px; 3 | max-height: 300px; 4 | height: 100%; 5 | width:100%; 6 | position: absolute; 7 | top: 50%; 8 | left: 50%; 9 | transform: translate(-50%,-50%); 10 | background: rgba(0, 0, 0, 0.514); 11 | } 12 | #inside_box{ 13 | position: absolute; 14 | top: 50%; 15 | left: 50%; 16 | transform: translate(-50%,-50%); 17 | width: 340px; 18 | height: 240px; 19 | text-align: center; 20 | background-color: aqua; 21 | } 22 | #time{ 23 | width: 100%; 24 | height: 200px; 25 | color: aliceblue; 26 | font-size: 50px; 27 | font-family: 'Saira Stencil One', cursive; 28 | background-color: black; 29 | line-height: 200px; 30 | } 31 | #date{ 32 | height: 40px; 33 | background: aliceblue; 34 | font-size: 22px; 35 | font-family: 'Saira Stencil One', cursive; 36 | } 37 | #setTime,#setDate{ 38 | margin: 0%; 39 | } 40 | input[type="color" i] { 41 | border:0px solid black; 42 | background-color: black; 43 | } -------------------------------------------------------------------------------- /Lesson78/time.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Coder Shiyar 8 | 9 | 10 | 11 | 12 | 13 |
    14 |
    15 |
    16 |

    23:00

    17 |
    18 |
    19 |

    11-11-2019

    20 |
    21 |
    22 | 23 |
    24 |
    25 |
    26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /Lesson78/time.js: -------------------------------------------------------------------------------- 1 | function updateDate(){ 2 | var date = new Date(); 3 | var setTime = document.getElementById("setTime"); 4 | setTime.innerHTML = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds(); 5 | var setDate = document.getElementById("setDate"); 6 | setDate.innerHTML =date.getDate()+"-"+parseInt(date.getMonth()+1) + " - " + date. getFullYear(); 7 | } 8 | 9 | setInterval(updateDate,100); 10 | onload = updateDate(); 11 | function getColor(){ 12 | var getColor = document.getElementById("setColor").value; 13 | localStorage.setItem("Color",getColor); 14 | document.getElementById("time").style.background = localStorage.getItem("Color"); 15 | document.getElementById("body").style.background =localStorage.getItem("Color"); 16 | } 17 | 18 | function setColor(){ 19 | document.getElementById("setColor").value = localStorage.getItem("Color"); 20 | document.getElementById("time").style.background =localStorage.getItem("Color"); 21 | document.getElementById("body").style.background = localStorage.getItem("Color"); 22 | } 23 | 24 | setInterval(setColor,100); -------------------------------------------------------------------------------- /Lesson8/app.js: -------------------------------------------------------------------------------- 1 | // Arithmetic Operators - العمليات الحسابية 2 | // ---------------------------------------------------------- 3 | // Operator Description الوصف 4 | // + Addition الجمع 5 | // - Subtraction الطرح 6 | // * Multiplication الضرب 7 | // ** Exponentiation مضاعفة قوة العدد 8 | // / Division القسمة 9 | // % Modulus للعرض الباقي 10 | // ++ Increment للزيادة 1 للعدد 11 | // -- Decrement للنقص 1 من العدد 12 | var number1 = 10; 13 | var number2 = 20; 14 | number1 += 2 15 | 16 | console.log( 10+2-2+ 3*4 / 2 ) 17 | 18 | // ---------------------------------------------------------- 19 | // Assignment Operators - عوامل إسناد قيمة 20 | // ---------------------------------------------------------- 21 | // Operator Example مثال Same As مشابه 22 | // = x = y x = y 23 | // += x += y x = x + y 24 | // -= x -= y x = x - y 25 | // *= x *= y x = x * y 26 | // /= x /= y x = x / y 27 | // %= x %= y x = x % y 28 | // **= x **= y x = x ** y 29 | -------------------------------------------------------------------------------- /Lesson8/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Coder Shiyar 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Lesson8/script.js: -------------------------------------------------------------------------------- 1 | var number = 4; 2 | // console.log(++number); 3 | // Operator Description الوصف 4 | // + Addition الجمع 5 | // - Subtraction الطرح 6 | // * Multiplication الضرب 7 | // ** Exponentiation مضاعفة قوة العدد 8 | // / Division القسمة 9 | // % Modulus للعرض الباقي 10 | // ++ Increment للزيادة 1 للعدد 11 | // -- Decrement للنقص 1 من العدد 12 | 13 | // var firstName = "Shiyar"; 14 | // var lastName = " Jamo"; 15 | // firstName += lastName; 16 | 17 | var number1 = 10; 18 | var number2 = 20; 19 | 20 | number2/=number1; 21 | 22 | 23 | console.log(number2); 24 | 25 | // Operator Example مثال Same As مشابه 26 | // = x = y x = y 27 | // += x += y x = x + y 28 | // -= x -= y x = x - y 29 | // *= x *= y x = x * y 30 | // /= x /= y x = x / y 31 | // %= x %= y x = x % y 32 | // **= x **= y x = x ** y 33 | -------------------------------------------------------------------------------- /Lesson80/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Coder Shiyar 5 | 6 | 7 | 14 | 15 | 16 | 17 | 18 | 19 |
    20 | Coder Shiyar 21 |
    22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /Lesson80/script.js: -------------------------------------------------------------------------------- 1 | // methods of classList - وظيفة 2 | // -------------------------------------------------------------------------------------- 3 | // add(class1, class2, ...) لإضافة كلاس او اكثر إلى عنصر المحدد 4 | // contains(class) لتحقق إن كان الكلاس الذي تحدده يتواجد في عنصر المحدد او لا 5 | // remove(class1, class2, ...) لحذف كلاس او اكثر من كلاس من عنصر المحدد 6 | // item(index) لمعرفة أسم كلاس الذي يتواجد في تمركز الذي تحدده 7 | // length لمعرفة عدد اسماء كلاسات متواجد ضمن عنصر المحدد 8 | // -------------------------------------------------------------------------------------- 9 | 10 | // document.getElementById("content").classList.add("text","text2"); 11 | 12 | // var isContains = document.getElementById("content").classList.contains("div3"); 13 | // alert(isContains); 14 | 15 | // document.getElementById("content").classList.remove("div2","div3"); 16 | 17 | // alert(document.getElementById("content").classList.item(3)); 18 | 19 | // alert(document.getElementById("content").classList.length); 20 | 21 | // document.getElementById("content").classList.add("text"); 22 | 23 | document.getElementById("button1").onclick = ()=>{ 24 | document.getElementById("content").classList.remove("text"); 25 | }; -------------------------------------------------------------------------------- /Lesson81/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Lesson81/script.js: -------------------------------------------------------------------------------- 1 | // screen.width 2 | // screen.height 3 | document.getElementById("logo").style.display= "none"; 4 | 5 | if(screen.width <=640){ 6 | document.body.style.background = "red"; 7 | document.getElementById("logo").style.display= "inherit"; 8 | } -------------------------------------------------------------------------------- /Lesson82/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /Lesson82/music.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codershiyar/javascript/2fa0c4b8e35b7d9e8fc48b340e66111594d638f0/Lesson82/music.mp3 -------------------------------------------------------------------------------- /Lesson82/script.js: -------------------------------------------------------------------------------- 1 | var music = document.getElementById("music"); 2 | function playMusic(){ 3 | music.play(); 4 | } 5 | function pause(){ 6 | music.pause(); 7 | } 8 | function load(){ 9 | music.load(); 10 | } 11 | 12 | function stopVolume(){ 13 | music.volume = 0; 14 | } 15 | function playVolume(){ 16 | music.volume = 1; 17 | } 18 | 19 | function speedUp(){ 20 | music.playbackRate +=0.10; 21 | } 22 | function slowDown(){ 23 | music.playbackRate -=0.10; 24 | } 25 | if(music.ended == false){ 26 | 27 | } 28 | // muted duration currentTime 29 | // playbackRate ended 30 | 31 | -------------------------------------------------------------------------------- /Lesson83/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /Lesson83/music.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codershiyar/javascript/2fa0c4b8e35b7d9e8fc48b340e66111594d638f0/Lesson83/music.mp3 -------------------------------------------------------------------------------- /Lesson83/script.js: -------------------------------------------------------------------------------- 1 | var music = document.getElementById("music"); 2 | function playMusic(){ 3 | music.play(); 4 | } 5 | function pause(){ 6 | music.pause(); 7 | } 8 | function load(){ 9 | music.load(); 10 | } 11 | 12 | function stopVolume(){ 13 | music.volume = 0; 14 | } 15 | function playVolume(){ 16 | music.volume = 1; 17 | } 18 | 19 | function speedUp(){ 20 | music.playbackRate +=0.10; 21 | } 22 | function slowDown(){ 23 | music.playbackRate -=0.10; 24 | } 25 | if(music.ended == false){ 26 | 27 | } 28 | // muted duration currentTime 29 | // playbackRate ended 30 | 31 | -------------------------------------------------------------------------------- /Lesson84_85_86_87_88/audio_player/audio/music.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codershiyar/javascript/2fa0c4b8e35b7d9e8fc48b340e66111594d638f0/Lesson84_85_86_87_88/audio_player/audio/music.mp3 -------------------------------------------------------------------------------- /Lesson84_85_86_87_88/audio_player/audio_player.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Coder Shiyar 8 | 9 | 10 | 11 | 12 | 13 | 14 |
    15 |
    16 | 24 | 25 | 26 |
    27 | 28 | 29 | 30 |
    31 | 32 |
    33 | 34 |

    الصوت

    35 | 36 |

    السرعة

    37 | 38 |
    39 | 40 | 41 |
    42 | 43 | 44 | 45 | 46 |
    47 |
    48 | 49 |
    50 |
    51 |
    52 | 53 | 54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /Lesson84_85_86_87_88/audio_player/css/article.css: -------------------------------------------------------------------------------- 1 | article{ 2 | text-align: center; 3 | } 4 | #player_buttons{ 5 | display: flex; 6 | justify-content: center; 7 | padding-top: 20px; 8 | } 9 | #player_buttons img{ 10 | margin: 0 15px; 11 | float: left; 12 | width: 45px; 13 | height: 45px; 14 | } 15 | 16 | input[type=range] { 17 | -webkit-appearance: none; 18 | width: 100%; 19 | height: 4px; 20 | background: #e6e7e8; 21 | margin: 0px; 22 | } 23 | input[type=range]::-webkit-slider-thumb { 24 | height: 25px; 25 | width: 25px; 26 | border-radius: 50%; 27 | background: #f65b79; 28 | -webkit-appearance: none; 29 | } 30 | #colors{ 31 | margin-top:15px; 32 | } 33 | #colors button{ 34 | margin-top: 12px; 35 | width: 25px; 36 | height: 25px; 37 | border-radius: 50%; 38 | border: 0px solid white; 39 | } 40 | #color-1{ 41 | background:#212020; 42 | } 43 | #color-2{ 44 | background:#ff5353; 45 | } 46 | #color-3{ 47 | background:#009688; 48 | } 49 | #color-4{ 50 | background:#222a4c; 51 | } 52 | 53 | footer{ 54 | height: 90px; 55 | background: white; 56 | } 57 | -------------------------------------------------------------------------------- /Lesson84_85_86_87_88/audio_player/css/audio_player.css: -------------------------------------------------------------------------------- 1 | 2 | #audio_player{ 3 | position: absolute; 4 | width: 350px; 5 | height: 600px; 6 | left: 50%; 7 | top: 50%; 8 | transform: translate(-50%,-50%); 9 | background-color:#040243; 10 | } 11 | main{ 12 | height: 100%; 13 | width: 100%; 14 | background-color: white; 15 | } -------------------------------------------------------------------------------- /Lesson84_85_86_87_88/audio_player/css/header_nav.css: -------------------------------------------------------------------------------- 1 | header{ 2 | width: 100%; 3 | height: 310px; 4 | background: wheat; 5 | background-size: 100%; 6 | text-align: center; 7 | color: white; 8 | } 9 | nav img{ 10 | width: 140px; 11 | border-radius: 50%; 12 | } 13 | nav{ 14 | transform: translateY(50px); 15 | height:90px; 16 | } 17 | nav h2{ 18 | font-size: 30px; 19 | } 20 | nav p{ 21 | font-size: 20px; 22 | } -------------------------------------------------------------------------------- /Lesson84_85_86_87_88/audio_player/css/resize.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | setInterval(()=>{ 4 | var width = screen.width; 5 | var height = screen.height; 6 | 7 | if(width<=768){ 8 | 9 | document.getElementById("audio_player").style.width = width+"px"; 10 | document.getElementById("audio_player").style.height = height+"px"; 11 | 12 | }}); 13 | -------------------------------------------------------------------------------- /Lesson84_85_86_87_88/audio_player/img/back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codershiyar/javascript/2fa0c4b8e35b7d9e8fc48b340e66111594d638f0/Lesson84_85_86_87_88/audio_player/img/back.png -------------------------------------------------------------------------------- /Lesson84_85_86_87_88/audio_player/img/logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codershiyar/javascript/2fa0c4b8e35b7d9e8fc48b340e66111594d638f0/Lesson84_85_86_87_88/audio_player/img/logo.jpg -------------------------------------------------------------------------------- /Lesson84_85_86_87_88/audio_player/img/logo1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codershiyar/javascript/2fa0c4b8e35b7d9e8fc48b340e66111594d638f0/Lesson84_85_86_87_88/audio_player/img/logo1.jpg -------------------------------------------------------------------------------- /Lesson84_85_86_87_88/audio_player/img/next.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codershiyar/javascript/2fa0c4b8e35b7d9e8fc48b340e66111594d638f0/Lesson84_85_86_87_88/audio_player/img/next.png -------------------------------------------------------------------------------- /Lesson84_85_86_87_88/audio_player/img/pause.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codershiyar/javascript/2fa0c4b8e35b7d9e8fc48b340e66111594d638f0/Lesson84_85_86_87_88/audio_player/img/pause.png -------------------------------------------------------------------------------- /Lesson84_85_86_87_88/audio_player/img/play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codershiyar/javascript/2fa0c4b8e35b7d9e8fc48b340e66111594d638f0/Lesson84_85_86_87_88/audio_player/img/play.png -------------------------------------------------------------------------------- /Lesson84_85_86_87_88/audio_player/scripts/colors.js: -------------------------------------------------------------------------------- 1 | class Colors{ 2 | constructor(){ 3 | if(localStorage.getItem("SaveColor")==null){ 4 | 5 | document.body.style.background = "linear-gradient(to right, #00d2ff, #928dab)"; 6 | 7 | } 8 | 9 | this.color1 = document.getElementById("color-1"); 10 | this.color1.addEventListener("click",()=>{ 11 | this.selectColor("color-1"); 12 | }); 13 | 14 | this.color2 = document.getElementById("color-2"); 15 | this.color2.addEventListener("click",()=>{ 16 | this.selectColor("color-2"); 17 | }); 18 | 19 | this.color3 = document.getElementById("color-3"); 20 | this.color3.addEventListener("click",()=>{ 21 | this.selectColor("color-3"); 22 | }); 23 | 24 | this.color4 = document.getElementById("color-4"); 25 | this.color4.addEventListener("click",()=>{ 26 | this.selectColor("color-4"); 27 | }); 28 | 29 | this.selectColor(localStorage.getItem("SaveColor")); 30 | } 31 | 32 | selectColor(color){ 33 | 34 | this.header = document.getElementById("header"); 35 | if(color == "color-1"){ 36 | this.header.style.background ="rgb(27, 27, 27)"; 37 | document.body.style.background = "rgb(27, 27, 27)"; 38 | } 39 | else if(color == "color-2"){ 40 | this.header.style.background ="#ff5353"; 41 | document.body.style.background ="#ff5353"; 42 | } 43 | 44 | else if(color == "color-3"){ 45 | this.header.style.background ="#009688"; 46 | document.body.style.background ="#009688"; 47 | } 48 | 49 | else if(color == "color-4"){ 50 | this.header.style.background = "#222a4c"; 51 | document.body.style.background ="#222a4c"; 52 | } 53 | localStorage.setItem("SaveColor",color); 54 | } 55 | 56 | } 57 | onload = new Colors(); -------------------------------------------------------------------------------- /Lesson84_85_86_87_88/audio_player/scripts/player_buttons.js: -------------------------------------------------------------------------------- 1 | class Player{ 2 | constructor(){ 3 | 4 | this.audio_file = document.getElementById("audio_file"); 5 | this.isPlayed; 6 | 7 | this.play = document.getElementById("play"); 8 | this.play.addEventListener("click",()=>{this.play_pause();}); 9 | 10 | this.audios =[]; 11 | this.audios[0] = "http://yayin.firatfm.com:3065/;audio.mp3&bufferlength=2&volume=100&streamer=rtmp://wowza.firatfm.com:3270/shoutcast/firatfm&skin=https://www.firatfm.com/ekle/yanyesil/videosmartclassic.zip&autostart=true&stretching=fill"; 12 | this.audios[1] = "./audio/music.mp3"; 13 | this.audios[2] = "http://178.33.34.48:7764/;stream.mp3"; 14 | 15 | this.names = []; 16 | this.names[0] = "Radio 1"; 17 | this.names[1] = "Radio 2"; 18 | this.names[2] = "Radio 3"; 19 | 20 | this.numberAudio =0; 21 | 22 | 23 | 24 | this.next = document.getElementById("next"); 25 | this.next.addEventListener("click",()=>{ 26 | this.next_audio(); 27 | }); 28 | 29 | 30 | this.back = document.getElementById("back"); 31 | this.back.addEventListener("click",()=>{ 32 | 33 | this.back_audio(); 34 | 35 | }); 36 | 37 | this.setSource(); 38 | } 39 | play_pause(){ 40 | if(this.isPlayed==false){ 41 | this.play.src = "./img/pause.png"; 42 | this.audio_file.play(); 43 | this.isPlayed=true; 44 | } 45 | else{ 46 | this.play.src = "./img/play.png"; 47 | this.audio_file.pause(); 48 | this.isPlayed=false; 49 | } 50 | } 51 | 52 | next_audio(){ 53 | if(this.numberAudio0){ 64 | --this.numberAudio; 65 | this.isPlayed = false; 66 | } 67 | else{ 68 | this.numberAudio = this.audios.length -1; 69 | 70 | } 71 | 72 | this.setSource(); 73 | } 74 | setSource(){ 75 | 76 | document.getElementById("radio-title").innerHTML = this.names[this.numberAudio]; 77 | document.getElementById("audio_file").src = this.audios[this.numberAudio]; 78 | 79 | this.play_pause(); 80 | } 81 | 82 | } 83 | onload = new Player(); -------------------------------------------------------------------------------- /Lesson84_85_86_87_88/audio_player/scripts/player_buttons.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codershiyar/javascript/2fa0c4b8e35b7d9e8fc48b340e66111594d638f0/Lesson84_85_86_87_88/audio_player/scripts/player_buttons.txt -------------------------------------------------------------------------------- /Lesson84_85_86_87_88/audio_player/scripts/resize.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | setInterval(()=>{ 4 | var width = screen.width; 5 | var height = screen.height; 6 | 7 | if(width<=1024){ 8 | 9 | document.getElementById("audio_player").style.width = width+"px"; 10 | document.getElementById("audio_player").style.height = height+"px"; 11 | 12 | } 13 | if(screen.width<=320){ 14 | document.getElementById("audio_player").style.height = 100+height+"px"; 15 | 16 | } 17 | }); 18 | -------------------------------------------------------------------------------- /Lesson84_85_86_87_88/audio_player/scripts/speedVolume.js: -------------------------------------------------------------------------------- 1 | class Speed_Volume{ 2 | constructor(){ 3 | this.audio_file = document.getElementById("audio_file"); 4 | 5 | var speed = document.getElementById("speed"); 6 | speed.addEventListener("change",()=>{ 7 | this.audio_file.playbackRate = speed.value / 100; 8 | }); 9 | 10 | } 11 | 12 | } 13 | onload =new Speed_Volume(); -------------------------------------------------------------------------------- /Lesson84_85_86_87_88/audio_player/scripts/volume.js: -------------------------------------------------------------------------------- 1 | class Volume{ 2 | constructor(){ 3 | 4 | this.audio_file = document.getElementById("audio_file"); 5 | 6 | var volume = document.getElementById("volume"); 7 | this.audio_file.volume= 50/100; 8 | 9 | volume.addEventListener("change",()=>{ 10 | this.audio_file.volume = volume.value / 100 ; 11 | } ); 12 | } 13 | 14 | } 15 | onload = new Volume(); -------------------------------------------------------------------------------- /Lesson89/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Lesson89/script.js: -------------------------------------------------------------------------------- 1 | let name = "Coder Shiyar"; 2 | try{ 3 | 4 | alert("My name : "+name); 5 | } 6 | catch(error){ 7 | console.error(error); 8 | alert(name); 9 | } 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | // document.body.clientHeight 42 | // document.body.clientWidth 43 | // window.innerHeight 44 | // window.innerWidth 45 | 46 | 47 | // window.open() - open a new window فتح نافذة جديدة 48 | // window.close() - close the current window اغلاق نافذة الحالية 49 | // window.moveTo() - move the current window نقل نافذة الحالية 50 | // window.resizeTo() - resize the current window إعادة ضبط حجم الشاشة الحالية 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /Lesson9/app.js: -------------------------------------------------------------------------------- 1 | 2 | // document.getElementById(""); ID لتحديد عناصر اتش تي ام ال عبر اسم 3 | // ----------------------------------------------------------------------------------- 4 | // innerHTML 5 | // يتم استخدامها لتعديل على القيمة عنصر المحدد 6 | // او يمكنك استخدامها لعرض للمحتوى العنصر المحدد 7 | // ----------------------------------------------------------------------------------- 8 | // innerText 9 | // text يتم استخدامها لعرض العنصر المحدد على شكل نص 10 | // text او تحديد قيمة جديدة للعنصر المحدد بصيغة نص 11 | // ------------------------------------------------------------------------------------ 12 | var content = document.getElementById("content"); 13 | content.innerHTML = "

    Coder Shiyar

    "; 14 | 15 | // document.getElementById("content").innerText = "

    Coder Shiyar JavaScript

    "; 16 | 17 | alert(content.innerText); 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | // Coder Shiyar - YouTube : http://youtube.com/codershiyar 41 | // ----------------------------------------------------------- 42 | 43 | -------------------------------------------------------------------------------- /Lesson9/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Coder Shiyar 5 | 6 | 7 | 8 | 9 | 10 | 11 |
    12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Lesson90/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Coder Shiyar 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
    18 | 19 |
    20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /Lesson90/script.js: -------------------------------------------------------------------------------- 1 | // Coder Shiyar - https://youtube.com/codershiyar 2 | // ----------------------------------------------------------------------------- 3 | // Math.round(x) تُرجع قيمة x مقربة إلى أقرب عدد صحيح لها: 4 | // Math.pow(x, y) ترجع قيمة x إلى قوة y: 5 | // Math.sqrt(x) إرجاع الجذر التربيعي لـ x: 6 | // Math.ceil(x) تُرجع قيمة x مقربة إلى أقرب عدد صحيح عبر زيادة قيمة: 7 | // Math.floor(x) تُرجع قيمة x مقربة إلى أقرب عدد صحيح عبر نقص القيمة: 8 | // Math.random(); إرجاع رقم عشوائي بين 0 (ضمناً) و 1 (حصري): 9 | // Math.min(x, y, z, ..., n) لجلب العدد الأصغر من بين مجموعة اعداد 10 | // Math.max(x, y, z, ..., n) لجلب العدد الأكبر من بين مجموعة اعداد 11 | // ----------------------------------------------------------------------------- 12 | // ستجد في الرابط التالي جميع عناصر يمكنك 13 | // استخدامها لاجل عمليات رياضيات في جافا سكريبت 14 | // https://www.w3schools.com/jsref/jsref_obj_math.asp 15 | -------------------------------------------------------------------------------- /Lesson91/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Lesson91/script.js: -------------------------------------------------------------------------------- 1 | // var number1 = 10; 2 | // var number2 = "70.12"; 3 | 4 | // number1+= parseFloat(number2); 5 | 6 | // console.log(number1); 7 | 8 | 9 | 10 | 11 | function getValue(){ 12 | var number1 = document.getElementById("input").value; 13 | var number2 = 20; 14 | var result = parseFloat(number1) + number2 ; 15 | console.log(result); 16 | } -------------------------------------------------------------------------------- /Lesson92/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Coder Shiyar 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Lesson92/script.js: -------------------------------------------------------------------------------- 1 | // toString() يتم استخدامها لتحويل بيانات من نوع ارقام إلى بيانات من نوع النصي 2 | // toFixed() يتم استخدامها لتقريب رقم إلى المنازل العشرية التي تريده 3 | let number = 200.65; 4 | // alert(number + 10); 5 | alert(number.toFixed(0)); -------------------------------------------------------------------------------- /Lesson93/app.js: -------------------------------------------------------------------------------- 1 | // --------------------------------------------------------------- 2 | // JavaScript Obfuscator Tool - obfuscator.io 3 | // هي أداة مجانية عبر الإنترنت تقوم بتشويش شفرة المصدر الخاصة بك 4 | // ، وتمنعها من السرقة واستخدامها دون إذن. 5 | // --------------------------------------------------------------- 6 | var _0xe497=['1195CbwNoo','909477oZVOmX','17274aueJUG','64601abcTkT','183BcVQVt','تم\x20برمجة\x20هذا\x20مشروع\x20بواسطة\x20Coder\x20Shiyar','524400EQjqAu','13cdKHrZ','10InVvBg','64495ifZbHs','19lVMrPz','log','19915ixwuJP'];function _0x3b28(_0x576cf7,_0x1d026d){return _0x3b28=function(_0xe49781,_0x3b28e9){_0xe49781=_0xe49781-0x1f2;var _0x56bdf3=_0xe497[_0xe49781];return _0x56bdf3;},_0x3b28(_0x576cf7,_0x1d026d);}var _0x33999c=_0x3b28;(function(_0x1789c7,_0x563e2e){var _0x55164e=_0x3b28;while(!![]){try{var _0x57797d=parseInt(_0x55164e(0x1fc))*parseInt(_0x55164e(0x1f5))+parseInt(_0x55164e(0x1f4))+parseInt(_0x55164e(0x1f9))*parseInt(_0x55164e(0x1fb))+-parseInt(_0x55164e(0x1f8))+parseInt(_0x55164e(0x1fa))*parseInt(_0x55164e(0x1fe))+-parseInt(_0x55164e(0x1f3))+-parseInt(_0x55164e(0x1f6))*parseInt(_0x55164e(0x1f2));if(_0x57797d===_0x563e2e)break;else _0x1789c7['push'](_0x1789c7['shift']());}catch(_0x2c0cb7){_0x1789c7['push'](_0x1789c7['shift']());}}}(_0xe497,0x99bd4),console[_0x33999c(0x1fd)](_0x33999c(0x1f7))); 7 | -------------------------------------------------------------------------------- /Lesson93/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Coder Shiyar 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Lesson94/app.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | // navigator.onLine يستخدم لتحقق من إن كان مستخدم متصل بالانترنت او لا 3 | // ---------------------------------------------------------------------- 4 | // يقوم بإعادة صح او خطا,إذا كان مستخدم بالانترنت فسيقوم بإعادة صح 5 | // true/false 6 | // ---------------------------------------------------------------------- 7 | // لتنفيذ اوامر عندما يصبح مستخدم متصل بالانترنت 8 | // window.addEventListener('online', ); 9 | // ---------------------------------------------------------------------- 10 | // لتنفيذ اوامر عندما يصبح مستخدم غير متصل بالانترنت 11 | // window.addEventListener('offline', ); 12 | // ---------------------------------------------------------------------- 13 | let isOnline = navigator.onLine 14 | console.log(isOnline) 15 | window.onoffline = ()=>{ 16 | alert("فقدت اتصال بالانترنت") 17 | } 18 | // window.addEventListener('offline',()=>{ 19 | // alert("فقدت اتصال بالانترنت") 20 | // } ); 21 | 22 | window.addEventListener('online',()=>{ 23 | alert("انت متصل بالانترنت") 24 | } ); 25 | -------------------------------------------------------------------------------- /Lesson94/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Coder Shiyar 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Lesson95/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | App 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /Lesson95/app.js: -------------------------------------------------------------------------------- 1 | // document.cookie = `course=JavaScript; max-age=${12*30*24*60*60}; path=/` 2 | document.cookie = `course=JavaScript; expires=Sat Aug 30 2021 20:44:09 GMT+0200; path=/` 3 | document.cookie = `name=Coder Shiyar; expires=Sat Aug 30 2021 20:44:09 GMT+0200; path=/` 4 | 5 | document.cookie = `course=جافا سكريبت; expires=Sat Aug 30 2021 20:44:09 GMT+0200; path=/` 6 | 7 | document.cookie = `background=#ff5454; samesite=strict; domain=codershiyar.com; max-age=${12*30*24*60*60}; path=/;` 8 | 9 | 10 | // Cookie options: 11 | 12 | // path=/, by default current path, makes the cookie visible only under that path. 13 | // domain=site.com, by default a cookie is visible on the current domain only. If the domain is set explicitly, the cookie becomes visible on subdomains. 14 | // expires or max-age sets the cookie expiration time. Without them the cookie dies when the browser is closed. 15 | // samesite forbids the browser to send the cookie with requests coming from outside the site. This helps to prevent XSRF attacks. 16 | 17 | 18 | // path=/ ، افتراضيًا ، يجعل البيانات المخزنة ضمن كوكيز مرئيًا تحت هذا المسار فقط. 19 | // domain = site.com ، بشكل افتراضي ، يكون البيانات المخزنة ضمن كوكيز مرئيًا على النطاق الحالي فقط. إذا تم تعيين المجال بشكل صريح ، يصبح البيانات المخزنة ضمن كوكيز مرئيًا في المجالات الفرعية. 20 | // expires أو max-age يعيّن وقت انتهاء صلاحية البيانات المخزنة ضمن كوكيز. بدونها يموت البيانات المخزنة ضمن كوكيز عند إغلاق المتصفح. 21 | // samesite يحظر موقع الويب على المتصفح إرسال البيانات المخزنة 22 | // ضمن كوكيز مع الطلبات الواردة من خارج الموقع. هذا يساعد على منع هجمات XSRF. 23 | 24 | 25 | 26 | 27 | // document.cookie = `course=; max-age=0; path=/;` 28 | console.log(getCookie("course")) 29 | console.log(getCookie("name")) 30 | 31 | 32 | function getCookie(name) { 33 | // Split cookie string and get all individual name=value pairs in an array 34 | var cookieArr = document.cookie.split(";"); 35 | 36 | // Loop through the array elements 37 | for(var i = 0; i < cookieArr.length; i++) { 38 | var cookiePair = cookieArr[i].split("="); 39 | 40 | /* Removing whitespace at the beginning of the cookie name 41 | and compare it with the given string */ 42 | if(name == cookiePair[0].trim()) { 43 | // Decode the cookie value and return 44 | return decodeURIComponent(cookiePair[1]); 45 | } 46 | } 47 | 48 | // Return null if not found 49 | return null; 50 | } 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /Lesson95/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Coder Shiyar - JavaScript 7 | 8 | 9 | 10 | 11 | Coder Shiyar 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Lesson96/app.js: -------------------------------------------------------------------------------- 1 | // ------------------------------------------------------------------------------------------------------ 2 | // navigator.geolocation يستخدم لتحقق إن كان متصفح وجهاز مستخدم يدعم خاصية تحديد مواقع 3 | // navigator.geolocation.getCurrentPosition()يستخدم لطلب صلاحية وصول إلى موقع من المستخدم 4 | // ولحصول على معلومات متعلقة بالموقع المستخدم 5 | // ------------------------------------------------------------------------------------------------------ 6 | // navigator.geolocation.watchPosition() يستخدم للحصول على موقع مستخدم ويتم تحديث موقع بالاستمرار 7 | // ------------------------------------------------------------------------------------------------------ 8 | // navigator.geolocation.clearWatch(id); يستخدم لإيقاف تتبع مستخدم | ايقاف عرض موقع مستخدم بشكل مباشر 9 | // ------------------------------------------------------------------------------------------------------ 10 | 11 | 12 | 13 | var liveMap; 14 | if(navigator.geolocation){ 15 | 16 | liveMap = navigator.geolocation.getCurrentPosition(function(position){ 17 | document.getElementById("main").innerHTML = ` 18 | 19 | ` 20 | console.log(position) 21 | }, 22 | 23 | function(error){ 24 | console.log(error) 25 | } 26 | 27 | ) 28 | } 29 | 30 | document.getElementById("stopShareMap").onclick = ()=>{ 31 | navigator.geolocation.clearWatch(liveMap) 32 | } 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | // انواع اخطاء الذي يمكن ان يحدث عند محاولة حصول على عنوان 44 | // switch(error.code) { 45 | // case error.PERMISSION_DENIED: 46 | // error = "User denied the request for Geolocation. اذا مستخدم رفض صلاحية وصول للموقع" 47 | // break; 48 | // case error.POSITION_UNAVAILABLE: 49 | // error = "Location information is unavailable. معلومات موقع غير متوفرة" 50 | // break; 51 | // case error.TIMEOUT: 52 | // error = "The request to get user location timed out.إذا لم يتمكن من حصول على موقع مستخدم" 53 | // break; 54 | // case error.UNKNOWN_ERROR: 55 | // error = "An unknown error occurred. إذا حدث خطا غير معروف" 56 | // break; 57 | // } 58 | 59 | // -------------------------------------------------------------------------------- /Lesson96/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Coder Shiyar 7 | 8 | 9 | 10 | 11 | 12 |
    13 | 14 |
    15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /Lesson97/geo-location/app.js: -------------------------------------------------------------------------------- 1 | // ------------------------------------------------------------------------------------------------------ 2 | // navigator.geolocation يستخدم لتحقق إن كان متصفح وجهاز مستخدم يدعم خاصية تحديد مواقع 3 | // navigator.geolocation.getCurrentPosition()يستخدم لطلب صلاحية وصول إلى موقع من المستخدم 4 | // ولحصول على معلومات متعلقة بالموقع المستخدم 5 | // ------------------------------------------------------------------------------------------------------ 6 | // navigator.geolocation.watchPosition() يستخدم للحصول على موقع مستخدم ويتم تحديث موقع بالاستمرار 7 | // ------------------------------------------------------------------------------------------------------ 8 | // navigator.geolocation.clearWatch(id); يستخدم لإيقاف تتبع مستخدم | ايقاف عرض موقع مستخدم بشكل مباشر 9 | // ------------------------------------------------------------------------------------------------------ 10 | // https://www.openstreetmap.org/export/embed.html?bbox=,&;layer=mapnik 11 | 12 | var isLive = false; 13 | var shareLocation; 14 | var accessLocation; 15 | document.getElementById("getLocation").onclick = ()=>{ 16 | 17 | 18 | 19 | if(isLive === false ){ 20 | 21 | shareLocation = navigator.geolocation.watchPosition( 22 | function(position){ 23 | accessLocation = true 24 | 25 | document.getElementById("alert").innerHTML = ` 26 | ` 28 | document.getElementById("getLocation").innerHTML = "إيقاف مشاركة" 29 | isLive = true 30 | 31 | document.getElementById("map").innerHTML = 32 | ` ` 33 | }, 34 | function(error){ 35 | switch(error.code) { 36 | case error.PERMISSION_DENIED: 37 | document.getElementById("alert").innerHTML = ` ` 40 | break; 41 | 42 | case error.UNKNOWN_ERROR: 43 | document.getElementById("alert").innerHTML = ` ` 44 | 45 | break; 46 | 47 | } 48 | } 49 | ) 50 | 51 | }else if(isLive === true && accessLocation === true){ 52 | console.log("removed" + navigator.geolocation.clearWatch(shareLocation)) 53 | 54 | document.getElementById("alert").innerHTML = ` 55 | ` 58 | console.log(shareLocation) 59 | navigator.geolocation.clearWatch(shareLocation); 60 | document.getElementById("getLocation").innerHTML = "عرض موقعي" 61 | isLive = false 62 | } 63 | 64 | 65 | 66 | } 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | // انواع اخطاء الذي يمكن ان يحدث عند محاولة حصول على عنوان 81 | // switch(error.code) { 82 | // case error.PERMISSION_DENIED: 83 | // error = "User denied the request for Geolocation. اذا مستخدم رفض صلاحية وصول للموقع" 84 | // break; 85 | // case error.POSITION_UNAVAILABLE: 86 | // error = "Location information is unavailable. معلومات موقع غير متوفرة" 87 | // break; 88 | // case error.TIMEOUT: 89 | // error = "The request to get user location timed out.إذا لم يتمكن من حصول على موقع مستخدم" 90 | // break; 91 | // case error.UNKNOWN_ERROR: 92 | // error = "An unknown error occurred. إذا حدث خطا غير معروف" 93 | // break; 94 | // } -------------------------------------------------------------------------------- /Lesson97/geo-location/img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codershiyar/javascript/2fa0c4b8e35b7d9e8fc48b340e66111594d638f0/Lesson97/geo-location/img.jpg -------------------------------------------------------------------------------- /Lesson97/geo-location/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Coder Shiyar 7 | 8 | 9 | 10 | 11 |
    12 | 13 | 14 |
    15 | 16 | 27 | 28 | 29 | 30 |
    31 | 32 |
    33 | 34 |
    35 |
    36 | 37 | 38 |
    39 | 40 |
    41 | 42 |
    43 | 44 |
    45 |
    46 |
    47 | ... 48 |
    49 |
    50 |
    51 |
    Coder Shiyar - Live Map
    52 |

    موقع لعرض موقعك مباشر في الخريطة بشكل أمن وسهل استخدام

    53 |

    shiyarjemo.com/app

    54 |
    55 |
    56 |
    57 |
    58 |
    59 |
    60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /Lesson97/geo-location/logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codershiyar/javascript/2fa0c4b8e35b7d9e8fc48b340e66111594d638f0/Lesson97/geo-location/logo.jpg --------------------------------------------------------------------------------