JavaScript Beginner Tutorial (Lesson 5)_Basic Knowledge

Now you know the basics of computer programming. Let's continue to study the Document Object Model (Document Object Model-DOM). The click relationship of the DOM starts with the window object being a Document object in each window object. We'll focus on the Document object and see how you can use it to obtain information from your users and dynamically display new information.

We have already seen an attribute of the file object - the Images array. In Lesson 3, the first image in the file can be modified by changing its src attribute.

Example:

window.document.images[0].src='some_new_picture.gif';

This command will change the first image in the document into a new image named some_new_picture.gif. In the DOM, each image in the image array is also an object. So the images[0].src instruction works like an object. It means: call the object image[0] in Image from the Image array and set its src attribute. To translate it: call the document attribute from the window, call the first image from the image array of the document, and set its src attribute to the image some_new_picture.gif.

The Image object has many other interesting properties. For example, you can let JavaScript check whether an image has been fully loaded before doing other things. However, we can only talk about these properties in future lessons. Today, we’re going to talk about feedback forms and how to use them in JavaScript.

The feedback form is part of the HTML 1.0 specification. Many people don't know much about it. Many people only think that it is only possible due to client-side CGI programming. In fact, even if you are not a CGI programmer, feedback forms provide you with a lot of functionality. JavaScript can be used to add various functionality to feedback forms. And it does not require the assistance of client CGI.

If you don’t understand how feedback forms work, please take the relevant courses in Introduction to HTML. Then start studying this lesson.

First of all, in javascript, the feedback form is also stored in an object array. You can call the first image in the image array through window.document.images[0], and you can also call the first form in the feedback form array using window.document.forms[0]. You can name the image and similarly name the feedback form. For example, if the feedback form

is programmed as follows:

You can reference the form in one of the following two ways:

var the_form = window.document.forms[0];
var the_same_form = window.document.first_form;

More often, you need to reference elements within the form, For example, the text field in the example above.

Slide your mouse over the link to see what happens.

Yes, and I know it. No!

This wonderful transformation can be achieved by changing the value of the text field.

 

 

Change the link of the text field to:

Yes , and I know it.

  No!< ;/a>

It means that the form calls the first form and sets its value to 'Clap clap!' The second line has a similar effect. This is very similar to changing the src of an image. It's just that the text field changes the value.

A similar method can be used to change the value of textareas:

Part 1 Part 2

Form code:

<br> Mouse over below to see the first verse of<br> The Webmonkey song, adapted from<br> "I Wanna Be Like You" (The Monkey Song)<br> from Walt Disney's The Jungle Book<br> written by Richard M. Sherman and Robert B. Sherman<br>                                                                                                  <br></p> The setting method of the link and text area is basically the same: <p></p> <a href="#" onMouseOver="window.document.third_form.the_textarea.value=first_part;"> Part 1</a><p> <a href="#" onMouseOver="window.document.third_form.the_textarea.value=second_part;">Part 2</a></p> <p> The only difference The trick is to assign a variable to textareas instead of assigning a string to it. This variable has been defined in the HTML header. <br></p> The following is the string assignment of the variable: <p></p> var first_part = "Now I'm the king of the swingersnOh, the jungle VIPnI've reached the top and had to stopnAnd that's what botherin' me";<p></p> Note that "n" is a newline character. The "n" line break is very convenient if you are writing within a <pre class="brush:php;toolbar:false"> and or within a textarea. <p></p> In addition to changing the values ​​of form elements, JavaScript also allows you to detect events that occur within the form. This will be introduced in the next lecture. <p></p> <p></p> <p><br></p> <center></center> <p> Text fields can link onBlur, onFocus and onChange events. The onFocus event occurs when someone clicks inside the text field. If you click outside the text field or press the tab key, the onblur event occurs. The onChange event occurs if someone changes the content within the text field and then moves to an area outside the text field. <br></p> Try doing these things to see what happens to the text field below. <p></p> <p></p> The following is the preparation method: encoding of text field: <div></div> <input type="text" name="first_text" onFocus="writeIt('focus') ;" onBlur="writeIt('blur');" onChange="writeIt('change');"><p></p> Each event handler calls the function writeIt(), which has been defined. The encoding is as follows: <p></p> <script language="JavaScript"><p> <!-- hide me<br/> function writeIt(the_word)<br/> {<br/> var word_with_return = the_word "n ", Typical JavaScript predefined. Line 1 in the body <br/><br/> var word_with_return = the_word "n";<br/><br/> Initialize a variable word_with_return to the string processed by the function and add the newline character "n". Note that "n" is a standard computer instruction. <br/><br/> Next line <br/></p> window.document.first_form.the_textarea.value = word_with_return;<p></p> Set the value of the text area to its original value plus a new variable. Its function is equivalent to <p></p> window.document.first_form.the_textarea.value = window.document.first_form.the_textarea.value word_with_return;<p></p> So far we have learned about text fields and text areas (values) Properties, next we learn the methods used in text field and text area processing: blur(), focus() and select(). <p></p> The link below shows how focus() and select() work. Note that they may terminate functionality after working once. <p></p><p> The following is the encoding of forms and links: </p><p> <form name="method_form"><br> , hey, we're the monkeys"><br> </form></p> <p> <a href="#" onMouseOver="window.document.method_form.method_text.focus();"> ;Mouseover to focus</a><br> <a href="#" onMouseOver="window.document.method_form.method_text.select();">Mouseover to select</a></p> <p> Its usage is the same as calling any object method: object_name.method(). The name of the text field is window.document.form_name.text_field_name, so the focus() method of the text field can be called with the following statement. </p> <p> window.document.method_form.method_text.focus();</p> <p><br></p> <center></center> <p><br></p> <p> The form is also Objects; they have their own methods, properties, and event handlers. One of them is onSubmit. </p> <p> The onSubmit call has the following two situations: if the user clicks the Submit button, or the user presses the Enter key in the text field, onSubmit will be triggered. </p> <p> In Netscape, clicking a Submit button without result event handling usually causes the original page to be refreshed. To avoid this, you can do this: </p> <p> <form onSubmit="return false;"><br> </form><br></p> Javascript uses return false to prevent the browser from refreshing the page. Another example is to prevent an href from redirecting to the assigned URL. For example: link <p></p> <a href="http://www.sohu.com" onClick="return false;">sohu!</a><p></p> will not redirect Any URL, because you set onClick to return false. <p></p> The following is a form that gets information from the user. Enter something in the text field and press Enter: <p></p> Who does the monkey love: <p></p> <div> <p> The following is the encoding of the form: </p> <p> <form name="text_entry_form" onSubmit="monkeyLove(); return false;"><br> <input type="text" name=" monkey_love" size="40"><br> </form></p> <p> When you click Enter in the text field, the onSubmit processor is called to execute the function monkeyLove(), which will change the text value in the domain. <br><br> If there is no return false statement in the onsubmit processor, executing the function monkeyLove() will change the text field content, but since the web page content will be refreshed at the same time, the text field content will be returned to the original content. In order to prevent this phenomenon, return false must be added to onSubmit. </p> <p> The following is the content of the monkeyLove() function: </p> <p> function monkeyLove()<br> {<br> var who_it_is = window.document.text_entry_form.monkey_love.value;</p> <p> who_it_is = 'The monkey loves ' who_it_is;<br> window.document.text_entry_form.monkey_love.value = who_it_is;<br> }</p> <p> <br></p> <center></center> <p><br></p> <p> Text field and text area are two elements of the form. Others include check boxes, radio buttons and drop-down menus. First we learn about checkboxes. </p> <p> The main attribute of the checkbox is: checked. </p> <p> If you have a form called the_form with a checkbox named the_checkbox, you can see what happens if you click the checkbox: </p> <p> var is_checked = window .document.the_form.the_checkbox.checked;</p> <p> if (is_checked == true)<br> {<br> alert("Yup, it's checked!");<br> } else {<br> alert ("Nope, it's not checked.");<br> }</p> <p> If the checkbox is checked, the checkbox attribute is true. True is a built-in data type in JavaScript, so you don't have to add quotes around true. If the checkbox is unchecked, its property is false, which is also a built-in data type. <br><br> You can also set the properties of the checkbox. The following is an example of setting the checkbox properties: </p> <p> Click to check Checkbox 1<br> Click to uncheck Checkbox 1<br> Click to see the value of Checkbox 1</p> <p> The following is the code ：</p> <p>  <form name="form_1"><br>  <input type="checkbox" name="check_1">Checkbox 1<br>  </form><br> < a href="#" onClick="window.document.form_1.check_1.checked=true;return false;">Click to check Checkbox 1</a><br> <a href="#" onClick=" window.document.form_1.check_1.checked=false;return false;">Click to uncheck Checkbox1</a><br>  <a href="#" onClick="alert(window.document.form_1.check_1. checked);return false;">Click to see the value of Checkbox 1</a></p> <p> Note that I always add return false to the link to prevent the browser from refreshing the page and returning to the original content . The event handler for the checkbox is onClick. The onClick event handler comes into play when someone clicks on the checkbox. The following are examples of its use. </p> <div></div> <p> In this example, the form applies the onClick checkbox handler: </p> <p> <form name="form_2"><br> ="switchLight();">The Light Switch<br> </form></p> <p> When someone clicks the checkbox, the onClick processor is activated and executes the function switchLight(). The following is the function The encoding of switchLight() (it is placed in the header of the web page): </p> <p> function switchLight()<br> {<br> var the_box = window.document.form_2.check_1;<br> var the_switch = "" ;</p> <p> if (the_box.checked == false) {<br> alert("Hey! Turn that back on!"); <br> document.bgColor='black';<br> } else { <br> Alert ("THANKS!"); <br> Document.bgcolor = 'White'; <br>} <br>} </p> <p> The first line: </p> <p> var the_box = window .document.form_2.check_1;</p> <p> Assign the checkbox object to a variable. This reduces programming length and allows objects to be passed as parameters to functions. </p> <p> In the next lecture we will explain the relevant knowledge of radio buttons. </p> <p><br></p> <center></center> <p><br></p> </div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement：</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="How to use the eval function in Javascript and examples_Basic knowledge" href="https://m.php.cn/faq/26156.html">How to use the eval function in Javascript and examples_Basic knowledge</a></span><span>Next article：<a class="dBlack" title="How to use the eval function in Javascript and examples_Basic knowledge" href="https://m.php.cn/faq/26158.html">How to use the eval function in Javascript and examples_Basic knowledge</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="https://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/faq/1609.html" title="An in-depth analysis of the Bootstrap list group component" class="aBlack">An in-depth analysis of the Bootstrap list group component</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/1640.html" title="Detailed explanation of JavaScript function currying" class="aBlack">Detailed explanation of JavaScript function currying</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/1949.html" title="Complete example of JS password generation and strength detection (with demo source code download)" class="aBlack">Complete example of JS password generation and strength detection (with demo source code download)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/2248.html" title="Angularjs integrates WeChat UI (weui)" class="aBlack">Angularjs integrates WeChat UI (weui)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/2351.html" title="How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills" class="aBlack">How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Public welfare online PHP training，Help PHP learners grow quickly！</p></div><div class="footermid"><a href="https://m.php.cn/about/us.html">About us</a><a href="https://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="https://m.php.cn/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>