If there is one prayer that you should pray/sing every day and every hour, it is the
LORD's prayer (Our FATHER in Heaven prayer)
- Samuel Dominic Chukwuemeka
It is the most powerful prayer.
A pure heart, a clean mind, and a clear conscience is necessary for it.
For in GOD we live, and move, and have our being.
- Acts 17:28
The Joy of a Teacher is the Success of his Students.
- Samuel Dominic Chukwuemeka
Welcome to Web Scripting I (JavaScript)
I greet you this day,
For My Students, please do the following:
First: Review the required readings for each module including the Student-Teacher scenarios.
Second: Review the recommended readings for each module.
Third: Review the recommended videos and textbooks for each module.
Fourth: Complete the DB (Discussion Board) assignments for each module.
Fifth: Start thinking about your midterm project, your final project, and your final exam.
Sixth: Review the midterm exam and final exam study guides.
Seventh: Should you have any questions, comments, concerns, areas of improvement, and constructive criticisms;
please attend the weekly Office Hours/Live Sessions and/or contact me via the school's email system.
Eighth: If you are majoring in any IT (Information Technology) field
(especially for women and minorities),
you may want to check the Financial Aid section in any of my websites:
Scholarships or
Scholarships
For My Students and Visitors:
Comments, ideas, areas of improvement, questions, and constructive criticisms are welcome.
For All Those who Seek Peace:
Thank you for visiting.
Samuel Dominic Chukwuemeka (SamDom For Peace) B.Eng., A.A.T, M.Ed., M.S
Discussion Board (DB) Requirements
(1.) Please review the
Rules of Netiquette
(2.) Please be creative.
Please paraphrase in your words as applicable.
(3.) No two posts should discuss the same thing.
Each post should be unique.
This implies that you should review any previous posts before you submit your own post.
(4.) The initial post is due on Thursday of the week for which it is required.
(5.) At least one response to the initial post is due on Saturday of the week for which it is required.
(6.) Only one thread per student is allowed.
Please do not create more than one thread.
Please respond to my comments (as applicable) in the same initial thread.
Please make any repost in the same initial thread.
Besides the Introduction DB (where I am required to welcome each student); usually, I make comments to some posts and some
responses submitted by Thursday of the week that a DB assignment is due.
If I make any comment to your initial post and/or response (submitted by Thursday); then it is very important you address any
concern in my comments.
If you do not understand my comments, please attend the Office Hours/Live Sessions and/or send an email to me and ask for
clarification.
I do not go back-and-forth (responding more than one time) to a student in DB forums.
The essence of DB forums is mainly for student communication and collaboration.
The professor only facilitates and makes few comments as necessary.
Typically, if I make any comment to your post and/or response for any DB assignment besides the Introduction DB,
it implies that you need to address some issues.
It is important you fix those issues to avoid deduction of points.
(7.) You may not do any of the same examples that I did for either a DB post or DB response.
(8.) You may do any of the questions in the Discuss tab as
a substantive post and/or substantive response.
(9.) You may make up your own substantive post and/or substantive response
if it is actually substantive.
However, in this case; it is very important you ask me for prior approval.
You may ask me during the Office Hours/Live Sessions and/or via the school's email.
(10.) You may solve the problems in the Assess tab as a DB assessment (post and response).
Questions in the Assess tab count for both DB post and DB response.
Each question in the Assess tab is to be uniquely done by only one student.
This means that it can be done by more than one student.
However, each post must be unique.
Further: For any Textbook Question:
(a.) Please submit a clear screenshot of the Question Number and the Question.
(b.) Any question from the textbook in the Assess tab should be done by only one student.
(11.) Sources must be cited accordingly.
You may use: APA (American Psychological Association) style, MLA (Modern Language Association) style, or the
Chicago Manual of Style.
(12.) For all questions (post and/or response):
A web application is required.
This implies that the Uniform Resource Locator (URL) or web address of the web application is required.
My preference is that you use the free website-name.azurestaticapps.net website provided by Microsoft.
You may also use the free GitHub website.
Further, you may use any web hosting company of your choice for your website provided that you use the https
version rather than the http version.
For FERPA reasons: I ask that you do not include your first and last names in the domain name (URL) of the web application.
This is because I may use your work as a guide for my subsequent students.
If I do use your work, I shall use only your first name.
I hope you do realize that using your work is helpful for your ePortfolio as well as for my subsequent students.
In that regard, I ask that you keep your website active even when you are done with the course.
Microsoft Azure allows you to have up to ten free websites.
Please post the URL of your website (web address) of your post and/or response.
Paste the URL of your application and set it as a link.
Then, paste the direct link of the URL.
For example: say for DB 1, this can be my post:
DB 1 Post (Introduction to JavaScript)
(https://salmon-pebble-01912e010.azurestaticapps.net/)
(13.) Please do not submit an attachment for any DB assignment.
If you do, it will not be clicked. It will not be read. It will not be graded.
Your colleagues and I should be able to see your work directly without opening any attachment.
Any response to such post will not be counted.
Hence the link to the website and the address of the website are required.
(14.) For all DB responses, please mention the first name of your colleague.
(15.) Provide a substantive response to your colleague.
A substantive response is the response that provides constructive criticism,
alternative approach that gives the same correct output, additional helpful information that will improve the post,
and the correction of any incorrect step and/or output among others.
How would you improve the initial post?
Did you find any errors in the initial post? If you do, please correct the error. Teach your colleague about the error, and
explain to him/her how to fix it.
What new knowledge can your colleague acquire from you based on your response?
Can you solve the initial post using an alternative approach that will give the same correct output?
What real-world examples/applications can you provide based on the initial post? Cite your sources accordingly.
Did your colleague learn anything meaningful from you based on your response to the initial post?
Please focus on the initial post. Do not deviate from the concept/topic in the initial post.
Do not bring up your own unrelated topic/concept.
Teach/Show your colleague something new and meaningful based on the initial post.
Substantive responses must include the website.
Copy these files of your colleagues:
HTML (HyperText MarkUp Language), CSS (Cascading Style Sheets), and JS (JavaScript) files; add your own/make modifications; and
publish it.
You may also use your own HTML, CSS, and JS files; write your response, and publish it.
In any case, please make a note on your website that it is a response.
Then, copy the URL and paste it as a link and as an address in your response to your colleague.
(16.) Please use at least a size of 14 pt in your writings on the Blackboard Editor, and an acceptable
large font size on all your programs (IDE, output console, and web applications among others).
(17.) Please proof-read your writings/websites for mechanical accuracy errors.
Any use of "i" attracts deduction of points.
Multiple mechanical accuracy errors will lead to deduction of points.
I understand that this is not an English class. However, you are expected to write well.
(18.) Please make sure that you write comments in your files: HTML, CSS, and JS files.
Rule of Thumb for Comments (for academic purposes): Anyone (including those with little or no programming knowledge)
should be able to read your comments and have a basic idea of your program.
I am not saying you should write comments for every line of code.
I am saying that you should write comments for every code block (section of code).
Do you read my comments? Of course, you should. I provide explanations in my comments.
Does it make sense? Yours should not be different.
Definitions
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.
A Web Browser is the program that translates web pages and displays it as a formatted page.
It enables users to access the world wide web (www).
Examples include Microsoft Edge, Google Chrome, and Mozilla Firefox among others.
A Website is a group of web pages usually on the same web server and maintained by a person or group of people.
A Web Page is a page usually written in Hyper Text Markup Language (HTML) that is tranlated by a web browser.
A Web Server or a Server is a computer system that hosts websites.
It stores and disseminates web pages to anyone with an Internet connection.
A Web Host or Web Hosting Service or Web Hosting Service Provider or Web Hosting Company is the company
that provides the services for websites to be accessible via the world wide web.
For this course, we shall be using Microsoft Azure as our web host.
But, you are welcome to use any web host of your choice provided your web address contains the secured version of the hypertext
transfer protocol (https).
A Uniform Resource Locator (URL) also known as a Web Address is the address of a specific website on the Internet.
A Domain Name is the name that identifies a website.
A Web Link is a link to a website.
A Markup Language is the language that defines the content, structure, and appearance of a web document.
Examples include Hyper Text Markup Language (HTML), eXtensible Hyper Text Markup Language (XHTML), eXtensible Markup Language (XML),
and eXtensible Application Markup Language (XAML) among others.
In this course, one of the languages that we shall use is HTML.
Hyper Text Markup Language (HTML) is the markup language used to define the content and structure of a
web page.
Cascading Style Sheest (CSS) is the style sheet language used to define the presentation and appearance of a
web page.
In this course, one of the languages that we shall use is CSS.
World Wide Web Consortium (W3C) is an International community that develops open standards to ensure the growth of the web.
World Wide Web (WWW) also known as the Web is a system for assessing web pages and documents on the computer connected
via the Internet.
It is part of the Internet.
The Internet also known as the Net is defined as the global information system of networks that
allows computers to communicate.
A Network is a series of poins or nodes interconnected by communication paths.
JavaScript is basically a client-side interpreted scripting (or programming) language.
It is a major implementation of ECMAScript (European Computer Manufacturers Association Script).
It is based on three foundations: ECMAScript, Document Model Model, and Browser Object Model.
ECMAScript: is the programming language that provides the program structure, syntax, and code conventions for writing JavaScript.
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.
It is a W3C (World Wide Consortium) standard object model.
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.
Server-side Scripting is the scripting language that runs on the hosting company's web server (processing tier).
Identifiers are unique names used to identify variables.
Practice Assessments in the MindTap course textbook (Not Graded)
This option is based on your textbook (MindTap course).
This implies that it is not free.
However, you have two-weeks free access.
So, it is free if you can practice the assessments in two weeks.
Access the MindTap Course
Course Key: MTPPWQKQWZ8N
Course Description and Student Learning Outcomes
Module 1: Introduction
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.
Module 2: Functional Programming: Part 1
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.
These outputs will be displayed in the browser window: one at a time
Samuel
27
This is because the variables: firstName and firstNum are accessible within the code block
They can be assessed within the beginning and ending braces.
They are local variables.
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.
Uncaught ReferenceError: firstName is not defined
This is because the that variable was declared with the let keyword
Hence, it cannot be accessed outside the block
Because of the nature of the Window alert() method, it prevents the other variable: firstNum from displaying it's value
However, if you comment out the variable: firstName and run it, then 27 will be displayed in the browser window.
So, we know that any variable declared with the let keyword inside a block cannot be accessed outside that
block.
It can only be accessed within the block.
Hence, variables declared with the let keyword are block scope variables
Note that it is a local variable because it was declared within a block.
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.
27 is displayed in the browser
This implies that a variable declared with the var keyword within a block can be assessed outside the block.
So, the var keyword variables are not block scope variables because they can be assessed outside the block.
Note that it is still a local variable because it was declared within a block.
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;
|
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;
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;
|
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;
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;
|
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;
|
|
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.
| Operators | Symbols | Description | Code Examples |
|---|---|---|---|
| Assignment | $=$ | Equal sign |
var 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;
|
|
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;
|
|
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;
|
|
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;
|
|
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;
|
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.
| Code | Output |
|---|---|
var now = new Date();
|
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
Module 3: Functional Programming: Part 2; Midterm Project
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.
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/)
Module 4: Functional Programming: Part 3
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 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
Module 5: Arrays and Objects
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
Module 6: Object-oriented Programming
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.
JavaScript Final Exam and Final Project
SEO (Search Engine Optimization)
Although this is not required for this course, it is important this concept to you if you intend to be a professional web
developer.
As at today: 08/14/2021, please:
Visit the Bing search engine and search for this: hypothesis testing calculator
Did you notice that one of my websites: (https://hypothesis-testing.appspot.com/calculators.html) appeared in the first page?
That implies a good seo (search engine optimization). It implies that the website has been optimized by Bing search engine.
Bing search engine sucessfully indexed it and has ijcreased its visibility to users who search for it by listing it in the first
page of the search results.
Notice that the search was: hypothesis testing calculator rather than hypothesis testing calculator appspot
If you search for hypothesis testing calculator appspot and it appears in the first page, it implies that it is
successfully indexed by Bing search engine. This is not SEO.
But if you search for hypothesis testing calculator or calculator for hypothesis testing and you find it listed
in the first page, this is SEO.
The process of improving a website in order to increase its visibility by search engines when users search for terms related to
that website is known as Search Engine Optimation.
Student: Mr. C
I did the same search in Google and did not even find it in the first three pages.
Why?
Teacher: Well, recommend it to Google and promote it on social media sites. 😊
Student: If I search for hypothesis testing calculator appspot, I see the website in the first page.
Teacher: That is not SEO. It just means the website has been indexed by Google.
For a good SEO, it has to appear at most in the first three pages...first page or second page or third page.
Would you like to see my website that has a good SEO with Google?
Student: Sure.
Teacher: Search for geometry transformation calculator
Student: There you go: https://geometry-transformations.appspot.com/
Interesting...
I was thinking at first it may have something to do with your website being a subdomain rather than your own domain name.
But, it appears it is not.
Teacher: It is not, though actual domain names generally have a higher probability of being listed.
However, it is not really. There are several factors that affect SEO.
Let us discuss those factors.
Student: I get some emails from companies that guarantee good SEO listing for a fee.
What are your thoughts?
Teacher: Let us discuss that during the Office Hours/Live Sessions.
But let me say this: (I guess Google should pay me for saying it lol 😊)
One of the Google's services is Google Ads previously known as Google AdWords.
Keep in mind that it is not free.
We can discuss more during the Office Hours/Live Sessions.
Let us discuss the best practices for any website to have a good SEO.
However, please note that these are the best practices.
There are no guarantees that the website will appear in the first three pages (results).
The only guaranty will be to contact the search engines (several companies) and ask them to list it in the first three
results.
NOTE: If you used a CMS (Content Management System) to develop your website such as Weebly, Webnode, WordPress, Blogger,
Wix, Joomla, Drupal, etc., there is probably a feature that you can use that will submit your website to search engines such
as Bing and Google.
Look for that feature.
If the feature is not there, then follow these steps.
For a good search engine optimized website:
(1.) Ensure best practices.
(a.) Review your website using the
W3C (World Wide Web Consortium) Markup Validation Service
(https://validator.w3.org/)
Check for warnings and errors using the validator and fix them.
Warnings are not necessarily bad. However, errors should be fixed.
(b.) Check the CSS and fix any issue.
(https://jigsaw.w3.org/css-validator/)
(c.) Check for broken links and fix any issue.
(https://validator.w3.org/checklink)
(2.) Create a sitemap
Sitemap (https://developers.google.com/search/docs/advanced/sitemaps/overview)
A sitemap is a file that contains information about the website including the pages, videos, and images, and the
relationships between them.
It also provides valuable information such as when a page was last updated and any alternate language versions of
the page.
Search engines like Google and Bing among others, read this file to crawl websites efficiently.
There are several ways to create a sitemap:
(a.) If you are using a CMS, use the sitemap generated by the CMS. Most CMS generate sitemaps.
(b.) If you are not using a CMS (writing your code from scratch), automatically generate a sitemap:
(https://www.xml-sitemaps.com/)
Once you have created the sitemap, upload it on your website and publish your website.
Verify that you have successfully submitted your sitemap by visiting the page: your-website-URL/sitemap.xml as
applicable.
(3.) Create a robots.txt file
Robots.txt file (https://developers.google.com/search/docs/advanced/robots/intro)
A robots.txt file tells search engine crawlers which URLs (Uniform Resource Locators) the crawler can access on your
site.
It is used mainly to avoid overloading your site with requests.
(4.) Create a Gmail address or use your existing Gmail address.
Register your website on
Google Analytics
(https://analytics.google.com)
Some code will be generated.
Copy the code generated and place it in the <head></head> section of your website.
Publish your website after placing the code.
(5.) Submit your website URL and the website sitemap to Google Search Console
(https://search.google.com/search-console/about)
You will receive at least one message from Google in your Gmail.
One of the messages will provide information including links for you to review and improve the search presence of
your website.
Review the messages and follow the steps.
(6.) Bing is also a valuable search engine.
Hence, it is important to register your website on Microsoft Bing.
Create a hotmail or an outlook account or use your existing hotmail or outlook account.
Add your website and verify it on Bing Webmaster Tools
(https://www.bing.com/webmasters/help/add-and-verify-site-12184f8b)
Submit your sitemap to Bing Webmaster Tools as well.
Use the Site Scan and other applicable tools as well.
(7.) Promote your website on social media.
When "actual real" users (not bots) visit your website and spend some time on it and recommend it on Google,
Facebook, Yelp, YouTube, Instagram, Twitter, and other social media forums; it helps with search engine
optimization.
(8.) Backlinks: Let other websites link to your website.
When several valuable websites link to your website, it displays some degree of confidence in the content of your
website. Hence, it helps with search engine optimization.
Student Evaluation of Faculty
Dear Students,
Greetings to you.
As you evaluate me and my teaching style on the Blackboard course, I ask that you consider these questions
in addition to the survey questions.
Thank you for giving me the opportunity to teach the course.
It was nice working with you.
I wish you the best in your academic profession.
Thank you!
Samuel Dominic Chukwuemeka (SamDom For Peace)
B.Eng., A.A.T, M.Ed., M.S
Working together for success
Grading Method: Grading Method
Classroom/Learning Environment: Blackboard course management system.
Course Assessments: Discussion Board (DB) assignments, Midterm Project, Final Project and the Final Exam
Direct forms of communication: live office hours/tutoring sessions, emails, comments to your DB posts and responses and
phone calls.
Indirect forms of communication: course announcements, websites (notes, videos, etc).
Course Contents
Please review the Course Description and Student Learning Outcomes
It is the first link in your course.
Those are the basic topics that KSU require that I teach.
(1.) Did I cover those topics: teaching and/or providing resources for those topics?
(2.) Did I cover other necessary topics that is relevant for you to succeed in your profession?
(3.) Did the assessments demonstrate the application of the topics?
(4.) Did the contents and assessments demonstrate important skills such as critical thinking, use of technology,
creativity, and organization among others?
Teaching and Learning
(5.) Did you acquire any knowledge from me?
(6.) Did you acquire sufficient knowledge, or more than sufficient knowledge from me?
(7.) Did you acquire any knowledge from any of your colleagues because of how the course was set up?
(8.) Did you acquire sufficient knowledge, or more than sufficient knowledge from any of your colleagues because of
the way the course was set up?
(9.) Did I provide multiple ways of completing each assessment?
In other words, were you given several options of completing each assessment?
(10.) Did I provide effective feedback for any of your assessments?
(11.) Did you acquire any knowledge based on that feedback?
(12.) Did the feedback help you improve in any way?
(13.) Did you have enough support to ensure the successful completion of the course?
Were your questions answered?
Did you have enough resources/learning aids?
(14.) Did I provide a safe and conducive environment for learning?
(15.) Was the Grading Method fair?
Pacing Guide
(16.) Were you given enough time to learn the contents?
(17.) Were you given enough time to complete the assessments?
Consider the fact that you were given two due dates for your Midterm Project, Final Project, and Final Exam; and that there
was no penalty for late work after the first due date.
Professionalism
(18.) In all our communication (both direct and indirect), did I act professionally?
(19.) In all our communication (both direct and indirect), did I use a respectful tone?
(20.) What do you like or dislike about our communication?
Personality
(21.) Based on your experience with me (taking the course with me and communicating with me among others), how
would you describe my person?
Do I give a lot of work?
Do I give a lot of explanations?
Do I have a lot of expectations for my students?
Do I really want you to learn?
Do I really want you to succeed?
Do I ask a lot of questions?
Do I answer questions with questions sometimes?
In those times, please note that it is a teaching technique.
It is never meant to disrespect you. I do not disrespect my students. I respect them.
It is a technique to guide you to review directions/concepts, and explain what you do not understand.
Would you take another course with me? Why or why not?
Did your views/perception about me affect you in completing this course successfully or unsuccessfully?
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.)