JavaScript Tutorial

The JavaScript Tutorial

HTML5 is great. jQuery is cool. Node.JS is awesome. Base them on the solid, powerful basement of pure JavaScript and you can rock the web! ;)

Learn...

JavaScript: from the Ground to Closures
- Javascript and related technologies
  - Overview: JavaScript, Flash, Java, Silverlight and ActiveX
  - Pre-coding tips
- First Steps
  - Setup your environment
  - Hello, World!
    - Task: Alert
  - Variables and statements
    - Task: What's wrong?
  - Browser Developer's Tools
  - User interaction: alert, prompt and confirm
    - Task: Simple page task
  - Operators and constructs
    - Operators
    - Comparison operators, if..else
      - Task: If (sign) check
      - Task: If login simple
      - Task: If login advanced
    - Loops and switch
      - Task: Rewrite for to while
      - Task: Loop until the input is right
      - Task: Output prime numbers
- Functions: declarations and expressions
  - Task: Function simple
  - Task: Funciton pow(x,n)
  - Task: Closure syntax test
  - Task: NFE test
- Mastering data types
  - String
    - Task: Uppercase char
    - Task: checkSpam
    - Task: Truncate
  - Number, Math
    - Task: sum
    - Task: Endless by chance
    - Task: Random(0,b)
    - Task: Random(a,b)
    - Task: intRandom(min,max)
  - Objects
    - Task: Fist object
    - Task: multiplyNumeric
    - Task: Create a summator
    - Task: Create chainable object
    - Task: Create a summator with new
  - Array
    - Task: Create array
    - Task: Get a random value from array
    - Task: Array find
    - Task: filterNumeric
    - Task: addClass
    - Task: Camelize
    - Task: Array element call, this
    - Task: removeClass
    - Task: filterNumericInPlace
    - Task: Compare people
    - Task: filter
    - Task: Sieve of Eratosthenes
  - Conversion, toString and valueOf
    - Task: ['x'] == 'x'
    - Task: Why [ ] == ![ ] ?
    - Task: Conversion quiz
- Four scents of "this"
  - Task: Object syntax check
- Type detection
- Function arguments
  - Task: Math.max for array
- Static variables and methods
- Scopes and Closures
  - Initialization of functions and variables
    - Task: Window and variable
    - Task: Window and variable 2
    - Task: VarWindow
    - Task: Scope type
  - Closures
    - Task: SumClosure
    - Task: Sum with arbitrary number of brackets
    - Task: Shooters in the loop
  - The "with" operator
- Decorators
  - Task: Make logging decorator
  - Task: Make caching decorator
Document and Events
- Adding a script to HTML
  - Task: Rabbits offline
- Browser environment
- DOM
  - DOM Nodes
  - Traversing the DOM
    - Task: DOM children
    - Task: No children check
    - Task: lastChild.nextSibling vs children[0].previousSibling
  - Basic DOM Node properties
    - Task: nodeType test
  - Attributes and custom properties
    - Task: Get custom attribute
  - Modifying the document
    - Task: createTextNode vs innerHTML
    - Task: remove
    - Task: insertAfter
    - Task: removeChildren
    - Task: createList
  - Using document.write
  - Searching elements in DOM
    - Task: window === window.window
    - Task: Stylize labels
    - Task: Check inside table
    - Task: Label links
    - Task: Tree
    - Task: Compare elems size
  - More references in forms and tables
- View and position
  - Styles and classes, getComputedStyle
    - Task: Rounded button
  - Re-introducing CSS positioning
    - Task: Position absolutely
  - Metrics
    - Task: Replace div with same size
    - Task: Move the ball into the center
  - Coordinates
- Events
  - Introduction into browser events
    - Task: Hide on click
    - Task: Hide self
    - Task: Sliding menu
    - Task: Message hide
  - Obtaining the event object
  - Bubbling and capturing
  - The default browser action
  - Event delegation
    - Task: Message hide delegate
    - Task: Image gallery
    - Task: Catch links
  - Mouse events
    - Task: Rollover
    - Task: Tree hide children
  - Focus/Blur: methods and events
    - Task: Create array
    - Task: Get a random value from array
    - Task: Array find
    - Task: filterNumeric
    - Task: addClass
    - Task: Camelize
    - Task: Array element call, this
    - Task: removeClass
    - Task: filterNumericInPlace
    - Task: Compare people
    - Task: filter
    - Task: Sieve of Eratosthenes
  - Keyboard events
    - Task: Number-only input
    - Task: Mouse on keys
    - Task: Caps lock warning input
    - Task: Hotkey
Object Oriented Programming
Timing
- Date/Time functions
  - Task: Weekday name
  - Task: Local weekday
  - Task: Weekday after 1000 days
  - Task: Output current date
  - Task: Calendar
- Understanding timers: setTimeout and setInterval
  - Task: Clock with setInterval
  - Task: Clock with setTimeout
- Events and timing in-depth 深入事件和定时机制
Frames and windows
Regular expressions in JavaScript
- Introduction
- Character classes
- Special characters
- Flags
- Character sets and ranges
  - Task: Match date
  - Task: k[^s]
- Numeric Quantifiers
  - Task: Regexp for web color
- Quantifiers +, * and ?
  - Task: Find all numbers with decimal point
  - Task: Find all numbers including decimal point
- Greedy and Lazy
  - Task: Difference "[^"]*" and ".*?"
  - Task: Find HTML comments
  - Task: Opening HTML tag with attributes
- Ahchors and multiline mode
  - Task: ^$
- Word boundary
- Infinite backtracking problem
  - Task: Fix slow regexp
- Groups
  - Task: Regexp for web color #abc #abcdef
  - Task: Parse an expression
  - Task: Matching tags
- Alternation
  - Task: Match languages
  - Task: Test a clanned nick
  - Task: Match a string with quotes
- Regular expressions methods
- Practice
  - Task: Replace <img..> with <img../>
  - Task: Replace optionally invalid tags
Advanced and Extra stuff
- onLoad and onDOMContentLoaded
- Animation
  - Task: Animate the ball
  - Task: Animate the ball right
- Memory leaks