Hyvor Developer LogoHYVOR DEVELOPER
Tutorials
Subscribe
Getting Started with Javascript
Javascript
Nov 23, 2017 8 mins 242
Advertisement

Getting Started with Javascript

Here we are going to discuss what do you need to know about JAVASCRIPT.

After reading the article you will get an idea about,
What is Javascript?
Simply, Javascript is the "most important programming language" in the world

Why is it so important? If anyone thinking to create a website, it's impossible to do that without javascript. Because, the only client-side programming language supported by all the major browsers is Javascript.

What can Javascript do?

  • Action on button-click
  • Website content updates timely
  • What's the secret behind Web-Maps (Google Maps) ?
  • Art Galleries
  • Online Messaging
  • Online 2D,3D Games
No Secret. It's Javascript! (CSS is used to style, and server-side language to manipulate data)
So, Javascript is a scripting language that can provide dynamic interactivity on websites, such as dynamically updating content, controlling images, videos, sounds, animating the web, real-time-communication and almost everything.
Who is a Javascript (Front-end) Developer?
A developer who has a good knowledge and practice with Javascript is a Javascript Developer

However, Front-end developer is not the same as the Javascript developer. Front-end developer has a wide knowledge on HTML, CSS, JS and more. So, you can't be a front-end developer without knowing Javascript. Simply, It's the heart!

How can I be one of them?

Lots of students/ people who are learning web design has a doubt, Can I be a developer someday? The answer is "Yes, you can". Only thing you need to do is...

Learn well. Practise well. Create your own style. Work on a new idea

Besides those popular methods we prefer you something special

Avoid Javascript libraries and frameworks! They kill your personality as a JS developer. They limit your thinking power. Try to create everything by yourself. We guarantee you'll be an awesome Javascripter in the world. However, while using this methods you'll face lots of problems that are very hard to solve. In that case there are many people to help you. So, be brave. Make forum-friends.

Some Examples :

The question 'how much time it would take' is very hard to answer. It depends on your skills. But, everyone can do it. Just live with Javascript

Start Coding!

There are few requirements to start Javascript coding.

  • Browser - I'm 100% sure that you have a browser. However, check whether your browser is updated to the latest versions.
  • Text Editor - You can even use Notepad to do this. But, we prefer powerful sublime text. Because it makes coding easy.
That's all you need.
Follow the below tutorial correctly. Try to understand each and every word. Practise it again and again. If you get any problem, I have mentioned the options above.

Lets Start!

  • Create new folder and name it javascript
  • Open your text editor save the document as index.html
  • Lets code our first web page with javascript
  • 	
    <html>
    <body>
    
    	<script>
    		alert("Hello World");
    	</script>
    	
    </html>
    </body>
       
    	
    
  • Now re-save the document and open it with your web browser
  • You must see the result! If not, there must be a bug in your code. Debugging is a great skill every developer must have. So, don't worry try again. By the way, you'll learn how to debug in the later chapters
HTML and Javascript

In websites, Javascript is used with HTML and CSS. It's very important to learn how to use Javascript with HTML

We don't cover HTML tutorials here. If you need to learn HTML we prefer w3schools. Also there are many other websites you can learn HTML.

The <script> tag

The <script> tag is used to add Javascript inside HTML

	
<html>
<body>

	

Before the script

<script> // here goes your javascript </script>

After the script

</html> </body>

There are 3 common ways that Javascript can be added to a HTML document

  1. In-line
  2. Internal
  3. External

1. Inline

This is a way to add Javascript code inside html tags
	


   

	
  1. Button tag defines a button
  2. onclick= defines a JS code to run when the user clicks on the button
  3. alert('Hello World') is the javascript code to run. It alerts 'Hello World' in the browser. (You'll learn more about this later)

2. Internal

We have already discussed how to add a script tag internally. Unlike in-line, this scripts can define functions, variables, loops and more.
	

<script>
	alert("Hello World");
</script>

   
	
  1. Script tag tells the browser that this is a internal script. The use of internal scripts are different from in-line scrips. While in-line scripts are used to define something special to the element it is in, these can handle anything all over the web page.
  2. alert('Hello World') does the same as the previous example. But here, the code is executed as soon as the script is loaded.

3. External

If you have lot of javascript code you can save it in separate files and add them to your html file with this trick. Also if you have some javascript code that you need in sevaral html documents, you can use external scripts.
	

<script type="text/javascript" src="/path/to/script.js"></script>
   
   
	
  1. type attribute is a old standard and it's not required now. But, always use it when you add an external script to html, because still there are number of users who are using old browsers.
  2. text/javascript tells that the script's type is text/javascript. "text/javascript" is a MIME type which is not so important to learn and you'll learn them from your practise.
  3. src attribute is the special part when adding external scripts to the document. It defines the path of the script. (It can be either absolute path or relative path)
The End

This article covered the basic about how to start Javascript programming and it's best practices. Hope you enjoyed the tutorial! If you have any problem comment below. If you love the post click the heart icon. To do all first sign up with Hyvor.

Thanks.

Author SupunKavinda