What is a query string?

Question

In this exercise, we define a queryParams variable that is set to 'rel_rhy=', which is the start of a parameter for the query string. What is a query string?

Answer

A query string is part of the full query, or URL, which allows us to send information using parameters as key-value pairs.

A query string typically follows a ? in the URL, which in this exercise would be right after https://api.datamuse.com/words?. The key-value pair parameters are sent in the form key=value, and each pair is separated by an & symbol. This will also be covered in the next exercise.

In this exercise, the first parameter of our query string is rel_rhy, and the value of this parameter will be set to whatever text is inputted into the text field.

4 Likes

WHAT IS THE PUPOSE OF const displaySuggestions = (event) => {
event.preventDefault();
while(responseField.firstChild){
responseField.removeChild(responseField.firstChild);
}
getSuggestions();
}

submit.addEventListener(‘click’, displaySuggestions);

AT THE END part 5, GET REQUESTS III? Where is this coming from? It is not part of the module’s excercises?

1 Like

submit is the name given a cached node, likely an input with type=“submit”.

const submit = document.querySelector('input[type="submit"]');

A cached node is not just a single element. It is a tree-like structure that includes the target element and all its child elements. In this case we know it is a single element, <input type="submit">.

The above notwithstanding, a cached node is an object instance with the name we give it.

Every node object has an addEventListener method. This registers a ‘click’ event with a handler function specified by reference, known as the callback. In this case, a click on the target element will fire that function.

The function binds itself to the global event object of which there can only ever be one; the most recent event must be handled before another event can be triggered.

event is an object instance with it’s own attributes and methods, of which preventDefault is one. Browsers have built in behavior on the Submit button. If not prevented, it assembles all the input data of the form controls into a query string known as POSTDATA which is then affixed to the request URL specified in the action="..." attribute of the <form> OPENTAG.

event.preventDefault() short-circuits that process and lets the handler (or program) take control of the form data.

The name of this callback function suggests (pun not intended) there may be none or more items in a list (an array or an object as applies) and its role is to clear that list so it is empty when the loop ends. The final instruction invokes a global function to, as it were, repopulate that suggestion list.

2 Likes

what is cached node ? how object in this case is made without using new keyword.