Last Updated: 20 Oct 2023
|
Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision Last revision Both sides next revision | ||
front-end-tech:javascript:basic-javascript [Sep 17, 2008 08:37 PM] dordal |
front-end-tech:javascript:basic-javascript [Oct 20, 2023 01:01 PM] 110.249.202.3 removed |
||
---|---|---|---|
Line 1: | Line 1: | ||
+ | = Basic Javascript Reference = | ||
+ | === Data Types & Variables === | ||
+ | * Core JS datatypes: **number** (no distinction between float and integer), **string** (variable length, but immutable), **boolean**, | ||
+ | * An object is a ' | ||
+ | * Since functions are objects, [[# | ||
+ | * Javascript 1.5 doesn' | ||
+ | * There are also a bunch of random built-in objects, like [[http:// | ||
+ | * Even the primitive datatypes have object representations: | ||
+ | * //null//, as with other languages, is a special value (actually an object in JS) that means no value. (That said, its not like SQL as it converts to 0 if typecast to a number, ' | ||
+ | * // | ||
+ | * Subtle, but important: having a variable be declared but undefined is different than having a variable that was never declared at all (and thus is ' | ||
+ | var myVar1; | ||
+ | myVar2 + 3; // myVar2 isn't even declared; this will throw an error | ||
+ | </ | ||
+ | * As with other languages, primitive data types are passed by value, and objects are passed by reference. | ||
+ | * Strings are immutable in JS, which means they can't be changed at all. This is highly annoying, because it means you can't do string substitution like you can in PHP: <code php> | ||
+ | $myString = "Hello {$name}, you have an {$animal}." | ||
+ | </ | ||
+ | * JavaScript is untyped, and you can easily reassign any variable to any type of data: <code javascript> | ||
+ | var myVar = 9; | ||
+ | myVar = ' | ||
+ | myVar = new Object(); | ||
+ | </ | ||
+ | * Scope is local to a function, but //not// local to a '' | ||
+ | * You should **always** declare variables with '' | ||
+ | |||
+ | === Operators & Statements === | ||
+ | * JavaScript has all the standard operators that most languages do; e.g. +, -, ++, <, >, && etc. etc. Precedence and associativity (e.g. use inside of parens) is pretty much as you'd expect | ||
+ | * Like many other languages, JS supports that // | ||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | * As with other languages, JavaScript supports the conditional operator: ''?:'', | ||
+ | * '' | ||
+ | * JavaScript has all the standard statements you'd expect from any decent language, e.g. '' | ||
+ | * '' | ||
+ | var myObj = new Object(); | ||
+ | myObj.prop1 = 3; | ||
+ | myObj.prop2 = 4; | ||
+ | for (var index in myObj) { | ||
+ | document.write(index+',' | ||
+ | } | ||
+ | </ | ||
+ | * JavaScript supports decent exception handling... with '' | ||
+ | |||
+ | === Objects === | ||
+ | |||
+ | * Objects are the core structure in JavaScript. They are used to represent arrays, [[# | ||
+ | * An object consists of some number of ' | ||
+ | * Properties can be accessed via dot notation ('' | ||
+ | * The latter is useful in '' | ||
+ | * Objects must be declared with either curly bracket syntax ('' | ||
+ | * Every object has a ' | ||
+ | String.prototype.trim=function(){ | ||
+ | return this.replace(/ | ||
+ | }; | ||
+ | </ | ||
+ | |||
+ | === Arrays === | ||
+ | * Objects are used to represent arrays. To make life easier, JS gives you some simple functionality that let you manipulate arrays. | ||
+ | * '' | ||
+ | * '' | ||
+ | * Unlike PHP, JS **only supports numerically indexed arrays**. You can simulate associative arrays using objects, and creating a new property for each ' | ||
+ | |||
+ | === Functions === | ||
+ | * Functions are **really** cool in Javascript. In most languages, they are just a syntactical feature of the language. In JS, **functions are first-class objects**. This means we can treat a function just like any other piece of data, and can do all kinds of nifty things that we can't do in other languages. | ||
+ | * Nest a function inside another function< | ||
+ | function hypotenuse(a, | ||
+ | function square (x) { return x*x} | ||
+ | return Math.sqrt(square(a), | ||
+ | } | ||
+ | |||
+ | // square() can't be accessed here, because it was defined in the hypotenuse() | ||
+ | // function and thus isn't global in scope | ||
+ | </ | ||
+ | * Use a Function() constructor. You can create a function just like any other object; using a constructor. <code javascript> | ||
+ | var addNumbers = new Function(' | ||
+ | document.write(addNumbers(4, | ||
+ | </ | ||
+ | * Pass a function as an argument, just like we can pass any other object:< | ||
+ | var addNumbers = function (a, b) { return a + b; } // define a function and assign it to a variable | ||
+ | function doMath(mathFunc, | ||
+ | | ||
+ | } | ||
+ | doMath(addNumbers, | ||
+ | </ | ||
+ | * Create anonymous functions. You create anonymous variables and objects all the time... for example, if you said:< | ||
+ | document.write (' | ||
+ | </ | ||
+ | // this defines an anonymous function with a and b as the arguments, and then | ||
+ | // executes that function with 3 and 4 as the values | ||
+ | document.write(function(a, | ||
+ | </ | ||
+ | * Since functions are variables, you can assign them as properties of objects. These are called '' | ||
+ | var myObject = {}; | ||
+ | myObject.a = 5; | ||
+ | myObject.b = 7; | ||
+ | myObject.goo = function () {return this.a + this.b}; | ||
+ | document.write(myObject.goo()) | ||
+ | </ | ||
+ | === Classes === | ||
+ | * Objects are used to represent classes in JavaScript, but the implementation is confusing and incomplete at best. | ||
+ | * Objects aren't true classes, like in PHP5, Java or C++. They can't have private or protected members (well, [[http:// | ||
+ | * Because of the lack of true class support, I tend to shy away from object oriented programming in Javascript. I do [[namespacing and aliasing namespaces in javascript|namespace everything]], | ||
+ | * To create a ' | ||
+ | function Circle(r) { | ||
+ | this.radius = r; | ||
+ | } | ||
+ | </ | ||
+ | * Note that you **must** use the function statement to make a class object. If you init an object via literal notation, e.g. '' | ||
+ | * To declare an instance method, you can either use the '' | ||
+ | // Option #1: This is the better way to do it, because it stores one copy of the method, | ||
+ | // rather than a copy for each object that is instantiated. | ||
+ | function Circle(r) { | ||
+ | this.radius = r; | ||
+ | } | ||
+ | |||
+ | Circle.prototype.diameter = function () { | ||
+ | return 2 * this.radius * 3.14; | ||
+ | } | ||
+ | |||
+ | // Option #2: here, we get identical copies of the function every time we | ||
+ | // create a new Circle object. That uses a lot of memory. | ||
+ | function Circle(r) { | ||
+ | this.radius = r; | ||
+ | |||
+ | this.diameter = function () { | ||
+ | return 2 * this.radius * 3.14; | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | * Javascript also supports assigning //class properties// | ||
+ | function Circle(r) { | ||
+ | this.radius = r; | ||
+ | } | ||
+ | |||
+ | // class property. ALL CAPS is a convention, much like defining constants in PHP, Java, etc. | ||
+ | Circle.MAX_RADUIS = 2; | ||
+ | |||
+ | // class method. | ||
+ | Circle.isTooBig = function(radius) { | ||
+ | // return true if the radius given is bigger than the max radius | ||
+ | return (radius > Circle.MAX_RADIUS) ? true : false; | ||
+ | } | ||
+ | |||
+ | Circle.isTooBig(3); | ||
+ | </ | ||
+ | * Note that JS is loosely typed, which allows for 'duck typing' | ||
+ | === Regular Expressions === | ||
+ | * Happily, JS supports regular expressions, | ||
+ | var re1 = RegExp(" | ||
+ | var re2 = / | ||
+ | </ | ||
+ | * Once you have a RegExp object, you call one of the String class methods to do something with it. The three most useful: | ||
+ | * [[http:// | ||
+ | * [[http:// | ||
+ | * [[http:// | ||
+ | * [[http:// | ||
+ | * Example:< | ||
+ | var re1 = RegExp(" | ||
+ | var myString = " | ||
+ | var myString2 = " | ||
+ | myString.match(re1); | ||
+ | myString2.match(re1); | ||
+ | </ | ||
+ | |||
+ | === Tips and Tricks === | ||
+ | |||
+ | See the [[Best Practices]] document. |