Programing foundations

Learning outcomes

In this module, we are covering the following knowledge learning

outcomes:
 The candidate has knowledge of primary concepts, core ideas and
general basic methods within programming.
 The candidate has knowledge of program syntax, program structure,
control structures, data types, and variables as used in the JavaScript
language.
 The candidate has knowledge of development and debugging within a
browser.
 The candidate has knowledge of industry relevant software used for
writing JavaScript code.
 The candidate can update their knowledge of basic programming
concepts.

The standard website consists of HTML templates, CSS styles, and JavaScript
scripts.

HTML presents static content. CSS is responsible for the modern and smooth
view of our HTML elements, while JavaScript (JS) is a programming language
enabling us to create dynamic content on websites.

Visual Studio Code is the most popular code editor for web application
development (and for many other applications like data science applications
written in Python). It’s available to download for free under a standard MIT
license. It contains numerous extensions which heavily improve the coding
experience.

This lesson guides through the installation process of Visual Studio Code and
presents a basic website structure. Examples of a standard web application
are presented and explained.

The lesson also provides an introduction to computer programming. We’ll

learn about variables and the basic operations we can exert on them.

Variables are containers for data. Before a value is assigned to a variable, it’s
like an empty whiteboard. However, the caveat is that we have different
types of whiteboards for different kinds of data. Imagine we have
whiteboards on which only numbers can be written and those on which only
character strings can be written.

The same applies to variables. Hence, with each variable, a type is

associated. We are free to choose this type when we construct a variable,
and we can change it after that, but if a variable has a given value assigned,
its type is uniquely determined.

Assigning a value to a variable is like writing on the whiteboard. When we

want to change a variable’s value, we simply assign a new value to it. It’s
like overwriting what has previously been written on the whiteboard. It’s still
the same whiteboard, but with a new value written on it.

We can also compare variables to Lego bricks since every variable is

(usually) different, and we can combine some variables to construct new
ones. It’s like introductory algebra. When we have two variables, say and ,
we can define a variable .

Variables can have various types. In this lesson, we’ll focus on numeric
types: Numbers and decimals. We’ll go through basic mathematical
operations such as addition, subtraction, multiplication and division.

There are some other useful operators like type, logical and bitwise
operators. We’ll also mention some examples.

