[Powered by Google Translate] [সেমিনার: jQuery] [Vipul Shekhawat, হার্ভার্ড বিশ্ববিদ্যালয়] [এটি CS50.] [CS50.TV] আপনি বাড়ীতে বরাবর অনুসরণ করছেন, তাহলে আপনি আসলে অনলাইন থেকে আমার স্লাইড অ্যাক্সেস করতে পারেন এই লিঙ্কে গিয়ে. এটা bit.ly. উপর, TjjRWj এর এছাড়াও আপনি শুধু সরাসরি URL-এ যেতে পারেন যা আমার নাম যা cloud.cs50.net ~ / vshekhawat, হয় এবং jQuery. আমি অত্যন্ত আপনি বাড়ীতে পর্যবেক্ষণ করছেন যদি আপনি বরাবর অনুসরণ করতে উৎসাহিত করি, আপনি এখানে আছেন এবং যদি, এছাড়াও, এই একটি চমত্কার মিথস্ক্রিয় উপস্থাপনা কারণ. 

আজ তাই, আমি jQuery কথা বলা ঠিক হবে যাচ্ছি, এবং প্রথম প্রশ্ন হল jQuery কি? এই বছর, আমি আপনাকে বলছি জাভাস্ক্রিপ্ট আবৃত নয় আছে জানি আমরা গত বছর আছে যতটা বিস্তারিত রূপে. জাভাস্ক্রিপ্ট, প্রথম সব, শুধু একটি ক্লায়েন্ট প্রান্তের ভাষা আপনি প্রতিটি ব্যবহারকারীর মেশিনে স্ক্রিপ্ট এবং কোড রান করার জন্য ব্যবহার করা হয়. তাই আপনি যদি মানুষের ওয়েব পেজ উপলব্ধ করা হয় যে একটি সার্ভার আছে কিন্তু আপনি তাদের মেশিনে স্টাফ কাজ করতে চান হতে পারে আপনার সার্ভারের প্রতি 30 সেকেন্ডে বা যে ভালো কিছু করার জন্য অনুরোধ পাঠাতে তাদের মেশিন জিজ্ঞাসা. আপনাকে JavaScript ব্যবহার করে তা করতে পারে. JQuery শুধু জাভাস্ক্রিপ্ট উপরে অধিক কার্যকারিতার উপলব্ধ যে আপনার জন্য অতিরিক্ত স্টাফ আছে. আপনি উপরে বিষয়বস্তু তাকান, যদি যে আপনি করতে সক্ষম হন যে পণ্যদ্রব্য কিছু আলোচনা করা হয়েছে. তাই সামগ্রিক, জানুয়ারী 2006 সালে নির্মিত হয়েছিল. এটি প্রথম আগস্ট 2005 মধ্যে ভাবা হয়েছিল. এটি একটি কয়েক বছর জন্য প্রায় হয়েছে, এবং এটি সত্যিই নতুন ওয়েব 2.0 আন্দোলনের অংশ এর যে ইন্টারনেট তাই চকচকে তৈরি হচ্ছে. এটি বহুল ব্যবহৃত JavaScript লাইব্রেরি আছে. মিলিয়ন 19.6 ওভার ওয়েবসাইটে এটি ব্যবহার করা হয়, এবং ব্যবহার এখনও বাড়ছে builtwith.com অনুযায়ী, যা, দৃশ্যত, গত বছর ধরে, শুধু একটানা মোটামুটি সুসংগত ভাবে বৃদ্ধি করা হয়েছে. শীর্ষ 10 মিলিয়ন সাইটগুলি মধ্যে, এখনও আছে - তাদের প্রায় 40% বর্তমানে এটি ব্যবহার করা হয়. ফেসবুক এটি ব্যবহার করে, অন্য ওয়েবসাইটে প্রচুর বর্তমানে এটি ব্যবহার. আপনি যদি চান, আপনি আপনার নিজের উপর যারা পরিসংখ্যান তাকান করতে পারেন. এটি একটি ভিত্তি এবং 13 বোর্ড সদস্য রয়েছে এবং কারণ আপনি এটি এর legit বলতে পারে একটি নিয়মিত ভিত্তিতে এটি কাজ করে 20 জনের একটি দল বরাবর. সুতরাং এটা খুবই ব্যাপকভাবে ব্যবহৃত হয়, এটি একটি. Org URL আছে তা অভিনব এর, এটি অন্যান্য উপাদান জন্য আনুষাঙ্গিক মোড় আছে, তাই এটি একটি বড় চুক্তি. 

কেন এটা ব্যবহার করা উচিত? JQuery খুব লাইটওয়েট. যে এটি একটি বিশাল ফাইল না মানে. আপনি ডাউনলোড করতে পারেন minified ফাইল, যা সব সাদা স্থান এবং মন্তব্য ছাড়াই, এবং এটি শুধুমাত্র 32 kB র এর. তাই এটা শুধু আপনার ওয়েব পৃষ্ঠা সম্মুখের টসে সহজ এবং এটা ব্যবহার শুরু. এটি খুব দক্ষতার সঙ্গে করা, তাই এটি অনেক সময় লাগতে না - আপনি এটি ব্যবহার করতে অনেক যখন এটি আপনার ওয়েবসাইট মন্থর নিচে না. এটি পূর্বে unfeasible ছিল যে বাস্তবায়ন করতে দেয়. কার্যকারিতা কিছু দিক আছে, অ্যানিমেশন তৈরি করা চাই, যে সাধারণত খুব, খুব কঠিন হবে. কিন্তু jQuery তারা আসলে খুব সহজ না. কি বিরক্তিকর যে, কিছু কিছু বিষয় আছে জাভাস্ক্রিপ্ট সম্ভব, একটি পোস্ট অনুরোধ পাঠিয়ে মত, কিন্তু এমন একটি সার্ভারে একটি অনুরোধ পাঠাতে, আপনি লিখতে হবে কোড পাঁচ বা ছয় বা সাত লাইন. এখন আপনি কেবলমাত্র একটি ফাংশন কল, একটি কোড একক লাইন এটা করতে পারেন. যে সত্যিই আপনি কাজ করছেন যে জিনিস অনেক সরলীকৃত. এবং সব শান্ত বাচ্চাদের এটি ব্যবহার করা হয়. যে, আমি আমার না. আমার চূড়ান্ত প্রকল্প গত বছর, যা, news.whrb.org হয় রেডিও স্টেশনের জন্য, যা আমি এই ব্লগটি তৈরি যা আমরা সম্পন্ন করেছি দেখায় যে তাদের জন্য MP3 ফাইলগুলিকে হোস্ট করে. আপনি অতীতে অনুষ্ঠানগুলি মাধ্যমে ব্রাউজ করতে পারেন এবং এটি সব jQuery ব্যবহার করা যাবে না. আপনি বলতে পারেন কারণ এই সব অ্যানিমেশন, মূলত. আপনি যদি তাই হয় - যদি আপনি একটি নতুন পোস্ট তৈরি করছি, আপনি এই সামান্য slideDowns দেখুন; যে সমস্ত jQuery ব্যবহার করা যাবে না. এবং এই ফেইড - তাই পণ্যদ্রব্য যে ধরনের সব jQuery ব্যবহার করা যাবে এবং আপনি ক্রমাগত সাইট নেভিগেট পৃষ্ঠাটি পুনরায় লোড করা হবে না. JQuery ব্যবহার করা যে আরেকটি দারুন জিনিস এই উপস্থাপনা. আমি scrolldeck নামক এই ওপেন সোর্স জিনিস ব্যবহার করছি যা কেউ jQuery উপরে লিখেছেন. আপনি আসলে উৎস তাকান, আপনি দেখতে পারেন তারা এই ডলার চিহ্ন ব্যবহার করছেন; ডলার চিহ্ন একটি ফাংশন একটি jQuery ফাংশন যে বোঝান jQuery ব্যবহার করা হয়. সুতরাং তারা jQuery উপরে একটি লেফাফা সংজ্ঞা করছি যে আপনি যদি এই মত একটি উপস্থাপনা করতে পারবেন এবং আপনি এখানে তারা মূল jQuery ফাইল সহ করছি দেখতে পারেন যা jQuery ব্যবহার করতে চান তাহলে আপনি অন্তর্ভুক্ত করতে হবে তা হল আপনার নিজস্ব ওয়েবসাইটের মাধ্যমে. 

