Rumah hujung hadapan web tutorial js JavaScript初级教程(第五课续)_基础知识

JavaScript初级教程(第五课续)_基础知识

May 16, 2016 pm 07:15 PM

    在JavaScript中单选框的用法和复选框相似。不同之处在于HTML中的应用。复选框是一种开关。如果一个复选框被选中,你可以再点击后取消选取. 但如果单选框被选中,则只能通过选取另外一个单选框才能取消对该单选框的选取。例:

    在该例中,如果你打算取消对一个单选框的选取,你必须点击另一个单选框。再看下面的程序:

   


        Light off
        Light on
   

    当第一个单选框被选中时,函数offButton() 被调用。函数如下: 

    function offButton()
    {
        var the_box = window.document.form_1.radio_1;

        if (the_box.checked == true)
        {
            window.document.form_1.radio_2.checked = false;
            document.bgColor='black';
            alert("Hey! Turn that back on!");
        }
    }

    这个例子很象前面的复选框例子,主要的区别在于该行: 

    window.document.form_1.radio_2.checked = false;

    该行指令指示JavaScript在该按钮被点击时关闭另外一个按钮。由于另外一个按钮的函数同这个很相似:

    function onButton()
    {
        var the_box = window.document.form_1.radio_2;

        if (the_box.checked == true)
        {
            window.document.form_1.radio_1.checked = false;
            document.bgColor='white';
            alert("Thanks!");
        }
    }



    选单是我们所学的表单选项中最奇特的一种。有两种基本的格式:下列选单和列表选单。以下为例子:

    奇特之处在于这个选单有名称,但其中的各个选项没有名称。例如,在HTML中,第1个选单如下:

 

    注意这个选单的名称是pulldown_1,但各个选项没有名称。所以要调用其中的各个选项则有点困难。

    幸好数组可以帮助我们调用其中的选项。如果你想改变该下列选单中的第2个选项,你可以这样做:

    window.document.form_1.pulldown_1.options[1].text = 'new_text';

    这是因为选单的元素有一个选项属性,而该属性是选单所有选项的集合而成的数组。点击change the selectt然后从下拉选单从下列选单中查看其选项是否已经被改变。现在第2个选项应该是*thau*。

    除了选项属性,选单还有一项属性叫做selectedIndex。一个选项被选择后,selectedIndex属性将变成被选项的数组索引号(序列号)。选择第2个列表选单中的一个选项,然后检查索引号。记住数组中的第1个选项的索引号是0。

    check the index.

    表单的名称是form_1,列表选单的名称是list_1。selectedIndex属性值为window.document.form_1.list_1.selectedIndex。你还可
以将selectedIndex设置如下:

    window.document.form_1.list_1.selectedIndex = 1;

    并高亮度显示第2个选项。

    一旦你得到被选项的索引号,你就可以发现其内容:

    var the_select = window.document.form_1.list_1;

    var the_index = the_select.selectedIndex;

    var the_selected = the_select.options[the_index].text;

    selectedIndex属性很有用,但如果有多个选项同时被选中,会如何呢?

    选单元素的处理器为onChange()。当选单发生变化时,则该处理器被激活。



    尝试这个例子并阅读下面的注释:

    My favorite animal is ...

    注释一个比较复杂的JavaScript程序。首先,我们看看表单本身:

   


       

       
   

    该表单有两个元素:一个下拉选单和一个列表选单。下列选单的处理器调用函数swapOptions()。该函数在首部已经
作了定义,其参数为- 被选的动物种类。

    首部中我首先定义的几个数组:

    var dogs = new Array("poodle","puli","greyhound");

    var fish = new Array("trout", "mackerel", "bass");

    var birds = new Array("robin", "hummingbird", "crow");

    注意这些数组的命名和下拉选单中的命名一致。很快你就会明白为什么。现在我们看看当下拉选单被改变时被调用的函数:

    function swapOptions(the_array_name)
    {
        var numbers_select = window.document.the_form.the_examples;
        var the_array = eval(the_array_name);
        setOptionText(window.document.the_form.the_examples, the_array);
    }

    该函数的定义包括一个参数:the_array_name。如果打开下拉选单并选择"Fish" ,则the_array_name就等同于字符串"Fish"。

    函数主体中第1行包括一个变量用于引用第2个表单元素:列表选单。

    第2行引入一个新概念:eval()。eval()比较奇特,我们留在以后的课程中讲解。第2行命令的这些结果是变量the_array将等同于前面所定义的数组之一。如果the_array_name是"Fish",the_array则等同于Fish数组。如果你想了解这是怎么作的,请学习eval。

    第3行定义另一个函数setOptionText()。setOptionText()用于将the_array赋值给列表选单。以下为该函数内容:

    function setOptionText(the_select, the_array)
    {
        for (loop=0; loop < the_select.options.length; loop++)
        {
            the_select.options[loop].text = the_array[loop];
        }
    }

    该函数有两个参数:对选单元素的引用和一个数组。第1行设立一个for循环,由于循环所有的选单元素。注意选单元素的选项属性是该选单所有选项组成的数组。因为它是一个数组,你可以用长度(length)属性发现数组的元素数目。第1次循环时,循环变量值是0。循环的主体值为:

the_select.options[0].text = the_array[0];

    如果你在下拉选单中选择了"Fish",则the_array[0]就是"trout",所以该行命令将列表选单中的第1个选项改成"trout" 。下一次循环时,循环等于1,并且列表选单中第2个选项则是 "mackerel" 。

    如果你理解了该例子,你对JavaScript的了解就比较深了。 

    初级教程到此结束,随后要发布进阶教程,敬请关注。



Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Apa yang perlu saya lakukan jika saya menghadapi percetakan kod yang dihiasi untuk resit kertas terma depan? Apa yang perlu saya lakukan jika saya menghadapi percetakan kod yang dihiasi untuk resit kertas terma depan? Apr 04, 2025 pm 02:42 PM

