Introdução

Gustavo Dutra

void bogosort(int size, int *array) { int i, j; for (i = 1; i <= size; i++) if (i == size) return; else if (array[i-1] > array[i]) break; for (i = 0; i < size; i++) { j = rand() % size; if (array[i] != array[j]) { int aux = array[i]; array[i] = array[j]; array[j] = aux; } } bogosort(size, array);} Adaptado de

http://pt.wikipedia.org/wiki/Bogosort#C

C

from random import shuffle

def bogosort(seq): while not all(x<=y for x,y in zip(seq,seq[1:])): shuffle(seq) return seq

Adaptado dehttp://pt.wikipedia.org/wiki/Bogosort#Python

Python

w t f ?

DOM - Data Object Model

Define um padrão para acessar documentos

DOM Core Qualquer documento

DOM XML XML

DOM HTML HTML

Fonte: http://www.w3schools.com/HTMLDOM/dom_intro.asp

OBJETOS MÉTODOS PROPRIEDADES

Padrão do quê?

HTML DOMvar el = document.getElementById("myDiv");el.parentNode.removeChild(el);

HTML DOMvar el = document.getElementById("myDiv");el.parentNode.removeChild(el);

jQuery$("#myDiv").remove();

HTML DOM SUCKS!

<input type="text" name="start_date" onchange="validDate(this);" />

<input type="text" name="end_date" onchange="validDate(this);" />

<input type="text" name="start_date" onchange="validDate(this);" />

<input type="text" name="end_date" onchange="validDate(this);" />

E se o JavaScript não estiver habilitado?

E se mudar o nome da função validDate ?

E se for adicionado mais parâmetros?

<input type="text" name="start_date" onchange="validDate(this);" />

<input type="text" name="end_date" onchange="validDate(this);" />

MANDA O ESTAGIÁRIO!

E se o JavaScript não estiver habilitado?

E se mudar o nome da função validDate ?

E se for adicionado mais parâmetros?

<input type="text" name="start_date" class="date" />

<input type="text" name="end_date" class="date" />

<input type="text" name="start_date" class="date" />

<input type="text" name="end_date" class="date" />

