age 1 of 18

Lesson 16 – Create Interactive Website (Part 4)

Objectives:
1. Test JavaScript syntax using a browser.
2. Use debugging software and JavaScript code checker to fix errors.
3. Deliver JavaScript files with the use of CDN.

Content:

JavaScript syntax is tested using a browser

To summarize, the browser understands JavaScript by using a JavaScript engine to process the code
using an AST and JIT compilation. This allows the engine to understand the meaning of the code and
how it should be executed, which enables the browser to run the code and display the results.
How to test JavaScript in Browsers

To test JavaScript in a browser, there are several tools and techniques available using which one can
utilize. Each tool comes with a set of unique features that contribute to different outcomes. While
narrowing down to a single tool that can meet all your testing needs might be challenging, consider
using a mix of tools to achieve the desired business and product goals.

1. Cross-Browser Testing Tools

Although one can instantly test JavaScript using tools like CodePen and JSFiddle, one cannot analyze the
behavior of these scripts across different desktop and mobile browsers. This is where online cross-
browser testing platforms come into the picture.

 Developers and QAs can check their websites for cross-browser compatibility using BrowserStack.
 The infrastructure enables a developer or a QA to instantly test their websites across a range of real
mobile devices and browsers like Chrome, Safari, IE, Edge, Firefox, etc.
 Users can also access free tools like responsive layout testing and screenshot testing, which tests the
validity of JavaScript on a particular web page.
 The wide range of OS-browser combinations and the latest real devices provided by BrowserStack for
testing purposes is unmatched. It’s pretty simple to use and instantly test Javascript in your browser.
 age 2 of 18

2. JSFiddle

JSFiddle is an online tool that enables a QA to instantly test HTML, CSS, and JavaScript directly in the
browser. Introduced in 2009, it was initially known as Mooshell. This tool is compatible with
popular JavaScript frameworks like Vue, React, etc. In it, HTML, CSS, and JavaScript code snippets are
referred to as fiddles. JSFiddle is known for its easy-to-use interface.

The user can type some JavaScript along with HTML and CSS and verify results on the spot. JSFiddle’s
dashboard is quite upfront and divided into three sections – HTML, CSS, and JavaScript. For a better
understanding, refer to the image below.
 age 3 of 18

3. CodePen

Introduced in 2012, CodePen is an online platform similar to JSFiddle for testing HTML, CSS, and
JavaScript code snippets called Pens. One can start scripting in the editor and instantly test the code for
desired outcomes. However, CodePen is not just restricted to coding and testing; it operates as a social
community that provides an online learning environment. Aspiring developers can share their work on
this platform.

With a whopping 33000 active users, it’s one of the largest developer communities online. CodePen
provides numerous exciting features like Asset hosting, Collab mode, and more.

Refer to the image below for a quick glimpse of the interface.

4. JSBin
 age 4 of 18

JSBin is an effective alternative to JSFiddle. Its features also enable users to experiment, learn, and
teach. The script written and saved in JSBin by a particular user is called a Bin.

For every Bin, a URL is generated. This URL can be shared to display the user’s work or request code
improvements, thus facilitating increased collaboration.

Using the built-in editor, one can quickly start testing their Bins written in HTML, CSS, and JavaScript.
One can also access premium features like Private bins, and Dropbox backup by upgrading to the pro
version. Refer to the image below for a clear picture of the JSBin UI.

5. Liveweave

Liveweave is yet another coding platform for developers or web designers to write, test, and share
JavaScript, HTML, and CSS code with their team members. This platform provides exciting features like
live preview, night mode, and code hinting. Code hinting, in particular, makes programming easier for
beginners by providing a drop-down list of commonly used tags. Liveweave also supports several
popular libraries like jQuery, AngularJS, and Bootstrap.
 age 5 of 18

These simple ways to test JavaScript can benefit developers and web designers. However, users can also
choose to use developer tools for particular browsers. For example, a QA can debug JavaScript errors
using the JavaScript Console in Chrome developer tools. Similarly, DevTools for other popular browsers
like Firefox and Safari can be an efficient alternative to the abovementioned tools.

