|Last modified: 04-03-2013|
A simple setup is...
Next, create this basic text file, and aim your browser at Mongoose:
The code itself is surrounded by a <script> tag:
It's generally best to load JS code in the <HEAD> section of the page, to make sure that it is available before the user does anything.
How to tell browser to cache jQuery and update when necessary?
Variables are either global (if declared outside any function) or local (declared inside a function). Note that a variable that is declared inside a routine still requires the "var" argument for its scope to be local:
"function" must always be in lower-case. Functions that actually need to return a value must use... "return".
Here's an example of some JS code being called to respond to an event:
Common events are onClick, onChange, onFocus, onBlur, onMouseOver, onMouseOut, onSelect, onSubmit, onResize, onLoad, onUnload.
Should I use "<input type="button" onclick="show_alert()" value="Show alert box" />" OR "<input type='button' id='mybutton'/>" + JS elsewhere?
To prompt the user:
To run a function every so often: setTimeOut();
To access an element in a page: document.getElementById
To avoid dumping error messages on the screen, use the familiar try/catch:
If you want to trigger an error on purpose:
Here's how to search and replace some text between the BODY tags:
... and here's how to include and run this script once the page is loaded:
Here's how to search/replace text anywhere in an HTML document, not just in the BODY section (browser-dependent):
jQuery's DatePicker is pretty good and free. Here's how to localize it so that it returns date as DD/MM/YYYY, uses Monday as the first day of the week, and translates the day + month names:
And here's a working example:
To output infos, try console.log and alert()
Object = collection of properties (property = name + value)
Object types = objects, arrays, and functions
Note that primitive values (undefined, null, booleans, numbers, and strings) and objects are immutable, ie. they can't change, while objects and arrays are mutable. "immutable" means that a new variable will be silently created and the old one emoved by the garbage collector; It will not trigger an error.
Classes are subtypes of the object type: Function, Array, Date, RegExp, Error
Methods = functions assigned to properties of an object. "this" refers to object on which method is defined.
Only objects really have methods, but primitive data types (numbers, strings, boolean) behave as if they had methods.
Arithmetic: JS doesn't raise errors for over/underflow or division by zero. Check for Infinity, -Infinity, "negative zero" (negz), and NaN ("not a number").
Functions are true values and can be treated like regular objects:
Event handlers can be registered.
$() : function often used by jQuery
Global object ("this"): includes globally defined symbols (properties, functions, etc.) available to a JS program
Window object: on client-side JS, global object for all JS code contained in browser window. "window" property = "this". Core global properties + few globals
Variables are visible within the function in which they are defined, so watch for "hoisting".
Declaring a global variable means defining a property of the global object; if you use "var", it is nonconfigurable, ie. cannot be deleted with the "delete" operator:
When not using strict mode, assigning a value to an undeclared variables automatically creates a global variable.
Caution: In a function, it doesn't matter where a variable is declared: it's available anywhere, even before it's used!
Why is variable not declared with "var" deletable while "var" variables isn't?
"===" tests for strict equality, and "!==" for strict unequality.
Learn more about eval()
If ... throw new Error("boom") : jumps to nearest try/catch/finally
Add "debugger;" in your js code to force the browser to stop and let you debug the code in eg. Visual Studio.
Check for syntax errors?
Detect run-time errors?
Google Chrome: Wrench icon > Tools > Developer Tools
JSLint (same as JSHint)
"Microsoft's F12 Developer Tools is a suite of tools to help you build and debug your webpage" (specific to Internet Explorer)
"IntelliJ IDEA is a commercial Java IDE by JetBrains. It is often simply referred to as "IDEA" or "IntelliJ"."
"These days, most use Chrome's Developer Tools =] (built-in)"
"NetBeans is an integrated development environment (IDE) for developing primarily with Java, but also with other languages, in particular PHP, C/C++, and HTML5. It is also an application platform framework for Java desktop applications and others."