JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache CouchDB and Adobe Acrobat.
Javascript is usually combined with HTML5 to implement rich UI. Below is useful information:
-
$.ajax({ async:true, url:url, success: function(v), error: function(xhr,status,err), timeout:3000}); (Knowledge Base) — The ajax() method is used to perform an AJAX (asynchronous HTTP) request. All jQuery AJAX methods use the ajax() method. This method is mostly used for requests where the other methods cannot be used.
-
$.get( url, function(data,status) {} ) (Knowledge Base) — $.get( url, function(data, status) {} ); is the straightforward and easy solution can download remote files or API response.
-
Adding HTML content dynamically by innerHTML (Knowledge Base) — When you assign ID for HTML entity for <p> tag or <div> tag, we can dynamically update its content. You can find the object by getElementById(), and do the necessary actions into innerHTML. For instance, you can do it like document.getElementById( "element_id").innerHTML = "hello, world!";
-
Array Length in JavaScript (Knowledge Base) — In JavaScript, <array>.length returns the total number of item.
-
Array.forEach( function(currentValue, index, arr) {} ); (Knowledge Base) — forEach() method calls a function for each element in an array.
-
Browser Memory Checking (Knowledge Base) — In JavaScript, you can't directly access the amount of memory consumed by your code or variables using a standard API. JavaScript does not provide a built-in method to check the memory consumption of objects or variables. However, you can make use of browser-specific tools and techniques to monitor memory usage for debugging purposes.
-
Change text color, font size and background color in textarea (Knowledge Base) — You can assign text color, font size, background color by style sheet in textarea
-
Check if the variable is object or not (Knowledge Base) — typeof <variable name> shows its type in string in JavaScript
-
Check whether a checkbox is checked in Javascript (Knowledge Base) — Checkbox object in HTML has a property checked as boolean - it has true or false, so javascript can check its status easily.
-
Close tabs in a browser that are associated with a specific domain like "foo.com" using JavaScript code (Knowledge Base) — You can close tabs in a browser that are associated with a specific domain like "foo.com" using the following JavaScript code
-
Combo box (drop-down list) in HTML (Knowledge Base) — To implement Combo box also known as drop-down list, you should use <select> tag
-
Count number of lines in the string in Javascript (Knowledge Base) — Counting number of lines in the string in Javascript is able to implement by regular expression.
-
Create empty array and add its elements in JavaScript (Knowledge Base) — You have two main ways to create empty array: const myArray=[] or const myArray = new Array();
-
Creating a beautiful table with CSS(style sheet) in HTML5 (Knowledge Base)
-
CSS cursor Property in HTML5 (Knowledge Base) — CSS can generate a bunch of different mouse cursors:
-
Disable TinyMCE absolute to relative URL Conversions (Knowledge Base) — TinyMCE kindly converts my URLs to relative links, but eventually it breaks the content link in my case. In order to avoid that situation,
-
Drag and drop image in div tag in Javascript/HTML5 (Knowledge Base) — Drag and drop is a very common feature. It is when you "grab" an object and drag it to a different location. In HTML5, drag and drop is part of the standard: Any element can be draggable. The element you should keep in mind is draggable="true" ondragstart="func(event)" for starting drag, and ondrop="drop(event)" ondragover="allowDrop(event)" for accepting dragging.
-
Draggable DIV tag combined with Javascript (Knowledge Base) — For draggable DIV tag, what you need to keep in mind is "position: absolute" in style sheet.
-
Drawing circle (Knowledge Base) — arc( x, y, radius, sAngle=0, eAngle=0) enables you to draw a circle easily.
-
Drawing rectangle (Knowledge Base) — In order to draw rectangle, you can use rect( x, y, width, height).
-
Enable Word-Wrap with Pre Tags (Knowledge Base) —
pretags are super-useful for code blocks in HTML and for debugging output while writing scripts, but how do I make the text word-wrap instead of printing out one long line? -
Error count when loading remote JS script when considering Ad Blocker Detector (Knowledge Base) — Ad Blocker usually blocks the browser to load remote scripts and it causes error on the browser. In this case, we may able to count the number of errors when the page does not load the javascript as designed. Ad Blocker Extension blocks loading remote script in the browser based on its filtering logic, so we can assume if the Ad Blocker is installed or not by counting number of scripts blocked.
-
Extract Filename or Path from URL in JavaScript (Knowledge Base) — You can get filename and its path easily by the string operation function included in JavaScript.
-
file_exists( url ) to check availability of the file with javascript without jQuery (Knowledge Base) — XMLHttpRequest() enables you to check file availability by its methods: open, send and status.
-
Find images in HTML with javascript (Knowledge Base) — document.getElementByTagName() enables you to find objects based in tag name like img, a, ...
-
Get file extension in Javascript (Knowledge Base)
-
Get POST method result from a server in jQuery (Knowledge Base) — By jQuery, you can call server API by jQuery.ajax() in synchronus/asynchronous manner, and use that response on your code. The parameter can be added to FormData() in real-time.
-
HTML / HTML5 (Knowledge Base) — HTML5 is a software solution stack that defines the properties and behaviors of web page content by implementing a markup based pattern to it. HTML5 is the fifth and current major version of HTML, and subsumes XHTML.
-
HTML5 Canvas (Knowledge Base) — The HTML5 <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript). However, the <canvas> element has no drawing abilities of its own (it is only a container for graphics) - you must use a script to actually draw the graphics. The getContext() method returns an object that provides methods and properties for drawing on the canvas.
-
HTML5 File Upload Progress Bar (Knowledge Base) — By the combination of PHP + HTML + Ajax, you can render an file upload progress bar in your file upload forms. It will help for user to understand what is going on on server side, and the user may able to recognize if anything wrong is happen.
-
Input Text readOnly Property in Javascript (Knowledge Base) — Set a text field to read-only in javascript
-
jQuery (Knowledge Base) — jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
-
Load JSON file parsed from the text in JavaScript Variable (Knowledge Base)
-
Load remote javascript code dynamically (Knowledge Base) — A common approach load remote JS code is to use <script src="..."></script>, but sometimes you will be required to load the remote JavaScript code dynamically. Then you can simple do it by creating script element by document.createElement('script')
-
Loading javascript file conditionally (Knowledge Base) — If you need to load javascript by the case like domain name, you can do that by getElementByTagName() and appendChild(). For instance, you can run application by the screen width.
-
-
Open window in the center of the screen (Knowledge Base)
-
Paste image from clipboard in TinyMCE (Knowledge Base) — You may want copy & paste images just like Microsoft Word - it will be technically pasting from clipboard in your system memory. You can simply do it by adding paste in plugin and paste_as_text=true, paste_as_image=true.
-
pathinfo() to parse protocol, hostname and pathname from the given url path with javascript (Knowledge Base) — createElement() with javascript enables you to have all the necessary properties easily
-
Play beep sound in Javascript (Knowledge Base) — Javascript does not have a built-in function to produce a beep sound directly. However, you can achieve a similar effect using the HTML5 Audio API to play a short audio file or use the 'navigator.vibrate()' API to vibrate the device if it supports it.
-
Playback Video in HTML5 (Knowledge Base) — In HTML5, playback video is super easy by <video width="...." height="...." autoplay> tag. You can also set its source by <source src="movie.mp4" type="video/mp4"> tag.
-
Prevent web app into sleep mode by Javascript (Knowledge Base) — You need to take a look at navigator.wakeLock object if you do not want to prevent your web app into the sleep mode. Unfortunately it is not supported in Safari and Firefox, but Chrome browser supports very well.
-
react.js (Knowledge Base) — React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.
-
Recognizing a 404 not found error in an iframe (Knowledge Base) — When the iframe fails to load due to a 404 error or any other error, the 'onerror' event will be triggered, alloing you to handle the situation accordingly.
-
Redirect from an HTML page (Knowledge Base) — Page redirection is a situation where you clicked a URL to reach a page A but you were directed to another page B. It happens due to page redirection. To redirect from an HTML page, use the META Tag. With this, use the http-equiv attribute to provide an HTTP header for the value of the content attribute. The value in the content is the number of seconds; you want the page to redirect after.
-
Remove all associated child objects to avoid memory leaks (Knowledge Base) — To avoid memory leaks in JavaScript, you need to make sure that you remove all references to an object when you're done with it. This includes event listeners, timers, and any other objects that might hold references to the object you want to clean up.
-
Run a specific function by certain interval (Knowledge Base) — The setInterval() method calls a function or evaluates an expression at specified intervals (in milliseconds). The setInterval() method will continue calling the function until clearInterval() is called, or the window is closed. The ID value returned by setInterval() is used as the parameter for the clearInterval(obj) method.
-
Run a specific function by timer in Javascript (Knowledge Base) — Javascript provides a straightforward function setTimeout() to implement timer-based application easily.
-
Set text and background color in HTML body (Knowledge Base) — You can simply set text and background color by style in HTML body
-
Showing and Hiding content in jQuery (Knowledge Base)
-
Stacked bar chart for PHP (Knowledge Base)
-
Stop timer in Javascript (Knowledge Base) — clearTimeout() can stop the running timer based on the variable. Below code shows the simple example to stop running timer.
-
String to ISO Dates, Date to String in Javascript (Knowledge Base) — If you want to put date information as string like "2020-07-30" to date in javascript, bingo! - it works correctly.
-
TinyMCE (Knowledge Base) — TinyMCE is an online rich-text editor released as open-source software under the LGPL. It has the ability to convert HTML textarea fields or other HTML elements to editor instances.
-
TinyMCE example for Self-hosted release (Knowledge Base) — In order to use TinyMCE self-hosted version, you need to download the latest version of TinyMCE package. It can be downloaded at https://www.tiny.cloud/get-tiny/self-hosted/.
-
TinyMCE Sample based on TinyCloud (Knowledge Base) — TinyMCE based on TinyCloud needs to register its website to TinyMCE. You can get a guide at https://www.tiny.cloud/docs/quick-start/
-
Upload multi selected files with single array variable in PHP (Knowledge Base) — Array in HTML5 is useful when upload files with multi selection on file management dialog. Note that you should add tag (multiple="multiple") to the "file" type element. In the PHP, you will be able to manage uploaded files easily by index.
-
Upload multiple files serially and show its progress in real-time with XMLHttpRequest and PHP (Knowledge Base) — Uploading files serially is strongly needed when uploading large files to the server, because it helps user to ensure the uploaded file is correctly delivered or not, so they can do the necessary things easily.
-
Uploading images/files in TinyMCE (Knowledge Base) — You may need to upload files like images and other files together with TinyMCE in some cases. In that case, you need to 1) include 'image media' in plugins, and file_picker_callback, 2) add a hidden button for uploading files, 3) create an additional php code(upload.php) on the server.
-
Useful Javascript Snifets (Knowledge Base) — is_empty(), _size(), _() are useful javascript code snifets frequently used for development
-
Viewport for optimizing web pages for computer and tablets (Knowledge Base)