The document object models the HTML page

Good Javascript Programming Practice

No. 1 - Global Variables

It is recommended that you use a single global variable. This will be your program object or namespace and will "hold" all other code.




No. 2 -

What is Javascript?

JavaScript is a loosely typed language. You do not have to specify data types of a variable when you declare it. Data types are converted automatically as needed during script execution.

Since the web, is a text delivery system. Browsers threats Javascript as a load-and-go programming language. This means that a Javascript program is delivered as text to the execution site. The program's text is then evals, compile into an executable form and executes by the browser.

While C, C++ interpreted and than compiled
C# compiled to MSIL
JAVA ...
and Javascript has no compilation or interpretation process?

The web as text delivery system

The web, at its root, is a text delivery system. This means

About Box Model (or - The CSS box model)

HTML and CSS uses the "Box Model" to wrap each of the document HTML elements. The wrapping object is a rectangle (a box) that controls the elements display in terms of border, margin, content and padding.

The Margin
Margin is the area around and outside element. It has transparent background.

The Border
Is a line border around the element.

The Padding
Padding is the area between the border and the element itself.

The content
The HTML element (image, text etc.)

This can be summarized in the following image:

When you define a style for your box using CSS, you are defining the layout in which the element will display.

Content manipulation with jQuery

Content manipulations mechanisms exist to let you change or update you web page content.
You can change the value of a search box, insert fresh and new html tag to an existing div or even remove certain section from your page dynamically. (and many more, of course)

jQuery provides simple and fast methods for content manipulation. The simplest methods in jQuery are html() and text(). These two serves as setters and getters of content according to the number of params you pass them.

If the call is empty - they serve as getters. For example:

$("#myComponent").html();

Will return all html content inside the element with the id myComponent

$("#myComponent").html('<div>Hello</div>');

Will set the inner html of the element with the id myComponent to be <div>Hello</div>

Simple and Running.

So, what should you use? html() or text() ?

The rule of thumb is that html() returns everything that exist inside the jQuery selector element while text() ignores HTML elements and returns the text only.

html() - is similar to innerHTML property
text() - is similar to the innerText or innerContent properties

Setting content

Setting content has no surprise here, html(content) will set HTML content inside the selected element. This means that if an HTML element will present inside the inserting content, it will be rendered by the browser. text(content) will insert the text "AS IS" to the selected component.

Example:

$("#myComponent").html('<div><i>Hello</i></div>');
$("#myComponent").text('<div><i>Hello</i></div>');

The first line results in the insertion of hello into the selected element (italic hello). The second results in inserting the string "<div><i>Hello</i></div>" (string! no html here!)


Right, Simple and Running.

Enjoy.

About Browser Content Sniffing

Before you can understand content sniffing you need to know the basic idea behind it that allows such behavior by hackers. I'll explain what content type is and than show you how a computer hacker looks at it while content sniffing.

Every time your web browser requests a page, the web server sends “headers” before it sends the actual page markup. These invisible headers are important, because they tell your browser how to interpret the page markup that follows. The most important header is called Content-Type, and it looks like this:

Content-Type: text/html

“text/html” is called the “content type” or “MIME type” of the page. This header is the only thing that determines what a particular resource truly is, and therefore how it should be rendered. Images have their own MIME types (image/jpeg for JPEG images, image/png for PNG images, and so on). JavaScript files have their own MIME type. CSS stylesheets have their own MIME type. Everything has its own MIME type.

Content Sniffing

When a client initiate an HTTP request to a server it gets response containing the data in return. Each browser has its own Content Sniffing Component that receive the response, try to identify the content type of the response (if it isn't specify) and than sends it to the browser itself.

This component opens a huge hole for hackers to "Trick" the browser's content sniffing component and "Let it guess" that the response contains regular data.

Why is that important?

when the browser receive the data sent from the server from the content sniffing component it acts and render it according to its content type. For example it present it if it is an image, it plays it if it has an audio type and so on. If the hacker managed to trick the browser that it can run its content than the hacker can download harmful data to your computer and simply let the browser run it, thinking its a regular file.

So, what can you do?

Be careful not to open content you don't know or trust while surfing (specially when you receive emails from people you don't know). Most of the Antivirus software today warns you before they navigate to "suspicious" pages so be sure you have an Antivirus software on your computer.

