• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
seegatesite header

Seegatesite.com

Seegatesite.com - Programming Tutorial , Sharing , How and Learn Together

  • TOOLS
    • Bootstrap Navbar Online Generator
    • Customize Sidebar Menu Bootstrap 3
    • Bootstrap Demo
  • ADVERTISE
  • CATEGORIES
    • Android
    • Blogging Tips
    • Database
    • CSS
    • Info Gadget
    • Javascript
    • Linux
    • PHP
    • Various
    • WordPress
  • Q&A
  • PHP
  • JAVASCRIPT
  • JQUERY
  • ANGULAR
  • WORDPRESS
  • SEO
  • REACT
🏠 » Javascript » Basic Introduction Javascript for Beginners

Basic Introduction Javascript for Beginners

By Sigit Prasetya Nugroho ∙ June 6, 2019 ∙ Javascript ∙ Leave a Comment

Share : TwitterFacebookTelegramWhatsapp

Javascript study guide for beginners. In this internet era, Javascript is a programming language that we must understand. If you have heard programming like NodeJs, Angular, React, Vue is Javascript. So, if you have mastered Javascript, developing applications using the framework is not difficult.

Basic Tutorial Javascript For Dummy Or Beginners Min

Table of Contents

  • 1 What is Javascript
  • 2 History of Javascript
  • 3 Advantages and Disadvantages of JavaScript
    • 3.1 Advantages of Javascript
    • 3.2 Lack of Javascript
  • 4 Supporting tool for Learning Javascript
    • 4.1 How to Detect errors in Javascript programming.
  • 5 Creating the First Javascript Application
    • 5.1 Create a hello world
    • 5.2 How to Write a Javascript Code in HTML
  • 6 Conclusion

What is Javascript

“JavaScript is a very mature programming language and can be collaborated with HTML documents and used to create interactive websites,” developer.mozilla.org.

The primary purpose of Javascript is to make web pages more interactive and informative. Currently, Javascript not only used on the client side, but javascript is also used on servers, desktop applications, mobile, IoT.

We can do many things with Javascript such as interacting with HTML elements, making responses when doing activities with web elements, creating games, creating 2D and 3D animations, interacting with databases and more.

Related Articles :

  • Firebase CRUD – JQuery Tutorial For Beginners

Learning javascript won’t be perfect if you don’t understand history. Check out the following brief Javascript history so that you are more enthusiastic about learning this programming.

History of Javascript

Brandan Eich created Javascript from Netscape in September 1995. Before it was called Javascript, this programming language was called Mocha, then changed its name to Mona, Livescript and finally officially carried the Javascript name. The initial version of Javascript is only limited to Netscape. The functionality offered is also limited. However, JavaScript continues to be developed by the developer community so that it becomes a broad programming language and used by all browsers.

JavaScript was officially referred to as ECMAScript in 1996, where ECMAScript 2 was launched in 1998, and ECMAScript 3 was introduced in 1999. The ECMAScript was developed to become JavaScript finally. Not only cross-browser, but JavaScript can be used on various devices like mobile devices and computers.

Now, JavaScript has continued to grow and develop. Moreover, JavaScript has switched from a limited and ‘primitive’ programming language to one of the essential components for web developers.

Advantages and Disadvantages of JavaScript

Every programming language has more and less value. Actually, the main thing is not the excess and lack of a programming language, but how we understand and apply a programming language properly.

Read More: Create Simple CRUD with Datatables, Jquery and AdminLTE

Javascript has several advantages that I summarize from various sources:

Advantages of Javascript

  • Does not require a compiler because a web browser automatically interprets it with HTML.
  • Easy to learn.
  • JS can be used in many browsers and platforms.
  • Making web pages more informative.
  • Easy to find plugins or additional components to speed up application development.
  • Many tutorials have been shared free of charge

If Javascript have advantages, of course, Javascript also has some disadvantages that we need to know.

Lack of Javascript

  • High risk of exploitation.
  • Can be used to activate the malicious code on the user’s computer.
  • Can be rendered differently on each device which causes inconsistencies.

Supporting tool for Learning Javascript

Of course, every programming language requires combat tool. What are the tools that must be prepared for learning Javascript?

  • Web Browsers (Google Chrome, Mozilla Firefox, Opera, etc.)
  • Text Editor (Sublimetext, VS Code, Atom, notepad ++)

How to Detect errors in Javascript programming.

If you develop a javascript application with only a text editor, how do you check the Javascript error message?

Every browser has a console that aims to check for errors that occur on web pages. For example, Chrome by pressing the F12 key or right-clicking on the browser and selecting the Inspect Element menu display the console window. See the picture below.

Console Browser To Debuging Or Tracking Error Javascript Code Min

Console window function in the browser

  • Used for test the Javascript code.
  • Used to see error messages when debugging Javascript programs.

Already familiar with Javascript? Before going to the next stage, I make sure you already understand what HTML is? Because HTML is closely related to Javascript.