window.onload = function() { var inputs = document.getElementsByTagName("input"); for (var i = 0; i < inputs.length; i++) { if (inputs.[i].className == 'date') { inputs[i].onchange = function() { validDate(this); } } }}function validDate(element) { //...}

Javascript Não-Obstrusivo

Javascript Não-Obstrusivo

Graceful Degradation Progressive Enhancement

Javascript Não-Obstrusivo

Não suponha, VERIFIQUE!

Graceful Degradation Progressive Enhancement

Javascript Não-Obstrusivo

Valide em mais de um browser!

Não suponha, VERIFIQUE!

Graceful Degradation Progressive Enhancement

Javascript Não-Obstrusivo

Mantenha os scripts o mais seguroPOSSÍVEL

Valide em mais de um browser!

Não suponha, VERIFIQUE!

Graceful Degradation Progressive Enhancement

DOM SUCKS+

Javascript Não-Obstrusivo

DOM SUCKS+

Javascript Não-Obstrusivo

originaram

jQuery

jQueryCore

jQueryCore

Ajax

jQueryCore

Attributes

Ajax

jQueryCore

Manipulation

Attributes

Ajax

jQueryCore Effects

Manipulation

Attributes

Ajax

jQueryCore

Traversing

Effects

Manipulation

Attributes

Ajax

jQueryCore

Selectors

Traversing

Effects

Manipulation

Attributes

Ajax

jQueryCore

EventsSelectors

Traversing

Effects

Manipulation

Attributes

Ajax

jQueryCore

CSS

EventsSelectors

Traversing

Effects

Manipulation

Attributes

Ajax

jQueryCore

Internals

CSS

EventsSelectors

Traversing

Effects

Manipulation

Attributes

Ajax

jQueryCore

Utilities

Internals

CSS

EventsSelectors

Traversing

Effects

Manipulation

Attributes

Ajax

jQueryCore

jQuery UI

Utilities

Internals

CSS

EventsSelectors

Traversing

Effects

Manipulation

Attributes

Ajax

jQueryCore

Plugins

jQuery UI

Utilities

Internals

CSS

EventsSelectors

Traversing

Effects

Manipulation

Attributes

Ajax

Lets Begin

jQuery === $

((typeof jQuery) == "function")

((typeof $) == "function")

jQuery === Jaspion

Jaspion = $.noConflict()

((typeof $) == "undefined")

window.onload = function() { // ...}

$(document).ready(function() { // ...});

$(function() { // ...});

OU

$("div")

$("#id")

$(".class")

$("div#id > div")

$("ul li")

$("ul li:first,ul li:last")

$("ul li:not(li.active)")

$("li:contains(Home)")

$("li.active ~ li")

div#id

div.class

ul

li

li.active

li

div#id

div.class

ul

li

li.active

li

bodySELETORES

$("div")

$("#id")

$(".class")

$("div#id > div")

$("ul li")

$("ul li:first,ul li:last")

$("ul li:not(li.active)")

$("li:contains(Home)")

$("li.active ~ li")

div#id

div.class

ul

li

li.active

li

div#id

div.class

ul

li

li.active

li

bodySELETORES

$("div")

$("#id")

$(".class")

$("div#id > div")

$("ul li")

$("ul li:first,ul li:last")

$("ul li:not(li.active)")

$("li:contains(Home)")

$("li.active ~ li")

div#id

div.class

ul

li

li.active

li

div#id

div.class

ul

li

li.active

li

div#id

div.class

ul

li

li.active

li

div#id

div.class

ul

li

li.active

li

bodySELETORES

$("div")

$("#id")

$(".class")

$("div#id > div")

$("ul li")

$("ul li:first,ul li:last")

$("ul li:not(li.active)")

$("li:contains(Home)")

$("li.active ~ li")

div#id

div.class

ul

li

li.active

li

div#id

div.class

ul

li

li.active

li

div#id

div.class

ul

li

li.active

li

div#id

div.class

ul

li

li.active

li

bodySELETORES

$("div")

$("#id")

$(".class")

$("div#id > div")

$("ul li")

$("ul li:first,ul li:last")

$("ul li:not(li.active)")

$("li:contains(Home)")

$("li.active ~ li")

div#id

div.class

ul

li

li.active

li

div#id

div.class

ul

li

li.active

li

div#id

div.class

ul

li

li.active

li

div#id

div.class

ul

li

li.active

li

bodySELETORES

div#id

div.class

ul

li

li.active

li

div#id

div.class

ul

li

li.active

li

div#id

div.class

ul

li

li.active

li

div#id

div.class

ul

li

li.active

li

div#id

div.class

ul

li

li.active

li

div#id

div.class

ul

li

li.active

li

div#id

div.class

ul

li

li.active

li

div#id

div.class

ul

li

li.active

li

$("div")

$("#id")

$(".class")

$("div#id > div")

$("ul li")

$("ul li:first,ul li:last")

$("ul li:not(li.active)")

$("li:contains(Home)")

$("li.active ~ li")

bodySELETORES

div#id

div.class

ul

li

li.active

li

div#id

div.class

ul

li

li.active

li

div#id

div.class

ul

li

li.active

li

div#id

div.class

ul

li

li.active

li

$("div")

$("#id")

$(".class")

$("div#id > div")

$("ul li")

$("ul li:first,ul li:last")

$("ul li:not(li.active)")

$("li:contains(Home)")

$("li.active ~ li")

bodySELETORES

div#id

div.class

ul

li

li.active

li

div#id

div.class

ul

li

li.active

li

div#id

div.class

ul

li

li.active

li

div#id

div.class

ul

li

li.active

li

$("div")

$("#id")

$(".class")

$("div#id > div")

$("ul li")

$("ul li:first,ul li:last")

$("ul li:not(li.active)")

$("li:contains(Home)")

$("li.active ~ li")

bodySELETORES

div#id

div.class

ul

li

li.active

li

div#id

div.class

ul

li

li.active

li

div#id

div.class

ul

li

li.active

li

div#id

div.class

ul

li

li.active

li

$("div")

$("#id")

$(".class")

$("div#id > div")

$("ul li")

$("ul li:first,ul li:last")

$("ul li:not(li.active)")

$("li:contains(Home)")

$("li.active ~ li")

bodySELETORES

var el = getElementById("myId");$("li", el);

var el = $("#myId");$("li", el);

$("#myId li");

$("li", "#myId");

CONTEXTO

ATRIBUTOS

$(...)

ATRIBUTOS

$(...) .addClass("css-class").removeClass("css-class").toggleClass("css-class")

ATRIBUTOS

$(...)

.html()

.html("innerHTML")

.addClass("css-class")

.removeClass("css-class")

.toggleClass("css-class")

ATRIBUTOS

$(...)

.text()

.text("text")

.html()

.html("innerHTML")

.addClass("css-class")

.removeClass("css-class")

.toggleClass("css-class")

ATRIBUTOS

$(...)

.attr("id")

.attr("id", "new-id")

.text()

.text("text")

.html()

.html("innerHTML")

.addClass("css-class")

.removeClass("css-class")

.toggleClass("css-class")

ATRIBUTOS

$(...)

.val()

.val("input value");

.attr("id")

.attr("id", "new-id")

.text()

.text("text")

.html()

.html("innerHTML")

.addClass("css-class")

.removeClass("css-class")

.toggleClass("css-class")

$(...)

.children()

ATRAVESSAR

$(...)

.children()

.eq(0)

ATRAVESSAR

$(...)

.children()

.eq(0).next()

ATRAVESSAR

$(...)

.children()

.eq(0)

.next() .prev()

ATRAVESSAR

$(...)

.children()

.eq(0)

.next()

.prev().find(...)

ATRAVESSAR

$(...)

.children()

.eq(0)

.next()

.prev()

.find(...)

.end()

ATRAVESSAR

MANIPULAR

.prepend()

.append()

$(...)

MANIPULAR

.after()

$(...)

.before()

$(...)

MANIPULAR

$(...)

.wrap(...)

$(...)

$(...)$(...) .clone(...) $(...)

.clone() cria elementossoltos do documento

EVENTOS

.click(function(event) { // ...});

.dblclick(function(event) { // ...});

.blur(function(event) { // ...});

.keypress(function(event) { // ...});

EVENTOS

.hover(function(event) { // mouseenter},function(event) { // mouseleave});

EVENTOS

.bind('click', function(event) { // ...});

.trigger('click');

.triggerHandler('click');

EVENTOS

.bind('myEv', function(event) { // ...});

.trigger('myEv');

.bind('click', function(event) { // ...});

.trigger('click');

.triggerHandler('click');

EFEITOS

.show()

.hide()

.fadeIn()

.fadeOut()

.slideDown()

.slideUp()

http://GustavoDutra.commechamo@gustavodutra.com

@gustavotkg

La pregunta?