My title

How To Write Your First JavaScript Program

The “Hello, World!” program is a classic and time-honored tradition in computer programming. It’s a short and complete first program for beginners, and it’s a good way to make sure your environment is properly configured.

This tutorial will walk you through creating this program in JavaScript. However, to make the program more interesting, we’ll modify the traditional “Hello, World!” program so that it asks the user for their name. We’ll then use the name in a greeting. When you’re done with this tutorial, you’ll have an interactive “Hello, World!” program.

Prerequisites

You can complete this tutorial by using the JavaScript Developer Console in your web browser. Before beginning this tutorial, you should have some familiarity with working with this tool. To learn more about it, you can read our tutorial “How To Use the JavaScript Developer Console.”

Creating the “Hello, World!” Program

To write the “Hello, World!” program, first open up your preferred web browser’s JavaScript Console.

There are two primary ways that we can go about creating the “Hello, World!” program in JavaScript, with the alert() method and with the console.log() method.

Using alert()

The first way that we can write this program is by using the alert() method, which will display an alert box over your current window with a specified message (in this case, it will be “Hello, World!”) and an OK button that will allow the user to close the alert.

Within the method we will pass the string data type as the parameter. This string will be set to the value Hello, World! so that that value will be printed to the alert box.

To write this first style of “Hello, World!” program, we’ll encase the string within the parentheses of the alert() method. We’ll end our JavaScript statement with a semicolon.

Once you press the ENTER key following your line of JavaScript, you should see the following alert pop up in your browser:

The Console will also print the result of evaluating an expression, which will read as undefined when the expression does not explicitly return something.

Pop-up alerts can be tedious to continue to click out of, so let’s go over how to create the same program by logging it to the Console with console.log() .

Using console.log()

We can print the same string, except this time to the JavaScript console, by using the console.log() method. Using this option is similar to working with a programming language in your computer’s terminal environment.

As we did with alert() , we’ll pass the «Hello, World!» string to the console.log() method, between its parentheses. We’ll end our statement with a semicolon, as is typical of JavaScript syntax conventions.

Once we press ENTER , the Hello, World! message will be printed to the Console:

In the next section, we’ll go over how to make this program more interactive for the user.

Prompting for Input

Every time we run our existing “Hello, World!” program, it produces the same output. Let’s prompt the person running our program for their name. We can then use that name to customize the output.

For each of our JavaScript methods we used above, we can begin with one line prompting for input. We’ll use JavaScript’s prompt() method, and pass to it the string «What is your name?» to ask the user for their name. The input that is entered by the user will then be stored in the variable name . We’ll end our expression with a semicolon.

let name = prompt("What is your name?"); 

When you press ENTER to run this line of code, you’ll receive a pop-up prompt:

The dialog box that pops up over your web browser window includes a text field for the user to enter input. Once the user enters a value into the text field, they will have to click on OK for the value to be stored. The user can also prevent a value from being recorded by clicking on the Cancel button.

It is important to use the JavaScript prompt() method only when it makes sense within the context of the program, as overusing it can become tedious for the user.

At this point, enter the name that you will want the program to greet. For this example, we’ll use the name Sammy .

Now that we have collected the value of the user’s name, we can move on to using that value to greet the user.

Greeting the User with alert()

As discussed above, the alert() method creates a pop-up box over the browser window. We can use this method to greet the user by making use of the variable name .

We’ll be utilizing string concatenation to write a greeting of “Hello!” that addresses the user directly. So, let’s concatenate the string of Hello with the variable for name:

We have combined two strings, «Hello, » and «!» with the name variable in between. Now, we can pass this expression to the alert() method.

Once we press ENTER here, we’ll receive the following dialog box on the screen:

In this case the user’s name is Sammy, so the output has greeted Sammy.

Now let’s rewrite this so that the output is printed to the Console instead.

Greeting the User with console.log()

As we looked at in a previous section, the console.log() method prints output to the Console, much like the print() function can print output to the terminal in Python.

We’ll be using the same concatenated string that we used with the alert() method, which combines the strings «Hello, » and «!» with the name variable:

This entire expression will be put within the parentheses of the console.log() method so that we will receive a greeting as output.

For a user named Sammy, the output on the Console will be as follows:

You now have a JavaScript program that takes input from a user and prints it back to the screen.

Conclusion

Now that you know how to write the classic “Hello, World!” program, as well as prompt the user for input, and display that as output, you can work to expand your program further. For example, ask for the user’s favorite color, and have the program say that their favorite color is red. You might even try to use this same technique to create a Mad Lib program.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Tutorial Series: How To Code in JavaScript

JavaScript is a high-level, object-based, dynamic scripting language popular as a tool for making webpages interactive.

Источник

First Hello World Program in JavaScript | 2 Ways to add JavaScript to HTML

