background preloader

1. JavaScript Basics

Facebook Twitter

JavaScript Patterns. JavaScript Library Overview. YUI Theater: Douglas Crockford, The JavaScript Programming Language. I’ve shared on YUIBlog and in the YUI Theater two presentations created by Yahoo! JavaScript Architect Douglas Crockford (“Advanced JavaScript” and“An Inconvenient API: The Theory of the Dom”). Today I’m happy to announce that Douglas’s more foundational talk “The JavaScript Programming Language,” is publicly available. In this presentation, which is meant to be the beginning of the three-course sequence (followed by “Theory of the DOM” and then “Advanced JavaScript”), Douglas explores not only the language as it is today but also how the language came to be the way it is.

It’s always worth pointing out that ideas and perspectives are Douglas’s own and that the many eggregious flaws in videographic craftsmanship are mine. Download slides (zipped PowerPoint file) Table of Contents. Page last changed today.

Table of Contents

Intro. Javascript--what the heck is it?

Intro

Is it a really difficult programming language that casual web designers should be afraid of? What is it used for? Hopefully we'll be able to answer these questions for you and more in this tutorial JavaScript has been around for several years now, in many different flavors. The main benefit of Javascript is to add additional interaction between the website and its visitors with just a little extra work by the web developer. By definition, JavaScript is a client-side scripting language. There are many uses (and abuses!) Clocks Mouse Trailers (an animation that follows your mouse when you surf a site) Drop Down Menus Alert Messages Popup Windows HTML Form Data Validation Before you begin this tutorial, you should have basic knowledge of HTML. This tutorial will cover the basics of JavaScript, from where to place your JavaScript all the way to making your own JavaScript functions. JavaScript Guide - JavaScript. The JavaScript Guide shows you how to use JavaScript and gives an overview of the language.

If you need exhaustive information about a language feature, have a look at the JavaScript reference. This Guide is divided into the following chapters. Introduction Grammar and types Control flow and error handling Loops and iteration Functions Expressions and operators Numbers and dates Text formatting Indexed collections Keyed collections Working with objects Details of the object model Promises. Google JavaScript Style Guide. We follow the C++ formatting rules in spirit, with the following additional clarifications.

Google JavaScript Style Guide

Curly Braces Because of implicit semicolon insertion, always start your curly braces on the same line as whatever they're opening. For example: if (something) { // ... } else { // ... } Array and Object Initializers Single-line array and object initializers are allowed when they fit on a line: Multiline array initializers and object initializers are indented 2 spaces, with the braces on their own line, just like blocks. Long identifiers or values present problems for aligned initialization lists, so always prefer non-aligned initialization. Not like this: JavaScript Execution Context, Closure, Eval and “this” Keyword. These are a few key concepts of JavaScript language that developers should know: execution context, activation object, variable instantiation, scoping, closure, eval and “this” keyword.

JavaScript Execution Context, Closure, Eval and “this” Keyword

Knowing these would help one tremendously in Ajax development. For example, when you write an inner function, you know that you can access the local variables defined in the outer function as if they were defined locally. You can also access the global variables. -Why? How does the host environment resolve such variables? Another example: When you pass arguments to a function, you can access these arguments as if they were locally defined variables. A slightly more involved example that developers must have seem similar code a lot but may not know the “why”: Why would the 2nd alert box show 800 (means the value of localVar is retained from the first call) while the third alert displays 700 (the value of localVar is not retained from previous calls)?