What is JavaScript?

• Responsible for Interaction
• Runs on client

---

What is it good for?

• DOM Management
• Event Handling

---

How do you use it?

• Inline, <script>, <script src="">
• Inline w/event attributes
• Inefficient practice

---

Try it

---

Using the <script> tag

• Better than inline, but maintainable
• Code executes when script read

---

Try It

---

As an external document

• Using <script src=""></script>
• <script> position important

---

JavaScript Variables

• Losely typed
• Basic types

var myName = 'Ray';
var myNumber = 3;
var myBoolean = true;

---

JavaScript Lists

• 0 Indexed

var myList = ['Ray', 'Fred', 'Bonnie'];
var otherList = ['Ray', 3, false];

myList[1]; //Fred;
otherList[0]; //Ray;

---

Try it

---

JavaScript Objects

• Complex data type
• Holds any var type

var info = {
  "full_name" : "Ray Villalobos",
  "title" : "Staff Author",
  "links" : {
    "blog"     : "http://iviewsource.com",
    "facebook" : "http://facebook.com/iviewsource",
    "youtube"  : "http://www.youtube.com/planetoftheweb",
    "podcast"  : "http://feeds.feedburner.com/authoredcontent",
    "twitter"  : "http://twitter.com/planetoftheweb"
  }
};

---

Try it

---

Document Object Model (DOM)

• Page structure
• Add, delete & modify
• querySelector()
• querySelectorAll()

---

Try it

---

Events

• Things that happen
• Clicks, mouseOvers, etc.

---

Try It

---

Conditional Statements

• True or False
• Execute when conditions met

---

Try it

---

Loops

• Repeat execution

for (var index = 0; index < array.length; index++) {
  var element = array[index];
  
}

---

Try it

---

Functions

• Like a macro
• Can have parameters

---

Try it

—

## jQuery

- JS Library
- Fixes incompatibilities
- Uses the $ variable

—

## Try it