javascript examples in websites

12 of the best JavaScript examples

Get inspiration from innovative, interesting examples of JavaScript in action.

The best JavaScript examples show how platforms can use this programming language to engage a user and ensure that they remember a website site and continue to revisit. They include games, APIs, animated illustrations, scrolling abilities and much more.

The internet is full of web design inspiration , including great examples of JavaScript being used to bring a website to life and provide great user experiences. Here we pick some of our favourite examples of JavaScript in action for your inspiration. If you need tools for your own website design, see our pick of the best web design software .

01. Histography

If you've ever watched Cosmos, you may remember Carl Sagan talking about the Cosmic Calendar. If the age of the universe was condensed into one year, recorded human history would fit within the very last seconds of 31 December.

14 billion years of events is a huge dataset, and displaying it in a browser is no easy task. But designer and developer Matan Stauber rose to the challenge – although even he wasn't sure it would be possible: "I think the main obstacle would have to be proportions," he explains. "How do you create a timeline when 99.9 per cent of the history we know will have to be condensed into less than one pixel of the screen?" 

The son of a historian, Stauber created Histography as a student at Bezalel Academy of Arts and Design, under the guidance of Ronel Mor. "If we think about ways people visualise history, timelines are probably the most common one, and yet they haven't changed a lot since the days of the printed paper," he says. "I saw that as an exciting design opportunity, especially today with the access to big data sources."

The site scans and indexes events from Wikipedia, grabs the article, and pulls in a Google image and YouTube video. The data is easily discoverable and a joy to consume. If you've ever lost hours exploring Wikipedia articles, set aside plenty of time for this one.

02. The St. Louis Browns

For this website about the history of the St. Louis Browns baseball team , digital agency HLK crafted a beautiful experience. The site reads like a well-crafted vintage book, complete with chapters and textured typography. Users can scroll through each chapter for a time-based, story-like experience.

Inspiration for the site has been pulled from 1920s manuscripts and advertisements, with many of the images directly from the years they are describing. This brings a uniquely dated feel to a modern, digital space. This is complemented by a grey-and-brown toned colour scheme, accented by a single shade of orange.

Some of my favourite parts of this site are the little details, such as the menu button (circular with a hamburger menu inside) that converts to a baseball on hover. I also love the timeline on the left-hand side, which follows the screen and updates on scroll.

The site was built using Node.js and the Express framework to allow for smooth updating and flow between content.

03. Masi Tupungato

This wonderful website from international digital creative agency AQuest for Masi Tupungato , a winemaking project in Argentina, almost lets the imagery speak for itself. Unusually, a loading screen is used for each of the pages as the crisp fullscreen images load up. Usually this would be a big no-no – users want the content as soon as possible. However, here it actually improves the user's experience by ensuring images are fully loaded before any content is unveiled. The design creates a sense of empathy, leaving users feeling like they've been to the winery and picked the grapes themselves.

The site can be on the heavy side on some pages (ranging from 1.2MB up to 5MB in weight), which could be improved by introducing some lazy loading techniques. However, despite its weight, the site is well-built, with the start render in under one second and return visits loading within the second mark too. The framework is based on unsemantic.com, which is a successor to the 960 Grid System.

When viewing the site on desktop and larger viewports, users are able to see and interact with each of the wines separately. They can take advantage of the larger screen size to display all of the wine characteristics and details side- by-side. In contrast, on the mobile site the details and description slide in and can be slid away again smoothly.

04. Know Lupus

The Lupus Foundation of America (LFA) is a national organisation working to solve the mystery of lupus. Viget partnered with the LFA on a pro bono public awareness project to help the general public understand the disease.

"LFA wanted to create a fun yet informative game that would help educate the public in an engaging way, to help overcome that issue," explains Laura Sweltz, UX designer and project lead. "Our design process focused on accomplishing that goal, while also creating something that people with lupus would actually feel excited about sharing."

Viget's solution for the Know Lupus site was a casino-inspired card game built using React, in which each card highlights a fact about lupus. Custom illustrations by designer Blair Culbreth keep the game lighthearted while addressing the serious subject matter. Casino-inspired sound effects weave through the game.

The animations are smooth and snappy, adding another layer of delight to the game. The mobile experience is just as interactive as desktop, and responsive transitions have been fully considered. The end result is a playful experience that makes learning feel effortless.

05. The Boat

Longform storytelling has been steadily gaining popularity on news and media sites, but broadcasting network SBS 's The Boat , an online graphic novel based on a story by Nam Le, feels unique in both its style and execution. Sumi ink illustrations, expertly executed animations and a chilling soundscape capture the story of a young Vietnamese refugee's journey.

To bring the story to life, illustrator Matty Huynh spent six months with Nam Le's original prose, sketching thumbnails and iteratively creating the characters.

"I think the balance you see comes from this extended period of development," explains producer Kylie Boltin. "That deep inward-looking period enabled the core team members to know the story inside out. We knew the story beats and we knew which moments needed to be highlighted. The guiding principle was to complement the core storytelling, rather than overpower it or add an element just for the sake of it."

The graphic panels feel like diary sketches – urgent, imperfect and deeply emotional. This site proves just how powerful and engaging online storytelling can be in the right hands.

06. Design Matters

Design Matters is a radio show launched by Debbie Millman in 2005. Over the years, Millman has interviewed over 200 designers, artists and creatives around the world. These are now housed on a beautifully redesigned site.

The first thing you notice is the morphing gradient background, which is subtle yet unique and mesmerising. The next thing you notice when you jump into an interview page is the enormous play icon overlaying the content.

"From the beginning I knew I wanted to have a giant play button on the screen, and after playing around with the design I settled on a completely transparent button," says Armin Vit of  UnderConsideration , the studio behind the site. "Since the interviews are all about transparency between Debbie and her guests, I enjoyed the visual extension of that."

Vit used JS layout library Masonry to create a Pinterest-like grid of interview 'pods', each of which contains a well thought-out type hierarchy and image. As the audio is housed on SoundCloud, Vit had to figure out how to make the play button trigger a SoundCloud file via its unique ID.

What does Millman think of the site? "Armin took all the myriad must-haves for this site and created one design for me to look at," she smiles. "I loved it the second I saw it."

07. The Local Palette

The Local Palate is the a food culture magazine focused on the south of the US. In redesigning the site, the team at Fuzzco took its cues from the print magazine. "We started with a grid structure similar to the one similar found throughout the magazine," says Fuzzco founder and creative director Helen rice. "For the typography we took a bold, modern approach and allowed space for large, engrossing photographs to reflect the engaging feeling found in print." The navigation also mimics the look of the spine of the magazine.

The site's stunning food photography and striking typography are arranged in a refreshingly simple layout that is a pleasure to view on any device. The recipe grids and full article pages are especially beautiful.

To build the site, the team used the – as they put it – "usual suspects" of jQuery, Sass and Typekit to serve the type. WordPress was selected to give editors flexibility in how the content is presented.

"We set up a system for editors to change the colour of some of the homepage elements to represent the current feature article," continues rice. "This creates the same effect as a new magazine cover."

08. Mike Kus

Here designer Mike Kus presents his stunning work in a refreshingly clean and understated manner, in which large images live alongside simple user interface elements. Bold dashes of colour come through from the portfolio items themselves, rather than from unnecessary decorative elements.

"I think of my work as the brand, hence there was no need to add a lot of style to the actual site [or its] UI," says Kus.

The website is fully responsive and equally easy to navigate on larger and smaller screens. What makes the site such a pleasure to explore, however, is the image selection: each portfolio item uses strong, carefully selected imagery that make you want to see more of the project.

Kus notes that "one of the main issues was making sure the site had the same visual impact across all viewport sizes" – and in our opinion, it certainly does.

09. Multeor

Multeor is a multiplayer web game developed by Arjen de Vries and Filidor Wiese and designed by Arthur van 't Hoog. The idea of the game is to control a meteor crashing into earth. You score points by ensuring you leave the biggest trail of destruction. Up to eight players can connect to a single game simultaneously.

Multeor is written in plain JavaScript using HTML5 Canvas and backed with a Node.js server to manage the communications between the desktop and mobile devices using WebSockets .

Rather than using one of the many game libraries, Wiese built entirely from stratch. "We decided not to use a prefab game engine," he says, "which means rendering the graphics, detecting collisions, keeping track of entities and coding a particle system for the explosions. Not depending on a specific game engine was great fun: it gave us a lot of creative freedom and we definitely learned a lot because of it."

10. Here Is Today

Here is Today was created by designer Luke Twyman . He explains the motive behind the site: "Being fascinated by the scale of time, I wanted to create something that would clearly give people a sense of that vastness, and a feeling of where we sit in relation to all that's gone before. To do this, two important features on the technical side would be some kind of zooming/scaling mechanic, and also a super clean layout."

Twyman kept all widths relative to make the site's message convey equally well on a smaller screen: "From the start I decided to do away with pixel measurements and pt sizes for type, and instead set my own measurement unit based on a fraction of the screen width. I set one unit to be 1/22 of the screen width and positioned and scaled everything using that unit, so the spacious layout would be maintained on different displays."

It took just a small amount of JavaScript to put the animation in place: "The zoom mechanic is based on a simple tween animation formula, which I've used numerous times now, although I'd never used it in JS before. In fact this is only the second thing I've built using JS, but I've found the transition from other languages I've used or tried to be fairly easy, and there's plenty of great documentation at hand online."

11. The Trip

The Trip is an interactive film with audio, powered entirely through HTML5 and JavaScript (with Flash nowhere to be seen). The complexity of the project proved challenging, as developer Otto Nascarella explains. He says, "Most of the difficulties we had during the development process were due to the lack of cross browser/devices consistency of HTML5 new technologies, so it was decided we'd 'recommend' Chrome for a better experience on desktops," he says.

"The JavaScript code uses jQuery for almost everything - even though I flirted with the possibilities of using Zepto - I wrote two plugins for jQuery, [used] TextBlur to animate blur on fonts using text-shadow, that did not get used the end, and also TextDrop, the one that is responsible for the typographic animations."

MapsTD is a tower defence game, but with a difference. You tell it where your home is, and through the power of Google Maps, it will produce a game in which you're defending your hometown, with the baddies relentlessly charging past the streets and houses of your neighbourhood.

Creator Duncan Barclay explains how it works. "It's obviously built using the Google Maps API, with MooTools being used for the other aspects of the UI and as a general-purpose JavaScript library. It uses several bits of functionality provided by Google Maps. As well as the map itself, the biggest part is the route finder API, which is used to work out the paths the enemies follow. Once you've picked a start location, it does a lookup to get the latitude and longitude. It then looks for four routes by adding or subtracting a fixed number from that latitude and longitude (to get a point due north, due east, and so on), and uses Google to find a path between the two."

As the game progresses, more enemies (or 'creeps' as he has called them) appear on screen. Barclay found himself battling to keep performance high and timings correct: "One of the biggest challenges – one that still isn't quite right - was the timing. Firstly, if the page isn't active, most browsers reduce how often they check if timeouts have reached the end, resulting in creeps moving in bursts rather than moving steadily. I ended up fixing that by pausing the game when the tab loses focus. The detection code was taken from David Walsh's blog and is in the game credits.

"The other problem was that as you progressed, there were too many things happening, which resulted in the game slowing down a lot. The workaround ended up being to use harder creeps rather than more of them, and making the game incrementally more difficult each level after level 50."

These JavaScript examples were originally published in net magazine . For more inspiration, see our pick of ecommerce website designs and the best html examples .

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Get the Creative Bloq Newsletter

Daily design news, reviews, how-tos and more, as picked by the editors.

Joe is a regular freelance journalist and editor at Creative Bloq. He writes news and features, updates buying guides and keeps track of the best equipment for creatives, from monitors to accessories and office supplies. A writer and translator, he also works as a project manager at London and Buenos Aires-based design, production and branding agency Hermana Creatives, where he manages a team of designers, photographers and video editors who specialise in producing photography, video content, graphic design and collaterals for the hospitality sector. He enjoys photography, particularly nature photography, wellness and he dances Argentine tango.

Related articles

Web Designer Wall

• CSS Reference
• Free Templates
•  Featured
•  VirtueMart
• By Bootstrap Versions
• Sign In Sign In Registration

30 Truly Interactive Websites Built With CSS & JavaScript

All websites are somewhat interactive…we click on links or scroll a page, but truly interactive websites take us on a user-driven adventure or draws us in through motion and sound while giving us the power of choice. Interaction can be as simple as a series of clicks that navigate us through a story or landscape, or as complex as moving through a 3D environment to discover hidden content or reach goals to move to the next step. Put simply, interactivity is creating a user experience where the visitor is placed at the center.

Remember the joy and wonder of stumbling across a rich web experience built in Flash? There was sound and movement and hidden ways you could interact with the scene to unravel a mystery or just have fun with the site’s interface. When Flash began to die off, there was a period of time when the joy and immersion it offered became rarer, interactive magic limited to AAA websites promoting games or movies. Today, immersive interaction can be found at the core of almost all amazing websites thanks to advances in WebGL and Javascript.

Here are some examples of websites where user-centered navigation, sound and animation come together to create truly interactive experiences to inspire you to try something new in your next project.

Discover beautiful Humboldt California uses whimsical navigation to help visitors explore and pin locations displayed in full screen video to create a custom vacation itinerary.

Panera’s bright brand experience takes the visitor through three intricately modeled and animated foodscapes while cleaning up the world by banishing the pesky No-Nos.

Cobay.es offers the opportunity to form your own opinion about animal testing through an interactive experience involving mostly on choice and scroll.

Carnival’s Instant Caribbean Vacation is an interactive, 360 video experience. Users can choose their own adventure as they take in the sights and sounds of a cruise vacation.

This fun HTML5 game displays shots from retro movies and challenges you to type the actor’s name as fast as you can to get a high score.

Cavalier is an exceptional experiment in WebGL and SVG to create fully immersive, 3D, browser-based games.

Musical artist Residente to document his travels around the world. The site features an interactive map where we are all connected to each other.

The Eyezen Challenge is an immersive gaming experience that allows you to face the Fanatic eSports star Martin “Rekkles” Larsson, using only your eyes!

Tune into live radio around the world by rotating the globe.

Take a walk through New York’s iconic holiday window tradition, exploring 18 different stores and their magical displays via a fun 360 parallax effect.

Villes & Paysages is an international architecture and urban planning agency that uses gestures and an interactive "map" to explore their various projects.

GSAP animation, snap.svg and visual storytelling come together to create an immersive retrospective of the Kennedy Space center.

A Choose Your Own Adventure to explore a future mixed use development in Toronto, Ontario. Crafted using simple, accessible technologies such as CSS3 and SVG.

Creazoni Lifestyles is a brand experience mixing beautiful animations with user-driven navigation to explore the product showcase. They make excellent use of simple clicks to initiate brand messages and audible feedback.

This digital agency portfolio uses a variety of JavaScript libraries including triangle.js, angular.js, underscore.js and hammer.js to demonstrate their excellent user interface skills. This example is less about user choices and immersion and more about microinteractions and the use of sound.

With Air View, you can see the quality of the air you are breathing right now based on WHO data visualizations and Google Street view. Click on each node to open detailed information about each.

Syria Stories is a snap-serie from within the war zone in Syria. User interaction is a simple prompt to continue each snap, immersing visitors and leading them to hopefully donate.

The Interactive Showcase of Artist, Writer, Realist ‘Lyndsey Belle Tyler’ begins with a choice then offers an audio-visual experience for browsing different categories of her portfolio. Don’t miss the right-click menu.

As you step inside Hollow you are surrounded by millions of years of evolution and human history. Interaction uses gestures to move around and gives you two viewpoints to explore from. This is one of the more advanced examples on this list, built on WebGL and Firebase.

DISKO has created an interactive story built with simple JS libraries, leaving fans of the House in a spooky adventure within two total opposite kingdoms.

This site translates the experience of being in the Mt. Cuba Center gardens to a digital setting with a video tour that allows users to “walk” garden paths and inspires them to plan their visit.

Resn challenges the visitor with gestures to navigate deeper through the interactive portfolio of this New Zealand creative agency.

Explore Japan, Burma & Indochina with animated maps of each destination offering beautiful 360 views built on Angular and GSAP.

Ever wondered all the pages you ever “liked” on Facebook? Timelikes displays all the likes you ever gave on Facebook. in a beautiful interactive 3D timeline. Connect to Facebook and click the button to start, then click or tap and drag to navigate back or forward.

Created for Kontra K’s latest album, this live action & mobile first experience lets you solve a murder with the touch of a finger.

The official Swiss Army Man site invites you poke, prod and play with Manny, your very own multi-purpose tool guy. An excellent example of using interaction to market a movie.

A digital agency combining a traditional layout with interactive scrolling and parallax.

Diesel’s brand experience for their men’s fragrance is a delightful demonstration of familiar parallax effects and gesture-driven microinteractions that let curiosity drive visitor navigation and keep them engaged.

BMW takes you inside their motor show with 360 views and cleverly placed navigational elements.

The official site for Fantastic Beasts and Where to find Them starts with a flat map of Manhattan with simple navigational buttons. Each one takes you to a close up view where you can pan around or look closer – the entire experience given stylistic touches through mouse hover effects and sound. This site g

Build Your Own

There is no single tutorial or course that will teach you how to create a site just like those in this article, but you can learn the technologies and techniques used to build them, then combine those new skills with your imagination to make anything happen. Start with this free web HTML5 interactive web simulation course from Weber State University to understand physics and its role in web interactivity, or jump into this project course from Codeacademy.

The Land Lines experiment lets you explore Google Earth satellite images through gesture. The project was made in collaboration by Zach Lieberman and Google Data Arts Team. Draw or drag a line and it matches it with somewhere on earth. Learn more about how the project was created in this technical case study , or browse the open-source code on GitHub .

To learn more about some of the scripting used to make most of the sites on this list, visit the following resources:

• GSAP Animation
• Underscore.js

Jason Steward

Nice and truly informative post on website designing. This will prove really beneficial for the people who are willing to try this. Thanks for sharing this with us!!!

Post Comment or Questions Cancel reply

Your email address will not be published. Required fields are marked *

Save my name, email, and website in this browser for the next time I comment.

Post Comment

Recent Posts

• 30 Best WordPress Themes of 2019 Feb 28, 2019
• Common WordPress Errors & How to Fix Them Feb 28, 2019
• Themify Shoppe – The Ultimate WooCommerce WordPress Theme Feb 15, 2017
• Best Email Marketing Tips to Increase Engagement & Subscribers Feb 9, 2017
• Four Elements of Truly Mobile-Friendly Responsive Menus Feb 1, 2017
• Design Trends
• General Stuff