1. Chrome Debugger for VS Code

VS Code is one of the most popular IDEs for web development . Developed by Microsoft, it lets you
test JavaScript code in a browser with the help of Google Chrome. It requires the browser console to
log the output.

It is the most widely used tool by developers to test JavaScript in the browser. You need to download
the VS Code IDE from their website. It is free to use and open source. It also supports a vast number
of extensions and plugins, which allow you to add customizations and help you in writing code more
efficiently.

It has some of the best features.

 Command line: It has a powerful command-line interface that lets you control how you launch the
editor. You can open different files, install extensions, and even change the display language at the
startup.
 Command palette: In VS Code, the Ctrl+Shift+P key combination brings up the Command Palette.
From here, you can access the VS Code’s functionality, like keyboard shortcuts, etc.
 Git integration: VS Code comes with Git integration that allows you to commit, pull, and push your
code changes to a remote Git repository.

Debugging software/ applications and JavaScript code checkers

 age 6 of 18

With the advent of web technologies and the increasing complexity of JavaScript-based
applications, the need for a reliable JavaScript Checker has become paramount. It provides
developers with a safety net, enabling them to detect and rectify errors early in the development
process, thus reducing debugging efforts and accelerating the overall software development
lifecycle.

JavaScript Checker

A JavaScript Checker refers to a vital tool utilized in the field of software development to validate
and verify the correctness of JavaScript code. It plays a crucial role in identifying syntax errors,
logical flaws, and potential bugs in JavaScript programs. A JavaScript Checker offers developers a
concise and effective means to ensure the quality and reliability of their code, leading to enhanced
performance and smoother execution.

Advantages:

1. Error Detection: A JavaScript Checker scans code for syntax errors, such as unclosed parentheses or
brackets, invalid variable declarations, or incorrect use of JavaScript operators. By alerting
developers to these errors, it helps maintain code integrity and prevents issues that could
potentially cause software malfunctions.

2. Debugging Assistance: In addition to syntax errors, a JavaScript Checker can identify logical errors or
outdated coding practices that might otherwise result in unexpected behavior. By pinpointing these
issues, developers can save time and effort by focusing their debugging efforts on the right areas of
their code.

3. Best Practices: JavaScript Checkers often enforce adherence to coding standards and best practices
prevalent in the industry. This helps developers write cleaner and more readable code, promoting
better collaboration among team members and facilitating code maintenance and future
enhancements.

4. Efficiency: By detecting potential issues early in the development process, a JavaScript Checker aids
in improving code efficiency and performance. It helps identify areas where code optimization is
possible, ensuring that JavaScript programs run smoothly and respond quickly to user interactions.

Applications:

1. Front-end Development: JavaScript Checkers are commonly used in front-end web development to
ensure the correctness and compatibility of JavaScript code across multiple browsers. With the rise
of responsive web design and mobile applications, these tools play a vital role in delivering seamless
user experiences.

2. Server-side Applications: For web applications built on frameworks like Node.js, a JavaScript
Checker is valuable in verifying server-side JavaScript code. It helps ensure the robustness and
security of the server-side codebase, reducing the risk of vulnerabilities.

3. Code Review Process: During the code review phase, a JavaScript Checker can provide valuable
feedback to both developers and reviewers. By highlighting potential issues or deviations from
 age 7 of 18

coding guidelines, it facilitates effective collaboration and knowledge sharing among team
members.

Finding Bugs in JavaScript

If your JavaScript doesn't work as you expected it to, that might mean you have a bug in your code.

Typos are a common source of bugs in JavaScript. If your script isn't working, check the following:

 Missing punctuation. Be sure every opening bracket has an accompanying closing bracket.

 Unclosed character string. Whenever you're working with text in JavaScript (for example, when