Soalan dan penyelesaian yang sering ditanya untuk percetakan tiket kertas terma depan dalam pembangunan front-end, percetakan tiket adalah keperluan umum. Walau bagaimanapun, banyak pemaju sedang melaksanakan ...

Siapa yang dibayar lebih banyak Python atau JavaScript? Siapa yang dibayar lebih banyak Python atau JavaScript? Apr 04, 2025 am 12:09 AM

Tidak ada gaji mutlak untuk pemaju Python dan JavaScript, bergantung kepada kemahiran dan keperluan industri. 1. Python boleh dibayar lebih banyak dalam sains data dan pembelajaran mesin. 2. JavaScript mempunyai permintaan yang besar dalam perkembangan depan dan stack penuh, dan gajinya juga cukup besar. 3. Faktor mempengaruhi termasuk pengalaman, lokasi geografi, saiz syarikat dan kemahiran khusus.

Demystifying JavaScript: Apa yang berlaku dan mengapa penting Demystifying JavaScript: Apa yang berlaku dan mengapa penting Apr 09, 2025 am 12:07 AM

JavaScript adalah asas kepada pembangunan web moden, dan fungsi utamanya termasuk pengaturcaraan yang didorong oleh peristiwa, penjanaan kandungan dinamik dan pengaturcaraan tak segerak. 1) Pengaturcaraan yang didorong oleh peristiwa membolehkan laman web berubah secara dinamik mengikut operasi pengguna. 2) Penjanaan kandungan dinamik membolehkan kandungan halaman diselaraskan mengikut syarat. 3) Pengaturcaraan Asynchronous memastikan bahawa antara muka pengguna tidak disekat. JavaScript digunakan secara meluas dalam interaksi web, aplikasi satu halaman dan pembangunan sisi pelayan, sangat meningkatkan fleksibiliti pengalaman pengguna dan pembangunan silang platform.

Bagaimana untuk menggabungkan elemen array dengan ID yang sama ke dalam satu objek menggunakan JavaScript? Bagaimana untuk menggabungkan elemen array dengan ID yang sama ke dalam satu objek menggunakan JavaScript? Apr 04, 2025 pm 05:09 PM

Bagaimana cara menggabungkan elemen array dengan ID yang sama ke dalam satu objek dalam JavaScript? Semasa memproses data, kita sering menghadapi keperluan untuk mempunyai id yang sama ...

Bagaimana untuk mencapai kesan menatal paralaks dan kesan animasi elemen, seperti laman web rasmi Shiseido?
atau:
Bagaimanakah kita dapat mencapai kesan animasi yang disertai dengan menatal halaman seperti laman web rasmi Shiseido? Bagaimana untuk mencapai kesan menatal paralaks dan kesan animasi elemen, seperti laman web rasmi Shiseido? atau: Bagaimanakah kita dapat mencapai kesan animasi yang disertai dengan menatal halaman seperti laman web rasmi Shiseido? Apr 04, 2025 pm 05:36 PM

Perbincangan mengenai realisasi kesan animasi tatal dan elemen Parallax dalam artikel ini akan meneroka bagaimana untuk mencapai yang serupa dengan laman web rasmi Shiseido (https://www.shiseido.co.jp/sb/wonderland/) ... ...

Perbezaan dalam Konsol.Log Output Result: Mengapa kedua -dua panggilan berbeza? Perbezaan dalam Konsol.Log Output Result: Mengapa kedua -dua panggilan berbeza? Apr 04, 2025 pm 05:12 PM

Perbincangan mendalam mengenai punca-punca utama perbezaan dalam output konsol.log. Artikel ini akan menganalisis perbezaan hasil output fungsi Console.log dalam sekeping kod dan menerangkan sebab -sebab di belakangnya. � ...

Adakah JavaScript sukar belajar? Adakah JavaScript sukar belajar? Apr 03, 2025 am 12:20 AM

Pembelajaran JavaScript tidak sukar, tetapi ia mencabar. 1) Memahami konsep asas seperti pembolehubah, jenis data, fungsi, dan sebagainya. 2) Pengaturcaraan asynchronous tuan dan melaksanakannya melalui gelung acara. 3) Gunakan operasi DOM dan berjanji untuk mengendalikan permintaan tak segerak. 4) Elakkan kesilapan biasa dan gunakan teknik debugging. 5) Mengoptimumkan prestasi dan mengikuti amalan terbaik.

Bolehkah PowerPoint menjalankan JavaScript? Bolehkah PowerPoint menjalankan JavaScript? Apr 01, 2025 pm 05:17 PM

JavaScript boleh dijalankan di PowerPoint, dan boleh dilaksanakan dengan memanggil fail JavaScript luaran atau membenamkan fail HTML melalui VBA. 1. Untuk menggunakan VBA untuk memanggil fail JavaScript, anda perlu mendayakan makro dan mempunyai pengetahuan pengaturcaraan VBA. 2. Benamkan fail HTML yang mengandungi JavaScript, yang mudah dan mudah digunakan tetapi tertakluk kepada sekatan keselamatan. Kelebihan termasuk fungsi lanjutan dan fleksibiliti, sementara kelemahan melibatkan keselamatan, keserasian dan kerumitan. Dalam praktiknya, perhatian harus dibayar kepada keselamatan, keserasian, prestasi dan pengalaman pengguna.

See all articles