core error

Archive for the ‘javascript’ Category


What

CoffeScript is an attempt of  make our Javascript code simpler an more easily maintainable. Basically is a little language which can be compiled (manually or automatically) into javascript code.

Why

Coffescript tries to hide the complexity of Javascript and expose the nice parts of this language.

How

Here is an example of some Javascript code re-written in CoffeScript:

var cubes, list, math, num, number, opposite, race, square;
var __slice = Array.prototype.slice;
number = 42;
opposite = true;
if (opposite) number = -42;
square = function(x) {
  return x * x;
};
list = [1, 2, 3, 4, 5];
math = {
  root: Math.sqrt,
  square: square,
  cube: function(x) {
    return x * square(x);
  }
};

Now in CoffeScript:

# Assignment:
number   = 42
opposite = true

# Conditions:
number = -42 if opposite

# Functions:
square = (x) -> x * x

# Arrays:
list = [1, 2, 3, 4, 5]

# Objects:
math =
  root:   Math.sqrt
  square: square
  cube:   (x) -> x * square x

Node.js

Posted on: 06/09/2011


What

Node.js is a programming framework based in Javascript. Node.js runs in the server side and it is events-driven.

Why

It was created to allow developers to build scalable network events-driven applications such as web servers.

How

Here is a ‘Hello world’ example of a web server in Node.js:

var http = require('http');

http.createServer(function (request, response) {
    response.writeHead(200, {'Content-Type': 'text/plain'});
    response.end('Hello World\n');
}).listen(8000);

console.log('Server running at http://127.0.0.1:8000/');


Cross Site Scripting is a type of computer security vulnerability in web applications which consists in inserting JavaScript code into the attacked page’s html/js code.

For example:


With this setup and if the site is not well protected we could inject some code really easily:

Any website allowing users to send data which is going to be part of the page itself (forums, blogs, forms, etc.) is a potential victim form XSS. To protect our sites from this technique we should server-sid detect any dangerous input coming from the users and escape it or strip it when displaying our html/javascript code.

Steps

In this sample we will create a button to the right of the address bar which will display a fancy popup showing a clock

  1. Create a folder in your hard drive containing two files: manifest.json and popup.html
  2. Add into manifest.json all the information related to your extension. For example: 
    {
      "name": "My First Extension",
      "browser_action": {
        "default_icon": "icon.png",
        "popup": "popup.html"
      }
    }
    
  3. Add the logic of the extension inside the popup.html file. You can use regular HTML, javascript and CSS. For Example:
    <script type="text/javascript">
       //javascript code to display a clock inside the div
    </script>
    
  4. Go to Chrome, click on the    icon, go to Tools > Extensions and load  your unpacked extension from the folder you created
Using Chrome API
Going to this url you can read about all the modules and methods that you can use to enrich your application. For example:
  • chrome.browserAction.setPopup(object details) will let you choose which HTML page to show in the popup (in case you provided more than one)
  • chrome.tabs.executeScript(null, object details) will inject javascript code into the page currently showing in the active tab
  • chrome.tabs.update(null, object updateProperties) will change the properties of the active tab. For example, the url displayed on it

Head JS

Posted on: 28/07/2011

What

With Head JS you can load your javascript files in a non blocking way, just like images.

Why

When a page loads its JavaScript files through Head JS, the rendering is not blocked until the files are downloaded ensuring a boost in performance especially for pages with a lot of javascript code.

How

// use jQuery on the body of the page even though it is not included yet
head.ready(function() {
   $("#my").jquery_plugin();
});

// load jQuery whenever you wish bottom of the page
head.js("/path/to/jquery.js");

With this piece of code we can add js code in the body of the page without blocking the page render. For example, jQuery code can be added wherever we want even we load jQuery at the bottom.

Since Javascript is ‘class-free’ inheriting is not part of the definition of a class but it is handled by the method .inherits(<classn

ame>) and it’s done in run-time.

For example:

function ZParenizor(value) {
    this.setValue(value);
}

ZParenizor.inherits(Parenizor);

Now ZParenizor has inherited all the methods and attributes from Parenizor and still they can be overwritten or overloaded.

What

Chaining is the ability to call methods ‘inside’ other methods. JQuery makes this quite straightforward ( $(‘#text1’).removeClass(‘newPost’).addClass(‘oldPost’); ) but it can also be done in plan Javascript.

Why

Chaining is quite handy for controlling the flow of your application or for have a better control on the scope of your variables (which is always a pain in Javascript).

How

You just need to remember that in javascript you can return not only values, but also functions:

  posAbsolute("myid").html("you made my day");  

  function posAbsolute(elementId){
      var node = document.getElementById(elementId)

       return{
           html : function(content){
               node.innerHTML = content;
           }
       };
  }

The scope of the variables inside the function named html is now safe



  • None
  • Justin Cooney: Great comic, this made me laugh!
  • Justin Cooney: Interesting, I didn't know about the Google App Engine, I'm glad I found your article on it!

Categories