যে স্পর্শ, আপনি কি এটি ইনস্টল করবেন? আপনি শুধুমাত্র ফাইল jQuery.com এবং ডাউনলোড করার জন্য যেতে পারেন একটি ওয়েব ডিরেক্টরিতে যোগ করা এবং এটি অন্তর্ভুক্ত. তাই ঠিক উপরে, আপনার HTML ফাইল মাথা ট্যাগে আপনার প্রধান এইচটিএমএল ফাইলের, শুধু কোড যে লাইন আছে আপনি ব্যবহার করছেন jQuery যা সংস্করণের জন্য সঠিক সংস্করণ. আপনি jQuery.com যাচ্ছে এটা ডাউনলোড করতে পারেন ", ডাউনলোড jQuery" ক্লিক করুন এবং আপনি এটি পেয়েছেন. এটাই. এবং প্রকৃতপক্ষে, আমরা এটি দেখে মনে হচ্ছে কি কটাক্ষপাত করা যাবে. আপনি এখানে ডাউনলোড করুন উপর ক্লিক করা হলে, jQuery এই. এটা আপনার জন্য সব জাদু উপাদান আছে যে শুধু এক বড় জাভাস্ক্রিপ্ট ফাইলের. এই সব সময়ে পাঠযোগ্য নয় minified সংস্করণ হয়. আপনি পাঠযোগ্য, যা উন্নয়ন সংস্করণ তাকান পারেন কিন্তু এখনও খুব খুব লম্বা. এটা সেখানে উপাদান অনেক. আপনি এটি Google-এর হোস্ট সংস্করণে লিঙ্ক করতে পারেন. সুতরাং যে আপনি শুধু এটি প্রদান করার জন্য Google উপর নির্ভর করার অনুমতি পাবেন. তারা সব সময় পাওয়া যায় তা প্রতিটি সংস্করণ প্রদান করে. সুতরাং আপনি সম্ভবত এটা আপনার জন্য হোস্ট করার জন্য Google-এর উপর নির্ভর করতে পারেন. অথবা আপনি jQuery নিজের সাম্প্রতিক সংস্করণে লিঙ্ক করতে পারেন. তারা সবসময় সর্বশেষ সংস্করণে আপডেট করা যে একটি URL আছে. এটা jQuery-সর্বশেষ, এবং যে সঙ্গে এক সমস্যা আছে যা যে যদি আপডেট jQuery এবং পূর্ববর্তী কার্যকারিতা কিছু তারা retrograded বা অবচিত হয়ে ছিল তা না পারে - এটা এখন আর সমর্থিত পেতে শুরু হতে পারে. আপনি, সংস্করণ 1.8.2 ব্যবহার করে একটি ওয়েবসাইট লিখতে তাই আপনি যদি সময় সংস্করণ দ্বারা 2.7 আসে আউট আপনি লিখেছেন ফাংশন কিছু আর কাজ করে না. সুতরাং, 32 kB ফাইল শুধু ডাউনলোড করার ভাল আপনার ওয়েব পৃষ্ঠায় এটি করা, এবং তা চিরকালের জন্য কাজ করব. 

আমি এগিয়ে যান এবং jQuery প্রকৃত কার্যকারিতা সম্পর্কে কথা বলা শুরু করতে যাচ্ছি. প্রথম জিনিস নির্বাচক হয়. এই jQuery প্রথমে প্রদান ভাবা হয়েছিল কি না. এবং যদি আপনি তাকান ডকুমেন্টেশন ক্লিক করতে পারেন আমি বিছানার চাদর করা যাচ্ছে না নির্বাচক জন্য বিস্তারিত ডকুমেন্টেশন. নির্বাচক পিছনে ধারণা আপনি একটি পৃষ্ঠায় নেভিগেশন HTML উপাদান নির্বাচন করতে পারেন. একটি পৃষ্ঠায় উপাদান ID-র এবং ক্লাস এবং তাদের অন্যান্য চিহ্নিতকরণের দিক আছে. এর রয়েছে - বিভিন্ন আদেশ মধ্যে they're. তারা একে অপরের ভিতরে নেস্টেড করছি কিছু সময়. JQuery আপনি পৃষ্ঠা থেকে উপাদানগুলি উদ্ধার যে সহজ প্রশ্নের গঠন করতে পারবেন. তারপর আপনি, jQuery ফাংশন ব্যবহার করে এই উপাদান নিপূণভাবে করতে পারেন আমরা পরে পাবেন ম্যানিপুলেশন বিভাগে যা. আপনি HTML, CSS এর পরিবর্তন, পরিবর্তন করতে পারেন আপনি অ্যানিমেশন এবং কিছু নির্দিষ্ট ইভেন্ট নেভিগেশন সক্রিয় যে ফাংশন যোগ করতে পারেন. কিছু ক্লিক করা হলে সুতরাং, উদাহরণস্বরূপ, যদি আপনি এরকম কিছু করতে চান আপনি jQuery হিসেবে ব্যবহার করে তা করতে পারে. এবং উপাদান নির্বাচন উপায়ে বিপুল নম্বর আছে. তাদের অধিকাংশই, আমি কখনও ব্যবহার করেছি, কিন্তু মৌলিক বেশী আছে যা বেশ গুরুত্বপূর্ণ. উপাদান নির্বাচক, উদাহরণস্বরূপ, যদি আপনি শুধু কিছু নির্বাচন করছেন একটি DIV - আমি আসলে এই স্লাইড উপস্থাপনা জন্য খোলা কোড আছে. উদাহরণস্বরূপ, এখানে প্রথম স্লাইডে এর. এখানে আমরা একটি DIV আছে. আমরা আসলে পৃষ্ঠাতে সকল divs নির্বাচন করা হলে, এটা শুধু আমাদের এই ফাইলের মধ্যে উপস্থিত সমস্ত divs একটি অ্যারের দিতে যাব. আইডি নির্বাচক যদি আপনি একটি প্রদত্ত ID সহ কিছু নির্বাচন করতে দেয়. এই যেমন, এই জিনিস আইডি "কি," আছে তাই আপনি যদি এবং আমরা কি # পরিবর্তে কিছু আইডি দিয়ে এই না হলে, এটি শুধু একটি উপাদান আছে এবং যে পৃষ্ঠায় যে উপাদান যে একটি অ্যারের ফিরে হবে. আমরা না থাকার নির্বাচক এই ভাবে একত্রিত করতে পারেন শুধুমাত্র divs যে ID-র মাধ্যমে বিষয় নির্বাচন করুন. হ্যাঁ তাই. শুধু যে আইডি আছে divs নির্বাচন করুন. বর্গ জন্য আপনি শুধু একটি বিন্দু ব্যবহার, এটি CSS এর রূপে একই জিনিস. বংশধর এছাড়াও কাজ করে; আপনি কিছু শ্রেণী আছে, তাই যদি উদাহরণস্বরূপ, তাই - এবং এটি মধ্যে উপাদানগুলি নেস্টেড হয়েছে সেখানে কিছু ক্লাস হয় এবং এটি অন্য পৃষ্ঠায় লিঙ্ক একটি নোঙ্গর ট্যাগ আছে, আপনি যদি এই লিঙ্কটি পুনরুদ্ধার করতে এই সিনট্যাক্স ব্যবহার করতে পারেন. আপনি একযোগে একাধিক জিনিষ নির্বাচন করতে পারেন; শুধু কমা চিহ্ন দ্বারা সেগুলি বিভাজন, আপনি চান কোন নির্বাচক ব্যবহার, এবং আপনি একটি অ্যারের মধ্যে একযোগে তাদের সব নির্বাচন হবে. এবং তারপর এছাড়াও নির্বাচক না আছে, তাই আপনি সব divs নির্বাচন করতে পারবেন কিছু নির্দিষ্ট ক্লাস নেই. এবং যে ঠিক এই নির্বাচন কিভাবে কাজ করে পরিচিতি পেতে একটি সহায়ক উপায়. আমি একটি দ্বিতীয় মধ্যে কিছু কংক্রিট উদাহরণ দেখাব. 

উন্নত নির্বাচক হয় - এই মাত্র কয়েক উদাহরণ. সেখানে এই অত্যাধিক আছে, কিন্তু আপনি সমস্ত ইমেজ ট্যাগ নির্বাচন করতে চান তাহলে কিছু উপাদান মধ্যে, তারপর আপনি ঠিক: চিত্র. উদাহরণস্বরূপ, এমনকি উপাদান নির্বাচন করতে চান তাহলে তাদের 20 আছে কিনা আপনি, 0, 2, 4, 6 এবং তাই নির্বাচন করতে চান এমনকি, অথবা আপনি করতে পারেন: আপনি কি অদ্ভুত. এই ছদ্ম সিলেক্টর আছে, যা আসলে তারা গনা এর মানে হল যে প্রত্যেক অন্যান্য উপাদান বরং যাচ্ছে এবং তাদের সব নির্বাচন আর. আপনি এটিও করতে পারেন - প্রতিটি উপাদান বিশেষ গুণাবলী থাকতে পারে. উদাহরণস্বরূপ, বর্গ = কেন্দ্র এছাড়াও একটি বৈশিষ্ট্য হল. এই নোঙ্গর ট্যাগ জন্য, href, হাইপারটেক্সট রেফারেন্স, এছাড়াও একটি বৈশিষ্ট্য হল. এটা সত্যিই সাধারণ এর - তাই যদি আপনি একটি নির্দিষ্ট পৃষ্ঠা বা শুধু লিঙ্ক থেকে কিছু যে নির্বাচন করতে পারেন. আপনি চান যে কোন বৈশিষ্ট্য নিয়ে কিছু নির্বাচন করতে পারবেন. এবং তারপর, এছাড়াও বৈশিষ্ট্য উপস্থিত রয়েছে. আপনি, যেমন, সমস্ত ইনপুট উপাদানের নির্বাচন করতে চেয়েছিলেন যে, তাদের নামের শব্দ "পাস" আছে একটি পৃষ্ঠায় একটি ইনপুট টেক্সট ব্লক হয়েছে থাকে যে আপনি যে নির্বাচন হতে পারে একটি উপায় হতে চাই যে "পাসওয়ার্ড," বলা হচ্ছে. এবং আরো অনেক আছে. আপনি এগিয়ে যান এবং ডকুমেন্টেশন তাকান পারেন এবং এটি কিভাবে কাজ করে নির্দিষ্ট উদাহরণ দেখুন. 

