[Powered by Google Translate] [সেমিনার] [জাভাস্ক্রিপ্ট অবকাঠামো: কেন এবং কিভাবে] [কেভিন Schmid] [হার্ভার্ড বিশ্ববিদ্যালয়] [এটি CS50.] [CS50.TV] 

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

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

এর তালিকা করতে যে প্রয়োগ শুরু করা যাক. চলুন শুরু করা যাক আমরা এই এইচটিএমএল দেওয়া করছি বলে. আমি এই একটু ছোট করা যাচ্ছে না. যেহেতু আপনি দেখতে পারেন, আমি করণীয় বলছেন যে একটু হেডার থাকবে আমি একটি করণীয় একটি বিবরণ লেখা যাবে এবং সামান্য বাক্স এবং তারপর, তাই এই তালিকায় একটি নতুন করণীয় প্রবেশ চেষ্টা করুন একটি নতুন আইটেম বোতাম যাক. একটি জাভাস্ক্রিপ্ট অবকাঠামো সেমিনার দিন এবং আমি নতুন আইটেম আঘাত না. আমি আমার সম্পর্কে বাস্তবায়ন বলছেন যে এই Javascript সতর্কতা পেতে. আমরা এটা বাস্তবায়ন পেয়েছেন. HTML এবং জাভাস্ক্রিপ্ট উভয়, এর জন্য এই কোড চেক আউট চলুন শুরু করা যাক. এখানে আমাদের এইচটিএমএল এর. আপনি এখানে দেখতে পারেন, এখানে আমাদের একটু Todos হেডার এর. তাই বলা হয়, উপরের যে সাহসী বিষয় ছিল এবং তারপর আমরা, স্থানধারক সঙ্গে ইনপুট বক্স আছে এবং তারপর এই ফাংশন addTodo কল যে এই বোতাম একটি নির্দিষ্ট বৈশিষ্ট্য আছে. কেহ বাচক হয় ক্লিক করলে যে কি অনুমান করতে চান না? [ছাত্র শ্রবণাতীত প্রতিক্রিয়া] গুড, ক্লিক করুন, একটি ইভেন্ট ভালো ধরণের হয় মাউস ক্লিক করে শুধু একটি ঘটনা, এবং কি আমরা করছেন মত আমরা যে ফাংশন নির্বাহ করার জন্য এই বাটন ক্লিক করুন ইভেন্ট tying করছি না. AddTodo যে বাটন ক্লিক করে এই ইভেন্ট হ্যান্ডলার হয়. 

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

এর এই একটি শট দিতে. চলুন শুরু করা যাক ব্যবহারকারী এই বক্সের মধ্যে প্রবেশ করে কিছু বলতে. আমি এখানে, পাঠ্য টাইপ কিছু. আমি কিভাবে জাভাস্ক্রিপ্ট মাধ্যমে এক্সেস যে টেক্সট বাছাই করবেন? যে জাভাস্ক্রিপ্ট মনে রাখবেন, তার মৌলিক বৈশিষ্ট্য এক এটি আমাদের দেয় যে DOM এই কর্মসূচি প্রবেশাধিকার. এটা আমাদের এই প্রকৃত এইচটিএমএল উপাদান এবং তাদের বৈশিষ্ট্য একসেস করতে পারবেন. আমরা বেয়ার হাড় জাভাস্ক্রিপ্ট সঙ্গে যে কি উপায় আমরা আসলে getElementByID বলা জাভাস্ক্রিপ্ট মধ্যে একটি ফাংশন ব্যবহার করতে পারেন. আমি কিছু পরিবর্তনশীল সেখানে টাইপ করা যে টেক্সট সংরক্ষণ করতে ইচ্ছুক তাই আমি new_todo নামে একটি নতুন পরিবর্তনশীল বলতে যাচ্ছি এবং আমি যে উপাদান পেতে যাচ্ছি. এই একটি ফাংশন. GetElementByID. এবং এখন, আমি আইডি দ্বারা একটি উপাদান পেয়ে করছি, তাই আমি মনে করি যে টেক্সট বক্সের আইডি প্রয়োজন তাই আমি এটা আইডি new_todo_description দিয়েছি. যে আমি একটি উপাদান পেতে যাচ্ছি কিভাবে. যে পেতে যা ID উল্লেখ করার, এই ফাংশন আপনি আমার যুক্তি না. তাই যে HTML এ একটি উপাদান, এবং এটা বৈশিষ্ট্য আছে. আপনি এই দেখা করেছি. তারা আরোপ করছি. ব্যবহারকারীর ইনপুট সঞ্চয় যে টেক্সট উপাদান অ্যাট্রিবিউট মূল্য বলা হয়. আমি new_todo নামক এই পরিবর্তনশীল এখন যে টেক্সট বক্স মান সংরক্ষিত. এখন আমি এই পরিবর্তনশীল কর্মসূচি এক্সেস আছে, যা ধরনের শীতল হয় এখন আমি কি করতে পারি, কারণ আমি আমার করণীয় এটা তালিকায় যোগ করতে পারেন. 

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

