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

15.

The Object 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

6 Comments

Sort By

Login or Register to join the conversation

RSO 7 years ago

Hi, I have a problem using my Helper.prototype.btnAppear function -> "TypeError: this.$text is undefined" .

window.Appear = {
initialize:function () {
this.$btn = $('.btn');
this.$text = $('.text');
this.helper = new Helper(this.$text);
this.$btn.on('click', this.helper.btnAppear);
},
};

var Helper = function ($text) {
this.$text = $text;
};

Helper.prototype.btnAppear = function () {
this.$text.fadeToggle(); // --> this.$text create an error, when the function is called by the Appear object event
};

Could someone please tell me if something is wrong here ?

Thank's a lot!

|

MolloKhan SFCASTS RSO 7 years ago edited

Hey RSO

Hmm, your code looks good. Can you double check what is returning $('.text')

|

RSO MolloKhan 7 years ago edited

I did a check -

`
var Helper = function ($text) {

this.$text = $text;
console.log(this.$text); // --> return : Object { 0: p.text, length: 1, prevObject: Object(1) }

};

BUT

Helper.prototype.btnAppear = function () {

this.$text.fadeToggle(); // --> return : TypeError: this.$text is undefined

};
`

|

RSO MolloKhan 7 years ago edited

Here it is : Object { 0: p.text, length: 1, prevObject: Object(1) }

|

MolloKhan SFCASTS RSO 7 years ago edited

Hmm, so this.$text inside of Helper.btnAppear is undefined? It makes no sense. What happens if you do this


var Helper = function ($text) {
    this.$text = 'hi';
};

Helper.prototype.btnAppear = function () {
    console.log(this.$text);
};

Does it still says undefined? If that's the case I'm not sure what's going on, probably the browser where you are running your JS does not support the prototype? Anyways, if you can't find the solution just declare the "btnAppear" function inside the Helper constructor


var Helper = function ($text) {
    ...
    this.btnAppear = function() {
        // do your thing.
    }
};

Cheers!

|

boykodev 8 years ago

OMG, that must be the clearest explanation of JS prototypes I've ever seen! You're the best! (as always)

|

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