# JavaScript Basics

In the previous sections we talked about how `HTML` and `CSS` are the basic building blocks of a webpage. The third and final building block of a webpage is `JavaScript`. Like CSS, it's not required to make a webpage, but most pages use it. Unlike HTML and CSS, JavaScript is an actual programming language. You can use it to perform tasks like solving math problems, showing popups to the user, and changing the layout on a page. JavaScript has become *really* powerful in the last few years, but the best part is that it's very easy to learn the basics.

## Basic JavaScript

If you know other programming languages like `Java`, or `C`, then you'll see a lot of similarities to JavaScript. Unlike those languages, JavaScript execution simply starts at the top of the files and goes to the bottom in order-- there's no `main()` function that gets called. That means a "Hello World" program can be as simple as this:

```javascript
console.log("Hello World");
```

JavaScript allows you use variables, but unlike some other languages, variables do *not* have types. You just declare variables using the `var` keyword like this:

```javascript
var x = 5;
var y = 10;
var sum = x + y;
console.log("The sum is: " + sum);
```

Because variables don't have types, you can reassign them after creation. For example:

```javascript
//Comments are supported too!
var x = 5;
console.log("The value of x is: " + x); //This prints "5"
x = "Hello World";
console.log("The value of x is: " + x); //This prints "Hello World"
x = 123.456;
console.log("The value of x is: " + x); //This prints "123.456"
```

## JavaScript Functions

Functions in JavaScript work similarly to other languages, allowing you to write some code once and then re-use it later. Since JavaScript does not have variable types, you don't need to specify a return value on your functions.

```javascript
function sayHello() {
    console.log("Hello World!");
}
sayHello(); //Prints "Hello World"
sayHello(); //Prints "Hello World"
```

You can pass arguments to functions just like you'd expect. Again, these arguments do not have types:

```javascript
function sayHello(name) {
    console.log("Hello there, " + name);
}
sayHello("Bob"); //Prints "Hello there, Bob"
sayHello("Sally"); //Prints "Hello there, Sally"
```

## JavaScript Objects

If you're used to other object-oriented languages like `Java` or `C`, you might be wondering where the classes and objects are in JavaScript. JavaScript does support objects, but it's not strictly object-oriented. In JavaScript objects are just a collection of values and functions wrapped together. You can define one using curly braces. Here's an example:

```javascript
//Define 2 objects
var personA = {
    name: "Emily",
    age: 20,
    job: "Systems Architect"
}

var personB = {
    name: "John",
    age: 17,
    job: "Software Engineer"
}

//Reference those objects
console.log("PersonA is named" + personA.name);
console.log("PersonB is named" + personB.name);

//Update those object values
personA.age = 21;
personB.job = "Freelance Designer";
```

## More on JavaScript

JavaScript is a huge language that has changed a lot since it was created. There's a *lot* to learn about it, but now you know the basics. Take a look at some of the resources below if you want get a more in-depth understanding of JavaScript. In the next section we'll go over actually using some JavaScript in a webpage.

## Recommended Reading

[Mozilla Developer Network JS Guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide) [Code Academy JS Course](https://www.codecademy.com/learn/learn-javascript)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://launchpadcs.gitbook.io/webdev-guides/js/js_01.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.