DEV Community: Dzun N

[Boost]

Dzun N — Sun, 09 Feb 2025 13:49:10 +0000

Why I Decided to Stop Working with React.js in 2025

Leon Martin ・ Jan 7

JavaScript Chapter 9 - Displaying the Date with JavaScript

Dzun N — Tue, 01 Jun 2021 07:50:43 +0000

In addition to PHP, with javascript we can also display the date. We can display dates in various formats. It can display days, minutes, seconds, months, years and more. Okay, let's just go into the discussion of this tutorial.

DISPLAY DATE WITH JAVASCRIPT
There is a special function provided in javascript to display the date. That is we can use the Date() function. By using this Date () function we can display the date. And to set the date format displayed, you can adjust it by giving/filling the date format as you wish in the Date() function parameter.
Friends need to pay attention. As we discussed in the previous javascript tutorial, javascript is case sensitive, which means writing javascript is very influential about the case size. So to make a date, my friend must write the date function correctly, namely the letter "D" must be a capital letter.

Incorrect Example> date()
True Example> Date() So if you write the Date() function using all lowercase letters, the results will not appear. So it must begin with a capital letter at the beginning, in accordance with the provisions of writing the date function.

EXAMPLE OF DISPLAYING DATE WITH JAVASCRIPT

Okay, it doesn't take long, I will give an example of using the Date() function in javascript

Pada contoh ini, saya memasukkan fungsi date ke dalam variabel tanggal dan kemudian menampilkannya

 var tanggal = new Date();

document.getElementById("hasil").innerHTML = tanggal;

and the result

CONCLUSION

In conclusion To display the date in javascript we must use the Date() function and write Date() must begin with a capital D (Large) . When you enter the Date() function starting with lowercase letters, the function will not display an alias Error. But the example above is a very simple date creation, friend, you can give a css style so that the date looks more beautiful.

JavaScript Chapter 8 - Creating Number Input Using JavaScript

Dzun N — Sat, 29 May 2021 07:09:54 +0000

Welcome back again, In this JavaScript tutorial, we will discuss how to create an input form that only allows inputting numbers that can be typed into this form. If the user types a letter or other character, it will not work or what is input will not work or what is inputted will not appear on the input form. So the form we are going to create is a form that only accommodates numbers. Henceforth, friends can listen to the tutorial on how to make input only numbers using the following javascript.

Making Input Only Numbers with Javascript

Sometimes in creating an application or website, we are required to create an input form that only allows inputting numbers. This aims to minimize errors in an application that we make. For how to make number validation using javascript, friends, please pay attention to the following explanation.

Make an html or php file up to your themes. Here I provide a file with number.html where in this file we will validate numbers or make validation just numbers with javascript. First, we will create a form, friends.

Try friends, pay attention to the example syntax for creating a number input form above. First we first create a regular form.

<input type="text" onkeypress="return hanyaAngka(event)">

But in this form we give an onkeypress event. To make an action when this form is typed or inputted. So when typing occurs in this form, the function is run only().

onkeypress="return hanyaAngka(event)"

Also returns the value of this function.
Furthermore, friends, pay attention to the function only().

function hanyaAngka(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))

    return false;
    return true;
}

Here we check if what is inputted is a number, it will return true in the form.

if (charCode > 31 && (charCode < 48 || charCode > 57))

Now try running it in a browser.

Only numbers can be input.

How to make the maximum number of digits entered?

To make the maximum number entered, you just need to add the maxlength attribute to the form element. example.

<input type="text" maxlength="2" onkeypress="return hanyaAngka(event)"/>

well, in the example above it means that we only allow 2 digit numbers to be input. Furthermore, you will not be able to type again on the form.

Conclusion

Okay friends, that's enough for the tutorial, hopefully it's useful for your themes, if you have trouble, you can ask by filling in the comments column.

JavaScript Chapter 7 - Events in JavaScript

Dzun N — Fri, 28 May 2021 05:05:15 +0000

Hello friends 👋👋. See you again at the basic JavaScript tutorial. This time according to the title, we will discuss events in JavaScript, just go to the material.

