Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Web Design Workshop Part 2
Similar to Web Design Workshop Part 2 (20)
Recently uploaded
Recently uploaded (20)
Web Design Workshop Part 2
- 2. • • • • • • Originally called LiveScript and Netscape NOT JAVA For the most part run the same in all browsers Requisites of C Logics , Variables , Looping , Conditionals , Functions ,Arrays .
- 3. HELLO WORLD <html> <head> <title>Hello World</title> </head> <body> <script> console.log("Hello World") ; </script> </body> </html> Open Console Tab in Chrome Devtools
- 4. Basic Javascript • Programming Language like C var i ; for (i=0;i<5;i++) { Console.log(i); }
- 5. What you can do with js? • • • • Graphic animation Simple browser web app Html form validation and submission Infinite Scroll
- 6. Why jQuery ? • CSS3 Selectors • Simplifies the script • Events and Callbacks
- 7. Simplicity Example • Js :document.getElementById(‘container’) • $(‘#container’)
- 8. • <script src=“jquery.js”></script> • <script> $( document ).ready(function() { // Your code here. }); • </script>
- 9. What you can do $( document ).ready(function() { $( "a" ).click(function( event ) { alert( "Thanks for visiting!" ); }); });
- 10. $( “img" ).click(function( event ) { $( this ).hide(); });
- 11. $(‘p’).toggle( callback1 , callback2 ) $( "p.expander" ).toggle( function() { $( this ).prev().addClass( "open" ); }, function() { $( this ).prev().removeClass( "open" ); });
- 12. AJAX • Ex . Gmail , Facebook • Asynchronous JavaScript and XML
- 13. Accordion
- 14. Make a simple Slider
- 15. Links • http://learn.jquery.com/ • http://jquer.in/ • http://jque.re