Explore!

JavaScript Classes

• Clickable Shapes

C'mon, you know you need some class! In CS, classes are pivotal and appear in most languages. You can think of them as factories that reliably 'manufacture' objects that can be manipulated in code.

This app features 3 graphical classes we used in a P5JS setting to demonstrate mouse-object interactions.

If you are a Java student

Color sampling and tweaking

• Clickable Shapes

This app was an instructional one: 'Click a shape and do something to it': how is this done? Once clicked, the object changes color somehow but is related to the original color. A tweak. See how it's done there.

Even 'clickability' was determined in one shape by sampling its color using the P5JS's get function which returns an array of rgba info. Explore the app to see these ideas in action!

Toggle/Select CSS with JavaScript

• Yabba Dabba Doo
• Multiple Personalities

Some CSS features such as float, clear are difficult to visualize. Using the Yabba Dabba Doo app you can switch certain CSS rules on and off to see their effect. The Multiple Personalities app shows how JavaScript can switch out stylesheets using the DOM.

Checkboxes

• Down and Out Game
• Die Saga

Checkboxes (input type="checkbox") are used when an app requires multiple options that can be chosen simultaneously. Craft styling can even make them look like little 'on-off' switches. They are a bit pesky to code but worth it!

Color Pickers!

• Lilac Chaser
• Radial Starfields
• Blobby

Oh my. These gems let you easily select an 'infinite' number of colors and use them in your designs. They are relatively easy to use, so check out the apps we're listing here.

"Sliders"
(Range Input)

• Lilac Chaser
• Colorsliders
• Polka-Dot Packing

A 'slider' (input type='range') is a wonderful way to get user-input for a range of values in an application. There should be a way of seeing the value as the slider moves, and of course they should have a label. Many of our Processing Apps use this tech so look around and see how wonderful they are!

Text Areas

• Morse Code
• Alien Language
• Selecta

A text-field (input type='text') is great for small user-responses; textareas allow users to put in larger responses that might contain several sentences.

Text-Fields

• Blind Date Checklist
• Password Peek-A-Boo

A text-field (input type='text') is used for receiving short responses from users. Responsible programmers protect against goofy/malicious users and that is a job for JavaScript and possibly regular expressions.

Selection Menus

• Selecta
• Pondering (data-fed, DOM produced)
• Topographical Maps
• Drunkard's Walk

Writing select menus from scratch is painful so it's nice when you have options when creating them. The 'Pondering' app is great example where we crafted shortened phrases for the menu items and used the DOM to insert them.

Selecta creates HTML select menus for you when you fill out a simple form!

'Radio Buttons' for various purposes

• Style Selection
• Pondering (for font-size calculation)
• Die Saga

Radio buttons aren't the easiest gadgets to implement. They need to be 'wired up' (given 'senses') so they can respond to changes when selected. This takes JavaScript of course. The apps listed show how they may be utilized for various tasks.

Show a 'Loading' message as an app loads

• Lilac Chaser
• Rotating Polygon
• Humpty Dumpty Saga

The apps mentioned on the left required many elements to load before the app could function. To avoid any awkward preloading distractions, we were able to postpone the viewing of the 'guts' of the app until all the pieces were in place.

Utilize a color picker in a webpage

• Lilac Chaser
• Rotating Polygon

The apps mentioned on the left required the ability to choose a color and use it in a design. We were able to pull this off in an elegant manner to make the apps more flexible and appealing.

Hyperlink to a specific place in a webpage using an anchor tag

• Star Trek Logo Knockoff

This JSGS design was created by none other than our illustrious 'Tech Tools Guru.' For those unfortunate souls who don't know him, we linked his author info to a specific place in the About Us page using an anchor tag. We even used the same idea here, in the previous link! Click it and see what happens!

Click on a thumbnail image and open it in a styled 'landing' page.

• Drunkard's Walk

We utilized local storage to save information about a hyperlinked image and then loaded the information into a landing page to provide a better view of the image.

View rendered source code after JavaScript uses the DOM to change the web page

• Hello, World

The DOM can be used to add content to a webpage. What happens if you want to see the results afterwards? If you just 'View Source' you see the original code, not the re-rendered code.

Thanks to our friends at Stack Overflow we wrote a function in our utilities library that did the trick:

//10/29/22
function showRenderedBodySourceCode(){
  console.log("...showRenderedBodySourceCode...");
  var sourceCode = document.getElementsByTagName('body')[0].innerHTML;
  console.clear();
  console.log(sourceCode);
}//end showRenderedBodySourceCode
                            

Count tag elements in a div and show the counted items on the web page

Link to a particular location in an external page by using an id attribute. (See the 'Eureka' hyperlink in the Commentary in this entry).

• JSGS Shapes Gallery

We wanted to use the DOM to count how many shapes are in our library and show it above the list of shapes. Try it! it works! Details and code snippets are provided in our Eureka table.

• JSGS Interactivity

In many of our webpages we have a button that can hide/show information as a user needs it. Most of the time, the content is collapsed and then revealed when the guest clicks the button. But sometimes, the information is pertinent and we'd like the guest to see it when the page is loaded. By simply adding the class value show such content is 'open' when the page loads, and can be collapsed when the button is collapsed.

• Java String Resource

• Selecta
• Hello, World
• JSGS Home
• JSGS Shapes Gallery

• JSGS Home

• JSGS Home
• TNT Movie Clips
• Multiple Personalities

• Markdown vs Text Files
• Batman clip
• Trick Table News Entry
• Rocky and Bullwinkle Movie Clip
• Felix the Cat Movie Clip
• Alien Language

The link in the description takes us to this page and opens utility area. This was done with a call to the function: findAccordionDivToOpen(). Can you find it in the site?

To open a 'detail' we use a call to: findDetailToOpen().

Check out our jsUtilities.js that serves our whole site!

• JSGS Home

• Pondering
• Explore
• Felix the Cat Movie Clip
• Past Blasts

• Purple People Eater

• Explore

Don't hack off your users!

This page can get very long when accordion elements are open. A link at the bottom of the page to take us back to the anchor id='mastheadIcon' can keep us from having to scroll so much!