পরবর্তী জিনিস DOM ম্যানিপুলেশন হয়. আমরা উপাদান নির্বাচন করার পর, আমরা আসলে তাদের সঙ্গে স্টাফ করতে চাইবে. এ পর্যন্ত আমরা এ সব যে দিকে তাকিয়ে, কিন্তু আপনাকে ডকুমেন্টেশন তাকান, আমরা কি করতে পারে যে অনেক সত্যিই আছে. এই মুহুর্তে, আমরা এই উপস্থাপনা উপাদান নির্বাচন করুন চলুন এবং তাদের jQuery ব্যবহার নিপূণভাবে. এই jQuery ব্যবহার বাস্তবায়িত হয়, কারণ আমরা jQuery গ্রন্থাগারের এক্সেস আছে এবং আমরা এই কোড মধ্যে যারা ফাংশন ব্যবহার করতে পারেন. আপনি জানেন না পারে যে দরকারী জিনিস কনসোল. এবং Google Chrome আমি ব্যবহার করছি কি না. আপনি Alt কমান্ড জে টিপতে পারেন অথবা Alt নিয়ন্ত্রণ জে কনসোল খোলার জন্য. ফায়ারফক্স আমি এটা কমান্ড স্থানান্তর K অথবা নিয়ন্ত্রণ স্থানান্তর কে মনে সাফারি আপনি কিছু সেটিংস পরিবর্তন করতে যেতে হবে. এখন পর্যন্ত আপনি এটি করতে চান তবে একটি লিঙ্ক আছে, কিন্তু আমি Chrome বা Firefox পেয়ে সুপারিশ. সুতরাং এর কনসোল খুলুন যাক, এটা এখানে নিচে না. এটা আপনি মূলত আপনি চান কিছু ঠিক করতে পারবেন. তাই আপনি শুধু একটি পরিবর্তনশীল নামক এক্স তৈরি টাইপ করতে পারেন এক্স = 5, X + + 2 কি দেখতে দিন. আপনি সি এস ভালো কিছু করতে পারেন, এমনকি + + চলুন দেখা যাক, এক্স এবং CS50 হবে + + 45. আপনি শুধু কিছু সাধারণ জাভাস্ক্রিপ্ট স্টাফ করতে পারেন. কিন্তু আপনি এখানে jQuery করতে পারেন. 

সুতরাং এখানে এই প্রথম দিক তাকান. আমরা একটি স্ট্রিং যা এইচটিএমএল, নামক একটি পরিবর্তনশীল তৈরি করতে যাচ্ছেন. এটা কিছু নতুন টেক্সট বলা হচ্ছে যে, এটি একটি অনুচ্ছেদের ট্যাগ আছে. সুতরাং আমরা এই HTML আছে, এটা অনুচ্ছেদের ট্যাগ, কিছু নতুন লেখা নেই. এখন আমরা আসলে পৃষ্ঠা থেকে এটি যোগ করতে চান. আমি এই অনুচ্ছেদের জন্য এইচটিএমএল, এখানে এই শিরোনাম, পরিশেষে যোগ আইডি যাতে এটা সেট. তারপর আমরা পরিশেষে যোগ আইডি নির্বাচন করে যদি এটি লিখবেন আমি তৈরি এইচটিএমএল পরিবর্তনশীল, এটা ঠিক এই অনুচ্ছেদের ট্যাগের পরে, শেষে যে এইচটিএমএল যোগ হবে. আমরা যে যদি তাই - আমরা এই অনুচ্ছেদের নির্বাচিত এবং আমরা, আমি এখনো যোগ করেনি এইচটিএমএল পরিবর্তনশীল সঙ্গে পরিশেষে যোগ ফাংশন বলা করেছি এটি পৃষ্ঠায় অধিকার আছে যে নতুন টেক্সট যোগ হবে. আমরা এটি যে উপাদান প্রারম্ভে, আগে যেতে হবে, যার মানে পূর্বে লিখুন করতে পারেন. তাই শুরুতে এবং পরে কিছু নতুন লেখা নেই. আমি এগিয়ে যান এবং আমি ঠিক করেছি এই স্টাফ পরিত্রাণ পেতে রিফ্রেশ করতে পারেন. কিন্তু যে আপনি পূর্বে লিখুন ব্যবহার করতে পারেন কিভাবে একটি উদাহরণ ও পদ্ধতি লিখবেন পাতা নেভিগেশন স্টাফ নিপূণভাবে, কিছু এইচটিএমএল যোগ করুন. 

এছাড়াও আপনি ক্লাস পরিবর্তন করতে পারেন. পিছনে এই বিন্যাস ফাইলের মধ্যে, আমি Win বর্গ জন্য এই তৈরি করেছি যে টেক্সট রঙ লাল, কিছু পটভূমির রঙ, এবং একটি টেক্সট ছায়া আছে. এটা অসহ্য মনে হচ্ছে, কিন্তু আমি আসলে করতে পারেন - এই অনুচ্ছেদের ক্লাস ID চিহ্নিত করা হয়. তাই আমি Win জন্য বর্গ যুক্ত করতে পারেন. আমি, কনসোল এই নির্বাহ করতে পারেন এবং যে বর্গ যোগ করা হবে, এবং এখন এটা অসহ্য মনে হচ্ছে, যেমন প্রত্যাশিত. CSS এর দ্বারা স্বয়ংক্রিয়ভাবে ক্লাস আপনি প্রয়োগ পায় - একটি বর্গ জন্য CSS আছে, এটি স্বয়ংক্রিয়ভাবে প্রয়োগ পরার আপনি একটি উপাদান শ্রেণী পরিবর্তন হলে. তারপর আমরা শুধু Remove ক্লাস ব্যবহার করে সরাতে পারেন. আপনি লাল বা হাইলাইট মত কিছু পূর্বনির্ধারিত ক্লাস আছে, তাই আপনি যদি এবং তারপর আপনি, উপাদান যারা প্রয়োগ করতে চান আপনি প্রত্যেক সময় styling সকল CSS করতে হবে না. আপনি শুধু একটি উপাদান ক্লাস যোগ করতে পারেন, এবং তারপর এটি স্বয়ংক্রিয়ভাবে হয়ে যাবে - এটি স্বয়ংক্রিয়ভাবে যে বর্গ জন্য উপযুক্ত দেখবে. আমরা কিছু সরাতে পারেন; তাই আমি সমস্ত divs নির্বাচন করতে যাচ্ছি পাতা এবং তাদের সরান. যে মত চেহারা কি যাচ্ছে? এটা কিছুই অনুরূপ যাচ্ছে, তাই বাম কিছুই আসলে আছে. আমার উপস্থাপনা সর্বস্বান্ত হয়. আমি ভাগ্যক্রমে, রিফ্রেশ করুন এবং এটি ফিরিয়ে আনতে পারেন এটা শুধু একবার চলমান, কারণ আপনি সম্পূর্ণ পৃষ্ঠা অফ একটি উপাদান ধ্বংস করতে চান, যে সরানোর একটি উদাহরণ. 

