OOP in JavaScript and DOM in JavaScript are not new techniques, they are becoming more popular widely in the world of programming languages. And the JavaScript programming language also supports OOP very well.
Obviously, jsB@nk does not want to stay out of this trend, so begin this post, I'll try to present you the JavaScript code examples built by OOP skills.
And this is first JavaScript OOP code example to create form elements - no new idea - but please see the live demo to learn new JavaScript OOP skills.
Load a web page with this implemented JavaScript code then your reserved input field will be filled by current date - this is idea of script's author. This JavaScript may help you in the manner of asking users to insert current date, for the invoices, mettings, ...
This is a good JavaScript code example to know more date in JavaScript. If you need a JavaScript current time, please check:
- Basic Date Display 2
- Current Date & Time (Short)
- Current Date & Time (Long)
- Simple Current Date script
Sometimes in the long content, we have to make our audiences feel comfortable to read/follow. And we usually have many solutions for this task, and herein this JavaScript code example, I would like to present a simple way: automatically filling the background color of paragraphs.
This JavaScript code can change background color of all HTML text-container elements when you pass them (edit source code). It's very easy to use and modify!
Let's use this simple JavaScript example code, CSS button code to replace the boring default button of browsers by Simply Button v2. These super sexy buttons have a lot of advantages from the default buttons:
- Buttons size to fit your any text.
- There are 3 states: Inactive, Active, and Hover.
- They look and behave the same way in every browser and operating system.
- The do not need the JavaScript to work, they work with just the CSS button style.
- Way better looking CSS button codes than what anyone else can do with XHTML/CSS, isn’t that reason enough?!
You can use this JavaScript to add a counter of limitation to your inputs such as <input>
and <textarea>
on your web pages. Just define the limitation for each input, the script does all remaining everything. Very easy to use and customize, let try it now.
This JavaScript code is for dragging and dropping content cells of table. Table can contain colspan and rowspan cells. Large tables will be autoscrolled if dragged object come close to the page border. Dropping to some table cells can be forbidden with setting className="forbid"
.
In order to display detailed information about some object; such as member or product; you can use simple JavaScript code. This is upgraded version of Click Radio Button to View Information; this script display image for each item.
If you want to save the space on your web pages, let use this JavaScript. When users click any radio button, its corresponding information is automatically displayed. A simple and quick JavaScript but useful and high customization.
Also see: Click Radio Button to View Information with images
Let use this multiple select script if you want to create select boxes that relate to anothers, by onchange event. Choose a value in the first select options and the script will precess and display the available select values in the second box to match your selection automatically. Easy to use, with full comments in source code.
You can also see more for multiple select, dynamic dropdown,...
Use this JavaScript to make sentence words that users enter correctly, meaning the beginning of each sentence is capitalized, the rest of the sentence is lower case, if they are not proper noun. Let enter some word sentences, sentence examples to test it.