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 >

Course Overview

JavaScript for PHP Geeks

Buy Access

4540 students
EN Captions
EN Script
Certificate of Completion

Your Guides

Ryan Weaver

Leanna Pelham

About this course

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

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
    }
}

You already know and write JavaScript... or really jQuery. But as JavaScript takes on more of your life, it's time to take your game to the next level! In this tutorial, we'll do just that by diving into a bunch of pieces of JavaScript you may "kinda" understand, or which might be new to you altogether! This includes:

Event Bubbling & DOM Events
The DOM Element Object
JavaScript Objects
Instantiating objects with the prototype
Understanding the mystical "this" & .bind
Understanding Self-Executing Functions
Delegate Selectors will save your Life
Client-side templating
PROMISES!

Let's not just write JavaScript, let's understand what's going on!

Next courses in the JavaScript Fundamentals: Modern JavaScript section of the JavaScript Fundamentals Track!

JavaScript for PHP Geeks: ES6/ES2015 (New JavaScript)

19 Videos | 1:38:39 | 0%

JavaScript for PHP Geeks: Webpack for Module Loading Awesomeness

37 Videos | 3:43:03 | 0%

40 Comments

Sort By

MolloKhan SFCASTS 5 years ago

Is there any aproximated release date ?

5 | Reply |

weaverryan SFCASTS MolloKhan 5 years ago

Not quite yet - it's a placeholder for the future. It could be in Feb, but not earlier unfortunately. But I'll take this as a vote to make it sooner rather than later :)

2 | Reply |

MolloKhan SFCASTS weaverryan 5 years ago

I like that! Cheers

1 | Reply |

krabello 5 years ago

Are you still planning to do this? :)

1 | Reply |

weaverryan SFCASTS krabello 5 years ago

It's been a lower priority, but definitely :). Sorry for the delay - there's so much tech cover!

1 | Reply |

krabello weaverryan 5 years ago

I understand, thanks for getting back to me!

| Reply |

Robert 5 years ago

Is this still relevant and up to date ?

| Reply |

Victor SFCASTS Robert 5 years ago

Hey Robert,

Yes, it’s still relevant and up to date. But you may also want to look at JavaScript ES6 course to bring more features in your JS code. If you have some more specific questions - don’t hesitate to ask.

Cheers!

| Reply |

Daniel 5 years ago

I am waiting for this course. This is great idea.

| Reply |

Hassan 5 years ago

i cant find where to download the course files ?

| Reply |

MolloKhan SFCASTS Hassan 5 years ago edited

Hey Hassan

You can download almost everything!
Course code, chapter video, and course script, but first you need to select a course-chapter, and in that section will appear a download button at the right upper corner

Cheers!

| Reply |

Syed 5 years ago

Nice! Been looking forward to this one. Sounds like it could be similar to Kyle Simpson's You Don't Know JS books/workshops (which I recommend). Also excited about the Webpack/React videos. Added to the list of things to watch along side many...many...others. :(

| Reply |

abyssweb 5 years ago

Is this course really accessible for a really old JS developer, like, I haven't really touch JS for a loooong time (like, years), and I may be totally rusty ?

| Reply |

Victor SFCASTS abyssweb 5 years ago

Hey Virginie,

Well, for those years probably exactly those changes (we're talking in this course about) had been made, so I think this course fits well for you. Anyways, I think you can manage it, so just try and if it's really hard for you - go to refresh your knowledges about JS in general first.

Cheers!

| Reply |

Yan Yong 5 years ago

Stopped at chapter 26, the promise chapters are pack of new information, it is too much for me. Everything else went really well though. Thanks guys

| Reply |

Victor SFCASTS Yan Yong 5 years ago

Hey Yan,

Good progress, well done!

Cheers!

| Reply |

Faizan Akram Dar 5 years ago

Our subscription is expiring soon in a week I suppose. Can you please release this course so that we can benefit from it.

| Reply |

weaverryan SFCASTS Faizan Akram Dar 5 years ago

Hi Faizan! Unfortunately, this tutorial won't be ready this week - it's low on our priority list. However, when we *do* release it, even if you don't have a subscription at that point, the script and code blocks are always 100% free. If you have any questions, feel free to message us.

Thanks!

| Reply |

Miloud B. 5 years ago

Hi team i want to buy this course, but there are subtitles ? i don't see CC with the first free video ? whyyyy !

do you have them please?

| Reply |

Miloud B. Miloud B. 5 years ago edited

Hi Miloud i bought it anyway, did you have subtitles for videos please !

| Reply |

MolloKhan SFCASTS Miloud B. 5 years ago edited

Hey Miloud

At the moment we do not count with subtitles for this tutorial. We are sorry for any inconvenience :(
Probably we will offer them in the future, but I can't promise any release date

Have a nice day

| Reply |

weaverryan SFCASTS MolloKhan 5 years ago edited

Hey MolloKhan!

Actually, we just added subtitles to this video. So, I hope it helps! We *always* add subtitles for new videos, but we don't typically add them for videos that were released before our subtitle system. However, we are happy to do it if someone asks.

Cheers!

| Reply |

Miloud B. weaverryan 5 years ago edited

weaverryan weaverryan Hi, thanks a lot,
personally, the subtitles helps me a lot,

good luck guys

1 | Reply |

Paweł C. 5 years ago

I don't understand. There are 3 series "JavaScript for PHP Geeks", Should I watch all three?

| Reply |

MolloKhan SFCASTS Paweł C. 5 years ago edited

Hey Paweł C.

They are related, specially about the project that's been built, but you don't have to watch them all if you don't want/need to. You can start at any course you want and just download *that* course code.
If you have any other doubt just let me know!

Have a nice day :)

| Reply |

Shairyar Baig 5 years ago

Looking forward to this tutorial.

| Reply |

julien moulis 5 years ago

O my dog... I'm lost 😂 I thought that I knew JS and Jquery enough... Well I guess No... I search on your courses a JS course for newbee, but It seems that there's none. So which site free or no, will you advise me to learn enough to get good enough to follow this course? And in the end becoming a knp ninja 😂
Thanks

| Reply |

weaverryan SFCASTS julien moulis 5 years ago edited

Yo julien moulis!

Haha, yea, this is definitely assuming you're at a certain level and want to jump up from there :). I haven't gone through any beginner JS courses personally, but I typically really like Treehouse - this track might be interesting - https://teamtreehouse.com/t... - plus possibly some other specific addons :). I'm curious (if this question even makes sense) - which parts in the tutorial really started to get tricky for you?

Cheers!

| Reply |

julien moulis weaverryan 5 years ago

Hey! My favorite teacher!!! There's not really a specific part. I spend more times to understand the jquery syntax than working on the api itself. As soon as I go back on my own app and then try to apply my thought new skill... then I go eating a cookie... Man I got fat!! 😂 No more serioulsy I think the oop jquery/Javascript and Promise killed me... but I'll be back... I realized how essential it is to masterize api/Ajax et tutti quanti.

| Reply |

weaverryan SFCASTS julien moulis 5 years ago edited

Hahaha :) And hey back! Thanks for the feedback - the OO JavaScript and Promise stuff is definitely the hardest, and the Promise stuff is probably less important (you'll keep seeing it, eventually it'll sync in). Bonus: in the next tutorial about ES2015, we introduce the new class syntax - it's a "sugary" syntax on top of the "prototype object model" that looks really familiar to us PHP devs. You still ultimately should grok the prototype stuff, but that class syntax is a nice bridge to a place more familiar :).

Cheers!

| Reply |

Raimen 5 years ago

Waiting for this course !

| Reply |

Andrei-V 5 years ago

Great screencast, but why it takes it so much time to appear entirely? )

