JavaScript Tutorial Concepts - From Beginner to Pro
Learn JavaScript from scratch! Our tutorial covers basics to advanced concepts. Start learning today!
- 24
- 9 Hours
Tutorial Playlist
24 Lessons1. Introduction to JavaScript
2. JavaScript Examples
3. JavaScript Hello World
Now Reading
4. JavaScript let
5. JavaScript Callbacks
6. JavaScript Arrays
7. JavaScript Array reduce()
8. JavaScript Loops
9. JavaScript Objects
10. DOM Model in JavaScript
11. JavaScript Form Validation
12. JavaScript Games
13. JavaScript Promises
14. JavaScript Async Await
15. JavaScript Closure
16. JavaScript this keyword
17. OOP in JavaScript
18. Operators in Javascript
19. Redirect in JavaScript
20. Express JS
21. Convert String to int in JavaScript
22. JavaScript Functions
23. JavaScript New Lines
24. JavaScript Regex
JavaScript Hello World
JavaScript is the heartbeat of modern websites. It's the magic that turns static web pages into dynamic experiences full of buttons that react, forms that respond, and content that changes at your fingertips. If you want to build engaging websites, understanding JavaScript is key.
"Hello World!" is a time-honored tradition in programming. JavaScript Hello World is the first step on an exciting journey, marking the moment you take control and make the computer speak. I will guide you through that very first step in the world of JavaScript through this tutorial.
Let’s dive into JavaScript Hello World and by the end, you'll have written your own line of code and made the web say "Hello World!"
What is JavaScript?
I like to think of JavaScript as the language that brings websites to life. It lets us make web pages do things, buttons that change color when we click them, images that pop up, or text that reacts to what we type.
JavaScript has a special home within our web browser (like Chrome, Firefox, or Safari). The browser has a built-in engine designed to understand and run JavaScript code.
Let us think of a website like a house. HTML is the foundation and walls that give the house its basic shape. CSS is like the paint and decorations that make it look pretty. JavaScript is the wiring and plumbing, it makes everything interactive and lets things work the way they should.
Setting Up Your Coding Environment
We have got three solid ways to start writing JavaScript code. Let us explore them before we write our JavaScript Hello World program.
Option 1: Your Browser's Secret Power
Most web browsers (like Chrome, Firefox, or Edge) have a hidden toolkit called the developer console. It's like a playground for testing code.
Usually, we can right-click anywhere on a webpage and select "Inspect", or use keyboard shortcuts like F12. Look for a tab named "Console".
The console is the quickest way to play around with JavaScript commands and see the results immediately.
Option 2: Text Editor and Browser Team-Up
Text Editor is a simple program for writing code. Good beginner options for writing a basic JavaScript Hello World program are VS Code (free), Sublime Text (free), or even Notepad++ (free).
- Step 1: HTML File Create a file named index.html with this basic code:
<!DOCTYPE html>
<html>
<head>
<title>My JavaScript Practice</title>
<script src="script.js"></script>
</head>
<body>
</body>
</html>
- Step 2: Create a file named script.js in the same folder as your HTML file. Right-click on index.html and choose "Open with..." and select your web browser.
Note: Both ways are fantastic! If you want to jump right in, the browser console is your friend. For longer-term projects, the text editor setup gives you more control.
Option 3: Online Compiler
You can also use an online JS compiler of your choice to write a JavaScript Hello World program.
Example:
Your First JavaScript Hello World Program
JavaScript code to print Hello World:
console.log("Hello World!");
How to Run the JavaScript Hello World Code
- Option 1: In-Browser Console
Open your browser's console (remember, right-click and "Inspect" or those keyboard shortcuts). Carefully type or paste console.log("Hello World!"); into the console. Press the Enter key on your keyboard and done. You should see "Hello World!" appear right below.
- Option 2: Text Editor and Browser
Open your script.js file. Inside that file, type console.log("Hello World!");. Save your changes to script.js. Open your index.html file in your web browser. Open your browser's console. You'll see your "Hello World!" message there.
We should celebrate this moment. You've just written your first line of working JavaScript code as well as your very first JavaScript Hello World program. Congratulations.
Understanding the Basics
Now that you have written a basic Hello World program in JavaScript, let us learn about some of the key building blocks of JavaScript.
Variables: The Memory Boxes
Imagine variables as little boxes where you can store information. You name the box and put something inside.
Example:
let greeting = "Hello World!";
Here, we have a box named greeting that holds the text "Hello World!". Now, we can tell the computer to print the contents of our box with:
console.log(greeting);
Comments: Your Code's Side Notes
Comments are like sticky notes you leave within your code. They are totally ignored by the computer, but they help you (and other programmers) understand what the code is doing.
Example:
// This code stores a greeting message
let greeting = "Hello World!";
We can use (//) to leave comments inside our code.
Data Types: Not Just Words
In the land of JavaScript, data comes in different flavors:
- Strings: This is text, like "Hello World!", always enclosed in quotes.
- Numbers: Like 5, 10, or 3.14, no quotes needed for these.
- Booleans: Special values representing true or false.
There are more data types to explore later, but for now, know that JavaScript gives you ways to work with different kinds of information.
Making JavaScript Hello World Interactive
Ready to make your code have a conversation? Let us learn about asking questions and combining information.
The Magic of prompt()
The prompt() function lets us ask the user to type something in. It pops up a little box on the screen where they can enter their input.
Example:
let name = prompt("What's your name?");
This code will pause and show a box asking, "What's your name?" The user's answer is then stored in the name variable.
String Concatenation: Joining the Pieces
This sounds fancy, but it means sticking pieces of text together. We use the plus sign (+) to do this.
Example:
console.log("Hello, " + name + "!");
If the user typed in "Aritra", this would print "Hello, Aritra!".
Putting It All Together
Code:
let name = prompt("What's your name?");
console.log("Hello, " + name + "!");
Variables let us store information that you can use later. With prompt() we get information from the user, and console.log() lets us combine it all to create custom messages. It's like our computer is learning to personalize its greetings.
If you wish to learn web development and tools like JS, you can check out upGrad’s full stack development courses.
Going Further Than JavaScript Hello World
You did it. You've made your first steps into the exciting world of JavaScript by writing your first JavaScript Hello World program. Now, let's stretch those coding muscles with some fun challenges to try out:
Challenge 1: Switch It Up
Can you change the "Hello World!" message to something else? Maybe "Good morning!" or a funny phrase you like. Experiment and make your own Hello program in JavaScript.
Example:
The above is an example of writing a simple Hello Javascript program.
Challenge 2: Age Calculator
Use prompt() to ask the user, "How old are you?". Store their answer in a variable like age.
Try converting their age into dog years.
(Note: A common belief is that one human year is equal to 7 dog years).
Create a new variable:
let dogYears = age * 7;
Now, use console.log() to print a message like: "You are about [dogYears] years old in dog years!"
Example:
Code:
let age = prompt("What's your age?"); let dogYears = age * 7; console.log("You are about " + dogYears + " years old in dog years!"); |
Wrapping Up
Congratulations. You've officially taken your first steps in the world of JavaScript and have written Hello World using JavaScript. Remember, every complex website and every cool app started with a simple line of code, just like the one you wrote today.
This is just the beginning, and there's a whole universe of exciting things to build. Keep learning, keep experimenting, and have fun along the way. All amazing programmers began where you are right now.
Coding is like learning a new language. The more you use it, the better you'll become. Every small victory, like figuring out those challenges, is a sign that you're growing as a coder.
If you wish to master JavaScript, you can enroll in upGrad’s software engineering courses.
Frequently Asked Questions
1. How do you write Hello World in JavaScript?
You use the console.log() function: console.log("Hello World!");
2. What is the Hello World function?
There's no standard JavaScript Hello World function in JS. "Hello World" is a traditional first program to illustrate basic syntax.
3. What is the JavaScript function that returns Hello World?
You could create your own function Hello World JavaScript:
function helloWorld() {
return "Hello World!";
}
4. What is the greet function in JavaScript?
There's no built-in greet function. You could define your own:
function greet(name) {
return "Hello, " + name + "!";
}
5. How to start JS code?
You either type directly into the browser's developer console or create an HTML file and a linked JavaScript file.
6. How to call a function in JavaScript?
In JS, you can use the function's name followed by parentheses to call a function.
7. How do you call a function?
We can call a function by writing the function's name followed by parentheses: myFunction();
8. What is function in JavaScript with example?
A function is a block of code designed to perform a task. Here's a simple example:
function addNumbers(a, b) {
return a + b;
}
let result = addNumbers(5, 3); // result will be 8
mukesh
mukesh
Working with upGrad as a Senior Engineering Manager with more than 10+ years of experience in Software Development and Product Management.
Get Free Career Counselling
upGrad Learner Support
Talk to our experts. We’re available 24/7.
Indian Nationals
1800 210 2020
Foreign Nationals
+918045604032
Disclaimer
upGrad does not grant credit; credits are granted, accepted or transferred at the sole discretion of the relevant educational institution offering the diploma or degree. We advise you to enquire further regarding the suitability of this program for your academic, professional requirements and job prospects before enrolling. upGrad does not make any representations regarding the recognition or equivalence of the credits or credentials awarded, unless otherwise expressly stated. Success depends on individual qualifications, experience, and efforts in seeking employment.
upGrad does not grant credit; credits are granted, accepted or transferred at the sole discretion of the relevant educational institution offering the diploma or degree. We advise you to enquire further regarding the suitability of this program for your academic, professional requirements and job prospects before enr...