DEV Community: Khoi

Functions in JavaScript for Beginners

Khoi — Sun, 09 Jul 2023 14:12:55 +0000

Functions are one of the most important concepts in JavaScript. They allow you to group together related code, making your code more reusable and easier to understand.

In this blog post, we will learn about the basics of functions in JavaScript. We will cover:

What is a function?
How to define a function
How to pass arguments to a function
How to return values from a function
Function declarations vs. function expressions
Immediately invoked function expressions (IIFEs)

What is a function?

A function is a block of code that is executed when it is called. Functions can be used to perform a variety of tasks, such as:

Calculating a mathematical expression
Validating user input
Formatting text
Making HTTP requests

How to define a function

To define a function in JavaScript, you use the function keyword. The syntax for defining a function is as follows:

functionName is the name of the function.
parameters are the arguments that the function takes.
Body of the function is the code that is executed when the function is called.
return value is the value that the function returns.

How to pass arguments to a function

When you call a function, you can pass it arguments. Arguments are the values that are passed to the function when it is called. The arguments are used by the function to perform its task.

To pass arguments to a function, you list them after the function name, separated by commas. For example:

How to return values from a function

A function can return a value. The value that is returned is the result of the function's execution.

To return a value from a function, you use the return keyword. For example:

Function declarations vs. function expressions

There are two ways to define a function in JavaScript: function declarations and function expressions.

Function declarations are defined using the function keyword. They are executed when the script is loaded.
Function expressions are defined using the function keyword, but they are not executed until they are called. The following code shows an example of a function declaration:

The following code shows an example of a function expression:

Immediately invoked function expressions (IIFEs)

An Immediately Invoked Function Expression (IIFE) is a function expression that is immediately executed when it is defined. IIFEs are often used to encapsulate code that needs to be executed only once, such as code that initializes a global variable.

The following code shows an example of an IIFE:

Conclusion

Functions are a powerful tool that can be used to make your JavaScript code more reusable and easier to understand. In this blog post, we have learned the basics of functions in JavaScript. We have covered function declarations, function expressions, and IIFEs.

Learning about DEV Tools

Khoi — Tue, 27 Jun 2023 01:34:33 +0000

What is DEV Tools:

DEV Tools (developer tools) are tools built into the browser that help programmers easily access the internals of their web browser and application. # Ways to open DEV Tools:
There are three ways to open the Chrome Developer Tools menu:

From the Chrome Menu > More Tools >Developer Tools
Right-click anywhere on a webpage and select Inspect
Use the keyboard shortcut F12 or CTRL + Shift +C

When open DEV Tools it'll look like this:

The DEV Tools will be on your right; this is where you can edit your web without using VS Code.

Learning about string in JS

Khoi — Fri, 16 Jun 2023 08:18:01 +0000

What does string in JavaScript mean?

A string is a sequence of one or more characters that may consist of letters, numbers, or symbols

Example:

let text = "Hello:)))";

In the above code, myString is a variable that holds the value of the string "Hello, World!"
And to show the code to the screen, you will have to code like this:

 <p id="demo"></p>
    <script>
    let text = "Hello:)))";
    document.getElementById("demo").innerHTML = text;
    </script>

your result will be like this:

Let's learn about Flexbox

Khoi — Sun, 28 May 2023 14:23:31 +0000

What is flexbox?

Flexbox is a relatively new way of manipulating elements in CSS, and its debut was revolutionary.

How to create a box and using flexbox:

You can look at the code below

Then it will display on your screen like this (There are some note for you to know what we code will look like):

I found this man on DEV Community show us a picture of some examples about how flexbox work:

Source: https://dev.to/arafat4693/flexbox-justify-content-visual-representation-4c22

I'm trying to find out how to create games on website by myself.

Khoi — Tue, 23 May 2023 03:14:08 +0000

What kind of game i want to make?

The game that i would like to make is this game called Helix Jump

Where i will learn it?

I will go on YouTube and search. Finally i found couples of videos teaches us how to do so:
https://www.youtube.com/watch?v=m2e6RPNY0_E
https://www.youtube.com/watch?v=tiIaOoMfJ5U
https://www.youtube.com/watch?v=CjzgoZnOY_c

Learning JavaScript

Khoi — Sun, 21 May 2023 14:12:14 +0000

Part 1:

Ways to code:

The simplest way to get started is to simply create an HTML file with the JavaScript code inside of it.
The next way is to directly create a JS file.

Simpliest command:

The simpliest command you will learn is console.log("write sth you want here").

'console.log() is the command to print something to the developer console in your browser. You can use this to print the results from any of the following articles and exercises to the console. We encourage you to code along with all of the examples in this and future lessons.'

How to check if you command is doing right?

There's a way you can check it:

1. Install Live Server.

2. Right click on your code, then click Open with Live Server.

3. When it open your browser press F12 and you will see a small window like this:

4. Then click the tag next to it, you will see if your command is right or not: