please dont rip this site

JavaScript Tutorial

(for CSE 90025 FUTURES HTML5 and JavaScript)
9 sessions of 3 hours each with a 30 minute break so 2.5 hours per day 2.5*9=22.5 hours.

Sections:

  1. Intro and start Basics
  2. JavaScript Basics
  3. Object Oriented JavaScript
  4. Basic DOM Interaction
  5. Event Handling
  6. Animation
  7. Building Interactive Webpages aka Games
  8. Projects
  9. Conclusions / Presentations

Introduction:

Behavior:

Do no harm. And other advice.

Practice  Iterative Design.

Respect others. Do not distract. Do not belittle. Special care will be taken for women and minorities as they are regularly disrespected. Racism or sexism in any form will NOT be tolerated in this class!

History.

GitHub account setup post your first code (from the first excercise) and raise an issue on the class repo introducing yourself.

Debugging

Excercises:

https://www.javascript.com/

Chrome Debug Console

Open Chrome, and press the keys in the Vulcan pinch: Ctrl + Shift + I. Or go to the dot menu, and select More Tools / Developer Tools.

This is a super powerful tool with many many features. To learn all about it, you can follow their documentation at:
https://developers.google.com/web/tools/chrome-devtools

For now, just fine the "Console" tab, either right at the top, or under "Elements"

At the ">" prompt in Console, type the word "var" then space, then your name (just one word, first or last) and press enter. For example:
var James
You should see "<- undefined" Your name is now a variable, a box with your name on it, and inside the box there is... "undefined". That's because we haven't given it a value.

Type in your name again. and follow it with the equal sign "=" and zero "0". For example:
James = 0
Now you are zero.

Enter your name, equals, your name again, and then + and 1. e.g.
James = James + 1
Notice that you are now 1. This isn't math, so the equal sign doesn't really mean "is equal to" it means "make it equal to" or "set to".

Try this: Your name followed by two plus signs, with no spaces between. e.g.
James++
Notice you are now 2. ++ is increment and just adds one to the variable.

Try this, and notice how the console helps you type it in: (use your name)
document.body.innerHTML="James is "+James
Now look to the left at the web page. You may need to squint. The point is you can control the web page from the console.

If you want the text to be bigger:
document.body.style = "font-size:60px;"

Problem #1. Figure out how to change the color, in rgb (Red Green Blue) numbers, of the text in the body of the document. Hint: Google is your friend. Keywords work best in order from most general to least. E.g. "html document body text rgb color". You may need to read more than one page. Help each other out. Post your code in a document called "bodycolor.js" in your github account.

Problem #2. Now that you have that figured out, use a for loop to change the color from black to a bright color in steps of 1. This will be even harder and you should really work together. Try making a variable first, and figure out how to set the color based on the variable value. Then setup a for loop and use console.log(variable) to see that the values really do change as expected. Then merge your color change code with the for loop. Post that in a document called "colorchange.js"

Problem #3. Why don't you see the color change when you run the for loop? How can you slow down the animation? This is REALLY hard, and I don't expect you to solve it the first day.

Short Circuits

'cat' && 'dog' what does that return? Why? How might that be useful?

'cat' || 'dog' what does that return? Why? How might that be useful?

hints: && is logical AND which needs to know that both values are true. || is logical OR and doesn't need to know the second value if the first is true. 'cat' and 'dog' both evaluate to true.

var attrib = obj && obj.subobject && obj.subobject.attribute || 'default'
or if attribute is just one level down, use:
var attrib = obj ? obj.attribute : 'default'

var thing = getThing(parameter) || reporterror(message)
Keeps the focus on the expected action but still handles occasional errors. e.g.
var contents = fs.open('filename') || process.exit(1) (actually only useful in node)

See also:


file: /Techref/language/java/script/tutorial.htm, 6KB, , updated: 2020/3/2 23:20, local time: 2020/4/9 00:21,
TOP NEW HELP FIND: 
3.234.244.18:LOG IN

 ©2020 These pages are served without commercial sponsorship. (No popup ads, etc...).Bandwidth abuse increases hosting cost forcing sponsorship or shutdown. This server aggressively defends against automated copying for any reason including offline viewing, duplication, etc... Please respect this requirement and DO NOT RIP THIS SITE. Questions?
Please DO link to this page! Digg it! / MAKE!

<A HREF="http://techref.massmind.org/Techref/language/java/script/tutorial.htm"> JavaScript Tutorial</A>

After you find an appropriate page, you are invited to your to this massmind site! (posts will be visible only to you before review) Just type in the box and press the Post button. (HTML welcomed, but not the <A tag: Instead, use the link box to link to another page. A tutorial is available Members can login to post directly, become page editors, and be credited for their posts.


Link? Put it here: 
if you want a response, please enter your email address: 
Attn spammers: All posts are reviewed before being made visible to anyone other than the poster.
Did you find what you needed?

 

Welcome to massmind.org!

 

Welcome to techref.massmind.org!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  .