Essential JavaScript & jQuery: An Introductory Guide to Avoiding Common Mistakes

1. JavaScript and jQuery introduction JavaScript & jQuery

2. JS Introductory Notes • I'm not a teacher, you know... • JS usage • DOM manipulation • Default event handlers replacement and extension • Client-side operations instead of server side • We will not learn what to do. We'll learn what not to do.

3. 11 Mistakes Guide • Can be found here • Covers all for-beginner areas • Is interesting to experienced staff • Explains some internal features • I will answer questions and make necessary explanations on go • Wait for the last mistake

4. Mistake 10 (no typo) • You’re Not Learning JavaScript • I am not learning JavaScript too

5. Mistake 1 and Global Variables • Variables in JS • Scopes • Variables without var keyword • You’re Using Global Variables – mistake! • Sample

6. Mistake 2 and Semicolons • Like in all C-based languages, semicolons end the statement • JS engine adds semicolon for you when needed • You’re Not Using Semicolons – Mistake! • `return` sample

7. Mistake 3 and Comparison • Comparison operators • == • === • You’re Using == – Mistake! • Samples

8. Mistake 4 and Type Wrappers • Types in JS • Object • Array • Number • String • Boolean • Wrappers vs. Unwrapped declarations • You’re using Type Wrapper Objects – Mistake! • Samples

9. Mistake 5 and Loops and Properties in JS • Loops in JS: • For – 2 variants • While – 2 variants • Constructor functions • `prototype` property • You’re not Property-Checking when Using For-In – Mistake! • Filtering prototype properties • Filtering functions

10. Mistake 6 and with and eval • eval function • with keyword • You’re Using with or eval – Mistake! • Samples

11. Mistake 7 and parsing strings • parseFloat • parseInt • Date.parse • You’re Not Using a Radix When Using parseInt – Mistake! • Samples

12. Mistake 8 and Braces • You’re Not Using Braces on if and while statements – Mistake! • Samples

13. Mistake 9 and DOM manipulation • DOM manipulation methods • getElementById • createElement • createTextNode • createDocumentFragment • appendChild • You’re Adding Elements to the DOM Individually – Mistake! • Samples

14. Mistake 11: Be open-minded • You’re Following all the Rules – Mistake! • Go back and discuss when each rule can be broken (with samples)

15. jQuery • jQuery is JS library for: • Easy DOM manipulations • Easy AJAX • Easy standard utility operations, not supported by JS natively • Easy extensibility => thousands of plugins (ibnlt UI), official and third party • OOTB cross-browser support • jQuery is NOT JS replacement

16. DOM manipulations . Selectors. • Derived from CSS, but extended • All: `*` • Attributes: `[name<opt><operator/>value</opt>]` • Operators: |= (equals or starts + `-`), *= (contains), ~= (contains word), $= (ends), = (equals), != (not equals), ^= (starts) • No operator and value – has attribute • Class: `.<classname/>` • Id: `#<id/>` • Element: `<element-name />`

17. DOM manipulations . Selectors. • Filter: `:<filter/>`. Filters: • Basic: element properties • Child: filtering children • Content: filtering basing on content • Form: form elements and states • Hierarchy: `<source/><operator/><selector/>`. Operators: • ` > ` – immediate child • ` ` – descendant • ` + ` – immediate next siblings • ` ~ ` – following siblings

18. DOM Manipulation. Traversing. • Tree • children and find • next, nextAll and nextUntil • closest, parent, parents, parentsUntil and offsetParent • prev, prevAll and prevUntil • siblings • Filter • filter, not and has • eq, first, last and slice • map and is • Misc • add, end, andSelf, contents