Introduction - Javascript (Full Course)

In this lesson we will see how to include 

1. Javascript within HTML file

2. How to include external .js file in html file

 

Javascript within HTML file

In visual studio code Emmet plugin is available by default so if you just go to editor press mark and press TAB you will get the default html text.

As you can see in code below on row 11 to 13 we have added script tag and added an alert statement, this is how you can include javascript code within your html file. Just simply put your js code in between <script> </script> tag.

 

Include external Javascript code file into your html file

Now to include external js file, we can write javascript code into an external file

and then include that file using script tag into html file (See row number 11)

How to add comments in javascript code

1. Single line comment : you can use double forward slash (Line 3)

2. Multline comment : You can use forward slash and asterisk (Line 5 to Line 10)

 

 

console.log is your friend

console.log is a very useful function in javascript, you can log something to browser console and it will help you while debugging , rapid prototyping etc. Let's see how it is used.

You can add console.log statement in .js file, Now you can open your browsers console window

Reload the page and you will be able to see console output

 

let's look at some more example of console.log

It will output as following in console

console.table pretty print the object in tabular form on console

here is the console output

 

console.error

If you want to log some error in browser console, you can use console.error function

It will show output in brwser console as follows

You can see error is printed with red text color , (to highlight it as an error) also you can see a app.js:7 text in blue if you click on it you will directly go to javascript source code and see where error actually occur this is very helpful while debugging.

There are few more interesting thing you can do in your console

1. Printing warning : basically almost similar syntax with console error (Row 10 in code below)

2. console.clear function clears whole output from console (Row 9 in code below)

3. timing and profiling your javascript code console.time and console.timeEnd (Row 12 to 18)

Output on console will look like this

None