Creating the First Javascript Application

Create a hello world

Until this stage, at least you have mastered Javascript supporting tools, the next step we make the first program using Javascript.

Open your favorite text editor, and copy the following code:

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<script type="text/javascript">
console.log("Hello World");
</script>
</body>
</html>

Save the code above with the name index1.html and run it on your favorite browser. Don’t forget to press F12 to see the console window to display the word “Hello World” in the console window.

Tutorial Javascript For Dummies Hello World Min

To display on a web page, we can add the following code under console.log().

1
document.write("Hello World");

From the code snippet above we already know two functions, document.write() and console.log(). We will often use both of these functions for basic Javascript learning.

How to Write a Javascript Code in HTML

In the example above, we have written javascript code in HTML.

There are still some more ways that we need to know:

  • Embed (Javascript code pasted directly on HTML)

In this way, we use the  tag to paste the Javascript code in HTML. We have done this method when displaying “hello world” above

  • Inline (Javascript code written in HTML attributes)

In this way, we write the javascript code in the HTML attribute. This method is usually used to call a function for a particular event.

For example: click event.
Onclick Javascript Alert
A brief description:

In the onClick attribute, we write the Javascript function there.

The onClick attribute is an HTML attribute to declare a function that will be executed when the element clicked.

In the example above, we run the alert() function. Alert() is a function for displaying dialogs.

Because we want to call the javascript code there, then we change the link address to javascript: then followed by the function to be called.

  • External (Javascript code is written separately from HTML file)

In this way, we write the javascript code separately with the HTML file.

We create two files, namely: HTML and Javascript files.

1
2
3
tutorial-js/
├── hello-world.js
└── index2.html

The contents of the hello-world.js file:

1
alert("Hello World from External!");

Fill in the index2.html file:

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>
    </head>
    <body>
        <h1>Javascript for dummies</h1>
        <!--Insert external js code -->
        <script src="hello-world.js"></script>
    </body>
</html>

Run on the browser and the results as shown below

How To Write Javascript Code In External File Min

Conclusion

  1. Javascript makes web pages more interactive and informative.
  2. Javascript is easy to learn and implement
  3. We know 3 basic javascript functions console.log(), alert(), document.write().
  4. Writing javascript code is very flexible, it can be done in 3 ways embed, inline and external

Until this stage, we already know the essential introduction to Javascript. Then we will study variables, data types, operators and much more.

Other article: Tutorial Simple CRUD Angular 5 And Lumen 5.6 For Beginners

So the Basic Tutorial Javascript for Beginners, hopefully useful.

Next : Understanding Variables And Data Types in Javascript for Beginners

 

 

Another Javascript Related Post :

  • React-Table Not Updating or Refreshing Data, The Solution ?
  • How To Custom React Datepicker In Bootstrap
  • Tutorial Create Simple POS Using ReactJS And Laravel Lumen Part 1
  • Adept Using Datatables Plugin In 10 Minutes For Beginners (Tutorial)
  • The Using Of Reactstrap And React-Table, Suitable For Beginners
  • Tutorial Create Simple Block UI Using React JS

Avatar for Sigit Prasetya Nugroho

About Sigit Prasetya Nugroho

This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Welcome to my Home,

Avatar for Sigit Prasetya NugrohoThis site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.



Popular Articles

Checked checkbox AdminLTE Bootstrap in Jquery

November 4, 2014 By Sigit Prasetya Nugroho 7 Comments

Simple create date format validation with jqueryUI

December 21, 2014 By Sigit Prasetya Nugroho Leave a Comment

Create Simple Progress Bar for Fake Online Generator with Jquery

January 10, 2015 By Sigit Prasetya Nugroho Leave a Comment

22+ Coolest Free Jquery Plugin For Premium Theme

October 3, 2015 By Sigit Prasetya Nugroho Leave a Comment

Easy Build Your Anti Copy Paste Plugin

October 6, 2015 By Sigit Prasetya Nugroho Leave a Comment

Popular Tags

adminlte (15) adsense (13) adsense tips (4) affiliate amazon (13) amazon (12) Android (8) angular (16) angular 4 (12) angular 5 (4) asin grabber (3) Bootstrap (27) codeigniter (5) create wordpress theme (5) crud (8) css (6) free wordpress theme (7) google adsense (4) imacros (4) increase traffic (6) jquery (34) laravel (10) laravel 5 (5) learn android (5) lumen api (4) modal dialog (5) mysql (6) nodeJs (4) optimize seo (4) pdo (6) php (30) plugin (53) pos (8) Publisher Tips (5) react (6) Reactjs (9) SEO (37) theme (17) tutorial angular (5) tutorial angular 4 (6) tutorial javascript (10) tutorial javascript beginners (4) twitter (3) wordpress (18) wordpress plugin (13) XMLRPC (5)




  • About
  • Contact Us
  • Disclaimer
  • Privacy Policy
  • Terms and Conditions

©2022 Seegatesite.com