Welcome to the first lesson of our JavaScript for Beginners course! In this lesson, you'll learn how to write and run your first JavaScript program. We will start with the classic \"Hello World\" example, a tradition in programming to introduce the basics of any new language.
\n\nCreate a new file in your project folder and name it index.html.
In the index.html file, add the following HTML code:
\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Hello World</title>\n</head>\n<body>\n <h1>Hello World</h1>\n <script src=\"script.js\"></script>\n</body>\n</html>\nIf you're brand new to programming this might look confusing, but don't worry we don't need to understand this code just yet. The only important part is <script src=\"script.js\"></script> which imports and runs our Javascipt code file.
Next, create a new file in the same folder and name it script.js. In this file, add the following JavaScript code:
\n\nconsole.log('Hello, World!');\nThis code uses the console.log function to print the message \"Hello, World!\" to the browser's console.
To run your code you need to install the Live Server extension. This is a free VSCode extension that helps serve your code files to a web browser.
\nIn this context the term \"serve\" just means to open our code files in your web browser such as Google Chrome or Fire Fox.
\nTo install the extension simply click on the link above and click on the \"Install\" button.
\nAfter the extension is installed, right-click on the index.html file in VSCode and select Open with Live Server. If you don't see that option then try restarting VSCode.
After the web page opens in your browser, open the browser's console to see the \"Hello, World!\" message. You can open the console by pressing Ctrl+Shift+I (Windows) or Cmd+Option+I (Mac) and selecting the \"Console\" tab near the top.
Let's break down what we've done so far:
\nscript.js. Referencing our file in this case will load and run the code inside of script.js.console.log function outputs the message to the browser's console.Congratulations! You've written and run your first JavaScript program. In the next lesson, we will delve into variables and learn how to store and manipulate data in JavaScript.
\n\nTry modifying the message in script.js to display your name:
\nconsole.log('Hello, [Your Name]!');\nSave the file and refresh your browser to see the updated message.
"},{"name":"Module 1 Lesson 2 - Variables","text":"Welcome to the second lesson of our JavaScript for Beginners course! In this lesson, you'll learn about variables in JavaScript. Variables are fundamental to programming as they allow us to store and manipulate data.
\n\nA variable is like a container that holds a value. You can think of it as a labeled box where you can store information and then use or change that information later in your code.
\nIn JavaScript, we can create variables using the keywords var, let, and const. For now, we'll focus on let and const, as they are more commonly used in modern JavaScript.
let and constLet's create a new file named variables.js in the same folder as your previous files. In this file, add the following JavaScript code:
\n\nlet greeting = 'Hello, World!';\nconst pi = 3.14159;\n\nconsole.log(greeting);\nconsole.log('The value of pi is: ' + pi);\nIn this example:
\nlet to create a variable named greeting and assign it the value 'Hello, World!'.const to create a constant variable named pi and assign it the value 3.14159. A constant variable cannot be reassigned.console.log to print the values of greeting and pi to the console.To run this new JavaScript file, you need to update your index.html file to include variables.js instead of script.js. Update the index.html file as follows:
\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Hello World</title>\n</head>\n<body>\n <h1>Hello World</h1>\n <script src=\"variables.js\"></script>\n</body>\n</html>\nAfter updating the index.html file, open it with Live Server just like in the previous lesson. Open the browser console to see the output of your code.
Let's break down what we've done so far:
\nlet that holds the string 'Hello, World!'. Variables declared with let can be reassigned later in the code.const that holds the value 3.14159. Variables declared with const cannot be reassigned once they are set.The console.log statements print the values of these variables to the console, allowing us to see their values.
Variables declared with let can be changed. Let's modify the greeting variable:
\nlet greeting = 'Hello, World!';\ngreeting = 'Hello, JavaScript!';\nconsole.log(greeting);\nIn this example, we first assign 'Hello, World!' to greeting and then change its value to 'Hello, JavaScript!'. When you run this code, the console will display the updated message.
Great job! You've learned how to create and use variables in JavaScript. In the next lesson, we will explore different data types that you can store in variables, such as numbers, strings, and booleans.
\n\nTry creating a new variable to store your age and print it to the console:
\n\nlet age = 25;\nconsole.log('My age is: ' + age);\nSave the file and refresh your browser to see the updated message.
\n"}]}]}]}