Covid Warning Banner

Employers, check out our Wage Subsidy Program!

10 Famous Websites Built Using JavaScript

Its prevalence and use across the industry factors heavily into our Web Development Bootcamp curriculum. Download our complete course package for a complete breakdown on why we focus on JS, and how you can start your own career in web development in 12 weeks .

JavaScript is not only a language that is universally used across the web, but it’s also a great avenue into the fundamentals of web development. To help you start off, we offer free online resources in JavaScript, crafted by our instructors.

Learn more about our advanced JS course

To highlight the widespread use of JavaScript across the web, we’ve compiled a few of the world’s top websites that use JavaScript, per W3Techs and Stackshare.io , in their tech stack.

The search engine we all know and love (or loathe) uses JavaScript for both its front- and back-end. Google has become so popular that it’s become a verb: “just Google it,” they say.

Google is Alexa’s number one ranked webpage worldwide, and - as of January 2019 - it’s estimated that more than 1.6 billion unique users visit the site each month.

First created in 2005, the Google subsidiary is the world’s most popular video sharing platform. YouTube has skyrocketed in popularity. It’s ranked second worldwide in terms of web traffic, and has popularized the way people watch, record, and upload a video.

The world’s most popular social media platform is written using JavaScript and quite a few other stacks. The company also owns Instagram, WhatsApp, Oculus, and GrokStyle.

Subscribe to our newsletter for the latest industry news and coding insights.

Wikipedia is the Internet’s encyclopedia based on open collaboration. The website uses a simple design, doesn’t show display ads, and is 100% free. Wikipedia is built on JavaScript, PHP, and more.

Yahoo! is one of the pioneers of the Internet. Yahoo!’s homepage is a mix of a search engine, news, and email. Yahoo! uses JS, HTML5, and more.

Amazon, the global marketplace for goods, uses JavaScript, Perl, Java, and others. Amazon as a company is the largest e-commerce marketplace in the world as measured by revenue.

Not unlike Amazon, eBay is an online resource for purchasing goods, although it’s better known as an auction service. Did you know that, along with Java, Oracle, and several others, JS is used?

Although not as well known in North America, QQ is an instant messaging service that’s popular predominantly in China. QQ ranks in the top 10 in most-visited websites worldwide.

Twitter is increasingly becoming a platform where people go for their news. The fast-moving feeds and curated content make for a constant influx of information and the design has remained largely unchanged in recent years. Rails, JavaScript and a multitude of other languages are used for Twitter.

LinkedIn is a social media platform for professionals. What programming language is partly responsible for allowing you to sync with your latest connection on LinkedIn? You guessed it, JavaScript, Java, and more.

Build your own website from scratch

Here at Lighthouse Labs, we prepare you to become a web developer in 12 weeks. You'll come to understand coding logic using popular languages and frameworks like JavaScript & Ruby on Rails, while learning how to think like a programmer by building software from the ground up.

Submit your application here to get started

Our free javascript crash course will teach you the basics that these top websites were built with..

Start Our Free JavaScript Course Now

Just In Time Learning at Lighthouse Labs

Software in space.

Learn JavaScript For Free

• Landscaping Websites
• Cleaning Websites
• Flooring Websites
• Tailor Websites
• Plumbing Websites
• Car Dealer Websites
• Funeral Websites
• Trucking Websites
• Logistics Websites
• Notary Websites
• Financial Advisor Websites
• Digital Agency Websites
• Real Estate Agent Websites
• Insurance Agent Websites
• Gym Websites
• Wellness Websites
• Hair Salon Websites
• Chiropractic Websites
• Dog Grooming Websites
• Travel Websites
• Hotel Websites
• Museum Websites
• Theater Websites
• Art Gallery Websites
• SaaS Websites
• Startup Websites
• Nonprofit Websites
• Technology Websites
• University Websites
• UX Designer Portfolios
• Web Developer Portfolios
• Student Portfolio
• Model Websites
• Art Portfolios
• Marketing Portfolios
• Squarespace Portfolios
• Copywriter Portfolios
• Interior Designer Portfolio
• Wix Ecommerce Examples
• Squarespace Ecommerce Examples
• Shopify Ecommerce Examples
• Wix Websites
• Webflow Examples
• Thinkific Examples
• BigCommerce Examples
• Kajabi Examples
• Duda Examples
• Zyro Examples
• Bluehost Websites
• ClickFunnels Examples
• Weebly Websites
• Blog Examples
• Wix Blog Examples
• Squarespace Blog Examples
• Lifestyle Blog Examples
• Food Blog Examples
• Travel Blog Examples

15 Best JavaScript Website Examples For 2024

JavaScript continues to dominate web development, evolving with new features and frameworks. Web developers use JavaScript to build websites, mobile apps, server-side applications, and web-based games.

Most attention-grabbing and mind-blowing websites are a product of JavaScript. If you are thinking of creating an outstanding and user-friendly website for your personal or business purposes, consider JavaScript.

This article reviews the 15 best JavaScript website examples you can use as inspiration to build your own site.

Let’s get started.

1. Satori Graphics

Hosted On Bluehost

Satori Graphics, led by the creative designer Tom Satori, showcases his expertise with captivating visuals on the website. An image of Tom adds a personal touch. 

The page features eye-catching sliding images displaying logos created by Tom Satori, with further examples as one scrolls down. Prioritizing legibility and adopting excellent typography, the page maintains a clean and uncluttered design. 

An endnote at the webpage’s bottom reinforces the commitment to creating impactful designs on the Internet, making Satori Graphics a noteworthy platform for design enthusiasts.

2. Hayah Beauty

Hayah Beauty, a comprehensive beauty agency serving both men and women, presents its offerings on a classic-themed website. The header employs a timeless font while a refined salon image enhances the classic ambiance.

Navigating the browser-friendly page reveals a dropdown menu featuring diverse images of male and female hairstyles, accompanied by pricing details. Engaging animations contribute to an interactive user experience.

A prominent “Book Now” call-to-action box emphasizes the website's commitment to seamless appointment scheduling and showcases its user-friendly browser interface.

3. Visit Humboldt

Hosted On WP Engine

Humboldt, a tourism enterprise, offers captivating tours and adventurous activities. The classic web page header uses visuals to depict Humboldt's offerings. With web development techniques, this JavaScript website optimizes user experience with cookies.  

I love that the menu bar integrates with web server functionalities, housing additional details. A hypertext link below further enriches users' exploration, providing an immersive journey into Humboldt's diverse and exciting travel experiences. 

Whether seeking scenic beauty or thrilling adventures, Humboldt's website ensures a seamless and enjoyable exploration for every visitor.

4. Social Scenes Photo Booth

Social Scenes Photo Booth, owned by a dynamic couple, specializes in delivering unique and creative experiences for clients and their guests. 

Positioned on the top right, the business logo and a left-sided dropdown menu bar enhance navigation. I like how the website's appealing design employs soft and cool colors like white, blue, and pink.  

Notably, the webpage uses HTML resources to showcase examples of previous photos, effectively serving as a form of advertisement. This strategic use of HTML resources contributes to the overall aesthetic and functionality of the site.

5. Ranch Retriever Puppies

Ranch Retriever Puppies, a specialized pet store exclusively for retrievers, features a compelling header that conveys its purpose. The webpage incorporates a CSS-styled drop-down menu at the top right, offering diverse information options for curious visitors.

Engaging images showcase various retrievers, creating an appealing visual experience. Below the header, an “About” article provides additional insights. 

The integration of CSS enhances the page's aesthetic appeal and ensures a visually cohesive and user-friendly presentation for those exploring Ranch Retriever Puppies' offerings.

6. The Uncaged Life

The Uncaged Life stands out as a meticulously detailed website where each bar navigates to information-rich pages. Crafted with clarity, it seamlessly combines enticing images, captivating typography, and thoughtful design, transforming visitors into potential clients.

This JavaScript site incorporates neutral colors, pop-up cards, a simple yet beautiful logo, and bold, clear headers. These strategic techniques, implemented with expertise in various languages, enhance the overall user experience on The Uncaged Life’s site.

7. Mari Suzuki

Mari Suzuki, a free meal prep guide website led by Chef Mari Suzuki, offers classes for members. I love the use of vibrant images and colors that effectively convey the intended message. 

This JavaScript website, developed with code expertise, comprehensively details the prep guide. Positioned on the left side, a call-to-action bar encourages direct messaging to foster user interaction.

Hosted On Amazon Web Services (AWS)  

Netflix is a platform for streaming and downloading movies/videos. This JavaScript website features an engaging pictorial background providing essential service details.

I love how this site showcases a vibrant red logo for added visual appeal. Incorporating client-side scripting language enhances the font styles, sizes, and colors, ensuring improved readability of information on web pages.

9. Wretched Beauty

Hosted On GoDaddy

Wretched Beauty is a web app with an appealing web page. The graphic design and overwhelming cinematography upon opening the page depict its use as a video web app. 

I love how the hybrid typography of the hero text “Wretched Beauty” is catchy and easily noticeable by visitors to the page. Users will be quick to engage the white CTA button that compellingly conveys the words “Begin.”

I like the way elements in the hero section take a central position with a dark backdrop revealing a feminine head. These intriguing elements foster user interaction on this JavaScript website.

10. The Local Palate

The Local Palate, a Southern food culture magazine, delves into the narratives of people, places, and foodways in this vibrant culinary region. This beautiful home page features a bold header and refined typography which ensures a clear and appealing reading experience. 

Using JavaScript libraries for enhanced interactivity, the top-right drop-down menu, programmed with a dynamic programming language, offers business details. 

Scroll down to discover enticing images of diverse cuisines and associated services, complete with price tags, a testament to the magazine's digital agency prowess. 

11. Intelligent Video Solutions (IVS)

Hosted On Webflow

IVS presents a scaled marketplace featuring premium video inventory from top-tier publishers, broadcasters, and DooH providers. Enjoy the advantages of a unified point for access, activation, and delivery through innovative formats promoting viewer engagement.

Upon accessing the URL, a card emerges with an embedded link leading to a messaging page for customer queries. You can explore endnotes at the website's conclusion. 

For an immersive experience, IVS excels in video inventory in browser-based games, leveraging versatile programming languages for dynamic content.

12. Gloutir

Gloutir, an award-winning development studio, boasts a note-like background on its website. With a commendable font selection, navigating the webpage is effortlessly enjoyable. 

This JavaScript site incorporates persuasive call-to-action bars such as “Learn More,” encouraging visitors to delve deeper. A captivating spinning wheel image appears during scrolling, adding an element of fascination. 

I love how this JavaScript website uniquely presents price tags and service descriptions in note-like forms. Leveraging scripting languages, Gloutir ensures compatibility across major browsers and embraces versatility by integrating other languages for enhanced functionality.

13. Caffeine Post

Caffeine Post, a video creation application, features an eye-catching yet understated header against a background. The page's minimalistic design directs focus to its videos. A dropdown menu bar akin to Google Docs functionality addresses visitors' potential questions. 

Additionally, a “See our selected works” redirection sign offers a preview of services. With a runtime environment optimizing performance, Caffeine Post ensures a seamless user experience, making it an ideal platform for video creation enthusiasts.

14. Sneaker Politics

Hosted On Shopify

Sneaker Politics, a vibrant website dedicated to sneaker sales, captivates visitors with an array of product images and brand details. This Javascript website example employs diverse visual methods to effectively communicate the brand's purpose.

I love the strategic positioning of the menu and search bar at the bottom, enhancing the interactive experience. Sneaker Politics stands out for its engaging design and interactive elements, providing a dynamic exploration of its offerings.

The display of popular sneakers is beautiful, complemented by excellent typography and server-side tools for seamless navigation and advertisement integration.

15. Symplicity

Hosted On SiteGround

Symplicity, fostering collaboration across institution departments, offers students a unified engagement marketplace, providing a comprehensive overview of university-level interactions. This JavaScript website optimizes user experience with cookies for efficiency. 

To avoid information overload, a “Learn More” click-on bar offers detailed insights. The webpage prioritizes fun with engaging fonts, appealing typography, and images. Thoughtful endnotes contribute to a well-rounded user journey. 

Simplicity values user opinion, creating an inclusive and enjoyable environment that seamlessly integrates necessary information with a touch of fun and interactive elements.

Best JavaScript Examples FAQs

Absolutely! JavaScript is a versatile scripting language that empowers web developers to create dynamic and interactive web pages. It is commonly used to manipulate the Document Object Model (DOM), allowing you to update content, handle user interactions, and dynamically modify the appearance of your webpage.

Yes, JavaScript is primarily a client-side scripting language running on the user's browser, rather than on the server. JavaScript enhances the user interface and overall interactivity of a webpage. When a user loads a webpage, the browser interprets and executes the JavaScript code, allowing for dynamic content updates, form validations, and other client-side interactions.

Some of the most noteworthy examples of JavaScript in action can be observed on dynamic and feature-rich websites like Facebook. JavaScript's versatility and power are evident in platforms that use it for real-time updates, interactive interfaces, and seamless user experiences. JavaScript is also popular for building mobile applications.

JavaScript operates by executing scripts in the browser environment. When a user visits a web page using JavaScript, the browser interprets and runs the scripts, allowing dynamic manipulation of the Document Object Model (DOM). JavaScript can respond to user events like clicks and input, enabling developers to create interactive elements, validate forms, and update content.

Traditionally, JavaScript has been synonymous with front-end development, responsible for enhancing the user interface and interactivity of websites. However, with the advent of Node.js, JavaScript can do back-end development. Node.js allows developers to execute JavaScript on servers, enabling the creation of scalable and high-performance server-side applications. 

Explore Further

• Best Java Hosting Providers
• Best Web Hosting Services
• What is Web Hosting?
• Free Web Hosting Sites
• How to Host a Website
• Top Cloud Service Providers
• Best Types of Web Hosting
• Best Dedicated Web Hosting Services
• Types of Software Platforms
• What is a Cloud Server?

Full-service Construction Company

Business Event Countdown

Business Solutions

New & Used Car Dealership

Travel Agency

Jewelry Shop

JavaScript Examples

Welcome to our collection of JavaScript examples ! In this meticulously curated compilation, we have assembled a diverse range of JavaScript code snippets that showcase the flexibility and power of this dynamic programming language.

Whether you are a beginner learning JavaScript or an experienced developer seeking inspiration, this collection offers something for everyone. From basic functions and DOM manipulation to advanced algorithms and interactive web applications, these examples will help you understand and harness the full potential of JavaScript. Explore the possibilities and elevate your coding skills with these practical and insightful JavaScript examples.

Let's dive in and unlock the endless possibilities of JavaScript!

Tip: Utilize Ctrl+F to easily search the current page or use the search bar to explore this site.

Table of Contents:

Background Effects

Hero Effects

Music Players

Notifications

Progress Bars

Range Sliders

Text Effects

three.js games

Flappy Bird

Tic Tac Toe

The Best JavaScript Examples

JavaScript is the most widely used scripting language on earth. Here are some examples of key syntax patterns in JavaScript.

Argument Example

The arguments object is an array-like object (in that the structure of the object is similar to that of an array; however it should not be considered an array as it has all the functionality of an object) that stores all of the arguments that you passed to a function and is proprietary to that function in particular.

If you were to pass 3 arguments to a function, say storeNames() , those 3 arguments would be stored inside an object called arguments and it would look like this when we pass the arguments storeNames("Mulder", "Scully", "Alex Krycek") to our function:

• First, we declare a function and make it return the arguments object.
• Then, when we execute that function with n arguments , 3 in this case, it will return the object to us and it will look like an array. We can convert it to an array, but more on that later…

Treat it as an array

You can invoke arguments by using arguments[n] (where n is the index of the argument in the array-like object). But if you want to use it as an array for iteration purposes or applying array methods to it, you need to convert it to an array by declaring a variable and using the Array.prototype.slice.call method (because arguments is not an array):

Since slice() has two (the parameter end is optional) parameters. You can grab a certain portion of the arguments by specifying the beginning and the ending of your portion (using the slice.call() method renders these two parameters optional, not just end ). Check out the following code:

Optimization issues with Array.slice()

There is a little problem: it’s not recommended to use slice in the arguments object (optimization reasons)…

Important : You should not slice on arguments because it prevents optimizations in JavaScript engines (V8 for example). Instead, try constructing a new array by iterating through the arguments object.

So, what other method is available to convert arguments to an array? I recommend the for-loop (not the for-in loop). You can do it like this:

For more information on the optimization issues: Optimization Killers: Managing Arguments

ES6 rest parameter as a way to circumvent the arguments object

In ES2015/ES6 it is possible to use the rest parameter ( ... ) instead of the arguments object in most places. Say we have the following function (non-ES6):

That function can be replaced in ES6 by:

Note that we also used an arrow function to shorten the forEach callback!

The arguments object is not available inside the body of an arrow function.

