高级网络编程题——Worksheet 3: JavaScript

kkkk要努力呀

已于 2022-11-25 15:50:44 修改

阅读量315

点赞数 1

文章标签： javascript 前端 html

于 2022-11-25 12:16:11 首次发布

本文链接：https://blog.csdn.net/qq_59100666/article/details/128027751

版权

Exercise 1: Simple functions and empty textboxes

<html>

<head>
    <script language="javascript" type="text/javascript">
        function variable() {
            if (document.forms[0].elements[0].value == null)
                window.alert("it's null: enter something");
            else if (document.forms[0].elements[0].value == "")
                window.alert("empty string try again");
            else
                window.alert("entered something");
        } 
    </script>
</head>

<body>
    <form>
        <input type="text" name="test"><br>
        <input type="button" onclick="variable()" value="what is the default?">
    </form>
</body>

</html>

运行结果如图：

Question1: Before loading the above html page, write down what alert window (message) you think will appear if you enter any character in the text box:

solution:输入“hello”或者其他非空内容（包括空格）会出现提示“entered something”

Question 2: Before loading the above page, write down what alert window you think will appear if you enter NOTHING in the text box:

solution：

什么也不输入，会出现提示“empty string try again”

Question 3： Now load the above page (save it as e.g., test.html – do not forget the .html extension). Do not type anything in the textbox – what message appears?

solution：还是“empty string try again”.(但我感觉他这么问应该是出现"it's null: enter something"）

Question 4: What happens if:

① You omit the following instructions: <script language="javascript" type="text/javascript"> and </script>?

Load/refresh the HTML page and write down what happens here:

solution: <script></script>标签所包含的内容以文本的形式出现在浏览器上

② You change the attribute in the input button tag from οnclick="variable()" to οnclick="variable" (i.e., you omit the brackets).

Load/refresh the HTML page and write down what happens here:

solution：如果更改，则variable（）方法将失去作用，无法对文本框的内容进行判断并给出提示

Exercise 2: different types of buttons

<html>

<head>
    <script language="javascript" type="text/javascript">
        function validate() {
             if (document.forms[0].elements[0].value == null)
                window.alert("it's null: enter something");
            else if (document.forms[0].elements[0].value == "")
                window.alert("empty string try again");
            else
                window.alert("entered something");
        } 
    </script>
</head>

<body bgcolor="yellow">
    <form>
        <input type="text" name="test"><br>
        <input type="button" onclick="validate()" value="enter your postcode">
    </form>
</body>

</html>

运行结果:

Question: Look at the second <input ...> tag. Explain what would happen in the above HTML file (assuming the above tag attributes i.e., onclick and value, stay the same) if the input type is as follows:

a) <input type="button" ...> When the user clicks on the button, the validate() function is called and then …

solution:这里validate（）用了第一个例子的函数，所以调用之后出现的提示和第一个例子一样。

b) <input type="submit" ...> When the user clicks on the button, the validate() function is called and then …

solution：和a）一样

提示：这里应该想问的是“submit”和“button”类型的区别：“submit”是button的一个特例，也是button的一种，它把提交这个动作自动集成了。

submit和button,二者都以按钮的形式展现,看起来都是按钮，所不同的是type属性和处发响应的事件上，submit会提交表单，button不会提交表单.

两者主要区别在于：

submit默认为form提交，可以提交表单（form）

button则响应用户自定义的事件,如果不指定onclick等事件处理函数，它是不做任何事情.当然，button也可以完成表单提交的工作.

INPUT type=submit 即发送表单,按回车提交表单

INPUT type=button 就是单纯的按钮功能,提交的是内部的TEXT

===============submit 和 button的详细对比===================================

submit:特殊的button，会自动将表单的数据提交，onClick方法不加return 会自动提交，并不会起到约束的作用，

所以，使用submit时需要验证请加 return true或false.

例：<input type="submit" name="Submit" value="注册" onClick=" return check();">，在JS中判断的时候写return true; 或者 return false;

button:普通的按钮，不会自动提交表单数据.可以在JS中显式提交:document.form1.submit()，使用场合：一个页面有多个提交按钮，需要根据用户的操作来确定到底提交到哪个控制器，这种情况下，就需要在JS中判断用户的操作，然后根据操作来给document.form1.action赋值并且document.form1.submit()来提交

举这个例子中的两种情况：

①类型为“button”且添加了onclick事件，我在输入“hello”时，弹出对应的提示内容（即监听的事件），当我点击“确定”之后，文本框中的“hello”还存在

②类型为“submit”且添加了onclick事件，我在输入“hello”时，弹出对应的提示内容，当我点击“确定”之后，文本框中的“hello”不存在了。而如果不添加onclick事件，也是会把“hello”提交，但是不会做出对应的处理，因为没有添加对应的处理情况。

Exercise 3: submit or button – which one to use

A user has to enter some information on a web page. After successful validation, the information is sent to a servlet or CGI script. The button on the webpage should be:

 <input type="button"

√ <input type="submit"

选择原因查看上述submit和button的区别

Exercise 4: Correct use of the submit button

<html>

<head>
    <script language="javascript" type="text/javascript">
        function validate() {
            if (document.forms[0].elements[0].value = "") {
                window.alert("enter something");
                _______________________
            }
            _________________________
        } 
    </script>
</head>

<body bgcolor="yellow">
    <form action=MyServlet.do _________________>
        <input type="text" name="test"><br>
        <input type="submit" value="enter your postcode”> 
 </form> 
 </body> 
</html>

填充空白后的代码：

<html>

<head>
    <script language="javascript" type="text/javascript">
        function validate() {
             if (document.forms[0].elements[0].value == "") {
                window.alert("enter something");
                return false;
            }
            return true;
        } 
    </script>
</head>

<body bgcolor="yellow">
    <form  action=MyServlet.do onSubmit="return validate()">
        <input type=text name="test"><br>
        <input type=submit value="enter your postcode"> 
 </form> 
 </body> 
</html>

Question： Look at the input tag. Explain why there is NO onclick attribute i.e., οnclick="validate()".

solution：因为onSubmit="return validate()实现了调用validate()的方法。