Page not found – Web Design Blog for beginners | https://achiweb.com Web Design Blog for beginners | Sun, 12 Jan 2020 06:15:33 +0000 en-CA hourly 1 JavaScript: Functions https://achiweb.com/690/ https://achiweb.com/690/#respond Wed, 08 Jan 2020 21:46:34 +0000 https://achiachi.sakura.ne.jp/awp/?p=690 Read more »]]>

WHAT IS A FUNCTION?

Function is a block for a set of commands or instructions.

A function is a reusable block of code that groups together a sequence of statements to perform a specific task its inside, in order to make a program easier. With this, you won’t have to write a same code every single time.
Here’s what a function look like:

// Declare a variable
let js = "JavaScript"; 
//Define a function
function firstFunction() {
 alert(js);
}
// Call the function
firstFunction();

You will be able to see a result of code above by clicking the button below.

NOTICE:

JavaScript offer us a tons of original functions such as alert function above, and console.log. It may be recommended to look up if there is a similar function before you want to create your own new function.

DEFINE A FUNCTION

We are going to learn how function defined in this section.
For instanse, if there is the function that calculate numbers like this;

function multiple(x, y) {
    x += 1;
    return x * y;
}
multiple(3, 6);
console.log(multiple);

In this case, a result of multiple function will be 24. This is because the function adds +1 to the value of the parameter x and multiplies it by y. The result value will be changed when you alter the either or both number:

Let’s see an anatomy how this function works, step by step.

①Declare the function

First of all step is how declare the function. In JavaScript, one way to create a function is by using a function declaration, which has been used since old time.

// An actual code
function multiple(x, y) {
    x += 1;
    return x * y;
}

// An anatomy of the code
function functionName(Parameter1, Parameter2) {
    ・・・ // Body of Function 
    return // Returned value of Function ;
}
BREAK DOWN

function – Function keyword to start a syntax
functionName – You can define any name based on a variable naming convention
Parameter – A variable as a placeholder for a value that will be passed to the function when it is invoked
Body of Function – A place wrapped by {} to write an actual processing
Return – Return keyword followed by the value that we wish to return. CHECK!

notice

> The syntax that start by function keyword is called the “Function declaration”.
> Function declaration is following by a function name.
> Can not redefine a name originally defined by JavaScript (such as alert()).
> Will be more able to find parameters out at a section of an argument below.

Return keyword

return keyword is very important since we can only receive the value handled when the return statement is exist, even if the function worked fine. Without this, JavaScript will return undefined as a default value instead.

We use the return keyword followed by the value that we wish to return. Like we have seen above as the calculated function example:

return x * y;

In this case, we’ll be able to get the result of x * y.

However, if we wrote a code like this below, we wouldn’t catch the return value but got the undefined instead since we omitted the return value!

function multiple(x, y) {
    return;
}
console.log(multiple()); // => undefined
Does return should type on the end of code?

As a return statement is executed, no further processing is performed in its function. For instance, If you write the code like this:

function multiple(x, y) {
    return x * y; 
    // The function will no longer execute until here
    x += 1; // This line will be ignored
}
multiple(3, 6);

In this code example above, the result will be 18. Since the return keyword has already run, the under line from the return statement won’t execute.

notice

> If the function does not need to return a value, the return value can be intentionally omitted, or the return statement itself, too.

②Calling the function

It can be invoked the function with following ( ) to the function name created,

// An actual code
multiple(3, 6);
// An anatomy of the code
functionName(argument1, argument2);

When calling a function together with its arguments, use the functionName (argument1, argument2);. Separate them with commas if there are two more arguments.

notice

> Be sure to put a semicolon at the end of the sentence.

Argument

An argument can be passed into the functions by adding a value within the parentheses ( ).

const greeting = "Hello!";
console.log(greeting);

In this case, console.log(greeting), the inside of parentheses, greeting, will be an argument of its function.

Deference of a parameter and an argument

What a deference of a parameter and an argument is a just simple that the parameter is in where a function defined, and the argument is in where a function called.

image

The Parameter will be assigned variables.
The argument will be assigned actual values.

notice

