Welcome to Web Scripting I (JavaScript)

Course Description

Course focuses on client-side scripting needed to create interactive and dynamic websites.
The use of scripting in context with various technologies is explored.
Prerequisites: IT 11002 and IT 11006; or CS 13001 and CS 27101; or EMAT 15310; or TECH 26301; or CIS 24065.

Student Learning Outcomes

By the end of this course, you should be able to do the following:

(1.) Identify a variety of assistive or adaptive technologies and universal design considerations.

(2.) Demonstrate best practices for designing end-user computing devices.

(3.) Summarize the differences among various programming languages.

(4.) Use a programming or a scripting language to solve a problem.

Vocabulary Words

console, internet, world wide web, web browser, web server, web applications, HTML, hypertext markup language, CSS, cascading stylesheet, JavaScript, ECMA, European Computer Manufacturers Association, ECMAScript, client-side scripting, server-side scripting, program, script, programming language, scripting language, front-end web development, back-end web development, Azure static web apps, IDE, Integrated Development Environment, Microsoft Edge, Mozilla Firefox, Google Chrome, window object, window object properties, window object methods, Visual Studio Code, Microsoft Azure, GitHub, Git, W3C, World Wide Web Consortium, DOM, Document Object Model, BOM, Browser Object Model, API, Application Programming Interface,

Objectives

Students will:
(1.) Discuss the JavaScript scripting/programming language.
(2.) Write JavaScript programs on the console.
(3.) Write JavaScript programs on the web.
(4.) Develop a web application (website) using GitHub.
(5.) Develop a website using Microsoft Azure.
(6.) Summarize the differences among various programming languages.

Recommended Readings and Videos

(1.) Textbook Chapter

