ورشة تطبيق web - JavaScript (أولا: الرسم بالجافاسكريبت)


#1

بسم الله ،،،
طبعا شوفت ان أحسن طريقة لتطبيق أساسيات javascript اللي اتعلمتها في المبادرة هي عمل application تفاعلية حتى ولو كانت بسيطة زي لعبة مثلا …

–> الأول قبل ما نعمل اي حاجة لازم يكون عندنا أبجديات اللغة لأني ببساطة هشتغل بيها، وبتكون شاملة الـ syntax والrules اللي على اساسها بنعمل البرامج والplugins

–> لو مش عارف ايه هيا الjavascript تقدر تتابع دروس من قناة الزيرو عنها… ورابط الدورة من هنا: https://www.youtube.com/watch…

نبدأ على بركة الله…

–> الخطوة الأولى:

هنبدأ على طول نعمل

عبارة عن صندوق canvas بالشكل اللي في الرابط ده: https://codepen.io/nasr3090/pen/OZzbVN
نسخة من الكود
<!DOCTYPE html>
<html>
    <!-- Head Start -->
    <head>
        <meta charset = "utf-8">
        <title>JS Drawing</title>
    </head>
    <!-- head end -->
    
    
    <!-- Styling Start -->
    <style>
        
        html {
            background: lightgrey;
        }
        
        canvas {
            border: 2px solid black;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
        
    </style> 
    <!-- Styling end -->    
    
    <!-- body Start -->
    <body>
       
        <canvas id="meow" width="400px" height="400px">
            Hi there!
        </canvas>
    
   
    <!-- ******** JS Start ********-->
    <script>
                //Naming variables to use for drawings
                var canvas, ctx;
                window.onload = function init() {
                    //Defining The variables
                    
                    // a. Calling the canvas
                    canvas = document.querySelector("#meow");
                    // b. getting the drawing tool
                    ctx = canvas.getContext('2d');

                    //Drawing Time!!!
                    // 1- filled rectangle
                    ctx.fillStyle = "blue";
                    ctx.fillRect(10, 10, 30, 30);

                    // 2- wireframe rectangle
                    ctx.strokeStyle = 'green';
                    ctx.lineWidth = 4;
                    ctx.strokeRect(100, 40, 40, 40);

                    // 3- fill circle
                    ctx.beginPath();
                    ctx.arc(60, 60, 10, 0, 2*Math.PI);
                    ctx.fillStyle = "red";
                    ctx.fill();
                }

        </script> 
    <!-- ******** JS end ********-->
    
    </body>
    <!-- body end -->
    
</html>

ليه بقا canvas؟
بالعربي canvas يعني لوحة زيتية أو لوحة قماش…
الفكرة ان جوا الbox ده هنرسم حاجات… وده هيكون شغل graphic
ال canvas بيدعم القصة دي… ولو عايز تعرف أكتر… ممكن تشوف الرابط ده: https://www.w3schools.com/html/html5_canvas.asp
الcanvas هميزه بـ id عشان نقدر نستدعيه في الjavascript كود اللي هنكتبه…

–> الخطوة الثانية:

طبعا احنا بنطبق بالjavascript يعني هنرسم ونعمل كل حاجة داخل الcanvas بالjavascript … وقبل ما نرسم ، لازم نجيب أدوات الرسم… والcanvas فيه حاجة جميلة جدا…

من الرابط ده هنشوف كود الجافاسكريبت ونشرحه:

الأول نسمي المتغيرين دول:

var canvas, ctx;

وهنحتاج نخلى الcanvas بمحتوياته يحمل بعد تحميل الصفحة عن طريق الrule دي:

window.onload = function init() {
canvas = document.querySelector("#meow");
ctx = canvas.getContext('2d');
}

ببساطة استدعيت الcanvas عن طريق الid اللي سميته في الأول … في حالتي هيكون #meow ،، والmethod اللي بنادي بيها اسمها ()querySelector, وممكن استخدم بدل منها ()getElementById

تقدرو تشوفو معلومات اضافية عن الqueryselector method من هنا:
https://www.w3schools.com/js…/met_document_queryselector.asp
وبالنسبة ل ()getcontext دي بنستخدمها عشان نستدعي بيها الأداة اللي هنعمل بيها الجرافيك ونرسم بيها وكدة والأداة دي هتتكتب بين القوسين بالشكل ده:

getContext('2d');

طبعا انا لو معملتش متغيرات كان هيبقا شكل الكود كدة:

window.onload = function init() {
document.querySelector("#meow").getContext('2d');
}

طويل ويلخبط في كتابته…

–> الخطوة الثالثة:

حان وقت الرسم… هنستخدم الأدوات اللي مشروحة في الرابط ده:
https://www.w3schools.com/tags/ref_canvas.asp

ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 30, 30);

