1. JavaScript for Gadget Development
Welcome to JavaScript for gadget development. My name is Alok Somani.

2. Overview Introduction to JavaScript JavaScript in Gadgets
Now, as I’m sure many of you have read in the workshop description, this course is really all about two things:
An introduction into JavaScript
How we’re going to be using JavaScript in Gadgets
Now I want to be really clear about a couple of things:
There’s no way to really learn JavaScript properly or theoretically within an hour and a half. However, my goal is to be able to cover it enough from a functional perspective that you’ll be able to use it to start doing the things you want.
And also, that working in gadgets is not very different than normal applications. There are some pros and some cons, but we’ll get more into that later.

3. HTML index.html How do we include JavaScript?
I’m sure you’re all familiar with HTML and CSS, and you’ll know that by standard, we tend to call our “main” or “entry” html page index.html.
Now the reason why I bring this up is to illustrate the relationship, how JavaScript actually makes its way into a web page.
How do we include JavaScript?

4. Including JavaScript The <script> tag
I’m sure you’re all familiar with CSS and linking to CSS documents, and including JavaScript works in much the same way – except we use a <script> tag.
As you can see from this example, there are generally two ways we would utilize a <script> tag:
The first and usually preferred option is how we did it in the document Head. We simply link to an external JavaScript file. This prevents clutter in our HTML document, and allows us to just do JavaScript in our “app.js” file.
Another way it can be done is to have what’s called an “inline” <script>, which you see in the body. In this case, we would actually write out our JavaScript right here, right in the HTML document.

5. The Makeup of a Gadget HTML CSS JavaScript
Now this is very basic stuff, how JavaScript is used in HTML. Most of you guys have seen this before in pretty much any real world web editing work.
But why did I feel it important to remind you?
Because if you think about it, it is in essence all you need for a basic application:
It has your HTML, or the visual elements you see in the browser
It has your CSS, or the styling for those elements
And now it can have your JavaScript
And you know what, that’s exactly what a Gadget is – a mini application

6. Where a Gadget Lives
So we know that a gadget is basically a full, isolated, miniature application.
We also know that where we primarily find and use gadgets is in the sidebar as seen in this example.
Where gadgets are located and how they are situated will play a factor in what we can do with it in terms of JavaScript.

7. Implied Restrictions Size Exists in <iframe>
No access to parent window
Except for API
While a gadget is an isolated application, it does have a couple of limitations to note:
Limited physical size
It exists in an <iframe>, which means it is self-contained, but it also means that you can’t target anything or access the parent window.
Think about it this way: if you were to try to target an element in the rest of OU Campus from within a gadget, you wouldn’t be able to do it.
But that’s also why we offer APIs, to give you the ability to still interact with OU Campus and build functionality

8. Getting Technical
So now we start getting technical.

9. JavaScript Acts as set of instructions to make the page interactive
Interpreted by the browser
Synchronous (single threaded)
Popular
So this is where we start with JavaScript.
HTML defines the structure of the Document that the browser is showing
CSS defines visual styling of the elements in the Document
JavaScript, then, supplies us with the ability to make the Document interactive. Without it, the Document is just static.
JavaScript being interpreted by the browser means a couple of things to us:
It means that JavaScript isn’t compiled until the browser reads it.
In practical terms, this also means that different browsers can interpret JavaScript differently. This is why cross-browser compatibility and browser quirks are a thing.
Popularity is always a point of contention when it comes to programming languages. A popular language is not necessarily a good language, and in fact, many developers out there do complain about aspects of JavaScript.
However, popularity begets familiarity, flexibility, and richness of the ecosystem. JavaScript dominates the web, and because of that, there are a lot of people actively using it and contributing to tools and libraries that then become available to you as a developer.

10. Primitive Data Types
This is the starting point if you’re new to programming languages altogether.
The core of being able to create logic and functionality is in being able to manipulate data. And in order to manipulate data, we need to have these data types.
But also in order to manipulate data, we need to be able to store these values. That’s why we have something in JavaScript called ”variables.”

11. Variables X and y in Algebra
A variable in programming can be thought of like a variable in Algebra. The variable is there to represent some value.
So if we look back at the previous slide, each of the ”data types” we looked at can be stored in variables.
This is important and will be useful in many many ways. It is, in my view, the foundation for what makes programming so powerful.

12. Statements An instruction to execute in a programming language
The console.log() statement
In programming, when we tell the computer to execute an action, we’re defining a statement. A statement then, is an instruction to execute.
One of our favorite statements in front-end, JavaScript development is the console.log(). When the script is executed, it will print something out to the ”console.” This helps us see what’s going on in our code.

