JavaScript, jQuery and Ajax
3.9 (30 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,548 students enrolled
Wishlisted Wishlist

Please confirm that you want to add JavaScript, jQuery and Ajax to your Wishlist.

Add to Wishlist

JavaScript, jQuery and Ajax

Learn JavaScript, jQuery and AJAX basics filters and calls to send data to your MYSQL server with no need to refresh
3.9 (30 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,548 students enrolled
Created by Eng Ali Mehdy
Last updated 3/2016
English
Current price: $10 Original price: $20 Discount: 50% off
1 day left at this price!
30-Day Money-Back Guarantee
Includes:
  • 4 hours on-demand video
  • 15 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Learn JavaScript Basics
  • Sending Data through AJAX to the server
  • Learn jQuery basics
  • Create jQuery events
  • Create AJAX filters
  • Create jQuery animations and effects
  • Add Events from Database into FullCalendar jQuery Plugin automatically
  • Append data to web page with no refresh
  • Use JavaScript for form validations
  • Use bootstrap classes for forms and tables
View Curriculum
Requirements
  • You should be familiar with databases and PHP
  • Download notepad++ or Sublime text 2
  • Download wampserver
Description

JavaScript is an awesome client side language that allow a communication between a website and web application with users.

In this course, you will learn JavaScript basics, and how to make interactive web pages.

Then, we will learn jQuery basics, and how to use jQuery plugins like fullcalendar

At the final section, this course teach junior web developers, or programming enthusiasts, how to send data through jQuery and AJAX, to server and make change in data, with no need to refresh the page.

To start this course, you should download wampserver, and sublime text 2, or you can use your preferred editor.

We are not going to learn how AJAX works using XML requests and responses. Our main goal is to send data with no page reload or refresh.

If you want to add interactivity and simplicity, to your web application, using AJAX, and reduce your bandwidth consumption, this course might be for you.

At the end, you will learn how to create AJAX filters, to get data according to specific criteria.


Who is the target audience?
  • This jQuery course is meant to be for newbies in jQuery and AJAX
  • This course is for Beginners in JavaScript
  • If you know how to send data through ajax and append them, don't take this course
  • This course is for web developers who need a quick refresher of jQuery and AJAX
  • This course is for students who wants to make search filters like eCommerce websites
  • If you don't know how to work dynamically with fullCalendar Plugin, this course might be for you
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 60 Lectures Collapse All 60 Lectures 04:09:55
+
JavaScript Basics (For beginners)
15 Lectures 01:01:07

In this lecture, we will take a simple introduction about JavaScript and why we should use it in our web development.

Preview 01:53

In this lecture, we will see how JavaScript scan operators and which one to execute first. This lecture will help you, in the future, when you start typing advanced scripts, to manipulate errors and unwanted results.

Order and Precedence
02:30

In this lecture, we will learn about Incrementation and Decrementation. And we will see the different types of them, and how the result would be changed from one to other.

Incrementation and Decrementation
03:04

In this lecture, we will see the difference between NULL and Undefined. You will see those 2 outputs a lot of times, in your programming career, and you should understand the difference between them.

Null and Undefined
02:52

In this lecture, we will see why JavaScript is more advanced programming language than any other one, and why we call it dynamic.

Dynamic Scripting
01:09

In this lecture, we will learn IF ELSE conditions and the difference between equal and strict equal.

Conditions and Equality Types
02:52

In this lecture, we will learn multiple type of Loops. We will start with FOR loop, then we will see an example about WHILE loop, and finally, the DO WHILE loop.

Loops
05:07

Some people think that arrays are simply used for mathematical operations. In JavaScript, Arrays are used in different and important fields. Ajax and JSON that we will learn about them in our next lessons, are typical example about where and how arrays are used and in which context.

Arrays
05:17

All of our works with JavaScript, jQuery and Ajax, will be based on how to get and send data from and to our elements in a page. A document obejct module DOM is generated when a page loads, and we can access each element of this DOM using JavaScript.

DOM manipulations
10:38

Functions in JavaScript are used and combined with events. And before we start learning about events, we should know how to create and run a function.

Functions
02:30

In this lecture, we will learn multiple type of events, and how to apply them into our elements.

We have onblur(), onchange(), onkeyup(), onkeydown(), onkeypress(), onload(), onclick(), ondblclick() and other events, that we can use in JavaScript.

Events
05:00

In this lecture, we will learn how to get the initial values of the css computed style of any DOM element in our current page. And then how to change them into new values.

Computed Styles
04:51

In this lecture, we will create a print button using outerHTML, and document write() function.

Exercise - Print an area using outerHTML
04:52

In this lecture, we will see how to load an external JavaScript file into our page, and how to run it using specific events.

JavaScript External files
01:30

In this project lecture, we will learn how to create a form validation function. A validation function help users to properly fill an electronic form, using specific criteria already defined by a programmer.

Project - Form Validation
07:02
+
The Old Way
6 Lectures 27:03

In this lecture, we will see what we are going to learn in this course. We will start from the old way section, where we see why we shouldn't use it anymore. Then, in section 2, we will learn some JavaScript and jQuery scripts and events, that we may need them in AJAX. And the final section will be about Ajax, and how to send data to server through it, without reloading web page.

Preview 02:22

In this lecture, we are going to create a database and a table to work with all along this course. If you are not familiar with MySQL workbench, you can always work with wamp and xamp (for windows) or mamp (for mac).

Setting up the workspace
02:37

In this lecture, we are going to create the project folder inside our server. Create a new folder inside wamp directory folder (www).

Creating server folder
01:24

We will include bootstrap in our project so we can see a well designed interface while, we are working with jQuery and Ajax. So download bootstrap library and in the next lectures, you will be able to see the difference, when using it in a web page.

Bootstrap and adding table
05:24

In this lecture, we are going to display all data inside our database into the web page.

Getting data into page
09:20

In this lecture, we are going to insert and add some data and see how the server needs to refresh the page so we can see it again.

Preview 05:56
+
jQuery and DOM manipulations
6 Lectures 24:45

In this lecture, we are going to see how to access DOM objects using JavaScript.

HTML and DOM manipulations
03:14

In this lecture, we will learn how to access DOM object values.

Accessing Values
02:06

In this lecture, we will learn how to make a simple form validation.

Form Validation
03:24

In this lecture, we are going to refresh our memory with the ready() event in jQuery.

Preview 03:00

In this lecture, we will learn the click() and the change() events, on jQuery. Those events are easy, and essentials to learn.

jQuery - on click and on change events
04:47

In this lecture, we will learn Append, prepend, after and before functions. Those functions, will help us, to add data to the current web page with no reloading.

Append, prepend, after and before
08:14

This quiz will cover some JavaScript and jQuery scripts and events, that we didn’t take a lecture about them. So you may need to search google for it and answer. At the end, you will learn and understand some new jQuery events.

jQuery events Quiz
10 questions
+
jQuery Projects and Animations
8 Lectures 36:00

In this lecture, we will learn the slideToggle() function that help us to show and hide an HTML element.

Toggle Animation
04:17

Animate() function help us to change position, width, height, opacity, and other features, of an HTML element.

Preview 05:58

Delay() function help us to put a timer between consecutive animation. We will use the fadeIn() and fadeOut() functions to show how delay() works.

Delay Function
02:12

Stop() function will help us to stop an animation in any stage of it.

Stop Function
01:37

In this lecture, we are going to make a simple jQuery effect and animation for form validation, where if a text box is empty, it will fade in and out with changing border color.

jQuery Project 1 - Animation
03:23

In this lecture, we will learn how to use .keyup() and .keydown() functions in jquery, and we will make a simple project about how we confirm if a new password is equal to the confirmation text box using .keyup().

jQuery Project 2 - New Password Confirmation Using .keyup()
09:07

In this project, we will learn how to get key codes of our keyboard and make some conditions using them.

jQuery Project 3 - Using Key Codes
03:50

In this lecture, we will learn about .on() and .off(). Then we will make a simple project about how we can set a clickable button off.

jQuery Project 4 - Set a button off using .on() and .off()
05:36
+
AJAX
8 Lectures 19:58

This lecture will be an introduction about AJAX and why we should use it in our web development projects.

Why we use AJAX
02:00

In this lecture, we will specify the server code URL, where we will send our data.

Sending data into URL
04:15

Their is 2 types to send data through: POST and GET. In this lecture, we will learn how to define the type inside AJAX script.

Types
01:12

In this lecture, we will learn how to send data as an object into our PHP server code using Ajax.

Data to send to PHP
01:17

We have 3 main type of data we could return when finishing executing PHP server code: text, JSON, and HTML. In this lecture, we will concentrate on the "text" type.

Preview 01:40

In this lecture, we will make some modifications in our form, where we will change the button type, and remove the method and action from HTML for, then we will write the php server code.

PHP server code
04:25

In this lecture, we will type the error function, where when data not added for some reason.

Error function
01:02

In this lecture, we will see how to append data into our page, with no more refresh and reload.

Append Data and no more reloads
04:07
+
Ajax Project
6 Lectures 14:50

This lecture is a simple and fast introduction about what should you have at the end of this exercise.

Introduction
00:56

The next step is to generate buttons for each row in the table. So this lecture will show you how to do that.

Adding buttons
01:27

In this lecture, we are going to write the PHP delete code.

PHP code
03:24

In this lecture, we are going to write the Ajax script.

Ajax Script
05:56

In this lecture, we will see the result and we will take another exercise

Result
01:20

In this lecture, we will resolve the exercise about how to add a button with the new appended line.

Appending a new button
01:47
+
JSON and HTML
4 Lectures 12:18

In this lecture, we will create our first json string and parse it into an object.

Introduction to JSON
03:34

In this lecture we will learn how to type a JSON array and access it.

JSON array
02:26

In this section we will learn how to use JSON as datatype in our AJAX script, and what changes we should do before.

AJAX and JSON
03:59

In this lecture, we will learn how to make changes and echo HTML data from our PHP server code into AJAX script.

Datatype HTML
02:19
+
AJAX Filters
4 Lectures 35:09

Every filter should have a field inside database table, so before we start scripting, we need to make some changes to our database and web page.

Setting Up database and workspace
09:10

In this lecture, we are going to specify what we need to send from AJAX to PHP search page, and then what we should return back.

AJAX Filters - Part 1
12:04

In this section, we should know what are the basic conditions to set and use. We should take all the possibilities in consideration. And we can use only one AJAX script with multiple PHP IF statements.

AJAX Filters - Part 2
07:50

In this lecture, we will combine multiple AJAX filters together to get more specifc data according to a specific criteria.

Combining AJAX Filters
06:05
+
Project 1 - FullCalendar Plugin And AJAX
3 Lectures 18:45

In this part 1, we will take an introduction about what is FullCalendar and how to use it, in our web development.

Preview 05:05

In this lecture, we will get data from MySQL database using PHP, and fetch them into JSON array, to be used by AJAX script.

Part 2 - Fetching Data using JSON
06:17

In this final part of this project, we will get the json array returned from PHP code into AJAX, and then set it inside FullCalendar events, to be generated automatically.

Part 3 - Adding Events into FullCalendar
07:23
About the Instructor
Eng Ali Mehdy
4.0 Average rating
125 Reviews
2,623 Students
5 Courses
Electrical and Telecommunications Engineer

I am an Electrical, Telecommunications and IT engineer graduate with a Master degree since 2013, with experience in designing software and web apps for telecommunication purposes, designing household electrical schematics and designing electrical panels. I have an advanced experience programming industrial microprocessors PLC. And now I am an Udemy Premium Instructor.