CodeNewbie Community

Cover image for Javascript Introduction

Javascript Introduction

Oscar Ortiz 🇲🇽
Javascript Developer / Front-End / ReactJS / TailWindCSS
・5 min read

A 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 learn how Javascript is used for 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 developer's and provide as much resources and useful information as possible.

There are plenty of things we can accomplish 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 is what 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 that are followed by the computer to achieve a goal. For example when it comes to other 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 take longer for preparation. So if you're a new COOK then there is a lot of terminology to learn, same concept can be looked at as a programmer.

Handbooks are often provided by companies to New employees to familiarize themselves with the work environment guidelines. For example steps for a fire emergency exits incase a fire were too goes off or maybe some steps that need to follow 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 a good 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 your start writing it.

Computers unfortunately need us to tell them how to solve problems, it may seem crazy because we're so use 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 be able to achieve what we are trying to accomplish with our script. This is where you become different than most developers that simply copy and paste without actually 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 learned 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 freely as someone is there besides 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 no where, 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

Well 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 on how we can get better at riding a bike with these steps (script).

In Javascript terms this can be as 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 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 tasks. 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.


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

A script is a series of instructions that the computer can follow in order 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 very important to understand how your code works, not only does it help you become a better developer but can also help you use the tools you are working with more efficient.

These articles are mostly 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 that 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 about.

Discussion (0)