Basics of JavaScript

Here is a brief introduction to JavaScript as used on the front end.

We’ll cover the following

  • Introduction to JavaScript
    • Java vs JavaScript
    • Why JavaScript?
  • The web browser console
  • Hello World!
  • Linking JavaScript, HTML, and CSS
    • JavaScript code in the HTML file
    • External JavaScript
  • The DOM

Introduction

JavaScript is the net scripting language developed by Netscape. It is the most famous programming language in the world today. The language become standardized to ECMAScript, as a pass-platform Internet preferred for scripting, but it’s miles nonetheless most generally known as JavaScript.

Java vs JavaScript

A lot of humans confuse JavaScript with Java and are below the impression that JavaScript is a ‘script-ier’ version of Java and begin to analyze it. That can not be in addition from the reality; Java is to JavaScript what car is to carpet. They don’t have anything to do with each other.

Why JavaScript?

JavaScript lets in you to put into effect complicated things on net pages; whenever a web web page does more than just display static statistics such as content material updates, interactive maps, and animated 2D/three-D images, JavaScript might be worried. It is the third layer of standard internet technologies, of which (HTML and CSS) we’ve got already covered.

The web browser console

If you have taken a basic programming course, you would know that you can print things on to the terminal. For example, you can use cout << string in C++ to print string. But how do you do this in a JavaScript program since JavaScript runs on browsers? Well, it turns out all browsers have a console that is not displayed by default but can be viewed. If you are on Chrome or Firefox, for example, just hit Cmd+Option+J on Mac or Ctrl+Shift+J on Windows to view the console! You can do something similar on Safari.

Hello World!

Let’s look at a basic hello world program in JavaScript.

console.log("Hello World!"); 

If this were part of the front-end code run on a browser, “Hello World!” would get printed onto the console.

Linking JavaScript, HTML, and CSS

By this point, you must be thinking, “Okay this is great, but how do I actually run JavaScript code on my browser together with HTML and CSS?” Well, there are two ways to do so,

JavaScript code in the HTML file

JavaScript can be written directly into an HTML file using the <script> tag. For example,

HTML

<html>
 <head>
 </head>
 <body>
   <script> console.log("This is JavaScript in an HTML file!") </script>
 </body>
</html>
output

External JavaScript

JavaScript files (files with a ‘.js’ extension) can otherwise be imported into HTML files similar to how CSS files are imported,

<script src="myJSscript.js"></script>

You can place an external script reference in the <head> or the <body>. The imported script will behave as if it was written exactly where the <script> tag is located.

The DOM

Notice how in HTML files, there is one main <HTML> tag, then there are tags within that tag and other tags within those and so on? Well, that HTML structure can be mapped onto a tree. The DOM stores these HTML elements as objects that can then be manipulated in various ways through JavaScript.

That’s it for this chapter! We hope you now have a basic idea of how most websites work on the front-end. In the next chapter, we’ll dive into the basics of website back-end programming!

Also Read – Basics of CSS and https://codingtimes.in/category/javascript/


That’s it!
You have successfully completed the post.

Peace Out!

3 Comments

  1. Ι was pretty pⅼeasеd to discover this site. I need to to tһank you for your time just for this
    fantastic read!! I definitely appreciated еvery part
    of it and I have you saved as a favorite to look at new stᥙff in your
    site.

Leave a Reply

Your email address will not be published.