Day 124: Chapter 47 of the JavaScript Book

The next chapter is Chapter 47 Events: Mouse.  This is how to make an image change into another image when the user scrolls their mouse over it:
<img src="theimagefile.jpg" onMouseover="src='thesecondimage.jpg'">

Notice the single quotes inside of the double quotes.  You can also use onMouseOver with other html elements:

<h1 onMouseOver="alert('Be sure to get your shopping done today.');">World Ends Tomorrow</h1>

In the example above, you could instead call a function that makes the alert appear.  Here's the JavaScript alternative to the preferred CSS color-change hover:

<a href="index.html" onMouseover="this.style.color='green';">Home Page</a>

When the user goes over the link, it turns green.  This makes the paragraph expand when the user hovers over it:

<p id="loris" onMouseover="expand();">Slow Loris: Mouse over for more info</p>


In the examples above, when the user mouses away from the image, nothing happens, but normally you would want the image to go back to the initial image, so you would use the onMouseout event handler:

<img src="before-pic.jpg" onMouseover="src='after-pic.jpg'" onMouseout="src='before-pic.jpg'">  

All right,I finished that chapter.

This code puts an image on the page, which then switches to another image when you mouse over it and then back to the first image when you mouse out of it:

<img src="janice-before.jpg" onMouseover="src='janice-after.jpg'" onMouseout="src='janice-before.jpg'">

Now I'm on Chapter 48 Events: Fields.  I worked on code like this:

<input type="text" onFocus="this.style.backgroundColor = 'yellow';">

We really aren't supposed to be styling with JavaScript, as CSS can do this, but it's a part of the book, and the author felt we should know that JavaScript has this capability, even though it's not encouraged that we use it.  

The next chapter is Chapter 49 Reading Field Values.  Here's the first code we used:

<form>
    Email:
    <input type="text">
    <input type="submit" value="Submit">
  </form>

That creates an input field and a submit button, except the input type is not "button," it is "submit."  We worked on this code:

What is your name?<br>
<form onSubmit="sayHi()">
  <input type="text" id="name">
  <input type="submit" value="Submit">
</form>

<script>
function sayHi() {
  var userName = document.getElementById("name").value;
  alert("Hello, " + userName + "!");
  window.close("mywindow");
}
</script>

It's cool, it makes a popup/alert that says "Hello," followed by the name that was entered into the text.  We worked on this code as well:

Enter dog or cat:<br>
<form onSubmit="checkPet();">
  <input type="text" id="whichPet">
  <input type="submit" value="Submit">
</form>

<script>
function checkPet() {
  if (document.getElementById("whichPet").value === "dog") {
    alert("Bow-wow!");
  } 
  else {
    alert("Meow!");
  }
  window.close("mywindow");
}
</script>

It's neat.  The next chapter is Chapter 50 Setting Field Values.  In this chapter, I was reminded that the value to the right is assigned to the item on the left, even if the item on the left is a function and the item on the right is the variable (although a function is technically a variable).  For example:

document.getElementById("city").value = cityName;

The code above would assign cityName to item on the left.  So, in that manner, we are "writing" a value into a field, without the user typing it in.  This can be used, for example, if a user enters a zip code in a previous field, and you want to retrieve the appropriate city and place it into the city field automatically, saving the user some time in filling out the forms on the page.

I completed chapter 50, so the next chapter is Chapter 51 Reading and Setting Paragraph Text.  I went back to the Odin Project and dropped in on Codecademy's JQuery track, which is what I was planning on doing next after completing the book.  I'm just curious as to what's coming up, my plan still remains to complete the JavaScript book, because it's been the best JavaScript teaching tool I've encountered thus far.  The curriculum call for doing only the first three sections of that track at this time, those being "Introducing JQuery," "JQuery Functions," and "Dynamic HTML."  After that, I'm supposed to 

SUMMARY OF CODING SKILLS

Total Treehouse Points: 5,385
Treehouse Points by Subject Matter (Miscellaneous not included): 
HTML:                                663 
CSS:                                1,599 
Design:                            1,193 
Development Tools:            747 
Javascript:                      1,120

Treehouse Ranking (%): "You have more total points than 94% of all students."

Treehouse Badge(s) Earned Today:

Treehouse Courses Completed:
How to Make a Website
HTML
CSS Foundations
CSS Layout Techniques

Aesthetic Foundations
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (66% complete, switched focus from web design to web dev)
Git Basics
Introduction to Programming
Javascript Basics

Codecademy (& other) Courses Completed:
HTML and CSS (Codecademy) 

Books Read or in Progress:
Completed: "Head First HTML and CSS," by E. Robson & E. Freeman
In Progress: "Eloquent JavaScript," by Marijn Haverbeke (On pg 27)
In Progress: "Head First Javascript," by Eric Freeman and Elisabeth Robson (On pg 56)
In Progress: "A Smarter Way to Learn Javascript," by Mark Myers (on pg 155)

My Progress on The Odin Project:

1.  Introduction to Web Development             100% Complete

2.  Web Development 101                                29% Complete

3.  Ruby Programming                                       0% Complete

4.  Ruby on Rails                                               0% Complete

5.  HTML5 and CSS3                                           0% Complete

6.  Javascript and JQuery                                  0% Complete

7.  Getting Hired as a Web Developer                 0% Complete

Hours Spent Coding Today: 3

Total Hours Coding: 577