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 and Jquery: The connection between

324 views

Published on

This presentation will cover a brief history of the origins of Javascript followed by information on the basics of syntax and coding. jQuery was constructed using Javascript but sometimes this is overlooked, this session will talk about the feature within Javascript that makes this possible and then provide a few basic tips on how best to use jQuery and plain Javascript.

Published in: Data & Analytics
  • Be the first to comment

  • Be the first to like this

Javascript and Jquery: The connection between

  1. 1. The ConnectionBetween
  2. 2. Who am I? Applications Developer @BGSU B.S. in Visual Comm. Tech. in 2003 Currently studying Learning Design (M.Ed.) Live in Haskins, Ohio • Village Population: 1215Estimated Home Brewer and Admitted Beer Snob Producer – A Night of the Living Dead (2014)and Pi DayDie Day(2016) @thespiritx
  3. 3. Where am I from? Established in1910 Bowling Green, Ohio Over20,000studentsattend Over200undergraduate major andprograms across seven colleges http://www.bgsu.edu/about.html
  4. 4. What are we covering today? History About the languages and a simple example Prototyping Advanced example Optimization, Testing, & Logging Questions
  5. 5. JavaScript Introduced in 1995byNetscape,originally developed under the name Mocha & LiveScript Microsoft released Jscript in 1996,a port of Netscape’s Javascript Object-BasedScripting Language No “Classes” and objects inherit properties and methods from template object. Interpretedscripting through implementations • SpiderMonkey(First Ever Engine, Netscape Navigator and Firefox) • V8 (Google, Chrome) • Nitro (SquirrelFish, Safari) • Chakra(IE9-11)
  6. 6. ECMAScript Specification : ECMA-262 Standardization for Javascript, Jscript, Actionscript, and more. Orginial specification, released in 1997,was based onNetscape’s JavaScript as developed by Brendan Eich. Currentbrowsers featureECMA-262,edition 5.1as released inJuneof 2011 ECMAScript Harmonyunderdevelopment (versions 6 &7) ecmascript
  7. 7. Write less, domore. jQuery was built on top of JavaScript to provide commonfunctionality as anutility object. Why? Browser compatability Shorthandcommon tasks Faster development The $ is just a variable reference tothe main jQueryfunction Most instances of jquery.js files havethis line at the end: var $ = jQuery; jQuery
  8. 8. JavaScript: Syntax Not strict… well… depends on implementation Variables are not typespecific Comments : /**/, // - Will prevent execution of containedcode Constructors : varx1 = new Object(); {} Operators: +, +=, ++, ==, !=, &&,(condition)?true:false; Functions: functionname(parameter1,parameter2, .. parameter x); Variable number of parameters?Noproblem! functionname(){arguments[argument# 0…x];} Parameter checking may help! functionname(parameter){ if(parameter === undefined) returnfalse; }
  9. 9. JavaScript: Example vartitle = document.getElementsByTagName('h1'); varname = document.getElementById('myname'); vargreylines= document.getElementsByClassName('greygull'); document.body.style.backgroundColor= 'black'; for(varlinenumin title){ if(!isNaN(linenum)){ title[linenum].style.backgroundColor= '#999999'; title[linenum].style.color= '#cccccc'; } } name.style.color= 'red'; name.onmouseover= function(e){ if(!e) vare = window.event; e.target.style.color= '#ff9999'; e.target.style.cursor= 'pointer'; } name.onmouseout= function(e){ if(!e) vare = window.event; e.target.style.color= 'red'; e.target.style.cursor= 'auto'; } name.onclick= function(e){ window.location= 'http://thespiritx.com/'; } for(varlinenumingreylines){ if(!isNaN(linenum)){ greylines[linenum].style.color= '#999999'; } } //jsfiddle.net/thespiritx/hk76312b/
  10. 10. Generic Syntax $(selector).method(arguments); jQuery selectors, for the most partare CSSselectors #id, .classname, elementname More psuedo selectors :animated, :contains(), :eq(), … and tons more Attribute Selection [attributename=“value”] [attributename*=“value”] Also allowed in JavaScript, jQuery takes advantage of the ability to string methods: $(selector).method1(arguments).method2(arguments).method3(arguments); jQuery: Syntax
  11. 11. jQuery $('body').css({'background-color':'black'}); $('h1').css({ 'background-color':'#999999', 'color':'#cccccc' }); $('#myname') .css({'color':'red'}) .hover(function(){ $(this).css({'color':'#ff9999','cursor':'pointer'}); },function(){ $(this).css({'color':'red','cursor':'auto'}); }) .on('click',function(){ window.location= 'http://thespiritx.com'; }); $('.greygull').css({'color':'#999999'}); //jsfiddle.net/thespiritx/hk76312b/4/
  12. 12. What? Templated inheritence How? Define the Objectas a Function. Createthe Instance Runmethods defined onthe original Objectexcept usethe Instance Why? Predefined structureand methods to reduce repeatable code Have all functionalityavailable directly from Instance The Missing Link: Prototyping
  13. 13. The Missing Link: Prototyping varLog4JS = function(path, options){ this.path = path; if(options) this.setOptions(options); }; Log4JS.prototype = { path: 'window', log: function(message){ this.print(message); }, debug: function(message){ this.print(message,'debug'); }, error: function(message){ this.print(message,'error'); }, warn: function(message){ this.print(message,'warn'); }, print: function(message, level){ if(window.console) { switch(level){ case 'debug': console.debug(message); break; case 'error': console.error(message); break; case 'warn': console.warn(message); break; default: console.log(message); } } } } //jsfiddle.net/thespiritx/frfemowx/1/
  14. 14. Variable Scope A word on the “this” problem Scope vara = “apple”; Var b = “pear”; FunctionrunThis(){ var b = “grape”; alert(a+’| ‘+b); } apple| grape Alert Box functionf1(){ return this; } f1()=== window; functionf2(){ "usestrict"; return this; } f2()=== undefined; var o ={ prop: 37, f:function() { returnthis.prop; } }; o.f== 37 function f(){ returnthis.a; } var g= f.bind({a:"azerty"}); g()==“azerty” o = {a:37,f:f,g:g}; o.f()==37&& o.g()== “azerty” //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
  15. 15. AjaxExample varrequestObj= false; if (window.XMLHttpRequest){ requestObj= new XMLHttpRequest(); } elseif (window.ActiveXObject){ requestObj= new ActiveXObject("Microsoft.XMLHTTP"); } functionget(source,id) { if (requestObj){ varobj; if(document.querySelector){ obj = document.querySelector('#'+id); } else{ obj = document.getElementById(id); } requestObj.open("GET",source); requestObj.onreadystatechange= function() { if (requestObj.readyState== 4 && requestObj.status== 200){ obj.innerHTML= requestObj.responseText; } } requestObj.send(null); } } get('http://store.thespiritx.com/text/fiddlejs/mi15.txt','target'); //jsfiddle.net/thespiritx/v7fgo4fL/
  16. 16. AjaxExample $.get( 'http://store.thespiritx.com/text/fiddlejs/mi15.txt', function(data){ $('#target').html(data); }); //jsfiddle.net/thespiritx/v7fgo4fL/1/
  17. 17. Load after content Add everythingto the footer that can load later Exception:jQuery Minimization RemoveComments, Line Breaks, and un-neededspacing Obfuscation Convert variable and method namesinto characterreferences instead of words. var thisisavariablename = “string“; var a = “string”; Optimization
  18. 18. JSLint : http://jslint.com Verifythe validity of javascript code JSFiddle: http://jsfiddle.net Used to script, test, and share javascript code inbrowser Developer Tools Built InDeveloper Tools and Console Firebug and Firebug Lite: http://getfirebug.com Multiple Browsers Firefox, Chrome,InternetExplorer, Safari, Opera Testing
  19. 19. Developer Console Logging Methods console.log(); console.info(); console.debug(); console.error(); console.warn(); Logger.js https://github.com/thespiritx/logger-js Version shown in example before was simple version Full Utility features object printing for multiple browsers Feel free to fork andrework Logging
  20. 20. Questions Stay Informed Experiment Don’t be afraid

×