Day 15: Introduction to JavaScript

Welcome to Day 15 on Lance Code & Create.

For the past two weeks, we have learned HTML and CSS. We started by learning how to create web pages using HTML tags. Then, we learned how to use CSS to apply styles to our pages and improve the interfaces.

This week, our focus is going to shift towards JavaScript. JavaScript is the third element of the triad used to create web applications. In this lesson, we are going to discover what JavaScript is and how to integrate it with our HTML documents.

This lesson is divided into four main parts: the connection between HTML, JavaScript, and CSS; the different types of JavaScript based on the environment in which it's used and its syntax; what JavaScript can do; and lastly, a detour on the JavaScript engine and how to interact with it through the browser's console.

Connection between HTML, JavaScript, and CSS

While we were learning HTML, we realized that we could not do much when it came to aesthetics. Then, we leaned on CSS to help us. The process of bringing CSS and HTML together is achieved through three common ways: inline CSS, embedded CSS, and external CSS. Additionally, we can import CSS inside another CSS file using the @import directive.

It isn't possible to put HTML inside CSS, except with the content: property, which can accept, to some degree, snippets of HTML. However, this is negligible.

Concerning JavaScript, HTML allows us to include JavaScript by inlining, embedding, or using an external .js file. To use inline JavaScript, we make use of JavaScript-specific HTML attributes such as onclick="js here", onmouseover="js here", etc. To embed it, we use the <script> tag.

Example:

<script>
    // javascript code here
 </script>

To link the HTML document to an external javascript file, we use the <script> tag and pass it the attribut src.

Example:

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

On the other hand, JavaScript can create, modify, and remove HTML elements at any given point in the application flow.

Types of Javascript

When people start learning JavaScript, they often see it the same way everywhere. In reality, there are some nuances in JavaScript code depending on where it is run and what syntax is used.

Syntax

The syntax is an important aspect of learning any programming language, and JavaScript is no exception. However, JavaScript syntax can vary depending on how or where you write it. The only writing style that is common to all is what we call "vanilla" JavaScript, which is the bare JavaScript. Today, we also have many other subsets of JavaScript, such as TypeScript, NativeScript, JSX, etc. When you encounter code written in these subsets, you might feel intimidated, but you don't have to know them before qualifying as a JavaScript developer.

Environment

The environment is the key factor that separates JavaScript code. The concept of the environment is determined by the client/server architecture.

JavaScript was created to run in browsers. For a long time, people wrote it to interact with HTML documents. This is known as Browser JavaScript. With it, we manipulate the DOM, handle events, and sometimes perform networking using fetch().

Then came the idea of running JavaScript on servers, leading to the creation of JavaScript engines to execute code on servers. This means that some parts of Browser JavaScript, such as DOM objects like window, document, etc., are not available on the server side. The main engines/runtimes for this purpose are Node.js and Deno.

So, when learning, you need to pay attention to what type of JavaScript you are learning. In this course, we will focus only on Browser JavaScript.

What can Javascript do?

• DOM Manipulation: JavaScript can create, modify, and delete HTML elements on the page.
• Event Handling: It can respond to user actions like clicks, key presses, etc.
• Data Processing: JavaScript can perform calculations and manipulate data.
• Communication: It can send and receive data asynchronously using APIs.

Basic Syntax of Javascript

As a programming language, JavaScript has a syntax (its grammar) that we need to follow. You need to learn the concepts of programming, such as variables, data types, operators, functions, etc. Let's explore how to use them in JavaScript.

Javascript Variables

To create or declare a variable in Javvascript, we use the keywords var, let, const.

Example:

var students = 24;
let hourlyRate = 50.70;
const PI = 3.142;

Javascript operators

We can use all the arithmetic operators we are familiar with in mathematics, such ass +,-,/,*,%, etc. In addition to these, we have logical operators such as &&, ||, and comparison operators like ===, !==,>, <, etc.

Example:

let a = 10;
let b = 5;
let sum = a + b;  // Addition
let isEqual = (a === b);  // Comparison
let isTrue = (a > b && b < 10);  // Logical

Datatype in Javascript

JavaScript has seven core data types:

String: Represents text.
Example: let name = "Alice";

Number: Represents both integers and floating-point numbers.
Example: let age = 25;

Boolean: Represents true or false.
Example: let isStudent = true;

Undefined: A variable that has been declared but has not yet been assigned a value
Example: let x;

Null: Represents the intentional absence of any object value.
Example: let y = null;

Object: A collection of properties.
Example: let person = { name: "Alice", age: 25 };

Symbol: Represents a unique identifier.
Example: let sym = Symbol("description");

Assignment 15

Instructions:

HTML Setup:

• Create a simple HTML file named index.html.
• Include a basic structure with a <head> and <body>.
• Link an external JavaScript file named script.js using the <script> tag.

JavaScript Tasks:

• In script.js, declare three variables using each of the keywords: var, let, and const. Assign them appropriate values (e.g., a number, a string, and a boolean).
• Use console.log to print the values of these variables to the console.