<নোগ্রিপ্ট> এর বিপরীতে কি এইচটিএমএল আছে?

Question 1

এইচটিএমএলে এমন কোনও ট্যাগ রয়েছে যা জাভাস্ক্রিপ্ট সক্ষম থাকলেই কেবল এটির সামগ্রী প্রদর্শিত হবে? আমি জানি <noscript>যে জাভাস্ক্রিপ্ট বন্ধ হয়ে গেলে তার HTML বিষয়বস্তু প্রদর্শন করে প্রায় বিপরীত পথে কাজ করে। তবে আমি জাভাস্ক্রিপ্ট উপলব্ধ থাকলে কেবলমাত্র কোনও সাইটে একটি ফর্ম প্রদর্শন করতে চাই, তাদের জানায় যে তারা ফর্মটি না থাকলে কেন ব্যবহার করতে পারবেন না।

আমি কীভাবে এটি করতে পারি তার একমাত্র উপায় হ'ল document.write();স্ক্রিপ্ট ট্যাগে থাকা পদ্ধতিটি এবং এটি বিশাল পরিমাণে এইচটিএমএলের জন্য কিছুটা অগোছালো বলে মনে হয়।

Question 2

পৃষ্ঠাটি লোড হওয়ার পরে আপনার একটি অদৃশ্য ডিভ থাকতে পারে যা জাভাস্ক্রিপ্টের মাধ্যমে প্রদর্শিত হবে।

Question 3

সবচেয়ে সহজ উপায় আমি এটি ভাবতে পারি:

<html>
<head>
    <noscript><style> .jsonly { display: none } </style></noscript>
</head>

<body>
    <p class="jsonly">You are a JavaScript User!</p>
</body>
</html>

কোনও ডকুমেন্ট.উইরাইট, কোনও স্ক্রিপ্ট নেই, খাঁটি সিএসএস।

Question 4

এইচটিএমএল এম্বেড করা এবং এটি পুনরায় জেএস এর সাথে দেখা না দেওয়া পর্যন্ত এটিকে CSS সহ লুকিয়ে রাখার বিষয়ে আমি এখানে সমস্ত উত্তরগুলির সাথে সত্যই একমত নই। এমনকি ডাব্লু / ও জাভাস্ক্রিপ্ট সক্ষম, নোড এখনও ডিওমে বিদ্যমান। সত্য, বেশিরভাগ ব্রাউজারগুলি (এমনকি অ্যাক্সেসযোগ্যতার ব্রাউজারগুলি) এটিকে উপেক্ষা করবে তবে এটি এখনও বিদ্যমান এবং এটি যখন আপনাকে কামড়ানোর জন্য ফিরে আসে তখন অদ্ভুত সময় থাকতে পারে।

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

পরীক্ষা। html

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8">
     $(document).ready(function() {
       $.get('_test.html', function(html) {
         $('p:first').after(html);
       });
     });
    </script>
</head>
<body>
  <p>This is content at the top of the page.</p>
  <p>This is content at the bottom of the page.</p>
</body>
</html>

_টেস্ট। html

<p>This is from an HTML fragment document</p>

ফলাফল

<p>This is content at the top of the page.</p>
<p>This is from an HTML fragment document</p>
<p>This is content at the bottom of the page.</p>

Question 5

সবার আগে সর্বদা আলাদা সামগ্রী, মার্কআপ এবং আচরণ!

এখন, আপনি যদি jQuery লাইব্রেরি ব্যবহার করছেন (আপনার সত্যিই হওয়া উচিত, এটি জাভাস্ক্রিপ্টকে অনেক সহজ করে তোলে), নিম্নলিখিত কোডটি করা উচিত:

$(document).ready(function() {
    $("body").addClass("js");
});

এটি যখন জেএস সক্ষম করে দেবে তখন আপনাকে দেহে একটি অতিরিক্ত বর্গ দেবে। এখন, সিএসএসে, আপনি যখন জেএস শ্রেণিটি উপলব্ধ নেই তখন অঞ্চলটি লুকিয়ে রাখতে পারেন, এবং জেএস উপলব্ধ থাকলে অঞ্চলটি প্রদর্শন করতে পারেন।

