Introduction to JavaScript

Hello folks, I hope you are having a great day. Today, I am going to start this new tutorial series on JavaScript and here's our 1st tutorial titled Introduction to JavaScript. This is a beginner level tutorial series, where we will start from very basics & will slowly move towards complex concepts. If you're not a beginner or looking for secure development training or advanced tutorials, stay tuned, more training is coming. We can use any development Editor for running JavaScript and for this tutorial series, I will use Microsoft Visual Studio Code, which is free to use & you can download it from official site. You don't need to be an expert programmer, in order to learn JavaScript, but you must have some basic knowledge of HTML & CSS. So, let's get started with today's lecture:

What is JavaScript - A Quick Definition

  • JavaScript ( initially named as LiveScript, officially named as ECMAScript ) is a client-side scripting language, developed by Brendan Eich in 1995 and is used to create interactive webpages and mostly used in game development.
  • Before JavaScript, webpages were dull and has no way to interact with the user, as we had only server side languages ( php, java etc. ) at that time and in order to get any action done, we have to send request to the server.
  • With JavaScript, now we can perform any complex task without refreshing the page, JavaScript works on client side that's why there's no need of page refreshing.
  • You must have noticed on your Facebook / Twitter profile that they update automatically, that's because of JavaScript.
  • As JavaScript is a client side language so it can't communicate directly with the server i.e. database or file system.
  • JavaScript is normally confused with Java, but they are two entirely different languages, Java is server side complex language while JavaScript is a simple scripting language.
How to Run JavaScript Code?
  • As I mentioned earlier, JavaScript is a client side scripting language, so we don't need any compiler or editor for running JavaScript.
  • Instead, JavaScript is directly executed by the web Browsers, similar to HTML & CSS, which are also client side languages.
  • When a user makes an HTTP request, then browser reads the webpage and along with HTML,CSS etc. it also finds the JS scripts and executes them.
  • All modern browsers support JavaScript and you can enable / disable JavaScript in your browser's settings.
  • Moreover, JavaScript works on almost all operating platforms i.e. Windows, Linux, Mac, Ubuntu etc.
  • So, in order to run JavaScript, you can use any Programming Environment / Editor i.e. Sublime, Notepad++, Visual Studio Code etc.
Uses of JavaScript
So, now let's have a look at few uses / advantages of Javascript:
  1. Developing Mobile Applications & Games.
  2. Web Browser-based Games.
  3. Add interaction to websites.
  4. Back end web Development.
  5. Rich interface for Applications and web pages.

How to Include a JavaScript Code in HTML WebPage

  • As I have mentioned earlier, we don't need any editor to run or execute JavaScript. Instead, web browsers execute the JS code on their own.
  • But question is, How web Browsers are going to recognize that its a JS code ??
  • And the answer is, the code placed between <script> </script> tags will be treated as a JavaScript Code.
  • There are two ways to include the JavaScript code in an HTML webpage, discussed as follows:
Embedding JavaScript Code directly in HTML Page
  • When we add JavaScript directly in <body> tag of our HTML page, it is termed as Embedded JavaScript.
  • In our HTML page, we can place JavaScript Code in the <script> </script> tags, as shown in the figure:
  • You can see in the figure that I have added a simple JavaScript Code:

<script> alert(“I am learning JavaScript”);    </script>

  • To run this code you have to add an extension. Go to the left side of visual studio and click on extension or press Ctrl + Shift + X buttons. 
  • Afterwards, Search “Open in browser” and install the first file. Look below in the image for more detail.
  • When your exertion is installed, now go back to your HTML file and press Alt + B.  It will run your code. 
  • You will see something similar to below image, in your browser.
  • This is a simple JavaScript alert message, displaying our content.
Include External JavaScript File in HTML WebPage
  • If we add JavaScript Code directly in HTML page then it will make the code quite messy.
  • So, it's always a best practice to create a separate file for JavaScript ( extension .js ) and then include this file in your webpage.
  • By convention, If your JavaScript code is more than 10 lines, then it's better to add an external JavaScript file.
  • It also reduces the code repetition i.e. if you are using your JS code for multiple pages.
  • Let's see now, how to add an external JavaScript file:
Steps to Follow:
  • Create a new file by pressing Ctrl + N and add  alert("Introduction to JavaScript");”  content in this file. Save it with the name “Test.js”.
  • As you can see on the right side in the figure.
  • Now go back to the “index.html” file and add the code as you can see in below figure:
  • When you will refresh the web browser then it will automatically reload a JS file through source code, as shown in below figure:
What Is The Best Way To Include JavaScript File in Html
  • You can add <script> tag in the <head> section of your HTML file, in the start of the <body> tag and also at the start or end of the body tag.
  • But I would advise you to add it at the end of the <body> tag. I will show you why it should be at the bottom of the body tag.
  • The HTML page always loads from top to bottom. And if your JS file will be in <head> tag or opening of the <body> tag. Therefore, it’s gonna run JavaScript first before loading any of the content in and it will leave a negative impact on your webpage. Let me show you now how it will drop a negative impression on your website.
  • Here is a basic example for you. As you can see in below image that I have added <script> tag at the start of <head> tag and add a new tag of <h1> for your understanding.
  • Save these file and press ALT + B to execute this code. You will notice that as you see in the picture underneath that only <script> tag alert comes up first without loading the rest of page.
  • But once I click at ok then it has loaded the rest of the page now. As indicated in the image here.
 
  • It leaves a bad impact on users because the page is loading step by step but not at once. Now I am gonna add  <script> at the bottom of the <body> tag and as you can see in image down.
  • Now save it go again to the browser and reload the page.  Instantly you can see the content and alert form at the same time. This is a perfect way of adding JS.
