Jump to content
xisto Community

Garmon Sutrix

Members
  • Content Count

    2
  • Joined

  • Last visited

  1. Okay, so you're like me - you've heard about OOP or Object Oriented Programming and wonder what all the hOOPlah is about! So here's the straight pOOP. Okay, sorry for the stOOPid puns. I'll stop now. Honestly, I will. OOPs I did it again. Right. Here's the scenario: we have an online store, we want to maintain a database of our products, and we want to be able to access them. This tutorial shows how this can be done, with very simple, commented code. Please note, that I'm not recommending that you use JavaScript to store your actual product data. For one thing, client-side JavaScript is not persistent, so your product information will disappear as soon as the browser window's closed. Your actual information would be stored in a database somewhere (like a mySQL database) which you could access via Perl or some other scripting language. What you WOULD use JavaScript for is your presentation layer. So for example, you want people to be able to see a quick display of the products, with an image, a description etc. And maybe they should be able to quickly switch between products, perhaps using a pull-down menu. Whatever. The point of this example is to learn some object-oriented basics, not to create the next OSCommerce. The following code shows how easy it is to create objects using JavaScript. In this example, we are dealing with two custom objects: a ProductDatabase object which would be a local mirrored copy of some (or all) of your actual product database which as mentioned above would be in mySQL or Oracle; and a Product object, which would describe one single product item. The ProductDatabase object will then contain all your Product objects. And it will also provide tools (in OOP-speak "methods") by which you can create and manipulate those product objects. To access your individual product objects (by name), just call the ProductDatabase.getProdByName() method. I'm not an OOP expert, so I won't lecture you on complex object-oriented programming concepts such as inheritance and prototypes. This is just the basics, folks, from someone who wants some free webhosting. However, there are just a couple of things I would like to point out about objects: 1. an object is created using a "constructor" function. Basically this is a function you define at the highest level of your code that gest used to create an instance of the object whenever it is called, and populate that object with whatever starting values you want. It's really easy. Define your object constructor like a function: function MyObject() { // this is the constructor function for the MyObject object //purists like me like to return the object, but it's not necessary return (this);} You then create an instance of that object like this: var myNewObj1 = new MyObject(); Often, you want to give information to the object when you are creating it. You can do this with parameters, just like you would with any other function. Pass parameters to a new object like this: var myNewObj2 = new MyObject("Hello World!!"); And receive the parameters in the object constructor like this: function MyObject(myParameter1){ alert (myParameter1);} 2. an object instance should be assigned to a variable, or at least stored anonymously somewhere so that you don't lose it. You can do that very simply by assigning the object to a variable like this: var myProdObject = new Product(). Or you can put the object anonymously into an array right away like this: my productArray[0] = new Product(). You can then get at that object later like this: productArray[0]. 3. an object can have properties associated with it. These are your attributes. In the case of the Product object below, these would be things like price, product name, product description etc... The properties get stored with the object. You can do that easily (within the object constructor) like this: this.propertyName = value. Here's an example: function MyObject(){ this.colour = "blue"; this.itemType = "widget";} Later, you can access these properties like this: var myNewObj3 = new MyObject();alert (myNewObj3.colour); But you can see here that if I create another object instance using the same constructor, it will also have the same values. Look to point #2 above to see what the solution is: use parameters when you create the object and assign those values to the object's properties, like this: function MyObject(userColour, userType){ this.colour = userColour; this.itemType = userType;} And create a couple of instances like this: var myNewObj4 = new MyObject("blue", "widget");var myNewObj5 = new MyObject("green", "grommet"); So as long as you don't lose the object (ie: destroy the variable that contains that instance of the object), all its properties get "carried along" with it. You can access them later using regular "dot syntax" as in: alert (myNewObj5.colour) or (for the Products object in the long listing below) alert(myProductObject.prodName). or as per the array example above: productArray[0].prodName. 4. an object can have methods associated with it. Basically, methods are functions that are attached to the object. Only objects that are instances of that object type would have access to that method. The method works primarily with the properties of that object (see #3 above), but can access external methods and properties, though I hear that purists frown on this sort of behaviour. OOPs! Attach a method (function) to an object like this: this.methodName = function() { // function goes here } Within the function, access the properties of the object using the "this" dot notation. Here's a simple example from previous snippets: function MyObject (userColour){ this.colour = userColour; // here's a method this.showColourAlert = function() { alert (this.colour); }}// let's put that new method to use in a new instance of the object:var myNewObj6 = new MyObject("puce");myNewObj6.showColourAlert(); There you go, the basics. I'm pretty much at the limit of my object-oriented know-how anyway, so best I quit with an example that puts it all together. // this function creates a prodDatabase object and populates it with a few Product objects and then accesses one of the product items by name function example(){ // create a few new product objects and add them to the product list prodDatabase = new ProductDB(); prodDatabase.addProduct (1102, 10.99, "Widget 1", "This is a widget.", "image1.jpg"); prodDatabase.addProduct (1143, 22.98, "Rotor", "This is a fanbelt rotor assembly.", "rotor1.jpg"); alert (prodDatabase.getProdByIndex(0).price); alert (prodDatabase.getProdByName("Rotor").prodDesc); } // the Product DB constructor function ProductDB(){ this.productArray = new Array(); // for storing the list of products // this method creates a new product object and adds it to the database this.addProduct = function (prodID, price, prodName, desc, prodImage){ this.productArray.push (new Product (prodID, price, prodName, desc, prodImage)); } // use this method to access a product by its index (order) within the database. This would correspond roughly to a primary key within a proper database this.getProdByIndex = function (whichIndex){ return (this.productArray[whichIndex]); } // use this method to access the product by name. You could easily clone this function to search on some other attribute, such as prodID. this.getProdByName = function (whatName){ for (i in this.productArray){ if (this.productArray[i].prodName == whatName) return this.productArray[i] } return undef(); } } // the Product Object constructor function Product(prodID, price, prodName, desc, prodImage){ this.prodID = prodID; this.price = price; this.prodName = prodName; this.prodDesc = desc; this.prodImage = new Image(); this.prodImage.ImageUrl = prodImage; return (this); } ---------- Garmon Sutrix Notice from miCRoSCoPiC^eaRthLinG: When posting large-ish blocks of code make sure you enclose them between CODE or CODEBOX tags. Since you're new - you're being notified of this. The usage of CODE/CODEBOX is absolutely necessary for our Credits System to perform the calculations properly. Omittance of this tag in future might cause you to loose the entire credits gained for a particular post.
  2. Key terms and concepts Adobe – software company established in 1982. Invented PostScript and later, the Portable document Format (PDF). They are responsible for the popular applications Photoshop, Illustrator and InDesign. Many beginners erroneously call Illustrator or Photoshop "Adobe" (as in "when I open up Adobe...") Don't make this mistake. Adobe is the company - use the name of the software you are working with. Photoshop – raster image manipulation application created in 1986 by Thomas Knoll and purchased by Adobe in 1988 to be released in 1990. Version 8 (CS) was released in 2004. Version 9 (CS2) was released in 2005. This is the application you're chomping at the bit to master. Stick with these tutorials and you'll never need to buy another Photoshop book. Raster Images – in contrast to vector artwork, raster images are made up of pixels and have a fixed resolution. Sometimes also called "pixel-based images". Vector Artwork – (“structured artwork”) resolution-independent images / artwork defined by points in space (vertices) and connected by lines Pixel – a single PICture ELement. The tiniest component of a raster image. Most pixels are square, though some are rectangular, depending on the display system. When you zoom in real close to your Photoshop document, you can see individual pixels. When you zoom out, you see the "big picture". Resolution – the frequency of pixels within a given area of a document, typically one inch. A document with a resolution of 300 ppi will have 300 pixels per (linear) inch. Note the use of the word “linear”. Since pixels are square and documents are square or rectangular, the actual number of pixels in a given area is (the number of pixels across) x (the number of pixels down) (width x height). Thus a 1” x 2” document at 300 ppi will actually have 180,000 pixels in it (1 x 300 x 2 x 300). Doubling an image’s size will actually quadruple the number of pixels in it. RGB – one of a number of ways of describing colour. This additive colour model describes a pixel’s colour in terms of a Red, Green and Blue component, usually in the range from 0-100% or 0-255. RGB gives you a palette of 16.7 million colours to choose from. CMYK – a subtractive method of describing colour. Cyan, Magenta, Yellow and Black combine to create all the colours of the printable spectrum using standard offset lithography. CMYK images have a smaller dynamic range than RGB images, which means that less colours are available for the human eye to view. Indexed Colour – sometimes, you can save a significant amount of disk space by representing image colours using a smaller palette. The common GIF file format used on the web is a good example of the use of indexed colour. Image Size – we need to be careful when talking about an image’s “size” - are we referring to the physical width and height of the document or the # of pixels in the document or the file size of the document? The # pixels in the document is the most precise method of describing a document, but the large numbers tend to make this impractical. Megapixel – 1 Million pixels. Approximately equal to 1150 x 850 pixels. Standard monitor resolutions are 640 x 480, 1024 x 768, 1280 x 960, 1600 x 1024. A standard 8 x 10 colour print at magazine print quality is about 2400 x 3000 pixels - 7.2 Megapixels. PPI vs. LPI – lpi is a print measurement, referring to the number of printer dots per inch (not at all the same thing as pixels). A safe calculation for lpi is generally ppi / 2. Standard lpi values used in industry are: silkscreen (75 lpi), newsprint (133 lpi), brochure / magazine (150 lpi), art magazine (180 ppi). Interpoation – the process by which new pixels are created or “invented”. When upsampling or resizing an image, you’re increasing the number of pixels in the document. Where do those pixels come from? The computer creates them Interpolation mathematically using a number of different algorithms. Choose the best algorithm for the job at hand. -- Garmon Sutrix Stay tuned for Tutorial 2: marquee selection methods and modifier hotkeys
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.