In this tutorial post we will be running our first JavaScript program which is a basic Hello World program where we ill simple print Hello World(or any other text) on the browser.

The 2 softwares needed to start of with JavaScript are –

1. Text Editor : I will be using Visual Studio Code Text Editor which is highly recommended by many specially for Javascript, however you can use any other text editor like Notepad++ or Sublime text etc.
2. Browser : Of course a browser is needed to load the HTML document and run the JavaScript so I will be using Google Chrome broswer. You can use any browser of your choice as most modern browsers have JavaScript enabled by default.

There are 2 ways to include JavaScript in your HTML Document –

1. Embedding JavaScript in the same HTML document
2. Using External JavaScript file and linking it in your HTML document.

1. Embedding JS in HTML document –

As you can see in the code below, we are embedding JS code using the tag of HTML. Usually when the JavaScript code is small it is directly embedded in the HTML document, however, it is not recommended to embed large sized JS code directly in the HTML document as the code becomes un-organized.

default.html file –

2. External JavaScript File –

As you can see below there are 2 file – one the actual HTML document and other a separate external javascript file (demo.js). This demo.js file is linked in the HTML document using the script tag with the use of the attribute src as shown in the code below. When the javascript code is large, it is highly recommended to use a separate external file to keep the HTML doc and the JS code organized.

default.html file –

demo.js file –

document.write("
External file
");

So thats it for this basic hello world starter program where we simple printed text on the HTML document(not exactly hello world but you get the point right 😛 ). In the upcoming tutorials we will study more on the JS syntax and fundamentals.

Watch it on YouTube

Источник

Simple JavaScript Hello World Program in Easy Step

A JavaScript program is made up of a series of statements that are normally processed from top to bottom. It usually represents a single step in a JavaScript program.

Each statement (also known as command) is a single line that indicates an action for web browser to perform.

JavaScript statements are the fundamental sentences like building blocks used to make a program.

These statements consist of tokens, namely keywords, literals, separators, operators, identifiers, function calls, object references, etc. placed together in an order that is meaningful to a JavaScript interpreter.

All JavaScript statements are ended with a semicolon. A semicolon tells the browser about end of the statement.

Since JavaScript is a forgiving language, most browsers are very forgiving and still interpret most statements correctly even if we ignore to write the ending semicolon.

However, it is good programming practice to write the semicolon to tell the browser about end of the statement.

Syntax to write First JavaScript Program: Hello World

A popular example used for presenting a new language is the “Hello World!” program. It is perhaps the easiest program we could ever write.

This program simply prints the words “Hello World!” on the screen. Here, we will see a simple structure of “Hello World” program in Javascript.

As you can see in the above JavaScript program, Javascript code is inserted in the body section of the HTML document. We can put JavaScript code anywhere in the document.

A single line of code between opening is a command that prints the output “Hello World” on the screen.

The code written between opening tags is called script block. There is only one script block in the above JavaScript program.

The web browser executes the JavaScript code from to bottom, therefore, the order in which code executes depends on the order of the script blocks.

The output of the above JavaScript program is given below:

Output of code: Hello World!

The document.write() method in JavaScript is a basic way to print the text on the web page. The write() method is used to write a new text into the document object. The general syntax is as follows:

Here, Hello World! is a string of characters that we want written to a web document.

Another way to write text to a web page is a document.writeIn() method that puts the text in a separate block. Whereas, document.write() method puts the text in-line with other texts.

HTML Elements used in the Above Web Page Structure

Here, we will understand the basic HTML tags or elements and their functions in brief used in the above JavaScript Hello World program web page.

1. : The tag is used to tell browser about the version and type of HTML used. Throughout this JavaScript tutorial, we will utilize the HTML5 tag. It includes a URL that references a DTD (Document Type Definition) found on the w3.org website.

2. : The first set of tags beyond tag is that indicates the start and end of an HTML document.

This set of tags contains all the content or code of an HTML web page. The web browsers use these tags to determine where HTML code in a file starts and end.

3. : This is the next set of tags in the above web page structure that contains web page title “Hello World JavaScript Program” and other document header information.

4. : This is known as title tag that is inserted into the section. This set of tags indicates the title of web page that will appear on the browser title bar and task bar when the web page is exhibited in the browser. The title does not appear in the body of web page.

5. : This is the final set of tags that contains the main content of web page such as text, images, graphics, links, and other content.

Note : The HTML start tags such as , , , and .

Hope that this tutorial has covered almost all the important points related to hello world JavaScript program with example program. I hope that you will have understood the basic structure of JavaScript program.

In the next tutorial, we will learn how to write first JavaScript program in notepad++ step by step and others editors such as visual code editor and eclipse IDE.
Thanks for reading.
Next ⇒ How to Write JavaScript in Notepad++ without IDE ⇐ Prev Next ⇒

Источник