Coding 101: A hands-on introduction
Download as PPTX, PDF1 like784 views
The document is a hands-on introduction to coding using JavaScript, presented in a webinar by Bohyun Kim for librarians. It covers basic concepts including variables, data types, functions, loops, and practical examples of JavaScript code. The presentation aims to encourage self-learning in coding by providing resources and tips for practice.
![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]);
}](https://image.slidesharecdn.com/railsbkimpart22016-160531145506/85/Coding-101-A-hands-on-introduction-11-320.jpg)
![6. FOR LOOP
var a = ["do", "re", "mi", "fa"];
var len = a.length;
for (var i = 0; i < len; i++) {
console.log(a[i]);
}](https://image.slidesharecdn.com/railsbkimpart22016-160531145506/85/Coding-101-A-hands-on-introduction-25-320.jpg)
Coding 101: A hands-on introduction
- 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. 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?
- 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. JS • Default scripting language for theWeb. • Runs in a browser! • Minimal dev environment setup
- 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. LET’STRY RUNNING A SCRIPT! • Open up your web browser – FF or Chrome. • Press F-12 to open up a browser console.
- 9. FF- FIREBUG
- 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. • Result should look like this. FF above. Chrome below.
- 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. 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. VARIABLES & OPERATORS • http://www.w3schools.com/js/js_variables.asp • http://www.w3schools.com/js/js_operators.asp
- 16. 2. DATATYPES • Number • String • Array • Object • Boolean
- 18. 3. FUNCTIONS
- 22. 5. ARRAY METHODS • http://www.w3schools.com/js /js_array_methods.asp
- 24. DIDWE RUN OUT OFTIME YET? : )
- 25. 6. FOR LOOP var a = ["do", "re", "mi", "fa"]; var len = a.length; for (var i = 0; i < len; i++) { console.log(a[i]); }
- 28. 8. METHODS FORTHE STRING OBJECT • http://www.w3schools.com/js/js_string_methods.asp
- 31. 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
- 32. 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.
- 33. THANKYOU!