Skip to main content
April 1, 2026Dan Rodney/5 min read

Fundamentals of JavaScript Code

Master Essential JavaScript Concepts Through Hands-On Practice

Learning Path Overview

This tutorial builds foundational JavaScript skills through practical exercises. You'll work with alerts, variables, and data types - core concepts that appear in even the most complex applications.

Topics Covered in This JavaScript & JQuery Tutorial:

JavaScript fundamentals including methods (alerts), variables, string handling, the critical role of quotes in syntax, distinguishing numbers from strings, and concatenation techniques

Core JavaScript Concepts

JavaScript Methods

Learn about alert() and other JavaScript methods. Methods are like verbs in JavaScript - they perform actions and execute code.

Variables & Data Storage

Understand how to create and use variables to store information. Variables are containers that hold values for use throughout your code.

Strings vs Numbers

Discover the critical difference between text strings and numeric values. This distinction affects how JavaScript processes your data.

Exercise Preview

alert

Exercise Overview

Before diving into real-world JavaScript applications, mastering foundational concepts and syntax is essential. This exercise introduces you to alerts—while rarely used in production websites, they're invaluable debugging tools for developers at any level. You'll then explore variables, strings, and numbers, which form the backbone of even the most sophisticated JavaScript applications. These concepts remain as relevant in 2026 as they were when JavaScript first emerged, serving as building blocks for modern frameworks like React, Vue, and Angular.

Understanding these fundamentals will accelerate your journey toward writing clean, maintainable code and debugging complex applications efficiently.

Why Start with Alerts

While you may not use alerts often on finished websites, they're invaluable for testing code when learning. Alerts provide immediate visual feedback to verify your JavaScript is working correctly.

Getting Started

  1. Launch your code editor (Visual Studio Code, Sublime Text, or another modern editor). If you're in a Noble Desktop class, use Visual Studio Code.
  2. Open a file using Cmd–O (Mac) or Ctrl–O (Windows).
  3. Navigate to Desktop > Class Files > yourname-JavaScript jQuery Class > JavaScript-Fundamentals.
  4. Double-click index.html to open it.
  5. You'll see a blank HTML page—the perfect foundation for learning JavaScript syntax from the ground up.

Development Environment Setup

1

Launch Code Editor

Open Visual Studio Code, Sublime Text, or your preferred code editor to begin writing JavaScript code.

2

Open Project Files

Navigate to Desktop > Class Files > yourname-JavaScript jQuery Class > JavaScript-Fundamentals and open index.html.

3

Prepare HTML Canvas

Start with the blank HTML page provided - it serves as the perfect foundation for learning JavaScript syntax.

Writing JavaScript Alerts & Variables

JavaScript code must be enclosed within <script> tags. While these can be placed in various locations, we'll position ours in the <head> section for this exercise.

  1. Add the following code before the closing </head> tag (line 6):

    <title>JavaScript Fundamentals</title>
   <script>

   </script>
</head>

  2. Inside the <script> tags, add this code:

    <script>
   alert('Hello');
</script>

    The alert() method creates a browser dialog displaying your specified message. Methods function as JavaScript's "verbs"—they perform actions. Every method follows the pattern of methodName() with parentheses containing parameters or options. While alert() is primarily used for learning and debugging, understanding this pattern prepares you for more sophisticated methods you'll encounter in professional development.

  3. Save your file (File > Save).
  4. Navigate to Desktop > Class Files > yourname-JavaScript jQuery Class > JavaScript-Fundamentals.

  5. Ctrl-click (Mac) or Right-click (Windows) on index.html, select Open With, then choose Google Chrome, Safari, or Firefox.

  6. A dialog displaying Hello appears. Notice the quotes from your code don't appear in the output—JavaScript interprets them as string delimiters, not display characters. Click OK to dismiss the alert.

  7. Keep index.html open in your browser for quick testing as you modify your code.

  8. Return to your code editor and modify the script as shown (pay attention to capitalization—JavaScript is strictly case-sensitive):

    <script>
   var myMessage = 'Hello';
   alert(myMessage);
