Hello, World, Personal
Create a project 02-helloWorldPersonal that prints out a personalized message to someone who enters their name into the webpage.
Instructions
After logging into repl.it, click "+ new repl", and select "HTML, CSS, JS" for your environment. A random name will be given to your project, but you should change it to this: 02-helloWorldPersonal
We're only going to use the HTML file
index.html
for this exercise, and that filename should already be highlighted, with a bunch of text in the middle window.Erase all that text and replace it with this code:
<!DOCTYPE html> <html> <head> <title>02-helloWorldPersonal - Your Name</title> </head> <body> <script> // JavaScript code goes here </script> </body> </html>
We'll learn what all this code means very soon. For now, just notice that there are pairs of lines, and a lot of angle brackets < >.
Our program for this consists of two lines:
let name = prompt("Enter your name");
This opens up a window that lets the user type in some information, and JavaScript will store that information in a "variable" called
name
.Now we need to print "Hello" to that person, which you might think would look like this, but it turns out this doesn't work:
document.write("Hello, name!");
Instead, we need to use this instruction:
document.write("Hello, " + name + "!");
Here, we're actually printing out three different strings of text--the string "Hello", the string of characters stored in the variable name, and an exclamation point character--and using the
+
operation to concatenate them into one string.Notice that we aren't saying
console.log()
, but ratherdocument.write()
. How does this change where the message gets displayed in the replit interface?Once your program is working correctly, use your mouse to click-drag over the URL address for your project at the top of the browser window. Copy that link, and give that copied link to the instructor using the procedure given in class.