JavaScript Tutorial

In this tutorial, we will be creating a simple a Image Gallery web application with an image viewer modal.The Image Viewer will also have control button for navigating to the pervious or next image. We will be using Bootstrap for the design of the application and jQuery to dispaly image on the viewer modal and for navigation control functionalities.

In this tutorial, I will teach/share with you some techniques that I am using when developing a web application. This tutorial will tackle about Creating a Dynamic Confirmation Dialog using jQuery and Bootstrap Modal. This kind of web application feature can help you to reduce the number of lines you are writing and also to prevent redundancy in creating a function in your source code.

In this tutorial, we will tackle about how to Populate HTML Table from JSON File using jQuery and Ajax. This tutorial will teach to populate tables from JSON data using asynchronous HTTP (Ajax) requests. This technique can optimize your application page load by loading the data only when the page or document is ready. You can also refresh or reload the table row items without leaving the page.

In this code we will try to do Simple Text Finder using JavaScript. The program will find a certain text in a paragraph. The trick of this code is to use dot notation replace() in order to apply a highlighted color. To learn more about this, just follow the steps below.

In this tutorial, we will tackle about How to Create a Universlal Bootstrap Modal using jQuery and Ajax. The modal that we are going to create is a modal that can be reusable or can display different content from another file. This technique is very helpful to optimize your file size and this will prevent the redundancy of writting the modal elements. The universal Bootstrap Modal that we will create, will have a dynamic title, content, and size. We will use an HTML a tag () as the button that will initiate the modal.

In this tutorial, you wil learn how to create an Inline Table Row Insert, Update, and Delete using PHP/OOP, MySQL Database,and JavaScript (jQuery adn Ajax). Our main goal for this tutorial is to display data from database to HTML table that can add, editm remove table row dynamically. The table cells in the table will be editable if the user add or edit a row. The source code must have a field validator for required fields and field text types.

In this code we will tackle about Dynamically Generate Table using jQuery. The program will let you create your own table dynamically. The code uses a jQuery plugin that shortens your native scripting by allowing you to call a single line of code. To learn more about this, just follow the steps below.

Getting started:

First, you have to download the bootstrap framework, this is the link for the bootstrap that I used for the layout design https://getbootstrap.com/.

In this tutorial, I've created a simple drag and drop using jQuery and jQuery UI Libraries. In this tutorial, the user will select his/her choice and with the use of jquery, we are going to determine the user's choice. I hope this tutorial will give you knowledge on the topic.

Before we start, please download the following libraries first: