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
4.0 (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,539 students enrolled
$19
$20
5% off
Take This Course
  • Lectures 60
  • Length 4 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 2/2016 English

Course 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.


What are the requirements?

  • You should be familiar with databases and PHP
  • Download notepad++ or Sublime text 2
  • Download wampserver

What am I going to get from this course?

  • 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

What 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

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: JavaScript Basics (For beginners)
01:53

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

02:30

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.

03:04

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.

02:52

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.

01:09

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

02:52

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

05:07

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.

05:17

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.

10:38

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.

02:30

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.

05:00

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.

04:51

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.

04:52

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

01:30

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

07:02

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.

Section 2: The Old Way
02:22

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.

02:37

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).

01:24

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

05: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.

09:20

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

05:56

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.

Section 3: jQuery and DOM manipulations
03:14

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

02:06

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

03:24

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

03:00

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

04:47

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

08:14

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.

10 questions

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.

Section 4: jQuery Projects and Animations
04:17

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

05:58

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

02:12

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

01:37

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

03:23

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.

09:07

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().

03:50

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

05:36

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.

Section 5: AJAX
02:00

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

04:15

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

01:12

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.

01:17

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

01:40

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.

04:25

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.

01:02

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

04:07

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

Section 6: Ajax Project
00:56

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

01:27

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

03:24

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

05:56

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

01:20

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

01:47

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

Section 7: JSON and HTML
03:34

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

02:26

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

03:59

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

02:19

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

Section 8: AJAX Filters
09:10

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.

12:04

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.

07:50

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.

06:05

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

Section 9: Project 1 - FullCalendar Plugin And AJAX
05:05

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

06:17

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

07:23

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.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Eng Ali Mehdy, 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.

Ready to start learning?
Take This Course