এছাড়াও আপনি মুছে ফেলা যাবে, এবং আমি পৃষ্ঠাতে সকল অনুচ্ছেদের ট্যাগ নির্বাচন করতে যাচ্ছি এবং তাদের ভিতরে যান এবং তাদের মধ্যে আছে যাই হোক না কেন টেক্সট প্রতিস্থাপন সঙ্গে মাত্র শব্দ "পরীক্ষা." আপনি এই কাজ করতে, তাহলে আপনি এই পরীক্ষার সঙ্গে পৃষ্ঠায় প্রত্যেক অনুচ্ছেদের প্রতিস্থাপন করব. YEP. তারা সব পরীক্ষার প্রতিস্থাপিত করছি. সুতরাং যে টেক্সট অ্যাক্সেস এবং এটি মুছে একটি উদাহরণ. আপনি তথ্য উদ্ধার করতে পারেন, এবং এই ইনপুট বক্স জন্য সত্যিই শীতল হয়. আপনি মানুষের মধ্যে স্টাফ টাইপ করা হয় যে একটি ইনপুট বক্স আছে, মানুষ সেটিকে স্টাফ টাইপ করছেন, এখানে আমরা ইনপুট, লেখার একটা টাইপ সঙ্গে কোনো ইনপুট ট্যাগ নির্বাচন করুন. এই ক্ষেত্রে, পুরো উপস্থাপনার মধ্যে শুধুমাত্র একটি ইনপুট বক্স আছে, তাই আমরা শুধু প্রথম একটি নির্বাচন করব, এবং তারপর আমরা এটা Val ফাংশন কল. , যে মূল্য ফেরৎ, এবং একটি ইনপুট বক্স মান ভিতরে হতে হবে যাই হোক না কেন ঠিক হয়. আমরা এই কাজ করতে হলে তাই, এটা স্ট্রিং স্টাফ ধার্য করা হয়. আমরা আরো স্টাফ লেখা পরে আবার কল এটা এবং যদি এটা আরো স্টাফ মধ্যে সক্রিয় করে. যে, চেক তারপর একটি ইনপুট বক্স উপাদান অ্যাক্সেস করতে এক দুর্দান্ত উপায়, এবং এই একটি বৈধ ইমেইল ঠিকানা, এই যেমন, একটি বৈধ তারিখ. তা টাইপ হয় আপনি শুধুমাত্র সঙ্গে সঙ্গে কাপড় উদ্ধার করতে পারেন এবং তারপর, এটা বৈধ কিনা চেক সার্ভারের এটা ফেরত পাঠান, আপনি এটি দিয়ে কিছু করতে চান. এবং যে আপনি ঐ বাক্সে ভিতরে কি অ্যাক্সেস কিভাবে. 

আপনি এর পরিবর্তে যোগ করার তাই, সিএসএস সরাসরি পরিবর্তন করতে পারেন কিছু পূর্বনির্ধারিত বৈশিষ্ট্য আছে যে একটি শ্রেণী, আপনি শুধু আপনি কিছু করতে চান যাই হোক না কেন CSS এর যুক্ত করতে পারেন. সম্পূর্ণ উপস্থাপনা যা তাই আসুন নির্বাচন শরীর, এবং রঙের টেক্সট কি রং সংজ্ঞায়িত যে সম্পত্তি. আমরা লাল এটি পরিবর্তন করা হলে, পাতা সব লেখা লাল রং কাজে লাগান হবে. আমরা পটভূমির রঙ নীল ভালো কিছু করতে পারেন সেখানে আমরা যেতে; এটি সুন্দর হবে. আপনি কি এই সঙ্গে কিছু করতে চান করতে পারেন. CSS এর সম্পত্তি ব্যবহার করে, আপনি কি সত্যিই কিছু যে কোনো সময় এ দেখায় কিভাবে পরিবর্তন করতে পারেন. পরবর্তী জিনিস প্রভাব হয়. প্রভাব, মূলত সিএসএস পরিবর্তন হিসাবে একই জিনিস কিন্তু আসলে এটি কিছু অতিরিক্ত অ্যানিমেশন প্রদান. সুতরাং পরিবর্তে শুধু রঙ দেখাচ্ছে বা লুকিয়ে কিছু বা পরিবর্তন, আপনি আসলে এটি অ্যানিমেটেড করতে পারেন. আপনি এটি জন্য ব্যাপক ডকুমেন্টেশন কটাক্ষপাত করা করতে চান তাহলে এখানে ডকুমেন্টেশন, না. কিন্তু আমি প্রধান বেশী আবরণ যাচ্ছি. শো এবং লুকান বৈশিষ্ট্য আছে. আইডি আসলে এই পুরো বাক্স চিহ্নিত করুন / আড়াল করুন, আমি গোপন সুতরাং, যদি এটা শুধু অদৃশ্য হয়ে যাবে. আমি এটা ফিরে আসা করতে চাই এবং যদি আমি আবার এটা দেখাতে পারেন. এবং এটি শয্যাশায়ী. এটা আসলে, অন্তর্হিত হওয়া না আমি আসলে পৃষ্ঠা থেকে এটি অপসারণ করা হয়নি, শুধু আমি লুকানো আপনি দৃশ্যমানতা এর CSS এর সম্পত্তি সেট তাই আপনার আর এটি দেখতে পারবেন না. এছাড়াও আপ স্লাইড এবং নিচে স্লাইড এর; আপনি এই প্রভাব আছে করতে পারবেন. এটি অদৃশ্য আপ স্লাইড, এবং এটা disappears পর আপনি এটি থেকে ফিরে আসা করতে নিচে স্লাইড পারেন. এবং এখন এটা শয্যাশায়ী. বিবর্ণ আইডি এই বাক্সটি চিহ্নিত করা - যা এই বিবর্ণ প্রভাব, এর রয়েছে. আমি এটা বিবর্ণ তাহলে, এটি ধীরে ধীরে অদৃশ্য হয়ে যাব. আমি এটি বিবর্ণ করতে পারেন, এবং এটি ফিরে আসবে. আপনি ফেইড ফাংশন নির্দিষ্ট, যা আপনি ফেইড করতে পারেন. আপনি এটা যে আপনি চান কোন নির্দিষ্ট অস্বচ্ছতা বিবর্ণ থাকতে পারে. আপনি .5 থেকে ধীরে ধীরে বিবর্ণ সুতরাং, যদি এটা অর্ধেক দৃশ্যমান হয়ে যাব. আমি এটা .1 যেতে করতে পারেন, এবং ফিরে 1 আবার সম্পূর্ণরূপে দৃশ্যমান করতে. যে শুধু আপনি কি করতে পারেন যে অন্য অ্যানিমেশন এর. 

টগল প্রভাব আছে. তাই আমি এই বক্স যা অনুরূপ টগল আইডি, নির্বাচন করতে যাচ্ছি এবং যে DIV নেভিগেশন আপনি টগল কল করতে পারেন, এটা দৃশ্যমান যদি তা অদৃশ্য হয়ে যাবে, এটি অদৃশ্য যদি এটা আবার দৃশ্যমান হবে. তাই আমি ঠিক দু 'বার এই টগল ফাংশন বলা হয়; প্রথমটি ছিল লুকান একই জিনিস, দ্বিতীয় কল একটি শো হিসাবে একই জিনিস ছিল. এবং আপনি একটি ফেইড টগল সঙ্গে এটা করতে পারেন যা আসলে এটা fades ছাড়া একই জিনিস, আছে. এবং স্লাইড সঙ্গে একই জিনিস টগল. ক্রমিক প্রভাব হিসাবে ভাল আছে, যার মানে হচ্ছে আপনি একটি উপাদান নির্বাচন করুন এবং শুধু এটি অ্যানিমেশন পদ্ধতি একটি গুচ্ছ কল ব্লক, আপনি এটি বিবর্ণ চেয়েছিলেন, তাহলে নিচে স্লাইড এবং তারপর লুকান এবং তারপর বিবর্ণ, এটি একটি সারিতে তাদের কি হবে. তাই অদৃশ্য, ফিরে আসেন - কিছু কারণে, লুকান ঘটবে না. এটি চেষ্টা করা যাক. হ্যাঁ, তাই এটি খুঁজে ম্লান এবং তারপর দূরে slid. এবং প্রচুর আরো আছে. আপনি অ্যানিমেশন ফাংশন ব্যবহার করতে পারেন আপনার নিজস্ব অ্যানিমেশান তৈরি করতে, যা, মোটামুটি জটিল কিন্তু এটা অসীম extensibility সাথে আপনি উপলব্ধ. আপনি চান অ্যানিমেশন কোন ধরনের করতে পারেন. এছাড়াও আপনি একটি সময়ে একাধিক অ্যানিমেশন আপ সারিতে সারিতে ব্যবহার করতে পারেন. সুতরাং, আপনি পৃষ্ঠা জুড়ে উড়ে কিছু করতে চান তাহলে নীচে বাম উপরের ডান দিক থেকে স্লাইড, আপনি তা করতে পারে এবং শুধু অন্যান্য পর এক যাচ্ছে কর্ম একটি গুচ্ছ আছে. 