এখন যে todos DIV ভেতরের এইচটিএমএল ভিতর, সম্পূর্ণরূপে স্পষ্ট এবং এখন আমি আমার তালিকা যোগ করা শুরু করতে হবে. আমি ফিরে যোগ করতে চান প্রথম জিনিস, unordered তালিকা ট্যাগ যা মূলত এই একটি unordered তালিকা শুরু যে নির্দেশ. এখন আমার todos অ্যারের মধ্যে প্রত্যেক উপাদান জন্য আমি যে এইচটিএমএল এর ভিতর এটি প্রিন্ট আউট করতে চান. আমি এই তালিকার নীচে এটা লিখবেন চাই. শুধু সি মত, আমি লুপ জন্য একটি ব্যবহার করতে পারেন, এবং আমি আমার তালিকা প্রারম্ভে শুরু করতে যাচ্ছি উপাদান 0, এবং আমি তালিকা দৈর্ঘ্য সব পথ যেতে যাচ্ছি. আমরা আসলে দৈর্ঘ্য সম্পত্তি ব্যবহার করে জাভাস্ক্রিপ্ট মধ্যে একটি অ্যারের দ্বারা পেতে পারেন. মূলত আমি এখানে এর ভিতর খুব অনুরূপ কিছু করতে যাচ্ছি যে উপাদান প্রিন্ট আউট. আমি আবার todos DIV, যে ভেতরের এইচটিএমএল সম্পত্তি, অ্যাক্সেস করতে পারেন এবং আমি এই নতুন তালিকা আইটেম যোগ করতে যাচ্ছি, এবং যে দ্বারা বেষ্টিত হতে যাচ্ছে এই Li ট্যাগ, এবং আমি + অপারেটর সঙ্গে concatenate যাচ্ছি এবং যে, আমার todos অ্যারের ith উপাদান এবং তারপর আমি যে ট্যাগ বন্ধ করতে যাচ্ছি. এখন প্রত্যেক উপাদান জন্য আমরা একটি নতুন তালিকা ভুক্তি যোগ করব. এবং তারপর আমরা সত্যিই করতে হবে যে সব ট্যাগ বন্ধ পাসে. আমি শুধু তালিকা ট্যাগ unordered যে বন্ধ বন্ধ করতে হবে. 

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

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

