GEHC JavaScript Class 1 Introductions o Instructor o Students The Text o JavaScript: The Definitive Guide ... 4th Edition Will use exclusively the first seven weeks ----------------------------------- JavaScript ---------- JavaScript is primarily a client-side programming language, written on and for web pages. It was invented by Netscape for Navigator 2. Originally called LiveScript, but the name was changed to link it to Java, a language invented by Sun, which JavaScript resembles, but is otherwise unrelated to. ECMAScript, JScript. JavaScript is a direct descendent of C and C++, and familiarity with either of those two languages will be helpful. If you have no experience with C or C++, exposure to any of their other descendants, like Perl, Java, Python, C#, or PHP, will be helpful as well. Lacking any experience with those, experience with any other programming language like VisualBasic, will be helpful to understanding JavaScript more quickly. A programming language course or other experience in programming is a prerequisite for the course. If you are not familiar with any of the following topics, be sure to read the text carefully. We will go over each of these and discuss them briefly. Variables White Space Line Endings Comments Data Types Expressions/Operators Statements Variables --------- Variables in JS are stateless - this means that they can hold any kind of data. Some languages require you to declare that a variable will only hold numbers, or only strings, or only objects. A JS variable can hold any of these types of data. This is a mixed blessing: a = 1; // Holds a number a = "Hello"; // Same variable now holds a string but ... for (temp = 0; temp < 10; temp++) { ... temp = "Hello."; } ** JS1-1 illustrates variables If you don't have one open already, start up a web browser - you can use either Internet Explorer or Netscape Navigator, though the college prefers we use IE. Navigate to the course web site, then the syllabus, and scroll down to Week 1. Click on the JS1-1 link. Something we will do quite often in this class is view the source of an HTML page. As you develop your own skills, being able to see how other pages do things is very useful. If you are not familiar with View Source now, you will be very soon. A note about Netscape: in versions prior to 6, when you did a View Source, you saw the result of the page after the JS parser was done. In other words, the JS code is already gone. In versions 6 and higher, you do actually see the JS code. A pause to discuss placement of JS into a web page. JS can be placed in several different places in a web page. The two main places are within the head and within the body. We'll discover the reasons to place JS in the head a little later. For now, we will use the body. blah blah ... script goes here ... ... script goes here ... The beginning of the JS code is the opening script tag: tag. JS1-1 simply illustrates the best way to create variables. Use the var keyword, then name the variable to use. var a; creates the a variable and sets memory aside for it - is has no value (when printed with the document.write() method, it prints "undefined"). var b = 0; creates the variable and gives it a value. ** JS1-2 illustrates statelessness JS1-2 shows how we can declare a variable and give it any of a number of different values. The four illustrated here are plain integers, floating point values, strings, and the built-in Boolean values, true and false. One other thing to notice in this example is the ability to place HTML code in JavaScript code, for output to the page itself. This can come in very handy. The following characters can be used in JS variable names: A-Z, a-z, 0-9, and underscore. $ may be used but I heartily discourage it. The \uXXXX format can be used in newer versions to use any Unicode character - stay away from that for now, too. Oh, yes, the name cannot start with a number. Case sensitive. White Space ----------- White space is ignored, so use it to your advantage. White space includes tabs, spaces, and newlines (ENTER key). Judicious use of white space can turn unreadable code into readable code: var a=0;var b=1;var c=3;document.write(a);document.write(b);document.write(c); var a=0; // This is, hopefully, much more readable var b=1; var c=3; document.write(a); document.write(b); document.write(c); Comments -------- Three kinds of comments, and two main types, are supported by JS. Comments are used to explain your code in plain text - especially important if the code is not intuitive or if it is otherwise confusing. // -> line oriented. Everything following the // is ignored until the end of the line /* */ -> block oriented. Everything from the /* until the */ is ignored, no matter how many lines are blocked off is NOT supported It is typical to see the following: Guesses? ** JS1-3 shows a variety of comment styles, and also combines code in the head and body Data Types ---------- Numeric data comes in just one flavor: floating point. 1.5 3.124 1 (is a floating point of 1.0) JS has no strictly integer data type as do other languages. If you're used to 3/2 being 1, it won't be in JS - it will be 1.5. String data is defined in two ways. "Double quoted strings" 'single quoted strings' In JS, "" and '' are interchangeable, but it would be best if you use the "" form unless you have to use the '' form, because the "" form is the one we will use most often in Perl. Booleans indicate trueness or falseness true false Expressions and operators ------------------------- An expression is a JavaScript "phrase." Every expression has a value. 1 + 2 Expression using the addition operator, has a value of 3. a = 1 + 2; Same expression, but the result is saved in variable a a=5; // has a value of 5 a=0; // has a value of 0 a = 1 + 3; // has a value of 4 1; // has a value of 1 Operators come in one main type: numeric + = addition - = subtraction * = multiplication / = division % = modulus (little used) The + can also be used with strings to "add" two strings together (concatenation): a = "Hello " + "world"; Other operators are used to test values with, for example, the if statement. == - tests for equality != - tests for inequality < - less than <= - less than or equal to > - greater than >= - greater than or equal to alert() = used to output a string or number in a box if (a == 0) { // block starts with a { alert("a is 0"); // string is placed inside the (), ends with a ; } // block ends with a } if (a == 0) { alert("a is 0"); } else if (a < 5) { alert("a is less than 5"); } else if (a >=5) { alert("a is 5 or more"); else { alert("a is less than 0"); } This code should work: ** JS1-4 shows this code and shows that just because you think it should work doesn't mean it will Why not? Time to debug - see: ** JS1-5 shows that by adding judiciously placed alerts, you can debug your code to find out what's not working. In this case, we thought we'd covered all of our bases, but we forgot about "undefined". ** JS1-6 uses a for loop, one of JS's looping abilities, to create a list for (i=0; i<10; i++) { document.write("
  • Point " + i); } i=0 : initialization set i to 0 i<10 : test is i less than 10? i++ : change bump up i by one One other thing illustrated by JS1-6 is the use of "place-holder code" which will display if JavaScript is turned off. This is something you will need to be aware of as you start to implement JS on public sites. Using the tags, you can provide content that does not use JavaScript. Browsers with JavaScript will not show this information, and it will show in browsers that don't have scripting or have it turned off. To see it in action, set Scripting to Disable in IE.