আমরা যে বিষয়ে কথা বলতে যাচ্ছেন পরবর্তী জিনিস ঘটনা হয়. ঘটনা আপনাকে অনুমতি দেয় - এ পর্যন্ত, আমরা শুধু কনসোল মধ্যে কিছু লিখে আসছি এবং যে, এই ঘটতে করা একটি পদ্ধতি কিন্তু একটি প্রকৃত পৃষ্ঠায় আপনি পাবে যাচ্ছেন না কনসোল মধ্যে ব্যবহারকারীকে টাইপ জিনিষ. আপনি জিনিষ স্বয়ংক্রিয়ভাবে ঘটতে করতে চান. যে জন্য, আপনি কিছু নির্দিষ্ট ইভেন্ট ঘটছে নেভিগেশন সক্রিয় ঘটনা যে ব্যবহার করতে হবে. আপনি পূর্ণ বিবরণ প্রাপ্ত নথিপত্র পরীক্ষা করতে পারবেন. সুতরাং এর দেখতে দিন. আমরা, বাক্স লুকাতে বা দেখাতে চান আমি এখনো এটি বাস্তবায়ন করা হয়নি, কারণ কিন্তু এই মুহূর্তে এই বোতাম কিছু না. আমি প্রকৃত HTML পৃষ্ঠাতে যেতে যাচ্ছি. এখানে স্লাইড এর. স্লাইডের জন্য একটি DIV আছে. এটা স্লাইড ক্লাস আছে. টেক্সট নেই. এখন, এই বক্স এবং বক্স বাটন আছে. কিভাবে আমরা আসলে এই অদৃশ্য হয়ে যাবে না? প্রথম সব, এর বক্স আইডি অদৃশ্য করে তোলে যে একটি ফাংশন লিখুন যাক. এই funtion জন্য বাক্য গঠন হয়, এর ঠিক hideTheBox কল করা যাক. গ্রহণ করা কোনো আর্গুমেন্ট আছে, কারণ এটা কোনো আর্গুমেন্ট গ্রহণ করা হয় না. আমরা বাক্স আইডি নির্বাচন করতে পারেন. নির্বাচন jQuery ব্যবহার সুতরাং, আমরা, বাক্স আইডি নির্বাচন করতে পারবেন এবং তারপর এটা অদৃশ্য না. চলুন শুরু করা যাক এটি বিবর্ণ করতে. আমরা প্রকৃত কনসোলে এই ফাংশন দৌড়ে যদি আমরা এই ফাংশন সংজ্ঞায়িত করতে পারে; আমরা hideTheBox কল করতে পারেন, এবং এটি কাজ করে. কিন্তু আমরা আসলে বোতাম চাপা হয় তখন এটা ঘটতে করতে চান. যে কাজ করতে, আমরা একটি ইভেন্ট ব্যবহার আছে. কিছু নির্দিষ্ট বাটন অথবা কিছু পদক্ষেপ ঘটছে আপনি একটি ইভেন্ট আবদ্ধ করার জন্য, আমরা ঘটনা আরম্ভ হবে যে উপাদান নির্বাচন করুন - বা যে দুঃখিত, ইভেন্ট আরম্ভ হবে. 

সব সুতরাং প্রথম, এর বক্স বাটন আইডি নির্বাচন করা যাক কারণ যে বাটন জন্য এখন, বাটন, এবং, আমরা এটা ক্লিক যখন একটি অ্যানিমেশন তৈরি করতে চান. তাই এই ক্লিকের ফাংশন আছে. এটা যদি আপনি এটি অন্য একটি ফাংশন সহিত আবদ্ধ করতে পারবেন. এই ফাংশন একটি আর্গুমেন্ট হিসাবে অন্য ফাংশন লাগে আমরা hideTheBox ফাংশন প্রেরণ করতে পারেন এবং এই বাটনে ক্লিক না যখনই যে ফাংশন স্বয়ংক্রিয়ভাবে চালানো হবে. তাই এই, আমরা এই সংরক্ষণ, আমি রিফ্রেশ করব কাজ করবে ও - এক দ্বিতীয়, আমি দুঃখিত. আমার সম্পর্কে সত্যিই দ্রুত এই ঠিক করা যাক. ঠিক আছে. সেখানে আমরা যেতে. আমরা বাটন ক্লিক করা হলে তাই এখন বক্স অদৃশ্য. আমরা শুধু fadeToggle এই পরিবর্তন করতে পারেন বক্স লুকাতে বা দেখাতে এটা পরিবর্তন, আমরা রিফ্রেশ করুন এবং যদি এটি খুব কাজ করবে. আমরা এটা লুকাতে পারেন, আমরা এটি দেখাতে পারেন, এবং যে কাজ চলতে থাকবে. আমরা কি করতে পারি আরেকটি বিষয় হল, আমরা আসলে এই hideTheBox ফাংশন সংজ্ঞায়িত করতে হবে না আমরা ক্লিক করুন ফাংশন কল করার আগে. সুতরাং পরিবর্তে ফাংশন সংজ্ঞা এবং hideTheBox কলিং, আমরা শুধু এই জিনিস ক্লিক না করা হলে এটি কল চলুন. তাই আমরা এখানে এটা বেনামে নির্ধারণ করতে পারবেন যা জাভাস্ক্রিপ্ট আছে একটি বৈশিষ্ট্য. আপনি একটি ফাংশন নির্ধারণ করতে পারবেন; সাধারণত, আমরা ফাংশন hideTheBox বলতে হবে আর্গুমেন্ট সঙ্গে, কিন্তু এর পরিবর্তে, আমরা, আর্গুমেন্ট কোন কাজ বলতে পারেন , ফাংশন সংজ্ঞায়িত কোঁকড়া বক্রবন্ধনী শুরু যে কোঁকড়া বক্রবন্ধনী বন্ধ, এবং তারপর শুধুমাত্র এখানে ফাংশন নির্ধারণ প্রথমে প্রথম বন্ধনী এবং শেষ প্রথম বন্ধনী মধ্যে যে ক্লিক করুন ফাংশন আর্গুমেন্ট মিলা. আমরা এই ফাংশন পার করছি, আমরা এখানে ডান কোড এই লাইন কপি করতে পারেন, এবং যে সঠিক একই জিনিস করতে হবে. এবং এখন আমরা এই র্যান্ডম fadeTheBox ফাংশন আছে না যে কোন আপাত কারণে কাছাকাছি বসা হয়. ফাংশন বেনামে সংজ্ঞায়িত করা হয়, এটি একটি নাম করা হবে না. আমরা বক্স বাটন ক্লিক করা হলে এটা শুধুমাত্র চালানো হবে. তাই রিফ্রেশ আরো একবার, আরো এক সময়, এবং আপনি এটা এখনও কাজ করে দেখতে পারেন. এবং আপনি যে ইভেন্ট তৈরি করতে কিভাবে. 

আমরা ব্যবহার করতে পারেন বিভিন্ন ঘটনা অনেক আছে. আমি ঠিক কিভাবে এই কাজ আপনাকে দেখাতে কনসোল ব্যবহার করে ফিরে স্যুইচ করতে যাচ্ছি. এই প্রতিটি ID-র প্রতিটি বক্স মিলা. এই বাক্সে ক্লিক করে আইডি, তাই এই এক কী ID, এবং এই এক মাউস আইডি হয়. , বরং প্রত্যেক সময় এটা খুঁজে টাইপ; আরও একটি জিনিস এই কর্ম ফাংশন আছে যে আমি আসলে এগিয়ে যান এবং এখানে এই কর্ম ফাংশন নিচে সংজ্ঞায়িত. এটা hideTheBox ফাংশন হিসাবে একই জিনিস আছে. এই বক্স এবং fades এটা খুঁজে অথবা ইন fades এটা হয় পায় আমরা এখানে ব্যবহার করতে সক্ষম হন, কেন এবং যে. আমরা এই ক্লিক আইডি ক্লিক করুন সুতরাং, যদি আমরা বক্স অদৃশ্য বা অন্তর্ধান করতে চাই. আমরা শেষ স্লাইডে ছিল যে বাটন হিসেবে একই জিনিস. আমরা যে কল এখন পরে,, আমরা এই ক্লিক করতে পারেন এবং বক্স অদৃশ্য হয়ে যাবে তারপর আবার ক্লিক করুন এবং বক্স অন্তর্ধান হবে. যে বেশ সহজ. ডাবল ক্লিক করে, একই জিনিস আছে ছাড়া এটি একটি ডবল ক্লিক করা আবশ্যক. আপনি একবার ক্লিক করুন এবং এটি আবার ক্লিক করুন, যদি তাই কিছুই ঘটবে কিন্তু আপনি ডবল দ্রুত ক্লিক করুন, এটি অদৃশ্য হয়ে যাব. আপনি ডবল আবার ক্লিক করা হলে, এটি ফিরে আসবে. তাই যে বেশ সহজ. কীবোর্ড ইনপুট অদ্ভুত ধরনের; আমি এটা আসলে এই উদাহরণে কাজ মনে করি না কারণ নিচে কি, কি আপ এবং কী প্রেস এবং অন্যান্য গুরুত্বপূর্ণ কর্ম আপনি এটি সহিত আবদ্ধ কি ব্যাপার কোন উপাদান সক্রিয়. উদাহরণস্বরূপ, আমি শরীরের বা সম্পূর্ণরূপে অন্য কিছু নিচে কী আবদ্ধ, এমনকি যদি তারপর, এটা এখনও কোন ব্যাপার সক্রিয় হবে - তা নির্দিষ্ট নয়. এটার উপর ক্লিক করতে হবে এবং কিছু অদৃশ্য করতে একটি কি টিপুন না. এটা নির্বিশেষে আমি এখনো সদস্য না হয়ে বর্তমানে করছি উপাদান সক্রিয় করা হবে সুতরাং এই আসলে এই উদাহরণে কাজ করে না কারণ এটি কীবোর্ড ইনপুট DIV মধ্যে ইনপুট লিখে আমাকে স্বীকার করে না. 

