Obiecte in javascript

Metoda clasica de scriere a unui obiect:

function Circle(radius){
this.radius = radius;
this.getArea = function(){
return (this.radius*this.radius*3.14);
}

this.getCircumference = function(){
var diameter = this.radius*2;
var circumference = diameter*3.14;
return circumference;
}
}


Exemplul ilustraza folosirea proprietatilor si metodelor obiectelor.


...............................................

Pentru ca in JavaScript obiectele sunt si vectori asociativi, atunci putem folosi sintaxa:


testObj = {
prop1:"hello",
prop2:"hello2",
prop3:new Array("helloa",1,2)
}

for(x in testObj) alert( x + "-" + testObj[ x ] )


sau folosind jquery:


jQuery.each(testObj, function(key, value) {
console.log("key", key, "value", value);
});



Iata si un exemplu mai complex ce foloseste jQuery si 2 functii utilitare:

$.extend si call

var contactForm = {

container: $('#contact'),

config: {
effect: 'slideToggle',
speed: 500
},

init: function(config) {
$.extend(this.config, config);

$("<button ></ button>", {
text: 'Contact Me'
})
.insertAfter( 'article:first' )
.on( 'click', this.show );
},

show: function() {
var cf = contactForm,
container = cf.container,
config = cf.config;

if ( container.is(':hidden') ) {
contactForm.close.call(container);
container[config.effect](config.speed);
}
},

close: function() {
var $this = $(this), // #contact
config = contactForm.config;

if ( $this.find('span.close').length ) return;

$('X')
.prependTo(this)
.on('click', function() {
// this = span
$this[config.effect](config.speed);
})
}
};

contactForm.init({
// effect: 'fadeToggle',
speed: 300
});



Mai multe detalii:
http://tutsplus.com/lesson/slides-and-structure/

Latimea siteurilor traditionale (css)

Facebook.com	981px (fixed)
Linkedin.com	980px (fixed)
Ebay.com (listing)	760px - 1200px (liquid)
Amazon.com	980px - 100% (liquid)
Mobile.de (fixed)	978px (fixed)
Bmw.de (fixed) (left aligned)	1024px (fixed)
Mercedes-benz.de (left aligned)	1000px (fixed)
Gsmarena.com	1002px (fixed)
Nytimes.com	972px (fixed)

Transitions and transformations with css3 and jquery fallback for ie

.home-section:hover img{
-webkit-transform: rotate(315deg) scale(0.5);
 -moz-transform: rotate(315deg) scale(0.5);
 -o-transform: rotate(315deg) scale(0.5); 
-ms-transform:scale(0.5,0.5) rotate(315deg) ; /* the order is important */
 transform: rotate(315deg) scale(0.5); /* future standard */
-webkit-transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
-o-transition: all 1s ease-in; 
-ms-transition: all 1s ease-in; /* future IE 10 */
transition: all 1s ease-in; /* future standard */
}

.home-section img{
-webkit-transition: all 2s ease-in-out;
 -moz-transition: all 2s ease-in-out;
 -o-transition: all 2s ease-in-out;
 -ms-transition: all 2s ease-in-out; /* future IE 10 */
transition: all 2s ease-in-out; /* future standard */
}

For IE 9:

 <!--[if lte IE 9]>
  <script type="text/javascript" 

src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">

</script>

<script type="text/javascript" src="jquery-css-transform.js"></script>

<script type="text/javascript" src="jquery-animate-css-rotate-scale.js">

</script>

<script type="text/javascript">

$().ready(function() {
$('.home-section').hover(function () {								   
$(this).find('img').animate({rotate: '+=315deg', scale: '-=0.5'}, 1000);
},function () {								   
$(this).find('img').animate({rotate: '-=315deg', scale: '+=0.5'}, 2000);
});
});			
	</script>
   <![endif]-->  
  
   

Where to find jquery-animate-css-rotate-scale.js :
http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html Thanks Zach!

More on CSS3 Transitions and transformations:
http://msdn.microsoft.com/en-us/library/ff974936%28v=vs.85%29.aspx
http://css3please.com/