Jquery News Packages
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
744
On Slideshare
525
From Embeds
219
Number of Embeds
2

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 219

https://bcourses.berkeley.edu 216
http://blog.tusharv.in 3

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. jQuery Developing online news packages
  • 2. What is jQuery?
  • 3. Web pages are made up of three elements
  • 4. Web pages are made up of three elements • HTML - content
  • 5. Web pages are made up of three elements • HTML - content • CSS - design
  • 6. Web pages are made up of three elements • HTML - content • CSS - design • JavaScript - interactivity
  • 7. The problem with JavaScript • Simple tasks like manipulating a webpage take lots of code. • Different browsers have slightly different methods of doing things, requiring coders to create fallbacks. • Writing code, like an animation, could be inefficient or not the the best method of doing something.
  • 8. The problem with JavaScript • Simple tasks like manipulating a webpage take lots of code. • Different browsers have slightly different methods of doing things, requiring coders to create fallbacks. • Writing code, like an animation, could be inefficient or not the the best method of doing something. jQuery to the rescue!
  • 9. jQuery is a library written in JavaScript • jQuery is cross-browser compatible. • Makes performing tasks like updating the page, relatively simple. • Less code required to introduce interactivity.
  • 10. JavaScript jQuery
  • 11. JavaScript function  fadeOut(elm,  interval)  {      for  (var  i=10;  i>0;  i-­‐-­‐)  {          var  opacity  =  i/10;          setTimeout(  function(opacity)  {              elm.setStyle("-­‐moz-­‐opacity",opacity);              elm.setStyle("opacity",opacity);              elm.setStyle("filter","alpha(opacity="  +   (opacity*100).toString()  );              //set  alpha  values  for  various  browsers          },  interval;      }   }   ! fadeOut(getElementById('box'),  100); jQuery
  • 12. JavaScript function  fadeOut(elm,  interval)  {      for  (var  i=10;  i>0;  i-­‐-­‐)  {          var  opacity  =  i/10;          setTimeout(  function(opacity)  {              elm.setStyle("-­‐moz-­‐opacity",opacity);              elm.setStyle("opacity",opacity);              elm.setStyle("filter","alpha(opacity="  +   (opacity*100).toString()  );              //set  alpha  values  for  various  browsers          },  interval;      }   }   ! fadeOut(getElementById('box'),  100); jQuery $('#box').fadeOut();
  • 13. Where do I get jQuery? jquery.com OR Link directly to the "Content Delivery Network" (CDN) http://code.jquery.com/jquery.min.js
  • 14. Where do I put jQuery? <head>   !      <title>Some  page  title</title>        <style>              #container{                      width:600px;              }        </style>        <script  src="jquery.min.js"></script>        <script>              //your  jquery  commands  go  here        </script>   ! </head>
  • 15. Where do I put jQuery? <head>   !      <title>Some  page  title</title>        <style>              #container{                      width:600px;              }        </style>        <script  src="jquery.min.js"></script>        <script>              //your  jquery  commands  go  here        </script>   ! </head> jQuery Library
  • 16. Where do I put jQuery? <head>   !      <title>Some  page  title</title>        <style>              #container{                      width:600px;              }        </style>        <script  src="jquery.min.js"></script>        <script>              //your  jquery  commands  go  here        </script>   ! </head> jQuery Library Your jQuery commands
  • 17. Where do I put jQuery? <head>   !      <title>Some  page  title</title>        <style>              #container{                      width:600px;              }        </style>        <script  src="jquery.min.js"></script>        <script>              //your  jquery  commands  go  here        </script>   ! </head> jQuery Library Your jQuery commands CSS code (before/after)
  • 18. Review
  • 19. What is jQuery?
  • 20. Where on my web page do I put jQuery?
  • 21. Understanding syntax
  • 22. Understanding the syntax $
  • 23. Understanding the syntax $ This means 'jQuery'
  • 24. What do you want to manipulate? $(".somebox") $("#video") $("div")
  • 25. What do you want to manipulate? $(".somebox") $("#video") $("div")
  • 26. What do you want to manipulate? $(".somebox") $("#video") $("div")
  • 27. What do you want to manipulate? $(".somebox") $("#video") $("div")
  • 28. What do you want to manipulate? $(".somebox") $("#video") $("div") Note the quotes and parentheses
  • 29. jQuery commands $("#container").doSomething();
  • 30. jQuery commands $("#container").doSomething();
  • 31. jQuery commands $("#container").doSomething();
  • 32. jQuery commands $("#container").doSomething();
  • 33. jQuery commands $("#container") $("#container") $("#container")
  • 34. jQuery commands $("#container") .fadeOut(); $("#container") $("#container")
  • 35. jQuery commands $("#container") .fadeOut(); $("#container") .hide(); $("#container")
  • 36. jQuery commands $("#container") .fadeOut(); $("#container") .hide(); $("#container") .slideDown();
  • 37. Parts of jQuery command $("#container").fadeOut();
  • 38. Parts of jQuery command $("#container").fadeOut(); jQuery
  • 39. Parts of jQuery command parentheses $("#container").fadeOut(); jQuery
  • 40. Parts of jQuery command parentheses $("#container").fadeOut(); quotes jQuery
  • 41. Parts of jQuery command parentheses $("#container").fadeOut(); css selector quotes jQuery
  • 42. Parts of jQuery command parentheses $("#container").fadeOut(); css selector quotes jQuery dot
  • 43. Parts of jQuery command parentheses $("#container").fadeOut(); css selector quotes jQuery command dot
  • 44. Parts of jQuery command parentheses $("#container").fadeOut(); css selector quotes jQuery command dot parentheses
  • 45. Parts of jQuery command semicolon parentheses $("#container").fadeOut(); css selector quotes jQuery command dot parentheses
  • 46. Review
  • 47. Describe the jQuery command to fade out a div element with the id name "container"
  • 48. Describe the jQuery command to fade out a div element with the id name "container" $
  • 49. Describe the jQuery command to fade out a div element with the id name "container" $(
  • 50. Describe the jQuery command to fade out a div element with the id name "container" $ ("
  • 51. Describe the jQuery command to fade out a div element with the id name "container" $ ("#container
  • 52. Describe the jQuery command to fade out a div element with the id name "container" $ ("#container"
  • 53. Describe the jQuery command to fade out a div element with the id name "container" $ ("#container")
  • 54. Describe the jQuery command to fade out a div element with the id name "container" $ ("#container").
  • 55. Describe the jQuery command to fade out a div element with the id name "container" $ ("#container").fadeOut
  • 56. Describe the jQuery command to fade out a div element with the id name "container" $ ("#container").fadeOut()
  • 57. Describe the jQuery command to fade out a div element with the id name "container" $ ("#container").fadeOut();
  • 58. jQuery in action <div  id="box"></div>
  • 59. jQuery in action <div  id="box"></div> $("#box").fadeOut();
  • 60. jQuery in action <div  id="box"></div>
  • 61. jQuery in action <div  id="box"></div> $("#box").slideUp();
  • 62. jQuery in action <div  id="box"></div>
  • 63. jQuery in action <div  id="box"></div> $("#box").hide();
  • 64. jQuery in action <div  id="box"></div>
  • 65. jQuery in action <div  id="box"></div> Hello World $("#box").text("Hello  World");
  • 66. Parameters
  • 67. Parameters in jQuery $("#container").fadeOut();
  • 68. Parameters in jQuery $("#container").fadeOut(); parentheses
  • 69. Parameters in jQuery $("#container").fadeOut("slow");
  • 70. Parameters in jQuery $("#container").fadeOut("slow"); parameter
  • 71. Parameters in jQuery $("#container").fadeOut(3000);
  • 72. Parameters in jQuery $("#container").fadeOut(3000); parameter
  • 73. Parameters in jQuery $("#container").text("Hello  World"); All text has to be in quotes, unless it is some special command recognized by JavaScript.
  • 74. Parameters in jQuery $("#container").text("Hello  World"); quotes All text has to be in quotes, unless it is some special command recognized by JavaScript.
  • 75. Parameters in jQuery $("#container").fadeOut(200); Will fade out element with id #container in 200 milliseconds
  • 76. Parameters in jQuery $("#container").fadeOut(200); Will fade out element with id #container in 200 milliseconds
  • 77. Review
  • 78. Why is there a parenthesis at the end of every jQuery command? $("#someid").command(); wtf?
  • 79. Why is there a parenthesis at the end of every jQuery command? $("#someid").command(); wtf? To sometimes include additional information about how the command should operate oh.
  • 80. What does the following jQuery command do? $("#title").fadeOut(4000);
  • 81. What does the following jQuery command do? $("#title").fadeOut(4000); Fades out some HTML element with an id attribute "title" over the course of four seconds
  • 82. What's wrong with the following jQuery command? $("#footer").text(This  is  copyrighted);
  • 83. What's wrong with the following jQuery command? $("#footer").text(This  is  copyrighted); When the parameter is text, it NEEDS to have quotes or it won't work. $("#footer").text("This  is  copyrighted");
  • 84. Multiple Parameters
  • 85. Multiple Parameters $("#container").css("background",  "red");
  • 86. Multiple Parameters $("#container").css("background",  "red"); 1st parameter 2nd parameter
  • 87. Multiple Parameters comma $("#container").css("background",  "red"); 1st parameter 2nd parameter
  • 88. Multiple Parameters $("#container").fadeTo(5000,  0.5);
  • 89. Multiple Parameters $("#container").fadeTo(5000,  0.5);
  • 90. Multiple Parameters comma $("#container").fadeTo(5000,  0.5);
  • 91. Review
  • 92. What character symbol do I use to separate multiple parameters?
  • 93. What character symbol do I use to separate multiple parameters? A comma $("#container").css("background",  "red");
  • 94. How would I write a command to change the CSS of #box so that the text color is blue?
  • 95. How would I write a command to change the CSS of #box so that the text color is blue? $
  • 96. How would I write a command to change the CSS of #box so that the text color is blue? $(
  • 97. How would I write a command to change the CSS of #box so that the text color is blue? $ ("#box"
  • 98. How would I write a command to change the CSS of #box so that the text color is blue? $ ("#box")
  • 99. How would I write a command to change the CSS of #box so that the text color is blue? $ ("#box").
  • 100. How would I write a command to change the CSS of #box so that the text color is blue? $ ("#box").css
  • 101. How would I write a command to change the CSS of #box so that the text color is blue? $ ("#box").css(
  • 102. How would I write a command to change the CSS of #box so that the text color is blue? $ ("#box").css("color"
  • 103. How would I write a command to change the CSS of #box so that the text color is blue? $ ("#box").css("color",
  • 104. How would I write a command to change the CSS of #box so that the text color is blue? $ ("#box").css("color","blue"
  • 105. How would I write a command to change the CSS of #box so that the text color is blue? $ ("#box").css("color","blue" )
  • 106. How would I write a command to change the CSS of #box so that the text color is blue? $ ("#box").css("color","blue" );
  • 107. Functions
  • 108. What are functions? • Functions are simply blocks of code that are in a waiting queue to be run. • Think of it as a way of saying "do the following…" but only when activated. • Functions only run at certain times. In jQuery, a function is usually runs when a user clicks a button, or performs some type of action.
  • 109. jQuery functions $("#button").on("click"…
  • 110. jQuery functions wait for something to happen $("#button").on("click"…
  • 111. jQuery functions $("#button").on("click",  function(){});
  • 112. jQuery functions $("#button").on("click",  function(){});
  • 113. jQuery functions parenthesis, which we won't ever use in functions $("#button").on("click",  function(){});
  • 114. jQuery functions parenthesis, which we won't ever use in functions $("#button").on("click",  function(){}); We put code inside the curly brackets to be called only after the event click happens.
  • 115. jQuery functions $("#button").on("click",  function(){});
  • 116. jQuery functions $("#button").on("click",  function(){ $("#box").fadeOut(); }); Code only runs after! button is clicked.
  • 117. Anatomy of a function function  (){}
  • 118. Anatomy of a function function  (){ Code goes here }
  • 119. Review
  • 120. What's a function?
  • 121. What's a function? A block of code which is only run at a certain time, like after an event, such as when a user clicks on a button.
  • 122. Describe all the parts of a function from beginning to end.
  • 123. Describe all the parts of a function from beginning to end. function
  • 124. Describe all the parts of a function from beginning to end. function()
  • 125. Describe all the parts of a function from beginning to end. function(){}
  • 126. Where does the code go that should execute when this function is run? function(){}
  • 127. Where does the code go that should execute when this function is run? function(){} Right here
  • 128. What does the following do in jQuery? $("#button").on("click",  function(){   !   $("#title").fadeOut("fast");   ! });
  • 129. What does the following do in jQuery? $("#button").on("click",  function(){   !   $("#title").fadeOut("fast");   ! }); When the HTML element with the id attribute "button" is clicked, an element "title" will fade out quickly.
  • 130. Animation
  • 131. animate method $("#box").animate({'left':'50px'},  3000); Just to expose you to this command (don't worry about memorizing it)
  • 132. animate method $("#box").animate({'left':'50px'},  3000); jquery selector Just to expose you to this command (don't worry about memorizing it)
  • 133. animate method jquery command $("#box").animate({'left':'50px'},  3000); jquery selector Just to expose you to this command (don't worry about memorizing it)
  • 134. animate method css property value jquery command $("#box").animate({'left':'50px'},  3000); jquery selector Just to expose you to this command (don't worry about memorizing it)
  • 135. animate method css property value jquery command $("#box").animate({'left':'50px'},  3000); curly brackets jquery selector Just to expose you to this command (don't worry about memorizing it)
  • 136. animate method css property jquery command value colon $("#box").animate({'left':'50px'},  3000); curly brackets jquery selector Just to expose you to this command (don't worry about memorizing it)
  • 137. animate method css property jquery command value colon $("#box").animate({'left':'50px'},  3000); curly brackets jquery selector milliseconds Just to expose you to this command (don't worry about memorizing it)
  • 138. animate method css property jquery command value colon $("#box").animate({'left':'50px'},  3000); curly brackets jquery selector milliseconds Just to expose you to this command (don't worry about memorizing it)
  • 139. jQuery "ready" • • jQuery can't run until the entire webpage is fully loaded. Because web pages run from the top to bottom, we need to place a trigger to prevent jQuery from running until the web page is fully loaded.
  • 140. All jQuery code goes into a "ready" block $(document).ready(function(){   ! ! ! });