কিন্তু আপনি মাউস কর্ম তাকান, প্রথম এক বিলম্ব হয়, এবং এটি CSS এর ব্যবহার করে এই কিছু করতে পারেন. আপনি CSS এর ব্যবহার যদি আপনি কিছু উপর কার্সার রেখে, আপনি যাতে এটি তৈরি করতে পারেন তারপর তার শৈলী পরিবর্তন. কিন্তু jQuery ব্যবহার করে আপনার পাশাপাশি অন্য জিনিস শৈলী পরিবর্তন করতে পারেন. উদাহরণস্বরূপ, আমরা এই DIV উপর কার্সার রেখে হলে পদক্ষেপ কল চলুন. যে আমরা এটা উপর কার্সার রেখে, তাহলে বক্স অদৃশ্য হবে মানে. আমরা দূরে থেকে সরানো হলে, বক্স অন্তর্ধান হবে. আমরা এই কল এবং এটি উপর কার্সার রেখে যদি, বাক্স, অন্তর্হিত হওয়া না এবং যত তাড়াতাড়ি আমরা দূরে সরানো, এটা ফিরে আসে. আমরা মাউস আইডি নেভিগেশন এই উপর কার্সার রেখে দেখুন ফাংশন কল হলে, আমরা বাক্স উপর কার্সার রেখে যদি যা, তারপর এই বাক্সটি চিহ্নিত করা, তারপর বক্স আসলে অদৃশ্য হয়ে যাবে - এটা ঠিক এখন ভীতু হচ্ছে, কিন্তু - আমরা দূরে থেকে সরানো, এটা আবার দেখা দেওয়া হবে. রাইট এখন এটা কিছু কারণ জন্য পিছন দিকে আছে. মাউস লিখুন এবং মাউস সরানো ফাংশন কিছুটা অনুরূপ, কিন্তু সামান্য ভিন্ন. মাউস মাউস হিসাবে প্রত্যাশিত বক্সে প্রবেশ করে তখন শুধুমাত্র সক্রিয় লিখুন. আপনি তা সরানো সুতরাং, যদি তা অদৃশ্য হয়ে যাব. আপনি দূরে সরানো যখন কিন্তু অন্তর্ধান হবে না; আপনি ফিরে আসা এটি জন্য এটি সম্মুখের দিকে পিছান করতে হবে. সক্রিয় হবে যা মাউস সরানো ফাংশন, এর রয়েছে মাউস বক্সের মধ্যে এমনকি উপস্থিত যখনই. তাই এটি শুধু ইন ও আউট ফেইড, যাচ্ছে নেভিগেশন যাব. এবং এটা আসলে লগিং - এটি খুঁজে এটা ঠিক মধ্যে ফেইড এর মত মনে হয় এবং, কিন্তু আসলে এটি এই তুলনায় আরো অনেক কর্ম লগিং এর তাই আপনি দূরে সরানো যখন এটি শুধুমাত্র এটা তাদের এক হাজারের মত দর্শন লগ কারণ বর্তা করব. হয়ত না হাজার হাজার. হয়তো পাঁচ. এটা যে তুলনায় আরো লগ করা হয়. বিন্দু, সমস্ত মাউস কর্ম হয়, তাদের অনেক আছে. আপনি চাইলে অন্যান্য বেশী আপ পড়তে পারেন, কিন্তু তারা সব সামান্য ভিন্ন আপনি প্রয়োজন যেটা এক এবং আপনি বাছাই করতে পারেন নির্দিষ্ট যেটা উদ্দেশ্য জন্য আপনি কি করার চেষ্টা করছেন. 

আমি কথা বলতে যাচ্ছি পরবর্তী জিনিস AJAX হয়. AJAX, আমি, আমরা এই বছরের অনেক গভীরতা হিসাবে জাভাস্ক্রিপ্ট আবরণ না জানি তাই আমি ঠিক এক মিনিটের জন্য সাধারণ AJAX বিষয়ে কথা বলতে যাচ্ছি. AJAX অসমকালীন জাভাস্ক্রিপ্ট এবং XML এর জন্য দাঁড়িয়েছে. এটি মূলত, উদাহরণস্বরূপ, যদি আপনি ফেসবুকে আছেন এবং যখন, আপনি একটি বিজ্ঞপ্তি push কর্মের এর AJAX আপনার ওয়েব ব্রাউজারের চলছে এ কারণে যে. আপনার ওয়েব ব্রাউজার আসলে এর সেকেন্ডের প্রতিটি দম্পতি তাদের জিজ্ঞাসা, ফেসবুক এর সার্ভার যাচ্ছে, আপনি আমার জন্য নতুন কিছু আছে এবং তারপর এটি আপনাকে ফেরত আসে. এই যদি আপনি কোনও সার্ভার অনুরোধ পাঠাতে পারবেন আসলে পৃষ্ঠা লোড করেও. তাই সাধারণত, আপনি পিএইচপি এবং একটি ডাটাবেস ব্যবহার করছেন, আপনি সার্ভার থেকে নতুন তথ্য পেতে পারেন আগে আপনি পৃষ্ঠাটি রিফ্রেশ করতে হবে. কিন্তু AJAX ব্যবহার করে, আপনি সর্বদা নতুন নতুন তথ্যের জন্য টান করতে পারেন আপনি একটি বোতাম বা যে মত কিছু ক্লিক করা হলে অথবা এটি জন্য টান. আমাদের পৃষ্ঠা পুনরায় লোড না করে অনুরোধ পাঠাতে পারবেন এই সুতরাং এবং আমরা পেতে বা অনুরোধ পোস্ট হয় ব্যবহার করতে পারেন. 

অনুরোধ আপনি যদি Google.com যাও, যেমন, হয় GET এবং Q = পরীক্ষা করবেন. যে তাদের একটি ক্যোয়ারী পরীক্ষা দেবার হচ্ছে. এটি URL-এ নিজেই মধ্যে যারা পরামিতি মধ্যে ক্ষণস্থায়ী কারণ এবং যে একটি অনুরোধ পেতে হবে. আপনি ডাকযোগে পাঠানোর করছি যদি একটি পোস্ট অনুরোধ. আপনি একটি চিঠি এটি করা এবং তাদেরকে এটা বন্ধ অর্ণবপোত মত, এর কিন্তু তারা আসলে বিষয়বস্তু না. তারা URL-এ দৃশ্যমান না. আপনি সরাসরি তা লিখুন পারে না; আপনি প্রায় গোপনে তা পাঠাতে হবে. এটি একটি পোস্ট আছে. কিন্তু jQuery ব্যবহার করে, আপনি এবং অনুরোধ পোস্ট করতে পারেন আরো অনেক কিছু সহজেই আপনি সাধারণত শুধু প্লেইন জাভাস্ক্রিপ্ট ব্যবহার করে পারে না. আপনি অনুরোধ GET ব্যবহার API গুলি প্রশ্ন করতে পারেন, এবং আপনি লগইন তথ্যের জন্য চেক করতে পারেন. পরবর্তী পৃষ্ঠায়, আমি যা "লাঞ্চের জন্য কি?", জিজ্ঞেস করল, এই তৈরি হার্ভার্ড খাদ্য API টি ব্যবহার করে, তাই এর যে টান আপ করা যাক. এই কমান্ডের সাহায্যে আপনি একটি API একটি পেতে অনুরোধ করতে jQuery ব্যবহার করতে পারেন কিভাবে মাত্র একটি উদাহরণ এবং এটি থেকে ফিরে তথ্য পেতে. সুতরাং আমরা আজকের জন্য মেনু দেখতে চাই এবং আমরা লাঞ্চের জন্য কি দেখতে চাই. এখানে jQuery কে পেতে অনুরোধ তৈরি করা URL-এর. আপনি $ ব্যবহার করুন. ফাংশন পেতে. প্রথম যুক্তি যদি আপনি অনুসন্ধান করছেন তাই ঠিক কি, URL টি. তারপর পরবর্তী যুক্তি পেতে অনুরোধ সম্পূর্ণ হলে কমান্ড সঞ্চালনকালে একটি ফাংশন. তাই আপনি যদি সার্ভারের কিছু অনুরোধ অফ পাঠাতে ফিরে আসা জন্য অপেক্ষা করুন. ফিরে আসে, তখন আপনি সার্ভার থেকে ফিরে যে তথ্য দিয়ে কিছু পদক্ষেপ নিতে যাচ্ছেন. এর এগিয়ে যান এবং এই হিসাবে ভাল কোড চলুন শুরু করা যাক. আমি উদ্দেশ্য উপর, নয়তো এই কোডটা করা হয়নি. এখানে করণীয় আছে. প্রথম সব, এর ইভেন্ট বাইন্ডিং ব্যবহার করা যাক এই বোতাম চাপা হয়, যখন আমরা একটি পেতে অনুরোধ অফ পাঠাতে যাতে. এবং এমন কিছু তথ্য দিয়ে অনুরোধ আয় পেতে, আমরা এই খাবার তথ্য আইডি DIV সেটিকে লিখে চলুন. প্রথম সব, এর খাদ্য বাটন আইডি নির্বাচন করা যাক. এটি ক্লিক করা হলে, আমরা এটা কিছু করতে চাই. চলুন শুরু করা যাক ঠিক আগে, এটি একটি বেনামী fuction করতে. যারা কোঁকড়া ধনুর্বন্ধনী মোড়ানো করতে পারে না, এবং এই বাটন টেপা হলে, আমরা একটি পেতে অনুরোধ পাঠাতে চান লাঞ্চের জন্য কি চেক করতে. যে কাজ করতে, আমরা মাত্র $ টাইপ করতে পারেন. পেতে. এই ডলার চিহ্ন ব্যবহার করে, একটি jQuery ফাংশন. এটা আর্গুমেন্ট একটি দম্পতি লাগে. প্রথম এক, URL টি দ্বিতীয় এক কলব্যাক ফাংশন, বলা হচ্ছে যে ফাংশন যে অনুরোধ আসলে ফেরৎ যখন. শুধু প্রথম URL টি নির্মাণ করা যাক. আমরা ডেভিড আপ লিখেছে API-টি থেকে এটি পেতে পারেন. এখানে যাওয়া, আমরা food.cs50.net/api/1.3/menus যে দেখতে পারেন এবং তারপর আপনি শুধু আপনি চান যে পরামিতি নামের মধ্যে পাস. সুতরাং পরামিতি 1 মূল্য 1. এটা প্রমিত জন্ম মত দেখাচ্ছে, আজ জন্ম, ডিফল্ট শুরু আপনি কিছু, এবং এছাড়াও শেষ তারিখ ডিফল্ট মান প্রবেশ করাবেন না হলে আজ থেকে আপনি কিছু লিখুন না. যে আমরা চাই কি. আমরা শুধু আজকের জন্য তথ্য পেতে চান. 