> As there are parameters but no arguments, undefined is assigned into the remaining parameters (When Parameters > Arguments)
> As there are arguments but no parameters, an surplus of argument will be ignored.(When Parameters < Arguments)

[ES2015] Default Parameters

Default parameters allow to have a predetermined value in case there is no argument passed into the function or if the argument is undefined when called.

function echo(x = "default value") {
    return x;
}
console.log(echo(1)); // => 1
console.log(echo(1, 6)); // => 1
console.log(echo()); // => "default value"

Thus if a default value is specified for the parameter, it can have a value in advance even if no argument is passed.

[ES2015] ARROW FUNCTION

[ES2015] introduced arrow function syntax, a shorter way to write functions by using “arrow notation”, ()=>.

How to write an arrow function

The arrow function is made up of the syntax below.

const js = "JavaScript"; 
const firstFunction = () => {
 alert(js);
}
firstFunction();

Here is a comparison of the function declaration.

const js = "JavaScript"; 
function firstFunction() {
 alert(js);
}
firstFunction();
BREAK DOWN

– Removed the need to type out the keyword function
– Instead, Use the either keyword const or let to declare the arrow function followed by Function name you want
– First include the parameters inside the ( )
– Add an arrow => following the parentheses, that points to the function body surrounded in { }

:concise body

In addition, [ES2015] allows to write a concise code in the syntax of the arrow function. Like this:

// A regular way to write the arrow function
const multiple = (num) => {
 return num * num;
}

// A concise way to write the arrow function
const multiple = num => num * num;
BREAK DOWN

– The parentheses, ( ), around num have been removed
– The curly braces { } have been removed
– The return keyword has been removed

WHY?

– This is because it is possible to omit the ( ), only when you have a single parameter
– Also you can omit those { } and return keyword, only when the function consists of a single-line block.

notice

> JavaScript has up to three types of syntax for declaring functions, which are Function Declaration, Arrow Function, and Function Expression. >>About Function Expression
> It will be helpful to be familiar with the multiple ways of those syntax.

REVIEW A FUNCTION

> Function is a reusable block of codes.

> Functions can store themselves in variables.

> There are three way to declare the function.

> Arrow function is newer type of declaration in JavaScript [ES2015].

> Return keyword is requirement when you need to receive the value from its function.

> Argument is the actual values passing into the parameters of function.

We are going to learn Functions & Scope in the next chapter.

]]>
https://achiweb.com/690/feed/ 0
JavaScript: Operators https://achiweb.com/654/ https://achiweb.com/654/#respond Sat, 04 Jan 2020 23:43:51 +0000 https://achiachi.sakura.ne.jp/awp/?p=654 Read more »]]>

WHAT ARE OPERATORS?

Operators are the signals that can calculate or chain any value and data.

JavaScript can do a math. For instance:

+ addition, subtraction, * multiplication, / division

const addition =  1 + 2;
//This will return a value of 3.
const subtraction =  30 - 2;
//This will return a value of 28.

In this lesson, we are going to learn how to handle each operators with their examples.

Examples | Mathematical Assignment Operators

+ addition

+ can add numbers:

let subtract = 6 + 3;
// A result will be 9

it can be not only adding numbers but also chaining strings:

let   fruit = "apple";
let   add   = " & "
let   juice = "orange juice";
const stringChain = fruit + juice;
// A result will be "apple & orange juice"

subtraction

can subtract numbers:

let subtract = 6 - 3;
// A result will be 3

* multiplication

* can multiple numbers:

let multiple = 10 * 100;
// A result will be 1000

/ division

/ can divide numbers:

let divide = 100 / 10;
// A result will be 10

= assignment

= assignment operator will assign a values to a variable. You can combine assignment operator and other operators to clarify a code, like +=, -=.

let num = 1;
num += 10; // A result will be => 11

This code above is same as:

let num = 1;
num = num + 10; //A result will be => 11

++ Increment Operator

The increment operator, ++, will increase the value of the variable by 1.

let num = 1;
num++;
// // A result will be => 2

Decrement Operator

The decrement operator, , will decrease the value of the variable by 1.

let num = 1;
num--;
// // A result will be => 0

NOTICE:

