Now it's time to dive deep into JavaScript, it's what makes all web page interaction possible, without refreshing your page 🤙

A little re-cap first, so far we have done HTML and CSS.

You may realize by now, there's not much we can do besides changing content, layout, and styles with them.

That is the limitation of static languages, they are designed for rendering purposes only, not capable of any computation like C++ or Java.


Today we will learn the basic usages of JavaScript, such as variable declaration, calculation, console output, modification of HTML component, etc.

At our next meeting, we will go through how does JavaScript fit into your own webpage, making it more interactive.


1. Chrome Developer tool (DevTool)

First, we open up the Developer tool

Mac: Command+Option+C
Window Control+Shift+C

Chrome DevTool

DevTool is a convenient tool for us developer to quickly debug our webpage, change CSS style and modify HTML code.


2. Open the Console tab at DevTool

Console tab on DevTool

DevTool's console gives us the ability to directly program in JavaScript and interact with HTML without any installation of software or compiler.

Now let's start by typing console.log("Sup?") then press enter.

Now you should see Sup? on the next line.

That's how you can code in JavaScript, let DevTool be your first point of entry anytime you need to debug or test your syntax.


3. Start with some basics of JavaScript


4. Some real-world use cases (Finished last time)

Now let's write a script to change the background colors of your webpage every 2 seconds.

Steps (JavaScript):

  1. Create an array of colors.
  2. Find the h1 tag DOM element.
  3. Change it's background color by applying the content of the array at step 1
  4. delay 2 seconds after each color changes.

Result:


4.1 real-world use case II

Display a running digital clock on a page.

Starting Template

5. That's it for today!!