Top image

WEB design and programming - HTML | CSS | Java Script | PHP

Java Script

3 Steps You Can learn JavaScript Basics

Do you know what is JavaScript? This post is simplified to make sense easily so that the beginners learning a front end will be able to know a web programming bit by bit.
Here are what we will learn together in this article below.

Basic concept of JavaScript

As you might know, JavaScript is one of the most popular Script language in the world; Like animated graphics, sliding image, interactive menu buttons, which are used JavaScript to build and control dynamic website content.

WHAT IS JAVASCRIPT?

・One of a programming language often used for a front end.
・Controls the behavior of HTML documents to make up prettier.
・Used to animate, hide or show items, Carousel and so on.
・React to user input like a contact form that any website mostly has.

Meaning, JavaScript is a programming language that makes some behavior and is used to add functionality to a website. Since JavaScript is a programming language, a way to write (such as the structure and syntax) seems complicated though, no worries. You would be to get familiar to use them with their features such as variables, functions, objects (Built in objects) or control structures such as if statements or loops while you learn the foundation of JavaScript.
However, you want to touch a bit of basic knowledge of JavaScript before you start creating something since without having a foundation lead you a lots of confusion. So I’m going to write the articles step by step like this below.

  • 1Foundation of JavaScript
  • 2Functions
    Loop
    if…else
  • 3Let’s try actual programming
Let’s get started!

Data types

In JavaScript, there are seven fundamental data types:

Number

any number without quotes:

1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ...

String

characters wrapped in single or double quotes:

"achi", "WEB", "JS", etc.

Boolean

This data type only has two possible values which are true or false. Meaning, they can be the answers just like YES or NO.

Null

This data type represents the intentional absence of a value.

let empty = null;

Undefined

Similar idea to “Null” (Not exact same as that).

let empty = '';
// This variable will return "undefined" as a result since value does not exist.

Note: Both of them are used to tell the computer that values are nothing.

Object

Collections of related data: There’s a detail of it below.

Symbol

A newer feature to the language as ES6 that is latest type of JavaScript. They don’t have specialize function which mean it is a unique identifier. You don’t need to dive for now.

Variables

Variables are just like the container boxes which label and store data in memory.

This is the basis for all over programming.

You’ve might heard “Variables”, right? Yes, the idea is similar to mathematics. You can basically name the variable anything you want and store a values so that is to be used at a later time.

Here’s an example of Variables:

let myVariable = "Hello!"; // TYPES: STRINGS
let myNumber   = 333;      // TYPES: NUMBER
let myBoolean  = true;     // TYPES: BOOLEANS

・Use let or const to declare the value.
・Evaluate everything to the right of the equals sign, then assign the value to the variable on the left of the equals sign.
・End the command with a semi-colon (;)
・There are specific conventions to declare the variables. more

Note: If you’ve seen the “var” instead them, it’s just a previous keyword. We want to use as possible let or const because the newest JavaScript version ES6 prefer.

Variable Types

Objects

Objects can be thought of as a variable that can hold multiple values.

To declare an object, use the curly brackets {}.

let myObject = {
   webSiteName : 'ACHIWEB',
   webSiteFeature : 'Web',
   webSiteRank : 3,
}

Though Objects are similar to variables since they can be used to hold values, you need to remember that they can hold multiple values and syntax is more complicated than Variables.

Let’s take a closer look.

・the property name must start with a letter and contain no spaces
・a colon (:) is used to separate name from value
・a comma (,) separates properties. (The last line doesn’t need a comma.)

Array

Arrays are way of making lists that could store data. Meaning, arrays are ordered, so each item has a numbered position.

let web = ['Wordpress', 'JavaScript', 'SCSS', 'PHP'];
web[1]; // Print 'JavaScript';

You can store any number, string, and Variables into them. And also, as you can see the arrays’ first order is to be {0}, meaning the positions start counting from 0 rather than 1.

Operators

Arithmetic Operators

Arithmetic operators allows us to perform mathematical calculations on numbers:

Add: +
Subtract: -
Multiply: *
Divide: /
Remainder: %

console.log(3 + 4); // Prints 7
console.log(5 - 1); // Prints 4
console.log(4 * 2); // Prints 8
console.log(9 / 3); // Prints 3

String Concatenation

We can use them not only for numbers but also string. When a + operator is used on two strings, it appends the right string to the left string:

console.log('achi' + 'web'); // Prints 'achiweb'
console.log('Hello ' + 'there!'); // Prints 'Hello there!'

Comparison Operators

In programming, sometimes we need to use different types of operators to compare values. These operators are called comparison operators.

// symbol
<   // Less than
>   // Greater than:
<=  // Less than or equal
>=  // Greater than or equal
=== // Is equal
!== // Is NOT equal

//Example
8 < 9 // Evaluates to true
7 < 3 // Evaluates to false
'apples' === 'oranges' // false

All comparison statements evaluate to either true or and check whether that comparison of its values correct or not according to (>, <, <=,>=,===).

Logical Operators

logical operators is used for Conditional Statement called if statement that I'm going to touch it next post.

(&&) // the and operator 
(||) // the or operator 
(!)  // the not operator, otherwise known as the bang operator 

For now, I will put aside explaining of a detail.

Built-in Objects

What is Built-in Objects? It is kind a technical jargon of JavaScript. They could be used without declaring before we want use since they are already defined in JavaScript, which is pretty helpful.
Notice: In a programming, We basically need to declare any kind of feature before we want to use them.

Say, the function is the one of Built in object of JavaScript.

What is FUNCTIONS?

This is one of the most important thing in all over programming. The function is a reusable block of code that groups together a sequence of statements to perform a specific task.

Here's what the function looks like:


function achiWeb() {
  console.log("I love programming!");
}
achiWeb(); // Log "I love programming!"

This structure and syntax are more complicated, so I will take it over into next article.

In the following article, We will be able to know what the function and loop and if statement.

Click here below!

JavaScript: What are the Function, Conditional Statement and Loop?

If you have any questions, please leave a comment on Twitter of ACHIWEB account 🙂