JavaScript & jQuery JavaScript and jQuery introduction

  • View

  • Download

Embed Size (px)

Text of JavaScript & jQuery JavaScript and jQuery introduction

  • Slide 1

JavaScript & jQuery JavaScript and jQuery introduction Slide 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. Slide 3 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 Slide 4 Mistake 10 (no typo) Youre Not Learning JavaScript I am not learning JavaScript too Slide 5 Mistake 1 and Global Variables Variables in JS Scopes Variables without var keyword Youre Using Global Variables mistake! Sample Slide 6 Mistake 2 and Semicolons Like in all C-based languages, semicolons end the statement JS engine adds semicolon for you when needed Youre Not Using Semicolons Mistake! `return` sample Slide 7 Mistake 3 and Comparison Comparison operators == === Youre Using == Mistake! Samples Slide 8 Mistake 4 and Type Wrappers Types in JS Object Array Number String Boolean Wrappers vs. Unwrapped declarations Youre using Type Wrapper Objects Mistake! Samples Slide 9 Mistake 5 and Loops and Properties in JS Loops in JS: For 2 variants While 2 variants Constructor functions `prototype` property Youre not Property-Checking when Using For-In Mistake! Filtering prototype properties Filtering functions Slide 10 Mistake 6 and with and eval eval function with keyword Youre Using with or eval Mistake! Samples Slide 11 Mistake 7 and parsing strings parseFloat parseInt Date.parse Youre Not Using a Radix When Using parseInt Mistake! Samples Slide 12 Mistake 8 and Braces Youre Not Using Braces on if and while statements Mistake! Samples Slide 13 Mistake 9 and DOM manipulation DOM manipulation methods getElementById createElement createTextNode createDocumentFragment appendChild Youre Adding Elements to the DOM Individually Mistake! Samples Slide 14 Mistake 11: Be open-minded Youre Following all the Rules Mistake! Go back and discuss when each rule can be broken (with samples) Slide 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 Slide 16 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: ` ` Slide 17 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 Slide 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