মূলত যে todos অ্যারের প্রতিটি করণীয় জন্য একটি আইটেম মূলত ইঙ্গিত করে যে সম্পূর্ণ অ্যারের মধ্যে আছে যে সম্পূর্ণ বা না কিনা. আমি এই কোড প্রশংসনীয় ন্যূনতম পরিবর্তন করতে ছিল করেছি তাই এখানে আমাদের addTodo ফাংশন. এখানে আমি অ্যারের মধ্যে এটি ঠেলাঠেলি করছি যে লক্ষ্য করুন, এবং তারপর আমি যে সম্পূর্ণ অ্যারের একটি 0 ঠেলাঠেলি করছি মূলত বলে যে নতুন করণীয় ধাক্কা সঙ্গে সমান্তরাল মধ্যে আমি, এই আইটেমটি যোগ করছি, এবং এটি এই মান সঙ্গে মিলিত এর তা অসম্পূর্ণ এর মানে হল যে. এবং তারপর আমি করণীয় তালিকা redrawing করছি. এখন, আমি এই drawTodoList ফাংশন যুক্ত করেছি বিজ্ঞপ্তি. এই, আমরা আগে কোড অনেক সময় লাগে মূলত বক্স খুঁজে clears এবং তারপর নতুন হুড়াহুড়ি তালিকা স্বপক্ষে. কিন্তু এই ভিতরে লুপ জন্য আমরা এখন একটু করছেন যে বিজ্ঞপ্তি. আমরা মূলত ith করণীয় আইটেম সংশ্লিষ্ট কি না তা এখানে চেক করছি সম্পূর্ণ, এবং আমরা এইসব 2 পরিস্থিতিতে ভিন্নভাবে ব্যবহার করছি. এটা সম্পূর্ণ, আমরা, এই Del ট্যাগ যোগ করছি যা মূলত আপনি প্রভাব মাধ্যমে যে ধর্মঘট পেতে পারেন উপায় এটা সম্পূর্ণ যদি করণীয় তালিকা আউট উত্তরণ, এটা না হলে, আমরা এটা সহ করছি না. তাই যে ধরনের, যে যত্ন নেয় 

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

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

আমরা todos [আমি] করছেন কিভাবে লক্ষ্য করুন. সম্পূর্ণ প্রোফাইল পরিবর্তে আলাদাভাবে সম্পূর্ণ অ্যারে চেক, এবং আমরা করণীয় সম্পত্তি পেয়ে থাকেন করণীয় স্ট্রিং পেতে চান যখন বিজ্ঞপ্তি যে করণীয় সম্পর্কে, তাই এই ধরনের ইন্দ্রিয় তোলে কারণ প্রতিটি আইটেম এটি সম্পর্কে এই স্বকীয় বৈশিষ্ট্য আছে. এটি একটি করণীয় আছে, এবং এটা সম্পূর্ণ বা না কিনা আছে. নেই অনেক পরিবর্তন আছে এই বৈশিষ্ট্যগুলি, শুধু কোড আরো কিছু যোগ করা হয়েছে. এই অধিকার, কিছু মুখপত্র উপর একটি উন্নতি? আমি একটি বিট নকশা খুঁজে আমরা উপাদান, মানে. এখন আমরা মূলত এই তথ্য encapsulate বস্তু আছে. আমরা জাভাস্ক্রিপ্ট পরিপ্রেক্ষিতে এখান থেকে কাজ করতে পারে আরো কিছু আছে? চাই নোটিশ যে এখানে ডান এই কোডটা একটি DIV ভেতরের এইচটিএমএল পাবার জন্য সামান্য, আমি অনুমান, দীর্ঘ. Document.getElementByID ("todos") আছে. InnerHTML. আমরা এই কোড একটি সামান্য বন্ধুত্বপূর্ণ বর্ণন করতে পারে একটি বিষয় তাই আমি আগে পিছে, স্ক্রলিং বাম এবং ডান রাখা হবে না আমি jQuery মত একটি লাইব্রেরি ব্যবহার করতে পারে না. 

