Input in Javascript

Can somebody point me to an answer which is written in JavaScript. I am not new to JS (and I have used Rhino too) but I don’t know how this platform provides input and where to output results. In short, how this platform works with JavaScript.

Thanks in advance.

Hi Codechef uses ‘Rhino’ javascript engine for judging all JS solutions.
You can find the list of all compilers here.

Here is the link to my Sample Solution to a Sample Problem

1 Like

Hi,

Working with any dynamic language requires the ability to read, process and output user data. JavaScript is especially useful when you want to take user information and process it without sending the data back to the server. JavaScript is much faster than sending everything to the server to process, but you must be able to read user input and use the right syntax to work with that input. This article will focus on retrieving user input and displaying it on the screen through HTML elements or prompts.

Displaying Prompts and Retrieving User Responses

JavaScript has a few window object methods that you can use to interact with your users. The prompt() method lets you open a client-side window and take input from a user. For instance, maybe you want the user to enter a first and last name. Normally, you can use an HTML form for user input, but you might need to get the information before sending the form back to your server for processing. You can use the window.prompt() method for small amounts of information. It’s not meant for large blocks of text, but it’s useful when you need information before the user continues to another page.

The following code is an example of the window.prompt method.

var customerName = prompt(“Please enter your name”, “”);

if (customerName!= null) {

document.getElementById("welcome").innerHTML =

"Hello " + customerName + "! How are you today?";

}

The first line of code uses the prompt method. Notice that we don’t need the “window” object since JavaScript inherits the main DOM methods and understands that this is an internal method. The first parameter in the prompt is what you want to show the user. In this example, we want the user to enter a name, so the prompt displays “Please enter your name.” The second parameter is the default text. This default text helps the user understand where to type the name, but if he clicks “OK” without entering a name, the “” text will be used for the username. You can create checks in your JavaScript code that detects when the user doesn’t enter a name and just clicks OK, but this code assumes any text entered is the user’s name.

Notice the “if” statement that checks if the “customerName” variable is null. This logic checks to make sure that the user entered something. It only checks that some character was entered, so the user can type anything to bypass the “if” statement. The code within the “if” statement then displays the message to the user in the “welcome” div. We’ve covered reading and writing text to a web page, and this is another example of writing text to the inner HTML section of a div. Remember that the innerHTML property writes any tags or text within the opening and closing div tag.

Use this method to get a short string response from your users before they access a page or before they move on to another page in your site structure.

The JavaScript Confirmation Message Box

The window.prompt method is one way to read user input, but JavaScript also provides a way to get confirmation from the user. For instance, you might want to confirm that the user has entered the right information and wants to continue with payment. The confirmation window displays the amount the user will be charged, and the user has the option to confirm or cancel. You could write a complex JavaScript function to create a new window for confirmation or you can use the internal window.confirm method. This method returns either a boolean true result if the user clicks “OK” or the boolean false result if the user clicks “Cancel.” This prompt is a quick way to get confirmation without using any complex coding logic.

Look at the following JavaScript code.

var r = confirm(“Are you sure you want to send a payment?”);

if (r == true) {

x = "Payment sent!";

} else {

x = "Payment cancelled!";

}

alert (x);

The main utility in the above code is the “confirm” function. This is an internal JavaScript function from the window object. In other words, using “window.confirm()” and “confirm” results in the same function. JavaScript handles the inheritance for you, so you don’t need to remember to use the window object. The confirmation window is also pre-built and shown to the user. In this example, a prompt displays with the text “Are you sure you want to send a payment?” The only options for the user are to click the Cancel button or the OK button. OK is the confirmation that returns “true.” If the user clicks “OK,” the variable x contains the text “Payment sent!” Conversely, if the user clicks the “Cancel” button, x contains the text “Payment cancelled!” The text is then displayed to the user using the “alert” function. This is the first time we’ve seen the alert function, which is also a part of the window object. Typing “alert” and “window.alert” results in the same method call. The alert prompt is common during debugging and development of a web application, because it’s a quick way to check your logic and see the control flow of your code. The alert function in this example checks that the confirm window is responding with the right result and the x variable contains the right text.

Displaying Text from User Input

There are three main HTML tags used to display text after you prompt users. You’ve seen two internal JavaScript functions that get user input, but how do you display it back to the user? The three tags used are the div, span and text tags. The third one, the text tag, is a form field used to take string input from the user. You usually use this tag to get input such as a name or an address, but you can also display input from the user.

The span and div tags are a way to just display the information you’ve read in JavaScript prompt windows. You can also display data you’ve retrieved from a database.

Let’s use the previous example where we prompted the user to enter a name. We then use the input to display output in a div element. We’ve seen this before, but this is the first time we’ve used input directly from the user.

My First JavaScript code.

We’ve included the HTML this time to show you how JavaScript prompts work with HTML elements. The element we’re using is the div HTML tag with the id of “welcome.” The JavaScript prompt asks the user for his name and then displays the result in the “welcome” div. You can also use this same code to display the result in the span element using the same code except change the div tag to a span opening and closing tag.

You’ve seen the innerHTML property several times, which controls the text within the opening and closing div or span tags, but what if you want to use the input to pre-populate a form field? The input text field lets users input string values, but you can use the methods we’ve seen to pre-populate string values automatically. Using the same input example as we previously used, the following code uses the input prompt to enter the user’s name in the “username” text field.

Interested in learning more? Why not take an online class in JavaScript?

The above code varies slightly from the previous div example. This code uses the same prompt method to get a user’s name, but then it displays the information in an “input” element with the type set as “text.” Again, you’ll notice that the id tag property is used, which allows us to grab the DOM element by id and change its properties. The form input element uses the “value” property and not the innerHTML property. You’ll get to know the DOM element properties by heart as you use them more frequently. Also notice that the input HTML tag does not have a closing tag. The terminator “/>” can be used when you don’t need to contain text within an opening and closing tag. Using the terminator is cleaner and follows HTML5 standards.

JavaScript is used to manipulate the UI in a web application, so this next section is an important look at taking user input and using that input to change elements. You’ll use this functionality often as you work with JavaScript( JavaScript Online Certification Training )and HTML pages.

Thanks and Regards,
Lavanya Sreepada