INTRODUCTION AND UNDERSTANDING JAVASCRIPT

Hello friends. This time, according to the title, we will discuss Events in Javascript. Do you know what an event is? An event is something the user does that triggers the nets of code. Surely my friend is still confused by this understanding. I will explain again bye, Suppose we have a button on a website or application that we build. And we want to give an action when the button is clicked. So the event here is an "event". For example, when the button is clicked it will display a sentence. So the event is a click. The following events are contained in javascript.

Kinds of Events in Javascript

onclick = event when an html element is clicked
onchange = event when an html element changes
onmouseover = event if an html element is placed the mouse cursor
onmouseout = event if when the mouse cursor leaves the html element
onkeydown = is an event if when an HTML element occurs
onload = event when the element or page is loaded Well, we will discuss some of the Javascript events described above.

HOW TO MAKE A JAVASCRIPT EVENT

To create an event with javascript, we can add attributes with the event names above, to the html element that we want to give an event for example.

EXAMPLE EVENT ON JAVASCRIPT

For example I will create a click event on a button. So I want to display a sentence when the button is clicked:

Try my friend, pay attention to the example above, there is a button that we give when the event is clicked.

<button onclick="show_name()">Click here</button>

When this button is clicked it will run the show_name() function. So then we create a function name show.

function tampil_nama(){dicument.getElementByid("hasil").innerHTML = "<h3>Nama Saya Dzun</h3>";}

The content of the function show_name() is to display the sentence "My name is Yogi" in the result id element.

Look at the following picture.

After clicking the "button" it will appear under the "My name is Dzun" button.

CONCLUSION

In conclusion, there are 6 events in javascript and the one I example above is the onclick event. So when we click the button, the contents of the function will appear more or less like that and you can develop it yourself according to your creativity. So, until this article on learning Javascript, Thank you

JavaScript Chapter 6 - Creating JavaScript Functions

Dzun N — Fri, 28 May 2021 04:31:59 +0000

In this chapter 6 basic javascript learning tutorial we will continue our discussion of the basic tutorial. Previously we have discussed about other basic javascript tutorials from chapter 1 to chapter 5. in this tutorial to learn basic javascript chapter 6 we will discuss about "Creating Functions in JavaScript".

What is a function? maybe some of my friends still don't know the meaning of a function, so I will review a little about the meaning of function

DEFINITION OF FUNCTION IN JAVASCRIPT

A function is a facility in every programming to create a command whose function we can use repeatedly indefinitely. As long as the page is still connected to the function in question.

CREATE A FUNCTION IN JAVASCRIPT

To create functions in javascript, there are several things that must be understood first. Namely about writing functions in javascript. The following is an example of a function writing format in javascript.

<script> 
/Create Javascript function
function name _function(){ 
// the contents of the function are made here
} 
</script>

As we have seen in the example above. To create a function the writing must be preceded by a syntax function then followed by the name of the function to be created. And the contents of the function are written in curly braces "{}". Here is a simple example of using a javascript function.

Consider the example above

function tampilkan_nama(){ 
return "Nurroin's Blog" }

We create a function named "showname ()" which contains the command to return the string "Script Kiddies". So when the show_name () function is called, the result is 'Nurroin's Blog'

CONCLUSION

That's how to create a function in javascript, in essence, we have to create a function first, then the name of the function and the contents of the function are located in curly brackets (). And we just call the function and in the example above I print the function display name using document.getElementById

JavaScript Chapter 5 - Understanding Data Types in JavaScript

Dzun N — Fri, 21 May 2021 00:17:54 +0000

See you again in the basic javascript tutorial. In this tutorial, we are still discussing the basics of javascript. according to the title of this tutorial "Knowing the Data Types in JavaScript". So we will discuss what data types in javascript, how to use them and as it relates to data types in javascript. Just go straight to the material.

KNOWING JAVASCRIPT DATA TYPE

We start by getting to know javascript data types. Javascript has 5 data types that each have their uses and functions. Following are the data types in javascript

