Mr. Cochran's Website

Empowering Today’s Learners to Become Tomorrow’s Leaders

A Hello world! example

JavaScript is one of the most popular modern web technologies! As your JavaScript skills grow, your websites will enter a new dimension of power and creativity.

However, getting comfortable with JavaScript is more challenging than getting comfortable with HTML and CSS. You may have to start small, and progress gradually. To begin, let's examine how to add JavaScript to your page for creating a Hello world! example. (Hello world! is the standard for introductory programming examples.)

Go to your Procedures site and create a new folder named proscripts.
Within the scripts folder, in Notepad create a new file called main.js, and save it. Remember we are working in procedures right now!
Next open your index.html file, enter this code on a new line, just before the closing </body> tag:

4. This is doing the same job as the <link> element for CSS. It applies the JavaScript to the page, so it can have an effect on the HTML (along with the CSS, and anything else on the page).

5. Add this code to the main.js file:

const myHeading = document.querySelector('h1');
myHeading.textContent = 'Hello world!';

What happened?

The heading text changed to Hello world! using JavaScript. You did this by using a function called querySelector() to grab a reference to your heading, and then store it in a variable called myHeading. This is similar to what we did using CSS selectors. When you want to do something to an element, you need to select it first.

Following that, the code set the value of the myHeading variable's textContent property (which represents the content of the heading) to Hello world!

Language basics crash course

To give you a better understanding of how JavaScript works, let's explain some of the core features of the language. It's worth noting that these features are common to all programming languages. If you master these fundamentals, you have a head start on coding in other languages too!

IN THE NEXT FEW PAGES YOU ARE NOT ACTUALLY CHANGING ANY OF YOUR FILES. PLEASE SIMPLY READ OVER THESE INSTRUCTIONS AND MOVE ONTO THE NEXT STEP. THIS IS AN FYI INSTRUCTION ONLY.

Next - Variables »

Page updated

Report abuse

A Hello world! example

Language basics crash course

Missing or Incomplete Projects/Assignments

Contact

The 3 A’s of SUCCESS

Important Links