you displayed text in an alert box in the previous lesson), that text must be enclosed in
quotation marks. You can use either single quotation marks ('...') or double quotation marks
("...") but be sure every opening quotation mark is closed at the end of the string of
characters.

 Misspelled variable. JavaScript is case-sensitive. In the example in the previous lesson, you
created a variable called myText. That isn't the same as MyText; one has a lower-case M, the
other does not. If you define a variable called myText, then try to execute the
command alert(MyText) the script would fail because MyText doesn't exist.

Debugging is the art of finding bugs in your code, and fixing them.

Debugging using Alert

The alert() function can be very useful for debugging code. In the previous lesson, you created a
showAlert() function, and added a link to your web page that triggers that function. If you click the link
and nothing happens, what went wrong? It could be that there's a bug in the function, or it could be
that the function was never triggered because there's something wrong with the link. To test whether
there's something wrong with the function, you could add one or more alert() commands in strategic
places, like this:

<script>

alert ('Javascript is working');

function showAlert() {

alert ('function showAlert was called');

var myText = "This can be whatever text you like!";

alert (myText);
 age 8 of 18

</script>

Notice that the first alert() is outside the showAlert() function. Any JavaScript that is not contained
within a function will be executed automatically when the page loads, without waiting for any events
to occur. If this alert is triggered, you know that JavaScript is enabled in your browser. If it isn't
triggered, your browser either doesn't support JavaScript (not likely these days), or JavaScript is
disabled (check your browser's settings or preferences).

The second alert() is inside the showAlert() function, but it's the very first command in that function.
So if this alert is displayed when you click the link, you know the link is working, so any problems
you're experiencing are happening elsewhere in the function. If this alert isn't displayed when you click
the link, you know the showAlert() function is never being called. Therefore, there's probably
something wrong with the link.

Using alert() can be very helpful for isolating the source of a problem in your script, but you need to be
cautious about overusing this technique. Too many alert boxes can be really annoying, especially for
your user. The best use of alert boxes is to use them sparingly while you're testing and debugging your
script, then remove them once everything seems to be working.

Debugging Using Browser Tools

Some browsers show an icon indicating when a JavaScript error has occurred on the page. For
example, some versions of Internet Explorer, if debugging is enabled, will show an icon like this in the
lower left corner of the browser:

If you click on that icon, a dialog will appear that gives you more detail about the bug. Learning to
understand these error messages is an advanced skill, but sometimes they can be helpful even for
novices, and typically they provide a line number which may help you to isolate the problem.

Now, get to know how your browser reports errors (if at all). Try messing up the JavaScript code in
your javascript.html page, using the errors from the above examples. With each example, what effect
does the error have? Does your browser display an error icon or otherwise give you any indication that
an error has occurred? If not, this feature is probably disabled in your browser and would need to be
turned on in your browser's settings or preferences.

Also, most browsers today have debugging tools available, either built into the browser, or available
for free as downloadable plug-ins. These tools typically include a Console tab that displays script errors
if they occur; and a Script tab that allows you to step through your script line by line in order to
identify problems. Using these tools is an advanced topic and is beyond the scope of this curriculum,
but they're worth a look, and if you're comfortable with them they can be very helpful as you create
 age 9 of 18

more and more sophisticated web pages. Here are the developer/debugger tools that are available in
several of the most popular browsers, and the steps for accessing them:

 Firefox: Press Ctrl+Shift+I (Cmd+Option+I on Mac) to toggle Developer Tools (or select Tools >
"Web Developer") from the menu.

 Chrome: Press Ctrl+Shift+J (Cmd+Option+J on Mac) to bring up Developer Tools.

 Internet Explorer 8 and higher: Hit F12 to access Developer Tools (or select "F12 Developer
Tools" from the Tools menu)

 Opera: Tools->Advanced->Error Console.

 Safari: In Preferences > Advanced, check the "Show Develop menu in menu bar". Then, the
menu bar will include a "Develop" option which has many features including Error Console,
Web Inspector, JavaScript Profiler, etc.).

Content distribution network (CDN) from servers is used

A content delivery network (CDN) is a geographically distributed group of servers that caches content
close to end users. A CDN allows for the quick transfer of assets needed for loading Internet content,
including HTML pages, JavaScript files, stylesheets, images, and videos.

What is a CDN?

A CDN (content delivery network), also called a content distribution network, is a group of geographically
distributed and interconnected servers. They provide cached internet content from a network location
closest to a user to speed up its delivery.

The primary goal of a CDN is to improve web performance by reducing the time needed to send content
and rich media to users. Today, CDNs serve the bulk of web traffic, including traffic from well-known
websites such as Facebook, Netflix and Amazon.

Why is using a CDN important?

A content delivery network is crucial for providers and website owners because it makes it easier to
transfer content -- such as images, videos and website files -- to numerous servers spread out around
the globe. This enhances user experience, especially for users who are located far from the origin server.
It also speeds up web page loading times while reducing the strain on the main server.

As the content is served from numerous servers, a CDN can help increase the security and dependability
of a website, making it less susceptible to security attacks and downtime.

How does a CDN work?

The process of accessing content cache on a CDN network edge is almost always transparent to the user.
CDN management software dynamically calculates which server is located nearest to the user, making
the request and delivering content based on those calculations. CDN edge servers communicate with
 age 10 of 18

the content's origin server to deliver to the user cached content and new content that hasn't been
cached.

Enterprises look for five top features in content delivery network services.

Edge servers reduce the distance that content travels and the number of hops a data packet makes. The
result is less packet loss, optimized bandwidth and faster performance. This minimizes
timeouts, latency and jitter, and it also improves the user experience. In the event of an internet attack
or outage, fresh content cached and hosted on a CDN server remains available to those users who are
nearest to the edge locations until the time-to-live for the CDN server expires. For example, if a website
server goes down, the website is still accessible to visitors if it was cached properly on different
geographically dispersed servers.

Organizations buy services from CDN providers for routing content to users from the nearest geographic
location. CDN providers either host the content themselves or pay network operators and internet
service providers to host CDN servers.

CDN providers also use load balancing and solid-state drives to help data reach users faster. They reduce
file size using compression and special algorithms, and deploy machine learning and artificial
intelligence to enable faster load and transmission times.

How does CDN caching work?

 age 11 of 18

The functionality of a CDN is mostly dependent on caching static content. The data is stored and cached
by the CDN edge servers.

The following is an example of a typical CDN caching process:

1. A web server in Chicago hosts static web content that a website visitor located in Washington, D.C.,
requests.
2. Once the origin server in Chicago receives the request, it sends a response to the website visitor.
Simultaneously, it delivers a copy of the response to the CDN point-of-presence (POP) that's
geographically closest to the website visitor.
3. The CDN POP stores its copy as a cached file.
4. When the same visitor or another visitor in that location makes a similar request again, the caching
server -- not the origin server -- delivers the response.

CDN edge servers placed around the world enable content owners to distribute content efficiently far from their origin servers.

CDN vs. web host

Despite using similar technology, CDNs and web hosts have distinct purposes. The following are the
main differences between the two:
 age 12 of 18

 Unlike web hosts, CDNs don't provide content across the last mile to consumers and only provide
temporary content storage and caching.
 Web hosting usually provides access to a single server that handles everything from host name
resolution to delivering requests. On the other hand, CDNs use a network of servers that are spread
out globally, resulting in reduced response times for websites because the data is served from the
closest edge location.
 A web host is responsible for hosting a website. Although a CDN doesn't host content, it caches it at
the network edge to enhance performance. Most websites that struggle with performance issues
opt for CDNs.
 Web hosts serve all types of content but CDNs only serve and host static data. The workload on CDN
servers is lessened as a result, letting them concentrate on their main task of edge delivery.
 Issues, including restricted bandwidth, service outages and security risks, occasionally happen with
traditional web hosting. CDNs address these problems by employing content caching on edge
servers.

What are the uses of a CDN?

The main use of a CDN is to deliver content through a network of servers in a secure and efficient way.
These networks improve the content security, performance and availability. Other CDN use cases
include collecting user analytics and tracking data on network traffic. CDNs serve a range of content,
including websites, mobile applications, streaming media and downloadable objects. Social media and
search engine traffic go through CDNs.

Content-owning organizations use CDN services to accelerate the delivery of static and dynamic content,
online gaming, mobile content and streaming video, as well as other specialized services.

Some examples of how CDNs are used include the following:

 An e-commerce organization uses a CDN to deliver content at busy times of the year when traffic
spikes are likely.
 A bank uses a CDN to securely transfer sensitive customer data.
 A mobile application provider uses a CDN to reduce load times and increase response times,
improving mobile users' customer experience.

What are the benefits of a CDN?

CDNs provide several advantages:

 Efficiency. CDNs improve web page load times and reduce bounce rates. Both advantages keep
users from abandoning a slow-loading site or e-commerce application.
 Security. Besides content caching and web delivery, CDN providers offer services that complement
their core functionality and capitalize on their presence at the network edge. These services include
 age 13 of 18

distributed-denial-of-service (DDoS) attack mitigation, web application firewalls (WAFs) and bot
mitigation.
 Availability. Since the website is distributed across multiple geographically dispersed servers, CDNs
offer scalability. They can handle more traffic and avoid network failures better than origin servers.
As a result, content is readily available.
 Optimization. These networks provide a diverse mix of performance and web content optimization
services that complement cached site content.
 Resource and cost savings. CDNs reduce bandwidth consumption and costs.
 Reduced latency. CDN architecture is designed to reduce network latency caused by hauling traffic
over long distances and across several networks. Eliminating latency is important as more dynamic
content, video and software as a service are delivered to an increasing number of mobile devices. A
reputable CDN provider can assist with delivering high-quality content at extremely low latency
rates.
 Caching. CDN providers house cached content in either their POPs or third-party data centers. When
a user requests content from a website that's also cached on a CDN, it redirects the request to the
server nearest to the user and delivers the cached content from its location at the network edge.
This process is invisible to the user.
 Improved performance. Many organizations use CDNs to cache website content to meet their
performance needs. The demand for CDN services is increasing as websites offer more streaming
video, e-commerce and cloud applications, where high performance is key. Few CDNs have POPs in
every country. As a result, organizations must use several CDN providers to ensure they meet the
needs of their customers and users, wherever they're located.
 Special services. Other services offered include web and application performance and acceleration
services, streaming video and broadcast media optimization and digital rights management for
video. Some CDN providers make their application programming interfaces (APIs) available to
businesses to meet their unique needs.

What are examples of CDN platforms?

There are many CDNs available, each offering a variety of features. Products include the following:

 Akamai Technologies Inc. Intelligent Edge.

 Amazon CloudFront.
 ArvanCloud.
 CDN77.
 Cloudflare.
 Limelight Networks Edgio (formerly Yahoo Edgecast).

Some CDN providers, such as Cloudflare and Limelight, market their platforms as CDNs with added
services, including DDoS or WAFs. Other providers, such as ArvanCloud, offer CDN services as part of
several broader cloud services, such as cloud security and managed domain name system.

History of CDNs

CDNs are an integral part of modern internet architecture. They were born from a need to maintain
efficient website performance and still serve that purpose today.
 age 14 of 18

CDNs have evolved over the years and their evolution can be segmented into the following three
generational types:

Static CDNs
Akamai launched the first static CDN in 1998. The company's techniques serve as the foundation of
today's CDNs. First-generation CDNs focused mostly on static content, such as software downloads and
audio and video streaming.
Static CDNs offered the following features:

 Served content included HTML and downloadable files.

 Used origin push caching.
 Improved server performance.
 Used a dispersed network topology.
 Cost a significant amount of money.
 Catered to the corporate sector.

Dynamic CDNs

As cloud and mobile computing gained traction, second-generation CDN services evolved. They enabled
the efficient delivery of more complex dynamic multimedia and web content. As internet use grew, the
number of CDN providers multiplied, along with the services they offered.

Dynamic CDNs offered the following features:

 Served both static and dynamic content, including rich media, to end users.
 Used origin pull caching.
 Used a consolidated network topology.
 Improve the efficiency and accessibility of servers and resources.
 Cost exorbitant amounts of money.
 Catered to the business sector.

Multi-purpose CDNs

The third-generation or next-generation CDN uses multiple CDNs from various CDN providers. A vast
network of POPs is used instead of just one, which further improves the speed of content delivery,
expands to wider regional and global coverages, and eliminates cybersecurity risks and outages.

Multi-purpose CDNs come with the following features:

 Serves both static and dynamic content, including rich media.

 Uses origin pull caching.
 Uses a highly consolidated network topology.
 Improves security, performance and availability.
 Costs an affordable amount of money.

The target audience for multi-purpose CDNs includes anyone who owns a website.
 age 15 of 18

Some CDN business models are based on usage-based pricing or the volume of content delivered.
Others charge a flat rate for basic services or even provide them for free, with additional fees for
performance and optimization services.
Teachers Activity:
Ask Question
Show Presentation
Demonstration
Show video:
https://www.youtube.com/watch?v=ABlaMXkUwzY
https://www.youtube.com/results?search_query=intro+to+CDN

Reference:
Site:
https://www.google.com/
https://www.youtube.com/
https://www.browserstack.com/guide/how-to-test-javascript-in-browsers
https://itexus.com/glossary/javascript-checker/#gref
https://www.washington.edu/accesscomputing/webd2/student/unit5/module2/
lesson2.html#:~:text=Chrome%3A%20Press%20Ctrl%2BShift%2B,Develop%20menu%20in%20menu
%20bar%22.
https://www.techtarget.com/searchnetworking/definition/CDN-content-delivery-network

eBook:
 JavaScript from Beginners to Professional by: Laurence Lars Svekis, Rob Percival and Maaike van
Putten
 JavaScript Language by: tutorialpoint.com
 age 16 of 18

Assessment 16-1:
Written Test

Test I: True or False: Write the letter T if the statement is true and F if the statement is false on the
space provided.

_____________ 1. Some CDN business models are based on usage-based pricing or the
volume of content delivered.
_____________ 2. The third-generation or next-generation CDN uses multiple CDNs from
various CDN providers.
_____________ 3. As cloud and mobile computing gained traction, second-generation CDN
services did not evolved.
_____________ 4. Some CDN providers, such as Cloudflare and Limelight, market their
platforms as CDNs with added services, including DDoS or WAFs.
_____________ 5. CDN providers house cached content in either their POPs or third-
party data centers.
_____________ 6. Since the website is distributed across multiple geographically dispersed
servers, CDNs offer scalability.
_____________ 7. The main use of a ABS is to deliver content through a network of servers in
a secure and efficient way.
_____________ 8. The functionality of a CDN is mostly dependent on caching static content.
The data is stored and cached by the CDN edge servers.
_____________ 9. The primary goal of a CDN is to improve web performance by reducing the
time needed to send content and rich media to users.
_____________ 10. A content delivery network (CDN) is a geographically distributed group of
servers that caches content close to end users.

Test II: Question and Answer

A: What is CDN?

_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________

B: How to test JavaScript in Browsers

_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
 age 17 of 18

_____________________________________________________________________________________
_____________________________________________________________________________________

Activity

Objective: Debug the following JavaScript using browser.

Steps/Procedure:

1. Debug the following code.

Bug #1

<script>
function showAlert() {
var myText = "Hello world";
alert (mytext);
}
</script>

Bug #2

<script>
function showAlert() {
var myText = "Hello world;
alert (myText);
}
</script>

Bug #3

<script>
funcion showAlert() {
var myText = "Hello world";
alert (myText);
}
</script>

2. Use the browser you like or any online JS checker.

3. Correct the errors on the codes.
 age 18 of 18

After debugging the codes, explain it in front of the class.