Javascript Tutorial for Beginners

Reading Google Sheets Data using JavaScript and Google Sheets API Tutorial

In this tutorial, we will tackle about Reading Google Spreadsheets Data using JavaScript and Google Sheets API. The tutorial aims to provide the IT/CS students and new programmers a reference for learning to integrate their web applications with Google APIs specifically using Google Sheets and JavaScript.

Bulk Deletion using Checkbox in PHP and JavaScript Tutorial

Introduction

In this tutorial, you will learn how to Create a Bulk Deletion Feature for web applications using HTML Checkbox, PHP, MYSQL Database, JavaScript, and jQuery/Ajax. This tutorial aims to provide a reference or guide to students or new programmers for the integration of PHP, MySQL Database, and JavaScript to develop an effective and interactive web application. Here, snippets and sample program web application source code are provided.

Sorting Array and Object Data in JavaScript Tutorial

Introduction

In this tutorial, I will show you How to Sort Array and Object Data in JavaScript. This tutorial's main goal is to provide the new programmer or students with a reference to enhance their programming capabilities using JavaScript. Here, I will provide some examples for sorting array and object data. An example source code that demonstrates the sorting of an array and object is also provided.

Cropping an Image before Saving using JS, jQuery, and PHP Tutorial

Introduction

In this tutorial, I will show you How to Crop an Image before Saving it using JS, jQuery, and JS Library. We can achieve this kind of feature for our web application by using Croppie Library. The tutorial aims to provide the student and new programmers a reference to learn with to enhance and develop their programming skills using JavaScript and PHP Language. Here, snippets and sample source codes are provided.

Video Element Picture-In-Picture in JavaScript Tutorial

In this tutorial, I will show how to Create a Picture-In-Picture Feature for your website's videos. The Picture-In-Picture is a feature that allows your user to stream the video within an inset window on your screen. With this, the user can continue reading the other content of the page while the video still playing in a window of your screen. Users can also continue to stream the video using the said feature while they are at the other window.

Creating a Simple Form with Multiple Step and validation using JavaScript and jQuery

In this tutorial, I will show how to Create a Simple Form with Multiple Step and validation using JavaScript and jQuery. The goal of this tutorial is to give you an idea to create the said form by Manipulating the HTML Elements. Here, we will be creating a simple form that contains a single form but has multiple steps. Each step has some required fields and some have field type validation. In the form, the user cannot proceed to the next step if there's an invalid field in the visible step.

Creating a Word Counter App in JavaScript Tutorial

In this tutorial, I will show how to create a simple Word Counter App using HTML and JavaScript. The main goal of this tutorial is to give you ideas or techniques how to manipulate html content text and more. This web application idea or techniques can be useful for your future web application projects such as Content Management Systems also known as CMS. The application only uses pure JavaScript codes in acheiving the main features.

The scripts are written in:

Creating a Simple Counter in JavaScript Tutorial

In this tutorial, I will share with you a simple web app written in HTML, CSS, and JavaScript. This tutorial objective is to give new programmers, especially the students a very simple idea of how do simple applications are being made using JavaScript. Here, students can learn about JavaScript's click event listener, page onLoad, and updating textContent. I will be providing a source code of Simple Counter App.

Dynamically Add and Remove Form Item using jQuery clone() Method Tutorial

In this article, I will be discussing about how to create an Add and Remove Form Item Feature in web-application using jQuery's clone() method. This kind of feature is commonly applied to a project which has a process of saving multiple data at once in the database. There are lots of ideas and techniques you can create to achieve this feature with the help of jQuery, but I found this solution more simple and easiest in my experience.

Web Text-to-Speech Tutorial using Web Speech API Synthesis

This is a simple tutorial that will teach how to convert Text into Speech in web applications. In order to do this, we are going to use the Web Speech API Interface Speech Synthesis. The Web Speech API will allow you to convert the text into incorporate voice data into web projects.

In this tutorial, I will be providing a simple web application that allows users to write a text message and converts it into speech. The application will re-display the text message below the form. Each word spoken will be highlighted.