++ and are typically used in Loop statement to increase or decrease a value. You will see them by going to the lesson more further. 
> Here is a post of a conditional statement

Examples | Comparison Operators

Comparison operators compare the value on the left with the value on the right.

=== Is equal to

=== operator compare each values whether they are same or not, and evaluate it to true or false.

1 === 1; // A result will be => true
1 === "1"; // => A result will be => false. 
'apples' === 'oranges' // false

NOTICE:

In the second line, since either one is type of number and the other hand is type of string, the result will be false.


!== Is NOT equal to

=== operator compare each values whether they are different or not, and evaluate it to true or false.

3 === 3; // A result will be => false.
3 === "3"; // => A result will be => true. 
'beer' === 'wine' // true

NOTICE:

> When both operators would be different values, !== operator will return true since it compare if they are different or not, and vise versa.


<:> Less than:Greater than

< will return true if a left value is less than a right one. While > will return true if a left value is greater than a right one.

120 < 300; //  A result will be => true
100 > 100; //  A result will be => false

<=:>= Less than or equal to:Greater than or equal to

< will return true if a left value is less than or equal to a right one. While > will return true if a left value is greater than or equal to a right one.

30 >= 30; //  A result will be => true
150 >= 151; //  A result will be => false
150 <= 151; //  A result will be => true

Examples | Logical Operators

Logical operators will change a final result according to a evaluated result of value on the left.

&& AND Operator

&& AND Operator will return either true or false based on the evaluated result on the right only when the evaluated result on the left is true.

const x = true;
const y = false;
console.log(x && y); // => false
console.log(y && x); // => false
Break down

① – ③: evaluated in the order of x -> y
④: return false when the left side is falsy
④: x will not be evaluated

NOTICE:

> If the evaluation on the left is not true, the right is not evaluated. When such a value is determined, no further evaluation is called short-circuit evaluation (short circuit).


|| OR Operator

|| OR Operator will return either true or false based on the evaluated result on the right only when the evaluated result on the left is false.

const x = true;
const y = false;
console.log(x || y); // => true
console.log(y || x); // => true
Break down

① – ③: y is not evaluated because x is true
④: Returns the result of evaluating x because y is false

NOTICE:

> Contrary to the && operator, returns true without evaluating the right side if the left side is true.


! NOT Operator

! NOT Operator will return true when the evaluated result of values is false, and vise versa.

console.log(!false); // => true
console.log(!true);  // => false

NOTICE:

In JavaScript, logical operators will work with boolean values. We can use logical operators to add more sophisticated logic to our conditionals.
> Here is a post of a conditional statement

EVALUATE OPERATORS

Let’s try the operators out with the web console like we have tried in previous post.

How to evaluate operators in the browser

Open up a Chrome browser and use a shortcut key CONTROL + SHIFT + I. (If your computer is Mac, the shortcut key will be COMMAND + OPTION + I)

Press a second button on the right and top, then you can try to operate any value.
Like this:

console log for operators

You can play how operators work on the web console a and would find several errors.

REVIEW OPERATORS

> Mathematical Assignment Operators can calculate the values or chain the strings.

> Comparison Operators compare the values to be used at conditional statements.

> Logical Operators anyway return Boolean values.

> Logical Operators will be active at conditional statements.

]]>
https://achiweb.com/654/feed/ 0
JavaScript: Variable https://achiweb.com/623/ https://achiweb.com/623/#respond Sun, 29 Dec 2019 23:31:36 +0000 https://achiachi.sakura.ne.jp/awp/?p=623 Read more »]]>

WHAT IS A VARIABLE?

A Variable is a named memory location which can be stored any information( = data).

You can assign any values like number 3, string “Hello”, or an other information (like a user e-mail address) into the variable, to be used at a later time.

Here’s what variable look like:

let fruit = "apple";
let greeting = "Hello";
let programming = "Java Script";

DECLARE A VARIABLE

The variable has 3 types of keywords which are var, let and const, to declare a new variable.

Since var is a old type keyword used before [ES2015] which is newer version of JavaScript, we will use let or const keyword in this article.

let and const

[ES2015] const

const keyword define a value that can not be reassigned into the variable.