এর, সেমিনার 2 চেক আউট চলুন শুরু করা যাক এবং এই একই কোড, কিন্তু এটা jQuery সঙ্গে কাজ. আপনি jQuery সঙ্গে খুব পরিচিত না হতে পারে কিন্তু ঠিক jQuery জাভাস্ক্রিপ্ট জন্য একটি লাইব্রেরী সাজানোর যে এটা যে সহজ DOM এর এক্সেস পৃথক উপাদান যেমন করে তোলে. এখানে পরিবর্তে document.getElementByID বলছে ("todos"). InnerHTML আমি jQuery অনেক ক্লিনার উপায় ব্যবহার করতে পারেন যা শুধু সিলেক্টর ব্যবহার করা হয়. যেহেতু আপনি দেখতে পারেন, এই কোড একটি সামান্য ক্লিনার নি খুব বৈশিষ্ট্যগুলি অনুরূপ, কিন্তু যে ধারণা. আমরা এতদূর জিনিষ একটি দম্পতি দেখা করেছি তাই আমরা শুধু কাঁচা জাভাস্ক্রিপ্ট বাস্তবায়ন শুরু করে. আমরা নতুন বৈশিষ্ট্য যোগ করা এবং আমরা আরও উন্নত করতে পারেন তা দেখিয়েছেন শুধু কি আমরা জাভাস্ক্রিপ্ট মধ্যে আছে. 

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

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

কৌণিক আমাদের DOM এবং কিছু আমাদের জাভাস্ক্রিপ্ট প্রতিনিধিত্ব রাখতে সহায়তা করে সুসংগত ধরনের, এটা JS ফাইল নেই তাই যদি programmatically সব যে এইচটিএমএল এড়িয়ে যাও পাবার কোন উপায় আছে যদি জাভাস্ক্রিপ্ট থেকে কিভাবে আমরা সুসংগত এই কথা মাথায় রেখে করা হয়? এটি. JS ফাইল নয়, এটা অধিকার, HTML এ হতে পেয়েছিলাম? এই, এইচটিএমএল ফাইলের নতুন সংস্করণ এবং আমরা এখানে অনেক জুড়েছেন বিজ্ঞপ্তি. Ng-ক্লিক করুন এবং Ng-পুনরাবৃত্তি বলে যে এই নতুন আরোপ করা আছে লক্ষ্য করুন. নকশা অসুবিধা এই সমস্যা সমাধানে কৌণিক এর পদক্ষেপ মূলত এইচটিএমএল অনেক বেশি শক্তিশালী করা হয়. কৌণিক আপনি HTML কিছুটা আরো ভাবপূর্ণ করতে সক্ষম হবেন একটি উপায়. উদাহরণস্বরূপ, আমি এই টেক্সট বক্সে গিঁট বা আবদ্ধ যাচ্ছি বলতে পারেন আমার কৌণিক জাভাস্ক্রিপ্ট কোড মধ্যে একটি পরিবর্তনশীল. এই Ng-মডেল যে ঠিক আছে. মূলত যে আইটেমটি এই টেক্সট বক্সে ভিতর যে, শুধু পরিবর্তনশীল new_todo_description সাথে সংযুক্ত জাভাস্ক্রিপ্ট কোড মধ্যে. আমি স্পষ্টভাবে যেতে হবে না, কারণ যে খুব শক্তিশালী DOM যে তথ্য পেতে. আমি document.getElementByID বলতে নেই. আমি DOM এক্সেস মত jQueries ব্যবহার করতে হবে না. আমি যে পরিবর্তনশীল পরিবর্তন যখন আমি একটি পরিবর্তনশীল এর সাথে সংযুক্ত করতে পারেন জাভাস্ক্রিপ্ট মধ্যে, এইচটিএমএল সাথে সুসংগত রাখা হচ্ছে যাতে দুই মধ্যে আগে পিছে যেতে থাকার প্রক্রিয়া সরলীকৃত. যে জানার জন্য? 

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

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

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

