JS + PHP enables users to enter numbers and display the maximum value and location, where js is located

Source: Internet
Author: User
Tags html header

JS + PHP enables users to enter numbers and display the maximum value and location, where js is located

This article mainly introduces how to display the maximum value and position of a JS + PHP user after entering a number. The purpose is to distinguish the differences between JS and PHP and broaden your thinking, let's take a look at the detailed introduction:

Analysis

1. Use the prompt of JS to input the value you want.

2. Use the text tag of the HTML form to pass the input value to the PHP processing file.

3. PHP determines the value and selects the maximum value and position.

From simple to deep:

1. Get the maximum value of the array in JS.

Var a = [10, 20, 40, 30]; // var max = 0; var max = a [0]; for (var I = 0; I <. length; I ++) {if (max <a [I]) {max = a [I] ;}} alert ("max number" + max );

It is worth noting that you cannot directly set a variable max = 0, because you are not sure whether the number entered in the future is smaller than 0 or greater than 0 [the case column is greater than 0]. therefore, you should select a number in the array, so the first one is better.max=a[0].

Because the JS language is based on object-oriented processes, all the things in JS can be objects, so its array has an attribute. length is an attribute of the JS array to obtain the length of the array, with this attribute, You can traverse the array and compare them one by one.

2. In JS implementation, obtain the maximum and minimum values of the array and their location (that is, the first few values in the array)

[Note: In this case, the position + 1 is for ease of viewing, And the JS array starts to be 0]

Var a = [10, 20, 40, 30]; var max = a [0]; // you cannot specify a maximum value [var max = 0] (unless it is determined ), the value in the array should be used. a [0] indicates that the first value of the array is used as the maximum value for comparison. var maxaddress = 0; var min = a [0]; var minaddress = 0; for (var I = 0; I <. length; I ++) {if (max <a [I]) {max = a [I]; maxaddress = I} if (min> a [I]) {min = a [I]; minaddress = I} alert ("the maximum number is" + max + "The position is" + (maxaddress + 1) + "); alert ("min number" + min + "location is" + (minaddress + 1) + ");

3. Now we use prompt to obtain the maximum value from user input.

Difficulties:

1. How to input, use prompt

2. How to convert a string into an array and convert the format?

Prerequisites:

1. Splitting strings uses the spilt method of the string object of JS (Note: JS is an object, so it is called a method, not a function)

2. How to convert a "abc" string to the number type.

String to numeric type ◆ Number★String Of the numeric type, the number obtained after conversion. Var n1 = "123"; var n2 = Number (n1); // 123★★It is a non-numeric string and NaN is obtained after conversion. Var n1 = "123abc"; var n2 = Number (n1); // Nan★A decimal string. After conversion, the original number is obtained. Var n1 = "123.23"; var n2 = Number (n1); // 123.23 ◆ parseInt★A string of the integer number type. The converted integer number. Var n1 = "123"; var n2 = parseInt (n1); // 123★A string starting with a number. After conversion, the number is obtained. Var n1 = "123abc"; var n2 = parseInt (n1); // 123★A string not starting with a number. NaN is obtained after conversion .. Var n1 = "abc123"; var n2 = parseInt (n1); // NaN★★Decimal type string, rounded up after conversion (decimal point is omitted directly ). Var n1 = "123.53"; var n2 = parseInt (n1); // 123 var n1 = "-5.93"; var n2 = parseInt (n1); //-5 ◆ parseFloat★A string of the integer number type. The converted integer number. Var n1 = "123"; var n2 = parseFloat (n1); // 123★A string starting with a number. After conversion, the number is obtained. Var n1 = "123abc"; var n2 = parseFloat (n1); // 123★A string not starting with a number. NaN is obtained after conversion. Var n1 = "abc123"; var n2 = parseFloat (n1); // NaN★★A decimal string. After conversion, the original number is obtained. Var n1 = "123.23"; var n2 = parseFloat (n1); // 123.23 convert to boolean type★The value is true after the number and string are converted.★The value of undefined, null, and 0 is false. var n1 = 123; var n2 = Boolean (n1); // truevar n1 = "123"; var n2 = Boolean (n1); // truevar n1 = "0 "; var n2 = Boolean (n1); alert (n2); // truevar n1; var n2 = Boolean (n1); // falsevar n1 = null; var n2 = Boolean (n1); // falsevar n1 = 0; var n2 = Boolean (n1); // false

After the above analysis is complete, start to write the code

<Script> // var a = new Array (-34.33, 34.34, 12.23, 32, "aa ); /* var a = new Array (prompt ("enter a number"); document. write (a); */var B = prompt ("Enter the number to be compared, separated by \", \ "); var a = new Array (); a = B. split (","); // for (var j = 0; j <. length; j ++) {// document. write (a [j]); //} alert (typeof (a) + "JS array is essentially an object !! "); // Essentially, the object PHP array is an array, and there is no attribute (such as length) document. write (a + "<br>"); console. log (a + "<br>"); var max = parseFloat (a [0]); // document. write (max); var maxaddress = 0; var min = parseFloat (a [0]); var minaddress = 0; for (var I = 0; I <=. length; I ++) {var shu = parseFloat (a [I]); if (shu> max) {max = shu; maxaddress = I;} if (shu <min) {min = a [I]; minaddress = I ;}} document. write ("the maximum number is" + max + "and the location is" + (maxaddress + 1) + "+" <br> "); document. write ("min number" + min + "the location is the" + (minaddress + 1) + "count"); </script>

4. The above is JavaScript processing. My goal is to link JS + PHP + HTML.

PHP cannot directly interact with the front-end, that is, it cannot directly obtain the value entered by the user. Instead, it must use the html form.

You can use AJAX to transmit JS data to PHP, But I will talk about it later. Let's take a look at the methods.

1. Create an HTML form:

<! DOCTYPE html> 

2. Pass the value of JS to HTML:

<Script type = "text/javascript"> var a = prompt ("enter a number"); document. getElementById ("shu"). value = a; </script>

There is a pitfall here. If JavaScript code is written at the HTML header, an error will be reported, sayingUncaught TypeError: Cannot set property 'value' of null

Because of the browser resolution sequence, when the browser parses JS (when the number is entered), the browser begins to parse HTML, although JS assigns the value of text, however, it is self-contradictory that the value of text is NULL after HTML parsing.

So try to write the JS Code behind it. You should parse the HTML first, and then I will give it back to you. (For details, not necessarily the JS Code is in the header)

5. Now, the HTML value is passed.

<? Phpheader ("Content-type: text/html; charset = UTF-8"); $ a =$ _ POST ['shuzi']; // var_dump ($ ); $ B = explode (',', $ a); for ($ I = 0; $ I <count ($ B); $ I ++) {echo $ B [$ I];} var_dump ($ B); $ max = $ B [0]; $ maxaddress = 0; for ($ j = 0; $ j <count ($ B); $ j ++) {if ($ B [$ j]> $ max) {$ max = $ B [$ j]; $ maxaddress = $ j ;}} echo "the maximum value is ". $ max. "<br>"; echo "the location is ". ($ maxaddress + 1 ). "";?>

Here we mainly look at explode (split the string into an array) count (get the number of arrays)

Pay attention to the type conversion problem. Add it later or write it yourself.

Finally:

Summary

The above is all the content of this article. I hope the content of this article will help you in your study or work. If you have any questions, please leave a message, thank you for your support.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.