In today's meeting (March 17th, 2012) we talked about several things. I've summarized them below.
1) The text I'll be using for the SIG is "JavaScript , A Beginner's Guide" by John Pollock. You can order it through the PACS web site at http://pacsnet.org/groupsatpacs/javascript/ . I'll also be browing information from other text and websites and will be letting you know what those are as we go along.
2) What is JavaScript? Java script is an object-based, client-side, scripting language that you can use to make Web Pages more dynamic. Object Based means that it uses Objects (more to come on that). Client Side means that everything is done on the client side, in this case the web browser. Scripting Language means that it doesn't require the code to be compiled before it is used.
3) Some basic HTML and CSS knowledge is good to have when coding with JavaScript. So is knoweldge on how to use a basic Text Editor and Web browser. (One that supports JavaScripts would be handy.)
4) We discussed what I like to call "JavaScript Rules of the Road".
4a) Case Sensitivity. From time to time we will need to give name to variable and functions (and other undiscovered things). When we do we should understand that JavaScript considers the case of the letters in the words we are using. As an example the following words are viewed as four different words by JavaScript: baseball, Baseball, BASEBALL, and BaSeBaLl
4b) Allowed characters. We're limited in the types of characters we can use to do our naming. Specifically we can only use letters, numbers and the underscore. We're also limited in that our names that we give variables and functions can either start with a letter or an underscore, but not a number.
4c) Reserved words. Please avoid using these words. JavaScript uses these words for other purposes. Those words are: abstract, as, boolean, break, byte, case, catch, char, class, continue, const, debugger, default, delete, do, double, else, enum, export, extends, false, final, finally, float, for, function, goto, if, implements, import, in, instanceof, int, interface, is, long, namespace, native, new, null, package, private, protected, public, return, short, static, super, switch, synchronized, this, throw, throws, transient, true, try, typeof, use, var, void, volatile, while, and with.
5) Writing / Creating the JavaScript inside the HTML doc. The opening and Closing HTML TAGS to call up the java script are <script type="text/javascript"> (Opening with just <script>, XHTML regards this as jscript), and we close it with the </script> tag.
Here is the HTML document I used during class. I'll be using it to describe the rest of what we talked about.
_______________________________________
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/shtmll/DTD/shtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>United Document</title>
</head>
<body>
<h1> JavaScript SIG</h1>
//I created this as example for the March 17th, 2012 class
<!-- As apposed to using the HTML Comments-->
</br>
<script type="text/javascript">
//Example of single line comment
document.write("<h1>Phillies Home Opener is April 9th, 2012, at 1pm</h1>");
/* Example of a multiline comment
Notice that every thing typed here
Does not appear
*/
</script>
</br>
<script type="text/javascript" src=playerpositions.js></script>
</br>
<script type="text/javascript" src=ryanhoward.js></script>
</br>
<script type="text/javascript" src=ChaseUtley.js></script>
</br>
</body>
</html>
_______________________________________
5a) Statements. Commands to the browser.
Example: document.write("Phillies Home Opener is April 9th at 1pm");.
Notice that JavaScript uses the ";" to note the end of the statement.nt closer.
5b) Comments. Comments are notes inside the script for better documentation or to be used to prevent execution, in the case of troubleshooting. The // are used to delcare single line comments and are placed in front of the comment. The Multi Line comments use the "/*" and "*/ to designate the beginning and end of the comment.
Example:
/* Example of a multiline commentNotice that every thing typed here
Does not appear
*/
5c) External Scripts. Within this example there are two samples of JavaScript, internal scripts and external scripts.
External Script Example:
<script type="text/javascript" src=ryanhoward.js></script>
This calls up the ryanhoward.js JavaScript file. (Seen here)
_______________________________________
//Used for displaying info for Ryan Howard
//declaring the variables to be used in this script
// player, nickname, rs_ba, c_ba, rs_hr, c_hr, rs_rbi, c_rbi, rs_obp, c_obp;
/* Variable legend
rs_ = regular season
c_ = carreer
ba = batting average
hr = home runs
rbi = runs batted in
obp = on base percentage
nickname = player's nickname
salary = Player's Salary
player
*/
// player, nickname, rs_ba, c_ba, rs_hr, c_hr, rs_rbi, c_rbi, rs_obp, c_obp;
/* Variable legend
rs_ = regular season
c_ = carreer
ba = batting average
hr = home runs
rbi = runs batted in
obp = on base percentage
nickname = player's nickname
salary = Player's Salary
player
*/
var player="Ryan Howard";
var nickname="The Big Piece";
var rs_ba=.253;
var c_ba=.275;
var rs_hr=33;
var c_hr=286;
var rs_rbi=116;
var c_rbi=864;
var rs_obp=.346;
var c_obp=.368;
var salary=20000000;
var episode="\"The Gang Gets Stranded in the Woods\"";
var episode1="dog\rcat\rbird";
var nickname="The Big Piece";
var rs_ba=.253;
var c_ba=.275;
var rs_hr=33;
var c_hr=286;
var rs_rbi=116;
var c_rbi=864;
var rs_obp=.346;
var c_obp=.368;
var salary=20000000;
var episode="\"The Gang Gets Stranded in the Woods\"";
var episode1="dog\rcat\rbird";
document.write("Here are "+player+"'s (also known as "+nickname+") stats:");
document.write("</br>");
document.write("<strong>Regular Season vs Career </strong>");
document.write("</br>");
document.write("Batting Average: "+rs_ba+" vs "+c_ba);
document.write("</br>");
document.write("Homeruns: "+rs_hr+" vs "+c_hr);
document.write("</br>");
document.write("Runs batted in: "+rs_rbi+" vs "+c_rbi);
document.write("</br>");
document.write("On Base Percentage: "+rs_obp+" vs "+c_obp);
document.write("</br>");
document.write("And he made $"+salary+" last year");
document.write("</br>");
document.write(episode);
document.write("</br>");
document.write("He also appeared in an episode of \"It's always Sunny in Philadelphia\". That episode was "+episode);
document.write("</br>");
//document.write(episode1);
5d) Variables. Variables are used to hold values or expressions. There are four types of variable that JavaScript uses; Numbers, Strings, Boolean, and Null.
To declare variables we use the var command with the following syntax.
var variable_name= variable_value;
Examples:
var rs_ba=.253; (This declares the variable rs_ba to be equal to the number .253)
var player="Ryan Howard"; (This declares the variable player and sets its value to Ryan Howard)
var player="Ryan Howard"; (This declares the variable player and sets its value to Ryan Howard)
5d1) Variable type: Number. Things to know about numbers with respect to JavaScript. JavaScript makes no distinction between integer values and floating-point values. When numbers appear directly in JS it's called a numeric literal.
5d2) Variable type: Strings. String variables are strings of text. The important thing to remember is that String valuse are contained between quotes.
5d3) Variable type: Boolean. Unlike the number and string variables, Boolean variables are limited to four possible values; True, False, 1 and 0. Boolean variables will be covered in a later SIG meeting.
5d4) Variable type: Null. Used to place hold and will be covered at a later date.
5e) Adding Variables to Text String allows us to create a line of text and add in a variable. The line in the JavaScript file; document.write("He also appeared in an episode of \"It's always Sunny in Philadelphia\". That episode was "+episode); is a good exampl of this. Note at the end I use the "+" operator to add the variable "episdode" to the output.
The line of code, document.write("Runs batted in: "+rs_rbi+" vs "+c_rbi); also does this but it puts two differen numerical variables in the line.
5f) Escaping Characters are used so that certain characters will show up correctly and errors don't arise. The line of code, document.write("He also appeared in an episode of \"It's always Sunny in Philadelphia\". That episode was "+episode); uses the "\" so that the " in fronto of "It's always Sunny shows up. If the "\" weren't there, the Script would execute the line;
He also appeared in an episode of
If it executes it at all.
5g) We discussed Operators during the meeting, but not in much detail. The following is what I had in my notes regarding operators.
5g1) Arithmetic Operators. "+, -, *, /, ++ (Increment), --(Decrement)"
5g2) Assignment Operators. "="
5g3) Comparisons Operators. Used to determine equality or difference between variables or values
Examples; X = 5
| Operator | Description | Example |
| == | Is equal to | x==8 is false, x==5 is true |
| === | Is exactly equal to (value and type) | x===5 is true, x==="5" is false |
| != | Is not equal | x!=8 is true |
| > | Is greater than | x>8 is false |
| < | Is less than | x<8 is true |
| >= | Is greater than or equal to | x>=8 is false |
| <= | Is less than or equal to | x<=8 is true |
5g4) Logical Operators are used in conditional statements to compare values and take action depending on the result.
Example: if x = 6 and y = 3
| Operator | Description | Example |
| && | And | (x < 10 && y > 1) is true |
| || | Or | (x==5||y==5) is false |
| ! | not | !(x==y) is true |
Having a lot of fun playing with the example from the March meeting.
ReplyDeleteNote that the book is available as a Kindle download. I am reading it on my iPad and on my desktop, depending on where I am. Really convenient.