const websiteName= "ACHIWEB";
Break down

① Put the keyword const to declare a variable
② A variable name that you want to name
③ Assign a value(date) with use = operator.

notice

> can not be reassigned the values to its variable declared with const keyword.

[ES2015] let

A way to use let keyword is almost same as const keyword.

let websiteName= "ACHIWEB";
Break down

① Put the keyword let to declare a variable
② A variable name that you want to name
③ Assign a value(date) with use = operator.

notice

> can be reassigned a new value the into its variable with let keyword.

You can reassign an another value into its variable declared with let keyword over again.

let count = "";
count = 1;
count = 2;
count = 3;

notice

> let keyword can define the variable without initial value, compare to const keyword. The variable without initial value has originally a default value, “undefined“.

JavaScript: Naming conventions

Here’s a part of examples of the naming conventions of JavaScript:

> end the command with a semi-colon (;)

> Cannot contain spaces

– Normally, engineers would use camelCase for names with multiple words and every new word will be started capitalized instead.

> Cannot contain reserved symbols

– math symbols (+, -, =, etc…)
– JavaScript-specific symbols ({, }, :, etc…)

> Cannot begin with a number

notice

> There are more rules to declare avariable.

[ES2015] Variable and template literals

The variable can be written with the template literal which you have learned in previous chapter.

You can embed its value of the variable when you write ${variable name} inside of the template literals:

const str = "string";
console.log(` This is a ${str}.`); // => "This is a string"

By this, it allows to omit + operators to connect strings.

notice

> Here is a post of Data types and Literal.

EVALUATE A VARIABLE

How evaluate a variable?

Let’s attempt the variable in a web console tool of a browser.

How to evaluate a variable in the browser

One of a way executing JavaScript is using a developer tool of a web browser. In this time, We will use Chrome to attempt to evaluate a JavaScript code.

Use a shortcut key Ctrl + Shift + I (Windows) or Command + Option + I (Mac), to open up the web console tool. You also can open it with menu bar above.

Here’s how variable evaluated look like:

web console

notice

> Click Console tab on second of right top.
> You can execute a code of JavaScript by a line on a function called “REPL” of a command line.
> You can create a new line with Shift + Enter to enter a several lines.
> It may easier to check a JavaScript code compare to creating a new HTML file.
> However, since it is slightly different from behavior of JavaScript with HTML file, it should be careful for understanding their actual behavior.

COLUMN: Why are variables needed?

Because to use that a programming code clarify and be shorter. Otherwise you would have to set a same value again and again, which could disrupt all over the code.

Variable is not a box

There may be examples of attempting to get a images that variables is like boxes, but variables are not boxes.
When you create the variable, the data (values) newly created by you will store in a memory inside the computer, and the name assigned to its storage will becomes the variable.

“Create data (values) in each bite of memory in the computer and attach a name tag”

If you want to describe a variable as an image, this example may be closer than comparing it to a box.
Although, attempting to capture the concept of a computer language as a visual representation of the real world could destroy the underlying logic of a program.
We should get into the world of programs by properly grasping the specification and purpose of variables in object-oriented, rather than understanding it as an unclear image.

REVIEW A VARIABLE

> const keyword can declare the variable that can’t reassign a new value.

> let keyword can declare the variable that can reassign a new value.

> Using const keyword is expected to reduce a bug with banning to reassign the value.

> Variable has the naming conventions to declare it correctly.

> We can attempting to check how a movent of the variable in the web console.

▼Check out the next post
https://achiachi.sakura.ne.jp/awp/654/

]]>
https://achiweb.com/623/feed/ 0
JavaScript: Data types & Literal https://achiweb.com/577/ https://achiweb.com/577/#respond Sun, 22 Dec 2019 23:01:14 +0000 https://achiachi.sakura.ne.jp/awp/?p=577 Read more »]]>

WHAT IS A DATA TYPES?

Data Types is a basic type of JavaScript.

JavaScript has a Data Types which consist of 6 kinds of primitive types and objects.
When we categorize the data types, it could be two types called Primitive type and Object (Composite types).

Here’s a schematized Data types:

Scheme of Data types

Primitive types

Number

