350 likes | 498 Views
Java Script And JQuery. Kyle Grillot, Junru Huang, Tasha Attaway. What are JavaScript and Jquery ?. Javascript is a popular scripting language and is used on almost all websites today Can function as both a procedural and object-oriented programming language
E N D
Java Script And JQuery Kyle Grillot, Junru Huang, Tasha Attaway
What are JavaScript and Jquery? • Javascript is a popular scripting language and is used on almost all websites today • Can function as both a procedural and object-oriented programming language • Its major use today is to make static HTML/CSS websites more dynamic by creating visual effects • It’s built into all of the browsers people use today -- you don’t have to install software to use it • It’s easy to incorporate into HTML pages
Examples of Javascript • http://www.quackit.com/javascript/examples/
What are JavaScript and Jquery? • JQueryis a freely available open source javascript library • Its purpose is to simplify the process of creating highly interactive webpages. • Its tagline is “write less and do more” • JQuery focuses on doing a few things very well • Getting and manipulating page content • Working with the modern browser • Adding sophisticated effects (such as image fades, animations on events)
JavaScript History and Milestones • In the early 1990s, there were two major browsers – IE and Netscape. Netscape was the first to introduce a programming language that allowed browser interactivity • First called Mocha and then Livescript, the language was built into the Netscape browser • Acceptance was lukewarm so Netscape renamed it JavaScript, in the hope of capitalizing on the popularity of Java • BROWSER WARS!!!
JavaScript History and Milestones • December 1995: JavaScript development announced by Netscape and Sun Microsystems in a press release • March 1996: Netscape Navigator 2.0 released, featuring support for JavaScript • August 1996: JScript was included in Internet Explorer 3.0 • November 1996: Netscape handed JavaScript over to the Ecma for standardization
JQuery History and Milestones • Authored by John Resig, JQuery’s initial stable release (1.0) was on August 26, 2006, and many new versions followed (as is typical for open source code).
JavaScript History and Milestones • August 22, 2005: John Resig first hints of a JavaScript library to use CSS selectors with a more succinct syntax than existing libraries • January 14, 2006: jQuery announced at BarCampNYC Wrap-up. The announcement makes the front page of del.icio.us and Digg • January 25, 2006: First jQuery Plugin Built: First jQuery Plugin • January 27, 2006: jQuery Mailing List set up: jQuery Mailing List • June 30, 2006: jQuery 1.0 – Alpha Release • August 26, 2006: First stable version of jQuery: jQuery 1.0 • April 2, 2007: Mailing list moved to Google Groups, code now hosted by Amazon S3
JavaScript History and Milestones • July 1, 2007: New version of jQuery released: jQuery 1.1.3: 800%+ Faster, still 20KB • January 14, 2009: Third anniversary of jQuery, jQuery 1.3 released, Sizzle.js released • September 2009: The jQuery Project formed • September 11, 2009: jQuery joins the Software Freedom Conservancy • September 28, 2009: Microsoft and Nokia announce their support for jQuery • December 3, 2009 jQuery wins .Net Magazine Award for Best Open Source Application • August 13, 2010 The jQuery Project announces the jQuery Mobile Project
Who Developed it? • Javascript: developed by Netscape programmer Brendan Eichin the early 1990s • Jquery: developed by Mozilla programmer John Resigin 2006
Who Manages JavaScript • JavaScript: Rather than leaving its standards in the hands of competing browsers, in 1996 JavaScript was handed over to ECMA, an international standards body that now is officially responsible for its development • As a result, the language was officially renamed ECMAScript or ECMA-262 but most people still refer to it as Javascript.
Who Manages JQuery • JQuery: Oversight by the JQuery Project, a team of programmers who work together to “provide infrastructure and financial assistance to jQuery-related projects.” The jQuery Project is part of the Software Freedom Conservancy, “a nonprofit dedicated to providing a home for Open Source software.”
Growth and Diminishment • While JQuery has seen nothing but steady growth, JavaScript development has not been smooth • It was tied so closely to Netscape, when Netscape died JavaScript almost died too, primarily due to its inflexibility • JavaScript hasn't been allowed to fade away. “Programmers, including Microsoft, are still finding ways to use it in combination with other software.”
Examples of Jquery • NOFRKS Design http://nofrks.com/
Examples http://www.howarths.nl/#/antiques/ Howarths
Examples of Jquery • Norah Jones http://www.norahjones.com/index.php
Examples of Jquery • Spritely http://www.spritely.net/
Examples http://www.alexbuga.com/v9/#music.php Drumpad
Examples of Jqueryplugins • Nivo Slider http://nivo.dev7studios.com/
Examples of Jquery Examples of Jquery plugins • Quickstand Demo: http://razorjack.net/quicksand/demos/attribute.html
Examples of Jquery Examples of Jquery plugins • Masonry http://desandro.com/resources/jquery-masonry/
Examples of Jquery Examples of Jquery plugins • GvChart http://www.ivellios.toron.pl/technikalia/2010/06/22/gvchart-plugin-jquery-with-google-charts/
Examples of Jquery Examples of Jquery plugins • Animated table sort http://www.mitya.co.uk/scripts/Table-sort---now-REGEXP-friendly-111#part3
Competing Technologies • JavaScript Vs. Flash JavaScript Pros - Small size - Hundreds of free professional quality programs - Compatible with more browsers than Flash including iPhone, other cell phones, PSP,PS3 - Can add interactivity to web page elements and tags.
Competing Technologies • JavaScript Vs. Flash JavaScript Cons - Features not as extensive as Flash - Complex features may not perform as quickly as Flash - 3D features are limited - Users disable JavaScript - Source code not protected
Competing Technologies • JavaScript Vs. Flash Flash Pros - 3D Capabilities - Consistent appearance in supported browsers - Supports vector artwork - Built in UI (User Interface) and other features - More font options - Many free tools available
Competing Technologies • JavaScript Vs. Flash Flash Cons - Not Compatible with all browsers including the iPhone, iPad, and other cell phones - Moderate learning curve to use - Cost of purchasing flash - Problems with older versions of Flash Player - Large file size - Security issues - Tracking stats for Flash elements is limited.
Best Practices • JQuery is ideal because it can create impressive animations and interactions. • JQuery is simple to understand and easy to use, which means the learning curve is small, while the possibilities are (almost) endless. • Accessibility is Key. Even if there were no JavaScript, you still want the information to be accessible. • Create accessibility to a wide range of audience. • Balance this with design, interactivity and beauty.
Best Practices A Few Rules: #1. Separate JavaScript Functionality - put into “behavioral layers” so that it is separate from HTML and CSS. #2. NEVER Depend on JavaScript - Users disable JavaScript, account for this. - This should be taken into account when using any third-party technology. (Flash, Java) #3. Semantic and Accessible Markup Comes First. - If the page is semantically structured, it should be accessible to a wide range of devices. - Important because it shapes the path the developer will take to create the DOM ( Document Object Model) scripted effect.
Certification W3 Schools, a large web development site, offers training and certification in JavaScript and JQuery. - Within these certifications, you will be provided with the necessary training and knowledge needed to use these third-party technologies.
What is in the future? • Jquery Mobile Touch-Optimized Web Framework for Smartphones & Tablets
What is in the future? • Canvas http://www.kevs3d.co.uk/dev/asteroids/
What’s in the Future? • John Resig - The Future Of JavaScript & jQuery http://vimeo.com/15909549 --Audio --3D
References • http://www.javascript.com • http://jquery.com • http://www.howtocreate.co.uk/jshistory.html • http://jquery.org/history/ • http://www.oreillynet.com/pub/a/javascript/2001/04/06/js_history.html • http://en.wikipedia.org/wiki/JavaScript