ال10 و10 دول الموقع في اتجاهين x , y وبالنسبة ل 30 و 30 دول أبعاد المستطيل

ctx.strokeStyle = 'green';
ctx.lineWidth = 4;
ctx.strokeRect(100, 40, 40, 40);

نفس الفكرة هنا ، موقع x و y … وبعدين أبعاد الشكل

ctx.beginPath();
ctx.arc(60, 60, 10, 0, 2*Math.PI);
ctx.fillStyle = "red";
ctx.fill();

هنا بنرسم دايرة، الأول نحدد موقعها في x و y اللي هما 60 و 60 … بعد كدا نصف القطر أو radius اللي هوا 10… الرقم صفر 0 دا هوا الزاوية اللي بيبتدي من عندها رسم الدايرة … وتقدرو تشوفوها من الرابط ده: https://www.w3schools.com/tags/canvas_arc.asp
وهي عادة بتكون صفر…
آخر حاجة 2*Math.Pi اللي هوا القانون الشهير لمحيط الدايرة 2* العدد باي
لرسم دايرة كاملة…

بكدة نكون عملنا شوية أشكال بسيطة وتقدرو تستخدمو أدوات تانية وتجربوها… الموضوع إدمان بصراحة…
الحلقة الجاية ان شاء الله هنبتدي ندخل في التحريك والanimation

يارب يكون الشرح سهل… جاهز لأي تعليقات…


ورشة تطبيق web - JavaScript (ثانيا: التحريك animation)
تحدي اليوم! تحريك عدد من الكرات داخل الcanvas
#2

جميل شرح واضح وبإنتظار الدرس القادم


#3

شرح رائع !

حبذا لو تقوم بعمل تحدي أو مهمة للقيام به في نهاية كل ورشة… بحيث يقوم الآخرين بالمحاولة عليه :wink:


#4

جميل جداً ، بارك الله في جهودك الطيبة ، ننتظر الكثير ⚘


#5

تلميذك يا محترم :blush:


#6

فكرة رائعة ! سأبدأ بتنفيذها…


#7

الله يبارك فيك… ان شاء الله هناك الجديد


#8

شكرا موضوع جميل صحيح جديد وصعب شوي المصطلحات بس شكرا الك لطرحه صديقي❤


#9

العفو صديقي… لو عندك استفسار … كلنا موجودين…
جرب تكتب الكود بنفسك … جرب تحذف function و تعمل refresh للصفحة وشوف ايه التغيير اللي ممكن يحصل…
انا عملت فيديو ملخص على جروب المبادرة على الفيسبوك من هنا: https://www.facebook.com/groups/1793719174001339/permalink/1883240175049238/


#10

Good initiative :ok_hand:


#11

Glad to hear :slight_smile:
:rose:


#12

مرحبا يعطيك العافية انا ما اتعرف عندي عال
blue
red
اين المشكلة


#13

مرحبا…
الاحتمالات كثيرة… سأحتاج الى الكود لنتعرف على المشكلة ،،،


#14

#15

مرحبا هادا الكود كلو يلي كتبتو مع خالص شكري


#16

معذرة… الكود لم يظهر في التعليق ،،،


#17

ما بعرف وين المشكلة


#18

نعم بسيطة… يجب أن تكون كل الأكواد داخل ال function الأساسية init()
القوس { يمكنك نقله لآخر سطر


#19

الشكل الصحيح:


#20

اها شكرا جزيلا ساجربها