</script>

  9. Let's analyze this code: var declares a new variable. We've created a variable named myMessage and assigned it the string value 'Hello'. The alert now references this variable rather than a literal string. Notice the absence of quotes around myMessage in the alert—quotes would make JavaScript treat it as literal text instead of a variable reference.

  10. Observe the semicolons (;) terminating each statement. While JavaScript's automatic semicolon insertion makes them technically optional on separate lines, professional developers include them for several reasons: code clarity, compatibility with minification tools, and consistency with other programming languages. This practice becomes especially important when working with build tools and modern JavaScript workflows.

  11. Save and reload your browser. You'll see the same Hello message, confirming that variables work correctly.

    Note: If you closed the browser, navigate to the file and open it with your preferred browser. Many modern editors offer live preview extensions that streamline this process.

  12. In your code editor, add single quotes around myMessage in the alert:

    alert('myMessage');

  13. Save and preview. The alert now displays myMessage literally instead of the variable's value.

    This demonstrates a crucial concept: text within quotes creates a string literal. Quotes instruct JavaScript to treat content as literal characters rather than executable code. JavaScript accepts both single and double quotes interchangeably (except in nested scenarios). Many developers prefer single quotes for their simplicity and speed—no Shift key required.

  14. We'll preserve this code for reference while moving forward. Add double slashes // to create comments (the code will appear gray and be ignored):

    // var myMessage = 'Hello';
// alert('myMessage');

  15. Save and preview. With the code commented out, no alerts appear.

Case Sensitivity Matters

JavaScript is case-sensitive! Pay close attention to capitalization when writing variable names and method calls. myMessage and mymessage are treated as completely different variables.

Code Structure: Direct vs Variable Approach

FeatureDirect AlertVariable-Based Alert
Code Stylealert('Hello');var myMessage = 'Hello'; alert(myMessage);
FlexibilityFixed messageReusable variable
Best PracticeQuick testingProduction code
Recommended: Use variables for better code organization and reusability, even in simple examples.

Strings Vs. Numbers & Variables

Understanding how JavaScript handles different data types is fundamental to writing effective code. Let's explore the crucial distinction between strings and numbers.

  1. Below your commented code, add these two alert statements:

    //alert('myMessage');
   alert( 2 + 2 );
   alert( '2' + '2' );
</script>

  2. Save and preview. Two distinct behaviors emerge:

    • The first alert performs mathematical addition, displaying 4. JavaScript recognizes unquoted numbers and applies arithmetic operations.

    • The second alert demonstrates concatenation—joining strings together—displaying 22. The quotes transform numbers into strings, changing the plus operator's behavior entirely.

    This distinction between numeric and string operations appears throughout JavaScript development, from simple calculations to complex data manipulation.

  3. Clear everything between your <script> tags and add this code:

    <script>
   var firstName = 'Dan';
   var lastName = 'Rodney';
   alert('firstName' + 'lastName');
</script>

  4. Save and preview. The alert displays firstNamelastName—literal string concatenation rather than variable values. This occurs because quotes treat the content as string literals.

  5. Remove the quotes from the alert parameters:

    <script>
   var firstName = 'Dan';
   var lastName = 'Rodney';
   alert(firstName + lastName);
</script>

  6. Save and preview. Now you see DanRodney—the variable values concatenated without spacing. JavaScript successfully retrieves the variable values but concatenates them directly.

  7. To add proper spacing, insert a string containing a space character between the variables:

    alert(firstName + ' ' + lastName);

    Important: Spaces inside quotes matter; spaces outside quotes are ignored by JavaScript.

  8. Save and preview. The output now shows Dan Rodney with proper spacing.

  9. Close your browser tab when finished.

    These exercises establish crucial foundations for professional JavaScript development. Variable management, string manipulation, and data type understanding form the core of everything from simple scripts to enterprise applications built with modern frameworks like React or Vue.js.

    Reference Files: Complete code examples are available in Desktop > Class Files > yourname-JavaScript jQuery Class > Done-Files > JavaScript-Fundamentals for comparison and troubleshooting.

Addition vs Concatenation

FeatureNumbersStrings
Code Example2 + 2'2' + '2'
Result422
OperationMathematical additionString concatenation
Recommended: Quotes determine whether JavaScript treats values as numbers or strings, completely changing the operation performed.
Quote Choice Strategy

JavaScript accepts both single and double quotes for strings. Single quotes are often preferred because they're faster to type - no Shift key required!

String Concatenation Process

1

Create Variables

Define separate variables for firstName and lastName with string values enclosed in quotes.

2

Remove Quotes in Alert

Use variable names without quotes so JavaScript reads the stored values, not literal text.

3

Add Space Character

Concatenate a space string ' ' between variables to properly format the output: firstName + ' ' + lastName

Key Takeaways

1JavaScript methods like alert() are actions that perform specific tasks and require parentheses with optional parameters inside
2Variables are containers that store values and must be declared with 'var' keyword before use
3Quotes are critical in JavaScript - they distinguish between literal strings and variable names
4The plus operator behaves differently with numbers (addition) versus strings (concatenation)
5JavaScript is case-sensitive, meaning variable names must match exactly in capitalization
6Semi-colons mark the end of JavaScript statements and are recommended for code clarity and minification compatibility
7Single quotes are preferred over double quotes for strings as they require less typing effort
8Commenting out code with double slashes (//) allows you to preserve code while preventing execution

RELATED ARTICLES