O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

Intro to Javascript and jQuery

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Próximos SlideShares
Intro to jQuery
Intro to jQuery
Carregando em…3
×

Confira estes a seguir

1 de 16 Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Quem viu também gostou (19)

Anúncio

Semelhante a Intro to Javascript and jQuery (20)

Anúncio

Mais recentes (20)

Intro to Javascript and jQuery

  1. 1. javascript & jquery 22-3375 Web Design I // Columbia College Chicago
  2. 2. Student Presentations Present portfolio mockups Walk us through the flow (homepage, detail, about) What types of work will you be showing? Any special interactions that you need to work out? Will you be able to code this by the end of the course?
  3. 3. What is a javascript? JavaScript (sometimes abbreviated JS) is a scripting language commonly implemented as part of a web browser in order to create enhanced user interfaces and dynamic websites. Javascript is a client-side programming language, which means that it resides on the client’s machine and not on the server (in your browser).
  4. 4. Javascript Syntax
  5. 5. Every script is made up of a series of statements. <script> first statement; second statement; </script>
  6. 6. A JavaScript function is a "recipe" of instructions (i.e., statements or commands) whose purpose is to accomplish a well-defined task. <script> function square (number) { var result = number * number; return result; } </script>
  7. 7. Variables in JavaScript are similar to the variables you may have studied in high school algebra. You can think of variables as "holding places" where values are stored and retrieved. <script> greeting = "Hello"; greeting = greeting + ", my friend."; </script>
  8. 8. Where does javascript go? Javascript is usually typed in the <head> element, in a linked .js file, or both.
  9. 9. Where does javascript go? Javascript is usually typed in the <head> element, in a linked .js file, or both.
  10. 10. Try It <script> function displayDate( { document.getElementById("date").innerHTML=Date(); } </script>
  11. 11. Getting Started with jquery
  12. 12. What is a jquery? jQuery is a multi-browser JavaScript library designed to simplify the client-side scripting of HTML. “Library” in this contexts means a group of javascript functions (which you might see referred to as methods) that you can access and run on your page with very little coding. jQuery is javascript, but it uses it’s own “selector engine” that is very designer friendly. A “selector engine” is just the way that you reference elements in your html in order to make the do something. jQuery uses CSS selectors, which you already know how to use!
  13. 13. Where does jquery go? The jquery library is linked from the <head> document. You can download the jquery file from jquery.com, or link to the Google version. It should go below your CSS, but above any scripts or plugins.
  14. 14. Where does jquery go?
  15. 15. Where does jquery go?
  16. 16. Try It <script> $(document).ready(function(){ $(".btn-slide").click(function(){ $("#panel").slideToggle("slow"); $(this).toggleClass("active"); return false }); }); </script>

×