আমরা বিন্যাসে JSON হতে চাই. যে শুধু নির্বিচারে; আপনি যে আপনি চান কোন ফর্ম ব্যবহার করতে পারেন. আপনি CSV ব্যবহার করতে পারেন, কিন্তু JSON জাভাস্ক্রিপ্ট অবজেক্ট স্বরলিপি হয়. জাভাস্ক্রিপ্ট এটা মানে কি বুঝতে জন্য এটি খুবই সহজ এবং আমরা আরও সহজে উপায় যে এটি প্রিন্ট আউট করতে পারেন. তাই এর JSON এটা অনুরোধ যাক, এবং let এর অনুরোধ লাঞ্চ যোগ্য. = লাঞ্চ খাবার তাই. ঠিক যে URL টি আপ লিখুন, আমরা এখানে ফিরে যান. মেনু আছে. প্রথম পরামিতি আউটপুট = JSON হয় কারণ যে আমরা চাই কি, এবং আপনি একটি সঙ্গে পরামিতি আলাদা 'এবং'. দ্বিতীয় প্যারামিটার - আমি মনে করি না. খাবার. এবং আমরা খাবার = লাঞ্চ করতে চান. আপনি আপনার ব্রাউজারে এটি টাইপ এবং এটি যাচ্ছে এই URL-এ পরীক্ষা করতে পারবেন. এটা যে আপনি কিছু আউটপুট দেবে. এটা ঠিক লাঞ্চের জন্য যে পণ্যদ্রব্য একটি গুচ্ছ আছে. এই কুশ্রী বিন্যাসে এর. আমরা একটি ভাল বিন্যাসে আমাদের পৃষ্ঠা সম্মুখের দিকে এটি প্রিন্ট করতে চান. URL টি সঠিক হয়, তাই এখন আমরা একটি ফাংশন লিখতে প্রয়োজন অনুরোধটি সফল হয় যখন ফিরে কল. এই ফাংশন আসলে একটি আর্গুমেন্ট গ্রহণ করা হবে. এটি তথ্য হতে হবে. তথ্য পেতে অনুরোধ করা হয় পরে পেতে অনুরোধ থেকে ফিরে আসে কি না. আমরা কোঁকড়া ধনুর্বন্ধনী করতে পারেন; এখানে আমরা Anonymous ফাংশন লিখুন যে আমরা ফিরে তথ্য পেতে যখন যে তথ্য ব্যবহার করে, executes. তথ্য সুতরাং, আমরা এই URL টি টাইপ করা হলে, এই তথ্য অনুরূপ যাচ্ছে কি না. এই বিশাল স্ট্রিং হতে যাচ্ছে. কিন্তু ভাল জিনিস, জাভাস্ক্রিপ্ট JSON.parse ফাংশন ব্যবহার করে তা বিশ্লেষণ করতে পারেন. তাই এর পার্স তথ্য নামে একটি নতুন পরিবর্তনশীল তৈরি করা যাক. এবং পার্স তথ্য বস্তুর একটি অ্যারে. প্রত্যেকটি বস্তুর যেমন তথ্য উপস্থিত রয়েছে - ভাল, এর কটাক্ষপাত করা যাক. এটি একটি তারিখ, একটি খাবার, বিভাগ, রেসিপি, এই সব অন্যান্য উপাদান আছে. তাই এর পরবর্তী প্রতিটি এক জন্য নাম প্রিন্ট আউট করা যাক. আমরা তা থেকে ফিরে পেতে যে জিনিস সমগ্র অ্যারের পুনরুক্তি উপর চলুন শুরু করা যাক, এবং শুধু প্রতিটি প্রিন্ট আউট - প্রতিটি এক নাম প্রিন্ট করা হবে. এই লুপ জন্য একটি হল. 

জাভাস্ক্রিপ্ট, আপনি একটি অ্যারের উপর একটি পরিবর্তনশীল এবং লুপ তৈরি করতে পারেন যেখানে এই সহায়ক সিনট্যাক্স আছে এবং var আমি পরিবর্তে var আমি = 0 করতে হচ্ছে, তাই শুধু iterator হয় তোমার দ্বারা তুলনায় কম ছিল, আমি + + ', আপনি ঠিক পার্স তথ্য আমি var করতে পারেন. এই উদাহরণে, পার্স তথ্য (ঝ) বর্তমান উপাদান মিলা হবে অ্যারের, প্রকৃত বস্তু. এবং আমরা এটি সম্পর্কে নাম খুঁজে পেতে চান. তাই ঠিক কি নাম দিন. এবং শেষ জিনিস, আমরা আবার কিছু jQuery আছে চলুন না. আসলে DIV বর্তমানে খালি এই খাবার তথ্য DIV এটি যোগ করুন. সুতরাং নির্বাচন করা যাক. আমরা jQuery নির্বাচন খাবার তথ্য DIV আইডি, অথবা খাবার তথ্য আইডি ব্যবহার করব, দুঃখিত. আমরা এই সংযুক্ত করতে চান. আমরা পরীক্ষা করে থাকেন, উদাহরণস্বরূপ, এটা এটা প্রতি একক সময় মুছে ফেলা হবে. সুতরাং আমরা এই সংযুক্ত করতে পারবেন. অ্যারের মধ্যে বর্তমান উপাদান, আমরা নাম খুঁজে পাবেন এবং আমরা খাবার তথ্য আইডি DIV শেষে এটি অন্তর্ভুক্ত করব. এবং তারপর মাত্র, এটি ক্লিনার বানাতে এটি এক লাইনে সব না, তাই আমরা একটি লাইন বিরতি যুক্ত করব. সব ভাল যায় সুতরাং, যদি যে আপনি ভাল হতে হবে - প্রথম সব, এই বাটনে ক্লিক না যখনই এই URL-এ একটি পেতে অনুরোধ অফ পাঠাতে হবে. তথ্য তা থেকে ফিরে আসে, এটা বিশ্লেষণ করব JSON, যে তথ্য প্রতিনিধিত্বমূলক সমগ্র অ্যারের ওভার লুপ, সেটিকে হত্তয়া এবং তারপর নাম এবং একটি লাইন বিরতি লিখবেন পূর্বে খালি যা ছিল এই খাবার তথ্য আইডি প্রতিটি লাইন. সুতরাং এই পৃষ্ঠায় ফিরে যাচ্ছে, আমরা রিফ্রেশ করব, ক্লিক আউট, এটি - এটি কাজ করে না. যে দু: খজনক. ডিবাগিং আসে অংশে যেখানে এবং এই হল Index.html, লাইন 1. এটা আকর্ষণীয়. ঠিক আছে, ভাল, এই কাজ সময় ব্যয় বদলে, আমি যাচ্ছি আমি যে কাজ ফাইল টান আপ, যা সম্পূর্ণ সংস্করণ. আমি পার্থক্য কি নিশ্চিত না, কিন্তু আমরা ঠিক এর পরিবর্তে এই পর্যন্ত খুলতে পারে. এবং আমরা AJAX যান, এবং এই সঠিকভাবে কাজ করা উচিত. যে, লাঞ্চ জন্য আজ কি হয় কোন বিশেষ, যাতে এটি প্রায় কোট সঙ্গে, তাই এটা prettiest না. কিন্তু, সম্ভবত, আপনি একটি চূড়ান্ত প্রকল্পের জন্য এই কাজ করা হয়েছে কিনা, আপনি এটা ভাল চেহারা করতে হবে. কিন্তু যে আপনি পেতে অনুরোধ করতে কিভাবে শুধুমাত্র একটি সহজ উদাহরণ. আমরা প্রকৃত কোড তাকান, আমি অনুমান করছি, আমি চমত্কার নিশ্চিত নই এটি এখনও অনেক সুন্দর একই. ওহ, আমি একটি স্ট্রিং রূপান্তর করতে ভুলে গেছি, যে এটি. না, এটা এখনও কাজ না. তথাপি, এখানে প্রকৃত সম্পন্ন কোড এর এই মত হওয়া উচিত কি জন্য, এবং এটা আমি ঠিক বাস্তবায়িত কি একই জিনিস আছে. আপনি বোতাম ক্লিক করেন, তখন এটি JSON স্বয়ংক্রিয়ভাবে তথ্য বিশ্লেষণ পেতে ব্যবহার করে. এটা থেকে ফিরে তথ্য নেয় এবং সম্পূর্ণ অ্যারে মাধ্যমে loops এবং আউট প্রিন্ট - লাঞ্চের জন্য আজকে যাই হোক না কেন, এটা নাম, এবং প্রতিটি লাইন পরে একটি লাইন বিরতি appends. যে আপনি পেতে ফাংশন ব্যবহার কিভাবে. 