To use the Snipping Tool when you have a mouse and a keyboard:
1. Press Windows logo key + Shift + S. The desktop will darken while you
select an area for your screenshot.
Getting started with Visual
Studio Code

 Open a folder
 File > Open Folder (Ctrl+K Ctrl+O)
 File Explorer
 View > Explorer (Ctrl+Shift+E)
 Search view
 View > Search (Ctrl+Shift+F)
 Source Control
 View > Source Control (SCM) (Ctrl+Shift+G)
 Run and Debug
 View > Run (Ctrl+Shift+D)
 Extensions view
 View > Extensions (Ctrl+Shift+X)
 Open the Command Palette.
 View > Command Palette... (Ctrl+Shift+P)
  Output panel
 View > Output (Ctrl+Shift+U)
 Debug Console
 View > Debug Console (Ctrl+Shift+Y)
 Problems panel
 View > Problems (Ctrl+Shift+M)
 Integrated Terminal
 View > Terminal (Ctrl+`)
 Create a new file
 File > New File (Ctrl+N)
 Save a file
 File > Save (Ctrl+S)
 Auto Save
 File > Auto Save
 Run
 Run > Start Debugging (F5)
 Programming language extensions
 Python - IntelliSense, linting, debugging, code formatting, refactoring,
and more.
 Live Preview - Hosts a local server to preview your webpages.
 Zoom
 Zoom out (Ctrl+-)
 Zoom in (Ctrl+=)
 Customize your editor with color themes.
 File > Preferences > Theme > Color Theme (Ctrl+K Ctrl+T)

Keyboard Shortcuts editor

Visual Studio Code provides a rich and easy keyboard shortcuts editing
experience using Keyboard Shortcuts editor. It lists all available
commands with and without keybindings and you can easily change /
remove / reset their keybindings using the available actions. It also has a
search box on the top that helps you in finding commands or keybindings.
You can open this editor by going to the menu under File > Preferences >
Keyboard Shortcuts.
https://academind.com/tutorials/visual-studio-code-introduction#selected-shortcuts-and-where-to-
configure-them

Extentions

https://code.visualstudio.com/docs/nodejs/extensions#:~:text=You%20can%20find%20JavaScript
%20extensions,you%20can%20search%20for%20Node
HTML5 document
HTML is a standard language for creating web pages. HTML stands for
HyperText Markup Language. It’s responsible for putting small bricks on our
side, from which we use more advanced technologies to create a fantastic
website.

In this section, we’ll go through the structure of the basic HTML5 file. HTML5
is the most recent version of HTML language.

<!DOCTYPE html>
<html>
<head>
<title>App</title>
</head>
<body>
Hello world!
</body>
</html>

Adding JavaScript into an HTML Document

You can add JavaScript code in an HTML document by employing the
dedicated HTML tag <script> that wraps around JavaScript code.
The <script> tag can be placed in the <head> section of your HTML
or in the <body> section, depending on when you want the
JavaScript to load.
Generally, JavaScript code can go inside of the document <head>
section in order to keep them contained and out of the main
content of your HTML document.
However, if your script needs to run at a certain point within a
page’s layout — like when using document.write to generate content
— you should put it at the point where it should be called,
usually within the <body> section.
Let’s consider the following blank HTML document with a browser
title of Today's Date:
index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Today's Date</title>
</head>

<body>

</body>

</html>

Copy
Right now, this file only contains HTML markup. Let’s say we
would like to add the following JavaScript code to the document:
let d = new Date();
alert("Today's date is " + d);

Copy
This will enable the webpage to display an alert with the
current date regardless of when the user loads the site.
In order to achieve this, we will add a <script> tag along with
some JavaScript code into the HTML file.
To begin with, we’ll add the JavaScript code between the <head>
tags, signalling the browser to run the JavaScript script before
loading in the rest of the page. We can add the JavaScript below
the <title> tags, for instance, as shown below:
index.html
<!DOCTYPE html>
<html lang="en-US">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Today's Date</title>
<script>
let d = new Date();
alert("Today's date is " + d);
</script>
</head>

<body>
</body>

</html>

Copy
Once you load the page, you will receive an alert similar to
this:

If we were modifying what is shown in the body of the HTML, we

would need to implement that after the <head> section so that it
displays on the page, as in the example below:
index.html
<!DOCTYPE html>
<html lang="en-US">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Today's Date</title>
</head>

<body>

<script>
let d = new Date();
document.body.innerHTML = "<h1>Today's date is " + d + "</h1>"
</script>
</body>

</html>

Copy
The output for the above HTML document loaded through a web
browser would look similar to the following:

Scripts that are small or that run only on one page can work
fine within an HTML file, but for larger scripts or scripts that
will be used on many pages, it is not a very effective solution
because including it can become unwieldy or difficult to read
and understand. In the next section, we’ll go over how to handle
a separate JavaScript file in your HTML document.
Working with a Separate JavaScript File
In order to accommodate larger scripts or scripts that will be
used across several pages, JavaScript code generally lives in
one or more js files that are referenced within HTML documents,
similarly to how external assets like CSS are referenced.
The benefits of using a separate JavaScript file include:
 Separating the HTML markup and JavaScript code to make both
more straightforward
 Separate files makes maintenance easier
 When JavaScript files are cached, pages load more quickly
To demonstrate how to connect a JavaScript document to an HTML
document, let’s create a small web project. It will consist of
script.js in the js/ directory, style.css in the css/ directory,
and a main index.html in the root of the project.
project/
├── css/
| └── style.css
├── js/
| └── script.js
└── index.html

We can start with our previous HTML template from the section
above:
index.html
<!DOCTYPE html>
<html lang="en-US">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Today's Date</title>
</head>

<body>

</body>

</html>

Copy
Now, let’s move our JavaScript code that will show the date as
an <h1> header to the script.js file:
script.js
let d = new Date();
document.body.innerHTML = "<h1>Today's date is " + d + "</h1>"

Copy
We can add a reference to this script to the <body> section, with
the following line of code:
<script src="js/script.js"></script>

Copy
The <script> tag is pointing to the script.js file in the js/
directory of our web project.
Let’s consider this line in the context of our HTML file, in
this case, within the <body> section:
 index.html
<!DOCTYPE html>
<html lang="en-US">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Today's Date</title>
</head>

<body>

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

</body>

</html>

Copy
Finally, let’s also edit the style.css file by adding a
background color and style to the <h1> header:
style.css
body {
background-color: #0080ff;
}

h1 {
color: #fff;
font-family: Arial, Helvetica, sans-serif;
}

Copy
We can reference that CSS file within the <head> section of our
HTML document:
index.html
<!DOCTYPE html>
<html lang="en-US">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Today's Date</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>

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

</body>

</html>

Copy
Now, with the JavaScript and CSS in place we can load the
index.html page into the web browser of our choice. We should see
a page that looks similar to the following:

Now that we’ve placed the JavaScript in a file, we can call it

in the same way from additional web pages and update them all in
a single location
Conclusion
This tutorial went over how to incorporate JavaScript into your
web files, both inline into an HTML document and as a separate
.js file.

From here, you can learn how to work with the JavaScript
Developer Console and how to write comments in JavaScript.