এর এই একটি সামান্য আরো তাকান. এখানে একটি দাঁড়া দৃশ্য. দাঁড়া বলছেন যে অন্যান্য জিনিস যে আপনার সম্পর্কে বা এমনকি সংগ্রহের চিন্তা করছি যে মডেলের অনেক প্রদর্শিত হচ্ছে কিছু উপায় আছে প্রয়োজন যাচ্ছি. আমরা তালিকা করতে যে রেন্ডার করার প্রয়োজন আমরা প্রতিটি মডেল জন্য প্রদান করতে পারে এবং যদি এটা চমৎকার হবে না অথবা প্রতিটি মডেল সঙ্গে এই সংযুক্ত আমাদের করার অনুমতি দেয় আমি দুই একসঙ্গে সাথে সংযোগ না? আগে যেহেতু আমরা মাধ্যমে চালানো হবে যে লুপ জন্য একটি ব্যবহার ছিল প্রতি আমাদের তালিকায় করণীয় এবং তারপর এখানে প্রিন্ট আউট আমরা মূলত এই মডেল সঙ্গে এটি সংযুক্ত হতে পারে. এটি একটি টু কি দৃশ্য. আমরা আগে পাওয়া করণীয় সঙ্গে যুক্ত করা হয়. এখন প্রতি করণীয় displayable বা renderable হয় এই করে প্রদর্শনটির-করতে. ক্ষেত্র কিছু লক্ষ্য করুন. আপনি যদি এই tagName হয় tagName কি মনে করেন: Li? একটি করণীয় রেন্ডার আমরা চেয়েছিলেন যখন আগে থেকে মনে রেখো আমরা স্পষ্টভাবে এই Li ট্যাগ সঙ্গে আমাদের todos পেয়ার করতে হবে. এখন আমরা এই করণীয় বাস যাচ্ছে যেখানে বলছে যে একটি Li ট্যাগ এর ভিতর হতে যাচ্ছে. এবং এখন আমরা আমাদের সঙ্গে todos ঘটনা যুক্ত করছি. 

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

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

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

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

কেহ জাভাস্ক্রিপ্ট অবকাঠামো সম্পর্কে কোনো প্রশ্ন আছে? [ছাত্র শ্রবণাতীত প্রশ্ন] ওহ, নিশ্চিত, যে একটি বড় প্রশ্ন. প্রশ্ন কিভাবে আমি অবকাঠামো অন্তর্ভুক্ত হয়নি ছিল? সর্বাধিক জাভাস্ক্রিপ্ট অবকাঠামো মূলত শুধুমাত্র JS ফাইল আপনি আপনার কোড শীর্ষে অন্তর্ভুক্ত করতে পারেন. আমি সব এই স্ক্রিপ্ট ট্যাগ আছে আমার এইচটিএমএল প্রধান অংশ লক্ষ্য করুন, এবং চূড়ান্ত স্ক্রিপ্ট ট্যাগ আমরা লিখিত করেছি কোড. এবং তারপর 3 কাঠামো কোড ঠিক এছাড়াও স্ক্রিপ্ট ট্যাগ করা হয়. আমি যা CDN বলা হয় তা থেকে তাদের অন্তর্গত করছি যার ফলে আমার এই সময়ে অন্য কারো থেকে এটি পেতে পারবেন কিন্তু প্রতি কাঠামো এই আপনি অনেক সুন্দর বিষয়বস্তু জানতে পারেন হয়েছে যে মত কিছু যা CDN বা কিছু পাওয়া যায় একটি বিশেষ JavaScript লাইব্রেরি জন্য, এবং তারপর আপনি এই স্ক্রিপ্ট ট্যাগ অন্তর্ভুক্ত করতে পারে. যে জানার জন্য? কুল. 

যারা 2 বিভিন্ন পন্থা আছে. যারা এই সমস্যা সমাধানের একমাত্র পন্থা নয়. বিভিন্ন জিনিস আছে যা কারো কাজ করতে পারে, এবং অনেক অবকাঠামো আউট আছে আছে. কৌণিক এবং দাঁড়া গল্প বলুন না. আপনার চূড়ান্ত প্রকল্পের সঙ্গে গুড লাক, এবং আপনাকে অনেক ধন্যবাদ. [CS50.TV]