Basic JavaScript Examples

• Output text with JavaScript
• Change HTML elements with JavaScript
• An external JavaScript
• Example Analysis

JavaScript Statements, Comments, and Code Blocks

• JavaScript Statements
• JavaScript Code Blocks
• JavaScript Single-line Comments
• JavaScript Multi-line Comments
• Use single-line comments to prevent execution
• Use multi-line comments to prevent execution
• Example Analysis

JavaScript Variables

• Declare a variable, assign it a value, and then display it


• Example Analysis

JavaScript Conditional Statements If ... Else

• If Statement
• If...else Statement
• Random link
• Switch Statement
• Example Analysis

JavaScript Message Boxes

• Alert Box
• Alert box with line breaks
• Confirm Box
• Prompt Box
• Example Analysis

JavaScript Functions

• Functions
• Functions with parameters
• Functions with parameters 2
• Function with a return value
• Function with parameters and a return value
• Example Analysis

JavaScript Loops

• For Loop
• Loop to output HTML headings
• While Loop
• Do While Loop
• break statement
• continue statement
• Use the For...In statement to iterate through the elements in an array


• Example Analysis

JavaScript Events

• onclick event
• onmouseover event
• Example Analysis

JavaScript Error Handling

• try...catch statement
• try...catch statement with a confirm box
• onerror event
• Example Analysis

Advanced JavaScript Examples

• Create a welcome cookie
• Simple timing
• Another simple timing
• Timing event in an infinite loop
• Timing event in an infinite loop with a stop button
• Clock made with timing events
• Create an object instance
• Create a template for objects

JavaScript Application Examples

• JavaScript slideshow code (with autoplay)
• CSS calendar style
• JavaScript popup
• JavaScript image popup
• JavaScript Lightbox
• JavaScript search box auto-suggestion
• JavaScript table data search
• JavaScript sort a list alphabetically
• JavaScript sort a single table column alphabetically
• JavaScript animation application example
• JavaScript progress bar example
• JavaScript percentage progress bar
• JavaScript/CSS tooltip popup
• JavaScript/CSS to-do list
• HTML CSS, JavaScript calculator
• HTML, CSS, JavaScript dropdown menu effect
• JS/CSS various operation message notification effects
• JS/CSS popup message at the bottom of the screen (snackbar)
• JS/CSS login form
• JS/CSS registration form
• JavaScript Countdown Timer
• JS/CSS menu button toggle (open/close)
• JS/CSS accordion animation effect
• JS/CSS accordion animation effect with icons
• JS/CSS tabs
• JS/CSS tabs – fade-in effect
• JS/CSS tabs – set default option
• JS/CSS tabs – set close button
• JS/CSS tabs – vertical orientation
• JS/CSS tabs – slideshow effect
• JS/CSS responsive top navigation style example
• JS/CSS sidebar animation example
• JS/CSS sidebar animation example - page main content moves to the right
• JS/CSS sidebar animation example - page main content has a black transparent background
• JS/CSS full-screen sidebar
• JS/CSS sidebar - no animation effect
• JS/CSS right-side sidebar
• JS/CSS full-screen navigation – top-to-bottom animation
• JS/CSS click-dropdown menu
• JS/CSS click-dropdown menu - right-aligned
• JS/CSS click navbar dropdown menu
• JS/CSS dropdown menu with search/filter operations
• JS autocomplete, auto-suggestion feature
• JavaScript press Enter key to trigger button click event
• JavaScript create a menu search
• JavaScript determine whether it is a mobile browser or PC browser
• JavaScript determine whether it is a WeChat browser
• JavaScript/CSS list search feature
• JavaScript/CSS table search feature
• JavaScript/CSS dropdown menu search feature
• JavaScript/CSS list sorting feature
• JavaScript/CSS table sorting feature

More examples:https://www.jyshare.com/examples/