jQuery: Introdução e Plugins matadores

Palestra promovida pela FATEC Franca, no evento Tech Week.

Tags: HTML, JavaScript, CSS, DOM, Server-side, Client-side, jQuery, Highcharts, DataTables

Transcript

1. jQuery Introdução e Plugins matadores
2. Vamos falar sobre 1. Conceitos básicos (HTML, JavaScript, CSS e DOM) 2. Diferença entre server-side e client-side 3. jQuery: Apresentação, Instalação e ‘Hello World’ 4. Highcharts e DataTables 5. Compilação de plugins
3. Vamos falar sobre 1. Conceitos básicos (HTML, JavaScript, CSS e DOM) 2. Diferença entre server-side e client-side 3. jQuery: Apresentação, Instalação e ‘Hello World’ 4. Highcharts e DataTables 5. Compilação de plugins
4. HTML “HTML é uma linguagem para descrever páginas web” – W3CSchools
5. JavaScript “É uma linguagem para web, servidores, PCs, laptops, tablets, smart phones, e mais.” – W3CSchools
6. CSS “Define como os elementos HTML devem ser exibidos.” – W3CSchools
7. DOM “Define um padrão de acesso e manipulação de documentos HTML.” – W3CSchools
8. Vamos falar sobre 1. Conceitos básicos (HTML, JavaScript, CSS e DOM) 2. Diferença entre server-side e client-side 3. jQuery: Apresentação, Instalação e ‘Hello World’ 4. Highcharts e DataTables 5. Compilação de plugins
9. Server-side “O código é primeiramente executado no servidor e então os dados são enviados para o navegador do usuário.” – PHP website
10. Client-side “Define o comportamento do navegador, sendo assim, o código é executado pelo próprio navegador.” – W3CSchools
11. Vamos falar sobre 1. Conceitos básicos (HTML, JavaScript, CSS e DOM) 2. Diferença entre server-side e client-side 3. jQuery: Apresentação, Instalação e ‘Hello World’ 4. Highcharts e DataTables 5. Compilação de plugins
12. jQuery simplifica a programação JavaScript é uma biblioteca JavaScript é muito fácil de aprender
13. Instalação 1. Faça o download em http://jquery.com 2. Crie um arquivo HTML 3. Adicione a referência ao arquivo jquery.js <!DOCTYPE html> <html> <head> <script src="jquery.js"></script> </head> <body> </body> </html>
14. Hello World com jQuery <!DOCTYPE html> <html> <head> <script src="jquery.js"></script> </head> <body> <script> $(document).ready(function(){ alert('Olá mundo com jQuery'); }); </script> </body> </html>
15. jQuery vs DOM Scripting <!DOCTYPE html> <html> <head></head> <body> <script> function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } function mensagem(){ alert('Ola mundo sem jQuery'); } addLoadEvent(mensagem); </script> </body> </html> <!DOCTYPE html> <html> <head> <script src="jquery.js"></script> </head> <body> <script> $(document).ready(function(){ alert('Olá mundo com jQuery'); }); </script> </body> </html>
16. Vamos falar sobre 1. Conceitos básicos (HTML, JavaScript, CSS e DOM) 2. Diferença entre server-side e client-side 3. jQuery: Apresentação, Instalação e ‘Hello World’ 4. Highcharts e DataTables 5. Compilação de plugins
17. Highcharts
18. DataTables
19. Vamos falar sobre 1. Conceitos básicos (HTML, JavaScript, CSS e DOM) 2. Diferença entre server-side e client-side 3. jQuery: Apresentação, Instalação e ‘Hello World’ 4. Highcharts e DataTables 5. Compilação de plugins
20. Web Forms, Typography, Time-Savers and Images Text, Tables, List and Useful Development Tools http://coding.smashingmagazine.com/2012/09/23/useful-javascript-libraries-jquery-plugins-web-developers/ http://coding.smashingmagazine.com/useful-javascript-libraries-jquery-plugins-part-2/
21. Obrigado!