DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 970,177 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for JavaScript Introduction
Oscar Ortiz
Oscar Ortiz

Posted on • Updated on

JavaScript Introduction

An introduction to JavaScript for those of you who are new to the Javascript programming language or just programming. You will need to learn how computers use programmatic approach __ problem-solving__ to achieve goals. By the end of this article, you will know how Javascript is used on the WEB and what capabilities it has.

This is a series in the making, so please feel free to give feedback, error corrections, etc. I would love this to be a Free Path for self-taught developers and provide as many resources and valuable information as possible.

We can accomplish many things with Javascript on the web, but what exactly is it?

How do we use Javascript on the web?

Here is a quick list of what it can accomplish when working with the web.

  1. Access Content
  2. Modify Content
  3. Program Rules
  4. React To Event

It’s okay if you don’t understand what is going on at first but just know that Javascript allows us to make web pages come to life with these steps.

What is a Script?

Form Component Example

A Script is a series of instructions

This may seem very simple because, in fact, it is that simple. Javascript is simply a series of instructions by the computer to achieve a goal. For example, when it comes to things other than computers like Handbooks, Recipes, and Manuals, they all have something in common, and it’s following a set of steps to achieve a goal.

Recipes give folks a set of instructions to follow to create a dish they have never made before. This can be considered a script since it’s simple steps for a meal. Some recipes may seem very basic and quick to make; others may have complex steps and more extended preparation. So if you’re a new COOK, then there is a lot of terminology to learn. The same concept can be looked at as a programmer.

Companies often provide handbooks to New employees to familiarize themselves with the work environment guidelines. For example, steps for a fire emergency exit if a fire were to go off or some steps that need to be followed within a specific event. I’m sure you get the picture for Manuals as well.

How do we create a script?

When writing a script, we need a few things to keep in mind to make sure we write an excellent script.

  1. Define the goal
  2. Design the script
  3. Code each step

As tempting as it can be to start coding right away, it pays to spend time designing your script before writing it.

Computers, unfortunately, need us to tell them how to solve problems. It may seem crazy because we’re so used to programs doing things for us without thinking that now we have to step out of our comfort zone and start thinking like a computer to achieve what we are trying to accomplish with our script. This is where you become different from most developers who simply copy and paste without knowing what the script is doing. For example, when first learning how to ride a bike, you were scared to fall, but once you realized it wasn’t that scary to fall when learning to balance yourself, you knew by starting off with small tasks.

GOAL: To be able to ride the bike without falling off.

Design Script:

  1. Training wheels to help balance and get used to turning the handles
  2. Remove training wheels and learn to ride as someone is there beside you to help you not fall
  3. Stepping off a ledge or step to start riding and get a feel for yourself
  4. If you keep on falling and feel like going nowhere, repeat steps one through 3.
  5. Should be able to balance all on your own now and ride freely. (Don’t forget to wear your helmet and safety pads.

Code Each Step

In this example, we would just start riding our bikes and follow the steps as instructed. I might not have the steps correctly, but we have an idea of how to get better at riding a bike with these steps (script).

In Javascript terms, this can be a Calculator App when developing the addition function.

GOAL: Add up numbers for a new value

Design Script:

  1. Ask the user for two numbers
  2. Add numbers up together
  3. Return the new number

Code Each Step

Create add function
function add(){}

Pass in arguments to act as our numbers that the user passes
function add(a, b) {}

Return summed up numbers
function add(a, b) { return a + b }

It’s good to know that again computers don’t learn how to perform tasks like you and I. It needs to follow instructions every time it performs its duties. Important things to note when learning a new programming language.

Vocabulary: The words that computers understand

Syntax: How you put those words together to create instructions computers can follow.

Conclusion

So what is a script, and how do I create one?

A script is a series of instructions that the computer can follow to achieve a goal

Computers approach tasks in a different way than humans, so your instructions must let the computer solve the task programmatically

To approach writing a script, break down your goal into a series of tasks and then work out each step needed to complete that task

I hope by the end of this article you managed to learn something new. It is crucial to understand how your code works. Not only does it help you become a better developer, but it can also help you use the tools you are working with more efficiently.

These articles are primarily intended for personal use on becoming a better programmer, writer and grow my programming skills. Feel free to drop any feedback or corrections that you believe should be made to help me and others. Thank you for your time for sticking this far!

Follow me on Twitter for any future article suggestions you’d like to see.

Top comments (0)

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!