13. Expressions in Statements
So I don’t want to get too hung up on terminology, but if you hear the terms “expressions” and ”statements”, the lines between the two can often be blurred and made confusing.
The easiest way to think about it is this:
The statement still is the overall action to execute. In the first case, that is the totality of “var num = 1 + 2;”
The expression part of that is what’s happening on the right hand side; the part that defines what becomes a value
From the console.logs at the bottom, you can see that we can actually print out the value of variables. This is why it’s so useful to us.

14. Functions, Arrays, & Objects
We’ve learned about the basics -- data types and variables.
Now we start getting into some of the more complex objects and constructs at the core of JavaScript

15. Functions This starts with, very appropriately, a “function.”
Think about a function as basically a container for a group of actions – “statements” – you want to be executed. In this case, we’re only putting one instruction in there to execute.
Now there are a couple of pitfalls of the specific way we’re doing things here:
First, notice that the name variable HAS to be defined in order for this to work. If it isn’t then we would get an error when trying to execute our function. It would tell us that ”name” is undefined.
Second, it’s not really taking advantage of what a function can do. A function can be more dynamic than this.

16. Functions – Passing in Values
Again, I’m trying not to too technical with terminology here, because I don’t want to distract from the main point and uses of what we are trying to learn.
Here, we’re taking a look at one of the things that functions allow us to do, which is to use arguments and define parameters.
This function is doing the same thing as before, just a little bit differently.
In the second example, you can see that we have a function that actually accepts 2 parameters, so we pass it 2 arguments. And like this, we can define actual logic.

17. Functions – Return Values
Often times, we’ll want to call a function and actually have its value returned back to us to do something with. The function itself serves a specific utility purpose, with expected inputs and predictable outputs.
This is very useful when thinking in terms of functional programming.

18. Arrays Store multiple values in a variable The array is indexed
We’ve covered primitive data types – the basic data types – but now we’ll look at Arrays and Objects, which are a little more abstract.
An array is a list of values stored in a variable. In this example, we have five names, in the form of strings, stored in the “names” variable.
The way we access values in an array is by looking for its physical position in the array.

19. Objects Variable consisting of key-value pairs
Key is a property ON the object
Value corresponds to its key
Value can be a primitive, an array, or even a function
An object is a data type that allows us to create, for our purposes, a more complex variable.
An object consists of key-value pairs, where the key is the name of the property ON the object, and the value is the associated value.
Let’s take a look back. Remember the variables we were using to describe Abe Lincoln?
These were all separate variables. But maybe we could use an object to group and organize this information better?

20. Breather & Recap
Alright, take a second to relax. If you’re new to JavaScript, we’ve just looked at a lot of information very quickly.
So, let’s just recap for a second on what we spent time talking about.

21. Recap How JS is included in a document
What a web application consists of at its core
Primitive data types in JavaScript
Variables
Statements, Expressions, & Functions
Arrays & Objects

22. Control Flow
Okay. Now that we know the data constructs involved in JavaScript, we can focus our attention on more of the logic behind it.
JavaScript, or code in general, tends to execute from top to bottom. If we just wrote a series of statements for the computer to execute, it would just execute them one by one.
Changing the order of execution of statements for functional purposes is what we consider as “controlling the flow.”

23. If and If-Else Statement
What we call conditionals
If statements are what we call conditionals because they operate based on a specific condition being true or false

24. Comparison Operators
When you are doing a comparison in an if statement, these are the different operators you can use

25. Logical Operators
When you are doing a comparison in an if statement, these are the different operators you can use to combine multiple conditions.

26. For Loop

27. Function Callback

28. The DOM & jQuery
Alright. Now that we’ve learned some of the core of JavaScript, we’re going to circle back to how we’re going to use it – with HTML, to make the webpage interactive.

29. The DOM HTML describes the Document Browser interprets the HTML
Browser creates an object representation of the HTML (the DOM)
JavaScript can interact with the DOM

30. The jQuery Way A library written in JavaScript
Made for interacting with the DOM
Exposes methods of interaction
Cross-browser compatibility
Other utilities
It’s required in gadgets anyway

31. $ $(parentEl).find(element) $(element).val() $(element).html()
$(element).show()
$(element).hide()
$(element).append()
$.on()

32. $ - Interacting with DOM

33. $.ajax() AJAX = asynchronous JavaScript (and XML, and JSON)
Use it for HTTP requests
GET, POST, etc.
Looks for success & error callbacks
Utilizes promise/deferred object if preferred

34. Thank you.
Alok Somani
outc18.com/surveys