Web Design Workshop Part 2
15
Javascript ECMASCRIPT 5
-
Upload
kanakiyajay -
Category
Design
-
view
665 -
download
3
description
The second set of slides for the Web Designing Workshop conducted by Jay Kanakiya.
Transcript of Web Design Workshop Part 2
Javascript
ECMASCRIPT 5
• 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 .
HELLO WORLD
<html> <head> <title>Hello World</title> </head> <body> <script> console.log("Hello World") ; </script> </body> </html> Open Console Tab in Chrome Devtools
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 Scroll
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.expander" ).toggle( function() { $( this ).prev().addClass( "open" ); }, function() { $( this ).prev().removeClass( "open" ); });
$(‘p’).toggle( callback1 , callback2 )
AJAX
• Ex . Gmail , Facebook
• Asynchronous JavaScript and XML
Accordion
Make a simple Slider
Links
• http://learn.jquery.com/
• http://jquer.in/
• http://jque.re