If you have "all your life" inside your computer, have a backup software that covers the worst case scenario and protect you from the day of disaster.

Be careful,

Enjoy.

Cross Domain HTTP Requests (Or, why it isn't working?)

What would you say if I http request your site content and present it on my blog? Easy work for me... isn't it?

I'm preaty sure you wouldn't allow me to do this, but hey, you don't need to wory about it, the browser is doing it for you!

All modern web browsers impose a security restriction on network connections, which includes calls to XMLHttpRequest. This restriction prevents a script or application from making a connection to any web server other than the one the web page originally came from.

The XMLHttpRequest object (also known as the XMLHTTP object in Internet Explorer) is at the core of today's most exciting AJAX web applications. But actually writing client web applications that use this object can be tricky given restrictions imposed by web browsers on network connections across domains.

So, as a client developer, how can you get information from another server/domain on the net?

The solution
Two things must happen: The web server must allow http requesting to its content & you need to use on of this methods:

1. JSON and dynamic <script>
tags instead of XML and XMLHttpRequest. You can get around the browser security problem altogether by making your web services request directly inside a <script> tag.

Example:

var url = "the url to the other web browser";
var myScript = document.createElement("script");
myScript.setAttribute("src", url);
myScript.setAttribute("type", "text/javascript");
document.documentElement.appendChild(myScript);


2. Use JSONP
AJAX make it simple to do things, thats a fact.. So don't be surprise if they "Wrap" your way to make cross domain http requests also.
(As a matter of fact, JSONP is using example #1 behind the sceen)

Lets see another example:

function MYResponse(data){
// do something with the data you get
}
var url = "the url to the other web browser";
$.ajax({
url: url,
dataType: "jsonp",
jsonpCallback: 'MYResponse'
});


Easy and clear.

Enjoy.

About Web Browsers

There are five major browsers used today:

• Internet Explorer
• Chrome
• Firefox
• Safari
• Opera

You can view their usage (almost anywhere on the glob) here

The browser main functionality is to display the web content you choose. It does that by requesting it from the server and displaying it on the browser window. The content/resource format is usually HTML but also PDF, image and more.

Mime Types

Every time your web browser requests a page, the web server sends “headers” before it sends the actual page markup. These headers are normally invisible, although there are web development tools that will make them visible if you’re interested. But the headers are important, because they tell your browser how to interpret the page markup that follows. The most important header is called Content-Type, and it looks like this:

Content-Type: text/html

“text/html” is called the “content type” or “MIME type” of the page. This header is the only thing that determines what a particular resource truly is, and therefore how it should be rendered. (more about MIME types).

The location of the resource is specified by the user using a URI (Uniform resource Identifier).

High level view on each of the five leading browses revels similar 7 layers structure:

1. User interface - The address bar, back/forward button, bookmarking menu etc.

2. The browser engine - Marshall the actions between the UI and the rendering engine.

3. The rendering engine - Responsible for displaying the requested content. For example if the requested content is HTML, it is responsible for parsing the HTML and CSS and displaying the parsed content on the screen.

• Trident (and Chakra in IE9) - in Internet Explorer
• WebKit - in Chrome & Safari
• Gecko - in Firefox
• Presto - in Opera

4. Networking - Used for network calls, like HTTP requests.

5. UI backend - used for drawing basic widgets like combo boxes and windows.

6. JavaScript interpreter - Used to parse and execute the JavaScript code.

7. Data storage - This is a persistence layer. The browser needs to save all sorts of data on the hard disk, for examples, cookies.

The difference between Internet Explorer & Firefox (while scripting)