The rest parameter must always come as the last argument in your function definition. function getIntoAnArgument(arg1, arg2, arg3, ...restOfArgs /*no more arguments allowed here*/) { //function body }

Arithmetic Operation Example

JavaScript provides the user with five arithmetic operators: + , - , * , / and % . The operators are for addition, subtraction, multiplication, division and remainder, respectively.

Hint: There is a handy increment operator that is a great shortcut when you’re adding numbers by 1.

Subtraction

Hint: There is a handy decrement operator that is a great shortcut when you’re subtracting numbers by 1.

Multiplication

Hint: When making calculations it is possible to use parentheses to prioritize which numbers should be multiplied together.

Important: As you can see, you cannot perform any sort of operations on Infinity .

Arrow Function Example

Arrow functions are a new ES6 syntax for writing JavaScript function expressions. The shorter syntax saves time, as well as simplifying the function scope.

What are arrow functions?

An arrow function expression is a more concise syntax for writing function expressions using a “fat arrow” token ( => ).

The basic syntax

Below is a basic example of an arrow function:

You no longer need the function and return keywords, or even the curly brackets.

A simplified this

Before arrow functions, new functions defined their own this value. To use this inside a traditional function expression, we have to write a workaround like so:

An arrow function doesn’t define its own this value, it inherits this from the enclosing function:

Assignment Operators

Assignment operator example.

Assignment operators, as the name suggests, assign (or re-assign) values to a variable. While there are quite a few variations on the assignment operators, they all build off of the basic assignment operator.

Syntax = y;DescriptionNecessityxVariableRequired=Assignment operatorRequiredyValue to assign to variableRequired

The other assignment operators are a shorthand for performing some operation using the variable (indicated by x above) and value (indicated by y above) and then assigning the result to the variable itself.

For example, below is the syntax for the addition assignment operator:

This is the same as applying the addition operator and reassigning the sum to the original variable (that is, x), which can be expressed by the following code:

To illustrate this using actual values, here is another example of using the addition assignment operator:

Complete list of JavaScript’s assignment operators

Boolean example.

Booleans are a primitive datatype commonly used in computer programming languages. By definition, a boolean has two possible values: true or false .

In JavaScript, there is often implicit type coercion to boolean. If for example you have an if statement which checks a certain expression, that expression will be coerced to a boolean:

There are only a few values that will be coerced to false:

• false (not really coerced, as it already is false)
• ” (empty string)

All other values will be coerced to true. When a value is coerced to a boolean, we also call that either ‘falsy’ or ‘truthy’.

One way that type coercion is used is with the use of the or ( || ) and and ( && ) operators:

As you can see, the or operator checks the first operand. If this is true or truthy, it returns it immediately (which is why we get ‘word’ in the first case & true in the second case). If it is not true or truthy, it returns the second operand (which is why we get ‘word’ in the third case).

With the and operator it works in a similar way, but for ‘and’ to be true, both operands need to be truthy. So it will always return the second operand if both are true/truthy, otherwise it will return false. That is why in the fourth case we get true and in the last case we get ‘word’.

The Boolean Object

There is also a native JavaScript Boolean object that wraps around a value and converts the first parameter to a boolean value. If a value is omitted or falsy –0, -0, null , false , NaN , undefined , or an empty string ( "" ) – the object's value is false. Pass all other values, including the string "false" , and the object's value is set to true.

Note that primitive Boolean values ( true and false ) are different than those of the Boolean object.

More Details

Remember that any object, the value of which is not undefined or null , evaluates to true if used in a conditional statement. For example, even though this Boolean object is explicitly set to false, it evaluates to true and the code is executed:

This doesn't apply to boolean primitives:

To convert a non-boolean value to a boolean, use Boolean as a function rather than as an object:

Callback Functions

This section gives a brief introduction to the concept and usage of callback functions in JavaScript.

Functions are Objects

The first thing we need to know is that in JavaScript, functions are first-class objects. As such, we can work with them in the same way we work with other objects, like assigning them to variables and passing them as arguments into other functions. This is important, because it’s the latter technique that allows us to extend functionality in our applications.

Callback Function Example

A callback function is a function that is passed as an argument to another function, to be “called back” at a later time.

A function that accepts other functions as arguments is called a higher-order function , which contains the logic for when the callback function gets executed. It’s the combination of these two that allow us to extend our functionality.

To illustrate callbacks, let’s start with a simple example:

In the above example, createQuote is the higher-order function, which accepts two arguments, the second one being the callback. The logQuote function is being used to pass in as our callback function. When we execute the createQuote function (1) , notice that we are not appending parentheses to logQuote when we pass it in as an argument. This is because we do not want to execute our callback function right away, we simply want to pass the function definition along to the higher-order function so that it can be executed later.

Also, we need to ensure that if the callback function we pass in expects arguments,  we supply those arguments when executing the callback (2) . In the above example, that would be the callback(myQuote); statement, since we know that logQuote expects a quote to be passed in.

Additionally, we can pass in anonymous functions as callbacks. The below call to createQuote would have the same result as the above example:

Incidentally, you don’t have to use the word “callback” as the name of your argument. JavaScript just needs to know that it’s the correct argument name. Based on the above example, the below function will behave in exactly the same manner.

Why use Callbacks?

Most of the time we are creating programs and applications that operate in a synchronous manner. In other words, some of our operations are started only after the preceding ones have completed.

Often when we request data from other sources, such as an external API, we don’t always know when our data will be served back. In these instances we want to wait for the response, but we don’t always want our entire application grinding to a halt while our data is being fetched. These situations are where callback functions come in handy.

Let’s take a look at an example that simulates a request to a server:

In the above example, we make a mock request to a server. After 5 seconds elapse, the response is modified and then our callback function getResults gets executed. To see this in action, you can copy/paste the above code into your browser’s developer tool and execute it.

Also, if you are already familiar with setTimeout , then you’ve been using callback functions all along. The anonymous function argument passed into the above example’s setTimeout function call is also a callback! So the example’s original callback is actually executed by another callback. Be careful not to nest too many callbacks if you can help it, as this can lead to something called “callback hell”! As the name implies, it isn’t a joy to deal with.

JavaScript Class Example

JavaScript does not have the concept of classes inherently.

But we could simulate the functionalities of a class by taking advantage of the prototypal nature of JavaScript.

This section assumes that you have a basic understanding of prototypes .

For the sake of clarity, let us assume that we want to create a class which can do the following

Using class keyword

Like in any other programming language, you can now use the class keyword to create a class.

This is not supported in older browsers and was introduced in ECMAScript 2015.

class is just a syntactic sugar over JavaScript’s existing prototype-based inheritance model.

In general, programmers use the following ways to create a class in JavaScript.

Using methods added to prototypes:

Here, all the methods are added to prototype

You could also write prototype methods over function Person as below:

Using methods added internally

Here the methods are added internally instead of prototype:

Hiding details in classes with symbols

Most often, some properties and methods have to be hidden to prevent access from outside the function.

With classes, to obtain this functionality, one way to do this is by using symbols. Symbol is a new built-in type of JavaScript, which can be invoked to give a new symbol value. Every Symbol is unique and can be used as a key on object.

So one use case of symbols is that you can add something to an object you might not own, and you might not want to collide with any other keys of object. Therefore, creating a new one and adding it as a property to that object using symbol is the safest. Also, when symbol value is added to an object, no one else will know how to get it.

JavaScript Closure Example

A closure is the combination of a function and the lexical environment (scope) within which that function was declared. Closures are a fundamental and powerful property of Javascript. This section discusses the ‘how’ and ‘why’ about Closures:

Another Example

The closure ‘remembers’ the environment in which it was created. This environment consists of any local variables that were in-scope at the time the closure was created.

Closures are useful because they let you ‘remember’ data and then let you operate on that data through returned functions. This allows Javascript to emulate private methods that are found in other programming languages. Private methods are useful for restricting access to code as well as managing your global namespace.

Private variables and methods

Closures can also be used to encapsulate private data/methods. Take a look at this example:

In this example, we won’t be able to access balance from anywhere outside of the bankAccount function, which means we’ve just created a private variable.

Where’s the closure? Well, think about what bankAccount() is returning. It actually returns an Object with a bunch of functions inside it, and yet when we call account.getBalance() , the function is able to “remember” its initial reference to balance .

That is the power of the closure, where a function “remembers” its lexical scope (compile time scope), even when the function is executed outside that lexical scope.

Emulating block-scoped variables

Javascript did not have a concept of block-scoped variables. Meaning that when defining a variable inside a for-loop, for example, this variable was visible from outside the for-loop as well. So how can closures help us solve this problem? Let’s take a look.

Since the variable i does not have block-scope, it’s value within all three functions was updated with the loop counter and created malicious values. Closures can help us solve this issue by creating a snapshot of the environment the function was in when it was created, preserving its state.

The later versions of Javascript (ES6+) have a new keyword called let which can be used to give the variable a blockscope. There are also many functions (forEach) and entire libraries (lodash.js) that are dedicated to solving such problems as the ones explained above. They can certainly boost your productivity, however it remains extremely important to have knowledge of all these issues when attempting to create something big.

Closures have many special applications that are useful when creating large Javascript programs.

• Emulating private variables or encapsulation
• Making Asynchronous server side calls
• Creating a block-scoped variable.

Emulating private variables

Unlike many other languages, Javascript does not have a mechanism which allows you to create encapsulated instance variables within an object. Having public instance variables can cause a lot of problems when building medium to large programs. However with closures, this problem can be mitigated.

Much like in the previous example, you can build functions which return object literals with methods that have access to the object’s local variables without exposing them. Thus, making them effectively private.

Closures can also help you manage your global namespace to avoid collisions with globally shared data. Usually, all global variables are shared between all scripts in your project, which will definitely give you a lot of trouble when building medium to large programs.

That is why library and module authors use closures to hide an entire module’s methods and data. This is called the module pattern, it uses an immediately invoked function expression which exports only certain functionality to the outside world, significantly reducing the amount of global references.

Here’s a short sample of a module skeleton.

Closures are useful for capturing new instances of private variables contained in the ‘remembered’ environment, and those variables can only be accessed through the returned function or methods.

JavaScript Comment Example

Programmers use comments to add hints, notes, suggestions, or warnings to their source code; they have no effect on the actual output of the code. Comments can be very helpful in explaining the intent of what your code is or should be doing.

It is always best practice when starting out to comment more often than not, as it can help those reading your code to understand what exactly your code is intending to do.

JavaScript has two ways of assigning comments in its code.

The first way is the // comment; all text following // on the same line into a comment. For example:

The second way is the /* */ comment, which can be used for both single-line and multi-line comments. For example:

You can also prevent execution of Javascript code just commeting the code lines like this:

More Information:

How To Write Comments in JavaScript

Many IDEs come with a keyboard shortcut to comment out lines.

• Highlight text to be commented
• Mac: Push Command(Apple Key) & "/"
• Windows: Push Control & "/"
• You can also uncomment code by doing the same steps

A shortcut to comment out a section of Javascript in many code editors is to highlight the lines of code you want to comment out, then press `Cmd/Ctrl + /`.

Comments are also very helpful for code testing as you can prevent a certain code-line/block from running:

JavaScript Comparison Operator Example

JavaScript has both strict and type–converting comparisons.

• The strict comparison ( === ) only evaluates to true if both operands are the same type.
• The abstract comparison ( == ) attempts to convert both operands to the same type before comparing them.
• With relational abstract comparisons ( <= ), both operands are converted to primitives, then to the same type before comparison.
• Strings are compared using Unicode values based on standard ordering.

Features of comparisons:

• Two strings are considered strictly equal when they have the characters in the same sequence and the same length.
• Two numbers are considered strictly equal when they are the both of the type number and are numerically equal. This means that both 0 and -0 are strictly equal since they both evaluate to 0 . Note that NaN is a special value and is not equal to anything, including NaN .
• Two Boolean operands are considered strictly equal if both are true or false .
• Two objects are never considered equal in both strict or abstract comparisons.
• Expressions that compare objects are only considered true if the operands both reference the same exact object instance.
• Null and undefined are both considered strictly equal to themselves ( null === null ) and abstractly equal to each other ( null == undefined )

Equality operators

Equality (==).

The equality operator first converts operands that are not of the same type, then strictly compares them to one another.

Inequality (!=)

The inequality operator evaluates to true if both operands are not equal. If the operands are not the same type, it will try to convert them to the same type before making the comparison.

Identity / strict equality (===)

The identity or strict equality operator returns true if both operands are strictly equal in terms of value and type. Unlike the equality operator ( == ), it will not attempt to convert the operands to the same type.

Non-identity / strict inequality (!==)

The non-identity or strict inequality operator returns true if both operands are not strictly equal in terms of value or type.

Relational operators

Greater than operator (>).

The greater than operator returns true if the operand on the left is greater than the one on the right.

Greater than or equal operator (>=)

The greater than or equal operator returns true if the operand on the left is greater than or equal to the one on the right.

Less than operator (<)

The less than operator returns true if the operand on the left is less than the one on the right.

Less than or equal operator (<=)

The less than or equal operator returns true if the operand on the left is less than or equal to the one on the right.

JavaScript Form Validation Example

Form validation used to occur at the server, after the client had entered all the necessary data and then pressed the Submit button. If the data entered by a client was incorrect or was simply missing, the server would have to send all the data back to the client and request that the form be resubmitted with correct information. This was really a lengthy process which used to put a lot of burden on the server.

JavaScript provides a way to validate form’s data on the client’s computer before sending it to the web server. Form validation generally performs two functions:

Basic Validation

First of all, the form must be checked to make sure all the mandatory fields are filled in. It just requires a loop through each field in the form to check for data.

Data Format Validation

Secondly, the data that is entered must be checked for correct form and value. Your code must include appropriate logic to test the correctness of the data.

Have a look here .

Basic Form Validation

First let us see how to do a basic form validation. In the above form, we are calling validate() to validate data when the onsubmit event is occurring. The following code shows the implementation of this validate() function.

Now we will see how we can validate our entered form data before submitting it to the web server.

The following example shows how to validate an entered email address. An email address must contain at least an ‘@’ sign and a dot (.). Also, the ‘@’ must not be the first character of the email address, and the last dot must at least be one character after the ‘@’ sign.

HTML5 Form Constraints

Some of the commonly used HTML5 constraints for <input> are the type attribute (e.g. type="password" ), maxlength , required and disabled . A less commonly used constraint is the pattern attribute that takes a JavaScript regular expression.

JavaScript If statement example

The if statement executes a statement if a specified condition is true . If the condition is false , another statement can be executed using the else statement.

Note: The else statement is optional.

Multiple if...else statements can be chained to create an else if clause. This specifies a new condition to test and can be repeated to test multiple conditions, checking until a true statement is presented to execute.

Note: If you want to execute more than one statement in the if , else or else if part, curly braces are required around the statements:

MDN link | MSDN link

Using if...else :

Using else if :

JavaScript Prototype Example

JavaScript is a prototype-based language, therefore understanding the prototype object is one of the most important concepts which JavaScript practitioners need to know.

This section will give you a short overview of the Prototype object through various examples. Before reading this part, you will need to have a basic understanding of the this reference in JavaScript .

Prototype object

For the sake of clarity, let’s examine the following example:

As Point2D function is declared, a default property named prototype will be created for it (note that, in JavaScript, a function is also an object).

The prototype property is an object which contains a constructor property and its value is Point2D function: Point2D.prototype.constructor = Point2D . And when you call Point2D with new keyword, newly created objects will inherit all properties from Point2D.prototype .

To check that, you can add a method named move into Point2D.prototype as follows:

The Point2D.prototype is called prototype object or prototype of p1 object and for any other object created with new Point2D(...) syntax. You can add more properties to Point2D.prototype object as you like. The common pattern is to declare methods to Point2D.prototype and other properties will be declared in the constructor function.

Built-in objects in JavaScript are constructed in a similar manner. For example:

• Prototype of objects created with new Object() or {} syntax is Object.prototype .
• Prototype of arrays created with new Array() or [] syntax is Array.prototype .
• And so on with other built-in objects such as Date and RegExp .

Object.prototype is inherited by all objects and it has no prototype (its prototype is null ).

Prototype chain

The prototype chain mechanism is simple: When you access a property p on object obj , the JavaScript engine will search this property inside obj object. If the engine fails to search, it continues searching in the prototype of obj object and so on until reaching Object.prototype . If after the search has finished, and nothing has been found, the result will be undefined . For example:

In above snippet, the statement var obj2 = Object.create(obj1) will create obj2 object with prototype obj1 object. In other words, obj1 becomes the prototype of obj2 instead of Object.prototype by default. As you can see, b is not a property of obj2 ; you can still access it via the prototype chain. For the c property, however, you get an undefined value because it can’t be found in obj1 and Object.prototype .

In ES2016, we now get to use the Class keyword as well as the methods mentioned above to manipulate prototype . The JavaScript Class appeals to developers from OOP backgrounds, but it’s essentially doing the same thing as above.

This is basically the same as:

The getter and setter methods in classes bind an Object property to a function that will be called when that property is looked up. It’s just syntactic sugar to help make it easier to look up or set properties.

JavaScript Scope Example

If you’ve been programming in JavaScript for a while, you’ve undoubtedly run into a concept known as scope . What is scope ? Why should you take the time to learn it?

In programmer speak, scope is the current context of execution . Confused? Let’s take a look at the following piece of code:

This is a simple example, but it does a good job of illustrating what is known as Lexical scope . JavaScript, and almost every other programming language, has a Lexical scope . There is another kind of scope known as Dynamic scope , but we won’t be discussing that.

Now, the term Lexical scope sounds fancy, but as you will see it’s really simple in principle. In a Lexical Scope, there are two kinds of scopes: the global scope and a local scope .

Before you type the first line of code in your program, a global scope is created for you. This contains all the variables that you declare in your program outside any functions .

In the example above, the variable foo is in the global scope of the program, while the variable bar is declared inside a function and is therefore in the local scope of that function .

Let's break down the example line by line. While you might be confused at this point, I promise you will have a much better understanding by the time you finish reading this.

On line 1 we are declaring the variable foo . Nothing too fancy here. Let's call this a left-hand size (LHS) reference to foo , because we are assigning a value to foo and it’s on the left-hand side of the equal sign.

On line 3, we are declaring a function and assigning it to variable baz . This is another LHS reference to baz . We are assigning a value to it (remember, functions are values too!). This function is then called on line 8. This is a RHS, or a right-hand side reference to baz . We are retrieving baz ’s value, which in this case is a function and then invoking it.

Another RHS reference to baz would be if we assigned its value to another variable, for example foo = baz . This would be a LHS reference to foo and a RHS reference to baz .

The LHS and RHS references might sound confusing, but they are important for discussing scope. Think of it this way: a LHS reference is assigning a value to the variable, while a RHS reference is retrieving the value of the variable. They’re just a shorter and more convenient way of saying ‘retrieving the value’ and ‘assigning a value’.

Let’s now break down what’s happening inside the function itself.

When the compiler compiles the code inside a function, it enters the function’s local scope .

On line 4, the variable bar is declared. This is a LHS reference to bar . On the next line, we have a RHS reference to foo inside the console.log() . Remember, we are retrieving foo ’s value and then passing it as an argument to the method console.log() .

When we have a RHS reference to foo , the compiler looks for the declaration of the variable foo . The compiler doesn’t find it in the function itself, or the function’s local scope , so it goes up one level: to the global scope .

At this point you’re probably thinking that scope has something to do with variables. That is correct. A scope can be thought of as a container for variables. All variables that are created within a local scope are only accessible in that local scope. However, all local scopes can access the global scope. (I know you’re probably even more confused right now, but just bear with me for a few more paragraphs).

So the compiler goes up to the global scope to find a LHS reference to the variable foo . It finds one on line 1, so it retrieves the value from the LHS reference, which is a string: 'Hi, I am foo!' . This string is sent to the console.log() method, and outputted to the console.

The compiler has finished executing the code inside the function, so we come back out to line 9. On line 9, we have a RHS reference for the variable bar .

Now, bar was declared in the local scope of baz , but there is a RHS reference for bar in the global scope. Since there is no LHS reference for bar in the global scope, the compiler can’t find a value for bar and throws a ReferenceError.

But, you might ask, if the function can look outside itself for variables, or a local scope can peek into the global scope to find LHS references, why can’t the global scope peek into a local scope? Well that’s how lexical scope works!

This is the same code from above which illustrates the scope. This forms a sort of hierarchy that goes up to the global scope:

baz -> global .

So, if there is a RHS reference for a variable inside baz ’s scope, it can be fulfilled by a LHS reference for that variable in the global scope. But the opposite is not true .

What if we had another function inside baz ?

In this case, the hierarchy or the scope chain would look like this:

bar -> baz -> global

Any RHS references inside bar ’s local scope can be fulfilled by LHS references in the global scope or baz ’s scope, but a RHS reference in baz ’s scope cannot be fulfilled by a LHS reference in bar ’s scope.

You can only traverse down a scope chain, not up.

There are other two important things you should know about JavaScript scopes.

• Scopes are declared by functions, not by blocks.
• Functions can be forward-referenced, variables can’t.

Observe (each comment describes scope at the line that it’s written on):

JavaScript For Loop Example

The javascript for statement consists of three expressions and a statement:

• initialization - Run before the first execution on the loop. This expression is commonly used to create counters. Variables created here are scoped to the loop. Once the loop has finished its execution, they are destroyed.
• condition - Expression that is checked prior to the execution of every iteration. If omitted, this expression evaluates to true. If it evaluates to true, the loop’s statement is executed. If it evaluates to false, the loop stops.
• final-expression - Expression that is run after every iteration. Usually used to increment a counter. But it can be used to decrement a counter too.
• statement - Code to be repeated in the loop

any of these three expressions or the statement can be omitted. For loops are commonly used to count a certain number of iterations to repeat a statement. Use a break statement to exit the loop before the condition expression evaluates to false.

Common Pitfalls

Exceeding the bounds of an array

When indexing over an array many times, it is easy to exceed the bounds of the array (ex. try to reference the 4th element of a 3 element array).

There are two ways to fix this code. Set the condition to either i < arr.length or i <= arr.length - 1

Iterate through integers from 0-8

Break out of a loop before condition expression is false

JavaScript Break Statement Example

The break statement terminates the current loop, switch or label statement and transfers program control to the statement following the terminated statement.

If the break statement is used in a labeled statement, the syntax is as follows:

The following function has a break statement that terminates the while loop when i is 3, and then returns the value 3 * x .

In the following example, the counter is set up to count from 1 to 99; however, the break statement terminates the loop after 14 counts.

JavaScript Do While loop example

The do...while loop is closely related to the while loop. In the do while loop, the condition is checked at the end of the loop.

Here is the syntax for do...while loop:

statement(s): A statement that is executed at least once before the condition or Boolean expression is evaluated and is re-executed each time the condition evaluates to true.

condition: Here, a condition is a Boolean expression . If the Boolean expression evaluates to true, the statement is executed again. When the Boolean expression evaluates to false, the loops ends.

JavaScript For In Loop Example

The for...in statement iterates over the enumerable properties of an object, in arbitrary order. For each distinct property, statements can be executed.

Required/OptionalParameterDescriptionRequiredVariable: A different property name is assigned to the variable on each iteration. OptionalObject: an object whose enumerable properties are iterated.

JavaScript For Of Loop Example

The for...of statement creates a loop iterating over iterable objects (including Array, Map, Set, Arguments object and so on), invoking a custom iteration hook with statements to be executed for the value of each distinct property.

Description variable: On each iteration a value of a different property is assigned to the variable.object Object whose enumerable properties are iterated.

Arguments object

Javascript while loop example.

The while loop starts by evaluating the condition. If the condition is true, the statement(s) is/are executed. If the condition is false, the statement(s) is/are not executed. After that, while loop ends.

Here is the syntax for the while loop:

statement(s): A statement that is executed as long as the condition evaluates to true.

condition: Here, the condition is a Boolean expression which is evaluated before each pass through the loop. If this condition evaluates to true, statement(s) is/are executed. When the condition evaluates to false, execution continues with the statement after the while loop.

If this article was helpful, share it .

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

8 Large Website using JavaScript for Web development

Today’s digitally driven world requires websites to grow businesses. High-functioning websites are essential to bringing in customers and clients. Website front ends must be designed well to ensure a seamless user experience. Therefore, it’s necessary to focus on front-end web development when building your custom website.

For the front end, JavaScript is a must. There are various market leading Websites That Use JavaScript. JavaScript is everywhere you go on a website with more than static information.

JavaScript can update content regularly, show shuffling tabs, play animations, scroll videos, and make interactive maps.

Exploring the great javascript website examples like Google, YouTube comes as an undoubted reason making it a reliable choice for web development.

Read our blog to know 8 compelling websites using Javascript for web development.

A Brief Overview of JavaScript

JavaScript is an object-oriented language, it follows the ECMAScript standard (a specification language for JavaScript that ensures interoperability between different browsers).

As a general-purpose programming language, JavaScript is suitable for both front-end and back-end development of websites.

A server-side language for writing client-side and server-side code, it’s used by developers for interactive sites.

Web technologies like CSS, HTML, and JavaScript make up the backbone of the Internet. HTML creates and displays the basic structure of web pages.

The CSS language is used to format the layout, elements, and presentation of web pages. Lastly, JavaScript for websites controls the front end.

One of the biggest Advantages of JavaScript is its simplicity. JavaScript powers 98.7% of the web.

How Does JavaScript Work?

The JavaScript language is what is commonly referred to as a client-side script. Search engines, for example, work due to the user’s computer, smartphone, or tablet interacting with a remote server. Remote servers send information to clients (user machines), and the client-side software interprets the data and renders a Web page.

The Web pages you already have on your browser will still be accessible if your Internet provider goes down while you have a Web page loaded. This prevents users from accessing remote data or navigating to new Web pages.

Javascript: The Right Choice for Web Development

Almost every small to large company uses javascript websites. No matter how small a startup is or how large a corporation is, JavaScript development services fill every gap.

Despite its original intention to be used for front-end development, today, it is also used for server-side development.

Let’s look at some benefits that make Javascript coding websites , the popular web development language.

Simple to Learn

With JavaScript, you can learn web development along with ease of use. There is no need to spend a great deal of time learning how the language works and how to use it to create useful dynamic events for a website. As a result, it is easy to learn and has a very intuitive syntax.

With no prior knowledge of computer programming needed, it is easy for anyone to learn JavaScript and master it.

Since it utilizes the DOM model to provide many predefined features to different objects on the page, it is simple to develop scripts for custom purposes.

Provides Client-Side Assistance

The server doesn’t need to be involved with JavaScript code snippets. As a result, the server is less burdened.

A website processes JavaScript codes using the user’s system resources. These server-side processes make most of the functionalities possible.

As a result, animations and similar behaviors take a lot less time to render and are more fluid when they are rendered. There is an excellent chance for you to get help with JavaScript homework online.

The web is full of JavaScript. Several resources are available to help you learn JavaScript. There are a lot of Javascript projects on StackOverflow and GitHub, and Javascript as a whole has gained traction in the industry.

Using MEAN Stack

By using the MEAN Stack – including MongoDB, Express.js, Angular.js, and Node.js developers can simplify the development process even more. The MongoDB database is a newly defined NoSQL database. The Angular.js framework is one of the most widely used JavaScript frameworks.

Indispensable to Platforms

Most browsers support JavaScript, which facilitates the understanding and interpretation of JavaScript code. You don’t need to install or configure it, and it’s free. With just a few clicks, you can edit different parts of a website.

Interactivity of the User Interface

Using JavaScript to dynamically fill web pages with data, such as providing a country and state drop-down list. Selecting a country or state fills a drop-down list dynamically. A second example is form validation, which alerts users when fields are missing or incorrect.

A Powerful Framework

JavaScript offers Best JavaScript Frameworks that boast ready-to-use codes. They are easily understandable and debuggable. Furthermore, a wide array of features will be available to you, significantly increasing your productivity.

Triggered Codes

The JavaScript programming language is event-based. Different code segments run when a user clicks a button or hovers a mouse. Loading the website doesn’t initialize all the code. With this, you can ensure your website loads faster while adding rich features.

Procedural Programming

A programming language is a set of procedures comprising features that make it a popular and powerful tool. When you can create branches, loops, induce conditional checks, and more with JavaScript, your website will be much more enjoyable.

Coding on the Server Side

A cross-platform runtime engine like Node.js facilitates the development of server-side JavaScript code by web developers. There are node.js as a server-side and cross-platform runtime environment. The Google V8 JavaScript engine is also used to execute JavaScript code efficiently. With Node.js’ built-in libraries, programmers can run their web applications without using any third-party servers.

Taking on Multiple Tasks

The JavaScript programming language offers the event loop module, enabling multiple instructions to run simultaneously. For example, you activate a JavaScript event on your browser while browsing a website.

When it’s triggered, the JavaScript runtime stores the information automatically. If, within the loop, a callback function containing stored information is executed, then it will be executed again.

The JavaScript language allows multiple operations to be handled by one thread. In this way, programmers can avoid programming for every application separately (or redundantly).

8 Compelling Websites That Use JavaScript in 2023

With a thorough understanding of JavaScript’s numerous advantages, let’s explore some JavaScript website examples. This brings to light the web giants that showcase JavaScript in action.

No introduction is needed for Google and is one of the greatest examples of javascript in websites. A phrase now refers to the search engine, “Just Google it!

As a JavaScript programmer, it is impossible not to be impressed by the scope and amount of data that JavaScript manages. It is constantly updated in real-time for Google.

Furthermore, there is no lag in handling many queries and users without problems. JavaScript can handle Google, so it can handle whatever the web throws.

The most popular video streaming and sharing platform is YouTube. However, despite the popularity of the mobile app, the website still has the second highest traffic on the internet. As a result, video watching, recording, and uploading have become more popular. Without JavaScript, JavaScript would not be as popular as it is today.

In 2011, Youtube introduced an easy-to-navigate user interface that followed a social media design. With a personalized recommendation tab, trending tabs, and categories, it offers an ultra-modern user experience.

To Create A Web Application like YouTube, choose to Hire Javascript Developers and they will help you gain most of the benefits.

3. Facebook

The world’s number one social media platform, Facebook, is one of the websites that utilize JavaScript. By offering minimal designs and extensive tools for sharing videos, photos, and messages, Facebook has created a new way for consumers to engage with social media platforms.

It is also worth noting that Facebook’s company has developed its own JavaScript framework, React. Their websites include Facebook, Instagram, Messenger, Whatsapp Web, and Giphy.

4. LinkedIn

Working-class professionals use LinkedIn as a social networking site. With the power of social media, you can share inspiration with your friends, colleagues, and clients. A mix of JavaScript and other languages operates the social feed homepage.

The Linkedin site has an attractive design with quick searches, and website javascript is used for its functionality. There are many things you can do on this website, including creating job alerts, building resumes automatically, and much more.

Amazon is another high-traffic site built with JavaScript. This online eCommerce store supports millions of users around the world. Using the site, users may sell their products and receive marketing and shipping assistance.

It is estimated that more than 2.5 million sellers sell their products on Amazon. It is no secret that ensuring the timely delivery of these large datasets involves enormous effort.

A JavaScript user interface is an accessible, safe, and simple way for designers to create an Amazon-like user experience.

Statistics from Statista reveal that Twitter supports 192 million daily users. News and discussions about major events can be found there. Considering Twitter’s high traffic and constant postings and retweets, JavaScript is a natural fit.

Twitter’s UI is smooth and functional in part due to JavaScript. Many features make Twitter popular, including cascading tweets, attachments, images and videos, and customizable tweet blasts.

7. Wikipedia

Everything and anything can be found on Wikipedia. With JavaScript, humans have created the most giant encyclopedia in history. Website contributors from all over the world continuously update the simple elementary design.

JavaScript’s utilities make it difficult to read lengthy explanations, but not because it lacks any utilities.

Adding JavaScript to Quora’s web development infrastructure is another reason the social media platform relies on JavaScript. Unlike Twitter or Facebook, it allows experts and novices to share information.

Using Quora as an example, you can demonstrate the variety of ways developers can utilize JavaScript. Additionally to jQuery features on the front end, Quora uses JavaScript in its back-end development.

What Is the Best Time to Use Javascript?

JavaScript is commonly used to transform static web pages dynamically. Take a moment to recall your last web interaction.

JavaScript likely fabricated their experience. It’s JavaScript’s widespread use that makes it so popular. It has been mentioned that many of these behaviors exist.

A behavior change can include a slider, dropdown menu, animation, audio, or video.

Listed below are some other JavaScript examples that relate to web page behavior:

• Information display or hiding.
• Zooming in and out.
• Countdowns or timers.
• Homepages with gallery carousels.

Its use is well-established and variable beyond simply modifying web page behavior.

JavaScript and its frameworks have become the backbone of several popular websites. Here, we will discuss some of the most popular javascript websites. Each day, JavaScript’s popularity grows as it makes servers more secure and gives users a fast website experience.

To take the most of the benefit from JavaScript language, counting web development company comes as an ideal choice for creating result oriented applications.

Frequently Asked Questions

The JavaScript programming language is cross-platform, object-oriented, and used by developers in creating interactive web pages.

By using this language, software developers can dynamically update content, create animated pop-up menus, include clickable buttons, and control multimedia.

It is often used in the development of mobile apps, as it facilitates the creation of interactive applications that are user-friendly and interactive. Facebook, Twitter, and Uber are all examples of mobile applications that use JavaScript.

The JavaScript programming language is widely used in front-end development but has become increasingly popular in back-end development. With Node js (a JavaScript runtime), this can be accomplished.

Rate This Post

Written by Sunny Patel

Sunny Patel is a versatile IT consultant at CMARIX, a premier web app development company that provides flexible hiring models for dedicated developers . With 11+ years of experience in technology outsourcing, he spends his time understanding different business challenges and providing technology solutions to increase efficiency and effectiveness.

Hire Dedicated Developers

Ready to take your business to new heights? Our team of dedicated developers is here to make your dreams a reality!

Related Blogs

Next.js vs node.js: choose the right framework for app development.

Today’s digitally driven world requires websites to grow businesses. High-functioning websites are […]

Vue Datatables Demystified: Crafting Dynamic Data Displays with Precision

Have an interesting project let's talk about that.

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• English (US)

What is JavaScript?

• Overview: First steps

Welcome to the MDN beginner's JavaScript course! In this article we will look at JavaScript from a high level, answering questions such as "What is it?" and "What can you do with it?", and making sure you are comfortable with JavaScript's purpose.

A high-level definition

JavaScript is a scripting or programming language that allows you to implement complex features on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. — you can bet that JavaScript is probably involved. It is the third layer of the layer cake of standard web technologies, two of which ( HTML and CSS ) we have covered in much more detail in other parts of the Learning Area.

• HTML is the markup language that we use to structure and give meaning to our web content, for example defining paragraphs, headings, and data tables, or embedding images and videos in the page.
• CSS is a language of style rules that we use to apply styling to our HTML content, for example setting background colors and fonts, and laying out our content in multiple columns.
• JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else. (Okay, not everything, but it is amazing what you can achieve with a few lines of JavaScript code.)

The three layers build on top of one another nicely. Let's take a button as an example. We can mark it up using HTML to give it structure and purpose:

Then we can add some CSS into the mix to get it looking nice:

And finally, we can add some JavaScript to implement dynamic behavior:

Try clicking on this last version of the text label to see what happens (note also that you can find this demo on GitHub — see the source code , or run it live )!

JavaScript can do a lot more than that — let's explore what in more detail.

So what can it really do?

The core client-side JavaScript language consists of some common programming features that allow you to do things like:

• Store useful values inside variables. In the above example for instance, we ask for a new name to be entered then store that name in a variable called name .
• Operations on pieces of text (known as "strings" in programming). In the above example we take the string "Player 1: " and join it to the name variable to create the complete text label, e.g. "Player 1: Chris".
• Running code in response to certain events occurring on a web page. We used a click event in our example above to detect when the label is clicked and then run the code that updates the text label.
• And much more!

What is even more exciting however is the functionality built on top of the client-side JavaScript language. So-called Application Programming Interfaces ( APIs ) provide you with extra superpowers to use in your JavaScript code.

APIs are ready-made sets of code building blocks that allow a developer to implement programs that would otherwise be hard or impossible to implement. They do the same thing for programming that ready-made furniture kits do for home building — it is much easier to take ready-cut panels and screw them together to make a bookshelf than it is to work out the design yourself, go and find the correct wood, cut all the panels to the right size and shape, find the correct-sized screws, and then put them together to make a bookshelf.

They generally fall into two categories.

Browser APIs are built into your web browser, and are able to expose data from the surrounding computer environment, or do useful complex things. For example:

• The DOM (Document Object Model) API allows you to manipulate HTML and CSS, creating, removing and changing HTML, dynamically applying new styles to your page, etc. Every time you see a popup window appear on a page, or some new content displayed (as we saw above in our simple demo) for example, that's the DOM in action.
• The Geolocation API retrieves geographical information. This is how Google Maps is able to find your location and plot it on a map.
• The Canvas and WebGL APIs allow you to create animated 2D and 3D graphics. People are doing some amazing things using these web technologies — see Chrome Experiments and webglsamples .
• Audio and Video APIs like HTMLMediaElement and WebRTC allow you to do really interesting things with multimedia, such as play audio and video right in a web page, or grab video from your web camera and display it on someone else's computer (try our simple Snapshot demo to get the idea).

Note: Many of the above demos won't work in an older browser — when experimenting, it's a good idea to use a modern browser like Firefox, Chrome, Edge or Opera to run your code in. You will need to consider cross browser testing in more detail when you get closer to delivering production code (i.e. real code that real customers will use).

Third party APIs are not built into the browser by default, and you generally have to grab their code and information from somewhere on the Web. For example:

• The Twitter API allows you to do things like displaying your latest tweets on your website.
• The Google Maps API and OpenStreetMap API allows you to embed custom maps into your website, and other such functionality.

Note: These APIs are advanced, and we'll not be covering any of these in this module. You can find out much more about these in our Client-side web APIs module .

There's a lot more available, too! However, don't get over excited just yet. You won't be able to build the next Facebook, Google Maps, or Instagram after studying JavaScript for 24 hours — there are a lot of basics to cover first. And that's why you're here — let's move on!

What is JavaScript doing on your page?

Here we'll actually start looking at some code, and while doing so, explore what actually happens when you run some JavaScript in your page.

Let's briefly recap the story of what happens when you load a web page in a browser (first talked about in our How CSS works article). When you load a web page in your browser, you are running your code (the HTML, CSS, and JavaScript) inside an execution environment (the browser tab). This is like a factory that takes in raw materials (the code) and outputs a product (the web page).

A very common use of JavaScript is to dynamically modify HTML and CSS to update a user interface, via the Document Object Model API (as mentioned above). Note that the code in your web documents is generally loaded and executed in the order it appears on the page. Errors may occur if JavaScript is loaded and run before the HTML and CSS that it is intended to modify. You will learn ways around this later in the article, in the Script loading strategies section.

Browser security

Each browser tab has its own separate bucket for running code in (these buckets are called "execution environments" in technical terms) — this means that in most cases the code in each tab is run completely separately, and the code in one tab cannot directly affect the code in another tab — or on another website. This is a good security measure — if this were not the case, then pirates could start writing code to steal information from other websites, and other such bad things.

Note: There are ways to send code and data between different websites/tabs in a safe manner, but these are advanced techniques that we won't cover in this course.

JavaScript running order

When the browser encounters a block of JavaScript, it generally runs it in order, from top to bottom. This means that you need to be careful what order you put things in. For example, let's return to the block of JavaScript we saw in our first example:

Here we are selecting a button (line 1), then attaching an event listener to it (line 3) so that when the button is clicked, the updateName() code block (lines 5–8) is run. The updateName() code block (these types of reusable code blocks are called "functions") asks the user for a new name, and then inserts that name into the button text to update the display.

If you swapped the order of the first two lines of code, it would no longer work — instead, you'd get an error returned in the browser developer console — Uncaught ReferenceError: Cannot access 'button' before initialization . This means that the button object has not been initialized yet, so we can't add an event listener to it.

Note: This is a very common error — you need to be careful that the objects referenced in your code exist before you try to do stuff to them.

Interpreted versus compiled code

You might hear the terms interpreted and compiled in the context of programming. In interpreted languages, the code is run from top to bottom and the result of running the code is immediately returned. You don't have to transform the code into a different form before the browser runs it. The code is received in its programmer-friendly text form and processed directly from that.

Compiled languages on the other hand are transformed (compiled) into another form before they are run by the computer. For example, C/C++ are compiled into machine code that is then run by the computer. The program is executed from a binary format, which was generated from the original program source code.

JavaScript is a lightweight interpreted programming language. The web browser receives the JavaScript code in its original text form and runs the script from that. From a technical standpoint, most modern JavaScript interpreters actually use a technique called just-in-time compiling to improve performance; the JavaScript source code gets compiled into a faster, binary format while the script is being used, so that it can be run as quickly as possible. However, JavaScript is still considered an interpreted language, since the compilation is handled at run time, rather than ahead of time.

There are advantages to both types of language, but we won't discuss them right now.

Server-side versus client-side code

You might also hear the terms server-side and client-side code, especially in the context of web development. Client-side code is code that is run on the user's computer — when a web page is viewed, the page's client-side code is downloaded, then run and displayed by the browser. In this module we are explicitly talking about client-side JavaScript .

Server-side code on the other hand is run on the server, then its results are downloaded and displayed in the browser. Examples of popular server-side web languages include PHP, Python, Ruby, ASP.NET, and even JavaScript! JavaScript can also be used as a server-side language, for example in the popular Node.js environment — you can find out more about server-side JavaScript in our Dynamic Websites – Server-side programming topic.

Dynamic versus static code

The word dynamic is used to describe both client-side JavaScript, and server-side languages — it refers to the ability to update the display of a web page/app to show different things in different circumstances, generating new content as required. Server-side code dynamically generates new content on the server, e.g. pulling data from a database, whereas client-side JavaScript dynamically generates new content inside the browser on the client, e.g. creating a new HTML table, filling it with data requested from the server, then displaying the table in a web page shown to the user. The meaning is slightly different in the two contexts, but related, and both approaches (server-side and client-side) usually work together.

A web page with no dynamically updating content is referred to as static — it just shows the same content all the time.

How do you add JavaScript to your page?

JavaScript is applied to your HTML page in a similar manner to CSS. Whereas CSS uses <link> elements to apply external stylesheets and <style> elements to apply internal stylesheets to HTML, JavaScript only needs one friend in the world of HTML — the <script> element. Let's learn how this works.

Internal JavaScript

• First of all, make a local copy of our example file apply-javascript.html . Save it in a directory somewhere sensible.
• Open the file in your web browser and in your text editor. You'll see that the HTML creates a simple web page containing a clickable button.
• Next, go to your text editor and add the following in your head — just before your closing </head> tag: html < script > // JavaScript goes here </ script >
• Now we'll add some JavaScript inside our <script> element to make the page do something more interesting — add the following code just below the "// JavaScript goes here" line: js document . addEventListener ( "DOMContentLoaded" , ( ) => { function createParagraph ( ) { const para = document . createElement ( "p" ) ; para . textContent = "You clicked the button!" ; document . body . appendChild ( para ) ; } const buttons = document . querySelectorAll ( "button" ) ; for ( const button of buttons ) { button . addEventListener ( "click" , createParagraph ) ; } } ) ;
• Save your file and refresh the browser — now you should see that when you click the button, a new paragraph is generated and placed below.

Note: If your example doesn't seem to work, go through the steps again and check that you did everything right. Did you save your local copy of the starting code as a .html file? Did you add your <script> element just before the </head> tag? Did you enter the JavaScript exactly as shown? JavaScript is case sensitive, and very fussy, so you need to enter the syntax exactly as shown, otherwise it may not work.

Note: You can see this version on GitHub as apply-javascript-internal.html ( see it live too ).

External JavaScript

This works great, but what if we wanted to put our JavaScript in an external file? Let's explore this now.

• First, create a new file in the same directory as your sample HTML file. Call it script.js — make sure it has that .js filename extension, as that's how it is recognized as JavaScript.
• Replace your current <script> element with the following: html < script src = " script.js " defer > </ script >
• Inside script.js , add the following script: js function createParagraph ( ) { const para = document . createElement ( "p" ) ; para . textContent = "You clicked the button!" ; document . body . appendChild ( para ) ; } const buttons = document . querySelectorAll ( "button" ) ; for ( const button of buttons ) { button . addEventListener ( "click" , createParagraph ) ; }
• Save and refresh your browser, and you should see the same thing! It works just the same, but now we've got our JavaScript in an external file. This is generally a good thing in terms of organizing your code and making it reusable across multiple HTML files. Plus, the HTML is easier to read without huge chunks of script dumped in it.

Note: You can see this version on GitHub as apply-javascript-external.html and script.js ( see it live too ).

Inline JavaScript handlers

Note that sometimes you'll come across bits of actual JavaScript code living inside HTML. It might look something like this:

You can try this version of our demo below.

This demo has exactly the same functionality as in the previous two sections, except that the <button> element includes an inline onclick handler to make the function run when the button is pressed.

Please don't do this, however. It is bad practice to pollute your HTML with JavaScript, and it is inefficient — you'd have to include the onclick="createParagraph()" attribute on every button you want the JavaScript to apply to.

Using addEventListener instead

Instead of including JavaScript in your HTML, use a pure JavaScript construct. The querySelectorAll() function allows you to select all the buttons on a page. You can then loop through the buttons, assigning a handler for each using addEventListener() . The code for this is shown below:

This might be a bit longer than the onclick attribute, but it will work for all buttons — no matter how many are on the page, nor how many are added or removed. The JavaScript does not need to be changed.

Note: Try editing your version of apply-javascript.html and add a few more buttons into the file. When you reload, you should find that all of the buttons when clicked will create a paragraph. Neat, huh?

Script loading strategies

There are a number of issues involved with getting scripts to load at the right time. Nothing is as simple as it seems! A common problem is that all the HTML on a page is loaded in the order in which it appears. If you are using JavaScript to manipulate elements on the page (or more accurately, the Document Object Model ), your code won't work if the JavaScript is loaded and parsed before the HTML you are trying to do something to.

In the above code examples, in the internal and external examples the JavaScript is loaded and run in the head of the document, before the HTML body is parsed. This could cause an error, so we've used some constructs to get around it.

In the internal example, you can see this structure around the code:

This is an event listener, which listens for the browser's DOMContentLoaded event, which signifies that the HTML body is completely loaded and parsed. The JavaScript inside this block will not run until after that event is fired, therefore the error is avoided (you'll learn about events later in the course).

