javascript & jquery javascript and jquery introduction
Post on 31-Mar-2015
311 Views
Preview:
TRANSCRIPT
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 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
top related