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

17.

Extending the Prototype

|

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

8 Comments

Sort By

Login or Register to join the conversation

SigmaTechnology 7 years ago edited

As touched upon at the end of the video, if you want to instantiate RepLogApp for multiple tables, assuming they've got the same class, you can do so as follows:


$('.js-rep-log-table').each(function(){
 new RepLogApp($(this));
});

1 |

sdewijs 7 years ago

I ran into something weird when calling new RepLogApp($wrapper). In my constructor in RepLogApp.js I instantiate the object like window.RepLogApp = function($wrapper) {}; When I instantiate the new RepLogApp($wrapper) object, there is an error in the console: jquery-3.1.1.min.js:2 jQuery.Deferred exception: RepLogApp is not a constructor TypeError: RepLogApp is not a constructor

Which is weird because the RepLogApp() object is setup as a constructor. When I instantiate it as var RepLogApp = new window.RepLogApp($wrapper); The constructor is initiated properly. Is there some detail I'm missing here?

|

sdewijs sdewijs 7 years ago

Just noticed when I call the RepLogApp() constructer outside $(document).ready(); it is initialized without problems:

|

weaverryan SFCASTS sdewijs 7 years ago edited

Hey sdewijs!

Hmm, that IS weird! So basically, when inside of $(document).ready(), new RepLogApp($wrapper) does not work, but new window.RepLogApp($wrapper) does work, is that correct?

Unless you (somehow) have a local (non global) variable in scope called RepLogApp, RepLogApp and window.RepLogApp should be identical. You could try console.log() each of these to see what each is. The fact that it works outside of the $(document).ready() is another mystery (but probably related): putting code inside this block basically just means its execution is delayed slightly. But, it should not change whether or not some global variable is available.

You could also try copying our version of RepLogApp.js completely (you can get it from the script/code blocks on this page) to see if there is some small bug in your version. I can't think of what would cause this - especially because the self-executing block should prevent any weird variables from "leaking" out. But, as you said, this is a weird situation!

Cheers!

|

sdewijs weaverryan 7 years ago

Yes! Changing the variable name inside document.ready does make a difference.And now it's clear what I did wrong. I wrote var RepLogApp = new RepLogApp($wrapper); with a capital R and in the course code it is var repLogApp = new RepLogApp($wrapper); The devil is in the details as always :)

2 |

weaverryan SFCASTS sdewijs 7 years ago edited

Nice catch! Really, we don't even need the repLogApp variable - so maybe we should have just done new RepLogApp($wrapper) with no assignment. Glad you figured it out :).

Cheers!

|

jian su 8 years ago

For the $.extend is this jquery method? In JavaScript there is also _.extend also do the same thing?

|

Victor SFCASTS jian su 8 years ago

Hey Jian,

Yes, jQuery has extend() method, see the docs: https://api.jquery.com/jque... . So $.extend() calls this jQuery method if $ is an object of jQuery of course. JavaScript also has similar method, but it's called extends() (note the "s" at the end) - here's the docs: https://developer.mozilla.o... . But this JS methods is a part of ECMAScript 2015 only.

Cheers!

|

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