any number without quotes:
0, 2, 3, 4, 5, 6, 7, 8, 9, 0.5

String

characters wrapped in single or double quotes:
“apple”, “JavaScript”, “WEB DESIGN”, “I’am a genius”

Boolean

true or false, means “Yes(that is correct)” or “NO(that is wrong)”.

Null

This data type represents a intentional absence of a value: null

Undefined

This data type represents that a value is undefine: undefined

[ES2015]Symbol

A newer feature in [ES2015]ES6 which is latest type of JavaScript. They don’t have specialized function or unique identifier.

Object (Composite types)

Object type is a collections of related data which consists of several primitive types and objects: Objects, Functions, Arrays and so on. We will be doing to learn it in a chapter of Objects.

WHAT IS A LITERAL?

Literal is an expression defined as a syntax.

JavaScript has an expression of Literal defined as a syntax which will be able to write a value of data types directly.

Here’s what literal look like:

const str = "Hello";
// One wrapped by " " is the literal.

In Primitive type, there are 4 kinds of an expression of literal:

> Booleans
> Numbers
> Null
> Strings

And at part of Object type also has a special literal:

> Object
> Array

>>About an object literal is here.

Literal of Primitive types

Boolean literal

They have both literals, true or false. They will return true or not, just as it is to see.

true; // => true
false; // => false

Number literal

console.log(1); // => 1
console.log(20); // => 20
console.log(333); // => 333

Null literal

The literal for null will return null value that means there is no value intentionally.

const userEmail = null;
console.log(userEmail); // => null

We would use null or undefined at times to define an absent value on purpose because by doing that, it will be helpful to store the values ​​generated later (for example, newly registered user information) irregularly.

NOTICE:

Though null is the literal, undefined is global variable. Meaning you can not define null as a variable name but if technically to say, undefined could be.

String literal

There are three types of literals to express the strings. However, results will be a such same evaluation : string.

console.log("string"); // => "string" 
//double quotes
console.log('string'); // => "string"
//single quotes
console.log(`string`); // => "string"
//backticks

NOTICE:

> Double quotes and a single quotes are same meaning

> Use the other quote that not appear with in the string when you want to use certain quote mark with in the string like this: `I said to him, “We will be broken” `

> Or use a \ in front of what you want to use like: “I said to him, \”We will be broken\” “, which is called Escape.

[ES2015] Template Literal

