Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Javascript

ECMASCRIPT 5
•
•
•
•
•
•

Originally called LiveScript and Netscape
NOT JAVA
For the most part run the same in all browsers
Requisites ...
HELLO WORLD
<html>
<head>
<title>Hello World</title>
</head>
<body>
<script>
console.log("Hello World") ;
</script>
</body...
Basic Javascript
• Programming Language like C
var i ;
for (i=0;i<5;i++)
{
Console.log(i);
}
What you can do with js?
•
•
•
•

Graphic animation
Simple browser web app
Html form validation and submission
Infinite Sc...
Why jQuery ?
• CSS3 Selectors
• Simplifies the script
• Events and Callbacks
Simplicity
Example
• Js :document.getElementById(‘container’)
• $(‘#container’)
• <script src=“jquery.js”></script>
• <script>
$( document ).ready(function() {
// Your code here.
});
• </script>
What you can do

$( document ).ready(function() {
$( "a" ).click(function( event ) {
alert( "Thanks for visiting!" );
});
...
$( “img" ).click(function( event ) {
$( this ).hide();
});
$(‘p’).toggle( callback1 , callback2 )

$( "p.expander" ).toggle( function() {
$( this ).prev().addClass( "open" );
}, fun...
AJAX
• Ex . Gmail , Facebook
• Asynchronous JavaScript and XML
Accordion
Make a simple Slider
Links
• http://learn.jquery.com/
• http://jquer.in/
• http://jque.re
Upcoming SlideShare
Loading in …5
×

Web Design Workshop Part 2

1,217 views

Published on

The second set of slides for the Web Designing Workshop conducted by Jay Kanakiya.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Web Design Workshop Part 2

  1. 1. Javascript ECMASCRIPT 5
  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. 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. 4. Basic Javascript • Programming Language like C var i ; for (i=0;i<5;i++) { Console.log(i); }
  5. 5. What you can do with js? • • • • Graphic animation Simple browser web app Html form validation and submission Infinite Scroll
  6. 6. Why jQuery ? • CSS3 Selectors • Simplifies the script • Events and Callbacks
  7. 7. Simplicity Example • Js :document.getElementById(‘container’) • $(‘#container’)
  8. 8. • <script src=“jquery.js”></script> • <script> $( document ).ready(function() { // Your code here. }); • </script>
  9. 9. What you can do $( document ).ready(function() { $( "a" ).click(function( event ) { alert( "Thanks for visiting!" ); }); });
  10. 10. $( “img" ).click(function( event ) { $( this ).hide(); });
  11. 11. $(‘p’).toggle( callback1 , callback2 ) $( "p.expander" ).toggle( function() { $( this ).prev().addClass( "open" ); }, function() { $( this ).prev().removeClass( "open" ); });
  12. 12. AJAX • Ex . Gmail , Facebook • Asynchronous JavaScript and XML
  13. 13. Accordion
  14. 14. Make a simple Slider
  15. 15. Links • http://learn.jquery.com/ • http://jquer.in/ • http://jque.re

×