Skip to content

Basics of JavaScript (revisited)

JavaScript makes sure our page knows how to function and react. There are different frameworks for JavaScript, like React.js and vue.js, but this class will be focusing on vanilla JavaScript with ES6+ standards.Read more about the standards here.

In HTML, JavaScript must be contained within a script tag. In our <head> tag, let’s add a <script></script> tag.

Sometimes it also becomes important to put JavaScript in the footer tag, why is that?

Sometimes you need JavaScript functions to run after the HTML body loads, so putting the <script> after the </body> becomes necessary. This will be relevant when we bring in Leaflet.js because Leaflet should go in the header, while our Javascript comes after, preferrably in in a <footer>.

Let’s a-(variable)-go!

Variables are like boxes that hold information. They can be numbers, text, or even collections of other variables! In programming languages we call those variable types. With JavaScript, variables are automatically assigned types based on their declaration. We’ll discuss more next week, but what you need to know for now is how to declare variables.

In JavaScript all declarations and lines should end with a semicolon ;.

This is an example of a declaration:

var day = 8;
var name = "Albert";

In front you see the var keyword that tells the web browser, “Hey this is a variable!”. In this example, day is a numeric type with a value of 8 and name is a string type. Each type has certain properties and uses, for example you can add numbers together using something like day + day, but you adding strings will simply concatenate and not total them.

What is a keyword?

In most coding languages, a keyword is a word that tells a program to treat the following text, numbers, or characters in a specific way. For example, var myName says treat myName as a variable. This means you CANNOT name a variable var, Jar Jar Binks cousin Var Var Binks is VARy bad for JavaScript to see! i.e. var var Also note, you cannot use spaces in variable names!

With JavaScript ES6, let and const keywords were introduced to declare variables. This change means that the recommend practice is to no longer use the var keyword. let and const variables get declared in the same way:

let day = 8; //(1)!
const name = "Albert"; // (2)!
  1. The let keyword LETS a variable CHANGE! 😄
  2. The const keyword declaration keeps a variable CONSTant!

Let vs Const vs Var

What is the difference?

  1. The let keyword declaration LETS a variable change
  2. The const keyword delcaration a variable CONSTant and will never change.
  3. The var allows varaibles to change or never change depending on where it was declared! VERY PROBLEMATIC!

Because var can be changing (mutable) and unchanging at the same time, so var was changed into off into two different variable types, let and const.

Scopes: Local vs. Global

Where you declare a variable sets the scope to either a local one (limited to a function or area in the code) or global (can be accessed by anything/anywhere else in the code).

So, bye bye var and LET us welcome our new CONST variables to the JavaScript programming world.

TLDR

DO NOT USE var unless you need to code for old browsers (mainly Internet Explorer).

Console.log()

By itself, our script tag does nothing. So one VERY important JavaScript method that we should familarize ourself with is console.log(), because it allows us to test our code without things showing up in the webpage.

Add the following script:

<script>
    console.log('Hello Asian Am 191! :)');
</script>

Nothing happened?! What!?

Someone..

CONSOLE(log) me 😢

Actually, you are about to unlock your full web developer potential!

In Firefox, right click anywhere on the page and the click Inspect Element:

This opens the Developer Toolbar!! You can also find it by going to the Menu and going to Web Developer and then Web Developer Tools.

Click on the Console button:

Yay! Our message is there!

Linking to another JavaScript file

Similar to the CSS files, we should move the JavaScript file into its own folder to avoid cluttering the HTML file with many lines of JavaScript.

Importing different libraries is the main way add functions and level up our webpage.

BUT!!! Instead of the <link> with CSS we use the <script> tag:

 <script src="YOUR_SCRIPT_NAME.js"></script>

The src attribute is location of your file.

Tasks

  1. Create a new folder called js
  2. Add a JavaScript file in there called init.js
  3. Get our message to show up in the console
Answer
  1. Click on the New Folder button:

  1. Type in js:

  1. Click on the New File button:

  1. Give it a name, like init.js

  1. Within index.html before the end of the <body> element include the following:

index.html
        //
        // ... HTML Truncated for brevity ...
        // 
        <script src="./js/init.js"></script>
    </body>
<html>
/js/init.js
console.log("Hello Asia-Am 191A! :)")

Important!

Never include <script></script> tags inside of a Javascript file, those are HTML elements!!! Do so will combinine HTML Language and the JavaScript language, which will break your page. 😢

🏁Checkpoint

Check to see if your HTML looks likes the following before moving on:

index.html
<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>
        <!-- hint: remember to change your page title! -->
        <meta charset="utf-8" />
        <link rel="shortcut icon" href="#">
        <link rel="stylesheet" href="styles/style.css">
    </head>

    <body>
        <header>
            <!-- hint: you can make a menu with other links here if you'd like -->
        </header>

        <div class="main">
            <!-- hint: the majority of lab 1 assignment can go here -->
        </div>
        <div id="footer">
            Copyright(2022)
        </div>
        <script src="./js/init.js"></script>
    </body>
</html>