I began today with Chapter45 of the JavaScript book, Events: Link. This is really neat:
<a href="#" onClick="alert('Hi');">Click</a>
So, within the html, right before the closing body tag (</body>), if the code above is inserted, when it is clicked, an alert will appear. This is different from the usual html use for the <a href="http://www.genericsite.com">Click</a> tags, which would actually take the user to the web address in the tags if the "Click" text is clicked.
As a side note, alert() calls a function that pops up an alert. It's not a function that I created or stored anywhere, it's just a function that must be stored in the browser, since JavaScript is retrieving it from somewhere, even when you're offline. It's neat because as I've been learning about functions, I think of where they're stored so that I can call them, and then I noticed that alert() is itself a function.
The # inside those html tags tells the browser to reload the current page. Note that the quotes inside the double quotes are single quotes. In JavaScript, you aren't allowed to nest double quotes inside double quotes or single quotes inside single quotes. I imagine that' because then double quotes inside double quotes looks like two sets of quotes, one after the other, instead of one set of quotes with another set inside of it. The same applies for single quotes inside of single quotes, again, they are also not allowed.
One problem with the code above, which works, is that when the user clicks the link, after the code runs, the page will scroll all the way to the top, which we don't necessarily want to do. To avoid that, use this code:
<a href="JavaScript:void(0)" onClick="alert('Hi');">Click</a>
The code above only executes a single JavaScript statement, but there is no limit to the number of JavaScript statements that you can enclose in the quotation marks. Note also that there is no semicolon after the parentheses after void. If you use multiple statements of code, all should be in the same set of quotes, separated by semicolons, like so:
onClick="var greet='hi'; alert(greet);"
Notice how alert is not in its own set of quotes, the alert and the var are both within the same set of quotes.
Next was Chapter 46 Events: Button. We learned to use this code:
<input type="button" value="click" onClick="alert('Hello World!');">
You can also do this with images, like so:
<img src="image.jpg" onClick="alert('Please do not click on the glass, haha.');">
The next chapter is Chapter 47 Events: Mouse.
SUMMARY OF CODING SKILLS
<a href="#" onClick="alert('Hi');">Click</a>
So, within the html, right before the closing body tag (</body>), if the code above is inserted, when it is clicked, an alert will appear. This is different from the usual html use for the <a href="http://www.genericsite.com">Click</a> tags, which would actually take the user to the web address in the tags if the "Click" text is clicked.
As a side note, alert() calls a function that pops up an alert. It's not a function that I created or stored anywhere, it's just a function that must be stored in the browser, since JavaScript is retrieving it from somewhere, even when you're offline. It's neat because as I've been learning about functions, I think of where they're stored so that I can call them, and then I noticed that alert() is itself a function.
The # inside those html tags tells the browser to reload the current page. Note that the quotes inside the double quotes are single quotes. In JavaScript, you aren't allowed to nest double quotes inside double quotes or single quotes inside single quotes. I imagine that' because then double quotes inside double quotes looks like two sets of quotes, one after the other, instead of one set of quotes with another set inside of it. The same applies for single quotes inside of single quotes, again, they are also not allowed.
One problem with the code above, which works, is that when the user clicks the link, after the code runs, the page will scroll all the way to the top, which we don't necessarily want to do. To avoid that, use this code:
<a href="JavaScript:void(0)" onClick="alert('Hi');">Click</a>
The code above only executes a single JavaScript statement, but there is no limit to the number of JavaScript statements that you can enclose in the quotation marks. Note also that there is no semicolon after the parentheses after void. If you use multiple statements of code, all should be in the same set of quotes, separated by semicolons, like so:
onClick="var greet='hi'; alert(greet);"
Notice how alert is not in its own set of quotes, the alert and the var are both within the same set of quotes.
Next was Chapter 46 Events: Button. We learned to use this code:
<input type="button" value="click" onClick="alert('Hello World!');">
You can also do this with images, like so:
<img src="image.jpg" onClick="alert('Please do not click on the glass, haha.');">
The next chapter is Chapter 47 Events: Mouse.
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)
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:2
Total Hours Coding: 576
No comments:
Post a Comment