JavaScript & jQuery JavaScript and jQuery introduction

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.

11 Mistakes Guide Can be found herehere 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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