Chapters

33 Chapters | 3:02:08 |

01

Lift Stuff! The js- Prefix

7:39
02

(document).ready() & Ordering

4:45
03

All about Event Bubbling

4:31
04

The Event Argument & stopPropagation

3:07
05

The DOM Element Object

6:35
06

The Magical this Variable & currentTarget

4:30
07

A Great Place to Hide Things! The data- Attributes

5:48
08

Organizing with Objects!

5:08
09

"Static" Objects & the this Variable

6:05
10

Getting to the bottom of the this Variable

4:29
11

Fixing "this" with bind()

6:08
12

Immediately Invoked Function Expression!

7:56
13

The window Object & Global Variables

6:12
14

Instantiatable Objects & Constructors

4:17
15

The Object prototype!

3:32
16

prototype Versus __proto__

7:02
17

Extending the Prototype

2:34
18

AJAX Form Submit: The Lazy Way

5:41
19

Old-School AJAX HTML

7:17
20

Delegate Selectors FTW!

3:45
21

Proper JSON API Endpoint Setup

4:46
22

POSTing to the API Endpoint

3:59
23

Handling JSON Validation Errors

6:40
24

Clearing the Form, Prepping for a Template

3:56
25

JavaScript Templating

5:57
26

Full-JavaScript Rendering & FOSJsRoutingBundle

7:26
27

All About Promises!

8:11
28

Catching a Failed Promise

5:58
29

Promise catch: Catches Errors?

6:40
30

Making (and Keeping) a Promise

7:57
31

Promise Chaining

3:43
32

SweetAlert: Killing it with Promises

5:11
33

Sweet Alert: Create a Promise!

4:45

> JavaScript Fundamentals > JavaScript for PHP Geeks

Buy Access to Course

08.

Organizing with Objects!

|

Autoplay

Keep on Learning!

If you liked what you've learned so far, dive in! Subscribe to get
access to this tutorial plus video, code and script downloads.

Start your All-Access Pass

Buy just this tutorial for $12.00

Previous Chapter

Next Chapter

With a Subscription, click any sentence in the script to jump to that part of the video!

Login Subscribe

Login or register to check out the script

9 Comments

Sort By

Login or Register to join the conversation

Akavir S. 6 years ago

Hello knp :)
Is it possible to pass variables into the event listener callback ?

|

Victor SFCASTS Akavir S. 6 years ago

Hey Virgile!

Hm, do you have an example of the code? How does your code looks like and what you're trying to do? Probably you can just pass variables as arguments to the callback?

Cheers!

|

Akavir S. Victor 6 years ago edited

Hello victor, thanks for taking care of my problem
Here is a ajax call

$.ajax({
        url: "localhost/start",
        method: 'POST',
        data: {link: window.location.pathname, priority: priority},
        success: function (response) {
            $('#target').html(response)}
    })```



When i do not set a static function in my object everything works fine. 
But when i do so

success:function (response) {

$('#target').html(response)

},`
success:myobject.success(this.response)`

my response is undefined ..

|

Victor SFCASTS Akavir S. 6 years ago edited

Hey Virgile,

The method will be called by a caller somewhere in jQuery internals and so the proper argument will be passed by caller as well. You should not worry to pass the argument because you don't have it yet. Also, if you want to set a function - you should not add parentheses to it, otherwise it will be called instead of set. Try this:


// Declare a function with an argument that will be passed by a caller on this function call later.
success: function (response) {
    $('#target').html(response)
},

// and then use it
    $.ajax({
        url: "localhost/start",
        method: 'POST',
        data: {link: window.location.pathname, priority: priority},
        success: myobject.success
    })

Please, note there is no "()" at the end of "myobject.success" - we need to set that function instead of call it right now, it will be called later.

Cheers!

|

Graymath technology 7 years ago

Hi Max
the wrapper object that is passed why do we need to make it a property can't we directly work on it? Instead of $this.wrapper. everywhere we could just work with $wrapper?

|

Victor SFCASTS Graymath technology 7 years ago

Hey Abdul,

Because we'll use that wrapper on other method of RepLogApp, e.g. see handleRepLogDelete() in the last code block. So if we don't set it on a class property, we won't be able to use it there, because we can't pass the wrapper into that method.

Cheers!

|

Max S. 8 years ago

Hey guys!

As always amazing work - highly instructive and fun to code along!

There is no equivalent of a __construct() function in js, right? As well call initialize explicitly...

|

Victor SFCASTS Max S. 8 years ago

Yo Max,

Thanks a lot! And that's a really good question. Well, yes and no :) Actually, JS has ability to add constructors, but not in that form we see it in PHP classes. Just go further and you will see how to add a constructor... but if you can't wait - take a look at: https://knpuniversity.com/s...

Cheers!

-1 |

Max S. Victor 8 years ago

Thx! I'm going to hit that one soon ;)

|

This tutorial uses an older version of Symfony... but since it's a JavaScript tutorial, the concepts are still ? valid!

Symfony 3

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": "^7.2.0",
        "symfony/symfony": "3.1.*", // v3.1.10
        "twig/twig": "2.10.*", // v2.10.0
        "doctrine/orm": "^2.5", // v2.7.1
        "doctrine/doctrine-bundle": "^1.6", // 1.10.3
        "doctrine/doctrine-cache-bundle": "^1.2", // 1.3.2
        "symfony/swiftmailer-bundle": "^2.3", // v2.4.0
        "symfony/monolog-bundle": "^2.8", // 2.12.0
        "symfony/polyfill-apcu": "^1.0", // v1.2.0
        "sensio/distribution-bundle": "^5.0", // v5.0.22
        "sensio/framework-extra-bundle": "^3.0.2", // v3.0.16
        "incenteev/composer-parameter-handler": "^2.0", // v2.1.2
        "friendsofsymfony/user-bundle": "~2.0@dev", // dev-master
        "doctrine/doctrine-fixtures-bundle": "~2.3", // v2.4.1
        "doctrine/doctrine-migrations-bundle": "^1.2", // v1.2.1
        "composer/package-versions-deprecated": "^1.11", // 1.11.99
        "friendsofsymfony/jsrouting-bundle": "^1.6" // 1.6.0
    },
    "require-dev": {
        "sensio/generator-bundle": "^3.0", // v3.1.1
        "symfony/phpunit-bridge": "^3.0" // v3.1.6
    }
}

Previous Chapter

Next Chapter