(2.) Tutorials by w3schools: From JS HOME to JS Const
(https://www.w3schools.com/js/default.asp)

(3.) Quickstart: Building your first static site with Azure Static Web Apps by Microsoft
(https://docs.microsoft.com/en-us/azure/static-web-apps/getting-started?tabs=vanilla-javascript)

Videos:
Please click the RESOURCES tab of this website
Click the LinkedIn Learning (Kent State University) link
Follow the directions to access the website.
(4.) Type JavaScript in the search bar and view the introduction chapter.

Videos and Textbooks:
Please click the RESOURCES tab of this website
Click the O'Reilly Online Learning link
Follow the directions to access the website.
(5.) Type JavaScript in the search bar and view/read the introduction chapter.

Required Readings

First Task:
(1.) Please right-click this website.
This website is the HTML.

(2.) Click View page source
How many lines of code do you see? (Please do not feel intimidated 😊)

(3.) Do CTRL + F (Control key + Find) for Windows users or CMD + F (Command key + Find) for Mac users
Type .js (.js is the file extension for a JavaScript file)
What lines did you find .js?

Second Task:
(1.) Please visit: Module 1: Introduction to JavaScript
(https://salmon-pebble-01912e010.azurestaticapps.net/)
and/or
Module 1: Introduction to JavaScript
(https://samdom4peace.github.io/web-scripting/)

(2.) View page source.
How many lines of code do you see?
Is this better? Do you still feel intimidated? (Let me know when you attend the Office Hours/Live Sessions) 😊
Do you understand the comments?

(3.) Search for the JavaScript file (.js)
What line did you see it?
What is the name of the JavaScript file?

(4.) Click the JavaScript file.
Do you understand the code?
Do you understand the comments?

(5.) Search for the CSS file (.css)
What line did you see it?
What is the name of the JavaScript file?

(6.) Click the CSS file.
Do you understand the code?
Do you understand the comments?

What is JavaScript?

Before we define JavaScript, it is important to define some terms.

A Computer Program is a set of instructions given to a computer to perform specific tasks.

A Computer Programmer also known as a coder is a person who writes computer programs.

A Programming Language is the language used to write computer programs to perform specific tasks.
It is written by a computer programmer in a language that the programmer understands (high-level language also known as source code) but not in a language that the computer understands (machine language also known as machine code).
Therefore, it is important to transform the computer program from the source code into machine code so that the computer can understand and run (execute) the program.
To transform (convert) source code into machine code, a compiler or interpreter is required.

A Compiler converts the entire computer program as a whole into machine code.
If it sees any error in the program, it will not compile.
If it does not compile, the program willnot run (execute).
This implies that all errors must be fixed before the program runs.

An Interpreter converts the computer program one statement at a time.
Because it converts it one at a time, the program runs up until the interpreter encounters any error that may prevent the rest of the program from running.

A Scripting Language or a Script or Scripting is a programming language that is interpreted rather than compiled.

Client-side Scripting is the scripting language that runs on the client's web browser (client's tier).
This implies that web browsers are interpreters.

Server-side Scripting is the scripting language that runs on the hosting company's web server (processing tier).

JavaScript is basically a client-side scripting language.
Kinda interesting, it has been continuously developed and used for several applications than it's initial/intended purpose.
So, even though it is primarily a client-side scriping language, we do have server-side JavaScript such as Node.js
In addition, even though JavScript is interpreted, it can also be compiled (it is compiled to machine code by Google Chrome's V8 JavaScript engine).
Be it as it may, a simple basic definition of JavaScript is:
JavaScript is basically a client-side interpreted scripting (or programming) language.
All scripting languages are programming languages because it converts/translates source code into machine code even though it does it one statement at a time.
JavaScript is a derivative of the C programming language.
This is the list of the programming languages derived from C programming language.
(https://en.wikipedia.org/wiki/List_of_C-family_programming_languages)
As we can see, ECMAScript is one of the family members.
ECMA stands for European Computer Manufacturers Association.
JavaScript is a major implementation of ECMAScript.
It is based on three foundations:

(1.) ECMAScript: is the programming language that provides the program structure, syntax, and code conventions for writing JavaScript.

(2.) Document Object Model (DOM): is the model that represents the objects that make up the contents and structure of a web document (HTML document).
It allows JavaScript to access and change the HTML elements (objects), the HTML attributes, the properties of the HTML elements, the methods used to access the HTML elements, and the events for the HTML elements in a web page.
The DOM is a W3C (World Wide Consortium) standard object model.

(3.) Browser Object Model (BOM): is the model that represents the objects provided by the browser.
It allows JavaScript to access the features and behaviors of the browser.
The BOM is browser-dependent (depends on the browser). There is no standard model for the BOM.

Languages of the Web

The three main languages of the web are:
(1.) HyperText Markup Language (HTML): .html file extension
(2.) Cascading Style Sheets (CSS): .css file extension
(3.) JavaScript: .js file extension

Most likely, you learned HTML and CSS in the pre-requisite course(s).
In this course, we shall learn JavaScript.
This course is written in a very simplified form to ensure that you understand it.
If you do not understand any concept, please attend the Office Hours/Live Sessions for verbal explanations.
Because JavaScript is a language of the web, we need to use a web application (website).
Hence, web applications are required for all course assessments.
How is JavaScript different from CSS and HTML?
What can we do with JavaScript?
How can we enhance the functionalities of a web application using JavaScript?

Let us write our first JavaScript code (a quick one):
(1.) Clear all the history/browsing data from any of these browsers: Internet Browsers
(https://www.samdomforpeace.com/InternetBrowsers/internetBrowsers.html)

(2.) Use the Developer tools in any of these browsers:
Google Chrome:



Mozilla Firefox:




Microsoft Edge:



Let us use Google Chrome developer tools.
But, you can use the developer tools of any browser of your choice.
Clear the console by right-clicking any error or warning you see, and clicking Clear console


(3.) Write some JavaScript code in the console, and see the results in the browser.


Student: Mr. C
Teacher: I'm listening
Student: Why would you use JavaScript to write the code?
When you could easily write it with HTML?
Teacher: You asked a very good question.
This implies that we can embed HTML code in Javascript...because we used JavaScript to write HTML code.
Similarly, we can also embed JavaScript code (using the opening <script> and closing </script> tags) in HTML. We shall discuss it later as we make progress.
But here's the answer to your question.
HTML is used to write static content...content that does not change.
JavaScript is used to write both static and dynamic content.
Dynamic content changes.
You can use JavaScript to write content that changes anytime a user refreshes the browser, or anytime a user opens a browser, or anytime a user clicks an object or an image, among others.
That is one of the main functions of JavaScript...creating websites with dynamic content or creating dymanic websites, and creating websites that users can interact with among others.
Let me show you an example.
Let us and clear the console and write another code.





Did you notice the user interactivity in this second code?
Let us review what we have written so far:
// What is the most remarkable thing written on the United States dollar?
This is a comment
Comments in JavaScript begin with two forward slashes (double forward slashes)...just as we write the comments in C++, Java, and C#

let is the keyword used to declare a variable
We can also declare a variable using the var keyword
We shall discuss these as we progress through the course.

mostRemarkable is the variable we declared.
This is the content that can change on user input, hence it is the variable. It varies based on user input.

IN GOD WE TRUST is the value of the variable.
It is the value of the user input (whatever the user enters).

prompt is the Window prompt() method.
It is one of the methods of the Window object (an open window in a browser).
prompt can also be written as window.prompt

The plus/addition sign, + is known as the concatenation operator or the concatenator
We used it to join/connect the static content that we wrote with the dynamic content entered by the user.

document.writeln() is the HTML DOM (Hypertext Markup Language Document Object Model) method for adding a new line after writing a statement. The ln indicates a new line.
This implies that document.writeln does not add a new line after writing a statement.
As you have probably noticed, we inserted a semicolon after each statement in our JavaScript code.
However, in certain circumstances; the semicolon is not required. For example: if only one statement is written and if that statement is written on a single line, we can omit the semicolon.
But if multiple statements are written, then it is important to separate each statement using a semicolon.
Be it as it may, for consistency with other C-family programming languages such as C++, C#, and Java; we shall insert semicolons at the end of each statement as applicable.

We have so much more to learn about JavaScript.
The Developer tools we used to write our first code will be helpful in debugging our code.
However, going forward; we shall not be using it to write our code.
We shall only use it to debug our code.

For good teaching and learning of JavaScript, we need:
(1.) an IDE (Integrated Development Environment) that will enable us to write and run HTML, CSS, and JavaScript.
We want an IDE that is great and free.
We shall be using Visual Studio Code

(2.) a web hosting service company that will host our website.
We need a free web hosting service.
Because of the free web hosting service, we want a domain name (name for our website) as well.
Hence, the domain name for our website will be a subdomain of the web hosting company.
We shall be using Microsoft Azure for Students
(https://azure.microsoft.com/en-us/free/students/)
Click the Start Free button and register with your school email address.

Because I am the instructor (not a student), I am not permitted to use it.
However, I shall use the Microsoft Azure (the free-tier though it requires a credit card/debit card) rather the the Microsoft Azure for Students (that does not require a credit card/debit card).

Student: Mr. C, I checked some of your websites and it has appspot.com
Is that the same for Microsoft Azure?
Teacher: No, it is not.
The appspot.com is from Google Cloud
The azurestaticapps.net is from Microsoft
Student: So, why are we not using appspot.com from Google?
Why are you not teaching us what you are using already?
Teacher: Good question.
Did you notice ads on my websites?
Student: Yes Sir
Teacher: Those websites with appspot.com are free tier
However, when the free tier limit is exceeded, Google charges me for the usage.
Student: So, are you saying that your websites with appspot.com are not free?
' Teacher: They are not "really" free.
Hence, the ads on them.
They are free to a certain limit.
Then, I pay when the limit is exceeded.
So, if I teach you to host your website with Google Cloud, you will need to enter a credit card or debit card information.
The services will be free for sometime.
After the free period ends, your card will be charged if the daily limit for certain services are exceeded.
In other words, if you exceed the daily quota for some services, you will pay for it.
Student: So, the ads helps you pay for the website?
Teacher: Yes, if ...
There are some conditions.
We can discuss Website Monetization during the Live Sessions/Office Hours.
Ask me when you attend any of the Live Sessions/Office Hours.
Let it be one of the advantages of taking this course with me.
I do not want to discuss it here.
Student: Okay.
What is the difference with the Microsoft Azure?
Teacher: Microsoft is generous to allow students to use the Azure services for free without entering a credit/debit card information.
I appreciate their generosity.
But I have to enter my card information because I am not a student.
Student: So, in terms of payment; it's essentially like Google I guess
Teacher: Well, except for a minor difference...
For Microsoft Azure, I have to enable my card when the free period ends and if I exceed the quota for free services. This is for them to charge my card.
If I do not enable it, they will stop serving my application (website). For Google Cloud, they will not stop serving my application but they will charge my card.
Student: What are these services?
Teacher: Visit this website and scroll down to see some of them:
(https://azure.microsoft.com/en-us/free/students/)

Let's get started:
(https://docs.microsoft.com/en-us/azure/static-web-apps/getting-started?tabs=vanilla-javascript)

If you have any issues with any of the pre-requisites: creating accounts, downloading and installing any of the software; please attend the Office Hours/Live Sessions.

Pre-requisites:

(1.) GitHub account:
Create a free GitHub account: (https://github.com/)

(2.) Azure account:
Create a free Azure account for Students: No credit card information: (https://azure.microsoft.com/en-us/free/students/)

(3.) Visual Studio Code:
Download and Install Visual Studio Code: (https://code.visualstudio.com/)



We will download the Stable version rather than the Insiders version.
This is because the Insiders version is a beta version. It has the most recent code features. However, it may lead to occasional broken build. In other words, it is not yet stable.
So, we shall go with the Stable version.



















Leave the Visual Studio Code environment open because we shall install an extension next.

(4.) Azure Static Web Apps extension for Visual Studio Code:
Install the Azure Static Web Apps extension for Visual Studio Code
(https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurestaticwebapps)















Close the Visual Studio environment.

(5.) Git:
Download and Install Git
(https://www.git-scm.com/downloads)







































Restart your computer.

Personalize Visual Studio Code Settings

Let us personalize some settings on the Visual Studio Code.
Then, we shall write HTML, CSS, and JavaScript codes.
Back to Visual Studio Code:

(1.) Open the Visual Studio Code
Please follow these directions to personalize it.
You may use your own settings.
However, please ensure you use the minimum font size.









HTML
Based on your prior knowledge of HTML:
Single-line comment in HTML iss written as:

                            <!-- This is a single-line comment --> 
                        

Multi-line comments in HTML are written as:

                            <!-- 
                            These 
                            are
                            multi-line
                            comments
                            -->
                        

Let us write some HTML code for our website.











To review the entire HTML code, please:
(1.) Right-click the new website
(2.) Click View Source

Compare the View Source of the new website with the View Source of the course website
Which one do you prefer?

CSS
Based on your prior knowledge of CSS:
Single-line comment and Multi-line comments are written as:

                            /* This is a single-line comment */ 
                            OR
                            /*
                            These 
                            are
                            multi-line
                            comments
                            */ 
                        

Let us write some CSS code for our website.











To review the entire CSS code, please:
(1.) Right-click the new website
(2.) Click View Source
(3.) Click the link: Module1.css in the head element

Link the CSS to the HTML (See the header element of HTML)
Preview the HTML file (Module1.html) on the browser.
For us to do this, we need some extensions from the Visual Studio Code Marketplace.
No worries ...we shall be using free extensions from the Marketplace.

The extensions that we need are:
(1.) Class autocomplete for HTML by AES Soft
(2.) html-live-server by Naveen Vignesh
(3.) JavaScript Code Snippet by NicholasHsiang
(4.) replace-selected by pradip

Please review the screenshots for directions in installing the extensions.
















Close the Visual Studio Code environment.


Open the Visual Studio Code software.
Let us go ahead and run what we have done so far: preview the HTML on a Google Chrome browser











So far, we have been writing HTML and CSS code.
Now, we need to write JavaScript code.
There are several ways to write JavaScript:
(1.) Embed JavaScript directly in HTML: we can write JavaScript code, enclose the code within the opening <script> and closing </script> tags, and embed it directly in HTML.
Just as we embed HTML directly in JavaScript (as we did in the first application we wrote in this module), we can also embed JavaScript directly in HTML provided we use the opening and closing script tags.
This can be done in the head or body element of HTML.
However, for this course and for best practices; please do not embed any JavaScript in the head element.
Any JavaScript embedded in the head element will lead to deduction of points.
If you choose to embed JavaScript directly in HTML, please embed it in the body element only.
This is because we do not want to affect the load time of your website because of a script.
HTML loads from top to bottom. If the JavaScript is placed in the head element, depending on the script and the browser; it may slow the load page of the entire HTML because it has to run first before the body of the HTML.
Be it as it may, embedding a JavaScript directly in HTML in some circumstances; is not the better coding practice.
You may choose to do it.
However, it is not the better coding practice.

(2.) Link to an external JavaScript file.
A JavaScript file has .js file extension.
This is the better coding practice for writing and running JavaScript code.
Please note that the link to the external JavaScript must be placed in the body element (not the head element because of the reason stated in the previous paragraph).
The link to the JavaScript file should be placed just before the closing body tags: </body>

NOTE:
(I.) The link to the external Cascading Style Sheet (.css) must be placed in the head element of HTML.

(II.) The link to the external JavaScript file (.js) must be placed directly before the closing body tag in the body element of HTML.

Let us write some JavaScript code for our website.

JavaScript
Single-line comment in JavaScript is written as:

                            // This is a single-line comment
                            

Multi-line comments in JavaScript are written as:

                            /*
                            These 
                            are
                            multi-line
                            comments
                            */ 
                        

To review the entire JavaScript code, please:
(1.) Right-click the new website
(2.) Click View Source
(3.) Scroll down to the bottom of the page and click the link: Module1.js just before the closing body tag

Link the JavaScript to the HTML (See the body element of HTML, just before the closing body tag)
Preview the HTML file (Module1.html) on the browser.





This is now JavaScript at work:
Notice the user interaction: the user input, the clicking of the button (the click event) and the subsequent output to the user.


We also used JavaScript to clear all entries so the next user can sign in.


What is the address of the HTML site? http://localhost:5050/
Well, this application is not on the web because it has not been published.
It is only on the local machine: the computer.
So, we need to publish it on the web.
Let us create a repository in GitHub.
GitHub requires at least one HTML file named: index.html
But we named our HTML: Module1.html
So, we need to rename it.
Let us make some changes in this regard:
1st: Rename all Module1 files to index files
2nd: Replace all Module1 instances in these files to index instances
Often, you may need to rename files and/or replace certain instances in files with something else, or delete certain instances in files.
So, let's do it.

Rename Files








Replace Word Instances in Files in Visual Studio Code
Open Visual Studio Code
Open each file: index.html, index.css, and index.js
In each file, select the section in which you want to replace the word instance.
In this case, let us select the entire file because we want to replace all Module1 instances to index instances.
Do CTRL + A to select the entire content in each file (document).
Right-click the document and click the Replace Selection
In the replace from field, type Module1
In the replace with field, type index
Press the ENTER key to replace the Module1 instances with index instances.
Do this (Replace this instance) for each file.











Save all changes.
Run the changed HTML file: (index.html) and test it to ensure that everything runs well.


Let's head on to GitHub (https://github.com/) to create a new repository.


























Visit our new website at: https://samdom4peace.github.io/web-scripting/
(https://your-username.github.io/your-repository-name)
Go ahead and test it...test to ensure the JavaScript works.


Edit the README.md and make some chnages.






As you can see, we had to click the Commit changes button after making the change.
Whenever you make a change in GitHub such as uploading new/updated files to replace existing files or changing the content of existing files, please ensure that you click the Commit changes button to effect that change.

We have published our site with GitHub.
However, our intended goal is to publish it to Microsoft Azure via GitHub.
So, let us go ahead and publish to Azure.
We begin by creating a new repository and making it a template.
In other words, let us create a template repository.













(1.) Visit the website: (https://github.com/samdom4peace/javascript/generate) to create a new repository from the javascript template.

(2.) Name the repository: welcome-to-our-javascript-class

(3.) Click the Create repository from template button













(4.) Go to Git Bash in your computer.


or double-click the icon on your website:


Clone the repository using this command:
git clone https://github.com/samdom4peace/welcome-to-our-javascript-class.git





The default location of the cloned repository is C:\Users\chukw\welcome-to-our-javascript-class



(5.) Open the Visual Studio Code.
Open the cloned repository.
































We have successfully published our website via Azure.
The domain name of our new website is (https://witty-forest-07e0dda10.azurestaticapps.net/)


We have accomplished this task.
However:

Student: Mr. C, can we change the domain name of that website?
Teacher: I wish we could.
But, we cannot.
It is autogenerated by the system.
What we could do is to use a custom domain name and map it to that domain name?
But you should not do that for the work done in this course.
For FERPA (Family Educational Rights and Privacy Act) reasons, please use that domain name as is.
Student: But, I would like to know how to use my custom domain name for my personal website (not for this course).
Teacher: Not a problem.
Please attend the Office Hours/Live Sessions so I show you how to do it.
It has to be done via your Microsoft Azure account.
We have accomplished this task.
However, there is a concern...not a big concern but a concern.
Student: What is it?
Teacher: Two copies...
Student: Yes, two copies of the website files:
Teacher: One copy on my OneDrive and the other copy on the username folder of the Users folder on the C: Drive from where it was published.
Student: It will be nice to just have a copy and also publish from there.
Teacher: Exactly. Let's do that.
Student: I have another question.
When we make changes to any of these files, how do we publish those changes?
Teacher: Just as we explained for the GitHub website, we have to Upload the updated files to overwrite the existing files, then we click the Commit changes button to publish the updates/changes.
Okay, let's go ahead and publish from OneDrive.

(6.) Get the location of the OneDrive folder containing the files.
It is: C:\Users\chukw\OneDrive\Documents




Open Git Bash
Change the current directory to the new OneDrive directory
cd /c/Users/chukw/OneDrive/Documents/JavaScript


We shall repeat the process we did earlier.
Go ahead and clone the GitHub template


Delete the clone (cloned copy) located in the C:Drive Users username folder
Go to the new directory in OneDrive and verify the new clone
We now have the main folder: the JavaScript folder in OneDrive that contains our:
(a.) working HTML file.
(b.) working CSS file.
(c.) working JS file.
(d.) the cloned GitHub folder containing the application.


Delete the website and Publish another one from this location
We have already published our website: (https://witty-forest-07e0dda10.azurestaticapps.net/)
However, let us delete it (to show you how to delete it) and publish a new website.
So, we shall go ahead and open only the clone in Visual Studio Code.








The website: (https://witty-forest-07e0dda10.azurestaticapps.net/) is now unavailable because we have deleted the application.

Let us go ahead and publish a new one from this location.
Click the plus, sign, + and follow the same steps we did earlier.


Wait for some minutes for the site to be published.


Our new website is (https://salmon-pebble-01912e010.azurestaticapps.net/)



Reminders: Please NOTE:
Anytime we make any change in any of the files, we need to:
(1.) Sign in to the GutHub account

(2.) Click the template and upload the updated files.
Those updated files overwrite the existing files.

(3.) Click the Commit changes button.

I shall go ahead and delete the empty Module1 folder on my computer because I have no need for it.
Let us write another application.

Teacher: Do you remember how we reuse codes in programming?
Student: Code Reusability?
Teacher: Yes ...
Student: Functions?
Teacher: Yes. Functions enables us to reuse codes in Functional Programming.
How do we reuse codes in Object-oriented programming?
Student: Functions
Teacher: Yes, but what is the actual term?
Student: Classes
Teacher Classes (which also includes functions) and Class Libraries enables us to reuse codes in Object-oriented Programming.
If we want to reuse HTML and CSS, what should we do?
Student: Use a template.
Teacher: That is correct.
To save us time with HTML and CSS, let us use Responsive Templates
Student: Similar to the bootstrap.css and Site.css that came with the defualt?
Teacher: Yes.
But, we shall use our own.
Responsive design makes the web pages to render well on several devices such as computers (desktops and laptops), tablets, and mobile devices; and on several screen sizes from minimum to maximum display size.
It saves us time.
Just as we reuse software (software reusability increases productivity), reusing templates saves time, thus increasing productivity.

We shall use the responsive design templates from W3 Schools
Please visit: Responsive Web Design Templates
(https://www.w3schools.com/Css/css_rwd_templates.asp)
As at today: 09/05/2021; W3Schools give us the permission to modify, save, share, and use them in all our projects.



They do not require us to link to them directly on our websites (as several other companies that offer free templates do).
However, we shall acknowledge them in the source code of our CSS.
Remember: it is very important to acknowledge someone or some company if you use any of their code even if they do not require that you acknowledge them.
You may use any of the templates on their website (that website) to develop your web application.
To use any of the HTML, please click the Try it Yourself link
You will see the source code for the HTML as well as the HTML web page (Split View)
To use the CSS, look at the head element in the HTML source code and look for files that end in .css
Copy the web link (URL) of any website in the head element of the code that has .css, and paste it in a new browser window.
You will see the CSS code.

If you think you may be overwhelmed by the CSS code you see there, do not worry.
Visit my portfolio
(https://www.chukwuemekasamuel.com/portfolios.html)
Click any web app in that portfolio.
Right-click the web page.
View page source.
Inspect the head element of the HTML code and look for any CSS file (.css file extension)
Click it and you will see a modified CSS code
Did you notice that I acknowledged the sources from which I modified the code even though I was not required to do so?
You may use my modified CSS.
If you think you are also overwhelmed by my modified CSS in any of my web applications, please attend the Office Hours/Live Sessions so we can go over it.
I can show you the only CSS elements that you need. That way, you will not be overwhelmed.

For this application, we shall use the CSS code from my website: Sequences and Series
(https://www.samuelchukwuemeka.com/Sequences/sequences.html)
So, right-click the website and View page source
Inspect the head element and you will see two CSS files (stylesheets) on Lines #39 and #40



Copy the CSS code of only Line #39: styles/sequences.css
The stylesheet on Line #40 is a web link so we shall include it as is. There is no need to click it. We shall reuse it as is

Writing our Second JavaScript Web Application

We want to create a new website that will contain the subsequent applications that we shall develop in this course.
Let us do the following tasks.
(1.) Create a Github respository template that will serve as the template for this website.









(2.) For that home page of the Sequences and Series website
(https://www.samuelchukwuemeka.com/Sequences/sequences.html)
View page source
In the Downloads folder on your computer (or any temporary location):
(a.) Save the source code for the HTML as index.html





(b.) Save the source code for the CSS as index.css







(c.) Save the source code for the JS as index.js







(3.) (a.) Go to the source code of the HTML (View page source) and check the box: Line wrap to "wrap" long-length codes.


(b.) I am going to use my picture.
However, for FERPA reasons; please do not use your picture because it is a PII (Personal Identifiable Information).
You may use appropriate copyright-free pictures.
I can explain to you how to get those from the web. Please attend the Office Hours/Live Sessions so I can show you.


(4.) Favicon: A favicon is an icon that is displayed along the title of a web page.
It is also known as a URL (Uniform Resource Locator) icon or a website icon.
I shall use my favicon
Again, for FERPA purposes, for this course; please do not use any favicon that has your picture such as this one from one of my website:


But you may use favicon that has your initials such as this one:

You may create/generate favicons with any of these websites: https://www.favicongenerator.com/ and/or https://www.favicon-generator.org/ among others.







(5.) Create two folders: FunctionalProgramming and Object-orientedProgramming in the Downloads folder for a start.
Notice there are no spaces in the folder names. Avoid spaces in names of files and folders.
We shall create more folders as we progress through the course.
To create a new folder, right-click an empty space in the Downloads folder area and click New →Folder


(6.) Select (click on one file to select it and press the ctrl key to select other files) the files: chukwuemekasamuel.jpg, favicon.ico, index.css, index.html, and index.js; then Drag (or Cut and Paste) into the FunctionalProgramming folder.
So, this implies that the FunctionalProgramming folder contains the files while the Object-orientedProgramming folder is empty.


(7.) Select both folders: the FunctionalProgramming folder and the Object-orientedProgramming (click one folder to select it and press the Control key to select the other folder), and drag these folders into the javascript-modules template in GitHub.






As you probably noticed, the Object-orientedProgramming folder was not included. No worries. It was not added because there are no files in it.
So, let us copy the favicon.ico file and include it in the Object-orientedProgramming folder.


Then, we drag and drop the folder again.
Then, commit changes. Please ensure you commit changes whenever you make any change that you wish to apply.


(8.) Create a new repository in GitHub: javascript-topics from the javascript-modules template.
Visit the website: (https://github.com/samdom4peace/javascript-modules/generate) to create the new repository from that template.




As you can see, it has the same folders and files as the template.

(9.) In the Git Bash software on your computer, clone the javascript-topics repository using the command:
Change the location if you wish.
I want the location to be on my OneDrive.
git clone https://github.com/samdom4peace/javascript-topics.git


Confirm that it has been cloned in the location of your choice.


(10.) Open the cloned repository: javascript-topics folder from OneDrive, in Visual Studio Code.
I noticed that the index.css and index.js displayed well.
However, the index.html did not display well. So, I am just going to select all the contents, delete it, copy the source code again from the View page source of that website, and paste it.


Copy the HTML from the page source code and paste it.
Let us make some changes to the HTML.
We shall use the minimum code that we need.




For the JavaScript application, let us write a simple code: the date object in JavaScript.
It is Line #60


Okay, let's continue.



Notice we did not use the index.js in this example.
Rather, we embedded the script directly in Line #60 ((one of the ways of writing JavaScript code that we discussed earlier).
Let us run the index.html file.
In other words, let us preview the page on the browser.


(11.) We made changes to the HTML file in OneDrive
However, this is no longer the same HTML file in the GitHub repository.
So, we need to just replace the HTML file: index.html in the javascript-topics repository.
Let us add all the files in that repository and Commit Changes
The files will then overwrite the existing files there.




(12.) Publish the web application so we can have a website.

If you do not see your subscription in Azure and you know that you subscribed initially, then you will need to sign in.
Press Ctrl + Shift + P on your keyboard
Then, type Sign in
Go ahead and sign in.
Then, you will see the subscription.


Just as we did previously:
(a.) Click the Azure icon on the LHS (Ctrl + Shift + A)


(b.) Because we changed the location of our git application from the C:Drive to OneDrive, we will need to configure the global user.email and the global user.name
Open the command prompt by typing cmd in the Windows search bar at the bottom left hand side of your Windows PC
Write these codes
cd C:\Program Files\Git\bin
git config --global user.email "your email"
git config --global user.name "your name"

Press the ENTER key and close the window.


If you did not change the default location of the Git, then you may skip this step.

(c.) Right-click the Azure subscription 1 and Create Static Web App...
















Yes, we have published our JavaScript: Functional Programming website
(https://purple-hill-013681910.azurestaticapps.net/)

Please Note:
When you make any changes in the HTML, CSS, and/or JavaScript files, please make sure you add the changed files in the appropriate location in the GitHub repository and commit changes. Then, wait a few minutes and you will see the changes in your website.

When you make any change in the CSS file and you do not see the change in your website, then your internet browser is probably caching that file.
To fix it, please clear the browsing history of your browser from the beginning of time.
(https://www.samdomforpeace.com/InternetBrowsers/internetBrowsers.html)

We shall continue with this application in Module 2.
Going forward:
To save us time from pasting all screenshots; please View page source of the published website in order to see the HTML, CSS, and JS.
I shall write comments as usual, to ensure good understanding of the concepts.
As necessary, we shall only paste screenshots of specific changes that we do, and the resulting output.

Student: Mr. C
Teacher: Yes, my dear.
Student: I am not your dear.
Teacher: What's up?
Student: I know you have explained publishing with Microsoft Azure several times.
But, I still don't get it. I feel I may run into some issues when I do it myself.
Teacher: No worries. Attend the Live Sessions and I shall help you with it.
Student: My schedule conflicts with the live sessions.
Teacher: Send an email to me and we can schedule the time that works for you.
Student: And I don't want to use GitHub because I want to use folders.
Besides, I do not want to keep creating new websites for each module.
Teacher: That is the advantage of using Microsoft Azure.
We can use as many folders as we want. We just have to ensure there is an index.html in each folder for the website that we want to publish because GitHub looks for index.html... for free accounts
Student: So, my actual question is:
Is there any other web hosting company that I can use? A web hosting company that will make it easier to publish, manage files and folders and publish any changes made to the files.
Teacher: You do know that once you can get the website published to Azure via Visual Studio and you make changes, you just need to drag and drop the changed files into GitHub and commit changes.
Student: I know.
But the process is kinda cumbersome.
Do you know of other free web hosting companies that you recommend?
Teacher: Yes, I can recommend one right away.
Did you notice this in one of the previous screenshots?


Student: Yes.
Teacher:: It is W3Schools Spaces
(https://www.w3schools.com/spaces/)
I have not used it. But it is worth trying.
As written on the website, it has playground for HTML, CSS, and JavaScript.
Try it. If you have any questions about using it, please let me know so I can try it myself and answer your question.

Some Substantive Posts

Please Note:
(a.) Use only your first name or only your last name or your nickname (if good) for all your web applications including the URL of your website (domain name) and the copyright in the footer among others.
(b.) HTML is required.
(c.) CSS is required.
(d.) JavaScript is required.

(1.) Discuss the history of JavaScript.

(2.) Write a short story, a poem, or drama, or any appropriate topic in any academic field using at least five sentences.

(3.) Using appropriate examples, explain any five new terms learned in this module.

This is the list of the programming languages derived from C programming language.
(https://en.wikipedia.org/wiki/List_of_C-family_programming_languages)
JavaScript (ECMAScript) is a derivarive (family member) of the C programming language.
We have compared some of these languages.
One of the Student Learning Outcomes [Number (3.)] is being able to: Summarize the differences among the various programming languages.
(4.) Select these members of the C-family languages: C++, C#, Java and JavaScript and contrast these languages.
In other words, summarize the differences among these four programming languages.

(5.) TextBook: Hands-On Project 1-1 on Page 31

Examples of Substantive Posts

(1.) Module 1 by John (https://blue-stone-0929a270f.azurestaticapps.net/)

Some Substantive Responses

(1.) Provide any of these details if they are lacking in any DB post:
Well-written comments; another approach/method to solving the question; any additional relevant details; etc.

(2.) Add to the post of the student who explained any three new terms learned in this module.

(3.) Use another language other than JavaScript to develop the same application of your colleague.

Examples of Substantive Responses

(1.) Module 1 by John (https://witty-sea-08eb51b0f.azurestaticapps.net/)

Check Your Understanding

Please Note:
(a.) Use only your first name or only your last name or your nickname (if good) for all your web applications including the URL of your website (domain name) and the copyright in the footer among others.
(b.) HTML is required.
(c.) CSS is required.
(d.) JavaScript is required.

(1.) In your academic major (discipline), find two topics.
Speficy your major. Do some research on your major.
Write at least using at least five sentences on each topic.
One topic should be written on the home page.
The other topic should be written on the other page.
The link to the other page should be on the home page. It should not be set to open in a new window.
The two pages (home page and other page) should have the same layout.
Recap: A web application, two pages (same layout), two topics, five sentences of different variables and data types on each topic.

TextBook Questions
(2.) Hands-on Project 1-2 on Page 32

(3.) Hands-on Project 1-3 on Page 33

(4.) Hands-on Project 1-4 on Page 34

(5.) Hands-on Project 1-5 on Page 35

Vocabulary Words

functional programming, variables, scope, block scope, block, function scope, local scope, global scope, let keyword, var keyword, const keyword, readonly variable, data types, operators, operations, identifiers, hoisting, declaration, redeclaration, local variables, global variables, date object, parameters, date, time, reserved keywords, window objects, dynamic language, primitive values, objects, Boolean type, Null type, Undefined type, Number type, BigInt type, String type, Symbol type, lowercase, uppercase, Pascal case, Camel case, snake case, expression, statement, expression statement, assignment statement, increment and decrement statements, declaration statement, control flow statement, decision-making statements, conditional statements, decision, selection statements, looping statements, branching statements, branches, repetitive statements, iteration statements, loops, for loop, while loop, do-while loop, for-each loop, jump statements, break, continue, operator, operation, operand, operator precedence, assignment operator, arithmetic operators, addition operator, subtraction operator, division operator, remainder operator, modulo operator, compound assignment operators, unary operators, unary plus operator, unary minus operator, increment operator, decrement operator, increase, decrease, logical complement, logical operators, bitwise and bit shift operators, conditional ternary operator (ternary operator), equality and relational operators, comparison operators, conditional operators,

Objectives

Students will:
(1.) Discuss the meaning of variables in JavaScript.
(2.) Discuss the data types in Javascript.
(3.) Write JavaScript programs involving the use of variables and data types.
(4.) Discuss the operators in Javascript.
(5.) Perform operations on variables/values.
(6.) Write JavaScript programs involving the use of operators.
(7.) Discuss date objects in JavaScript.
(8.) Write JavaScript programs involving the use of date objects.
(9.) Discuss statements in JavaScript.
(10.) Write JavaScript programs involving statements.

Recommended Readings and Videos

(1.) Textbook Chapter

(2.) JavaScript Tutorials by w3schools
(https://www.w3schools.com/js/default.asp)
From JS HOME to JS Data Types
From JS Strings to JS Number Methods
From JS Dates to JS Break

Videos:
Please click the RESOURCES tab of this website
Click the LinkedIn Learning (Kent State University) link
Follow the directions to access the website.
(3.) Type JavaScript in the search bar and view the the videos that has any of the objectives.

Videos and Textbooks:
Please click the RESOURCES tab of this website
Click the O'Reilly Online Learning link
Follow the directions to access the website.
(4.) Type JavaScript in the search bar and view the the videos/read the textbooks that has any of the objectives.

Required Readings

Variables and Data Types

A Variable is a portion of computer memory for storing a data value.
Because a variable stores a data value, it is important to identify the type of data value it stores.
This implies that any variable is associated with a data type.
The data type describes the type of data value stored by the variable.
What type of data is being stored? Are they numeric (numbers), non-numeric (letters/characters/words), etc.?
As noted with the word: variable, any value stored by it can vary (can change).
Generally, a variable is created/declared in JavaScript by using the keyword: let or var and assigning it to a value.
However, there are at least four ways we declare variables in JavaScript:
let   variableName;
OR
var   variableName;

OR

let   variableName = value;
OR
var   variableName = value;

In the last two codes, we assigned the variable to a value using the equal to (equals) sign.
The equal sign is known as the assignment statement.
In other words, you assign something in JavaScript using the equal sign

Let us write a JavaScript program that uses variables and data types.

(1.) Open the Visual Studio Code
Create a JavaScript file
Name it dataTypes.js


(2.) Add the JavaScript file: dataTypes.js to the index.html page.


(3.) Write the JavaScript program.



Notice that we used:
(a.) document.getElementById('id') method to access each HTML paragraph element by the id
You will notice it in the HTML code.

(b.) innerHTML property to write into the HTML output.

(c.) Concatenation operator (Addition operator): + to join the sentences with the variables.

(4.) Now, onto the HTML file
Include the id: #variablesDataTypes in the navigation Sidebar


Write the code for the HTML
Declare ids for the HTML paragraph elements that will display the sentences written in JavaScript
HTML: ids for the paragraph elements
JS: document.getElementById('id')


Run the HTML file (Preview in a web broswer)


Going forward, I prefer to use the var keyword rather then the let keyword.
Let us write JavaScript programs that performs arithmetic operations using Arithmetic Operators and the Math Object.
Please review the screenshots to see the different ways we write JavaScript programs.

(1.) Create the JavaScript file
Name it numbersOperators.js


(2.) Add the JavaScript file: numbersOperators.js to the index.html page.


(3.) Write the JavaScript program.






Notice that we used:
(a.) document.getElementById('id') method to access each HTML span element by the id
You will notice it in the HTML code.
We must not always use the paragraph element.
We can also use the span element especially if we do not want to write the sentences in JavaScript.

(b.) innerHTML property to write into the HTML output.

(4.) The HTML file
Include the id: #numbersOperators in the navigation Sidebar


Write the code for the HTML
Declare ids for the HTML span elements that will display the sentences written in JavaScript
HTML: ids for the span elements
JS: document.getElementById('id')



Run the HTML file (Preview in a web broswer)



Publish:
Please make sure you include the new files into the GitHub repository.




Check out our published website: JavaScript: Functional Programming website
(https://purple-hill-013681910.azurestaticapps.net/)

JavaScript is really interesting when it comes to data types.
In other programming languages (including several C family programming languages), the data type is included with the variable when the variable is declared.
However, in JavaScript; data types are not included in the declaration of variables.
This implies that JavaScript is a dynamic language.

Student: How do you know which keyword to use to declare a variable?
Teacher: Good question.
Before we continue, let us define some terms.
Then, we shall compare and contrast both keywords.

Scope of a Variable (Variable Scope)
The scope of a variable is the accessibility of the variable within the program.
So, we declare a variable in a JavaScript program.
And we want to access that variable somewhere in the program.
And we probably want to access that variable again in the program (accessing the variable multiple times).
And we probably want to redefine that variable again (which we should not do anyway because it is much better to declare another variable).
In that case, it is important to know how we declare that variable.

In JavaScript, there are two main types of scope:
(1.) Local Scope
(2.) Global Scope

Local Scope consists of:
(a.) Block Scope
(b.) Function Scope

Local Scope
As the name implies, variables declared within a local scope can be only be assessed locally.
They can be assessed only within the code block (Block Scope) or only within the function (Function Scope) in which they are declared.
These variables are known as local variables.
Local variables are variables with local scope.
In other words, local variables are variables declared within a block or within a function
Block Scope Variables are local variables that are assessed only within the block.
A block of code, otherwise known as code block is a statement or group of statements within braces (opening brace and closing brace).
Function Scope Variables are local variables that are assessed only within the function.
A function (a simple definition in this case) is a statement or group of statements within the braces but that begins with the function keyword and has a function name.
So, with a function scope; the keyword function is used along with a function name, and then the block of code.

Let us review some examples.
Run these examples (scripts) in the Developer Tools of your web browser (browser console) just as we did in the first example in Module 1
You may also run the program inside the script tags (beginning and closing script tags) in the HTML body element.
For all programs you intend to run in the browser console, it is important you write the program in a JavaScript environment first, then copy and paste the entire code inside the browser console.

Example 1:

                            /*
                                Local Scope: Block Scope 
                                Block or Code Block is: {statements;}
                                It begins with opening brace: { 
                                Then, you write the code (statement)
                                and it ends with closing brace: } 
                                Example with Conditional Statements 
                            */
                            
                            if(2 + 5 == 7)
                            {
                                let firstName = "Samuel";
                                var firstNum = 27;

                                alert(firstName);
                                alert(firstNum);
                            }
                        

Question 1
What output(s) will be displayed in the browser window?
Explain.

Show/Hide Answer

Example 2:

                            /*
                                Local Scope: Block Scope 
                                Block or Code Block is: {statements;}
                                It begins with opening brace: { 
                                Then, you write the code (statement)
                                and it ends with closing brace: } 
                                Example with Conditional Statements 
                            */
                            
                            if(2 + 5 == 7)
                            {
                                let firstName = "Samuel";
                                var firstNum = 27;
                            }
                            
                            alert(firstName);
                            alert(firstNum);
                        

Question 2
What output(s) will be displayed in the browser window?
Explain.

Show/Hide Answer

Example 3:

                            /*
                                Local Scope: Block Scope 
                                Block or Code Block is: {statements;}
                                It begins with opening brace: { 
                                Then, you write the code (statement)
                                and it ends with closing brace: } 
                                Example with Conditional Statements
                            */
                             
                            if(2 + 5 == 7)
                            {
                                let firstName = "Samuel";
                                var firstNum = 27;
                            }
                            
                            // alert(firstName);
                            alert(firstNum);
                        

Question 3
What output(s) will be displayed in the browser window?
Explain.

Show/Hide Answer

So, as you can see; declaring a variable with the let keyword or the var keyword within a block depends on whether you still want to access that variable outside the block.
We shall review function scope when we discuss functions.
For now, just know that we typically use the var keyword to declare variables in a function.

Example of a Function Scope

                            function functionName(parameters)
                            {
                                statements;
                            }
                        

Global Scope
Variables that are not declared within a block or a function are known as global variables.
These variables are accessible anyhwere within the program.
They can be declared with the let or var keyword.
The variables that we used in the programs that we wrote in the beginning of this module: Variables and Data Types and Numbers and Operators are global variables.
We declared them in the program.
We did not declare them within a block or a function.

Features	let keyword	var keyword
Hoisting: Using a variable before it is declared	A variable declared with the let keyword is hoisted to the top of the block but not initialized. In other words, it must be declared before use. Example: firstNum = 7; let firstNum; alert(firstNum); // ReferenceError: Cannot access 'firstNum' before initialization	A variable declared with the var keyword is hoisted to the top of the block and is initialized. In other words, it can be used before being declared. Example: firstNum = 7; var firstNum; alert(firstNum); // 7 is shown in the browser 7 is shown in the browser.
Note: Please do not use a variable before declaring it. It is not a good programming practice. You need to declare a variable before you use it, or you may use it as you declare it; but do not use it before you declare it.
Redeclaration: Declaring a variable after it has been declared	A variable declared with the let keyword cannot be redeclared. In other words, it cannot be declared again after it has been declared. Example: let variable = 7; let variable = "Samuel"; alert(variable); // SyntaxError: Identifier 'variable' has already been declared	A variable declared with the var keyword can be redeclared. In other words, it can be declared again after it has been declared. Example: var variable = 7; var variable = "Samuel"; alert(variable); // Samuel Samuel is shown in the browser. Yes, in JavaScript; you can use the var keyword to declare the same variable with different data types. Because the script executes line-by-line (top-down approach), the last data type value is shown.
Note: Please do not redeclare a variable. It is not a good programming practice. If you need to redeclare a variabe, it is better to declare two variables.
Scope (Local Scope): Accessing a variable within a program	A variable declared with the let keyword has a block scope. It can only be accessed within the block in which it is declared. (Please see previous examples) In this case, it is a local variable.	A variable declared with the var keyword has a function scope. It can be accessed within and outside the block in which it is declared. (Please see previous examples) It can also be accessed within and outside the function in which it is declared. In this case, it is a local variable.
Scope (Global Scope): Accessing a variable within a program In JavaScript, the global scope is the JavaScript environment In HTML, the global scope is the window object	A variable declared with the let keyword has a global scope if it is not declared within a block or function. In this case, it can be accessed anywhere within the program. In this case, it is a global variable. Global variables declared with the let keyword cannot be used with the window object. Example: let variable = 7; alert(window.variable); // undefined	A variable declared with the var keyword has a global scope if it is not declared within a block or function. In this case, it can be accessed anywhere within the program. In this case, it is a global variable. Global variables declared with the var keyword can be used with the window object. Example: var variable = 7; alert(window.variable); // 7 is displayed in the browser
Note: Generally, we want to avoid the use of global variables unless we really need them. In that case, we want to use unique variable names and function names. User-defined global variables and/or functions can overwrite window variables and/or functions. Similarly, window variables and/or functions can overwrite global variables and/or functions. I understand we used it in the programs we wrote in the beginning of this module. But, we used it to demonstrate variables and data types. Blocks and Functions are typically used in JavaScript Functional Programming. Hence, we typically use local variables.

const keyword: Constant (Read-only) Variables
Variables declared with the const keyword are constant (read-only) variables
Read-only means that the value of the variable cannot be changed.
They have block scope: meaning that they can only be accessed within the block that it was declared.
They cannot be redeclared.

Example:
const variable = 7;
alert(variable); // 7

Example: Read-only:
const variable = 7;
variable = 10;
alert(variable); // TypeError: Assignment to constant variable.

Lifetime of a Variable
The lifetime of a local variable begins when it is declared within the block or function and ends when the block or function is completed.
The lifetime of a block scope variable begins when it is declared in the block and ends when the block is completed.
The lifetime of a function scope variable begins when it is declared in the function and ends when the function is completed.
The lifetime of a global variable begins when it is declared outside the block or function and ends when the console tab or browser window is closed.

Identifiers (Naming Conventions for Variables)
Can we use any name for our variables?
No, we cannot. There are several rules for naming variables in JavaScript.
Variables must be identified with unique names accoridng to these rules.
Identifiers are unique names used to identify variables.
It is important to use identifiers that are meaningful and descriptive.
Anyone reviewing your program should not have to guess the meaning of your variable.

As you can see (based on the image below: Variables, Data Types, Values:)
The variables I used in that example are meaningful and descriptive
Those variables are:
state to denote the State of Ohio, OH
numState to denote the number of the State of Ohio in an alphabetical listing of the state names
povertyRate to denote the poverty rate of Ohions according to the $2000$ census data
landArea to denote the land area of the Ohio according to the $2000$ census data
motto to denote the motto and seal of the Great State of Ohio
ismottoTrue to denote the Boolean data type if the motto is true
Even without the comments, you already have an idea of the meaning of my variables.
I should not have to guess the meaning of your variables.

Variable names:
(1.) Can be single letters (please avoid unless if used in loops)

(2.) Can contain a combination of letters, digits, and underscores and dollar signs but must not begin with a digit.
It may begin with a letter, an underscore, or a dollar sign.
However:
(a.) Please avoid underscore and dollar sign
Avoid underscore and dollar sign even if the variable name does not begin with it.
(b.) Use a combination of letters and digits such as:
num1 to represent the first number
variable1 to represent the first number

(3.) Can contain only letters but must not be any of the reserved keywords.
Can use:
(a.) The letters can be Camel case (similar to the hump of a camel) such as:
firstVariable...the V is the hump
In Camel casing letters: two letters are merged as one; the first letter of the second word is an uppercase letter while all other letters are lower case letters.
In firstVariable, V is uppercase; all other letters are lower case

(b.) The letters can be Pascal case such as FirstVariable
In Pascal casing, two letters are merged as one; the first letter of the first word and the first letter of the second word are uppercase letters while all other letters are lower case letters.

In FirstVariable, F and V are uppercase; all other letters are lowercase.

(c.) uppercase letters (please avoid...it denotes someone who is yelling)

(d.) lowercase letters (okay, but try to avoid)

Student: What if you have three words?
How do you write it in Camel case? Pascal case?
Teacher: Say we want to write the variable, first arithmetic sequence
Camel case: firstArithmeticSequence...A and S are the only uppercase
Pascal case: FirstArithmeticSequence...F, A, S are the only uppercase

In this course, for all applicable variables; please use:
(i.) A combination of letters and digits such as num1 OR
(ii.) Camel case letters such as firstNumber OR
(iii.) Pascal case letters such as FirstNumber
***We shall use single characters when we write conditions for Iteration statements/Loops because it is easier to use single characters in such cases. We shall see examples when we discuss loops. However, feel free not to use it if you wish.***

Cannot use:
(a.) The reserved keywords that are still in use are:
abstract, arguments, await, boolean, break, byte, case, catch, char, class, const, continue, debugger, default, delete, do, double, else, enum, eval, export, extends, false, final, finally, float, for, function, goto, if, implements, import, in, instanceof, int, interface, let, long, native, new, null, package, private, protected, public, return, short, static, super, switch, synchronized, this, throw, throws, transient, true, try, typeof, var, void, volatile, while, with, yield

(b.) The reserved keywords that are not in use are:
abstract, boolean, byte, char, double, final, float, goto, int, long, native, short, synchronized, throws, transient, volatile
NOTE: You cannot use any of the reserved keywords as an identifier/variable name regardless of whether they are in use or not in use.

(c.) Any of the names of JavaScript built-in objects, properties, and methods.
Array, Date, eval, function, hasOwnProperty, Infinity, isFinite, isNaN, isPrototypeOf, length, Math, NaN, name, Number, Object, prototype, String, toString, undefined, valueOf

(d.) Any of the names of HTML and Window objects and properties.
alert, all, anchor, anchors, area, assign, blur, button, checkbox, clearInterval, clearTimeout, clientInformation, close, closed, confirm, constructor, crypto, decodeURI, decodeURIComponent, defaultStatus, document, element, elements, embed, embeds, encodeURI, encodeURIComponent, escape, event, fileUpload, focus, form, forms, frame, innerHeight, innerWidth, layer, layers, link, location, mimeTypes, navigate, navigator, frames, frameRate, hidden, history, image, images, offscreenBuffering, open, opener, option, outerHeight, outerWidth, packages, pageXOffset, pageYOffset, parent, parseFloat, parseInt, password, pkcs11, plugin, prompt, propertyIsEnum, radio, reset, screenX, screenY, scroll, secure, select, self, setInterval, setTimeout, status, submit, taint, text, textarea, top, unescape, untaint

(e.) Any of the names of HTML Event Handlers.
onblur, onclick, onerror, onfocus, onkeydown, onkeypress, onkeyup, onmouseover, onload, onmouseup, onmousedown, onsubmit

(f.) Any of these Java language reserved words.
JavaScript and Java are "brothers" of the same C family of languages. They have similar syntax for several concepts.
But please note: JavaScript is not Java.
Just avoid these specific names.
getClass, java, JavaArray, javaClass, JavaObject, JavaPackage

(4.) Cannot contain whitespaces or special characters.
The special characters are all the non-numeric and non-alphabet characters on your keyboard such as ~ (tilde), !(exclamation), @ (asperand), # (hash), $ (dollar), % (percent), ^ (caret), & (ampersand), * (asterisk).
A whitespace is a horizontal or vertical space.
For example: myNum has no whitespace; but my Num has a whitespace.
Variable names cannot contain whitespaces.
Hence: myNum is acceptable, but my Num is not acceptable.

(5.) Are case sensitive.
These are all different variables:
firstresult (lowercase), firstResult (Camel case), FirstResult (Pascal case), Firstresult, FIRSTRESULT (uppercase), first_result (snake case)

JavaScript Data Types

Operators

Operators are special symbols that perform specific operations on one or more operands, and returns an output.
An Operand is the variable/value on which an operation is done.

JavaScript Operators

Operators	Symbols	Description	Code Examples
Assignment	$=$	Equal sign	var num1 = 7; alert(num1); // 7
Arithmetic Addition Subtraction Multiplication Division Remainder (Modulo) Exponentiation	$+$ $-$ $*$ $/$ $\%$ $**$	Add Subtract Multiply Divide Remainder after a division Raise a base to an exponent	var num1 = 6, num2 = 2; alert(num1 + num2); // 8 alert(num1 - num2); // 4 alert(num1 * num2); // 10 alert(num1 / num2); // 3 alert(num1 % num2); // 1 alert(num1 ** num2); // 36
Compound Assignment Plus equal Subtract equal Multiply equal Divide equal Modulo equal	$+=$ $-=$ $*=$ $/=$ $\%=$	Add, then equal to Subtract, then equal to Multiply, then equal to Divide, then equal to Remainder after division, then equal to	var num1 = 5; alert(num1 += 7); // 12 This means that num1 = num1 + 7; implies that num1 = 5 + 7 = 12 alert(num1 -= 7); // -2 This means that num1 = num1 - 7; implies that num1 = 5 - 7 = -2 alert(num1 *= 7); // 35 This means that num1 = num1 * 7; implies that num1 = 5 * 7 = 35 alert(num1 /= 5); // 1 This means that num1 = num1 / 7; implies that num1 = 5 / 5 = 1 alert(num1 %= 7); // 5 This means that num1 = num1 % 7; implies that num1 = 5 % 7 = 5
Unary Unary plus Unary minus Increment Decrement Logical complement	$+$ $-$ $++$ $--$ $!$	The unary operators require only one operand. Unary plus operator example $+=1$ means Increase by one Unary minus operator example $-=2$ means Decrease by two The increment, ++ and decrement, -- operators can be: prefix or postfix (suffix) Prefix Increment (evaluate the value, after it is increased) Postfix (Suffix) Increment (evaluate the value, before it is increased) Prefix Decrement (evaluate the value, after it is decreased) Suffix Decrement (evaluate the value, before it is decreased) Logical complement operator inverts(negates) the value of a boolean	var num1 = 9; alert(num1+=1); // 10 alert(num1-=2); // 7 alert(++num1); // 10 alert(num1++); // 10 alert(--num1); // 9 alert(num1--); // 9 // Logical Complement var likeSamDom = true; alert(!likeSamDom); // false var likeSamDom = false; alert(!likeSamDom); // true
Conditional Ternary	$?$	The Conditional ternary operator evaluates an expression amidst two results. If the expression is true, it returns the first result. If the expression is false, it returns the second result. The two results are separated by a colon : The expression is separated by the two results using the conditional tenary operator (question mark) ? The syntax is: expression ? result1 : result2	var num1 = 5, num2 = 2; alert(num1 == num2 ? 1 : 0); // 0 // Is 5 equal to 2? If yes, return 1; if no, return 0 5 is not equal to 2, so 0 is returned
Comparison Equal to Equal value and Equal type Not equal to Not equal to or Not equal type Greater than Less than Greater than or equal to Less than or equal to	$==$ $===$ $!=$ $!==$ $\gt$ $\lt$ $\ge$ $\le$	Comparison Operators are used to compare two expressions. The result is a Boolean (either true or false)	var num1 = 5, num2 = 2; alert(num1 == num2); // false alert(num1 === num2); // false alert(num1 != num2); // true alert(num1 !== num2); // true alert(num1 > num2); // true alert(num1 < num2); // false alert(num1 ≥ num2); // true alert(num1 ≤ num2); // false

Student: I need more clarification on those equal signs: single equal sign, double equal sign, and triple equal sign
Teacher: The single equal sign is the assignment statement
It is used to assign a value to a variable.

The double equal sign is used to compare two values: if the left hand side value is equal to the right hand side value
If both values are equal in value only, it returns true
If both values are not equal in value, it returns false
So, it is a comparison operator: comparing two values.

The triple equal sign is also a comparison operator.
However, it compares the two values in both value and type
If both values are equal in value and type, it returns true
If one value is not equal in value and/or in type to the other value, it returns false

Student: May you give examples of where the double and triple signs return true?
Teacher: Sure.
Let us review more examples of the Equal to comparison operator and the Equal value and Equal type comparison operator.


Example:
Please run these codes in your browser console.
// Define the variables
var firstVariable = 7; // integer data type
var secondVariable = "7"; // string data type
var thirdVariable = 7; // integer data type

// Perform the comparisons
alert(firstVariable == secondVariable); // true
// Because 7 is the same value of "7"

alert(firstVariable === secondVariable); // false
// Even 7 is the same value as "7", they are different data types
// 7 is an integer while "7" is a string

alert(firstVariable === thirdVariable); // true
// Because 7 is the same value as 7
// Also because 7 is the same data type as 7 (both are integers)

Date and Time: Part 1

Date and time stamps are needed for: transactions, receipts, appointments, agreements, events, rules/laws, and tickets (by cops and troopers) among others.
Besides, we shall use the date and time functions in the midterm project.
Let us discuss date and time.

Teacher: The date and time is interesting in the sense that I would not classify it as a string or as an integer.
Student: What data type would you call it?
Teacher: It is a data type by itself.
However, you can treat it as a string and use certain string functions with it.
You can also treat it as an integer by adding or subtracting days and years.

The Date Object in JavaScript provides date and time.
In this module, we shall discuss some concepts of date and time.
We shall discuss more concepts of the Date object in subsequent modules.

The Date object is declared as:
var dateTimeNow = new Date();
alert(dateTimeNow); // Thu Sep 23 2021 16:07:12 GMT-0500 (Central Daylight Time)

As seen from the result, it displays the:

(1.) weekday: Thu (shortened name)

(2.) month: Sep (shortened name)

(3.) day: 23

(4.) year: 2021

(5.) hour: 16

(6.) minute: 07

(7.) second: 12

(8.) time offset from GMT: GMT-05:00: the Greenwich Mean Time offset by 5 hours (5 hours behind).
The reference for every time zone in the world is the Prime Meridian at Greenwich, London. At the moment, that time is 09:00 PM.
-0500 means that the Central Daylight Time zone is 5 hours behind the GMT
16:00 (24-hour format) is the same as 4:00 PM (12-hour format)
4 + 5 (time + offset) = 9
That gives 9:00 PM at Greenwich, London time
CST is 5 hours behind of GMT (hence the GMT-0500)
Maldives Time (MVT) is 5 hours ahead of GMT, so it is written as GMT+0500

(9.) time zone: Central Daylight Time

We can get specific information from the date object using these get methods.

Get the year: getFullYear()
var dateTimeNow = new Date();
alert(dateTimeNow.getFullYear()); // 2021

Get the date (day): getDate() (1 - 31)
var dateTimeNow = new Date();
alert(dateTimeNow.getDate()); // 23 ...today is the 23rd

Get the month: getMonth()
var dateTimeNow = new Date();
alert(dateTimeNow.getMonth()); // 8

Student: Mr. C, I have some questions.
Why is the month displayed as 8?
This is September, 2021
September is the 9th month
Teacher: Good observation.
We shall discuss Arrays in a subsequent module.
Arrays are zero-indexed.
This implies that it begins the count from zero, rather than 1
JavaScript counts the month from 0 - 11
The index (or position) of the first element in the array is 0
The index of the second element is 1
The index of the third element is 2 ...and so on and so forth
Student: The next question...
How do I display the number as September rather than 8?
Teacher: There are several ways to do it.
We can use Multiple-Ifs statements; If-Else if-Else statements; Switch statement
We can also use Arrays
Let us do a similar example when we write programs involving statements.
Student: So, based on the previous examples; the year and the day are not zero-indexed?
Teacher: That is correct.
Student: But the others are?
Teacher: Yes Sir.

Get the day (weekday): getDay() (0 - 6)...7 days a week
var dateTimeNow = new Date();
alert(dateTimeNow.getDay()); // 4 ...today is Thursday

Get the hour: getHours() (0 - 23)...24 hours a day
var dateTimeNow = new Date();
alert(dateTimeNow.getHours()); // 16...16th hour ...in a 24-hour format

Get the minutes: getMinutes() (0 - 59)...60 minutes in an hour
var dateTimeNow = new Date();
alert(dateTimeNow.getMinutes()); // 07...7th minute

Get the second: getSeconds() (0 - 59)...60 seconds in a minute
var dateTimeNow = new Date();
alert(dateTimeNow.getSeconds()); // 12...12th second

Get the millisecond: getMilliseconds() (0 - 999)...1000 milliseconds in a second
var dateTimeNow = new Date();
alert(dateTimeNow.getMilliseconds()); // 345...345th millisecond

The following two examples are two different ways to get the number of milliseconds since January 1, 1970
We shall not use them. However, it may be worth knowing.

Get the number of milliseconds since January 1, 1970: getTime()
var dateTimeNow = new Date();
alert(dateTimeNow.getTime()); // 1632438170696...1632438170696 milliseconds since January 1, 1970
OR
Get the number of milliseconds since January 1, 1970: Date.now()
alert(Date.now()); // 1632438170696...1632438170696 milliseconds since January 1, 1970

Let us do more examples.
Run these examples (scripts) in the Developer Tools of your web browser (as we did in the first example in Module 1) or inside the script tags (beginning and closing script tags) in the HTML body element.

Date and Time: Part 1: Format Examples

Code	Output
var now = new Date(); alert(now);	Mon Sep 20 2021 14:04:50 GMT-0500 (Central Daylight Time)
var now = new Date(); alert(now.toString());	Mon Sep 20 2021 14:07:34 GMT-0500 (Central Daylight Time)
var now = new Date(); alert(now.toDateString());	Mon Sep 20 2021
var now = new Date(); alert(now.toDateString());	Mon Sep 20 2021
The toLocaleDateString() returns a string representation of the local date portion of the Date object (date according to the time zone set in the user's system).
var now = new Date(); alert(now.toLocaleDateString());	9/20/2021
var now = new Date(); alert(now.toTimeString());	14:19:25 GMT-0500 (Central Daylight Time)
The toLocaleTimeString() returns a string representation of the local time portion of the Date object (time according to the time zone in the user's system).
var now = new Date(); alert(now.toLocaleTimeString());	2:21:40 PM
var now = new Date(); alert(now.toUTCString());	Mon, 20 Sep 2021 19:07:57 GMT
var now = new Date(); alert(now.toGMTString());	Mon, 20 Sep 2021 19:22:35 GMT
var now = new Date(); alert(now.toISOString());	2021-09-20T19:11:31.379Z

Format the Date, Time, and Time Zone: Date and Time for Different Countries
As at today: 03/01/2021; Kent State University has 8 Ohio campuses, several other U.S campsuses, and four campuses outside the United States otherwise known as Kent State Worldwide.
Kent State Worldwide consists of Kent State in Florence, Italy; Geneva, Switzerland; New Delhi, India; and Beijing, China.
Mr. C wants to greet all his students in the United States and Worldwide.
He wants to great them in their local dates and times.
He would kindly ask you, his student (please check out one of the Questions in the Assess tab) to teach him the greeting in your language.
But his work right now is to display the date and time of each country: United States, Italy, Switzerland, India, and China.

We shall use Java in this section.
You may skip the Java code here (if you think you might be confused) and just use the time zones.
Because we shall be working with foreign countries, we need:
(1.) Time zone of each country.
TimeZone represents a time zone offset, and includes daylight savings.
As at today: 03/04/2021; the time zone IDs that are available in Java are:

Note that these time zone IDs should be entered as strings.
If the country is not listed, then we will need to use the UTC (Universal Time Coordinated) and include any offset as applicable.
How?
Bing or Google "time zone for country" and look for the UTC time zone of that country.
If it is UTC+4, then use UTC+4 for that time zone. It should work in Java.
Alternatively, contact Oracle and ask them to include your country/city/county/province/region.

(2.) Current date and time (date and time now) of each country.

(3.) The method: toLocaleString() could be for the local date: toLocaleDateString() or for the local time: toLocaleTimeString()
It has optional parameters that allow us to represent the date and time in different languages (locales).

Locale of each country.
A Locale object represents a specific geographical, political, or cultural region.

This is the List of Countries, Languages, and Locale for Displaying Date and Time
(https://www.samdomforpeace.com/References/ASCII.html#specificCulture)

This is the List of the States and Territories of the United States for Displaying Date and Time
(https://www.samdomforpeace.com/References/ASCII.html#specificCultureUS)

Example 1: Say we want to display the date and time in the State of Alabama
The State of Alabama is in the Central Standard Time Zone
We do not see a time zone listed for the State of Alabama.
However, we see the time zone for the City of Chicago.
Because the City of Chicago is also in the Central Time Zone, we shall use the time zone for it: America/Chicago

First: we declare a variable for the date object
Second: we declare a constant for the options (optional parameter) of the toLocaleTimeString() method
One of the parameters in the option should be the time zone.
Third: we write the method and include two parameters: the required parameter which is the Locale; and the optional parameter which must include the time zone among others.
Please note that we use the toLocaleTimeString() method if we want to date and time
You may go ahead and run this code.
var dateTimeNow = new Date();
const options = {weekday: "long", year: "numeric", month: "long", day: "numeric", timeZone: "America/Chicago"};
alert(dateTimeNow.toLocaleTimeString("en-US", options));

// Tuesday, September 21, 2021, 2:30:35 PM

Example 2: Say we want to display the date and time in Nigeria
Nigeria is a country in the African continent.
It is in West Africa region.
We do not see a time zone listed for it or for the capital, Abuja.
So, we look for other countries in West Africa.
We see the time zone for the Capital City of Accra in Ghana.
Because the City of Accra, Ghana is also in West Africa; we shall use the time zone for it: Africa/Accra
Also, because Nigeria and Ghana were colonized by the British, the official language is British English.
So, for Nigeria; we shall use the locale: en-GB (United Kingdom) as specified in that list.

First: we declare a variable for the date object
Second: we declare a constant for the options (optional parameter) of the toLocaleTimeString() method
One of the parameters in the option should be the time zone.
Third: we write the method and include two parameters: the required parameter which is the Locale; and the optional parameter which must include the time zone among others.
Please note that we use the toLocaleTimeString() method if we want to date and time
You may go ahead and run this code.
var dateTimeNow = new Date();
const options = {weekday: "long", year: "numeric", month: "long", day: "numeric", timeZone: "Africa/Accra"};
alert(dateTimeNow.toLocaleTimeString("en-GB", options));

// Tuesday, 21 September 2021, 19:31:16

Please review the screenshots below including the comments for further explanations.

Let us write a JavaScript program that uses the Date object.
We shall display the current date and time for Kent State University Ohio campuses and Kent State Worldwide campuses.

(1.) Create the JavaScript file
Name it dataTime.js

(2.) Add the JavaScript file: dataTime.js to the index.html page.


(3.) Write the JavaScript program.




(4.) The HTML file
Include the id: #dateTime in the navigation Sidebar


Write the code for the HTML
Declare ids for the HTML span elements that will display the sentences written in JavaScript
HTML: ids for the paragraph elements
JS: document.getElementById('id')


Run the HTML file (Preview in a web broswer)



Publish:
Please make sure you include the files into the GitHub repository (as we did earlier) to overwrite existing files.
Then, Commit Changes.

Check out our published website: JavaScript: Functional Programming website
(https://purple-hill-013681910.azurestaticapps.net/)

Statements

Expression
An expression is a construct made up of variables, operators, and method invocations, which are constructed according to the syntax of the language, that evaluates to a single value.
// Expression
// We have already done this statement
var result = 7 * (5 - 2); // 21

Statement
A statement is an individual instruction of a program.
It ends with a semicolon.
It forms a complete unit of execution.
It is equivalent to a sentence in a language.

These are the kinds of statements in JavaScript.
They are:
(1.) Expression Statements
These are statements that are made from expressions.
They include:
(I.) Assignment statement
// Assignment statement

var num1 = 7;

(II.) Increment and Decrement statements
// Increment statement
num1++;
// Decrement statement
num1--;


(2.) Declaration Statements
A declaration statement declares a variable.
// Declaration statement
var num1 = 7;


(3.) Control Flow Statements
Generally, statements in JavaScript are executed from top to bottom, in the order that they appear.
However, control flow statements control the order in which statements are executed.
In other words, they break up the flow of the execution of statements by using decision making, looping, and branching; thereby allowing a program to execute particular blocks of code conditionally.
They include:
(I.) Decison-making Statements
The decision-making statements are the: if statement, if-else statement, if-then statement, if-then-else statement, Multiple ifs statement, and the switch statement
These statements are also referred to as Conditional statements or Decisions or Selection statements

(II.) Looping Statements
The looping statements are the: for loop, while loop, the do-while loop, and the forEach loop
These statements are also referred to as Repetitive statements or Iteration statements or Loops

(III.) Branching Statements
The branching statements are the: break statement, continue statement, and the return statement
These statements are also referred to as Jump statements or Branches

Block
A block is a group of zero or more statements between balanced braces that can be used where a single statement is allowed.
In Example 3 (If-else statement) as seen in the screenshot below; the if statement is the first block of code and the else statement is the second block of code.

Decision-making Statements

Decision-making statements are statements that execute an action based on some condition(s).
They are also known as Conditional Statements or Decisions
These statements are the:
(1.) If statement
This statement is used when there is only one condition.
If some condition is met, execute a given task.
The If statement is written as:

                            if (condition) 
                            { 
                                statement;
                            }
                        

JavaScript ignores whitespaces so you can also write it this way:

if (condition) { statement; }

(2.) If-else statement
This statement is used when there are only two conditions.
If first condition is met, execute a given task.
else execute another task.
The else refers to the other condition.
Please note that we do not specify the condition for the else statement because we already know it is the other (remaining) condition.
The If-else statement is written as:

                            if (condition) 
                            {
                                statement;
                            } 
                            else 
                            {
                                statement;
                            } 
                        

JavaScript ignores whitespaces so you can also write it this way:

if (condition) { statement; } else { statement; }

We can also write simple If-else statement using the Ternary operator
It can be used for simple if-else statements.
The syntax is:

                            variable = if (condition) ? statement if true : statement if false;
                        

(3.) If-else if-else statement
This statement is used when there are more than two conditions in which the first condition is used for the If statement, other conditions are used for the else if statements, and the last condition is used for the else statement.
Please note that the last condition for the else statement is not specifid in the code because it is the remaining condition.
It is generally known as the remaining condition after all other conditions are specified.
Assume we have only four conditions for a particular program:
The If-else if-else statement is written as:

                            if (condition 1) {
                                statement;
                            } else if (condition 2){
                                statement;
                            } else if (condition 3) {
                                statement;
                            } else {
                                statement;
                            } 
                        

Whitespaces are ignored in Java. Therefore you can also write it this way:

                        if (condition 1) { statement; } 
                        else if (condition 2) { statement; } 
                        else if (condition 3) { statement; } 
                        else {statement; }
                        

Keep in mind that we do not specify condition 4 in the code for the else statement because we already know that the else statement would only be executed if all the other prior conditions are not met.

(4.) Multiple Ifs statement
This statement is used when there are more than two conditions in which each condition is uniquely different.
You can also use this statement if you are not comfortable using the If-else if - else statement.
Both statements accomplish the same task.
Assume we have only four conditions for a particular program:
The Multiple Ifs statement is written as:

                            if (condition 1) 
                            {
                               statement;
                            }
                            if (condition 2){
                                statement;
                            }
                            if (condition 3) {
                                statement;
                            }
                            if (condition 4) {
                                statement;
                            } 
                        

Whitespaces are ignored in JavaScript. Therefore you can also write it this way:

                            if (condition 1) { statement; } 
                            if (condition 2) { statement; } 
                            if (condition 3) { statement; } 
                            if (condition 4) { statement; }
                        

Recall: In English Language, Finite Mathematics, Discrete Mathematics; some of the ways to join simple statements to make a compound statement are:
(I.) Use of the conjunction, and which is denoted by && in JavaScript
(II.) Use of the disjunction, or which is denoted by || in JavaScript

A good application of JavaScript Selection Statements is seen in Piecewise functions.
We shall discuss it in the next module.
Be reminded that Piecewise Functions is required for your Midtem Project.

(5.) Switch statement
Another selection statement is the switch statement.
The body of a switch statement is known as a switch block.
A statement in the switch block can be labeled with one or more case or default labels.
It evaluates its expression, then executes all statements that follow the matching case label.
A swich statement is terminated by a break statement.
If the break statement is not used, then all the statements after the matching case label are executed in sequence, regardless of the expression of subsequent case labels.
So, each break statement is required after each case label besides the final case label or the default label.
The default section handles all values that are not explicitly handled by one of the case sections.
The final break is not required for the final case label or the default label because the flow falls out of the switch statement.
The use of the break statement is also recommended to easily modify the code and make it less error prone.

Which selection statement should you use? If-else or Switch statement?
The option to use if-then-else statements or a switch statement depends on the readability and the expression that the statement is testing.
An if-then-else statement can test expressions based on ranges of values or conditions, while a switch statement tests expressions based only on a single integer, enumerated value, or String object.

The general syntax of the switch statement is:

                            // Typically declared with any of the Integer data types
                            variable 
                            switch (variable){
                            case 1: 
                            	statement;
                            	break;
                            case 2:
                            	statement;
                            	break;
                            case 3:
                            	statement;
                            	break;
                            default:
                            	statement;
                            }
                        

Case 1
The switch block compares the value of the variable with 1
If the value of the variable is 1, then it executes the statement in case 1 and breaks, thus ending the program.
If the value of the variable is not 1, it moves on to case 2 and compares the value of the variable with 2
If the value of the variable is 2, it executes the statement in case 2, breaks, and ends the program.
Otherwise, it moves to case 3.
It compares the value of the variable with 3
If that value is 3, it executes the statement in case 3 and breaks. The program ends.
If that value is not 3, it executes the statement in the default
As noted, the break statement ends the program when the value of the variable is equal to the case number, otherwise the switch statement moves on to the next case and continues the comparison.

Nested Conditional Statements

Nested If-Else Statements
We can write more challenging programs using Nested Selection Statements
We can use Nested If-Else statements

One of the syntax for Nested If-Else statement is:

                           dataType variable;
                            if condition 1{
                                If condition 2{ 
                                    statement;
                                }
                                else{ 
                                    statement;
                                }
                            } 
                                 
                            else if condition 3{ 
                                if condition 4{
                                    statement;
                                } 
                                else{ 
                                    statement;
                                }
                            } 
                            
                            else{ 
                                statement; 
                            } 
                        

Notice the order in which each nested conditional statement is closed.

Would you like to challenge yourself with nested conditional statements?
(Just for the fun. Not for a grade)
Develop Java programs that uses nested conditional statements to solve these applications.

(1.) Who qualifies for the $\$1,400$ payment under the American Rescue Plan also known as President Biden's stimulus bill?
Third Round of Stimulus Checks: American Rescue Plan
(https://money.yahoo.com/heres-who-gets-a-1400-payment-under-the-new-stimulus-deal-194708150.html)

(I.) Who likes to read?
(II.) Who likes bite-sized information? Who likes flowcharts/diagrams to represent information?
(III.) Who prefers to just use an application (app) and enter a few details to see if he/she qualifies?

Who would develop this application: (console, desktop, web, and mobile apps) by using (I.), (II.), and (III.)...the Programmer.
Develop a web application that addresses all those conditions, and informs any user if he/she qualifies to get the stimulus payment.
Notice how important you are 😊

(2.) Advising is not an easy work in tertiary institutions.
Placing students to take the correct courses for their majors is an important task.
You have to check the student's High School GPA, ACT/SAT test scores, tranfer credits/courses and grades if any, graduation date and previous courses, grades made in those courses, and the dates those courses were taken, prior experience in field as applicable, and degree in a related field as applicable among others.
Without an efficient/effective program to check all these conditions, it is possible for students to take courses that are irrelevant to their major/program.
Imagine if those students paid for those courses. That is similar to spending money on what you don't need.
The work of a programmer is to solve problems.
Do some research and study at least one advising task for a major at an institution.
Note all the conditions required for advising students enrolled in that major/department.
Develop a web application for advising students in that major.
Notice how important you are 😊

Looping Statements

Looping statements are:
(1.) For Loop
(2.) While Loop
(3.) Do-While Loop
(4.) For-Each Loop

(1.) The general syntax of a for loop is:

                            for (initializer; condition; iterator)
                            {
                        	    statement;
                            }
                        

This is also written as:

                            for (index = beginValue; condition; index compound_assignment someValue)
                            {
                        	    statement;
                            }
                        

(2.) The general syntax of a while loop is:

                            initializer;
                            while (condition)
                            {
                        	    statement;
                        	    iterator;
                            }
                        

This is also written as:

                            index = beginValue;
                            while (condition)
                            {
                        	    statement;
                        	    index compound_assignment someValue;
                            }
                        

(3.) The general syntax of a do-while loop is:

                            initializer;
                            do 
                            {
                        	    statement;
                        	    iterator;
                            }   
                            while (condition);
                        

This is also written as:

                            index = beginValue;
                            do 
                            {
                        	    statement;
                        	    index compound_assignment someValue;
                            } while (condition);
                        

(4.) The foreach statement executes a statement or a block of statements for each element in a collection (array)
The general syntax of a foreach loop is:

                            for(dataType variable : array)
                            {
                                statement;
                            }
                        

We shall implement the foreach statement when we discuss Arrays.

Branching Statements

Branching statements are statements that control the flow of a program by branching or performing jumps to specific locations.
They include:
(1.) The Break statement
(2.) The Continue statement

Branching statements are not standalone statements.
They are usually embedded in/used with conditional statements and looping statements.

Break Statement
The break statement breaks/stops a loop even when the loop is still running.
In other words, even if the conditions for a loop has not been satisfied, introducing the break statement at any point in the loop stops the loop and ends the program.
A good advantage of the break statement is that it can be used to end an infinite loop.

Continue Statement
The continue statement causes the program to skip a portion of the loop, and continue the loop.
In other words, using the continue statement does not run the entire loop. It skips some part of the loop and then allows the loop to continue.

Let us write programs using several kinds of Statements.
Create the JavaScript file: statements.js


Include the link to the external JS file


Write the id to the HTML page


Conditional Statements
JavaScript


Example 1: Print the day for today using Multiple If-s Statement
JavaScript



Example 2: Print the day for today using Switch Statement
JavaScript



Looking at the first two examples of Decision-making statements: Multiple If-s and Switch statements, which one do you prefer?

Example 3: Using the Switch statement, write a program that displays the continent that has the country with the inscription: IN GOD WE TRUST
JavaScript




Did you notice the line break: <br>:
This is needed to display the sentences in new lines.

HTML


Repetitive Statements
JavaScript


Example 1: Multiplication Tables of Numbers 3, 7, 12 using For Loop, While Loop, and Do-While Loop
Use: For-Loop for Number 3; While Loop for Number 7; Do-While Loop for Number 12
JavaScript


Did you notice the:
(a.) Compound Assignment operator: +=: This is important to see all the products (rather than only one product)
(b.) line break: <br>: This is important to list all the multiplication operations in new lines.
(c.) concatenator operator: + used to join the strings (yes in those cases, those numbers are strings because they are enclosed in quotation marks) with the products.
(d.) that in the do-while loop: the do statement inside the balanced braces and the while statement outside the braces.

Example 2: Print Number Types using Do-While Loop, While Loop and For Loop
Print the first ten positive integers using a Do-While Loop
Print the even numbers between 1 and 20 (both ends are exclusive) using a While Loop
Print the perfect squares between 1 and 100 (both ends are inclusive) using a For Loop
JavaScript



Did you notice:
(a.) that we used the comma: , rather than the line break: <br>: This is because we want to print the numbers on the same line.
(b.) for the While loop and the For loop: the conditional statement block inside the loop block? Remember that a block is the code inside the balanced braces (opening and closing braces).

HTML




Branching Statements

Some Substantive Posts

Please Note:
(a.) Use only your first name or only your last name or your nickname (if good) for all your web applications including the URL of your website (domain name) and the copyright in the footer among others.
(b.) HTML is required.
(c.) CSS is required.
(d.) JavaScript is required.

(1.) Write a program of a short story, a poem, or drama using at least five sentences and at least five different data types.

(2.) Visit the Numbers website.
(www.numbersandnotations.appspot.com/numbers.html)
Choose any applicable question and write a JavaScript program to solve it.
Please make sure that the output of your program gives the same result as the solution of the question on my website.
You may use Arithmetic Operators, Math Object, or both.

(3.) Visit the Percent Applications website.
(www.fractions-decimals-percents.appspot.com/percentApplications.html)
Choose any applicable question and write a JavaScript program to solve it.
Please make sure that the output of your program gives the same result as the solution of the question on my website.
You may use Arithmetic Operators, Math Object, or both.

(4.) Please review the Date and Time application in this module.
Our students come from the entire 50 states of the United States and its territories.
However, the United States has different time zones.
Find out/browse/learn/discover the different time zones in the United States and its territories as seen in the The Official U.S. Time (https://time.gov/) according to the National Institute of Standards and Technology
Include those time zones in your comments.
Display the current date and time for each time zone.
Verify your answer with the times and time zones on that website.
HTML: Create a table with three headings and three columns: Time Zone, Current Date, Current Time.
HTML: Write the different time zones in each row.
JavaScript: Display the current date and current time for each time zone in their respective rows and columns.

JavaScript Programming Exercises, Practice, Solution by W3Resource
Please review:
(A.) JavaScript basic: Exercises, Practice, Solution
(B.) JavaScript Math and Numbers: Exercises, Practice, Solution
(C.) JavaScript Date: Exercises, Practice, Solution
(D.) JavaScript conditional statements and loops: Exercises, Practice, Solution
You are provided with the Questions and the Solutions.
No more than one student may do any specific question.

(5.) Attempt at least one question.
Include these in your comments:
(a.) Web link that has the question
(b.) Title of the topic. For example: JavaScript Math and Numbers: Exercises, Practice, Solution
(c.) Question number.

Some Substantive Responses

(1.) Provide any of these details if they are lacking in any DB post:
Well-written comments; another approach/method to solving the question; any additional relevant details; etc.

(2.) Use another language other than JavaScript to develop the same application of your colleague.

(3.) Numbers and Operators: If your colleague used multiple variables with the assignment operator, use a single variable with compound assignment operators.

(4.)

Check Your Understanding

Please Note:
(a.) Use only your first name or only your last name or your nickname (if good) for all your web applications including the URL of your website (domain name) and the copyright in the footer among others.
(b.) HTML is required.
(c.) CSS is required.
(d.) JavaScript is required.

TextBook Questions
(1.) Hands-on Project 2-1 on Pages 71-72

(2.) Hands-on Project 2-2 on Pages 72-73

(3.) Hands-on Project 2-3 on Pages 73-74

(4.) Hands-on Project 2-4 on Pages 74-75

(5.) Please review the Date and Time application in this module.
Extend my application by greeting your fellow colleagues in the langauge of their countries including the United States.
Write an application that:

(a.) Displays the current date and time for the countries. Because you are extending my application, you may use my code.
Find out/browse/learn/discover the greetings for Good Morning, Good Afternoon, and Good Evening for the countries.

(b.) Displays the greetings to each user (your fellow colleague) according to their countries (the current times in their countries).
If the time is between 12:00:01 AM to 12:00:00 PM (inclusive), greet Good Morning in each langauge.
If the time is between 12:00:01 PM to 04:00:00 PM (inclusive), greet Good Afternoon in each lanaguage.
If the time is between 04:00:01 PM to 12:00:00 PM (inclusive), greet Good Evening in each language.
You may use 12-hour or 24-hour time formats.
These are the minimum requirements. You are welcome to add more functionalities.

(6.) Please review the Date and Time application in this module.
Our students come from the entire 50 states of the United States and its territories.
However, the United States has different time zones.
Find out/browse/learn/discover the different time zones in the United States and its territories as seen in the The Official U.S. Time (https://time.gov/) according to the National Institute of Standards and Technology
Include those time zones in your comments.
Display the current date and time for each time zone.
Greet each user (your fellow colleague) according to their time zones (their own current times).
If the time is between 12:00:01 AM to 12:00:00 PM (inclusive), greet Good Morning.
If the time is between 12:00:01 PM to 04:00:00 PM (inclusive), greet Good Afternoon.
If the time is between 04:00:01 PM to 12:00:00 PM (inclusive), greet Good Evening.
You may use 12-hour or 24-hour time formats.
These are the minimum requirements. You are welcome to add more functionalities.

(7.)

(8.)

Vocabulary Words

Input/Output feature, HTML forms, DOM, document object model, object, function, method, function signature, method signature, type signature, parameter, parameter list, argument, argument list, HTML DOM events, event handlers, error handling, debugging, debugger,

Objectives

Students will:

(1.) Write JavaScript programs that use functions to solve real-world problems.
(2.) Write applications in HTML forms.
(3.) Handle errors in JavaScript programming.
(4.) Complete the Midterm Project on Piecewise Functions.

Recommended Readings and Videos

(1.) Textbook Chapter

(2.) Tutorials by w3schools: JavaScript Tutorial
JS Functions
JS Events

(3.) Tutorials by w3schools: HTML Forms
From: HTML Forms to HTML Input Form Attributes

Videos:
Please click the RESOURCES tab of this website
Click the LinkedIn Learning (Kent State University) link
Follow the directions to access the website.
(4.) Type JavaScript in the search bar and view the the videos that has any of the objectives.

Videos and Textbooks:
Please click the RESOURCES tab of this website
Click the O'Reilly Online Learning link
Follow the directions to access the website.
(5.) Type JavaScript in the search bar and view the the videos/read the textbooks that has any of the objectives.

Required Readings

Functions

We have used some sort of JavaScript function in previous modules.
For example, when we used JavaScript Math functions in Module 2: the Math.sqrt() function that we used in Module 2 for those questions.
Those type of JavaScript functions are system-defined functions.
In this module, we shall define our own JavaScript functions (user-defined functions) and use them in programs.

A function is a block of code that contains a series of statements.
It is also known as a method.
It allows for the reusability of those statements/codes, and perform some action when called.
Reusability of codes: define one time, use many times.
Anytime the function is called, the statements in that function are executed.

Usually, a function takes in parameters.
Parameters are local variables to the function that takes them.
Student: To be honest, I have no idea what you just said.
What are parameters? arguments?
Teacher: Let us review this example.

Assume we have this program with a user-defined function: SumNumbers that returns (displays) the sum of two numbers.
Review this function and run it in your browser console.

                            // Define the function: SumNumbers 
                            function SumNumbers(firstNum, secondNum) 
                            {
                                return (firstNum + secondNum);
                            }

                            // Call the function to add two numbers 
                            alert(SumNumbers(3, 4)); // 7
                        

In this example:
function keyword is always used when we declare a function in JavaScript.
SumNumbers is the name of the function.
(firstNum, secondNum) are the parameters.
return keyword is used to return/display whatever you want the function to output.
SumNumbers(3, 4) implies that we call the function and specify the arguments: (3, 4)

Student: So, are you saying that (firstNum, secondNum) are the parameters while (3, 4) are the arguments?
Teacher: That is correct.

When we declare a function, we use parameters.
When we call the function, we use arguments.

A Parameter represents the value that the method expects you to provide when you call it.
The declaration of the function defines its parameters.
A method can be defined with no parameter, one parameter, or several parameters.
A Parameter List is the part of the function definition that specifies the parameters.

An Argument represents the value you provide to a function parameter when you call that function.
The number of arguments must be equal to the number of the parameters.
An Argument List is the part of the function call that specifies the arguments.

The general syntax of a user-defined JavaScript function is

                            // Declare the function
                            function functionName(parameter1, parameter2, ...)
                            {
                                statements; 
                                return ... 
                            }

                            // Call the function 
                            functionName(argument1, argument2, ...)
                        

Let us implement functions in HTML forms.
Create the JavaScript file: functions.js

Write the id to the HTML page


Include the link to the external JS file


Let us review several ways of writing functions.
Notice that we do not declare any variable for the parameter.
We simply used the variable for the paramater without declaring it using the let or var keyword.
First Approach: The function name is Celsius2Fahrenheit
The parameter is celsiusTemp
We did not use the return statement
We used the DOM to return the string that includes the output.
Then, we called the function and entered a value for the argument.

Second Approach: The function name is Fahrenheit2Celsius
The parameter is fahrenheitTemp
We used the return statement to return the string that includes the output.
Then, we called the function, entered a value for the argument; and assigned the DOM to it.

JavaScript



Teacher: Which of these approaches do you prefer?
Student: The second approach.
Teacher: I prefer that approach too.
And with JavaScript, you can return any data type: string, integer, float, double, Boolean
Then, you use assign the DOM to the function that you will call.

HTML


Output:

Application: BMI (Body Mass Index)

Please review the BMI information on these two government websites [from the Center for Disease Control and Prevention (CDC) and the National Heart, Lung, and Blood Institute of the National Institutes of Health (NIH)]
About Adult BMI | Healthy Weight, Nutrition, and Physical Activity | CDC and
Calculate Your BMI - Standard BMI Calculator

As at today, the 3rd day of September, 2020; the BMI information on both websites are:

NIH website
Calculate Your BMI - Standard BMI Calculator


CDC website
About Adult BMI | Healthy Weight, Nutrition, and Physical Activity | CDC

Formula for Calculating Body Mass Index: United States System (Customary System)

$ BMI = \left(\dfrac{weight}{height * height}\right) * 703 \\[5ex] weight\:\:is\:\:in\:\:pounds (lb) \\[3ex] height\:\:is\:\:in\:\:inches (in) $

Formula for Calculating Body Mass Index: International System (Metric System)

$ BMI = \left(\dfrac{weight}{height * height}\right) \\[5ex] weight\:\:is\:\:in\:\:kilograms (kg) \\[3ex] height\:\:is\:\:in\:\:meters (m) \\[3ex] $ If you need help with conversion of units, please review the Tables and Examples in Measurements and Units

Teacher: What do you notice in both websites?
Student: They both have the information on the BMI.
In addition, the CDC website has information for both Adult BMI and Child & Teen BMI among others.
The NIH website has recommendations among others.
Teacher: That is correct. What else?
Student: They have the BMI calculator.
Teacher: Did you notice any difference in the calculator on both websites?
Student: The NIH website has BMI calculator for both Standard and Metric versions.
The CDC website has the BMI calculator for only the Metric version.
Teacher: Did you notice any issue/concern about the BMI information?
Student: Not really. Why?
Teacher: So, this is what we are going to do.
Let us develop the BMI calculator.
That calculator will calculate the BMI.
Then, we shall interpret that BMI, and make a recommendation.
. The CDC website gave us the formula for calculating the BMI. So, we shall use it.
As you can see, our calculator would have to use conditional statements for the interpretation and recommendation.
But, here is the issue.
Student: Wait, I think I see the issue.
The issue is with the domains.
Teacher: Correct!
Anyone having a BMI between 18.5 and 24.9 both endpoints included has a Normal weight.
This is: Normal weight: [18.5, 24.9]. It is a closed interval (relate with Mathematics).
So, the Overweight range for the BMI should be the weight greater than 24.9, (rather than beginning from 25) and ending at 29.9
For the Overweight range, the first endpoint is not included, but the second endpoint is included.
This is: Overweight: (24.9, 29.9]. It is a half-open half-closed interval (relate with Mathematics)
Teacher: Do you know why this would be a problem if the programmer does not fix these issues before developing the calculator?
Student: Yes. Because there would not be any interpretation for anyone whose BMI is between 24.9 and 25
But, I do see that the BMI information is for values rounded to one decimal place.
Teacher: That is correct.
And we shall develop our calculator to round to one decimal place.
But, it is important we fix the issues.
What if we do not want to round?
Look at the two examples on the CDC website. The BMI values were rounded to two decimal places.
If we developed our calculator to round to two decimal places with the information on those websites "as is"; then we would not have the interpretation and recommendation for those two examples (24.98 and 24.96) because those values are greater than 24.9 but less than 25.
Student: That makes sense.
So, the last one: Obese should be BMI greater than 29.9, rather than greater than 30?
Teacher: That is correct.

(1.) The program should accept user inputs of:
(I.) First name
(II.) Last name
(III.) Weight
(IV. Height

(2.) The program should output the:
(A.) BMI value
(B.) Interpretation
(C.) Recommendation (Advice)

(3.) The program should address user-input errors of non-positive numbers for the weight and the height.
Inform the user.
Then, do not allow the program to continue.

Let us develop a web application using HTML forms and JavaScript
Let us develop a calculator to calculate the body mass index of a user.
Then, we shall interpret the result and provide recommendations to the user (advise the user based on the BMI).
This application is helpful in completing the Midterm Project.

Create the JavaScript file: bodyMassIndex.js

Write the id to the HTML page


Include the link to the external JS file


JavaScript
(1.) Getting the form by the id, add event listener to the button onclick event.

(2.) Write a function that accepts user-input values, processes the values, and displays the result(s).
The function name must be the same name as the form id.

(3.) Include these event methods in the form as necessary:
(a.) preventDefault() Event Method: This method prevents the default behavior of the browser when the user clicks the submit type button (Calculate button)
When the user clicks the Calculate button, the default behavior of the browser is to clear the user-input values from the form.
We do not want it.
We want the user to see everything he/she entered, as well as the output.
We do not want the user to see only the output (in this case).
We want the user to see both the input and the output.
In that case, we write the code: event.preventDefault();

If you want the user not to see the input values after submitting the form, then you should not include the preventDefault method.

Another use of this method is in the clicking of web links to external websites among others.
Typically, when you a user clicks a web link in a website, the browser opens the link to the external website (either in the same window or in a different/new window).
The browser does this by default.
However, if you do not want the browser to open the external website when the user clicks the web link; then you may use the preventDefault method.
For example:
(i) The course website on ASP.NET will open in the same window when a user clicks the link.
You will need to click the Back button (Alt + Left arrow) to get back on this website.

(ii) The course website on Java will open in a new window when a user clicks the link.

(iii) The course website on Visual Basic will not open when a user clicks the link (even though it is set to open in a window: you can View the page source to verify).
Because of this script:
<script>
document.getElementById("VisualBasic").addEventListener("click", function (event)
{
   event.preventDefault()
});
</script>

(b.) stopPropagation() Event Method: This method prevents the propagation of the same event.
It is okay to skip this method if you are using only one form.
However, should you need to write JavaScript applications for several HTML forms, then it is necessary to include the method to avoid a value in one form being sent to another form.
The code is: event.stopPropagation();

(4.) Anything entered by a user in an HTML Form textbox (input type="text") is treated as a string data type.
When we deal with strings such as the first name and the last name, there is no problem. We just get the user-input values by the id.
However, if we are dealing with floating-point data types (floats and doubles) such as the weight and the height, then we need to convert those "strings" to floats by using the code: parseFloat
If we deal with integers, then we use the code: parseInt

(5.) Review the screenshots and the comments for further explanations.







HTML and HTML Form
For the HTML Form:
(1.) The form id must be the same as the button onclick event, along with the beginning and closing parenthesis.
Lines #270 and #291

(2.) Ensure that all required fields are completed by the user by including the required attribute.

(3.) Write a function in JavaScript for the Clear button and include that function in the button onclick event of the Clear button.
Please note that the name of that function should not be "clear" to avoid name conflict with the set.clear() method in JavaScript.
It's much better to name the function: erase

HTML




Student: Line #302: Why did you not use the same id you used for the first name and the last name on the form?
Is it okay to use the same id for Line #302?
Teacher: No, it is not okay.
IDs can be used only one time in HTML.
In JavaScript we get each element by it's ID because of HTML DOM.

Output:
When the Form loads:


BMI Values, Interpretation, and Advice:








Handling user-input errors:






Clear Button:


Publish the website:
Include the new and modified files and Commit Changes.
JavaScript: Functional Programming website
(https://purple-hill-013681910.azurestaticapps.net/)

Midterm Project

The midterm project is designed to assess your knowledge of Statements in solving real-world problems.
It is a Piecewise Function application.
Any other application will not considered.

Please:
(1.) Visit my website on: Piecewise Functions

(2.) Read the Story to understand the idea of Piecewise functions.

(3.) Read the Overview of Piecewise Functions for more understanding of Piecewise functions.

(4.) Study the Applications of Piecewise Functions

(5.) Review the Project Examples. Ensure you follow all the instructions and directions.

(6.) Review the Midterm Project rubric for your course.

(7.) Complete the Midterm Project for your course.

(8.) Ask questions. I can help.
If you have any issue at any time and you have reviewed the resources I provided and you cannot fix the issue, please attend the Office Hours/Live Sessions so I can help you.

(9.) Include the URL of the web application (web address) in the documentation of your Math work.
Please make sure the web application is accessible.
Ensure that you follow the best practices: link to the external CSS file in the head element and the link to the external JS file right before the closing body element.
The draft project should contain: documentation of Math work that includes the URL.
Include the draft project in OneDrive, create a shareable link, and post the link in the Midterm Project Drafts forum of the course on Blackboard or send to me via email.
I shall review and provide feedback.

(10.) When you are done (everything works well), please submit the entire project: (documentation of the Math that includes the URL) in the actual Midterm Project forum of the Blackboard course.

NOTE: Any actual project submitted to me via email will not be graded.

If you wish to save some time for research:
Please review the Piecewise Function projects done by my previous students.
The direct link of the verifiable websites are included.
(I.) VB Projects
(II.) C# Projects
(III.) C++ Projects
(IV.) Java Projects

Vocabulary Words

strings, template strings, string templates, template literals, back-tics syntax, string interpolation, string properties, string methods, Booleans, number methods,

Objectives

Students will:

(1.) Discuss the string data type.
(2.) Implement string properties.
(3.) Implement string methods.
(4.) Discuss the Boolean data type.
(5.) Discuss number methods.
(6.) Write programs that involves numbers and number methods.
(7.) Write programs that involves Date and Time.

Recommended Readings and Videos

(1.) Textbook Chapter

(2.) Tutorials by w3schools: JavaScript Tutorial
JS Strings
to
JS Number Methods

(3.) Tutorials by w3schools: JavaScript Tutorial
JS Booleans
and
JS Comparisons

(4.) Tutorials by Mozilla Development Network (MDN): Template literals (Template strings)

Videos:
Please click the RESOURCES tab of this website
Click the LinkedIn Learning (Kent State University) link
Follow the directions to access the website.
(5.) Type JavaScript in the search bar and view the the videos that has any of the objectives.

Videos and Textbooks:
Please click the RESOURCES tab of this website
Click the O'Reilly Online Learning link
Follow the directions to access the website.
(6.) Type JavaScript in the search bar and view the the videos/read the textbooks that has any of the objectives.

Required Readings

Strings

A String is a sequence of ordered characters.
It is built out of characters.
It is enclosed in matching single or double quotation marks.
Remember the first JavaScript program we wrote, the output...the message, THANK GOD.
That is an example of a string.

Displaying Quotation Marks in Strings.
There are at least two approaches we can use to display single or double quotation marks in strings.
Let us review them.
(1.) First Approach: Single and Double Matching Quotation Marks.
Matching single quotation marks can be enclosed around matching double quotations marks.
Similarly, matching double quotations marks can be enclosed around matching single quotation marks.

Example: Please run these codes in your browser console.
// Enclose single quotation marks inside double quotation marks
var singleDouble = "The 'Joy of a Teacher' is the 'Success of his Students'.";
alert(singleDouble); // The 'Joy of a Teacher' is the 'Success of his Students'.

// Enclose double quotation marks inside single quotation marks
var doubleSingle = 'The "Joy of a Teacher" is the "Success of his Students".';
alert(doubleSingle); // The "Joy of a Teacher" is the "Success of his Students".

Escape Sequences
An escape sequence is a character preceded by a backslash (\)

Escape Sequences

Escape Sequence	Description
\t	Insert a tab space
\b	Insert a backspace
\n	Insert a new line
\r	Insert a carriage return
\f	Insert a formfeed
\'	Insert a single quote
\"	Insert a double quote
\\	Insert a backslash

(2.) Second Approach: Backslash Escape Sequence, \
Backslash escape sequence turns special characters into string characters.
Let us implement backslash escape sequences by writing some quotes.
Run these codes in your browser console.
// Declare the variables
var quoteFrancis, quoteMaya, quoteJerome;

// Assign the variables
// Quote by St. Francis
// Notice the backslash before the single quotation marks
// The backslash is necessary to display the single quotation marks
quoteFrancis = "Start by doing what\'s necessary; then do what\'s possible; and suddenly you are doing the impossible. - St. Francis of Assisi";

// Quote by Maya Angelou
// Notice the backslash before the beginning and ending double quotation marks
// The backslash is necessary to display the beginning and ending double quotation marks
quoteMaya = "This is a quote by Maya Angelou: \"My mission in life is not merely to survive, but to thrive; and to do so with some passion, some compassion, some humor, and some style.\"";

// Quote by St. Jerome
// Notice the backslash before the single quotation mark
// The backslash is necessary to display the single quotation mark
quoteJerome = "Good, better, best. Never let it rest. \'Till your good is better and your better is best. - St. Jerome";

// Display the quotes
alert(quoteFrancis);
alert(quoteMaya);
alert(quoteJerome);







String Methods
JavaScript has several system-defined methods that we can use with strings.
Let us do few examples in this module.
(1.) toLowerCase() method: converts a string defined in any case to lowercase letters.
(2.) toLowerCase() method: converts a string defined in any case to lowercase letters.

Example:
// Define a string variable
var myName = "Samuel Chukwuemeka";

// Implement toLowerCase() method
alert(myName.toLowerCase()); // samuel chukwuemeka

// Implement toUpperCase() method
alert(myName.toUpperCase()); // SAMUEL CHUKWUEMEKA

Please review the remaining String methods and their implementation here
(https://www.w3schools.com/jsref/jsref_obj_string.asp)

String Property
One of the properties used with JavaScript is the length property.
It returns the number of characters of a string.
Example:
// Define a string variable
var myName = "Samuel Chukwuemeka";

// Implement the length property
alert(myName.length); // 18

Notice that the length property counts the number of included space between my first name and last name.
This is because it treats a space as a character also.

Please review the remaining String properties and their implementation here
(https://www.w3schools.com/jsref/jsref_obj_string.asp)

Student: What is the difference between a method and a property?
And why did you decide to use method here rather than function
Is it because it is system-defined rather than user-defined?
Teacher: Let us address each question...one at a time.
By reviewing the examples we just did, can you answer the first question?
Student: Not really...
Well, you did not include the parenthesis in the property but you included the parenthesis in the method
Teacher: Good observation.
Well, let us go with that observation for now until we do object-oriented programming.
However, generally speaking, in object-oriented programming:
The field is the data type and the variable.
The field is often referred to as an attribute.
The method is the function
The property allows us to change the fields.
For your second question, a method is a function whether it is user-defined or system-defined.
Remember, we used JavaScript Math functions in a previous module...we called it functions even though it was system-defined.

Booleans

Teacher: What are you looking at?
You already know.
Student tries to hide it.
Teacher: I want to ask you something.
Look at it.
Please turn it off...remember the course syllabus.
Before you turn it off, do you see two numbers in the Power off button?
Student: Numbers?
I do not see numbers.
It's an icon.
Teacher: Yes, they are numbers.
The numbers are: $0$ and $1$
$1$ is inside the $0$ in most devices.
Student: Interesting.
Teacher: $0$ represents OFF
$1$ represents ON
You see these two numbers in almost all electronic devices (tablets, smartphones, computers) including some electric switches.
In Logic, $0$ represents FALSE
$1$ represents TRUE
We use true and false Boolean values in Statements including conditional statements and iterative statements. We shall cover Statements in the next module.
The use of these two numbers: $0$ and $1$ in Mathematics and Computer Science to repesent FALSE and TRUE values is known as Boolean Algebra
It was developed by George Boole, an English mathematician/philospher/logician.
We can also use these Boolean numbers $0$ and $1$ to represent choices/options of NO and YES


A Boolean is a fundamental data type in JavaScript that:

(1.) can represent only one of two states: true or false

(2.) gives an output of only one of two values: true or false

(3.) is used for comparison (in comparison operators) to compare expressions.

(4.) is used in statements (conditional statements and iterative statements) to make decisions.

A Boolean Expression is an expression that returns a Boolean value.

Let us demonstrate some examples of the use of Booleans.
So, we have been using the alert() method (window.alert()) and HTML forms.
Let us use the console.log() function to display the JavaScript results for these examples.

Booleans: Example 1


Student: Mr. C, it seems there is 1 issue ... in the screenshot
Teacher: Do not worry about it.
There are no errors.
There are no warnings.
Student: Well, there is 1 issue in the screenshot
You always want our programs to be error-free and warning-free
as well as issue-free
But your program has an issue
Teacher: In this case: for applications you run in the browser console; do not worry about that issue.
I do not want to go beyond the scope of this course to deal with that issue.
Here is the issue (when I clicked on it):

The issue is not with the code.
Ths issue due to the Google Chrome browser because it seems the browser deprecated the navigator features.
Use HTML forms instead
Student: But you used browser console though
Teacher: For some code examples ... in this module
I used HTML forms in previous modules
Let us do more examples.

Booleans: Example 2


Booleans: Example 3

Required Substantive Posts

Please Note:
(a.) Use only your first name or only your last name or your nickname (if good) for all your web applications including the URL of your website (domain name) and the copyright in the footer among others.
(b.) HTML is required.
(c.) CSS is required.
(d.) JavaScript is required.
***(e.) Input/Output feature is recommended. This implies that HTML forms are recommended.***

Remember DB 3 Requirement. There are enough methods for everyone. If all the methods are done, please attempt another question.

JavaScript String Methods
Please review the: JavaScript String Reference
(https://www.w3schools.com/jsref/jsref_obj_string.asp)

(1.) Pick any five methods besides the ones I discussed.
Implement each method.
Indicate each method in your JavaScript comments.

JavaScript String Properties
Please review the: JavaScript String Reference
(https://www.w3schools.com/jsref/jsref_obj_string.asp)

(2.) Pick any two properties besides the one I discussed.
Implement each property.
Indicate each property in your JavaScript comments.

JavaScript Number Methods
Please review the: JavaScript Number Reference
(https://www.w3schools.com/jsref/jsref_obj_number.asp)

(3.) Pick any five methods besides the ones I discussed.
Implement each method.
Indicate each method in your JavaScript comments.

JavaScript Programming Exercises, Practice, Solution by W3Resource
Please review:
JavaScript String - Exercises, Practice, Solution
You are provided with the Questions and the Solutions.
No more than one student may do any specific question.

(4.) Attempt at least one question.
Include these in your comments:
(a.) Web link that has the question
(b.) Title of the topic. For example: JavaScript Math and Numbers: Exercises, Practice, Solution
(c.) Question number.

Examples of Substantive Posts

(1.) Module 4 by John (https://johnnyboy752.github.io/web-scripting/module4.html)

(2.) Module 4 by Edward (https://eddie-github.github.io/Web-Scripting-Module-5/)

Required Substantive Responses

(1.) Review the post (Discuss Questions) done by your colleagues.
Use a different method to work on the same String used by your colleague.

(2.) Review the post (Discuss Questions) done by your colleagues.
Use a different property to work on the same String used by your colleague.

(3.) Use another language other than JavaScript to develop the same application of your colleague.

(4.) Other substantive responses.

Examples of Substantive Responses

(1.) Module 4 by John (https://johnnyboy752.github.io/DB-Response/module4response.html)

Check Your Understanding

Please Note:
(a.) Use only your first name or only your last name or your nickname (if good) for all your web applications including the URL of your website (domain name) and the copyright in the footer among others.
(b.) HTML is required.
(c.) CSS is required.
(d.) JavaScript is required.
***(e.) Input/Output feature is required. This implies that HTML form is required.***

(1.) A string palindrome is a word, phrase, clause or sequence of characters that is spelled and read the same way backward and forward.
In other words, when one reads it as is, reverses it and reads it again; the pronunciation is the same.
Examples include the:
Words: HANNAH, BOB, madam, level, civic, racecar, rotor
Phrase: never odd or even
Clause: nurses run
Sentence: Was it a car or a cat I saw?

Write a JavaScript program that requests user input. This implies that you should use an HTML form.
Determine if the user input is a string.
If the user input is not a string, ask the user to enter only a string.
If the user input is a string, determine if it is a string palindrome.
Inform the user whether it a string palindrome or not.
Test at least one example of: Words, Phrase, Clause, and Sentence that was listed.
This implies that you should test at least four examples and make sure it works well for each example: Words, Phrase, Clause and Sentence.

TextBook Questions
(2.) Hands-on Project 7-3 on Pages 304 and 305

(3.)

(4.)

Vocabulary Words

array, array methods, objects,

Objectives

Students will:

(1.) Discuss arrays.
(2.) Implement array methods.
(3.) Pass arrays as function parameters.
(4.) Pass arrays as arguments.
(5.) Write programs that use arrays to solve real-world problems.
(6.) Discuss objects.

Recommended Readings and Videos

(1.) Textbook Chapter(s)

(2.) Tutorials by w3schools: JavaScript Tutorial
JS Arrays
to
JS Array Const
and
JS Objects

Videos:
Please click the RESOURCES tab of this website
Click the LinkedIn Learning (Kent State University) link
Follow the directions to access the website.
(3.) Type each of: JavaScript Arrays and JavaScript Objects in the search bar and view the the videos.

Videos and Textbooks:
Please click the RESOURCES tab of this website
Click the O'Reilly Online Learning link
Follow the directions to access the website.
(4.) Type each of: JavaScript Arrays and JavaScript Objects in the search bar and view the videos/read the textbooks.

Required Readings

Arrays

An Array is a list or data container that contains:
(1.) single or multiple values of the same data type or
(2.) multiple values of different data types
The values stored by an array are known as the elements or the members of the array.

The dimension of an array is the direction in which one can specify the elements of the array.
Example:
Record the ages of the students in Mr C's class.
We have only one variable: age.
This is a one-dimensional array...array of integers
A one-dimensional array is also known as a single-dimensional array.

Each student in Mr. C's class takes at least one course this semester.
Record the number of courses taken by each student in Mr. C's class.
Some of the courses are one-credit, two-credit, three-credit, four-credit courses.
Assume the tuition for each course depends on the number of credit units.
Calculate the total cost of all the courses taken by all the students in Mr. C's class.
For us to do this, we need to list the number of courses taken by each student in Mr. C's class. We can represent this in the column.
We also need to calculate the cost of the courses taken by each student. We can represent this in the row.
So, we have two variables: courses and cost.
This is a two-dimensional array.
The column is the array of integers ... the number of courses.
The row is the array of doubles ... the cost of the number of courses taken by each student.
We can then find the total cost...connect this explanation with Matrices in Algebra
In this module, we are only concerned with one-dimensional array.

The rank of an array is the number of dimensions in the array.
This implies that the rank of a one-dimensional array is 1
The rank of a two-dimensional array is 2
The rank of a three-dimensioanl array is 3 and so on and so forth.

Why Are We Learning Arrays?
Assume you want to work with five different integers; rather than declare five different variables for the five integers, it is much better to declare a single integer array that will contain all five integers.

Notable Notes About Arrays
(1.) An array in JavaScript is declared by using the square brackets.
Please do not use Array as the name of your array to avoid name conflicts.
We can declare arrays in JavaScript using any of these approaches:

// Array is already defined: Members are known
var arrayName = [value1, value2, value3, ...];

// Size is known. However, members are to be added later (after declaration)
var arrayName = [arraySize];

(2.) Arrays are zero-indexed.
This implies that the position of array elements begin with zero.
The first element in the array is at position: zero or index: zero
The second array element is at index: one
The index of the third element in the array is two.
The index of the fourth array element is three.
Given an array of size: $n$; the index of the last element in the array is $n - 1$
We output the index of the array element by:
array[index] = element;

Let us write some code examples to demonstrate what we have discussed so far.
We shall write some applications to run on the browser console.
Then, we shall write other applications with HTML forms.

Example 1: Array of the perfect squares of the first positive ten integers
Declare an array of a specified size without the elements
Include elements in the array by using array index
Print the length/size of the array using the arrayName.length property
Print the array using the different types of iteration statements: For Loop and While Loop



Example 2: Array of the perfect squares of the first positive ten integers
Print the array using Do-While Loop


As you probably noticed from the code, the console.log function displays output in new lines.
So, how can we use the function to display the output in the same line separated by commas?
It is better to define a global variable and initialize it
Then, we use that variable to display the results in the same line separated by commas
Then, we use the console.log function to display that variable.

In Module 2, we discussed the Looping statements: For Loop, While Loop and Do-While Loop
The other Looping statement is the ForEach Loop
The ForEach Loop is used to iterate through an array.
Let us implement a forEach loop

Example 3: Array of the perfect squares of the first positive ten integers
Print the array using ForEach Loop


Student: Some questions, Mr. C
Teacher: Please go ahead
Student: Wonder why you did not decide to implement the do-while loop and forEach loop in the same program?
Why did you write different programs for it?
Teacher: Good question.
If I wrote it in the same program, it may print the loop twice.
To avoid printing the loop twice, I will have to declare more variables, rather than use the printArray that I used for the for loop and while loop
Student: In the forEach loop, what does the arrow sign...in Line #34 represent?
Teacher: The Arrow function is used to write short function syntax.
The IDE I used (Visual Studio IDE) automatically included it when I wrote printArray.forEach (Intellisense/Code completion)
Then, I made some changes to the code.
You can review Arrow Functions Arrow Functions
(https://www.w3schools.com/Js/js_arrow_function.asp)
Please note:
For forEach loop, the item and the index is part of the arrow function.
You may choose to use either or both of them as you wish. However, please do not change the names of those two variables.
Let us review some differences between the forEach Loop and the other looping statements.

ForEach Loop	For Loop, While Loop, Do-While Loop
(1.) Loops through each array element without using a counter.	(1.) Loops through each array element using a counter.
(2.) The length of the array is not needed.	(2.) The length of the array is needed.

Let us do another browser console application example using a pre-defined array of strings

Example 4: Create an array of strings of size 4
Print the array.
Print the fourth element of the array
Sort the array
Print the sorted array.
Print the fourth element of the sorted array.



Teacher: Did you notice that in the previous example, I used only the item
But, in this example; I used only the index?
Student: Yes, I did.
I like this method.
However, I feel that the arrow function is confusing.
Can we write a forEach method without using the arrow function?
Teacher: Yes, we can
However, if you are using Visual Studio Code IDE to write your JavaScript...create a .js file and write the JavaScript; the IDE will automatically complete the code for you if you write the name of the array, write a period, and write forEach.
You will see several options of how to write it.
At least one of those options uses the arrow function.
But, if you do not want to use the arrow function; then you need to creata function first and then use your array with the forEach method to call that function.
Here is an example of what I mean.
Let's print the array of strings without using the arrow function.

// Declare the array of string of size 4
var names = ["Samuel", "Dominic", "Chukwuemeka", "SamDom For Peace"];

// Declare a function to print the array
function nameArray(item, index)
{
   printArray += index + ": " + item + "\n";
}

// Print the array using a forEach loop
console.log("The array of names is:")
names.forEach(nameArray);
console.log(printArray); // It will print the array

Let us do the next example using HTML form.
The example is helpful in completing the Final Project: Option 2

Data Analysis: Descriptive Statistics with JavaScript

Statistics comprises Data Analysis.
Data Analysis is part of Data Science.
Data Science is part of Computer Science/Programming.
As a programmer, it is very likely that you will deal with data.
In this course, we shall focus only on some of the Descriptive Statistics of Data Analysis.

The Descriptive Statistics that we shall discuss in this course are:

(1.) Measures of Center: Also known as the Measures of Central Tendency
They are the: Mean, Median, Mode, and Midrange.

(2.) Measures of Spread: Also known as the Measures of Dispersion or the Measures of Variability or the Measures of Variation
For this course, we shall focus on the: Range, Variance, and Standard Deviation.

(3.) Measures of Position: Also known as the Measures of Location
For this course, we shall focus on the: Five Number Summary of Data
They are the: Minimum, First Quartile, Second Quartile, Third Quartile, and Maximum.
The First Quartile is also known as the Lower Quartile or the 25th Percentile
The Second Quartile is also known as the Median or the Middle Quartile or 50th Percentile
The Third Quartile is also known as the Upper Quartile or 75th Percentile

Let us write program examples of descriptive statistics using JavaScript
The formulas used are the formulas on the Descriptive Statistics website
(1.) Formulas for the Measures of Center
(2.) Formulas for the Measures of Variation
(3.) Formulas for the Measures of Location

Example 5: Data Analysis: Descriptive Statistics of Raw Ungrouped Data with JavaScript
(1.) Create the JavaScript file
Name it arrays.js

(2.) Include the JavaScript file: arrays.js


(3.) The HTML file
Include the id: #arrays in the navigation Sidebar


(4.) The HTML file
Write the code.
HTML







(5.) Write the JavaScript program.
Write the code.
JavaScript














(6.) The HTML file
Include the JavaScript library: math.js
Please make sure you place it first before the other JavaScript files.


(6.) Test the program with the Solved Examples from the Descriptive Statitics website.
Does the program work?
The answers on those solved examples should be the same as the output from the program.

(7.) Publish:
Please make sure you include the files into the GitHub repository (as we did earlier) to overwrite existing files.
Then, Commit Changes.

Check out our published website: JavaScript: Functional Programming website
(https://purple-hill-013681910.azurestaticapps.net/)

Student: I have several questions, Mr. C
Teacher: Bring it on

Objects

Required Substantive Posts

Please Note:
(a.) Use only your first name or only your last name or your nickname (if good) for all your web applications including the URL of your website (domain name) and the copyright in the footer among others.
(b.) HTML is required.
(c.) CSS is required.
(d.) JavaScript is required.
(e.) Input/Output feature is required. This implies that HTML forms are required. This implies that you should request user-input.
(f.) Display each result in the HTML form.
(g.) Do not use the alert() method or the console.log() function.

Remember DB 3 Requirement. There are enough methods for everyone. If all the methods are done, please attempt another question.

JavaScript Array Methods
Please review the: JavaScript Array Reference
(https://www.w3schools.com/jsref/jsref_obj_array.asp)

(1.) Pick any five methods besides the ones I discussed.
Implement each method.
Indicate each method in your JavaScript comments.

For Questions (2.) and (3.)
Please review these Sorting Techniques and Algorithms
(https://www.samdomforpeace.com/DataStructures/Sorting.html)

(2.) Ask the user to enter an array size of at least 3 (array size $\ge 3$).
Sort the array in ascending order using any of the techniques.
Specify the technique.

(3.) Ask the user to enter an array size of at least 3 (array size $\ge 3$).
Sort the array in descending order using any of the techniques.
Specify the technique.

(4.) Ask the user to enter an even-sized array size of at least 8 (array size $\ge 8$).
Divide the even-sized unsorted array into two equal halves, sort the first half in ascending order, and sort the second half in descending order.

(5.) Ask the user to enter an even-sized array size of at least 8 (array size $\ge 8$).
Divide the even-sized unsorted array into two equal halves, sort the first half in descending order, and sort the second half in ascending order.

JavaScript Programming Exercises, Practice, Solution by W3Resource
Please review:
(A.) JavaScript array - Exercises, Practice, Solution
(B.) JavaScript Object - Exercises, Practice, Solution
You are provided with the Questions and the Solutions.
No more than one student may do any specific question.

(6.) Attempt at least one question.
Include these in your comments:
(a.) Web link that has the question
(b.) Title of the topic. For example: JavaScript Math and Numbers: Exercises, Practice, Solution
(c.) Question number.

Examples of Substantive Posts

(1.) Module 6 by Edward (https://eddie-github.github.io/Web-Scripting-Module-6/)

Required Substantive Responses

(1.) Review the post (Discuss Questions) done by your colleagues.
Use a different method to work on the same Array used by your colleague.

(2.) Review the post (Discuss Questions) done by your colleagues.
Use a different sorting technique to work on the same Array used by your colleague.

(3.) Use another language other than JavaScript to develop the same application of your colleague.

(4.) Other substantive responses.

Check Your Understanding

Please Note:
(a.) Use only your first name or only your last name or your nickname (if good) for all your web applications including the URL of your website (domain name) and the copyright in the footer among others.
(b.) HTML is required.
(c.) CSS is required.
(d.) JavaScript is required.
(e.) Input/Output feature is required. This implies that HTML forms are required. This implies that you should request user-input.
(f.) Display each result in the HTML form.
(g.) Do not use the alert() method or the console.log() function.

TextBook Questions
(1.) Hands-on Project 7-2 on Pages 303 and 304

(2.) Hands-on Project 7-4 on Pages 305 and 306

(3.) Please review these two formats of the Descriptive Statistics Calculators:
Horizonal Data Entry: Descriptive Statistics Calculators
Vertical Data Entry: Descriptive Statistics Calculators
For the horizontal data entry, each data value is separated by a comma.
For the vertical data entry, each data entry is entered in a new line.
(a.) Modify the Data Analysis: Descriptive Statistics of Raw Ungrouped Data with JavaScript application by asking the user to select the format to enter the data values: horizontal or vertical.
You may wish to use a ComboBox or Radio Buttons or other applicable form element(s).
(b.) Display the appropriate calculator based on the user's selection.
(c.) Write specific directions/instruction to the user for each calculator format.
You may use a placeholder.
Alternatively, you may write the instruction and emphasize it by making it bold, italicizing it, underlining it, or highlighting it appropriately
(d.) Test your program and ensure that the correct values are displayed in the form for each descriptive statistic measure.
This implies that your program should display the correct results for each: Measure of Center, Measure of Spread, and Measure of Position.
Your program should display the same results for the same dataset as tested with both calculator formats.

(4.)

Vocabulary Words

class, object, object-oriented programming, constructor, method, variables, this keyword, class keyword, constructor keyword, parameterized constructor, parameterless constructor, arguments, inheritance, super keyword, extends keyword,

Objectives

Students will:

(1.) Discuss the terms used in object-oriented programming.
(2.) Create a class.
(3.) Create a constructor.
(4.) Write programs involving classes, constructors, methods, and objects.
(5.) Discuss the inheritance of a class.
(6.) Write programs that demonstrate the inheritance of a class.

Recommended Readings and Videos

(1.) Textbook Chapter(s)

(2.) Tutorials by w3schools: JS Classes
From Class Intro to Class Static
(https://www.w3schools.com/js/js_class_intro.asp)

(3.) Tutorials by Mozilla Development Network (MDN): Classes - JavaScript
(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)

(4.) Tutorials by Mozilla Development Network (MDN): Inheritance in JavaScript
(https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance)

Videos:
Please click the RESOURCES tab of this website
Click the LinkedIn Learning (Kent State University) link
Follow the directions to access the website.
(5.) Type each of: JavaScript Object-oriented Programming and JavaScript Class in the search bar and view the videos.

Videos and Textbooks:
Please click the RESOURCES tab of this website
Click the O'Reilly Online Learning link
Follow the directions to access the website.
(6.) Type each of: JavaScript Object-oriented Programming and JavaScript Class in the search bar and view the videos/read the textbooks.

Required Readings

Object-oriented Programming

Teacher: So, we have discussed data types and variables
We did some work/calculations with the data types and variables.
Our project started to grow.
We needed to lessen codes and reuse codes. Simply put, we wanted to do more with less.
We introduced functions to achieve that goal.
Functions included the data types, variables and the work/calculations done with them.
The project started getting large and popular. It needed to serve more clients.
What should we do?
Can we join data types, variables and functions as a package? Can we reuse that package as much as we want?
The answer is Yes!
Welcome to Classes
Student: Where did the object-oriented come from?
Teacher: Good question.
Remember how we call a function any time we want to use that function?
We shall 'call the class', well; create a new instance of the class anytime we want to use that class.
So, whenever we create an instance of the class because we want to use that class, we have created an object
That means that an object is an instance of the class.
Student: So, what you are saying is that an object is simply calling the class in order to use it?
Just like we do in functions?
Teacher: That is correct.
Simply put, creating an object means calling the class.
We can create as many objects as we want by calling the class anytime we want.
In that sense, we can write programs for complex projects.
There are some points to note about classes in JavaScript because it is quite different from the classes we create for other object-oriented programming languages.
Let us discuss some notatble notes about JavaScript classes.

Notable Notes About JavaScript Classes
(1.) A class is a combination of methods (constructor and user-defined methods) with variables.
The user-defined method should not include the function keyword.
A function is a method that includes the function keyword.
The user-defined method does not include the function keyword.
This implies that in JavaScript, a function is a method. However, a method is not a function.

(2.) A class is used to create an object.
An instance of a class is an object.
The first instance of a class is the first object.
The second instance of a class is the second object.
The third instance of a class is the third object, and so on and so forth.
This implies that many objects can be created from just a single class because of the many instances that can be done from that class.

(2.) The keyword: class is used to create a class.

(3.) The constructor and user-defined method(s) are declared directly in the class.
The class variables are not declared directly in the class.
The class variables can only be declared in the constructor and/or in the user-defined method.
The variables declared in the constructor are the arguments of the object.
They belong directly to the object.
This implies that the class variables declared in the constructor are the parameters (contsructor's parameters), while the values of those variables used in the creation of the object are the arguments (object's arguments).
The variables declared in the user-defined method can also be used by the object after it has been created because the object will use that method.
Typically, when a method is created/defined by the user, the method will return "something".
That "something" returned by the method most likely used the variables declared in that method.
Hence, the object when using that method, indirectly uses the variables declared in that method.
In other words:
When the object is created (when the first instance of the class is called), the variables declared in the constructors are used.
After the object is created, the object can use that method.
Because the object is using that method, the object will use whatever is returned by that method.

(4.) A constructor is a special method used to initialize the class variables declared in it.
It is a method.
However, it is different from a user-defined method because the constructor keyword must be used to create the the constructor.
Just as we use the keyword: class to create a class, we must also use the keyword: constructor to create a constructor.
The variables initialized by a constructor are known as the constructor's parameters.
A constructor may have a constructor (parameterized constructor) or may not have any parameter (parameterless constructor).
But, if a constructor has at least one parameter, the constructor initializes those variables with the use of the this keyword.
The this keyword is used with the dot access member operator: . (the decimal point/period button on your keyboard) and each parameter in initializing each variable.
For example: this.variable = value OR this.variable = variable (whatever your preference)

(5.) Every class in JavaScript must have only one constructor.
Even if the constructor is not created by the user, JavaScript will create a default constructor when an instance of the class (an object) is created.
A class may or may not have any user-defined method.
But, it must have a constructor.
This implies that a class must have at least one method (because the constructor is also a method).

Please review the comments in each program for further notes.
Let us begin with console.log() applications.
Then, we proceed to HTML form applications.

Example 1: Print my full name and my nickname
Use only a parametized constructor.


Student: Did you highlight your names in the screenshot or did the code output it that way?
Teacher: Good question.
In previous browser console appications, I used the highlighter in the Snipping Tool to highlight the results.
However, we can format the output of JavaScript console applications in terms of foreground colors and background colors among others.
This is the List of the Console Log Formatting Commands
(https://www.samdomforpeace.com/References/ASCII.html#console)
\u001B[43m command sets the background color in the text to yellow.
\x1B[0m command resets it.
It is important to reset it, else it will display the background color of the entire text in the console.
If you add foreground colors, it is also important to reset.
In addition, I used an empty new line to separate input from output.
This is what I intend to do going forward, for a better understanding of the program.
Let us write more applications.

Example 2: Print my full name and my nickname
Use a parameterless constructor and two user-defined methods.


Observations
Please note:
In accordance with other object-oriented programming languages, it is recommended that you:
(1.) Use Pascal casing for user-defined methods (just as we did for functions)

(2.) Use Camel casing for variables

Also:
Did you notice how the object:
(3.) used the variable in Example 1: used the constructor parameters?
The object used each variable directly.
For example: person.firstName (no parenthesis)

(4.) used the method in Example 2?
For example: person.FullName() (notice the parenthesis because FullName is a method, not a variable)
The object did not use the variables in the method directly.
It used the method directly.
It used the variables in the method indirectly because it used the method directly.

Example 3: Print my full name and my nickname
Use a parameterized constructor and a user-defined method.


Teacher: Did you notice what I did in Example 3?
Student: Yes, Mr. C
Teacher: What did I do?
Student: You wrote the console.log in the constructor, rather than writing it after the class
Teacher: That is correct.
This is because: anytime the object is created, the constructor is called.
The constructor is the first thing that is called when an instance of the class is created.
The program went to the constructor and noticed some parameters and the console.log function.
Then, it went to the object and noticed that the arguments in the object corresponds to the parameters in the constructor.
It goes ahead and inserts those arguments and prints them in the console.
Student: I understand.
But, I am yet to see the use of classes
Because the examples you just did can be done with functions
And it is much easier to write these examples with functions
And you can call the functions as many times as you want to, rather than using the object as many times as you want to.
Teacher: That is correct.
However, we are just getting started. 😊
Let us head on to Mathematics and write several Mathematical applications using classes.
Next, we shall discuss Inheritance and write several programs involving inheritance.
Then, you may appreciate the use of classes.

Example 4: Calculate the Area and Perimeter of a Square


Notice that we had to use a template literal because we wanted the method to return multiple values.

Some Substantive Posts

Please Note:
(a.) Use only your first name or only your last name or your nickname (if good) for all your web applications including the URL of your website (domain name) and the copyright in the footer among others.
(b.) HTML is required.
(c.) CSS is required.
(d.) JavaScript is required.
(e.) HTML form is required.
(f.) Display each result in the HTML form.
(g.) Do not use the alert() method or the console.log() function.

(1.) Using your academic major or any academic discipline of your choice, create a class that has a constructor and at least two (two or more) methods.
The constructor should have at least one parameter. (parameterized constructor)
Each user-defined method should have at least one variable.
Create an object that uses at least one argument and at least one variable of each method.

Some Substantive Responses

(1.) Rewrite the same program of your colleague using a parameterized constructor and only one user-defined method.

(2.) Rewrite the same program of your colleague using a parameterless constructor and at least one (one or more) user-defined method.

(3.)

Check Your Understanding

Please Note:
(a.) Use only your first name or only your last name or your nickname (if good) for all your web applications including the URL of your website (domain name) and the copyright in the footer among others.
(b.) HTML is required.
(c.) CSS is required.
(d.) JavaScript is required.
(e.) HTML form is required.
(f.) Display each result in the HTML form.
(g.) Do not use the alert() method or the console.log() function.

(1.)

(2.)

(3.)

TextBook Questions
(4.) Hands-on-Project 8-2 on Pages 355 and 356

(5.) Hands-on-Project 8-3 on Pages 357 and 358

Examples of Substantive Posts/Responses

(1.) Module 7 by John (https://johnnyboy752.github.io/web-scripting/module7.html) OR Module 7 by John (https://blue-stone-0929a270f.azurestaticapps.net/module7.html)

Vocabulary Words

JSON, JavaScript Object Notation, JSON syntax, JSON data types, JavaScript objects, JavaScript arrays, JSON objetcs, JSON arrays, JSON HTML,

Objectives

Students will:

(1.) Discuss the JavaScript Object Notation (JSON)
(2.) Write programs involving JSON.

Recommended Readings and Videos

(1.) Textbook Chapter(s)

(2.) Tutorials by w3schools: JS JSON
From Class Intro to Class Static
(https://www.w3schools.com/js/js_json_intro.asp)

(3.) Tutorials by JSON: Introduding JSON
(https://www.json.org/json-en.html)

(4.) Tutorials by Mozilla Development Network (MDN): JSON
(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON)

Videos:
Please click the RESOURCES tab of this website
Click the LinkedIn Learning (Kent State University) link
Follow the directions to access the website.
(5.) Type: JavaScript Object Notation or JSON in the search bar and view the videos.

Videos and Textbooks:
Please click the RESOURCES tab of this website
Click the O'Reilly Online Learning link
Follow the directions to access the website.
(6.) Type: JavaScript Object Notation or JSON in the search bar and view the videos/read the textbooks.

Required Readings

JSON

Some Substantive Posts

My dear, please view the Assess tab.

Some Substantive Responses

Check Your Understanding

Please Note:
(a.) Use only your first name or only your last name or your nickname (if good) for all your web applications including the URL of your website (domain name) and the copyright in the footer among others.
(b.) HTML is required.
(c.) CSS is required.
(d.) JavaScript is required.
(e.) Input/Output feature is required. This implies that HTML forms are required.
(f.) Display each result in the HTML form.
(g.) Do not use the alert() method or the console.log() function.

(1.) You learned several concepts in this module.
Develop a JSON program on any three concepts you learned in this module.
Please ensure you write each concept.

TextBook Questions
(2.) Hands-on-Project 8-4 on Pages 359 and 360

(3.) Hands-on-Project 8-5 on Pages 361 and 362

Vocabulary Words

Objectives

Students will:

(1.)
(2.)

Recommended Readings and Videos

(1.) Textbook Chapter

(2.)

(3.)

Required Readings

Some Substantive Posts

(1.)

Some Substantive Responses

Check Your Understanding

(1.)

There are three options for your Final Exam
Please choose only one option.

Option 1 (Course Summary)

This exam is designed to assess your understanding of the JavaScript course.

You have reviewed several topics and several concepts in each topic for seven modules.
Pick at least 1 concept in at least 1 topic in each of the 7 modules.
That gives at least 7 concepts in 8 different topics in 7 modules.
Find three more concepts in any topic in any module.
That gives 10 concepts.

For each concept, please:

(1.) Write at least three sentences about that concept.

(2.) Develop a web application for that concept.
Please write the: Module number, the Topic, and the Concept

Deliverable:
Include all the web applications for the 10 concepts in 10 different topics for the 7 modules in one website.
This implies that your website URL should have the web applications of those 10 concepts.
Please submit the URL of that web application in the Final Exam folder of the Blackboard course.

Option 2: Introduction to Programming Using JavaScript (98 - 382)

Candidates for this exam should be able to recognize and write syntactically correct JavaScript code, use data types supported by JavaScript, and be able to recognize and write JavaScript code that will logically solve a given problem.
Candidates are expected to have at least 100 hours of instruction or hands-on experience with the JavaScript programming language.
Candidates should also be familiar with JavaScript features and capabilities, and understand how to write, debug, and maintain well-formed, well documented JavaScript code.

Please:
(1.) Review the questions and solutions of the Introduction to Programming Using JavaScript v1.0 (98-382) exam
(https://www.itexams.com/exam/98-382)
This is Free but Requires Patience
Focus on what we covered.
However, you are welcome to review all of them.

Student: Mr. C, you are giving us a final exam with the answers?
How nice of you?
Teacher: Yes of course, I am nice. 😊
But, please read on.

(2.) Pick any five questions.

(3.) Do not attempt any question already selected by your colleague.
If your colleague indicates by writing that he/she is working on a question, then you need to find another question.
Two or more students are not permitted to do the same question.

(4.) In the Final Exam Questions forum of the Blackboard course, write the question numbers in that forum only if it has not been written by any other student.
In other words, you need to review any questions posted by your colleagues and make sure that you do not attempt the same question.

(5.) Develop a web application (website) that solves the five questions.
For each question:
(a.) Number it
(b.) Explain the solution to the question.
(c.) Write code examples to demonstrate the solution.
(d.) Display the output of the code examples.

(6.) Use the Snipping Tool or the Snip & Sketch on your computer and take clear screenshots of the: question number, solution of the question, explanation of the solution, code examples of the solution, and the output of the code examples

(7.) Submit the URL of your web application and all the clear screenshots in the Final Exam folder of the Blackboard course.

Option 3: Programming in HTML5 with JavaScript and CSS3 (70 - 480)

Candidates for this exam are developers with at least one year of experience developing with HTML in an object-based, event-driven programming model, and programming essential business logic for a variety of application types, hardware, and software platforms using JavaScript.
Candidates should also have a thorough understanding of the following:

• Managing program flow and events
• Asynchronous programming
• Data validation and working with data collections including JQuery
• Handling errors and exceptions
• Arrays and collections
• Working with variables, operators, and expressions
• Working with prototypes and methods
• Decision and iteration statements

Please:
(1.) Review the questions and solutions of the MCSD Programming in HTML5 with JavaScript and CSS3 v1.0 (70-480) exam
(https://www.itexams.com/exam/70-480)
This is Free but Requires Patience
Focus on what we covered.
However, you are welcome to review all of them.

Student: Mr. C, you are giving us a final exam with the answers?
How nice of you?
Teacher: Yes of course, I am nice. 😊
But, please read on.

(2.) Pick any five questions.

(3.) Do not attempt any question already selected by your colleague.
If your colleague indicates by writing that he/she is working on a question, then you need to find another question.
Two or more students are not permitted to do the same question.

(4.) In the Final Exam Questions forum of the Blackboard course, write the question numbers in that forum only if it has not been written by any other student.
In other words, you need to review any questions posted by your colleagues and make sure that you do not attempt the same question.

(5.) Develop a web application (website) that solves the five questions.
For each question:
(a.) Number it
(b.) Explain the solution to the question.
(c.) Write code examples to demonstrate the solution.
(d.) Display the output of the code examples.

(6.) Use the Snipping Tool or the Snip & Sketch on your computer and take clear screenshots of the: question number, solution of the question, explanation of the solution, code examples of the solution, and the output of the code examples

(7.) Submit the URL of your web application and all the clear screenshots in the Final Exam folder of the Blackboard course.

There are two options for your Final Project.
Please choose only one option.

Option 1: (Your Choice)

It is important you communicate with me for approval prior to doing this project.
The final project is designed to assess problem-solving skills using the knowledge you have acquired in the course.
In that regard, solving at least a real-world problem using the knowledge acquired from the course is expected.

(1.) Think about any of these companies: our Institution: Kent State University; your local campus; your work place; public and private schools (excluding home schools); organizations, firms, and businesses (excluding controversial firms and the like).
Any company you choose should have a verifiable website.
The direct link of the company's website is required.

(2.) Identify a problem on the website that you want to solve.
The problem must be solved by programming using the knowledge acquired from any of the course topics/concepts/description/learning objectives.
Think about your Midterm Project. You solved a problem: calculating bills, federal taxes, etc.

(3.) Develop the computer program to solve the problem.
Test the program to ensure that it works.
Write detailed comments as applicable.

(4.) Prepare a Documentation Manual/Reflection for the project.
Please cite your sources accordingly.
What is the company?
What is their website?
What problem did you identify?
Did you solve the entire problem or part of the problem?
What course topics/concepts/description/learning objectives did you apply in solving the problem?
How did you solve the problem?
Did you encounter any issues while trying to solve the problem?
Are there any limitations to the project?
Are there any recommendations to the company?

Deliverables:
(1.) Web application URL (website address)
(3.) Project Reflection/Documentation Manual

Please submit all these information as a zipped folder (.zip only) in the Final Project folder of the Blackboard course.

Option 2: Descriptive Statistics of Data

The final project is designed to assess your understanding and analysis of data using the knowledge you have acquired in the course.

Please:
(1.) Visit my website on: Descriptive Statistics

(2.) Review the information for a good understanding of Descriptive Statistics. It is highly likely that you have a prior knowledge of this topic. Is that right?

(3.) Click the Project link.

(4.) Review the Project Examples. Ensure you follow all the instructions and directions.

(5.) Complete the Final Project for your course.

(6.) Ask questions. I can help.
If you have any issue at any time and you have reviewed the resources I provided and you cannot fix the issue, please attend the Office Hours/Live Sessions so I can help you.

(7.) Include the URL of the web application (web address) in the documentation of all Math work.
Please make sure the web application is accessible.
Then submit that draft project (documentation of Math work and the web application address) in the Final Project Drafts forum of the course on Blackboard.
I shall review and provide feedback.
You may also submit your draft to me via email. I shall review and provide feedback.

(8.) If everything works well, please include the URL of the web application in the Math work documentation, and submit it in the appropriate area of the Blackboard course.

NOTE: Any actual project submitted to me via email will not be graded.

Need a programmer for personal/professional/commercial projects?
Look no further. Any of my available students (not just the ones listed here) can help.
Just head on to the Division of Student Affairs, Kent State University or contact me here or via my school email address.

These are nice projects done by my students.
Some of them are Midterm Projects while some are Final Projects.
Because of FERPA (Federal Educational Rights and Privacy Act) laws, only the first names of my students are written.

JavaScript Functional Programming Approach

Web Applications

(1.) GPA Calculator for Kent State University by John
As at today: 12/24/2021, the verifiable website for this application is: GRADE POINT AVERAGE (GPA) | Kent State University
(http://catalog.kent.edu/academic-policies/grade-point-average/)



(2.) City of Akron Current Water Rates by John
As at today: 12/24/2021, the verifiable website for this application is: Water and Sewer Rates: City of Akron
(https://www.akronohio.gov/cms/site/dced0363af40e9b7/index.html)

JavaScript: Object-oriented Programming Approach

Web Applications

(1.)

JavaScript Reference: MDN (Mozilla Developer Network)

JavaScript at Microsoft: Microsoft Tech Community (Blog for JavaScript Developers)

American Standard Code for Information Exchange (ASCII) Characters

Sorting Techniques and Algorithms

LinkedIn Learning (Kent State University)

O'Reilly Online Learning
For Kent State University students, Select your Institution > Choose “Not Listed? Click here.”
Enter your Kent State University email address and click Let’s Go

Tutorials, Exercises, and Solutions from W3Resource (Free)

JavaScript Exercises, Practice, and Solutions from W3Resource (Free)

SoloLearn (Free)

............................................
Free Courses on JavaScript from Udacity
Intro to JavaScript (Beginner)

Object-Oriented JavaScript (Intermediate)

JavaScript and the DOM (Intermediate)

JavaScript Testing (Intermediate)

Asynchronous JavaScript Requests (Intermediate)

Intro to Ajax (Intermediate)

JavaScript Design Patterns (Advanced)

JavaScript Promises (Advanced)
............................................

JavaScript Notes for Professionals: Stack Overflow Documentation (Free)

JavaScript Tutorials: MDN (Mozilla Developer Network)

Wikibooks: JavaScript (Free)

Stack Overflow: Question and Answer Forum for Computer Science

Lynda.com/LinkedIn Learning (Start for Free. Then, not free)

Codecademy (Start for Free. Then, not free)

Chukwuemeka, S.D (2016, April 30). Samuel Chukwuemeka Tutorials - Math, Science, and Technology. Retrieved from https://www.samuelchukwuemeka.com

(2021). Goalkicker.com. http://www.goalkicker.com/JavaScriptBook/JavaScriptNotesForProfessionals.pdf

Carey, P., & Vodnik, S. (2022). JavaScript for Web Warriors (7th ed.). Cengage.