String
Number
Boolean
Array
Object

JAVASCRIPT STRING DATA TYPE

In my opinion, the Type Data String plays an important role. Without the string data type we cannot define one variable by another. A string data type stores a string of characters such as "I'm Learning Javascript". A string can be text within two quotes (") or one ('). Zero-based string index: The first character is in position 0, the second in 1, etc. The following is an example of using the javascript string data type.

We can see in the example above that we create a string data type and display it in the <p> tag along with the results.

DATA TYPE NUMBER JAVASCRIPT

Data Type Number is a data type that is in the form of integers. Examples are 1,2,3,4,5,6,7,8,9,0 ..... etc. The following is an example of using the javascript data type.

As we can see in the example above, our data number type does not require quotation marks (') and does not need to be filled with variables. And when we run it on a web browser, the results are as follows

JAVASCRIPT OBJECT DATA TYPE

A Boolean data type is a data type that has only two values, namely true (True) or false (False). The boolean data type is often used to create the flow of program logic. Logical structures, such as if, else, while, and do while, require boolean values to "control" the flow of the program. Maybe my friend will find a value like the following

YES / NO
ON / OFF
TRUE / FALSE But Booleans only have True or False values. Here is a simple example of using the Boolean data type in javascript.

So we're going to make a check. When we click the button, we will check whether the created variable is true or false. Because we enter 10> 9 then the output will be True. If we make 10 <9 then the output is false

JAVASCRIPT ARRAY DATA TYPE

Array data type is a data type that can store several values in one variable. And the values in these variables are numbered according to their sequence. The first element in the array is 0, the second is 1 and so on. To make it easier for us to call or display an array, consider the following example:

Pay attention to the data type example above. There is an array data type in the animal variable

var hewan = ["Kambing", "Macan", "Kucing"];

In the animal array variable, there are data of Kambing, Macan, Cats. It means that the denominator for Kambing is [0], Macan [1], Kucing [2]. The numbers start at 0. And to access / display are as follows

hewan[1]

This means that we select the array data in the 1st order animal variable. And it will display the animal because the animal is the 1st order, more details are as follows:

0 = Kambing
1 = Macan
2 = Kucing

I also added the sentence "Display 2nd element" as we can see above and we can add plus (+) to combine the html element and the variables.

JAVASCRIPT OBJECT DATA TYPE

The object data type contains a lot of data in a variable. Have their respective names and values. Like the following example.

Here there is an object data type

//Tpe data object    var manusia = {         nama : "Yogi",         alamat : "Madiun",         umur : 17,         status : "lajang",      };

name, alamat, umur, status are data names. And Yogi, Madiun, 17, single is the value. To access the data write down the variable, and then follow it by the name of the data. For example, I want to write down the name data and the writing is human. Name, it will be displayed Yogi. And when we run the script above in a web browser, the results are as follows

CONCLUSION

Those are the types of data types in javascript, there are 5 data types, namely String, Number, Boolean, Array, Object which have their respective functions as I have explained above. If you have any questions, please comment below and I'll be happy to reply ^ _ ^

Javascript Chapter 4 - Arithmetic Operators in JavaScript

Dzun N — Tue, 18 May 2021 02:00:36 +0000

Arithmetic operators in JavaScript are very necessary when we create applications that require logic that requires us to make calculations, whether it is a small number of calculations or a very large number of computations. Therefore I will discuss about "Arithmetic Operators in JavaScript".

Arithmetic / math operators are used to assign values, compare values, perform arithmetic operations, and much more. Arithmetic operators are indispensable when we create applications that require calculation logic. Whether it's a small number or a large number of calculations. And in this tutorial, I will discuss what Arithmetic operators are
Before learning further about javascript arithmetic operators, we will discuss what operators are available in javascript that we can use to create calculation applications using javascript.

Here are the operators that we can use to create arithmetic operators

Operator	Description
+	Addition
:-----:	:-----:
-	Subtraction
*	Multiplication
**	Exponentiation (ES2016)
/	Division
%	Modulus (Remainder)
++	Increment
--	Decrement

HOW TO MAKE ARITHMATIC CALCULATIONS WITH JAVASCRIP

The following is an example of writing to create a javascript arithmetic operator

In the example above, we made an example of making addition arithmetic operators. By creating two variables and filling in the values of each of these variables, namely variables numbers1 and numbers, where variable1 I fill in the value 5 and variable numbers I fill in the value 8. Then to add them we just need to add the number operator as follows:

document.getElementById('penjumlahan').innerHTML = penjumlahan;

At this point, the summation variable already contains the value of number1 + number2, namely 5 + 8. Then we display the results on the element with the id of addition. And when we try to run it in a web browser, the results are as follows

CONCLUSION

Javascript has several arithmetic operators including addition (+), subtraction (-), multiplication (*), division (/), modulus (%), increment (++), decrement (-) which we can use to make an operation mathematics and one of the examples we can apply is by making a calculator with javascript

Javascript Chapter 3 - Knowing Variables in JavaScript

Dzun N — Mon, 17 May 2021 01:34:44 +0000

Not only in PHP we can find variables called variables, but also JavaScript has variables. The use of variables in javascript is the same as the use of variables in other programming languages. Namely for temporary data storage.

HOW TO WRITE VARIABLES JAVASCRIPT

What must be considered in writing javascript is, all writing variables in javascript must not contain spaces, must pay attention to writing upper and lowercase letters. For more details, consider the following points.

An important point in writing javascript variables

Writing variable names can use letters, numbers, underscores, and dollar signs
Writing variable names must begin with a letter
Writing javascript variable names must pay attention to uppercase (case sensitive)
Variable names cannot contain spaces
Writing javascript variables begins with the syntax "var"

HOW TO MAKE A JAVASCRIPT VARIABLES

Well, first we prepare the html file, here I named it index.html

As we saw in the syntax above. I created two variables which I named "nama" and "alamat". Don't forget to put a semicolon or semicolon (;) at the end of the variable line as this is a definition of javascript.

var nama = "Nurroin's Blog";
var alamat = "Probolinggo";

And then I output the contents of the variable into the nama and alamat elements

document.getElementById("nama").innerHTML = nama;
document.getElementById("alamat").innerHTML = alamat;

Note : document.getElementById() useful for specifying element by id in accordance with the function parameter. innerHTML to implement HTML syntax.

CONCLUSION

Variant is a place to store temporary data and the contents of this variable can be retrieved. There are several important points that we should know when using variables in javascript. That is case sensitive, we must pay attention to the upper and lower case letters that we make, we must not precede variable names with letters, etc. as I explained above.

JavaScript Chapter 2 - Writing And Using Javascript

Dzun N — Sat, 15 May 2021 08:58:54 +0000

Welcome to the basic javascript tutorial. This is a javascript tutorial chapter 2, where in part 1 we discussed understanding and introducing javascript. So that it is not crisp, just enter the material.

HOW TO WRITE JAVASCRIPT

We start with writing good and correct javascript syntax. And as for the basic knowledge of javascript that we must master.

Saved with the .js extension
The javascript syntax that is inserted in the HTML page is written in the <script> tag
JavaScript syntax can be placed in the <head> or <body> tag
Element Javascript is case sensitive
At the end of each line is closed with a semicolon.

JavaScript syntax can be used in 2 ways. Namely by inserting it on the HTML page directly, and another by saving the javascript file with the .js extension and then including it on the HTML page. To be more specific, we will discuss one by one.

USING JAVASCRIPT INTERNAL

Writing javascript internally is by directly inserting javascript syntax in HTML. If you use this method, you have to put the javascript syntax between the opening <script> tag and the closing </script> tag. And put it in the

tag, and it could also be in the <body> tag. For example, create an HTML file to find out how javascript works / writes internally. It can be an html file or a php file. Because javascript is able to run between the two. Here I just created an html file as an example. Create an html file with an .html extension here I use the name belajar1.html

Look at the example above. there is a div element which we give the id "name". Then we give it a touch of Javascript with the following command

document.getElementById("nama").innerHTML = "Nama Saya Dzun";

Document is a mandatory syntax in javascript, and the getElementById function functions to order an element that has an id that matches the content in the getElementById parameter itself. Writing big and small must be considered. Because Javascript is case sensitive and innerHTML functions to write HTML. So in full we are calling for writing "My name is Dzun" in the element with the id "name". If run in a web browser the results are as follows:

In writing JavaScript it can also be done externally, meaning that the script from JavaScript is written on another page from Index.html as in writing CSS. example:

So the syntax of Javascript is called by:

<script type="text/javascript" src="javascript.js"></script>

And the result is the same as before.

CONCLUSION
We can use 2 methods of writing Javascript, namely internal and external. Internal method, namely by placing the Javascript script in the html file. The External method is by creating our own javascript file and connecting the html file with javascript

JavaScript Chapter 1 - Understanding and Introduction of JavaScript

Dzun N — Wed, 12 May 2021 11:16:43 +0000

In this tutorial, I will explain about the basics of JavaScript.

Definition

JavaScript is a programming language that is useful for making interactions on websites. So that the website looks more alive. For example, create effects on the website. JavaScript has become one of the mandatory programming languages and must be mastered to create a modern website. JavaScript is a requirement and programming language that must be mastered. Especially for those of you who will specialize in the web design section. The several programming languages that a web developer must master are:

HTML: In building a website, HTML acts as a form creation.
CSS: In building a website, CSS has a role as a benthic design, color, writing and so on.
JavaScript: In building a website, JavaScript is useful for creating features and effects that make website pages more interactive.

BACKGROUND

In today's developing world of websites, javascript is a programming language that is needed. Many websites use javascript to create dialog modal, form validation, games, ajax calculation operations and so on. So we must master this javascript so that the website we create is more alive
Examples of websites that use javascript to make their website more interactive are Google, Facebook, Twitter and others. One of the uses of javascript on Facebook is that Facebook has a chat box feature that we can close and open. The chat form can be opened and closed because it uses javascript assistance. Then if you buy a plane ticket through the airline ticket provider website. after you select the current city and select the destination city, the airline will appear without reloading the page. Those are some examples of using Javascript

Purpose and Objectives

Javascript is a programming language that must be mastered by web developers because javascript has features that are not shared by other programming languages. So those of us who want to become web developers are obliged to learn this javascript so that the website we create will have a lively or interactive impression.
WHAT CAN JAVASCRIPT DO? To further emphasize understanding of javascript, the following will explain what javascript can do :

Javascript dapat mengganti atribut HTML
Javascript dapat mengganti style CSS
Javascript dapat membuat form validasi
Javascript dapat membuat sebuah game sederhana
Javascript memiliki fitur animasi yang lebih lengkap dan bagus daripada bahasa pemrograman lainya

And there is much more that javascript can do which we will discuss in this Javascript Tutorial topic.

KESIMPULAN

With this javascript, we can make our website look more lively or interactive. Even though the javascript language is a bit difficult to understand, this programming language has a big role to play in making an interactive website but in my opinion it is not obligatory to add this programming language to your website, but to make it more interactive I suggest adding this programming language.

These 5 game 🎮 engines don't require coding to make games 🕹

Dzun N — Tue, 11 May 2021 11:23:28 +0000

Coding is a term for a programmer who is compiling a programming language so that it can run as desired. In the video game industry, apart from animators and story writers, programmers are people who have major services in making video games. Because without a game programmer it might not work as you wish and there are lots of bugs and glitches.

But to be able to do programming you have to sacrifice a lot of your time to learn it. Because even those who are professionals still make many mistakes in programming. Well, for that this time ApkVenue will provide a list of 5 game engines that don't require coding to make them, so you don't have to have trouble making games.

These 5 game 🎮 engines don't require coding to make games 🕹

1. Gamemaker Studio

Gamemaker Studio is a game engine with a fairly active community base and already has its own store like Steam. This engine uses a drag and drop feature to make it easier for anyone who has never done coding to create a game. This engine tutorial is available quite a lot on YouTube and an example of a game made with this engine is Undertale which is the Game Of The Year in 2015.

2. Construct 2

Just like the Gamemaker Studio engine, this engine also uses a drag and drop feature that you can use to compile the scripting code that has been provided so that you are no longer busy with coding activities that will make your head dizzy. This engine itself is more for games that have pixel art graphics in the style of retro games.

3. BuildBox

BuildBox is a game engine that has given birth to many famous arcade games available on the Play Store, such as Color Switch. This engine only supports 2D graphic game creation using voxel art. This engine is perfect for those of you who want to make fun arcade games like the games made by Ketchapp easily, because the UI on the engine looks friendly to non-programmers and uses the drag and drop feature.

4. Stencyl

Stencyl is a special 2D game engine that also has features that are almost the same as other non-coding engines, the only difference is that the UI is different and your experience using this engine, this engine itself is less attractive because it is less competitive with other game engines, but this engine is also great if you want to give it a try.

5. Unreal Engine 4

Unreal Engine 4 is an AAA game engine that has spawned many big names such as Borderlans 2, Gears Of War 4, Injustice 2. This engine itself is well known for its engine performance that can render very beautiful graphics. Basically, this engine requires c ++ language, which is certainly difficult to learn, but you can use the blueprint method which is almost the same as the drag and drop method which tells it to compile the code provided to be arranged according to the algorithm you want.

So, those are 5 game engines that don't require coding to make them. So, are you now interested in making a game? So, there's no more reason to say "not good at coding" when you want to make a game. Besides getting profit in making games you can also make Indonesia proud too, you know! So let's make a game. 😃🙏✊

If you guys has some others game engine, just tell us in the comment below.

Keep Save your money 💵, and Let's get a 👑 Premium Courses for free as a 👩‍🎓👨‍🎓 university student

Dzun N — Sun, 09 May 2021 22:33:08 +0000

As student, we would pay out for getting premium courses to get study out of school. But how about you have access to many courses/resources for free that others have to pay for. It's a great opportunity to gain some edge, learn tools that are highly in demand while not spending any money.

The greatest package, you can access as a student is GitHub Student Developer Pack.

GitHub Student Developer Pack

How do I register it ?

You don't have to bother about it. If you have an academic email address Github recognize, access is granted immediately. Besides great deals on learning platform, you also get a bunch of other great deals. So check that out!

Frontend Masters

The best deal in the GitHub student package is definitely 6 months of free access to Frontend Masters. It is worth between 200-250 USD and the content there is just awesome. If you wanna step up your web development skills, this is the platform you should use.

Data Camp

If you are more interested in the world of data, you can get 3 months access to Data Camp. There you can learn Python, SQL, or R and really get a good grasp of advanced concepts. This content is worth 75 USD

Educative.io

Another great platform with several famous courses that might help you land a dream job. Their System Design course is highly popular and you can get 3 months for free worth over 100 USD

next.tech

Next Tech provides cloud computing environments that are accessible from the browser ― no downloads required. Students around the world use Next Tech so they don't have to install software themselves when they work on a programming project. This lets them focus on the coding and not on the annoying software set up!

One Month

One Month's online coding courses teach you exactly what you need to learn to code quickly. Learn Python, HTML, JavaScript and more in just 30 days.

Over 120,000 students have used One Month's computer programming courses to launch their side hustles, level up their careers, and build things they couldn’t even imagine before. Our online coding bootcamps include certification, human support, and the change to create real-world projects that you can use for applying to jobs or attracting new clients.

We invite all Github Student Developer Pack members to enjoy One Month’s online coding courses free for 30-days.

Interview Cake

Students get access to our full coding interview prep course for 3 weeks FREE. Get ready to ace your coding interview with practice questions, tutorials, and data structures and algorithms review.

Go Rails

Tutorials for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. GoRails for GitHub Students 12 months of free access to GoRails for students

enrolled in the GitHub Student Developer Pack.