Download
1 / 18
180 likes | 283 Views
JavaScript and jQuery introduction. JavaScript & jQuery. 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.
E N D
JavaScript and jQuery introduction JavaScript & jQuery
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 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
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<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 />`
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
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
