Montclair State University



PROGRAMMING ASSIGNMENT GUIDELINES – HONP105READ THIS FIRST:1. FIRST: Make sure you are able to log into your web folders as per the OIT documentation. Please go to this website: the entire page of documentation, but be most familiar with the following: The "Public (MSUWEB) Directory" section The link in this section that says "Learn how to publish and view your MSUWEB files"The "How do I Access my AD File Shares?" section. This tells you how to actually log into your network folder from various computers and access the web publishing folder. (If you have windows Vista the instructions for Windows 7 should work).Make sure you can access your website folder. If you have any issues with your netid please contact the registrar. If you have any other technical issues with this please contact the OIT helpdesk right away. 2. In the root of your web folder create a new folder called honp105 .3. Go to . Navigate to File, Save As (menu commands may be different for different browsers). Save a copy of this to your honp105 web folder. Save as "webpage, html only" or a similar option (again browsers will differ), not as an entire website. Keep the file name the same. Now you will have a copy of this page on your web space.5. From the web, go to: <your_netid> is substituted with whatever your netid is. This is your real live HONP105 website!Make sure this loads and looks the same way that my honp105 site looks!6. Notice that as long as you have your mapped web folder open, you can open/edit files in place, just as they would be on a removable flash drive, hard disk, etc. Right click on your new file, open it in NOTEPAD (not MS-Word, not a web browser, etc.) and make some changes - start with the title - change it to something more personal so you know you are looking at your own page. 7. Refresh your website in your browser and make sure the changes "take". Now you can change some other things around. For instance you can change the headline text from "My HONP105 Assignments" to include your name. This is just to get more of a feel in how to edit these pages and then how to refresh the page to make sure your changes saved. 7. Notice that next to each sample assignment link I have instructions for how to complete your assignments.8. We will work these out in class. If you feel comfortable enough to do the assignments outside of class, that is fine ... BUT if you need assistance/guidance then you MUST come to class for instruction. I want to make sure everyone is OK doing the assignments and I am there to teach and help. INTRODUCTIONThis document will describe our programming assignment methodology for the remainder of this class, and also provide a very brief and incomplete JavaScript reference. We will be doing our assignments in Javascript because no special compiler/interpreter is required other than a standard web browser, and the programs can be edited in any standard Text editor that every computer should already have.WORKING WITH PROGRAM FILESWe will be working with two types of programs. One type is a “straight” JavaScript program, and the other is a JavaScript program that is integrated into a web-based form. In either case, the program file MUST end with a file extension of either .htm . Also, if must be edited in a straight text editor (like Notepad). It can NOT be edited in Microsoft Word or other word-processing programs! If you use TextEdit for a Mac, make sure you disable Rich Text and also select the option to display HTML files as code, and un-check any smart quote, smart copy and paste, or anything else that says “smart.” In our case it is not so “smart” at all.Likewise, in both cases, we will be working with an HTML page. For the first type of program, you will work with a "skeleton" HTML document which does not contain anything except the program. The program therefore will run as soon as the page is opened. For the second type, you will have additional HTML display elements which will show the form (text boxes, buttons, etc.).You will not be expected to write the HTML from scratch and will instead start your work by downloading existing files. We will also discuss this briefly in class should the need arise.When you make changes to any of your files, be ABSOLUTELY CERTAIN that you do not leave the default file type of ".txt" or else this will mess up your file! When saving in a program like Notepad, be sure to select type "all files" and make sure your file name ends with ".htm" . Different versions of Windows file explorer have different ways to show/hide file extensions (usually through the “View” menu). Make sure the file extensions are visible to avoid confusion.JAVASCRIPT: GENERAL SYNTAX RULESCase-sensitive. The commands, etc. must be in the proper case. Variable names are also case-sensitive. For instance the variable myVariable and MyVariable are different! Be careful!Semicolon at end of instructions: While these are not strictly required, JavaScript allows us to terminate the end of each instruction with a semicolon. To make the program easier to read and understand, we will be using semicolons at the end of each instruction. Curly Braces {} : The Curly Braces denote the beginning and end of a block of instructions that is meant to be grouped together. For our purposes you will see these used to denote the beginning and end of loops (iterations), choices (selections), and functions.Parenthesis () : parenthesis are used for many purposes. They specify the conditions for a loop or a choice. They are used when defining, calling, and passing values into functions or methods (more on that later). They are used with mathematical operators to specify orders of operation (like we do in the real world).Comment Delimiters /* */ : Anything within this pair, even including line breaks, is considered a comment. Comments are descriptions of what we are doing and are very useful to include in your programs. In fact, the more comments, the better! Comments are ignored by the JavaScript interpreter. (Alternately, comments on a SINGLE LINE only can start with the // delimiter. But again, that is only for a SINGLE LINE.)JAVASCRIPT: WORKING WITH VARIABLESDefining VariablesIn JavaScript, you define variables by using the command var .var name ;Unlike many other programming languages, you do not specify the variable type when you declare it. It is sort of "understood" in its context. Be aware however that frequently we need to convert variables between one type and another explicitly in the rest of our code. Initializing VariablesWhen declaring variables it is always a good idea to also "initialize" the variable. This means that we assign it an initial "starter" value. This makes sure a variable is not hanging around out there with some undefined value. This also serves to implicitly tell the computer what type of variable we want it to be. Some examples:var name = 0;var name = 523;Will tell the computer that this variable will be storing numeric values. Notice there are no double quotes around the specified digit values. var name = "Hi";var name = "0";Will tell the computer that this variable will be storing character strings. Notice that a character string is denoted by double-quotes. Notice we can store digits as character strings too. Be careful and know when which is appropriate.var name = true;var name = false;Will tell the computer that this variable will be storing Boolean values. The recognized Boolean values in JavaScript are true and false – no quotation marks, and all lower case!It is very important to know as much ahead of time all the variables you will need and to define them early on. Making a reference to a variable name that has not yet been declared will result in an error.Naming VariablesIt is also important to give then names that make sense – names that clearly specify the purpose of the variable, and also the type of variable it will be.A common naming convention is to use a lower-case single letter "prefix" as the first character in the variable name to denote the type. Remember this is for our own purposes only; there is nothing about the variable name that will enforce a type! Some examples:sVariableName (s=string)nVariableName (n=number)bVariableName (b = Boolean)In our assignment we will be using this prefix naming methodology.JAVASCRIPT: OPERATORSLogical OperatorsAND: &&OR: ||NOT: !Comparison OperatorsEQUAL TO == (notice this is a DOUBLE equals sign – be careful)GREATER THAN >LESS THAN <Compound OperatorsGREATER THAN OR EQUAL TO >=LESS THAN OR EQUAL TO <=NOT EQUAL TO !=Mathematical OperatorsADDITION: +SUBTRACTION: -MULTIPLICATION: *DIVISION: /MODULUS: %JAVASCRIPT: WORKING WITH STRING VARIABLES (or more accurately, STRING OBJECTS)In JavaScript, strings are stored as what are called "objects." Objects are not "simple" variables. They of course do point to a memory location that can store a value. But, objects also contain "ready made" actions to manipulate the stored value. The available “actions” for an object are called “methods”.It is a good thing that JavaScript stores strings as objects, because the object definition contains some very useful routines to work with strings that we do not have to write ourselves! But to use string objects properly, we need to be conscious that they are not simple variables and as such are handled a bit differently.When we work with objects the notation is like this:objectName.objectMethod(method_parameter1, method_parameter2, etc..)Notice that the object name and the object method are separated by a period. Also notice that an object method may also allow for values to go into it – like a function. These parameters are enclosed in parenthesis and separated by commas.For strings, we will only be using a few of the many string manipulation methods that are available in JavaScript. Here they are and how they are used.The "length" string method:Sometimes it is very important to determine how many characters long a character string is. Remember in our program we will be designing a system that performs the basic arithmetic algorithm. How do we know when the algorithm ends? When we run out of columns. But how do we know how many columns there are in the first place? We need to know how long each symbol is, right?The following code shows an example of how we use the length string methodvar sStringObject = "Hello";var nMyNumber = 0;nMyNumber = sStringObject.length;What value does the variable nMyNumber now have? The answer is 5. This is because the character string "Hello" is 5 characters long.The "substr" string methodA substring (like a subset) is a smaller "piece" of an existing string. There are many times where it would be useful to either test a character string for the existence of a smaller string (for instance, does the string start with the letter "j"? ), or also be able to read in a specific character at some position in the string (for instance, I want to know what the third character in this string is).In JavaScript the method is called substr . This method requires several additional parameters. The first parameter is a number that says what position in the string to begin, and the second parameter says how many characters to include.sMyStringObject.substr(4,5);Means that we will be starting at position 4 in the string, and pulling in five characters.In real life (not JavaScript language!)Consider the character string "Williams"If I want a substring that starts at character 3, and is 4 characters long, the result will be "liam".If I want a subjecting that starts at character 6 and is only 1 character long, then the result is "a".IMPORTANT: Notice that we as human beings would count the characters differently. We naturally "number" the characters in a string starting with 1 and moving forward. "W" is the first character, "i" is the second character, "l" is the third character, etc. The "problem" with JavaScript (and most other programming languages!) is that the characters in a string are numbered starting with 0! I will not get into the historical reasons for this, but it is something we need to be aware of. So for instance if we want the 6th character, we would really need to specify "character 5" instead!This can get confusing but a good "shortcut" is to just subtract 1 from whatever position we want to start from. Here is an example of the problems that can arise. var sStringObject = "Mystring";var sSingleCharacter = ;nStringPosition = 4;sSingleCharacter = sStringObject.substr(nStringPosition,1);What value does sSingleCharacter contain? Did you say "t"? Not correct! Remember that JavaScript starts the character numbering at zero, so the answer would be "r" - which to us is the fifth character!To get around this it is common to give another numeric value the same value os the position in our "human" terms, minus one. var sStringObject = "Mystring";var sSingleCharacter = 0;nStringPosition = 4;nStringSearch = nStringPosition – 1;sSingleCharacter = sStringObject.substr(nStringSearch,1);This may seem redundant and/or unnecessary but frequently we do want to maintain the "real" position of the character for some reason, especially in instances where we are doing something like moving through a string, character by character, until there are no more columns left!The "concat" string methodWe may have situations where we need to tack two character strings together. This is called concatenation. For instance if I wanted a single string to store my whole name, and I had my first and last names in two different strings, I would concatenate them together (this would not leave a space between them but you get the idea…).sStringObject.concat(sAnotherStringObject);This will tack whatever is inside sAnotherStringObject to whatever already exists in sStringObject.For example:sMyFullName="";sFirstName = "Jim";sLastName = "Williams":sMyFullName = sFirstName.concat(sLastName);What value does sMyFullNamehave now? The answer is "JimWilliams".Now can you think of applications for this? How about "padding" a leading zero to a string of digit characters? For instance sAddend1 = "36D";sAddend2 = "7C"sAddend2 = "0".concat(sAddend2);We just tacked on a zero to the string variable sAddend2. Notice that we can specify a string "literally" like "0".JAVASCRIPT: ITERATION (LOOPS):JavaScript provides for several types of loops, but we will be concerned with the "while" loop.The syntax iswhile(some_condition_is_true){do stuff;do stuff;}Any steps between the curly braces will be repeated until the condition is no longer true. For example:while(x<5){x = x + 1;}The loop will repeat until x is no longer < 5. After the loop is broken out of, the remaining instructions after the loop will continue.** Make sure you always provide a way to break out of the loop!!JAVASCRIPT: SELECTION (CHOICE)Javascript [rovides some different ways to implement selection/choice. The most basic form of the syntax is the "if" statement, as illustrated below:if(some_condition_is_true) {do stuff;do stuff;}do more stuff;For example:if(nResult>= nBase){nCarry = 1;nResult = nResult - nBase;}Much like iteration, with selection we also use the curly braces to denote an instruction, or a group of instructions, that will execute if the condition is true. Unlike iteration, of course, they will only execute once.Note that if the condition is not true, the instruction will instead jump over the selection and go directly to the next line after the curly braces. The statement above is perfectly fine in most cases, and simple "if" statements could be written to account for more complex conditional logic. But consider the actual example we used? We are dealing with a condition that only has two possible outcomes. What if we wanted DIFFERENT instructions to be performed based on the outcome? In other words, if the statement is true, do one thing. BUT if the statement is not true, do another thing. We never want BOTH things to get executed! We could write two different simple "if" statements. The first will say if the condition is true, do something. The second can say if the statement is NOT true, do something. In other words, we ask the "inverse" question instead.Consider the following:if(nResult>= nBase){nCarry = 1;nResult = nResult - nBase;}if(nResult< nBase){nCarry = 0;}This is legitimate and will work. But it can get confusing if we have a lot of this going on. So when we want two different actions for two different outcomes, we can instead use the "if, else" statement, as follows:if(some_condition_is_true) {do stuff;do stuff;}else{do other stuff;do other stuff;}do more stuff;As per our example:if(nResult>= nBase){nCarry = 1;nResult = nResult - nBase;}else{nCarry = 1}Note: as you see we do not need to put line spaces after the curly braces. But it just makes them easy to understand.JAVASCRIPT: WRITING TO THE SCREENFor our first type of programs (those that are not ebbedded in a web form), we want some way to write something to the screen. This does not produce very "elegant" displays but it is a quick and dirty way to do it. Remember we can write out variables, string literals, or even HTML code.document.write("some_text"); /* This writes to the screen WITHOUT a line feed */document.writeln("some_text"); /* This writes to the screen with a line feed */Most of the time you will probably want to use document.writeln but there may be instances where you want to print two things next" to each other so in that case the you would want to use document.write instead, at least when print the first thing to the screen.We rarely use this with the second type of document where we have an HTML form. In that case we usually just assign values to the form objects themselves, which will likewise display in a much neater, well formatted manner.JAVASCRIPT: FUNCTIONSFunctions provide a convenient way to write a "generic" piece of code that can be re-used in different circumstances. In its simplest form, we can understand a function like they are used in mathematics. For instance f(x) = 2x + 5 . As you can see, the input into the function is whatever we set the value of x to be. The output of the function depends on what we feed into it. For example, if the value of the variable x is 20, the output of the function will be 45. If instead the value of x is 4, the output of the function will be 13.In programming, in most cases (but not all) a function will likewise have an input and an output. In fact it may have more than one input. This makes functions very flexible tools to use when programming.In JavaScript, functions are written like this:function myFunction(input_parameter1, input_parameter2…etc.){do something;do something;return something;}This is the first time where our code is not being executed when the program is run. Rather, functions are just "definitions." They are not executed unless they are "called" by another part of the program.The parameters that the function will take as input are defined between the parentheses after the function name. The parameters in the function definition do NOT need to be named the same name as the variables being passed to (to avoid confusion it is better to give them different names anyway). Some functions might not take any input parameters and in those cases the parentheses after the function name will be empty – for example function mySimpleFunction()The word return is very important here. This tells us the "output" produced by the function.Let's look at an example:Let's define a function that tells us whether a number is even. We will call it "isEven"function isEven(nInput){if(nInput %2==0) {return true;}else {return false;}}Notice that the function takes a single input. Based on that input, it returns either a true or false as an output. Functions can be written to return numbers, strings, anything we want; it all depends on how they are written.Now let's see how we would use the function in another part of the program.while(nMyNumber<10){if (isEven(nMyNumber) == true){document.write(" This number is even")}Here we make a call to the isEven function in the "if" statement. What we are doing is passing the number nMyNumber into the function and asking if the "return" value of the function is true. The "return value" is not explicitly stated; rather, the fact that we are calling a function lets the computer know to expect some value to be returned. Try to work this problem out, starting at 1. What values will the same function return?Functions can also return and /or take in no value at all. In that case they have nothing in the parenthesis in the function definition, and also have no return that some value will be returned by the function. ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download