Introduction to JavaScript Basics

Aug 5, 2024

JavaScript Series Introduction

Overview

  • New series focused on JavaScript from beginner to advanced levels.
  • In this first video, we'll cover:
    • What JavaScript is
    • Writing a simple "Hello World" program.

What is JavaScript?

  • JavaScript is a programming language, similar to Java, C, C++.
  • Primarily designed for web applications to add functionality.
  • Important Note:
    • JavaScript has no direct relation to Java.
    • Learning Java is not a prerequisite for JavaScript.

Ways to Use JavaScript

  1. Internal Linking
    • Write JavaScript code within an HTML file.
  2. External Linking
    • Write JavaScript in a separate .js file and link it to HTML.

Setting Up an HTML File

  • Create a folder named JS.
  • Inside the folder, create a subfolder 01 for this first video.
  • Create an index.html file with the following structure: 
    <!DOCTYPE html>
<html>
<head>
    <title>Biyush</title>
</head>
<body>
    <h1>Welcome to Complete JS Course</h1>
</body>
</html>
  • Run the HTML file using the Live Server extension in VS Code.

Internal Linking Example

  • Use the <script> tag to add JavaScript code within the HTML file: 
    <script>
    console.log("Hello World");
</script>
  • Console.log used to print output to the browser's console.
  • Access the console by right-clicking the page and selecting Inspect.

Printing to the Console

  • Example code: 
    console.log("My name is Piyush");
console.log(1);
console.log(1 + 1);
  • In JavaScript, semicolons are optional; they do not cause errors if omitted.

External Linking Example

  • Create a separate JS file named script.js in the 01 folder.
  • Link it in the HTML file: 
    <script src="script.js"></script>
  • Example code in script.js: 
    console.log("Hello from external.js file");

Mixing Internal and External Linking

  • You can mix both types of linking in your HTML: 
    <script src="script.js"></script>
<script>
    console.log("Hey again from internal script");
</script>
  • The order of script tags matters (top to bottom execution).

Adding Multiple JS Files

  • You can add more than one external JS file: 
    <script src="hello.js"></script>
  • The sequence of these script tags will determine the order of execution.

Conclusion

  • This video introduced the basics of JavaScript, how to write "Hello World," and the differences between internal and external linking.
  • Next video will continue to explore JavaScript concepts.
  • Goodbye and take care!