In the external example, we use a more modern JavaScript feature to solve the problem, the defer attribute, which tells the browser to continue downloading the HTML content once the <script> tag element has been reached.

In this case both the script and the HTML will load simultaneously and the code will work.

Note: In the external case, we did not need to use the DOMContentLoaded event because the defer attribute solved the problem for us. We didn't use the defer solution for the internal JavaScript example because defer only works for external scripts.

An old-fashioned solution to this problem used to be to put your script element right at the bottom of the body (e.g. just before the </body> tag), so that it would load after all the HTML has been parsed. The problem with this solution is that loading/parsing of the script is completely blocked until the HTML DOM has been loaded. On larger sites with lots of JavaScript, this can cause a major performance issue, slowing down your site.

async and defer

There are actually two modern features we can use to bypass the problem of the blocking script — async and defer (which we saw above). Let's look at the difference between these two.

Scripts loaded using the async attribute will download the script without blocking the page while the script is being fetched. However, once the download is complete, the script will execute, which blocks the page from rendering. This means that the rest of the content on the web page is prevented from being processed and displayed to the user until the script finishes executing. You get no guarantee that scripts will run in any specific order. It is best to use async when the scripts in the page run independently from each other and depend on no other script on the page.

Scripts loaded with the defer attribute will load in the order they appear on the page. They won't run until the page content has all loaded, which is useful if your scripts depend on the DOM being in place (e.g. they modify one or more elements on the page).