A template literal is wrapped by backticks `. The template literal is readable, become a code shorter, and that you don’t need to concern to part whether you should use “”, or .

In the template literals, you can start a new line without \n, which is a old written way to create the new line.

Here’s example of the template literal:

`My name
is
Achi`;
// In the past, you wold need to express "My name\nis\nAchi"

>> More information about Template Literal

Necessity of literal

Without the literal representation, the computer will not treat the above-mentioned repeating strings, numbers, and Booleans as values. Therefore, you would have to define a new function to make the value understood as a value in that case. In order to avoid such trouble, JavaScript provides a literal expression that can directly handle data types as values.

Literals are like reserved words that cannot be defined as variables, and attempting to redefine them will cause a Syntax Error. In other words, the data types with defined registry expressions such as true, false, and null cannot be redefined and there will be a syntax error if you try to use null, true or false, as variable names.

REVIEW OF DATA TYPES

> Data Types is a basic type of JavaScript.
> Data Types is consist of 6 kinds of primitive types and some composite types called an object.
> We can use an expression of literal when we use a Data Types.
> We can’t define literal as a variable again since it would emerge an error.
> ES6 provides us the template literals to clarify a code.

▼ Check out the new post
https://achiachi.sakura.ne.jp/awp/623/

▼ previous post as well
https://achiachi.sakura.ne.jp/awp/386/

]]>
https://achiweb.com/577/feed/ 0
JavaScript: What are the Function, Conditional Statement and Loop? https://achiweb.com/514/ https://achiweb.com/514/#respond Wed, 31 Jul 2019 19:46:03 +0000 https://achiachi.sakura.ne.jp/awp/?p=514 Read more »]]>

In previous post, we’ve looked a general concept of JavaScript. This chapter is going to be more practical content and you can find out the crucial syntax which is the Functions, Conditional Statement and Loops.

Functions

Let’s observe more detail about the Functions.
Why are the functions quite important in all over programming? How do they work?

A function is like an instruction manual that has orders to a computer.
Do you remember that we’ve learned about Variables which can store the values in the previous post? Though they can maintain only values, the functions are the things which are grouped method of processing with putting a specific name and we can reuse it over and over whenever we want to perform the task again. Meaning, that makes code more organized and clear.
Let’s take a look how we write a syntax of the function.


//Function Declaration
function calc() {
  let num = 2 * 3; 
  console.log(num);
}

//Function Expression
let calc = function() {
  let num = 2 * 3; 
  console.log(num);
};

//Arrow Function
const calc = () => {
  let num = 2 * 3; 
  console.log(num);
};

I’ve written three of typical way to declare the function since there are a couple of syntax in JavaScript, but they represent a same content. You can use one whichever you want. However I’m going to use Arrow Function to explain because ES6 which is newer version of JavaScript prefer to use it. Let’s dissect it together.

Break down (Arrow Function)

・First of all, it is to need to declare a variable with const or let keyword.
・If there’s no parameter or more than two, the parentheses, (), are required.
・After the parentheses, or parameter name, it needs to be put the arrow, =>.
Line of 15 – 18, which is the function body, the block of statements inside of that required to perform a specific task, enclosed in the function’s curly brackets, { }.
・Also, there are important concept in the function, which are parameters, argument and return values. NEXT

To call the function, we need to put the function name followed by parentheses.


calc(); // output 6

Here is the point. Function won’t be executed till we order to computer.
Though you need to invoke the function name each single time once you want to use it, it’s up to figuring out to make a way work more efficient.

Also, as I’ve mentioned above, to use the functions more efficiently, it’s essential to manipulate those thing: which are parameters, argument and return values.
However, it would take a long line to figure them out, I’m going to introduce them the following article!

Conditional Statements

if…else


Do you notice we often get circumstances that we want to select more than 2 choices in daily life. In programming, that’s the time to appear If…else keyword which will be a statement that performs either of tasks based on conditions.

In the sample above case, the tasks are “I’ll make doughnuts!” or “I won’t make anything.”, and the condition is “the case of hungry” which is after the if keyword.
In the condition would be true, the first decision will be executed, and if it’d be false, the block of else code will run to perform the second task.

else if


If you had more conditionals, you could use else if keyword between if and else. You could make it as many else if keyword as you want, as long as you would like to make more complex condition and to have multiple outcomes.

So, let’s take a look what a code going to be like if we write an actual statement.


let hungry = 0;
let diet   = 1;
if(hungry){
 console.log("I'll make a doughnuts!");
} else if(diet) {
 console.log("I'll put up with carb ... ");
} else {
 console.log("I won't make anything.");
}

In this case, the output will be else one that say “I’ll put up with carb. Let’s make boiled eggs!“.

Break down

・The conditional statement is judged based on that a condition will be either true or false.
・If the condition would be judged to true, then its statement will execute.
・”0″ would be judged to false, so the next condition is to be checked.
・Once the condition evaluate to true, the statement which is belong that condition will run and the rest of the conditions are not evaluated.
If none of the conditions evaluated to true, then the code in the else statement would be executed.
・We can use comparison operators and logical operators as a condition to make a more complex conditional statement.NEXT

In programming, a concept of binary decision would be a basic thought. If you wanted to create something with program, it would be a good practice that you think all over the things based on the algorithm.
Algorithm is a way of thought to carry out with what kind of procedure so that derive the tasks to realize what you’d like to do.

Say, when you wanted to throw garbage of house away, you would need to separate kinds of them and then you might need the boxes for each of them. What would you do to get the boxes? You might ask the neighbors that they have some of it, or, you might pick a free box up on the street, whatever.
Like that, you can imagine your own if…else based on Algorithm in your head whenever!

For now, we’ll move to the next thing we’re going to learn.

Loop

When we want to iterate some block of code, we can use Syntax of loop.
for loop is the one of iterator object, that provide us to run repetitive tasks.

What if you want to prepare honey to each single of fruits like the image above? A simplified code would look this below.


let fruits = ['apple', 'orange', 'grape', 'peach'];
let honey  = 0;
for (let i = 0; i <= fruits.length; i++){
	honey = i;
}
console.log('I have ' + honey + ' honeys!'); // Output "'I have 4 honeys!"

Break down

Line of 2, I’ve put the variable named “fruits” as an Array.
Line of 3, I’ve put the variable named “honey” which it started by 0 as well.
Line of 4, the for keyword has written followed by parentheses, ().
・There are three expression inside of it and each them are separated by semicolon, ;.
・The inside of parenthesis, the part of let i = 0; is called Initialization which can be processing to initialize before each single iterator.
・The inside of parenthesis, the part of i <= fruits.length is called Stopping condition that is to stop the iterator once the condition evaluates to true.
・The inside of parenthesis, the last part, i++ is called as Iteration statement that iterate to its own. In this case, the value of i will be increased by 1 after each loop.
Line of 5, I’ve put that honey is equal to i. Meaning, a result will be 4 since i which is increased one by one was iterated the time as many as the Array’s length.

If you missed to use the comparison operator correctly, the output would be not what you want have. like this below:


let fruits = ['apple', 'orange', 'grape', 'peach'];
let honey  = 0;
for (let i = 0; i <= fruits.length; i++){
	honey += i;
}
console.log('I have ' + honey + ' honeys!'); // Output "'I have 10 honeys!"

As you can see, I’ve changed the comparison operator, from = to += it’s inside of curly brackets and it output the number of honey as 10! What’s going on?
Let’s take a closer look at the movement of the loop with the console logs.

movement of the loop

Between the inside of body of for loop, If we put the code like:


console.log(i);

We can see the detail of that movement on the console which is known as a developer tool that any browsers have, and it looks like:

Why does it output 10 eventually?

In this case, the action of honey += i will be like this.

x += y means x + y = z(result), so it repeats honey + i = 〇(result) as many time as stopping condition had.
・After the second time iteration, the figure of honey will be a total of them honey + i before one.
・In addition, it be added the number of i in the current loop has on it and it will be the next number of honey’s one.
We have 5 rounds to iterate since stopping condition evaluates by less than or equal to Array’s length, so we get number 10 as final result.

To get make sense for the image of the loop is a bit tough thing for beginners who have never learn to program. However, you will get used to it while creating the actual program.

Actually, there are more suitable method to iterate kind of that processing like forEach method or so on. I’ll tell you about a detail of it on the following article!

Review

Let’s take a review what you’ve learned in this article.

Function is a reuseable block of code to perform a specific task concisely and we can invoke them as many time as needed.

Conditinal Statements is to make a binary decisions and to execute the outcomes based on that the condition evaluate to “true(Truthy)” or “false(Falsy)” or otherwise.

Iterator is Loops that perform repetitive actions so that we won’t code same one over and over again.

There are way more method and objects in JavaScript which I haven’t introduce today. Keep in mind it till I’m going to post the next article.

▼ Check out the previous post
https://achiachi.sakura.ne.jp/awp/386/

]]>
https://achiweb.com/514/feed/ 0
Table of contents you can learn JavaScript basis https://achiweb.com/386/ https://achiweb.com/386/#respond Tue, 30 Apr 2019 15:19:47 +0000 https://achiachi.sakura.ne.jp/awp/?p=386 Read more »]]>

Let’s get started to see about a roughly concept of JavaScript in this article before we start full-scale learning a foundation grammar of JavaScript.

WHAT IS JAVASCRIPT?

JavaScript Fundamentals

JavaScript is a programming language used to define the behavior and used to add functionality to a website; Like animated graphics, sliding image, interactive menu buttons, which are used JavaScript to build and control dynamic website content.

Here’s what JavaScript looks like:

const javaScript = "Hello JS";
function myFunction(){
  alert(javaScript);
}
myFunction();
// An output will be "Hello JS" with a popup
JavaScript is constructed by two elements

The programming language is generally consist of two elements that are Statement and Expression. A typical statement in JavaScript are if and Loop. We can learn them more deeply while studying the concepts below.

CONTENT OUTLINE

> Data types & literal

> Variable

> Operators

> Function

> Object1 - Property and method

> Object2 - Details of method and Class

> Object3 - Built in Oject NOT YET

> Array

> Conditional Statement NOT YET

> Loop NOT YET

> Asynchronous processing NOT YET

> Json NOT YET

REFERENCES

Code Cademy

| Alearing code web site that you can learn a basis of them while you program actually

CLC(Canada Learning Code)

| An organization of web development in Canada that offer you a work shop for learning code

js-primer

]]>
https://achiweb.com/386/feed/ 0
The first step about front-end and back-end https://achiweb.com/271/ https://achiweb.com/271/#respond Sun, 16 Dec 2018 17:59:07 +0000 https://achiachi.sakura.ne.jp/awp/?p=271 Read more »]]>

Do you know what a front-end engineer and a back-end engineer is?

There might be a few people who’ve heard engineer. However, aren’t you confused now? Front-end? Back-end? What are they? I’m going to tell about what the differences are between a front-end engineer and a back-end engineer in this article.

What’s the engineer?

In general, engineer means technology person in a broad sense. Though there are many kinds of the engineers in the world, I’m going to tell you about a web engineer. What is it? They have another name which is called web developer, and their field is development, design, construction and maintenance of websites and also apps.
Let’s learn more about their characteristic.

 

What’s the front-end?

The front-end of the website is what the user sees and directly interacts with. Do you remember the screen would move or the button would change the colour with your hover when you visit some website? In addition to that, you know about blogs. Blogs usually have a sign out function included, and they run in your browser. Anything that you can see happening is the front-end.

Main languages which are used in front-end

HTMLCSS(Sass)JavaScriptJQueryPHP(※with CMS)

Common frame works which are used in front-end

BootstrapAngularJSReactJS etc…

 

What’s the back-end?

The back-end is a system which moves behind the browser, just like the name. Usually, we can’t see how they are moving. For example, we can feel the flow when we purchase something we want on the website, but there is more movement happening in the back-end than you can see. It happens in Web serever, and the box housing the products information, we call that the database.

Common languages which are used in front-end

PHPpysonRuby etc…

There are a ton of languages for back-end, so I wrote just a part of it. However, I think you can remember PHP and HTML can be learned with comparative ease and are often used together.

Differences between the front-end and the back-end

Let’s see the example that I mentioned above.
First, we are able to see database information when we access the archive page of products. And then, after you chose particular products, there will be information displayed which associated those such as word of mouth, price, etc. When you click the transmission button, your registration information in the database will be associated with that.

Moreover, I’ll give you another example. Please imagine a vending machine. You’d select the drink from among several them, after that push button and insert coin. Then the arm moves in inside, and take out the real product, it would appear your step. If it was the website, the product sample you can see and button motion are would be the front-end, The arm’s movement you can’t see or the real products which are inside are the back-end.

What’s happening?

The web server detects the action which happens in the browser (the front-end), and after processing database information, they are returned to the browser.
the front end might be inseparable from the back end. The reverse is also true. (except static website)

Which is more difficult?

I won’t say exactly which is more difficult because they are totally different. However, the language which is used on the back-end has more complicated grammarin general. Besides, the back-end engineer has to test over and over again to solve the bugs. It means they need a long time to complete the project.
On the other hand, the front-end engineer is needed to know how to design and adapt to multiple devices. Not only the view but also how they lead the user to the destination. Leading user to goal is the most important thing in the front end.

Therefore, if you want to be a web engineer, then you would have to consider which suits you more.

In short

Front-end engineer

Main Job

… Create the part of a website that users can see.

Strong field

… cording (manage JS also CMS) and design.

Language you need

… You have to learn at least what I mentioned above. However, it is more simple to learn than the back end’s language.

Back-end engineer

Main Job

… To manage Web server and also the database.(inculded the development)

Strong field

… Programming and to construct the database design.

Language you need

… It depends on each project, so more important thing is pursuing your field than to know shallow and wide.

How did you like it?
Though I mentioned roughly the difference those two, I’d like to write about more specific field each of them at next time if I have an opportunity.

Achi

]]>
https://achiweb.com/271/feed/ 0