Basic JavaScript tutorial

Basic JavaScript tutorial -Guide for Beginners

Basic JavaScript tutorial is purposely for beginners, People who are looking forward to starting javascript development. First, let start by defining what is JavaScript, It’s an object programming language that is used with HTML to create interactive websites.

What do i mean when i say Interactive websites?.They are interactive because they can respond to user actions,change elements in a html page without having to reload the whole page.

 Basic JavaScript tutorial

Let look into some of the JavaScript characteristics.

  • No interpreter or Compiler required to run JavaScript code-All browsers support JavaScript.You will not need to install any third party software to run it.
  • Easy to learn-Its easy to learn JavaScript compared to other object-oriented programming languages like Java and C++. There are no strict rules when coding in JavaScript that means that we can execute any code and figure out the results afterward.
  • Its Interpreted Language this makes it possible to run on any platform.
  • Makes web pages Interactive-We use javascript to perform user actions like changing images, creating popups and events.
  • Javascript also comes with rich frameworks like Angular.js,Node.js BackBone.js  and each has it own uses.
  • Used to add Visual Effects and Animations.

Read more about JavaScript Characteristics

What can JavaScript do

Below are some of the tasks that Javascript can perform.

1.Changing HTML content with JavaScript.

We can use javascript method getElementById()  and change it .Run below code.

Note that JavaScript accepts both single and double quotes

2.Modifying HTML CSS styles with JavaScript

We can use JavaScript to change Html CSS styles


3.Hiding HTML Elements  with  JavaScript

JavaScript can be used to  hide  HTML Elements that we don’t want them to be displayed. Example code

4.Showing HTML Elements with JavaScript

HTML elements that are not visible can be shown using JavaScript. Example code.

5.Changing HTML Attribute with JavaScript

We can use JavaScript to load and change different images. We accomplish this by changing the source URL of the image. See below example code.

 JavaScript coding tips

There are several basics you should learn if you are JavaScript beginner.

1.Using <script > tag

All JavaScript code should be placed in between these tags<script> JavaScript code</script> tags.Example code

Note that Old JavaScript uses type attribute i.e <script type=”text/javascript”> but with the new JavaScript the attribute is not required.

2.Where to place JavaScript code

An HTML document can have any number of scripts and they can be placed in inside <head>tags or <body>tags. We can also add a Script from an external source.

1.JavaScript Inside <head> tags

The script is placed inside the <head> tags and its called in the body in form of a function when an action is triggered by the user.Below code calls function getDate() which returns current date and time.

2.JavaScript Inside <body> tags

Below example shows code placed inside the <body> tags and called when the button is clicked.

3.Using External JavaScript code

We can use external scripts by importing them to our Html document using src attribute i.e <script src=”scriptname.js”></script>

Example. Write below JavaScript code and save it in a file named getDateFunction.js.

HTML file

We can import the script either inside the <head> or <body> tags.You should also note that the external script should not be inside the <script></script> tags,Just a block of code.

Advantages of using external scripts

Below are advantages of using external scripts:-

  • Helps to Separate JavaScript and HTML.
  • Easy to read and maintain both Script and HTML codes.
  • Helps to speed page loads with cached scripts.
  • Make it easy to import and use scripts in different HTML pages.

Using External Scripts located in a URL

We can use external scripts that are located in the URL by importing them using the domain path. Example.