Sunday, November 6, 2011

How browsers handles (unknown) elements?

How should “unknown” element be styled?

Say you have an element named , how should it be style? How should it look like?

Different browsers answer this question in a different ways. All browsers except IE (<IE9) inherit unknown elements properties and let the programmer define styling on it. IE not allows unknown element styling.

What DOM element should be created for “unknown” element?

IE (<IE9) insert the element into the DOM as an empty leaf element. All elements inside the unknown that you would expect to be its children will be inserted as siblings.

IE (<IE9) solution:

Create “dummy” element: document.createElement(“myprivateelement”);
Note that we do not insert it into the DOM, only creating it. This way IE will recognize and allow its styling.

By the way... this is the way HTML5 patches install the new HTML5 features for you to use.

Sunday, September 18, 2011

Importing CSS - 3 different ways

A web page constructs from 3 different layers:

 1. The structure & content layer (HTML)
 2. The style & presentation layer (CSS)
 3. The behavior layer (Script)


Creating a Web page, it is important to keep the layers separate. Keeping this separation makes site maintenance much easier and reduces bandwidth usage. Using CSS is the recommended way to control the presentation of web pages. It allows the presentation layer to remain separate from the two other layers.

<style>
Adding the <style> to your page "head" is the easiest (But not recommanded) way to include styles in your web page. It is not recommanded because it violates the separation we would like to keep between the structure & content layer and the style & presentation layer.

To use the style, just add it to your document:

<style type="text/css">
body {
background-color:red;
}

.myDivClass {
text-align:right;
}
</style>



Importing external (or using internal) CSS rules allows you to include style sheets code in your document.

<link>
Linking is a method for including an external style sheet on your web page. It's actually linking together your web page with your style sheet. It is added to the of your HTML document the following way:


<link href="myStyleSheet.css" type="text/css" />


The CSS @import rule
Another way to create a style sheet within your document is by using the @import rule. Remember that if you are using the @import than it should be the first thing in your document.
To use the @import rule, type:

<style type="text/css">
@import url("myStyleSheet.css");
</style>



There is no obvious difference between linking or importing it. Either way is correct, and either way will work equally. But please note the following:
  • Old browsers (IE v.4, Netscape 4) do not support the @import rule

  • Using @import rule you can use multiple style sheets on your page but only one link in your <head> seaction

  • Good programming practice is to separate the page style (CSS), the page behavior (javascript) and markup (HTML), Following this rule you should include on CSS line using <link> and link all your CSS to your page.

Wednesday, August 31, 2011

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

Tuesday, August 30, 2011

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.

Monday, August 22, 2011

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.

Friday, August 19, 2011

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.

Thursday, August 18, 2011

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:
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.

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.

Monday, January 31, 2011

Public privileged and private members in Javascript

try catch exceptions and errors

What can u do with js but not in c++

Javascript prototypal inheritance

WI-Fi

HTTP (Hypertext Transfer Protocol)


How can two computers share data?
What sets the connection between two computers on a network?
What is the actual form of the data sent over the Internet?



A computer network is a collection of two or more computers linked together for the purposes of sharing information, resources, among other things. The Internet, for example, is a global system of interconnected computer networks. While surfing the net, your computer sends and receive data over the internet two and from other computers.

Just like humans, two computers need a common "language" to talk to each other, a form of predefined rules to send and receive data. The protocol in which two computers are "speaking" is call The Internet Protocol (or IP).

Information is sent over the internet (using the IP) has the form of "Packets" - a basic transfer unit consists of header and data areas, where the header contains information about the sender and the destination computer and the data field contains the information to deliver.

As you see, beside the data, the protocol contains more information. Most of the other information describes the data so the receiver will "know" how to handle the content it gets.

IP uses its application layer protocols for describing the content. Lots of transformation protocol exist, for example the File Transfer Protocol (FTP) is a standard network protocol used to transfer files from one host to another over a network. The most used protocol over the internet is the HTTP protocol.

HTTP - Hypertext Transfer Protocol

HTTP functions as a request-response protocol in the client-server computing model. A typical "conversation" using this protocol evolved a web browser that acts as the client, while an application running on a computer hosting a web site functions as a server. The client submits an HTTP request message to the server. The server, which stores content, or provides resources, such as HTML files, or performs other functions on behalf of the client.

Example Request:

GET [ the path to the content - a URI] HTTP/1.1
HOST: [the server domain]
Connection: keep-alive
Referrer: [the caller - that initiated the HTTP call]

* This kind of HTTP call will find its way to the requested server that suppose to return the requested data. The response, of course, also has predefined format.

Example Response:

HTTP/1.1 200 OK -- the status of the response
Date: [the response date time]
Cache-Control: [the cache period of the returned data]
Server: [the server name - like: Microsoft-IIS/7.0]
Connection: close -- Indicates that the TCP connection closed
Connection-Length: [the length of the returned data - in bytes]
Content-Type: [html, script, xml etc.]

Response Data:

HTML, Javascript, JSON etc.


So, (and maybe the most important part :) ) - when you write an HTTP address i the address bar, like http://www.challengenes.com, you ask a server to give you the information this address contains. The information in this case has the form of HTML, those, the browser draws it inside your browser screen.

Enjoy.


Microsoft Windows Internet Services (WinInet)

the HTTP layer used by Internet Explorer, Microsoft Office, and many other products

Http debugging proxy

Monitoring interaction between the web browser and your web application i svery important


http://msdn.microsoft.com/en-us/library/Bb250446.aspx

Sunday, January 30, 2011

JavaScript Data Types

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.

However, this is not good coding. Lets see an example:

var a = "20"; // string
var b = 30; // number
var c = a + b;

variable c contains the string "2030" and not 50 as expected.

For this reason (and many more) you should create variables for a specific type, such as an numbers, string, or boolean, and be consistent in the values that you store in the variable.
Although loosely typed, JavaScript contains six data types:

Three primitive types:

1. Number - 64bit floating point number. JavaScript does't distinguish between Integer and fraction. Every number is ... just a number.
2. String - sequence of Unicode characters quoted using the ' or " characters.
3. Boolean - true or false.

Special values:

4. null
5. undefined

Everything else:

6. object

Note that all of them defined using "var" and can be reset dynamically:

var str = "Hello World"; // string
var num = 20; // number

// changing type
str = num;

alert(str); // output: 20


Everything else in JavaScript is an object: functions, dates, regular expressions etc.