mineaeliza: { web design }: 2010

[Javascript] Exemplu break + label

outerloop:
  for(var i = 0; i < 10; i++) {
    innerloop:
      for(var j = 0; j < 10; j++) {
          if (j > 3) break;             // Quit the innermost loop
          if (i == 2) break innerloop;  // Do the same thing
          if (i == 4) break outerloop;  // Quit the outer loop
          document.write("i = " + i + " j = " + j + "
");
      }
  }
  document.write("FINAL i = " + i + " j = " + j + "
");

Rezultatul fiind:

i = 0 j = 0
i = 0 j = 1
i = 0 j = 2
i = 0 j = 3
i = 1 j = 0
i = 1 j = 1
i = 1 j = 2
i = 1 j = 3
i = 3 j = 0
i = 3 j = 1
i = 3 j = 2
i = 3 j = 3
FINAL i = 4 j = 0

[Learn JavaScript] Operatorul + este special

The + operator is a special one -- it gives priority to string operands over numeric operands. If either operand to + is a string (or an object), the other operand is converted to a string (or both operands are converted to strings) and concatenated, rather than added.

On the other hand, the comparison operators (<, >, <=, >=) perform string comparison only if both operands are strings. If only one operand is a string, JavaScript attempts to convert it to a number.

1 + 2        // Addition. Result is 3.
"1" + "2"    // Concatenation. Result is "12".
"1" + 2      // String Concatenation; 2 is converted to "2". Result is "12".
11 < 3       // Numeric comparison. Result is false.
"11" < "3"   // String comparison. Result is true.
"11" < 3     // Numeric comparison; "11" converted to 11. Result is false.
"one" < 3    // Numeric comparison; "one" converted to NaN. Result is false.
             // In JavaScript 1.1, this causes an error instead of NaN.

It is important to note that when the + operator is used with strings and numbers, it may not be associative. That is, the result may depend on the order in which operations are performed. This can be seen with examples like these:

s = 1 + 2 + " blind mice";   // Yields "3 blind mice"
t = "blind mice: " + 1 + 2;  // Yields "blind mice: 12"

The reason for this surprising difference in behavior is that the + operator works from left to right.

http://docstore.mik.ua/orelly/webprog/jscript/ch05_06.htm

Operatori in JavaScript

P	A	Operator	Operand type(s)	Operation performed
15	L	`.`	object, identifier	Property access
	L	`[]`	array, integer	Array index
	L	`( )`	function, arguments	Function call
	R	`new`	constructor call	Create new object
14	R	`++`	lvalue	Pre- or post-increment (unary)
	R	`--`	lvalue	Pre- or post-decrement (unary)
	R	`-`	number	Unary minus (negation)
	R	`+`	number	Unary plus (no-op)
	R	`~`	integer	Bitwise complement (unary)
	R	`!`	boolean	Logical complement (unary)
	R	`delete`	lvalue	Undefine a property (unary)
	R	`typeof`	any	Return data type (unary)
	R	`void`	any	Return undefined value (unary)
13	L	`*, /, %`	numbers	Multiplication, division, remainder
12	L	`+, -`	numbers	Addition, subtraction
	L	`+`	strings	String concatenation
11	L	`<<`	integers	Left shift
	L	`>>`	integers	Right shift with sign-extension
	L	`>>>`	integers	Right shift with zero extension
10	L	`<, <=`	numbers or strings	Less than, less than or equal
	L	`>, >=`	numbers or strings	Greater than, greater than or equal
	L	`instanceof`	object, constructor	Check object type
	L	`in`	string, object	Check whether property exists
9	L	`==`	any	Test for equality
	L	`!=`	any	Test for inequality
	L	`===`	any	Test for identity
	L	`!==`	any	Test for non-identity
8	L	`&`	integers	Bitwise AND
7	L	`^`	integers	Bitwise XOR
6	L	`\|`	integers	Bitwise OR
5	L	`&&`	booleans	Logical AND
4	L	`\|\|`	booleans	Logical OR
3	R	`?:`	boolean, any, any	Conditional operator (3 operands)
2	R	`=`	lvalue, any	Assignment
	R	`*=, /=, %=, +=,` `-=, <<=, >>=, >>>=, &=, ^=, \|=`	lvalue, any	Assignment with operation
1	L	`,`	any	Multiple evaluation

The column labeled "P" specifies the precedence of each operator. Operator precedence controls the order in which operations are performed. Operators with higher numbers in the "P" column are performed before those with lower numbers.
Consider the following expression:

w = x + y*z;

The multiplication operator * has a higher precedence than the addition operator +, so the multiplication is performed before the addition. Furthermore, the assignment operator = has the lowest precedence, so the assignment is performed after all the operations on the righthand side are completed.

Obs.

In JavaScript all numbers are floating-point, so all divisions have floating-point results: 5/2 evaluates to 2.5, not 2.
While the modulo operator is typically used with integer operands, it also works for floating-point values. For example, -4.3 % 2.1 evaluates to -0.1.

http://docstore.mik.ua/orelly/webprog/jscript/ch05_02.htm

Iphone CSS

Dimensiunile ecranului 320px cu 480px.

<meta name="viewport" content="width=320">

-> pentru a seta latimea ecranului (si implicit zoomul).

Putin javascript:

window.scrollTo(0, 1) -> pentru a ascunde bara iphone-ului

onorientationchange -> eveniment: la schimbarea orientarii mobilului ( portret <->orizontal )

http://css-tricks.com/video-screencasts/38-basics-tips-on-designing-for-the-iphone/

Colectarea gunoiului in javascript

Garbage Collection

In languages like C and C++, memory must be freed manually.

The JavaScript interpreter is able to detect when an object will never again be used by the program. When it determines that an object is unreachable (i.e., there is no longer any way to refer to it using the variables in the program), it knows that the object is no longer needed and its memory can be reclaimed.

Garbage collection is automatic and is invisible to the programmer. You can create all the garbage objects you want, and the system will clean up after you!

http://docstore.mik.ua/orelly/webprog/jscript/ch04_05.htm

Variables scope chain

When JavaScript code needs to look up the value of a variable x (a process called variable name resolution), it starts by looking at the first object in the chain. If that object has a property named x, the value of that property is used. If the first object does not have a property named x, JavaScript continues the search with the next object in the chain. If the second object does not have a property named x, the search moves on to the next object, and so on.

http://docstore.mik.ua/orelly/webprog/jscript/ch04_07.htm

Variabile In JavaScript

Exemple de variabile:
var i, sum;

for(var i = 0, j=10; i < 10; i++,j--) document.write(i*j, "
");

Observatii importante:

If you attempt to read the value of an undeclared variable, JavaScript will generate an error.

If you assign a value to a variable that you have not declared with var, JavaScript will implicitly declare that variable for you. Implicitly declared variables are always created as global variables, even if they are used within the body of a function. To prevent the creation of a global variable (or the use of an existing global variable) when you meant to create a local variable for use within a single function, you must always use the var statement within function bodies.:

Exemplu:

var scope = "global";         // Declare a global variable
function checkscope( ) {
    var scope = "local";      // Declare a local variable with the same name
    document.write(scope);    // Use the local variable, not the global one
}
checkscope( );               // Prints "local"

All variables declared in a function, no matter where they are declared, are defined throughout the function.

Exemplu:

var scope = "global";
function f( ) {
    alert(scope);         // Displays "undefined", not "global"
    var scope = "local";  // Variable initialized here, but defined everywhere
    alert(scope);}         // Displays "local"}
f( );

The local variable is defined throughout the body of the function, which means the global variable by the same name is hidden throughout the function. Although the local variable is defined throughout, it is not actually initialized until the var statement is executed.

Cartea:
http://docstore.mik.ua/orelly/webprog/jscript/ch04_01.htm

Calculator js pentru credite bancare

Teoria:
http://www.investopedia.com/articles/03/082703.asp

Practica:

Calculul efectiv (javascript):



function calculate() {

// Get the user's input from the form. Assume it is all valid.

// Convert interest from a percentage to a decimal, and convert from

// an annual rate to a monthly rate. Convert payment period in years

// to the number of monthly payments.

var principal = document.loandata.principal.value;

var interest = document.loandata.interest.value / 100 / 12;

var payments = document.loandata.years.value * 12;



// Now compute the monthly payment figure, using esoteric math.

var x = Math.pow(1 + interest, payments);

var monthly = (principal*x*interest)/(x-1);



// Check that the result is a finite number. If so, display the results.

if (!isNaN(monthly) && 

(monthly != Number.POSITIVE_INFINITY) &&

(monthly != Number.NEGATIVE_INFINITY)) {



document.loandata.payment.value = round(monthly);

document.loandata.total.value = round(monthly * payments);

document.loandata.totalinterest.value = 

round((monthly * payments) - principal);

}

// Otherwise, the user's input was probably invalid, so don't

// display anything.

else {

document.loandata.payment.value = "";

document.loandata.total.value = "";

document.loandata.totalinterest.value = "";

}

}



// This simple method rounds a number to two decimal places.

function round(x) {

return Math.round(x*100)/100;

}

Link:

http://docstore.mik.ua/orelly/webprog/jscript/ch01_08.htm#jscript4-CHP-1-EX-3

Cartea:

Selectorii CSS

Selector	Ce reprezinta	Denumire
*	Orice element	Selector universal
E	Orice element E, i.e orice marcaj de tipul E	Selectori de marcaj
E F	Orice element F, care este descendent al unui element de tip E	Selector Descendent
E > F	Orice element F care este copil al unui element de tip E	Selector copil
E:first-child	Orice element E, cand este primul copil ala parintelui sau	Selector primul-copil
E:link E:visited	Linkurile nevizitate inca/vizitate	Pseudo-clasele linkurilor
E:active E:hover E:focus	Linkurile E, la diferite actiuni (atentie la ordinea LOVE/HATE)	Pseudo-clasele dinamice
E:lang(c)	Orice element E daca este in limba c	Pseudo clasa de limba
E + F	Orice element F ce este imediat urmator unui element vecin, de tip E	Selector adiacent
E[x]	Orice element E, al carui atribut x este setat	Selector de atribut
E[x="eroare"]	Orice element E, al carui atribut x are exact valoarea "eroare"	Selector de atribut
E[x~="warning"]	Orice element E, al carui atribut x are contine valoarea "eroare"(dintr-o lista de valori)	Selector de atribut
E[x\|="en"]	Orice element E, al carui atribut x incepe cu "en"	Selector de atribut
DIV.warning	Echivalent cu DIV[class~="warning"]: orice div ale carui clase contine si valoarea "warning"	Selector de clasa
E#myid	Orice element E cu id-ul "myid"	Selector de id

Putin Fashion

Watch live streaming video from fashioneclub at livestream.com

I heart CSS - Firefox only

Made with CSS3.

Vezi si alte iconite facute exclusiv cu CSS: http://rathersplendid.net/cssicons/

Rezolutii curente si denumirile lor

Code	Name	Aspect ratio	Width	Height
VGA	Video Graphics Array	4:3	640	480
SVGA	Super Video Graphics Array	4:3	800	600
XGA	eXtended Graphics Array	4:3	1024	768
XGA+	eXtended Graphics Array Plus	4:3	1152	864
WXGA	Widescreen eXtended Graphics Array	5:3	1280	768
WXGA	Widescreen eXtended Graphics Array	8:5 (16:10)	1280	800
SXGA	Super eXtended Graphics Array	4:3	1280	960
SXGA	Super eXtended Graphics Array	5:4	1280	1024
WXGA	Widescreen eXtended Graphics Array	16:9	1366	768
WSXGA	Widescreen Super eXtended Graphics Array	8:5 (16:10)	1440	900
UXGA	Ultra eXtended Graphics Array	4:3	1600	1200
WSXGA+	Widescreen Super eXtended Graphics Array Plus	8:5 (16:10)	1680	1050
HD-1080	Full High Definition	16:9	1920	1080
WUXGA	Widescreen Ultra eXtended Graphics Array	8:5 (16:10)	1920	1200

Trepte pentru marimea fonturilor in Html/css

...
sau:
font[size="1"]{
font-size:10px
}

...
sau:
font[size="2"]{
font-size:13px
}

...
sau:
font[size="3"]{
font-size:16px; // medium size
}

...
sau:
font[size="4"]{
font-size:18px;
}

...
sau:
font[size="5"]{
font-size:24px;
}

...
sau:
font[size="6"]{
font-size:32px;
}

...
sau:
font[size="7"]{
font-size:48px;
}

Valoarea default a tuturor browserelor este 16px/medium, iar pentru titluri:

Heading h1 - 32px

Heading h2 - 24px

Heading h3 - 19px

Heading h4 - 16px

Heading h5 - 13px

Heading h6 - 11px

Fonturi folosite pe web

New York Times http://www.nytimes.com

Georgia 20px/15px ; 24px (h1) + Arial 10px
Vanity Fair http://www.vanityfair.com

Georgia 22px/13px+Verdana 10px
Yahoo http://news.yahoo.com

Titluri: Georgia 26px (h1: 28px) + text: Arial 13px
Mocoloco http://mocoloco.com/

titluri : Arial litere mari 22px (h1:30px) + text: Georgia 12px
BBC http://www.bbc.co.uk/

Titluri: Verdana 18px (h1:22px) + text: Verdana 12px
Wordpress http://wordpress.org

Titluri: Georgia 16px Italic (h1:36px normal) + text: Lucida Grande 12px

Concluzie: Georgia este unul din cele mai folosite fonturi, iar serifurile sunt in tendinte.

Cum sa scrii o extensie pentru Google Chrome

1. Citeste documentatia de la google:
http://code.google.com/chrome/extensions/getstarted.html

2.Creeaza propria ta extensie.
Exemplul meu evidentiaza linkurile atributul "cu nofollow" doar prin background, culoare si caractere italice, dar nu si chenar. (chenarul poate strica uneori layoutul siteului).

Codul este cat se poate de simplu: un css cu urmatoarele randulete:
a[rel~=nofollow]
{
background-color: cyan !important;
border: 0!important;
color: #630 !important;
font-style:italic !important
}

3.Instaleaza si trimite codul tau catre galeria de extensii.

Rezultat:

Eternele colturi rotunjite in css cross browser

border:5px solid #666;
-o-border-radius: 20px; // pentru Opera
-icab-border-radius: 20px; //pentru Icab
-khtml-border-radius: 20px;// pentru Konqueror
-moz-border-radius: 20px;// pentru Firefox
-webkit-border-radius: 20px;// pentru Safari si Chrome
border-radius: 20px;// viitorul standard

Ps. Despre IE:
Prezent:
"While the W3C has specified the border-radius properties in its latest CSS3 working draft, Microsoft has not implemented the border-radius properties in Internet Explorer 8." vezi http://msdn.microsoft.com/en-us/library/bb250413%28VS.85%29.aspx#borderradius

Viitorul IE9:
A more meaningful (from the point of view of web developers) example of standards support involves rounded corners. Here’s IE9 drawing rounded corners

Update: Da, Ie9 suporta border-radius !!!

Holographic Laser Projection

Viitorul suna bine...

Via http://lightblueoptics.com/products/light-touch/ and http://revuedesign.wordpress.com/2010/01/12/light-touch-light-blue-optics/

Oldies but goldies / Vintage si totodata foarte moderne 2010

Great typography and graphics via http://www.vintageadbrowser.com.

Enter Loan Information:
1)	Amount of the loan (any currency):
2)	Annual percentage rate of interest:
3)	Repayment period in years:

Payment Information:
4)	Your monthly payment will be:
5)	Your total payment will be:
6)	Your total interest payments will be:

Garbage Collection

Variables scope chain

Pagini