I am sure you all already know HTML and CSS but you have attempted to learn JavaScript many times but failed for some reason and you drop it. But I am sure now you are going to stick with me since I am going to describe you step by step each code. From the next lesson onward, I am going to tell you more in detail what is the Syntax of JavaScript and where to place JavaScript file. I hope you guys understand this lesson and I will see you in my next tutorial. Till then take care of yourself. If YOU have any question regarding this post feel free to comment below and ask about it.  I will definitely reply to your query as soon as possible. 

How to perform Software Testing and Debugging

Hello everyone, I hope you are having a fine day. In today’s tutorial, I am going to discuss “Software Testing and Debugging”

During testing and debugging, seek advice for the various techniques of detecting and eliminating mistakes in a program, so that it produces the desired result. Every programmer needs to be aware of the truth that a program does not always run perfectly for the first time. It is consequently vital to make efforts in case you do stumble on the errors. First, determine and note any errors which are found during the very first building and running of the program.

Errors that Occur during Initialization of the Program

Many errors can occur when running a program, some apparent, and others are not. All these mistakes can be grouped under four types, namely: syntax errors, run-time errors, logical mistakes, and latent mistakes.

Syntax problems are any violation of regulations specified within a  programming language results in syntax mistakes. The compiler during the build and run process of the code will automatically define such errors. When syntax errors are found in the source code of the program, the compilation fails and terminates after listing the errors and the line numbers within the source code of the application where the errors have occurred. 

Remember, in a few cases, the line quantity won't precisely suggest the vicinity of the mistake. In different instances, syntax error can also result in an extended listing of mistakes. Correction of one of the mistakes at the beginning of the build of the system may also take away the entire listing.

Run-time mistakes  include mismatch of data types or referencing out-of-variety array details, go undetected by the compiler. An application with those mistakes will run. However, it produces misguided consequences. It should be noted that isolating run-time blunders is usually a hard challenge.

Logical errors: As the name suggests, these mistakes are related to the common sense of program execution. Such moves as taking a wrong direction, failure to forget a particular situation, and incorrect order of assessment of statements belong to this category. Logical mistakes do now not show up as collect-generated mistakes messages. Rather, the program outputs the wrong results during execution. These errors are due to adverse information and incorrect translation of the set of rules by the program.

Latent errors are a 'hidden' error that pops up when a particular set of information is used — for instance, subsequent declaration.

Various Ways of  Testing a Program

Testing is the process of reviewing and executing a program to detect mistakes, which can belong to any of the four types mentioned above. We know that while the compiler can locate syntactic and semantic errors, it can't come across run-time and logical mistakes that show up all through the execution of the program. Testing, therefore, should include vital steps to detect all viable mistakes in the software. It is important to remember that it is miles impractical to find all the mistakes. The testing procedure can also encompass the subsequent two degrees:

  • Human testing
  • Computer-based trying out

Human checking out is a powerful error-detection procedure and finishes earlier than the computer-based tryout. Human testing methods encompass code inspection by the programmer, code inspection with the aid of a test institution, and a review by an essay writing service or a peer organization. The test is achieved through a statement and is analyzed with a tick list of common programming mistakes. In addition to finding the errors, the programming style and preference of algorithms are also reviewed.

Computer-based testing entails a list of degrees, particularly the compiler tryout and run-time check out. Compiler testing is the most effective of the two and also detects undiscovered syntax errors. The software executes while the compiler detects greater mistakes. 

Should this mean that this system is correct? Will it produce the expected consequences? The answer is no. The software might comprise both run-time and logical errors, which in any case won't affect the compiling process of the program.

Program Debugging And Error Checking 

Debugging is the process of discovering and correcting the mistakes in a program’s source code. One simple technique of debugging is locating print statements or logs output by the compiler during the build process of the system that shows the values of variables. It displays the dynamics of a program and allows us to observe and compare statistics at various points. Once the area of a blunder is recognized and is error corrected, the debugging statements may be eliminated. We can use the conditional compilation statements, to switch on or off the debugging statements.

Another method is to use the technique of deduction. The area of a blunder is arrived at by the use of elimination and refinement. It is done through the listing of possible reasons for the mistake.

In Conclusion

Two critical resources of a computer gadget are execution time and memory. The performance of an application is measured in phrases of those two sources. Efficiency can be progressed with true design and coding practices.

Thank you so much for reading this article. If you have any question regarding this article, you can comment below and ask us. We are looking forward for your feedback.

Syed Zain Nasir

I am Syed Zain Nasir, the founder of <a href=https://www.TheEngineeringProjects.com/>The Engineering Projects</a> (TEP). I am a programmer since 2009 before that I just search things, make small projects and now I am sharing my knowledge through this platform.I also work as a freelancer and did many projects related to programming and electrical circuitry. <a href=https://plus.google.com/+SyedZainNasir/>My Google Profile+</a>

Share
Published by
Syed Zain Nasir