Here is a visual representation of the different script loading methods and what that means for your page:

This image is from the HTML spec , copied and cropped to a reduced version, under CC BY 4.0 license terms.

For example, if you have the following script elements:

You can't rely on the order the scripts will load in. jquery.js may load before or after script2.js and script3.js and if this is the case, any functions in those scripts depending on jquery will produce an error because jquery will not be defined at the time the script runs.

async should be used when you have a bunch of background scripts to load in, and you just want to get them in place as soon as possible. For example, maybe you have some game data files to load, which will be needed when the game actually begins, but for now you just want to get on with showing the game intro, titles, and lobby, without them being blocked by script loading.

Scripts loaded using the defer attribute (see below) will run in the order they appear in the page and execute them as soon as the script and content are downloaded:

In the second example, we can be sure that jquery.js will load before script2.js and script3.js and that script2.js will load before script3.js . They won't run until the page content has all loaded, which is useful if your scripts depend on the DOM being in place (e.g. they modify one or more elements on the page).

To summarize:

• async and defer both instruct the browser to download the script(s) in a separate thread, while the rest of the page (the DOM, etc.) is downloading, so the page loading is not blocked during the fetch process.
• scripts with an async attribute will execute as soon as the download is complete. This blocks the page and does not guarantee any specific execution order.
• scripts with a defer attribute will load in the order they are in and will only execute once everything has finished loading.
• If your scripts should be run immediately and they don't have any dependencies, then use async .
• If your scripts need to wait for parsing and depend on other scripts and/or the DOM being in place, load them using defer and put their corresponding <script> elements in the order you want the browser to execute them.