বিকল্পভাবে, আপনি no-jsআপনার বডি ট্যাগটিতে ডিফল্ট শ্রেণি হিসাবে যুক্ত করতে পারেন এবং এই কোডটি ব্যবহার করতে পারেন:

$(document).ready(function() {
    $("body").removeClass("no-js");
    $("body").addClass("js");
});

মনে রাখবেন যে CSS অক্ষম থাকলে এটি এখনও প্রদর্শিত হয়।

Question 6

আমার একটি সহজ এবং নমনীয় সমাধান রয়েছে যা উইলের মতো কিছুটা অনুরূপ (তবে বৈধ এইচটিএমএল হওয়ার অতিরিক্ত সুবিধা সহ):

শরীরের উপাদানটিকে "jsOff" শ্রেণি দিন। এটি জাভাস্ক্রিপ্টের সাহায্যে সরান (বা প্রতিস্থাপন)। "JsOnly" শ্রেণীর সাথে "jsOff" শ্রেণীর সাথে প্যারেন্ট উপাদান সহ কোনও উপাদানকে আড়াল করতে সিএসএস করুন।

এর অর্থ হ'ল জাভাস্ক্রিপ্ট সক্ষম করা থাকলে "jsOff" শ্রেণি শরীর থেকে সরানো হবে। এর অর্থ হ'ল "jsOnly" শ্রেণীর উপাদানগুলির "jsOff" শ্রেণীর সাথে কোনও পিতা বা মাতা থাকবে না এবং তাই সিএসএস নির্বাচকের সাথে তাদের লুকিয়ে থাকা সিলেক্টারের সাথে মেলে না, সুতরাং তাদের দেখানো হবে।

জাভাস্ক্রিপ্ট অক্ষম করা থাকলে, "jsOff" শ্রেণি শরীর থেকে সরানো হবে না । "JsOnly" সঙ্গে উপাদানসমূহ হবে "jsOff" সঙ্গে একটি পিতা বা মাতা আছে এবং তাই হবে CSS নির্বাচনকারী যে তাদের চামড়া, এইভাবে তারা আড়াল করা হবে মেলে।

কোডটি এখানে:

<html>
    <head>
        <!-- put this in a separate stylesheet -->
        <style type="text/css">
            .jsOff .jsOnly{
                display:none;
            }
        </style>
    </head>

    <body class="jsOff">
        <script type="text/javascript">
            document.body.className = document.body.className.replace('jsOff','jsOn');
        </script>

        <noscript><p>Please enable JavaScript and then refresh the page.</p></noscript>

        <p class="jsOnly">I am only shown if JS is enabled</p>
    </body>
</html>

এটি বৈধ এইচটিএমএল। এটা সহজ. এটি নমনীয়।

জেএস সক্ষম থাকলে কেবল যে কোনও উপাদানকে আপনি প্রদর্শন করতে চান তার জন্য কেবল "jsOnly" শ্রেণি যুক্ত করুন।

দয়া করে নোট করুন যে জাভাস্ক্রিপ্ট যা "jsOff" শ্রেণিটি সরিয়ে দেয় তা শরীরের ট্যাগের ভিতরে যত তাড়াতাড়ি সম্ভব কার্যকর করা উচিত। এটি আগে কার্যকর করা যায় না, কারণ বডি ট্যাগটি এখনও থাকবে না। এটি পরে মৃত্যুদন্ড কার্যকর করা উচিত নয় কারণ এর অর্থ হ'ল "jsOnly" শ্রেণীর উপাদানগুলি এখনই দৃশ্যমান নাও হতে পারে (কারণ তারা সিএসএস নির্বাচকের সাথে মিলবে যা "jsOff" শ্রেণীর শরীরের উপাদান থেকে অপসারণ না করা পর্যন্ত তাদের লুকায়)।

এটি জেএস-কেবল স্টাইলিং (উদাহরণস্বরূপ .jsOn .someClass{}) এবং নো-জেএস-কেবল স্টাইলিং (উদাঃ .jsOff .someOtherClass{}) এর জন্যও একটি প্রক্রিয়া সরবরাহ করতে পারে । আপনি এটির বিকল্প সরবরাহ করতে এটি ব্যবহার করতে পারেন <noscript>:

.jsOn .noJsOnly{
    display:none;
}

Question 7

আপনি অন্য উত্স ফাইল এবং আউটপুট থেকে সামগ্রী লোড করতে জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন। এটি যদিও আপনি সন্ধান করছেন তার চেয়ে কিছুটা বেশি কালো বক্স-হতে পারে।

Question 8

লুকানো ডিভ উপায়ের জন্য এখানে একটি উদাহরণ:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *[data-when-js-is-on] {
                display: none;
            }
        </style>
        <script>
            document.getElementsByTagName("style")[0].textContent = "";
        </script>
    </head>
    <body>
        <div data-when-js-is-on>
            JS is on.
        </div>
    </body>
</html>

(আপনাকে সম্ভবত এটি দুর্বল IE এর জন্য চিহ্নিত করতে হবে তবে আপনি ধারণাটি পাবেন get)

Question 9

আমার সমাধান

.css:

.js {
display: none;
}

.js:

$(document).ready(function() {
    $(".js").css('display', 'inline');
    $(".no-js").css('display', 'none');
});

.html:

<span class="js">Javascript is enabled</span>
<span class="no-js">Javascript is disabled</span>

Question 10

অ্যালেক্সের নিবন্ধটি এখানে মনে পড়বে, তবে এটি কেবলমাত্র প্রযোজ্য যদি আপনি এএসপি.এনইটি ব্যবহার করেন তবে এটি জাভাস্ক্রিপ্টে অনুকরণ করা যেতে পারে তবে আপনাকে আবার ডকুমেন্ট.ওরাইট () ব্যবহার করতে হবে;

Question 11

আপনি অনুচ্ছেদের দৃশ্যমানতা সেট করতে পারেন | ডিভকে 'গোপনে'।

তারপরে 'অনলোড' ফাংশনে আপনি দৃশ্যমানতাটিকে 'দৃশ্যমান' তে সেট করতে পারেন।

কিছুটা এইরকম:

<বডি অনলোড = "জাভাস্ক্রিপ্ট: ডকুমেন্ট.সেটমেন্ট বিইআইডি (রেক)। স্টাইল.ভিশিলিটি = দৃশ্যমান"> <পি স্টাইল = "দৃশ্যমানতা: দৃশ্যমান" আইডি = "রিক"> জাভাস্ক্রিপ্ট উপলব্ধ না হলে এই পাঠ্যটি লুকানো থাকবে </ </ p>

Question 12

এর জন্য কোনও ট্যাগ নেই। পাঠ্যটি দেখানোর জন্য আপনাকে জাভাস্ক্রিপ্ট ব্যবহার করতে হবে।

কিছু লোক ইতিমধ্যে জেএস ব্যবহার করার পরামর্শ দিয়েছিল সিএসএসকে দৃশ্যমানভাবে সেট করতে। আপনি document.getElementById(id).innerHTML = "My Content"নোডগুলি তৈরি করে বা ডায়নামিকভাবে গতিময়ভাবে পাঠ্য উত্পন্ন করতে পারতেন , তবে সিএসএস হ্যাক সম্ভবত পড়ার পক্ষে সবচেয়ে সোজা।

Question 13

এই দশকের দশকে এই প্রশ্নটি জিজ্ঞাসা করার পরে, এইচটিএমএলটিতে এই HIDDENবৈশিষ্ট্যটি যুক্ত করা হয়েছিল। এটি একজনকে সিএসএস ব্যবহার না করে সরাসরি উপাদানগুলি আড়াল করার অনুমতি দেয়। সিএসএস-ভিত্তিক সমাধানগুলির মতো, উপাদানটি অবশ্যই স্ক্রিপ্ট দ্বারা আন-লুকানো থাকা উচিত:

<form hidden id=f>
Javascript is on, form is visible.<br>
<button>Click Me</button>
</form>
<script>
document.getElementById('f').hidden=false;
</script>
<noscript>
Javascript is off, but form is hidden, even when CSS is disabled.
</noscript>