আপনি আমি সময় আছে কি না, যা পোষ্ট ব্যবহার করতে পারেন এটা জন্য একটি উদাহরণ আপ লিখুন, কিন্তু আমরা ডকুমেন্টেশন তাকান করতে পারেন. আপনি jquery.post তাকান আপনি এটি প্রায় একই জিনিস দেখতে পারেন. আপনি একটি URL আছে, কিন্তু এর পরিবর্তে ব্যবহার পরামিতি পাশ - শুধু URL-এ নিজেই জন্য স্ট্রিং মধ্যে তাদের নির্বাণ আপনি যদি এই তথ্য পরিবর্তনশীল মধ্যে পাস করতে হবে একটি অভিধান, মূলত একটি অ্যারের যে মান মানচিত্র পরামিতি. আপনি যে পাস, এবং যে একটি পোস্ট ব্যবহার করে তাদের পাঠায়. এবং একবার আপনি, তাহলে আপনি একটি সাফল্য কার্যকারিতা থাকতে পারে যে আছে তথ্য ফিরে আসে যখন যে executes. অন্যথা, এটা ঠিক একই. তাই পোষ্ট ব্যবহার করে, যদি আপনি একটি ইনপুট ফর্ম আছে যদি আপনি, যেমন, পোস্ট ব্যবহার করতে পারেন আপনি তা মানুষের ইনপুট পাসওয়ার্ড যাক, এবং যারা পাসওয়ার্ডগুলি অফ পাঠান আপনার ব্যাক শেষ স্ক্রিপ্ট, ব্যবহারকারীর বৈধ বা না কিনা ডাটাবেস থেকে চেক করতে. আপনি কি করতে পারেন যে সমস্ত jQuery ব্যবহার করে এর পরিবর্তে এ সব পৃষ্ঠাটি রিফ্রেশ হচ্ছে. যে আমি আগে আপনি দেখিয়েছেন যে ব্লগে প্রয়োগ কিভাবে. আমরা শেষ পোর্টাল যান এবং লগ আউট হলে, লগ আউট কাজ না করে লগ আউট. আচ্ছা, আমাকে একটা নতুন উইন্ডোতে এটি আপ খুলুন. এখানে আছে একটি পাসওয়ার্ড, এবং আমি র্যান্ডম কিছু টাইপ করতে যাচ্ছে. এটা কাজ করে না, কিন্তু আমরা না দেখতে পারেন আসলে এ সব পৃষ্ঠাটি রিফ্রেশ আছে. কোড, আপনি এটি তাকান করতে চান, এখানে সব পাওয়া যায়. কোড তাই আমি একদা গত বছর লিখেছিলেন. আপনি এখানে দেখতে পারেন, আমরা একটি পোস্ট অনুরোধ পাঠিয়ে করছি. আমি, ফিরে শেষ login.php নামে একটি ফাইল আছে পাসওয়ার্ড বৈধ কিনা, যা পরীক্ষা করা হবে. আমরা পাস পরামিতি সাথে ম্যাপ করা পাসওয়ার্ড, হয় বর্তমানে এই ইনপুট বক্সে যে ইনপুট. এবং ডাটা ফিরে আসে, আমরা চেক করুন. তথ্য মিথ্যা হয়, তাহলে আমরা ভুল পাসওয়ার্ড, বলতে, এটা স্লাইড নীচে এবং এটা যে পরে অদৃশ্য হয়ে যাবে না. অন্যথায়, আমরা অ্যাডমিন পৃষ্ঠা লোড. এবং এই সব JSON ব্যবহার করে এটি করা হয়. এই কোড অনেক লাইন, আপনি ফিরে, শেষে তথ্য প্রেরণ করতে পারেন এটি সঠিক কিনা পরীক্ষা করুন, আপনি সঠিকভাবে লগ ইন কিনা চেক করুন এবং প্রকৃতপক্ষে সঠিক পৃষ্ঠা ব্যক্তি পুনঃনির্দেশিত, এটি সাড়া বা তাদের লগ ইন লেট এবং তারা একটি ভুল পাসওয়ার্ড ছিল যে তাদের কথা না. যাতে আপনি jQuery পোষ্ট ব্যবহার করতে পারে কিভাবে একটি উদাহরণ আপনার পিছনে শেষে একটি পোস্ট অনুরোধ পাঠাতে, কেউ সঠিকভাবে লগ ইন কিনা চেক. 

ঠিক আছে, আমি সব উদাহরণ, এবং আমি আবরণ চেয়েছিলেন সমস্ত উপাদান যাতে. যারা jQuery আপনি করতে পারবেন যে প্রধান বিষয় হল: , উপাদান নির্বাচন করুন DOM ম্যানিপুলেশন ব্যবহার করে তাদের পরিবর্তন, আপনি প্রভাব যোগ করতে পারেন, কিছু নির্দিষ্ট ইভেন্ট জিনিস সক্রিয়, এবং এছাড়াও খুব অঙ্গীভূতভাবে এবং সহজে AJAX অনুরোধ করতে পারেন. সুতরাং, আসছে বা দেখার জন্য আপনাকে ধন্যবাদ যদি আপনার কোন প্রশ্ন থাকে, তাহলে শুধু আমাকে. হ্যাঁ? [ছাত্র] আপনাকে আবার দেশে যখন, আপনি মূল্য উদ্ধৃতি পোস্ট অনুরোধের পর JSON ছিল এবং আমি যে কি ভাবছি ছিল. >> হ্যাঁ, আমি দেখতে. প্রশ্ন, যেমন আমি শুধু দেখিয়েছেন, যে ছিল প্রায় উদ্ধৃতিচিহ্নের মধ্যে শব্দ JSON ছিল - আমি আবার টান আপ করব - পোস্ট ফাংশন কাছাকাছি. আমি শুধু দেখানোর জন্য এটা pulling করছি. সুতরাং এখানে এই পোস্টে অনুরোধ, এবং উদ্ধৃতিচিহ্নের মধ্যে এই JSON আছে. যে আমরা আউটপুট হতে আশা করছি সংজ্ঞায়িত করে. আমরা আশা ডাটা টাইপ হিসেবে JSON পাস, তাই আপনি যদি , এটি একটি আবশ্যক নয়, কিন্তু আমরা তা পাস হলে তারপর তথ্য স্বয়ংক্রিয়ভাবে JSON হিসেবে পার্স করা হবে না. সুতরাং আমরা এটা উপর JSON পার্স ফাংশন কল করতে হবে না এটা ঠিক স্বয়ংক্রিয়ভাবে ঘটতে দেব. এবং যদি আপনি পোস্টের জন্য ডকুমেন্টেশন কটাক্ষপাত করা হলে, এই ডাটা টাইপ পরিবর্তনশীল, সার্ভার থেকে প্রত্যাশিত তথ্য টাইপ আছে. ভুল হতে পারে যে একটি বুদ্ধিমান অনুমান ডিফল্টরূপে, তাই আপনি এটি ফাঁকা ছেড়ে পারেন, কিন্তু এটি তথ্য টাইপ এর আপনি এটি JSON অথবা XML বা অন্য কিছু, তা ব্যবহার করছেন কোডিং এ. 

অন্য কোন প্রশ্ন? ঠিক আছে. আপনার যদি অন্য কোন প্রশ্ন থাকে, তাহলে আমাকে ইমেইল বিনা দ্বিধায় vshekhawat@college.harvard.edu এ, এবং স্লাইড এবং কোড প্রশংসনীয় শীঘ্রই অনলাইনে পাওয়া উচিত. আপনার চূড়ান্ত প্রকল্পের সাথে সৌভাগ্য কামনা করছি, আপনি jQuery ব্যবহার আশা করি. [CS50.TV]