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.

Coding 101: A hands-on introduction

458 views

Published on

Part 2 of the webinar series "Coding for Librarians" given for Reaching Across Illinois Library System on Tue, May 31, 2016.

Published in: Technology
  • Be the first to comment

Coding 101: A hands-on introduction

  1. 1. CODING FOR LIBRARIANS PART 2: CODING 101 HANDS-ON INTRODUCTION Bohyun Kim Associate Director, Health Sciences & Human Services Library University of Maryland, Baltimore ReachingAcross Illinois Library System -Webinar Tue, May 31, 2016 1:00 PM - 2:00 PM CDT
  2. 2. WHY AREYOU INTERESTED IN CODING? • Q.What do you want to be able to do once you learn how to code? • Q. Do you have previous experience with coding, and if so what is it? • Q. If you tried to teach yourself how to code before, what were some of the difficulties?
  3. 3. Flickr image: https://www.flickr.com/photos/nathansmith/4704268314
  4. 4. WHAT IS JAVASCRIPT? • JavaScript is a cross-platform, object-oriented scripting language. It is a small and lightweight language. Inside a host environment (for example, a web browser), JavaScript can be connected to the objects of its environment to provide programmatic control over them. • JavaScript contains a standard library of objects, such as Array, Date, and Math, and a core set of language elements such as operators, control structures, and statements. Core JavaScript can be extended for a variety of purposes by supplementing it with additional objects; • https://developer.mozilla.org/en- US/docs/Web/JavaScript/Guide/Introduction
  5. 5. JS • Default scripting language for theWeb. • Runs in a browser! • Minimal dev environment setup
  6. 6. SET-UP • A computer with access to the Internet • Web browser • Firefox • Web Console (http://www.howtogeek.com/105320/how-to-use- firefoxs-web-developer-tools/) • Or, Firebug: https://addons.mozilla.org/en- US/firefox/addon/firebug/ • Or, Chrome • Devtools (https://developer.chrome.com/devtools)
  7. 7. LET’STRY RUNNING A SCRIPT! • Open up your web browser – FF or Chrome. • Press F-12 to open up a browser console.
  8. 8. FF –WEB CONSOLE
  9. 9. FF- FIREBUG
  10. 10. CHROME - DEVTOOLS
  11. 11. TYPETHIS IN & RUN IT! var a = ["do", "re", "mi", "fa"]; var len = a.length; for (var i = 0; i < len; i++) { console.log(a[i]); }
  12. 12. • Result should look like this. FF above. Chrome below.
  13. 13. SUCCESS? : ) Don’t worry yet about what it means. We will take a look again at the end of this workshop. And it will all make sense then!
  14. 14. 1.VARIABLES • 4+10 • 2*5 • var a=24/4; • a • console.log(a); • var b=“Catherine”; • console.log(b); • console.log(c); • a+b • a+3
  15. 15. VARIABLES & OPERATORS • http://www.w3schools.com/js/js_variables.asp • http://www.w3schools.com/js/js_operators.asp
  16. 16. 2. DATATYPES • Number • String • Array • Object • Boolean
  17. 17. DATATYPES • http://www.w3schools.com/js/js_datatypes.asp
  18. 18. 3. FUNCTIONS
  19. 19. FUNCTIONS • http://www.w3schools.com/js/js_functions.asp
  20. 20. 4. ARRAYS • http://www.w3schools.com/js/js_arrays.asp
  21. 21. 5. ARRAY METHODS • http://www.w3schools.com/js /js_array_methods.asp
  22. 22. MORE ARRAY METHODS
  23. 23. DIDWE RUN OUT OFTIME YET? : )
  24. 24. 6. FOR LOOP var a = ["do", "re", "mi", "fa"]; var len = a.length; for (var i = 0; i < len; i++) { console.log(a[i]); }
  25. 25. FOR LOOP • http://www.w3schools.com/js/js_loop_for.asp
  26. 26. 7. STRING • http://www.w3schools.com/js/js_strings.asp
  27. 27. 8. METHODS FORTHE STRING OBJECT • http://www.w3schools.com/js/js_string_methods.asp
  28. 28. CODE EXAMPLE https://htmlpreview.github.io/?https://github.com/jcmeloni/H TMLCSSJSAiO-code/blob/master/04/dateandtime.html
  29. 29. MORE CODE EXAMPLES BY ME WITH EXPLANATION • The simplest AJAX: writing your own code (1) http://www.bohyunkim.net/blog/archives/2186 • More APIs: writing your own code (2) http://www.bohyunkim.net/blog/archives/2219 • Playing with JavaScript and JQuery – the Ebook link HTML string generator and the EZproxy bookmarklet generator http://www.bohyunkim.net/blog/archives/255 • Fear no Longer Regular Expressions http://www.bohyunkim.net/blog/archives/2595 • Using the StripeAPI to Collect Library Fines by Accepting Online Payments http://www.bohyunkim.net/blog/archives/3009 • More simple code examples at https://github.com/bohyunkim/examples
  30. 30. TIPS • Don’t be discouraged or frustrated.You are teaching yourself a language. • Be persistent and realistic. • Set small goals that solve real-life problems. • Form or join a study group & find like-minded folks! • Comment your code and document since you will forget what you have learned and made.
  31. 31. THANKYOU!

×