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