+##Array values
+
+To access the value of a variable, use the variable name. For **arrays**, the values are accessed by their array name and **numerical index**, also contained in square brackets, which always **starts at ```0```**. To get the value of the first item in an array, the syntax will look like this:
+
+```javascript
+myFavoriteThings[0];
```
-The values in an array can then be accessed by their **numerical index**, also contained in square brackets, which always **starts at ```0```**.
@@ -981,7 +988,7 @@ Using jQuery
- <script src="js/jquery-1.11.1.js"></script>
+ <script src="js/jquery-1.11.1.min.js"></script>
Important: Unlike CSS, which always has to be included within the <head> tags, JavaScript can be included pretty much anywhere on the page, in the <head> or the <body>. Often, it is included just before the closing </body> to allow the page document to load first.
@@ -1185,9 +1192,11 @@ CLASS EXERCISE
##Click Events
-Now you've seen that you can set the width of an element with jQuery but we could use CSS to do that. Let's try something only JavaScript could help us with. Let's add a **click event**.
+Now you've seen that you can set the width of an element with jQuery but we could use CSS to do that.
+
+Let's try something only JavaScript could help us with, the **click event**.
-Like the document ready **event**, a click event is a moment in time when we want to trigger some code to run. But instead of the browser running the event right away, it only runs a click event when an item is actually clicked by the user.
+Like the document ready **event**, a click event is a moment in time when we want to trigger some code to run. But instead of the browser running the event right away, it only runs when an item is actually clicked by the user.
Adding a function to a **user triggered event** is called an **event listener**. The code just sits around waiting and listening for the event to happen. When someone finally clicks the item, it triggers the function to run.
@@ -1379,9 +1388,9 @@ Exercise: Active Menu - addClass() method
- Now go to style.css to create a new CSS style for the active state. This will change the color (but you can apply whatever style you like).
+ Now go to style.css to create a new CSS style for the active state. This will change the color (but you can apply whatever style you like). Since the color has been added to .menu a, create a selector using the new active class
-.menu .active {
+.menu a.active {
color: #A8258D;
}
@@ -1394,21 +1403,23 @@ Exercise: Active Menu - addClass() method
Almost there. We were able to add the class to the clicked item but now we need to remove the class from the non-active items. Remember, JavaScript/jQuery executes commands from top to bottom. One way to fix this issue is to remove the class **first**, *then* add the class to the clicked item.
-Since we don't know which item the user will click, we can remove the class from **all** of the menu items. So in this case, we won't use the `$(this)` selector. Instead, we want all the menu links.
+In this case, we won't use the `$(this)` selector since we are looking for any element with the `active` class to remove it. That means `.active` will be our selector.
```javascript
$(".menu a").click(function(){
//console.log("It works!");
- $(".menu a").removeClass("active");
+ $(".active").removeClass("active");
$(this).addClass("active");
});
```
Now try it!
+
+**Note**: if the class of `active` is used anywhere else on the page, it will be affected as well. Another option is to use a selector more specific to the menu such as `$(".menu a.active")`.
- ##Exercise: Personalize Your Page (15mins)
+ ##Exercise: Personalize Your Page (15-20mins)
Now that you've had a chance to get some JavaScript & jQuery practice, take some time to personalize your page. Here are some suggestions to get you started:
@@ -1547,6 +1558,7 @@ Add Flexslider to Your project: Step 1
<link rel="stylesheet" href="css/style.css">
</head>
+ Note: This is just one way to organize your folder structure. Some people like to create a plugins folder for example for these types of files. Just make sure that your file paths match when linking to the js, image and css files.
@@ -1559,14 +1571,28 @@ Add Flexslider to Your project: Step 1
```xml
<div class="flexslider">
<ul class="slides">
- <li><img src="images/rotator/image1.jpg" /></li>
- <li><img src="images/rotator/image2.jpg" /></li>
- <li><img src="images/rotator/image3.jpg" /></li>
+ <li><img src="images/rotator/image1.jpg"></li>
+ <li><img src="images/rotator/image2.jpg"></li>
+ <li><img src="images/rotator/image3.jpg"></li>
</ul>
</div>
```
You can put this code anywhere you want it to show on the page. Save the file and check your page. You probably won't see anything right? That's because we still have to active the plugin with a little jQuery.
+
+**Note!** You will see the example image tag code in the Flexslider documentation with an extra forward slash at the end of the image tag. This is the XHTML syntax (previous version). HTML5 doesn't require it.
+
+
+```xml
+<!-- XHTML -->
+<img src="path/to/file.jpg" />
+
+<!-- HTML5 -->
+<img src="path/to/file.jpg">
+
+```
+`
+
@@ -1615,9 +1641,9 @@ Add Flexslider to Your project: Step 1
<div class="flexslider">
<ul class="slides">
- <li><img src="images/rotator/image1.jpg" /></li>
- <li><img src="images/rotator/image2.jpg" /></li>
- <li><img src="images/rotator/image3.jpg" /></li>
+ <li><img src="images/rotator/image1.jpg"></li>
+ <li><img src="images/rotator/image2.jpg"></li>
+ <li><img src="images/rotator/image3.jpg"></li>
</ul>
</div>
@@ -1758,10 +1784,22 @@ Add Flexslider to Your project: Step 1
-
-## Thank You.
+
+ Thank You!
-Slidedecks created with [Lea Verou's CSS-based SlideShow System](https://github.com/LeaVerou/csss) and [reveal.js](http://lab.hakim.se/reveal-js/).
+
+ Intro to jQuery
+
+ with Instructor Name
+
+ 
+
+
+ Slidedecks created with Lea Verou's CSS-based SlideShow System and reveal.js.
+ 