| Reply |

weaverryan SFCASTS Andrei-V 5 years ago edited

Sorry about that Andrei V.! We did hit a snag last week - not something we normally like to do! We'll try to be better in the future :)

1 | Reply |

ahmedbhs 5 years ago

java script and php , why not symfony and jquery ?

| Reply |

Victor SFCASTS ahmedbhs 5 years ago

Yo Ahmed,

Actually, there's a Symfony framework behind this course, we just do not focus on it to make this course more PHP-framework agnostic. And Symfony topic is a separate screencast, even more than one screencast, and we have a whole track for this: https://knpuniversity.com/t... .

What about jQuery... well, jQuery is just library, which is a wrapper for some most frequently used operations, so no matter do you write on plan JavaScript, use jQuery on any other JS library - you still write plain JS code a lot! So do it in a right way is very important to prevent bad code quality at the end. However, if you start this course - you'll see many jQuery function calls in it ;) Btw, jQuery is a very simple straightforward library, which has the strong documentation on its official website.

I hope I answered your questions.

Cheers!

1 | Reply |

Toni 5 years ago

So, it's been more than 2 and a half years now... I suppose this isn't happening?

| Reply |

weaverryan SFCASTS Toni 5 years ago edited

Toni yep, shame on me for NOT getting to this. The problem is that this continues to be a really good tutorial and we are planning on doing it - but obviously, other tutorials keep taking priority. So this - along with other JS-related tutorials for backenders, like React, webpack, ES2015, etc - are on our mind - but not actually on the immediate schedule... yet

| Reply |

s.molinari 5 years ago

Will any certain client-side frameworks be used or discussed?

Scott

| Reply |

weaverryan SFCASTS s.molinari 5 years ago

To be determined! What would you like to see? I'm initially thinking something that's framework agnostic (well, it would include jQuery) and talks about all the fundamentals above. Then, maybe another screencast(s) on Angular, though I don't want to duplicate other wonderful resources out there on that topic :).

Cheers!

1 | Reply |

s.molinari weaverryan 5 years ago

Personally, I think referring to Angular would be a mistake currently. It is being completely changed in 2.0 (with little to no BC, AFAIK) and any discussion on it would be outdated, as soon as 2.0 is released. You'd have to make it clear, the tutorial is referring to an Angular version 1.X and not 2.0 or higher.

http://eisenbergeffect.blue...

I like Backbone, because it is the least opinionated and one of the most popular frameworks out there. There are also a ton of tutorials available for it, but for the purposes of this tutorial, Backbone can also show a way to better organize client side code, thus, it could be used to demonstrate the code organization (i.e. maintainability) and testing parts (my wish:-)). And since it has such a small footprint, there is none of the overkill other frameworks have, especially since this tutorial isn't specifically aimed to teach how to develop an SPA.:-)

Scott

| Reply |