DEV Community: rjdoughty

Getting in the Node

rjdoughty — Sun, 02 Dec 2018 00:43:56 +0000

I have written blogs about using html to create inputs and using JavaScript and jQuery to take in the inputs from the user. So my next topic is what happens to values from the inputs. In order to expand on that thought, I have to think about how important Node.js is to web development.

Node.js is an application that enhances the capabilities of JavaScript. JavaScript is only capable of being run in a browser to make web pages interactive. Node.js can be run without a browser as a standalone application. JavaScript is like a train in that it can only be driven on train tracks. Node.js converts the JavaScript train so that it can be driven on the road. This creates many more possibilities.

The biggest use of Node is as a basis for web servers. A web server takes a client request and gives something back such as a new web page, text information or content.

Thanks to some great coders, there are packages already available that can be included in applications to create web servers. Node.js uses npm (Node package manager) which has packages that will make development faster and better. Require loads the libraries installed from npm. Node modules are built in modules that are automatically installed.

Packages are created by entering commands into terminal. In the project folder, enter command npm init into terminal to create package.json file. The package.json file will contain the entry point which is the file that leads to the application. Express is a node package that is helpful with making routing easier which will help with sending and retrieving information from the server. To install express, enter command npm install express and additional node modules will be added to the folder.

We are now ready to create schemas to store information and routes to send and receive information.

Taking in an Input: In my own words

rjdoughty — Wed, 07 Nov 2018 05:08:18 +0000

Since my last blog was about inputs, I thought I would follow up with an article on how to take in and console log the value from the form. In order to complete, we will write a function in JavaScript in order to take in the form values. jQuery is a JavaScript library of functions that have been created that will make make the job much easier.

Let’s start on the HTML file adding id’s to the inputs created last week. I also created a JS file (app.js) in the same folder as the HTML file. I removed the checkbox for now (I’ll discuss later). Can’t forget to link our JS file and jQuery to our html file using the script tag and source (src) attribute.

<body>
    <h3>Submit the form</h3>
    <form>
        <input id="name" type="text" name="name" placeholder="name"/><br>
        <input id="date" type ="date" name="birthdate"/><br>
        <input id="email" type="email" name="email" placeholder="name@email.com"/><br>
        <input id="submit" type ="submit" value="submit">
    </form>

    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="app.js"></script>
</body>

We will add functions on the app.js file to take in the inputs. jQuery allows us to place a listener on a class or id using “$” as a method $(‘#id’). We can add the jQuery method .on() which takes in an event (action) and a handler (function) to be completed when the action is made on the id $(‘#id’).on(‘action’, function);.

For our purposes, I will add the listener to the submit input/button using the id ‘submit’; use ‘click’ as the action; and will create a function submitUser to take in the input values.

    $('#submit').on('click', submitUser);

So $('#submit').on('click', submitUser) calls the function submitUser and take in values when submit is clicked.

Next, I will create a function (submitUser) to take in the input values. Inside the function I set a constant (user) equal to an object. Inside the object, I set a property for each input and assigned keys “name, DOB and email.”

const submitUser = function() {
    const user = {
        name: $('#name').val(),
        DOB: $('#date').val(),
        email: $('#email').val()
    }
    console.log(user);
}

jQuery method .val() allows us to get values from form elements. $('#id') we add a listener to the id’s of each of the inputs and add the .val() method to take in each input $('#id').val() Inside the function, we add the console.log(user) to confirm the object has been captured.

If you open this page in a browser and the console and try using this function, you will notice that when submitting the data, it briefly appears in the console and disappears and the form resets. jQuery has another handy built in method preventdefault() that we can add to the function and pass in the event to keep the default action from occurring.

const submitUser = function(event) {
    event.preventDefault();

    const user = {
        name: $('#name').val(),
        DOB: $('#date').val(),
        email: $('#email').val()
    }
    console.log(user);
}

Now when we submit the form with the console open, we can see the object appears in the console. We can now store and manipulate this data as needed.

HTML Inputs Element: The ears and eyes

rjdoughty — Wed, 07 Nov 2018 05:07:07 +0000

HTML Inputs Element: The ears and eyes

While working on a project I was thinking about how important the input tag and form element are in the world of development. Since this is a blog I was trying to find a catchy or charming phrase to describe, the best I could come up with is that input fields are sort of like the ears and eyes that take in details that an end user provides (I guess that would make JavaScript the brain).

Inputs simply give us a way to allow applications to take in information from the end user to store (POST) and or manipulate (GET, PUT, DELETE). Input elements are placed inside a form element to collect inputs. Input elements use different attributes to define and create rules for the input.

Attributes

Name

You should always add a name attribute to inputs. The type is defined inside the input tag using <input name=” ”>. The name attribute is used to reference elements in JavaScript.

Type

The input type is useful because they define the input field and create rules based on the type. The type is defined inside the input tag using <input type=” ”>. Some common used input types are text, submit and checkbox.

The most common input type is text, it is the default type if none is assigned and allows a simple text field.

Date input type provides a field that requires date format. The default value inside the field is “mm/dd/yyyy” to require user to enter correct date format.

The email input type provides a field that requires text in email format.

The input type checkbox is shown as a square box that is ticked (checked) when activated. An additional attribute of “checked” or “unchecked” can be assigned to a checkbox to force the box to be checked when the page loads. The default is unchecked.

The submit input type creates a submit button that is used to submit or send the form info. The default text inside the submit button is “submit”.

See the following code below of an input form:

<form>
    <input type="text" name="name" placeholder="name"/><br>
    <input type ="date" name="birthdate"/><br>
    <input type="email" name="email" placeholder="name@email.com"/><br>
    Sign me up for email updates<input type="checkbox" name="subscribe"  value="Subscriber" checked/><br>
    <input type ="submit" value="Submit">
</form>

Other

Inputs can be further enhanced using other attributes. Attributes can set rules for inputs and assist with user experience. Common attributes value and placeholder add default text to the input field. Placeholder provides the user a hint of the requested input while value stipulates an input value provided.

Below is shows the form on the page:

Stay tuned for future discussions on how to take in using GET, POST, PUT and DELETE methods....