আপনার নমুনা অনুযায়ী,
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script src="abc.js" type="text/javascript">
</script>
<link rel="stylesheets" type="text/css" href="abc.css"></link>
<style>h2{font-wight:bold;}</style>
<script>
$(document).ready(function(){
$("#img").attr("src", "kkk.png");
});
</script>
</head>
<body>
<img id="img" src="abc.jpg" style="width:400px;height:300px;"/>
<script src="kkk.js" type="text/javascript"></script>
</body>
</html>
মোটামুটিভাবে মৃত্যুদন্ড কার্যকর করা প্রবাহ:
- এইচটিএমএল ডকুমেন্টটি ডাউনলোড হয়ে যায়
- এইচটিএমএল ডকুমেন্টের বিশ্লেষণ শুরু হয়
- এইচটিএমএল পার্সিং পৌঁছেছে
<script src="jquery.js" ...
jquery.js ডাউনলোড এবং বিশ্লেষণ করা হয়- এইচটিএমএল পার্সিং পৌঁছেছে
<script src="abc.js" ...
abc.js ডাউনলোড, পার্সড এবং চালিত হয়- এইচটিএমএল পার্সিং পৌঁছেছে
<link href="abc.css" ...
abc.css ডাউনলোড এবং বিশ্লেষণ করা হয়- এইচটিএমএল পার্সিং পৌঁছেছে
<style>...</style>
- অভ্যন্তরীণ সিএসএসের বিধিগুলি পার্স এবং সংজ্ঞাযুক্ত
- এইচটিএমএল পার্সিং পৌঁছেছে
<script>...</script>
- অভ্যন্তরীণ জাভাস্ক্রিপ্ট পার্স করে চালিত হয়
- এইচটিএমএল পার্সিং পৌঁছেছে
<img src="abc.jpg" ...
abc.jpg ডাউনলোড এবং প্রদর্শিত হয়- এইচটিএমএল পার্সিং পৌঁছেছে
<script src="kkk.js" ...
kkk.js ডাউনলোড, পার্সড এবং চালিত হয়- এইচটিএমএল ডকুমেন্টের পার্সিং শেষ হয়
নোট করুন যে ডাউনলোডটি ব্রাউজারের আচরণের কারণে অ্যাসিনক্রোনাস এবং অ-ব্লকিং হতে পারে। উদাহরণস্বরূপ, ফায়ারফক্সে এই সেটিংটি রয়েছে যা প্রতি ডোমেনে এক সাথে অনুরোধের সংখ্যা সীমিত করে।
উপাদানটি ইতিমধ্যে ক্যাশে হয়েছে কিনা তার উপরও নির্ভর করে, অদূর ভবিষ্যতে অনুরোধে উপাদানটি পুনরায় অনুরোধ করা যাবে না। যদি উপাদানটি ক্যাশে করা থাকে তবে প্রকৃত URL এর পরিবর্তে উপাদানটি ক্যাশে থেকে লোড করা হবে।
পার্সিং শেষ হয়ে গেলে এবং দস্তাবেজ প্রস্তুত এবং লোড করা হয়, ইভেন্টগুলি onloadবরখাস্ত করা হয়। সুতরাং যখন onloadবরখাস্ত করা হয়, $("#img").attr("src","kkk.png");চালানো হয়। তাই:
- দস্তাবেজ প্রস্তুত, অনলোড বহিস্কার করা হয়েছে।
- জাভাস্ক্রিপ্ট কার্যকর কার্যকর
$("#img").attr("src", "kkk.png");
kkk.png ডাউনলোড এবং লোড হয় #img
$(document).ready()ঘটনা আসলে ঘটনা বহিস্কার যখন সমস্ত পৃষ্ঠা উপাদান লোড এবং প্রস্তুত করা হয়। এটি সম্পর্কে আরও পড়ুন: http://docs.jquery.com/ টিউটোরিয়ালস : পরিচয়_কেন্দ্র (দস্তাবেজ)। প্রস্তুত ()
সম্পাদনা করুন - এই অংশটি সমান্তরাল বা না অংশের উপর আরও বিস্তৃত:
ডিফল্টরূপে এবং আমার বর্তমান উপলব্ধি থেকে ব্রাউজারটি প্রতিটি পৃষ্ঠাকে সাধারণত 3 উপায়ে চালায়: HTML পার্সার, জাভাস্ক্রিপ্ট / ডিওএম এবং সিএসএস।
এইচটিএমএল পার্সার মার্কআপ ল্যাঙ্গুয়েজ পার্সিং এবং ব্যাখ্যার জন্য দায়ী এবং সুতরাং অন্য 2 টি উপাদানকে কল করতে সক্ষম হতে হবে।
উদাহরণস্বরূপ, যখন পার্সারটি এই লাইনটি জুড়ে আসে:
<a href="#" onclick="alert('test');return false;" style="font-weight:bold">a hypertext link</a>
পার্সার 3 টি কল করবে, দুটি জাভাস্ক্রিপ্টে এবং একটি সিএসএসে করবে। প্রথমত, পার্সার এই উপাদানটি তৈরি করে এবং এটি ডিওএম নেমস্পেসে এই উপাদানটির সাথে সম্পর্কিত সমস্ত বৈশিষ্ট্যের সাথে নিবন্ধভুক্ত করবে। দ্বিতীয়ত, পার্সারটি অনক্লিক ইভেন্টটিকে এই নির্দিষ্ট উপাদানের সাথে আবদ্ধ করার জন্য কল করবে। শেষ অবধি, এই নির্দিষ্ট উপাদানটিতে সিএসএস স্টাইল প্রয়োগ করতে এটি সিএসএস থ্রেডে আরেকটি কল করবে।
এক্সিকিউশনটি শীর্ষে এবং একক থ্রেডযুক্ত। জাভাস্ক্রিপ্টটি বহু-থ্রেডযুক্ত দেখতে পারে তবে সত্য যে জাভাস্ক্রিপ্ট একক থ্রেডযুক্ত। এ কারণেই বাহ্যিক জাভাস্ক্রিপ্ট ফাইলটি লোড করার সময়, মূল HTML পৃষ্ঠার পার্সিং স্থগিত করা হয়।
যাইহোক, সিএসএস ফাইলগুলি একই সাথে ডাউনলোড করা যায় কারণ সিএসএস বিধি সর্বদা প্রয়োগ করা হয় - এর অর্থ উপাদানগুলি সর্বদা সর্বাধিক সিএসএস বিধি সংজ্ঞায়িত করা হয় - এটি এটিকে অবরুদ্ধ করে তোলে।
কোনও উপাদান পার্স করার পরে কেবল ডিওএম এ পাওয়া যাবে। সুতরাং কোনও নির্দিষ্ট উপাদানের সাথে কাজ করার সময়, স্ক্রিপ্টটি সর্বদা পরে বা উইন্ডোতে চালিত ইভেন্টের মধ্যে রাখা হয়।
এই জাতীয় স্ক্রিপ্ট ত্রুটি ঘটায় (jQuery এ):
<script type="text/javascript">/* <![CDATA[ */
alert($("#mydiv").html());
/* ]]> */</script>
<div id="mydiv">Hello World</div>
কারণ যখন স্ক্রিপ্টটি বিশ্লেষণ করা #mydivহয় তখনও উপাদানটি সংজ্ঞায়িত হয় না। পরিবর্তে এটি কাজ করবে:
<div id="mydiv">Hello World</div>
<script type="text/javascript">/* <![CDATA[ */
alert($("#mydiv").html());
/* ]]> */</script>
অথবা
<script type="text/javascript">/* <![CDATA[ */
$(window).ready(function(){
alert($("#mydiv").html());
});
/* ]]> */</script>
<div id="mydiv">Hello World</div>