As with HTML and CSS, it is possible to write comments into your JavaScript code that will be ignored by the browser, and exist to provide instructions to your fellow developers on how the code works (and you, if you come back to your code after six months and can't remember what you did). Comments are very useful, and you should use them often, particularly for larger applications. There are two types:

• A single line comment is written after a double forward slash (//), e.g. js // I am a comment
• A multi-line comment is written between the strings /* and */, e.g. js /* I am also a comment */

So for example, we could annotate our last demo's JavaScript with comments like so:

Note: In general more comments are usually better than less, but you should be careful if you find yourself adding lots of comments to explain what variables are (your variable names perhaps should be more intuitive), or to explain very simple operations (maybe your code is overcomplicated).

So there you go, your first step into the world of JavaScript. We've begun with just theory, to start getting you used to why you'd use JavaScript and what kind of things you can do with it. Along the way, you saw a few code examples and learned how JavaScript fits in with the rest of the code on your website, amongst other things.

JavaScript may seem a bit daunting right now, but don't worry — in this course, we will take you through it in simple steps that will make sense going forward. In the next article, we will plunge straight into the practical , getting you to jump straight in and build your own JavaScript examples.

15 Free JavaScript Sample Snippets for Your Websites

Disclosure : WHSR is reader-supported. When you buy through our links, we may earn a commission.

JavaScript is used everywhere online these days – to improve website interactivity, to validate information, and/or to improve a website outlooks.

JavaScript first appeared in 1995 and has come a long way since then in terms of being accepted and how it is used. The syntax used in JavaScript was strongly influenced by C; but Java, Pearl, Python, and Scheme also played its part too.

JavaScrip Beginner Tips: What You Need To Know?

For starters, a few basics you need to know are:

• JavaScript can be turned off in the browser
• JavaScript will run each time a page is loaded
• JavaScript takes time to load on a slow Internet connection
• JavaScript is still ran from cached pages
• You can host JavaScript within a web page or externally from a .js file
• JavaScript is completely different than Java

It is also important to understand that JavaScript will actually lead to disaster when it's used in a wrong way.

Poorly configured and sloppy coded JavaScripts will slow your website and damage the overall site navigation. This in turn affect the return rate of your visitors (due to bad user experience) as well as search engine rankings (due to slow website response rates and bot crawling).  To help validate my case here, put yourself in the shoes of a viewer. If a website you were visiting loaded slowly, was difficult to navigate, and in overall, unappealing – would you return to the site? I wouldn’t.

Below is a small list of things to think about when adding JavaScript to your website .

• Is JavaScript required for the site to function properly?
• What will the site look like if the JavaScript was blocked?
• Will the JavaScript harm the server performance?
• Will adding the JavaScript help move your site in the direction you want it to go?

No, I am not trying to scare you away with these points.

In fact, don’t be afraid to use JavaScript on your websites as it provides tons benefits and, as mentioned, it's used by the majorities. The key point I am trying to get across here is don’t just keep adding JavaScript features to a site when they are unnecessary. Some sites are will need more JavaScript than the rest; some just need less – Just because one site is doing it doesn't mean you should do the same.

Freebies: 15 Cool JavaScript Snippets For Your Website

Now, let's get down to the stuffs that you came here for – below is a list of 15 JavaScript snippets that will enhance your site in either functionality or appearance. The code will be broken down into two sections, the head and body or .js file. If no section title is given then it is not needed for that particular snippet.

1. Understanding HTML5 Video

Quick Sample

What does the JavaScript snippet do?

This little snippet will prevent your website from trying to display a video that the browser cannot support, saving you bandwidth and processing power.

2. JavaScript Cookies

This snippet is a little long but very useful, it will allow your site to store information on the viewer’s computer then read it at another point in time. This snippet can be used in many different ways to accomplish different tasks.

3. Preload your images

This snippet will prevent your site from having that awkward time when it is only displaying part of the site; this not only looks bad but is also unprofessional. All you have to do is add your images to the preloadImages section and you are ready to roll.

4. E-mail Validation

This snippet will validate that a properly formatted e-mail address is entered in a form, it cannot guarantee that the e-mail address is real, there is no way to check for that with JavaScript.

5. No Right-Click

This snippet will prevent the viewer from being able to right-click on your page. This can discourage the average user from borrow images or code from your site.

6. Display Random Quotes

Ok so this is not a snippet that all sites would use but it can be used to display more than just random quotes. You can change the content ok the quotes to whatever you want and have random images or text displayed anywhere on your site.

7. Previous/Next Links

This snippet is great if you have multiple pages on an article or tutorial. It will allow the user the browse between the pages with ease. It is also small and light weight from a resource point of view.

8. Bookmark a Page

This snippet will allow the user to bookmark your page with ease; all they have to do is click the link. Its little features like this that can increase your viewers overall experience.

9. Easy Print Page Link

This little link will allow your views to easily print your page. It utilizes the quick print feature already setup by your browser and utilizes no resources until it is clicked.

10. Show Formatted Date

This snippet will allow you to display the current date anywhere on your webpage and does not need to be updated. Simply put it in place and forget about it.

11. Comma Separator

This snippet would be used mainly by sites that use numbers often. This snippet will keep your numbers looking the same across the board. All you have to do is copy the body line where you want to add a number and replace the number there with your number.

12. Get the Display Area of a Browser

This snippet will allow you to get the width and height of the display area in your views browser. This will give the designer the ability to create and use different displays based on the size of the user’s browser window.

13. Redirect with Optional Delay

This snippet will allow you to redirect your viewers to another page and it has the option of setting a delay. The use of this snippet is pretty self-explanatory and it is a very valuable tool to have in your belt.

14. Detect iPhones

This snippet will allow you to detect if your viewer is on an iPhone or iPod allowing you to display different content to them. This snippet is invaluable with how large the mobile market is and it is only going to continue to grow.

15. Print Message to Status Bar

This little snippet will allow you to print a message to the status bar. You can display recent or important news in an area the will catch the eye of the user.

• Basic HTML guide for dummies
• Creating a website from scratch
• The basic of .htaccess
• Coding for kids: Scratch programming
• WordPress codes to enhance your blog

Article by WHSR Guest

Do you know....

That you can find out who's the web host behind any website using our free tool?

Cloud Hosting We Like

Easy & reliable platform - Free $10 credit using promo code "WHSR10". This site you are reading is hosted on Cloudways.

Our Guides in...

• Cyber Security
• Web Hosting
• Website Building

Keep Reading

Uptime Guarantees: What You Need to Know When Choosing a Web Host?

Server Speed Explained for First-Time Web Hosting Shoppers

What is Bandwidth & Data Transfer in Web Hosting? How Much Do I need?

Website Hosting Cost Compared: How Much to Pay for a Web Host

• DSA with JS - Self Paced
• JS Tutorial
• JS Exercise
• JS Interview Questions
• JS Operator
• JS Projects
• JS Examples
• JS Free JS Course
• JS A to Z Guide
• JS Formatter

JavaScript Programming Examples

• JavaScript Array Programming Examples
• JavaScript Date Programming Examples

JavaScript Function Examples

• Javascript Map Programming Examples
• JavaScript Math Programming Examples
• JavaScript Number Programming Examples
• JavaScript Object Programming Examples
• Javascript Set Programming Examples
• JavaScript String Programming Examples

JavaScript is a popular compiled programming language in the world of web development, providing to both new and experienced developers. Now, practicing programming examples is useful for improving your logical and coding skills.

JavaScript programming examples , encompassing fundamental syntax like Objects, Functions , and Arrays , to advanced topics like OOPs and event handling. These examples are designed to enhance your JavaScript proficiency and reinforce your programming skills through practical tasks.

JavaScript Examples

• JavaScript Programming Examples Topics

Table of Content

JavaScript ES6 Examples

Javascript objects examples, javascript recursion examples, javascript number examples, javascript array examples, javascript datetime examples, javascript string/text examples, javascript regular expression examples, javascript dom examples, javascript json examples, javascript mini projects.

Here in this section, we have compiled the most important JavaScript ES6 programming examples. So, if you are new or an expert in JavaScript and looking for a practice set of JavaScript programming examples scroll down below.

In this section, we’ve collected important JavaScript examples that deal with objects. Whether you’re just starting or you’re already familiar with JavaScript and want to practice, take a look at the examples below.

Within this section, we’ve compiled important JavaScript Functions-based programming examples. So if you are seeking JavaScript function-based practice question the deep down below.

Follow down the below section you will get multiple JavaScript programming examples based on Recursion.

Explore the list of number-based JavaScript programming examples. Here you will get examples of how to add float numbers, how to make a currency converter, and more number-based examples.

If you are looking for a practice set of Array programs, then in this section we have mentioned multiple Array-based JavaScript programming examples.

Here in the section, we’ve compiled the most important DateTime JavaScript programming examples. These examples are designed to deepen your understanding of working with date and time in JavaScript.

Explore the practice set of String/Text JavaScript examples. All the examples listed below will help you master the art of handling text data efficiently in your JavaScript projects.

Below we have listed down Regular Expression JavaScript programming examples. Practice these questions and know the use of break, clone, and more.

In this DOM dedicated section, we have listed 15 DOM-based JavaScript examples JavaScript. Explore these examples and get to know how to save data in DOM, how to specify class in div, and more.

Under JSON Examples, we’ve compiled JavaScript JSON-based programming examples. So if you are looking to refine your skills, dive into the examples listed below for practical learning.

Once you have tried all the above JavaScript programming examples, then explore this section to find out the mini JavaScript examples. Ihese examples help you to upskale you logical skills.

Please Login to comment...

Similar reads.

• JavaScript-Questions
• Web-Tech Tutorials
• Web Technologies
• CBSE Exam Format Changed for Class 11-12: Focus On Concept Application Questions
• 10 Best Waze Alternatives in 2024 (Free)
• 10 Best Squarespace Alternatives in 2024 (Free)
• Top 10 Owler Alternatives & Competitors in 2024
• 30 OOPs Interview Questions and Answers (2024)

Improve your Coding Skills with Practice

What kind of Experience do you want to share?

Table of Contents

Most popular examples of javascript, best javascript examples you must try in 2024: all you need to know.

JavaScript is a text-based programming language that you can use from server-side and client-side in your .Net applications. You can use it for developing web pages with its more interactive and user-friendly benefits. You can take a simple, authentic example of JavaScript that you can use and see in the search box on the Amazon web portal. It is all the features and behavior designs developed by Javascript. JavaScript enhances the user experience of the web page by transforming it from a static page to an interactive one.

JavaScript is essentially handled and used for web-based applications. You can also use Javascript for implementing hardware controls. Here are a few use cases of JavaScript:

• Defining interactive response and performance to web pages
• JavaScript provides users to interact with web pages as per the below examples as per the requirements
• Show/hide more data or user information using with the click of a button
• Change the color of a button after hovering the mouse hovers over it
• Slide by a carousel of images on the home webpage
• Zooming in/zooming out feature on an image
• Performing a timer and defining count-down on a website
• Performing animation implementations
• Using a drop-down interactive on menu
• Performing audio and video on a web page

Developing web and mobile apps

• Developers can use multiple JavaScript frameworks for developing web and mobile-based applications. 
• JavaScript frameworks are groups of plenty of JavaScript code libraries that help developers and write the code as per certain requirements.
• For developing front-end-based UIs here, you can include other various client technologies, such as Angular , React Native.
• Various organizations like JavaScript code libraries practice using Node.js , a JavaScript runtime environment developed JavaScript V8 engine. 

Developing web server-based applications

You can also implement JavaScript to develop modest web servers and extend using back-end infrastructure with Node.js.

Game development

You can also use JavaScript to perform and develop browser-based games.

Want a Top Software Development Job? Start Here!

Example 1: JavaScript Program to Print Hello World

<html>  

<body>  

<script type="text/javascript">  

 alert("Hello World");  

</script>  

</body>  

</html>  

Example 2: JavaScript Program to Find the Factorial of a Number

<!DOCTYPE html>

<html>

<head>

</head>

<body style = "text-align: center; font-size: 20px;">

<h1> Welcome to the javaScript world!! </h1>

Enter a particular number: <input id = "num">

<br><br>

<button onclick = "fact()"> Please type any Factorial number </button>

<p id = "res"></p>

<script>

function fact(){

var i, num, f;

num = document.getElementById("num").value;

for(i = 1; i <= num; i++)  

i = i - 1;  

document.getElementById("res").innerHTML = "The factorial of the number " + i + " is: " + f ;

</script>

</body>

</html>

Example 3 JavaScript Program to Format the Date With Expected Output 

mm-dd-yyyy, mm/dd/yyyy or dd-mm-yyyy, dd/mm/yyyyvar today = new Date();

var dd = today.getDate();

var mm = today.getMonth()+1; 

var yyyy = today.getFullYear();

if(dd<10) 

    dd='0'+dd;

if(mm<10) 

    mm='0'+mm;

today = mm+'-'+dd+'-'+yyyy;

console.log(today);

today = mm+'/'+dd+'/'+yyyy;

today = dd+'-'+mm+'-'+yyyy;

today = dd+'/'+mm+'/'+yyyy;

Example 4: JS Form Program Example

function validateForm() {

  let x = document.forms["myForm"]["fname"].value;

  if (x == "") {

    alert("Please enter your Name");

    return false;

<body>

<h2>JavaScript Test Validation</h2>

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">

  Enter Name: <input type="text" name="fname">

  <input type="submit" value="Submit">

</form>

Example 5: POPUP Message Program Using Event

<h2>JavaScript Confirm Box</h2>

<button onclick="myFunction()">Please Try it</button>

<p id="Test Confirm Box"></p>

function myFunction() {

  if (confirm("Please Press a button!")) {

    txt = "You pressed Button!";

    txt = "You pressed Cancel Button!";

  document.getElementById("Test Confirm Box").innerHTML = txt;

Example 6: Display Alert for Prompt Message Program

<h2>JavaScript Prompt Example</h2>

<button onclick="myFunction()">Please Try for Prompt message</button>

<p id="Prompt Example"></p>

  let text;

  let user = prompt("Please enter your name:", "Your First Name");

  if (user == null || user == "") {

    text = "User cancelled the prompt.";

    text = "Hello " + person + "! How are you?";

  document.getElementById("Prompt Example").innerHTML = text;

Example 7: Line-Breaks Pop-Up Message

<h2>JavaScript</h2>

<p>Line-breaks Example in a popup box.</p>

<button onclick="alert('Hello\nHow are you?')">Please Try for line-breaks Example</button>

Example 8: JS Screen Program Using Javascript

<p id="ScreenColorDepth"></p>

document.getElementById("ScreenColorDepth").innerHTML = 

"Screen color depth is " + screen.colorDepth;

Example 9: JavaScript Timer

<h2>JavaScript Timing Sample</h2>

<p>Click on "Try it". Wait 5 seconds, and the page will alert "Hello How are you!!".</p>

<button onclick="setTimeout(myFunction, 5000);">Try it</button>

  alert('Hello How are you!!');

Example 10: JS Number Methods Using tostring()

<h2>JavaScript List Number of Methods</h2>

<p>The toString() function converts a number to a string.</p>

<p id="demo"></p>

let x = 125;

document.getElementById("demo").innerHTML =

  x.toString() + "<br>" +

   (125).toString() + "<br>" +

   (100 + 25).toString();

<h2>HTML JS OUTPUT</h2>

<p>1st Paragraph.</p>

<p id="HTMLJSOUTPUT"></p>

document.getElementById("HTMLJSOUTPUT").innerHTML = 7 + 7;

Earn upto 25 CEUs from Caltech CTME and get a score a new job with an average annual package of 9-10 L after completing the PGP in Full Stack Web Development . Enroll Today!

Hope this article helped you understand JavaScript Examples. In this article, we explored the concept of Javascript code structure with the different ways of declaration techniques along with its benefits, which will be helpful to developers from Java and .net backgrounds, application architectures, and other learners looking for information on JavaScript events.

If you are looking to upgrade your skill set, you can sign up on our SkillUp platform, a Simplilearn initiative that offers numerous free online courses to help with the basics of multiple programming languages, including JavaScript. You can also opt for our Post Graduate Program in Full Stack Web Development  in which you'll learn modern coding techniques with bootcamp-level intensity and gain all you need to be a full-stack technologist.

Have any questions for us? Let us know in the comments section and our experts will get back to you as soon as possible.

Our Software Development Courses Duration And Fees

Software Development Course typically range from a few weeks to several months, with fees varying based on program and institution.

Recommended Reads

Getting Started With Web Application Development in the Cloud

What Makes a Full Stack Web Developer?

Implementing Stacks in Data Structures

Combating the Global Talent Shortage Through Skill Development Programs

Average Full Stack Developer Salary

The Perfect Guide for All You Need to Learn About MEAN Stack

Get Affiliated Certifications with Live Class programs

Post graduate program in full stack web development.

• Live sessions on the latest AI trends, such as generative AI, prompt engineering, explainable AI, and more
• Caltech CTME Post Graduate Certificate
• PMP, PMI, PMBOK, CAPM, PgMP, PfMP, ACP, PBA, RMP, SP, and OPM3 are registered marks of the Project Management Institute, Inc.

Popular Tutorials

Popular examples, reference materials, learn python interactively, javascript examples.

The best way to learn JavaScript is by practicing examples. The page contains examples on basic concepts of JavaScript. You are advised to take the references from these examples and try them on your own.

JS Examples

• Print Hello World
• Generate a Random Number
• Check Prime Number
• Factorial of a Number
• JavaScript Program To Print Hello World
• JavaScript Program to Add Two Numbers
• JavaScript Program to Find the Square Root
• JavaScript Program to Calculate the Area of a Triangle
• JavaScript Program to Swap Two Variables
• JavaScript Program to Solve Quadratic Equation
• JavaScript Program to Convert Kilometers to Miles
• Javascript Program to Convert Celsius to Fahrenheit
• Javascript Program to Generate a Random Number
• Javascript Program to Check if a number is Positive, Negative, or Zero
• Javascript Program to Check if a Number is Odd or Even
• JavaScript Program to Find the Largest Among Three Numbers
• JavaScript Program to Check Prime Number
• JavaScript Program to Print All Prime Numbers in an Interval
• JavaScript Program to Find the Factorial of a Number
• JavaScript Program to Display the Multiplication Table
• JavaScript Program to Print the Fibonacci Sequence
• JavaScript Program to Check Armstrong Number
• JavaScript Program to Find Armstrong Number in an Interval
• JavaScript Program to Make a Simple Calculator
• JavaScript Program to Find the Sum of Natural Numbers
• JavaScript Program to Check if the Numbers Have Same Last Digit
• JavaScript Program to Find HCF or GCD
• JavaScript Program to Find LCM
• JavaScript Program to Find the Factors of a Number
• JavaScript Program to Find Sum of Natural Numbers Using Recursion
• JavaScript Program to Guess a Random Number
• JavaScript Program to Shuffle Deck of Cards
• JavaScript Program to Display Fibonacci Sequence Using Recursion
• JavaScript Program to Find Factorial of Number Using Recursion
• JavaScript Program to Convert Decimal to Binary
• JavaScript Program to Find ASCII Value of Character
• JavaScript Program to Check Whether a String is Palindrome or Not
• JavaScript Program to Sort Words in Alphabetical Order
• JavaScript Program to Replace Characters of a String
• JavaScript Program to Reverse a String
• JavaScript Program to Create Objects in Different Ways
• JavaScript Program to Check the Number of Occurrences of a Character in the String
• JavaScript Program to Convert the First Letter of a String into UpperCase
• JavaScript Program to Count the Number of Vowels in a String
• JavaScript Program to Remove a Property from an Object
• JavaScript Program to Check Whether a String Starts and Ends With Certain Characters
• JavaScript Program to Check if a Key Exists in an Object
• JavaScript Program to Clone a JS Object
• JavaScript Program to Loop Through an Object
• JavaScript Program to Merge Property of Two Objects
• JavaScript Program to Count the Number of Keys/Properties in an Object
• JavaScript Program to Add Key/Value Pair to an Object
• JavaScript Program to Replace All Occurrences of a String
• JavaScript Program to Create Multiline Strings
• JavaScript Program to Format Numbers as Currency Strings
• JavaScript Program to Generate Random String
• JavaScript Program to Check if a String Starts With Another String
• JavaScript Program to Trim a String
• JavaScript Program to Convert Objects to Strings
• JavaScript Program to Check Whether a String Contains a Substring
• JavaScript Program to Compare Two Strings
• JavaScript Program to Encode a String to Base64
• JavaScript Program to Replace all Instances of a Character in a String
• JavaScript Program to Replace All Line Breaks with
• JavaScript Program to Display Date and Time
• JavaScript Program to Check Leap Year
• JavaScript Program to Format the Date
• Javascript Program to Display Current Date
• JavaScript Program to Compare The Value of Two Dates
• JavaScript Program to Create Countdown Timer
• JavaScript Program to Remove Specific Item From an Array
• JavaScript Program to Check if An Array Contains a Specified Value
• JavaScript Program to Insert Item in an Array
• JavaScript Program to Append an Object to An Array
• JavaScript Program to Check if An Object is An Array
• JavaScript Program to Empty an Array
• JavaScript Program to Add Element to Start of an Array
• JavaScript Program to Remove Duplicates From Array
• JavaScript Program to Merge Two Arrays and Remove Duplicate Items
• JavaScript Program to Sort Array of Objects by Property Values
• JavaScript Program to Create Two Dimensional Array
• JavaScript Program to Extract Given Property Values from Objects as Array
• JavaScript Program to Compare Elements of Two Arrays
• JavaScript Program to Get Random Item From an Array
• JavaScript Program To Perform Intersection Between Two Arrays
• JavaScript Program to Split Array into Smaller Chunks
• JavaScript Program to Include a JS file in Another JS file
• JavaScript Program to Get File Extension
• JavaScript Program To Check If A Variable Is undefined or null
• JavaScript Program to Set a Default Parameter Value For a Function
• JavaScript Program to Illustrate Different Set Operations
• Javascript Program to Generate a Random Number Between Two Numbers
• JavaScript Program To Get The Current URL
• JavaScript Program to Validate An Email Address
• JavaScript Program to Check If a Variable is of Function Type
• JavaScript Program To Work With Constants
• JavaScript Program to Pass Parameter to a setTimeout() Function
• JavaScript Program to Generate a Range of Numbers and Characters
• JavaScript Program to Perform Function Overloading
• JavaScript Program to Implement a Stack
• JavaScript Program to Implement a Queue
• JavaScript Program to Check if a Number is Float or Integer
• JavaScript Program to Pass a Function as Parameter
• JavaScript Program to Get the Dimensions of an Image
• JavaScript Program to Remove All Whitespaces From a Text
• JavaScript Program to Write to Console
• JavaScript Program to Convert Date to Number

21 JavaScript Code Snippets for Beginners

A comprehensive collection of code snippets you can incorporate into your projects. Ideal for beginners wanting to enhance their JS knowledge.

What is JavaScript?

JavaScript is a client-side scripting language used to develop interactive web applications. With JavaScript, you can dynamically update content on a webpage, animate elements, control media, and manipulate behaviour.

• AJAX Request
• Input Validation
• Storing Data in the Browser
• Data Attributes
• Inject HTML
• URL Manipulation
• Country List Array
• Format Dates
• Disable Right Click
• Generate Unique ID
• Copy Text to Clipboard
• Text to Speech
• Replace Part of a String
• Countdown Timer
• Scroll to Top of Page
• Mobile Device Detection
• HTML DOM Manipulation
• Dark Mode Detection

1. AJAX Requests

The following snippets will leverage the fetch() function to execute HTTP requests (GET, POST, etc.).

GET Request

Get a JSON file and output the contents:

POST Request

Execute a POST request with JSON declared as the content type:

Using the FormData interface:

In addition to above, you can select an existing HTML form with:

2. Input Validation

The following snippets will validate various input values.

Validate Email Address

String length.

Validate string length between two numbers:

Alphanumeric Validation

Check if a string contains only letters and numerals:

Variable is Number

Check if a variable is a number:

3. Storing Data in the Browser

The Web Storage API will enable us to preserve data in the browser. The localStorage interface can store up to 5MB per domain (in most browsers) as opposed to the 4KB limit cookies can store.

Store a new item in local storage:

Retrieve an item from local storage:

Item Exists

Check if item exists in local storage:

Remove Item

Remove an item from local storage:

Remove all items:

4. Data Attributes

The data attributes will enable you to associate data to a particular element. You can then subsequently use JS to retrieve the data.

The following snippet will retrieve data attributes with JS:

5. Inject HTML

The following snippets will inject HTML into a specific point in the HTML document.

Inject After

Inject HTML after the given element:

Inject Before

Inject HTML before the given element:

Append and Prepend HTML

Append an item to a list element:

Prepend an item to a list element:

6. URL Manipulation

The following snippets will show you how to manipulate the URL.

Get parameters from a URL:

Redirect URL

Redirect in 10 seconds:

Get Hash Value

In a nutshell, JavaScript arrays are an ordered list of values with each element specified as an index. You can store mixed values in an array, such as a string, integer, boolean, objects, and most other types.

Add Item to Array

The following snippet will append an item to an array:

Append multiple items:

Prepend items to an array:

Remove Item From Array

Remove the first item from an array:

Remove the last item from an array:

Array Validation

Check if an array contains an item:

Iterate an array and output the result:

Get Random Item from Array

Manipulate array with map, reverse array, 8. country list array.

A populated array containing all the countries in the world:

Populate a HTML form list:

JavaScript classes are templates that consist of methods, variables, and inheritance.

Create Class

The following snippet will create a new class that will consist of methods and variables.

Create a new instance:

Execute a method:

Get property:

Set property:

Create a child class:

Create a new instance of the child class:

10. Format Dates

The following snippet will format a date in DD-MM-YYYY HH:MM format:

Assign the current date to an input date element:

Assign the current date and time to an input datetime-local element:

11. Disable Right Click

The following snippet will disable right click:

12. Generate Unique ID

The following snippet will generate a unique identifier:

13. Copy Text to Clipboard

The following snippet will copy text to the clipboard:

New API (may not be supported in all browsers):

14. Text to Speech

The following snippet will leverage the speech API and convert text to speech:

15. Replace Part of a String

The following snippet will replace a substring with a new string:

And to check if a string contains a substring, you can do:

JSON consists of text that represents arrays, objects, and other types of data.

The following snippet will convert an array to JSON text:

Convert JSON text to a JS object:

17. Countdown Timer

The following snippet will countdown a number in an element:

18. Scroll to Top of Page

The following snippet will scroll to the top of the page:

Old method:

19. Mobile Device Detection

The following snippet will detect if the visitor is using a mobile device:

20. HTML DOM Manipulation

The following snippets will show you how to manipulate HTML DOM elements.

Check if an element is visible:

Focus an element:

Remove focus:

Remove element:

Add class to an element:

Remove class:

Toggle class:

Get the selected item in a list:

Check checkbox state:

An Introduction to JavaScript

Let’s see what’s so special about JavaScript, what we can achieve with it, and what other technologies play well with it.

What is JavaScript?

JavaScript was initially created to “make web pages alive”.

The programs in this language are called scripts . They can be written right in a web page’s HTML and run automatically as the page loads.

Scripts are provided and executed as plain text. They don’t need special preparation or compilation to run.

In this aspect, JavaScript is very different from another language called Java .

When JavaScript was created, it initially had another name: “LiveScript”. But Java was very popular at that time, so it was decided that positioning a new language as a “younger brother” of Java would help.

But as it evolved, JavaScript became a fully independent language with its own specification called ECMAScript , and now it has no relation to Java at all.

Today, JavaScript can execute not only in the browser, but also on the server, or actually on any device that has a special program called the JavaScript engine .

The browser has an embedded engine sometimes called a “JavaScript virtual machine”.

Different engines have different “codenames”. For example:

• V8 – in Chrome, Opera and Edge.
• SpiderMonkey – in Firefox.
• …There are other codenames like “Chakra” for IE, “JavaScriptCore”, “Nitro” and “SquirrelFish” for Safari, etc.

The terms above are good to remember because they are used in developer articles on the internet. We’ll use them too. For instance, if “a feature X is supported by V8”, then it probably works in Chrome, Opera and Edge.

Engines are complicated. But the basics are easy.

• The engine (embedded if it’s a browser) reads (“parses”) the script.
• Then it converts (“compiles”) the script to machine code.
• And then the machine code runs, pretty fast.

The engine applies optimizations at each step of the process. It even watches the compiled script as it runs, analyzes the data that flows through it, and further optimizes the machine code based on that knowledge.

What can in-browser JavaScript do?

Modern JavaScript is a “safe” programming language. It does not provide low-level access to memory or the CPU, because it was initially created for browsers which do not require it.

JavaScript’s capabilities greatly depend on the environment it’s running in. For instance, Node.js supports functions that allow JavaScript to read/write arbitrary files, perform network requests, etc.

In-browser JavaScript can do everything related to webpage manipulation, interaction with the user, and the webserver.

For instance, in-browser JavaScript is able to:

• Add new HTML to the page, change the existing content, modify styles.
• React to user actions, run on mouse clicks, pointer movements, key presses.
• Send requests over the network to remote servers, download and upload files (so-called AJAX and COMET technologies).
• Get and set cookies, ask questions to the visitor, show messages.
• Remember the data on the client-side (“local storage”).

What CAN’T in-browser JavaScript do?

JavaScript’s abilities in the browser are limited to protect the user’s safety. The aim is to prevent an evil webpage from accessing private information or harming the user’s data.

Examples of such restrictions include:

JavaScript on a webpage may not read/write arbitrary files on the hard disk, copy them or execute programs. It has no direct access to OS functions.

Modern browsers allow it to work with files, but the access is limited and only provided if the user does certain actions, like “dropping” a file into a browser window or selecting it via an <input> tag.

There are ways to interact with the camera/microphone and other devices, but they require a user’s explicit permission. So a JavaScript-enabled page may not sneakily enable a web-camera, observe the surroundings and send the information to the NSA .

Different tabs/windows generally do not know about each other. Sometimes they do, for example when one window uses JavaScript to open the other one. But even in this case, JavaScript from one page may not access the other page if they come from different sites (from a different domain, protocol or port).

This is called the “Same Origin Policy”. To work around that, both pages must agree for data exchange and must contain special JavaScript code that handles it. We’ll cover that in the tutorial.

This limitation is, again, for the user’s safety. A page from http://anysite.com which a user has opened must not be able to access another browser tab with the URL http://gmail.com , for example, and steal information from there.

JavaScript can easily communicate over the net to the server where the current page came from. But its ability to receive data from other sites/domains is crippled. Though possible, it requires explicit agreement (expressed in HTTP headers) from the remote side. Once again, that’s a safety limitation.

Such limitations do not exist if JavaScript is used outside of the browser, for example on a server. Modern browsers also allow plugins/extensions which may ask for extended permissions.

What makes JavaScript unique?

There are at least three great things about JavaScript:

• Full integration with HTML/CSS.
• Simple things are done simply.
• Supported by all major browsers and enabled by default.

JavaScript is the only browser technology that combines these three things.

That’s what makes JavaScript unique. That’s why it’s the most widespread tool for creating browser interfaces.

That said, JavaScript can be used to create servers, mobile applications, etc.

Languages “over” JavaScript

The syntax of JavaScript does not suit everyone’s needs. Different people want different features.

That’s to be expected, because projects and requirements are different for everyone.

So, recently a plethora of new languages appeared, which are transpiled (converted) to JavaScript before they run in the browser.

Modern tools make the transpilation very fast and transparent, actually allowing developers to code in another language and auto-converting it “under the hood”.

Examples of such languages:

• CoffeeScript is “syntactic sugar” for JavaScript. It introduces shorter syntax, allowing us to write clearer and more precise code. Usually, Ruby devs like it.
• TypeScript is concentrated on adding “strict data typing” to simplify the development and support of complex systems. It is developed by Microsoft.
• Flow also adds data typing, but in a different way. Developed by Facebook.
• Dart is a standalone language that has its own engine that runs in non-browser environments (like mobile apps), but also can be transpiled to JavaScript. Developed by Google.
• Brython is a Python transpiler to JavaScript that enables the writing of applications in pure Python without JavaScript.
• Kotlin is a modern, concise and safe programming language that can target the browser or Node.

There are more. Of course, even if we use one of these transpiled languages, we should also know JavaScript to really understand what we’re doing.

• JavaScript was initially created as a browser-only language, but it is now used in many other environments as well.
• Today, JavaScript has a unique position as the most widely-adopted browser language, fully integrated with HTML/CSS.
• There are many languages that get “transpiled” to JavaScript and provide certain features. It is recommended to take a look at them, at least briefly, after mastering JavaScript.
• If you have suggestions what to improve - please submit a GitHub issue or a pull request instead of commenting.
• If you can't understand something in the article – please elaborate.
• To insert few words of code, use the <code> tag, for several lines – wrap them in <pre> tag, for more than 10 lines – use a sandbox ( plnkr , jsbin , codepen …)

Lesson navigation

• © 2007—2024  Ilya Kantor
• about the project
• terms of usage
• privacy policy

30 Creative and Unique CSS Animation Examples to Inspire Your Own

Published: April 02, 2024

Whether it’s making a button more clickable, adding some flair to a landing page, or entertaining a visitor while a page loads, CSS animations  are an effective way to delight viewers on your website.

In this post, we’ll check out 30 of my favorite successful uses of CSS animation. As someone who spends a lot of time studying websites and how they capture visitors’ attention, I know a good animation when I see one, and I’m stoked to share them with you.

But first, a brief review of the topic at hand ...

How do CSS animations work?

CSS animation is a feature of CSS that allows you to animate a change in one or more style properties of an element . Pure CSS animations require no additional code (e.g. JavaScript) or media (e.g. GIFs) — everything is done with HTML and CSS.

To make a simple CSS animation, you need three things: an HTML element to animate, a CSS rule that binds the animation to this element, and a group of keyframes that defines the styles at the start and end of the animation. You can also add declarations to further customize your animation, like speed and delay .

To demonstrate, here’s a simple example of a CSS animation:

See the Pen CSS Animation Example by HubSpot ( @hubspot ) on CodePen .

In this CSS keyframes animation, div  is the element we’re animating. Looking at the CSS, we see that the animation declarations are associated with the div  selector. The most important declaration here is animation-name , which binds the keyframe my-animation  to our div  element. Below this are several additional declarations that affect the timing and behavior of the animation.

The animation itself is created with a keyframe, indicated by the @keyframes  rule. A keyframe defines the animation’s starting state (inside from{ } ) and its end state (inside to{ } ). The keyframe my-animation changes three style properties of our div: background-color , width , and top . When these three properties are animated at once, it produces a coherent animation.

In our example, we only have one keyframe. Documents with multiple types of animations may have multiple keyframes, each bound to a different element.

CSS Keyframe Animation Examples

Below, we’ve compiled examples ranging from basic interaction effects to works of art (at least according to me). These examples are from CodePen , a website for creating and sharing code snippets in HTML and CSS. If you’re in need of inspiration, CodePen is a great place to help get the creative juices flowing.

We’ll start with examples that use the traditional keyframes approach described in the section above. These examples are, generally, easier to replicate in your own projects.

1. Simple Loading Spinners

CSS animations can be used to create effects that we’re all familiar with — these spinning load icons are one such example. Their meaning is almost universally understood, and they’re light on code as well. This particular example also shows how to achieve a similar effect with a scalable vector graphic .

See the Pen Simple HTML & SVG Loading Spinners by Stephen Delaney ( @sdelaney ) on CodePen .

View the code here .

2. Simple CSS Loaders

Here are some more loading animations to try out, presented in a handy grid. Each one is smooth and elegant, so you can pick out the ones that most appeal to you.

See the Pen Simple CSS loaders by Jenning ( @jenning ) on CodePen .

3. Rotating Changing Shapes

Here’s a good example to dissect for practice — notice how each of the transitions applies at different keyframes throughout the animation:

See the Pen CSS Animate by Matthew Dordal ( @mdd ) on CodePen .

4. Scrolling Text Animation

Another cool way to enhance your text, this code snippet applies a slot-machine-like effect that rotates words in and out of view. This is a common technique on websites that need to convey the versatility of their creations. Is your product efficient, user-friendly, and sustainable? Plug those words into an animation like this one.

See the Pen Text animation by Yoann ( @yoannhel ) on CodePen .

5. Animated Submit Button

I always enjoy the small, unexpected delight moments that savvy designers like to sprinkle throughout their web pages. This submit button is a clean, pleasing way to provide visual feedback indicating that an action has been completed, such as a form being submitted.

See the Pen Submit Button pure css animation by Dead Pixel ( @dead_pixel ) on CodePen .

6. Hot Coffee

The snippet below shows how simple, stripped-back animations can go a long way. In this case, applying CSS animation to translation, scale, and opacity fade  adds life to an otherwise basic drawing.

See the Pen Hot Coffee by Zane Wesley ( @zanewesley ) on CodePen .

7. Coffee Machine

We love our coffee on the HubSpot Blog, so here’s another. In this case, the animation doesn’t steal focus. Rather, it enhances the design around it to make the whole element feel more immersive. It’s something users will just barely notice, but appreciate regardless.

50 Free Coding Templates

Free code snippet templates for HTML, CSS, and JavaScript -- Plus access to GitHub.

• Navigation Menus & Breadcrumbs Templates
• Button Transition Templates
• CSS Effects Templates

You're all set!

Click this link to access this resource at any time.

8. Button Wiggle

Need to draw a user to a CTA? In lieu of a color flash or a modal, consider adding a quirky wiggle effect to a button like this one. I like that this effect can capture attention without seeming invasive or significantly disrupting the visitor’s flow. Instead, it’s playful and friendly.

See the Pen Save button wiggle by Donovan Hutchinson ( @donovanh ) on CodePen .

I don’t recommend placing this one on your site for risk of copyright infringement, but it’s fun to watch.

See the Pen Pacman by Riccardo ( @Ferie ) on CodePen .

10. Three Dots Loading

Another instance of CSS animation being used to create a loading effect  that many of us are familiar with. A simple scale change is all that’s needed to say, “Just a moment, please.”

See the Pen CSS Loader with dots by Aliaksei Peterson ( @petersonby ) on CodePen .

11. Never-ending Box

Evoking Sisyphus, this animation shows a box continuously trying to climb a slope, only to inevitably fall back down. I could see this being used as a loading animation — imagine the animation ending with the box toppling over the other side. So satisfying!

See the Pen Never-ending box by Pawel ( @pawelqcm ) on CodePen .

12. Color Fan

I think this next example works especially well for design-centric business websites  — try animating your color palettes to create a fan-out effect, and change things up from basic colored squares.

See the Pen Color Palette with Pure CSS Animation by Nitish Khagwal ( @nitishkmrk ) on CodePen .

13. Ants On a Sugar Cube

If you’re not a fan of bugs, I won’t be offended if you skip this one. It’s a clever implementation of animation on the left , bottom , and transform  properties. All the keyframes are doing is changing the location of each “ant” SVG element.

See the Pen Ants on Sugar CSS Animation by Stephen Fairbanks ( @thathurtabit ) on CodePen .

14. 3D Toggle Switch

The toggle switch is a staple of UI design. This example puts a three-dimensional spin on the concept, complete with a smooth animation for the toggling state. Here, the developer has modified the CSS checkbox input element into something more interesting.

See the Pen Toggle Switch with a Hole Handle by Jon Kantner ( @jkantner ) on CodePen .

15. Submarine

CSS works well for flat, colorful illustrations and animations. The code below combines several effects to draw a — quite frankly — adorable submarine. The only change I would suggest is making it yellow to honor the Beatles.

See the Pen Submarine with CSS by Alberto Jerez ( @ajerez ) on CodePen .

16. Animated Title Text on Hover

Olivia Ng’s “Hover Effect for Headers” example explores several ways to add dynamism to the title text. It shows how just a couple of keyframes can elevate your headings.

See the Pen Hover Effect for Headers by Olivia Ng ( @oliviale ) on CodePen .

17. Minimal Cat

I like that this example makes clever use of negative space combined with some well-timed CSS animations. It’s a simple design that conveys a lot of personality with the CSS transform property  alone.

See the Pen Pure CSS cat animation by Johan Mouchet ( @johanmouchet ) on CodePen .

18. Growing/Shrinking Bars

CSS animations can help add flair to data visualizations. This example shows how colors and speed can create different feels for dynamic bar graphs — CSS animations let you change the speed and number of repetitions in your animations.

See the Pen Logo playtime by Dan Peddle ( @dazld ) on CodePen .

19. Twisting Squares

Here’s a deceptively simple example that creates a trippy effect. The same rotation effect is applied to all the square divs on the page. Their differences in size cause them to rotate at different speeds, creating the illusion.

See the Pen Twisty by Mike King ( @micjamking ) on CodePen .

20. Laser Tag

I’ll say that this is one of the more complex examples in this list. However, it makes for a unique and captivating loading display to hold attention for a brief period.

See the Pen The Glowing Loader - Pure CSS Animation by Maxime Rossignol ( @Maxoor ) on CodePen .

21. Candles

I love this brilliant example of how CSS animations can tell a story. You’ll likely need a lot of practice to pull something like this off, but it’s sure to stick out to those visiting your site for the first time.

See the Pen Funny Candle Pure CSS Animation by Kevin David ( @kevin_David_k ) on CodePen .

22. Speedy Truck

Chris Johnson’s “Speedy Truck” makes smart use of parallax to simulate a truck’s drive through a natural setting. While minimal in appearance, this pen packs in details with several creative uses of the transform property — there’s even a little bump in the road.

See the Pen Speedy truck by Tippy Fodder ( @tippyfodder ) on CodePen .

23. Snow Globe

The coziest example we could find, this snow globe animation, adds an ambiance to your page that you won’t get with a still image. Notice how the snow animates only within the confines of the “glass” globe.

See the Pen Christmas Snow Globe Animation by Coding Artist ( @Coding-Artist ) on CodePen .

Other  CSS Animation Examples

Here are some more examples that don’t use keyframes (or use them very minimally) for animations. Instead, they leverage other more complex techniques to achieve the effect.

24. Floating Image

The “floating” effect is a subtle, simple, and effective use of animation. In this case, it’s used to display an icon with excellent results.

See the Pen Floating Animation - CSS by Mario Duarte ( @MarioDesigns ) on CodePen .

25. CSS Mouse Hover Transition Effect

This animation shows a simple but effective text highlight effect triggered by a mouseover action . I think it’s a great way to add some extra style to your page links.

See the Pen CSS mouse-out transition effect by Adam Argyle ( @argyleink ) on CodePen .

26. Hover-Responsive Logo

Check out the logo in the bottom right corner of the pen below — this animation applies a subtle animation on mouse-hover. It’s another visual cue for users that makes navigating your website a tad more enjoyable.

See the Pen Hover-Responsive Logo by Yorick Shan ( @yorickshan ) on CodePen .

27. Rotating Text

Okay, this example is cheating a bit since it uses JavaScript. However, imagine this on a homepage. Its transitions are incredibly smooth, and you have the option to customize which effects you use to transition between different words.

See the Pen Rotating Text by alphardex ( @alphardex ) on CodePen .

28. Opening Envelope

One of my favorite examples, this elegant animation pays close attention to detail. From the downward movement as the envelope opens, to the details on the paper, to the shadow underneath, it’s clear how small touches add up to one smooth, coherent animation. This would make a great button or scroll animation.

See the Pen Animated CSS Mail Button by Jake Giles-Phillips ( @jakegilesphillips ) on CodePen .

29. File Drawers

To liven up your menus, consider something like the pure CSS file drawers below. Its cabinets open slightly on mouse hover, helping your primary navigation stand out from others.

See the Pen Pure CSS Drawers by Jhey ( @jh3y ) on CodePen .

30. Astronaut

Here’s another smart use of the floating effect, paired with a friendly out-of-this-world illustration. Yet another instance of a subtle CSS animation effect to enhance the feel of a page element.

See the Pen Pure Css Astronaut Animated by Coding Artist ( @Coding-Artist ) on CodePen .

One Final Example

As we’ve seen, just a touch of CSS animation can go a very long way in crafting a more immersive experience for your visitors. The best animations serve your content and experience without distracting or appearing gimmicky — all of the above examples strike this balance remarkably well.

However, we couldn’t resist adding one last example that blew us away. This “Watch Tower” example is probably beyond the scope of this piece in its complexity, but it’s also a testament to what CSS and HTML alone can accomplish.

See the Pen Watch Tower Pure CSS Animation by Travis Doughty ( @tdoughty ) on CodePen .

For more of these awesome vignettes like this one, check out the creator’s CodePen profile and start thinking up ideas for yourself.

Don't forget to share this post!

Related articles.

12 Examples of CSS Drop-Down Animations in 2023

How to Add a CSS Fade-in Transition Animation to Text, Images, Scroll & Hover

How to Use CSS to Make an Animated Gradient

Animatable CSS Properties List: Every One You Should Know

The CSS Animation Timing Function: How to Use It + 9 Examples

The CSS animation-iteration-count Property, Explained

How to Create CSS Card Animations

How to Create CSS Animations on Scroll

How to Create SVG CSS Animations [+ Examples]

The CSS animation-direction Property, Explained

Dozens of free coding templates you can start using right now

CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

How To Compare Django Vs JavaScript: A Direct Analysis

Django and JavaScript are both essential in web development, but how do they differ? This article offers a clear comparison, highlighting their unique features and roles in the development process. A must-read for every developer aiming to make informed choices.

Django and JavaScript are both essential tools in the web development world, each with its unique strengths and applications. While Django is a high-level Python web framework, JavaScript is the scripting language that powers interactivity on the web. Let's explore their differences and understand when to use each in your projects.

Django Overview

Javascript overview, key differences between django and javascript, when to use django, when to use javascript, integration of django and javascript, pros and cons of django, pros and cons of javascript, practical use cases for django, practical use cases for javascript, frequently asked questions.

Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of web development, allowing developers to focus on writing their apps without needing to reinvent the wheel.

Why Django?

Key features of django, django's orm system.

Django follows the DRY principle (Don't Repeat Yourself), which promotes code reusability. This means less code, fewer bugs, and a faster development cycle. Additionally, Django's ORM (Object-Relational Mapping) system allows developers to interact with databases using Python code instead of SQL queries.

Admin Interface : Django provides an automatic admin interface that can be used to perform CRUD operations on the database. It's a time-saver for developers.

Security : Django has built-in protection against many vulnerabilities like CSRF, XSS, and SQL injection.

Scalability : Django is designed to help developers take applications from concept to completion as quickly as possible.

The ORM system in Django allows for database operations in pure Python, eliminating the need for SQL. Here's a basic example:

When you make changes to your models, Django provides a system to generate and apply migrations. Migrations are how Django stores changes to your models (and thus your database schema).

Django's documentation and community support are vast, making it a preferred choice for many web developers worldwide. Whether you're building a small application or a large-scale project, Django offers the tools and flexibility needed to get the job done.

JavaScript is a versatile programming language primarily known for adding interactivity to web pages. It's an essential part of the web, running on nearly every modern browser, making it one of the most widely used languages in web development.

Why JavaScript?

Key features of javascript, basic syntax and usage, loops and iteration.

JavaScript is asynchronous, meaning it can perform multiple tasks simultaneously without waiting for one to finish. This asynchronous behavior is what makes web pages responsive and dynamic. Moreover, with the rise of Node.js, JavaScript can also be used on the server side, making it a full-stack development language.

Event Handling : JavaScript can detect user actions, like clicks or key presses, and respond accordingly.

DOM Manipulation : JavaScript can change the content, structure, and style of a webpage in real-time.

Versatility : With frameworks and libraries like React, Angular, and Vue.js, JavaScript powers both frontend and backend development.

Variables in JavaScript are used to store data values. The let keyword is used to declare a variable:

Functions are blocks of reusable code. Here's how to declare and call a function in JavaScript:

JavaScript provides several ways to loop through data. The for loop is one of the most common:

JavaScript's adaptability, combined with its vast ecosystem of libraries and frameworks, makes it a cornerstone of modern web development. Whether you're animating elements, fetching data, or building complex single-page applications, JavaScript has the tools and capabilities to achieve your goals.

Django and JavaScript, while both instrumental in web development, serve different purposes and have distinct characteristics. Let's delve into their primary differences.

Nature And Use

Backend vs. frontend, frameworks and libraries, comparison table, scalability and performance.

Django is a Python web framework designed to facilitate rapid web application development with a clean and pragmatic approach. It provides tools and structures to help developers avoid common pitfalls and repetitive tasks.

On the other hand, JavaScript is a scripting language used primarily for adding interactivity to web pages. It's the backbone of dynamic content on the web, making sites responsive and user-friendly.

JavaScript :

While Django itself is a framework, JavaScript has numerous frameworks and libraries like React, Angular, and Vue.js, which enhance its capabilities and streamline development.

Django's architecture follows the MTV (Model-Template-View) pattern, ensuring separation of concerns, which aids in scalability. JavaScript, with its event-driven nature and non-blocking I/O, excels in building scalable applications, especially when used with Node.js on the server side.

Understanding the key differences between Django and JavaScript is crucial for making informed decisions in web development. While Django manages the backend complexities, JavaScript breathes life into the frontend, ensuring a seamless user experience.

Django, being a robust and versatile web framework, is suitable for a variety of web development projects. However, understanding when to leverage its strengths can make a significant difference in the development process.

Rapid Development

Database-driven websites, django orm example, built-in admin interface.

Security Concerns

Scalable Applications

Customizable and extendable.

Django shines when there's a need for rapid development . Its "batteries-included" philosophy means it comes with many built-in tools and utilities, reducing the need for external libraries or plugins.

If your project requires a database, Django's built-in ORM (Object-Relational Mapping) system is a boon. It allows developers to interact with databases using Python code, abstracting away the complexities of raw SQL queries.

For projects that require an admin dashboard or content management system, Django's admin interface is a game-changer. It's automatically generated based on your models and provides a user-friendly interface for database CRUD operations.

Django places a strong emphasis on security. If your application needs protection against common web vulnerabilities like CSRF, XSS, and SQL injection, Django has you covered with its built-in security features .

While Django is great for small to medium-sized applications, it's also designed to scale. Whether you're building a personal blog or a high-traffic e-commerce site, Django's modular architecture ensures that your application can grow with your needs.

Django's middleware and app structure make it highly customizable and extendable . If there's specific functionality you need, you can either find a Django app for it or easily build one yourself.

In conclusion, Django is a powerful tool in the web developer's arsenal. Its combination of rapid development capabilities, built-in features, and emphasis on security make it an excellent choice for a wide range of projects. Whether you're a solo developer or part of a larger team, Django offers the tools and flexibility to bring your web vision to life.

JavaScript, often simply referred to as JS, is the lifeblood of modern web applications. Its versatility and capabilities make it a top choice for various web-related tasks. Let's explore the scenarios where JavaScript truly stands out.

Interactive Web Pages

Example of a button interaction, single page applications (spas), data fetching and apis, animations and transitions, real-time applications, browser games and web graphics, server-side development.

One of the primary uses of JavaScript is to create interactive web pages . It allows for real-time updates, animations, and user interactions without needing to reload the entire page.

JavaScript frameworks like React, Angular, and Vue.js enable the development of Single Page Applications (SPAs) . SPAs load a single HTML page and dynamically update content as users interact, offering a smoother user experience.

JavaScript excels in fetching data from APIs (Application Programming Interfaces) and updating web pages without a full page reload.

Fetching Data from an API :

For websites aiming to offer visually appealing animations and transitions, JavaScript, combined with CSS, can bring elements to life, enhancing user engagement.

For applications that require real-time updates, such as chat applications or live sports scoreboards, JavaScript, especially with technologies like WebSockets , is the go-to choice.

With the Canvas API and WebGL, JavaScript can be used to create engaging browser games and intricate web graphics.

With the advent of Node.js , JavaScript has expanded beyond the browser. It's now a powerful tool for server-side development, allowing for full-stack JavaScript applications.

In essence, JavaScript is a multifaceted language, catering to a plethora of web development needs. From simple scripts to enhance interactivity, to powering complex web applications, its capabilities are vast. Whether you're looking to add a touch of dynamism to a static page or build a real-time, data-driven application, JavaScript offers the tools and libraries to make your vision a reality.

Combining the strengths of Django's backend capabilities with JavaScript's frontend dynamism can lead to powerful, responsive, and interactive web applications. Let's delve into how these two can be seamlessly integrated.

Serving Static Files

• Using JavaScript in Django Templates

AJAX Calls To Django Views

Django channels and real-time features, decoupled architecture with django rest framework, integrating frontend frameworks.

In a Django project, JavaScript files are treated as static files . These files need to be properly configured in Django settings to be served to the frontend.

Setting Up Static Files:

Using JavaScript In Django Templates

Django templates allow for the inclusion of JavaScript to enhance the interactivity of rendered HTML pages.

Including a JavaScript File :

JavaScript's AJAX capabilities can be used to fetch or send data to Django views without reloading the page.

Making An AJAX Request:

For real-time functionalities like chat applications, Django Channels can be integrated. With JavaScript on the frontend, this allows for WebSocket communication between the client and server.

For projects that require a more decoupled architecture, the Django REST Framework (DRF) can be used to create API endpoints. JavaScript frameworks like React or Vue.js can then fetch and display this data on the frontend.

Modern JavaScript frameworks like React, Angular, or Vue.js can be integrated into Django projects. This allows developers to leverage component-based architectures and enhance user interfaces.

In conclusion, the integration of Django and JavaScript offers a harmonious blend of backend stability and frontend interactivity. By leveraging the strengths of both, developers can craft web applications that are both robust and user-friendly, ensuring a seamless user experience from end to end. Whether it's through AJAX calls, real-time updates, or integrating modern frontend frameworks, the possibilities are vast and varied.

Django, often referred to as the "web framework for perfectionists with deadlines," has garnered significant attention in the web development community. Like any tool, it comes with its strengths and weaknesses.

Pros Of Django

Cons of django, table: pros and cons of django.

"Batteries-Included" Philosophy

Django follows a "batteries-included" philosophy, meaning it provides a wide array of built-in features. This reduces the need for external libraries and speeds up the development process.

Example of Built-in Admin Interface :

Django's ORM (Object-Relational Mapping) system allows developers to interact with databases using Python, abstracting away the complexities of raw SQL queries.

Security Features

Django places a strong emphasis on security, providing built-in protections against common web vulnerabilities like CSRF, XSS, and SQL injection.

Scalability

Django's modular architecture ensures that applications can scale efficiently, catering to both small projects and high-traffic websites.

Learning Curve

While Django aims to be user-friendly, beginners might find its learning curve a bit steep, especially if they're new to web development or Python.

Monolithic Structure

Django's monolithic structure can sometimes be a limitation for projects that require a more microservices-based approach.

For very simple projects or microservices, Django might introduce unnecessary overhead due to its comprehensive nature.

In essence, Django offers a plethora of benefits for web developers, from its comprehensive features to its focus on security. However, it's essential to evaluate the project requirements and determine if Django's strengths align with the project's needs. While it's an excellent choice for many web applications, understanding its limitations ensures that developers can make informed decisions.

JavaScript, a cornerstone of modern web development, powers the dynamic and interactive elements of most websites. As the primary language for web browsers, its ubiquity is undeniable. However, like any tool, it has its advantages and drawbacks.

Pros Of JavaScript

Cons of javascript, table: pros and cons of javascript.

JavaScript runs on virtually every modern web browser, making it one of the most ubiquitous programming languages . This wide reach ensures that JS-powered sites and applications are accessible to almost every internet user.

Example of a Simple Alert :

Event-Driven Language

JavaScript is inherently event-driven , allowing developers to craft interactive user experiences by responding to user actions like clicks, key presses, and more.

Asynchronous Capabilities

With features like Promises and Async/Await , JavaScript can handle asynchronous operations, making it possible to fetch data, process it, and update the UI without freezing the browser.

Rich Ecosystem

JavaScript boasts a rich ecosystem with countless libraries and frameworks like React, Angular, and Vue.js, which help expedite development and introduce advanced features.

Browser Inconsistencies

Different browsers might interpret JavaScript slightly differently, leading to cross-browser compatibility issues.

Performance Limitations

Being an interpreted language, JavaScript might not offer the same performance as compiled languages, especially for computationally intensive tasks.

JavaScript can be exploited for malicious purposes, leading to concerns about client-side security . However, modern browsers have implemented measures to mitigate such risks.

Single-Threaded

While JavaScript can handle asynchronous operations, it's single-threaded , which means it can't perform multiple operations simultaneously.

In a nutshell, JavaScript's strengths lie in its wide accessibility, event-driven nature, and rich ecosystem. It's the backbone of interactive web content. However, developers need to be aware of its limitations, especially when it comes to performance and security. By understanding both its strengths and weaknesses, one can leverage JavaScript effectively, crafting web experiences that are both engaging and robust.

Django, with its robust features and "batteries-included" philosophy, is suitable for a wide range of web applications. Let's explore some practical scenarios where Django shines.

Web Applications

E-commerce platforms, content management systems (cms), api backends, social media platforms.

Django's primary strength lies in building web applications . Its built-in admin interface, ORM, and templating engine make it easy to develop, deploy, and manage web apps.

Example of a Simple View :

Django's extensibility makes it an excellent choice for e-commerce platforms . With packages like Oscar and Saleor, developers can quickly set up online stores with features like product management, cart functionality, and payment processing.

For content-driven websites like blogs, news portals, or corporate sites, Django offers packages like Wagtail and Mezzanine that transform Django into a powerful CMS .

With the Django REST Framework , developers can quickly build API backends for mobile apps, single-page applications, or other services that require a RESTful API.

Example of a Simple API Endpoint :

Django's scalability and built-in user authentication make it suitable for building social media platforms . Features like user profiles, friend requests, and post feeds can be implemented efficiently.

With Django Channels, developers can introduce real-time functionalities like chat applications, notifications, and live updates.

In the vast landscape of web development, Django offers tools and packages that cater to a myriad of use cases. Whether it's a simple blog, a bustling e-commerce site, or a real-time chat application, Django provides the tools necessary to bring these projects to life with efficiency and elegance.

JavaScript, initially designed to make web pages interactive, has evolved into a versatile tool with a plethora of applications. Let's delve into some of the practical scenarios where JavaScript is indispensable.

Web-Based Games

Backend development.

At its core, JavaScript excels in creating interactive web pages . It can manipulate DOM elements, respond to user events, and enhance the user experience.

Example of a Button Click Event :

JavaScript frameworks like React, Angular, and Vue.js enable the development of SPAs . These applications load a single HTML page and dynamically update content as the user interacts, offering a smoother user experience.

With the Canvas API and WebGL, JavaScript can be used to develop web-based games . These games run directly in the browser without the need for additional plugins or installations.

JavaScript, in conjunction with CSS, can create captivating animations and transitions to enhance web page aesthetics.

Example of a Simple Animation :

With Node.js, JavaScript extends its reach to backend development , allowing developers to build server-side applications using a language they are already familiar with.

JavaScript, combined with WebSockets, is perfect for real-time applications like chat apps, live sports updates, and collaborative tools.

JavaScript can interact with various Web APIs to access device hardware, fetch data, or integrate with third-party services.

In the realm of web development and beyond, JavaScript's capabilities are vast. From enhancing web interactivity to powering server-side applications, its versatility is unmatched. Whether you're building a dynamic web page, a real-time chat app, or a server-side API, JavaScript provides the tools and libraries to make your vision a reality.

How do I start learning Django or JavaScript?

For Django, the official documentation is a great starting point. For JavaScript, there are numerous online resources, tutorials, and courses available. It's recommended to start with the basics and gradually move to advanced topics.

Are there any security concerns with using JavaScript?

Like any programming language, JavaScript can be exploited if not used correctly. It's essential to be aware of best practices and common vulnerabilities, like cross-site scripting (XSS), to ensure your applications are secure.

Which is faster: Django or JavaScript?

It's not a direct comparison since Django is a web framework and JavaScript is a language. However, in terms of frontend responsiveness, JavaScript might feel faster because it runs directly in the browser. Django, being server-side, might have latency depending on server response times.

Can I use Django without knowing Python?

Django is written in Python, so a foundational knowledge of Python is essential to use and understand Django effectively.

Let’s test your knowledge!

Which of the following statements is true?

Subscribe to our newsletter, subscribe to be notified of new content on marketsplash..

Java Tutorial

Java methods, java classes, java file handling, java how to, java reference, java examples, java online compiler, java compiler (editor).

With our online Java compiler, you can edit Java code, and view the result in your browser.

Click on the "Try it Yourself" button to see how it works.

Publish Your Code

If you want to create your own Java applications, check out W3Schools Spaces .

W3Schools Spaces is a website-building tool that enables you to create and share your own website, as well as develop and host Java applications.

You can change the website's look and how it works by editing the code right in your web browser.

It's easy to use and doesn't require any setup.

The code editor is packed with features to help you achieve more:

• Templates: Start from scratch or use a template
• Cloud-based: no installations required. You only need your browser
• Terminal & Log: debug and troubleshoot your code easily
• File Navigator: switch between files inside the code editor
• And much more!

Learn Faster

Practice is key to mastering coding, and the best way to put your Java knowledge into practice is by getting practical with code.

Use W3Schools Spaces to build, test and deploy code.

The code editor lets you write and practice different types of computer languages. It includes Java, but you can use it for other languages too.

New languages are added all the time:

If you don't know Java, we suggest that you read our Java Tutorial from scratch.

Easy Package Management

Get an overview of your packages and easily add or delete frameworks and libraries. Then, with just one click, you can make changes to your packages without manual installation.

Build Powerful Websites

You can also use the code editor in W3School Spaces to build frontend or full-stack websites from scratch.

Or you can use the 60+ templates available and save time:

Create your Spaces account today and explore them all!

Share Your Website With The World

Host and publish your websites in no time with W3School Spaces .

W3Schools subdomain and SSL certificate are included for free with W3School Spaces . An SSL certificate makes your website safe and secure. It also helps people trust your website and makes it easier to find it online.

Want a custom domain for your website?

You can buy a domain or transfer an existing one and connect it to your space.

How Does It Work?

Get started in a few clicks with W3School Spaces .

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

[email protected]

Top Tutorials

Top references, top examples, get certified.