Term
|
Definition
- a collection of data values organized under a single name
- holds a collection of values
var arrayName = new Array(); |
|
|
Term
|
Definition
each location where the value is stored in an array
var arrayName = new Array(1,2,3,4);
arrayName[0] = 1; 1 is the array (____________) |
|
|
Term
|
Definition
reverses the order of items in the array and returns the reversed array
var a = new Array(1,2,3);
a.reverse
returns 3 2 1 |
|
|
Term
array methods
.sort(function) |
|
Definition
sorts string elements in alphabetical order and returns the sorted array
var a = new Array("one", "two", "five");
a.sort();
returns five one two |
|
|
Term
array methods
.slice (start,end) |
|
Definition
to extract a substring from a text string
"NORTHWEST".slice(0,5)
- returns NORTH |
|
|
Term
Array Methods
.splice (start, size) |
|
Definition
method that adds and/or removes elements to/from an array, and returns the removed element(s).
Code:
var cars = new Array()
cars = ("Mercedes", "Ford", "Chrysler", "Honda", "Volvo");
document.write(cars.splice(1,2))
Output:
Ford,Chrysler |
|
|
Term
Array methods
.push (values) |
|
Definition
method that adds new elements to the end of an array, and returns the new length.
script type="text/javascript">
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.write(fruits.push("Kiwi") + "
");
document.write(fruits.push("Lemon","Pineapple") + "
");
document.write(fruits);
script>
The output of the code above will be:
5
7
Banana,Orange,Apple,Mango,Kiwi,Lemon,Pineapple |
|
|
Term
|
Definition
method that removes the last element of an array, and returns that element.
script type="text/javascript">
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.write(fruits.pop() + "
");
document.write(fruits + "
");
document.write(fruits.pop() + "
");
document.write(fruits);
script>
The output of the code above will be:
Mango
Banana,Orange,Apple
Apple
Banana,Orange |
|
|
Term
|
Definition
a form of an if statement in which the false portion of an if statement is itself another if statement
if (income > 100000)
{
taxRate = .35;
}
else if (income > 50000)
{
taxRate = .28;
}
else
{
taxRate = .20;
} |
|
|
Term
|
Definition
collection of commands that is run each time through a loop
signified by {} - opening and closing curling braces
- only need if the for loop contains more than one command
for (i = 0; i=10)
{return "false";)
} |
|
|
Term
|
Definition
a function that compares the values of two adjacent items in an array at the time
compares two adjacent values at a time
function fname(a,b) {
compare the values of a and b
return a negative, positive, or 0 value based on the comparison
}
function numSort(a,b) {
return a-b;
} |
|
|
Term
|
Definition
a statement that runs a command or command block only when certain circumstances are met
ex) if
if (thisYear == 2010) {
dayCount[1] = 29;
} |
|
|
Term
|
Definition
a variable in a For loop that is used to track the number of times a set of commands is run
- must be an integer
- automatically incremented or decremented
- may be used in the body
- should not assign a value to it in the loop body
for (i = 0; i < 10; i ++)
{
loop body
} |
|
|
Term
|
Definition
- Can count up or down
- Can count by 1's or 2's or any other number
- What we need
- starting value for counter
- stopping value for counter
- increment value
- Parts of it:
- a loop variable used as the counter
- initialization of the counter variable
- a condition that determines when to stop
- an expression to increment or decrement the counter variable
- the loop body
var n;
for( n = 1; n <= 5; n++ )
{
document.write(n);
} |
|
|
Term
|
Definition
statement to execute some code only if a specified condition is true.
Syntax:
if (condition)
{
code to be executed if condition is true
} |
|
|
Term
|
Definition
statement to execute some code if a condition is true and another code if the condition is not true.
Syntax:
if (condition)
{
code to be executed if condition is true
}
else
{
code to be executed if condition is not true
} |
|
|
Term
|
Definition
each element has a numeric position in the array known as ____
var arrayName = new Array(1,2,3,4);
arrayName[0] = 1; 0 is the array (____________) |
|
|
Term
|
Definition
- specifies how many elements the array contains
- always one larger than the largest element number in the array
- When new elements are added to an array, property is updated |
|
|
Term
|
Definition
returns the integer remainder after dividing one integer by another
ex 5 % 2 returns 1 |
|
|
Term
|
Definition
When an if/else or if statement is used inside of another if or if/else statement
ex)
if (income > 100000)
{
taxRate = .35;
}
else
{
if (income > 50000)
{
taxRate = .28;
}
else
{
taxRate = .20;
} |
|
|
Term
|
Definition
a set of commands that it is executed repeatedly until a stopping condition has been met
ex) for loops and while loops
for (start; continue; update)
{
commands
}
while (continue)
{
commands
} |
|
|
Term
|
Definition
an array such as the x array with several missing or null items
ex) var x = new Array();
x[0] = "Start";
x[99] = "stop"; |
|
|
Term
|
Definition
a section of an array
- use the slice method to create
array.slice(start, stop)
- can also use splice method
array.splice(Start,size) |
|
|
Term
|
Definition
when different commands are run based upon various possible values of a variable
ex)
switch(day) {
case "Friday": document.write("hi"); break;
case "Monday": document.write("why"); break;
case "Tuesday": document.write("pie"); break;
default: document.write("what"); break;
} |
|
|
Term
|
Definition
a command block is run as long as a specific condition is met; doesn't depend on the value of a coutner variable
- Pre-test loop
- Tests the while condition
- If true it executes the body of the loop
- If false it skips the body of the loop
- Be sure the change will change to false sooner or later
var n = 1;
while ( n <= 5)
{
document.writeln(n);
n++;
} |
|
|
Term
|
Definition
capitalization of multiple words where the initial word is lowercase, but the first letter of subsequent words is uppercase
ex) document.getElementById("fName").maxLength = 15;
document.getElementById("fLabel").htmlFor = "fName"; |
|
|
Term
|
Definition
| an object that references elements and features of the web document or web browser |
|
|
Term
| Document Object Model (DOM) |
|
Definition
- Organized structure of objects and events
- Goal is to make every object related to the document or browser a part of the DOM
- see picture of tree in ppt tutorial 4 - part 1
* Document object
* Event object
* HTMLElement object
* Anchor object
* Area object
* Base object
* Body object
* Button object
* Form object
* Frame/IFrame object
* Frameset object
* Image object
* Input Button object
* Input Checkbox object
* Input File object
* Input Hidden object
* Input Password object
* Input Radio object
* Input Reset object
* Input Submit object
* Input Text object
* Link object
* Meta object
* Object object
* Option object
* Select object
* Style object
* Table object
* TableCell object
* TableRow object
* Textarea object |
|
|
Term
|
Definition
the format that indicates the location of an object within the hierarchy by separating each level using a dot
ex) window.document |
|
|
Term
|
Definition
| an action undertaken by the user or the browser that impacts the object in some way |
|
|
Term
|
Definition
| actions that the object performs |
|
|
Term
|
Definition
an array of objects used when more than one of the same type of object exists
- objects organized into arrays called these
All of them:
document.anchors
document.applets
document.embeds
document.forms
document.form.elements
document.images
document.links
document.plugins
document.styleSheets
navigator.plugins
navigator.mimeTypes
navigator.frames |
|
|
Term
|
Definition
the process of confirming support for an object
if (object) {
commands
} |
|
|
Term
|
Definition
the identification used for an object
- general form: object1.object2.object3
Ex)
window
document
document.body
event
history
location
navigator
screen |
|
|
Term
|
Definition
a description of an object's appearance, purpose or behavior
syntax:
object.property = expression
ex) document.title = "Script Programming" |
|
|
Term
|
Definition
the JavaScript keyword that references the currently active object in the web browser
ex) this.id |
|
|
Term
|
Definition
a dialog box that displays an informative message to the user along with an OK button that closes the box when clicked
syntax:
alert(message); |
|
|
Term
|
Definition
| the web browser checks the form, which is not submitted to the server until it passes inspection |
|
|
Term
|
Definition
a text string that marks the break between one substring and another
ex)
strArray = string.split(str)
- str - delimeter |
|
|
Term
|
Definition
a form element that is selected in the browser
- running this command makes the element the selected object in the web form
Syntax:
formObject.element.focus(); |
|
|
Term
|
Definition
| a process by which the server or a user's browser checks a form for data entry errors |
|
|
Term
|
Definition
| the browser sends a form to the web server for checking. If an error is found, the user is notified and asked to resubmit the form |
|
|
Term
|
Definition
an object that stores a text value
- most common way to create it is to assign a text string to a variable
- can also be created using the object constructor:
var mascot = new String("bearcat");
var mascot = "bearcat"; |
|
|
Term
|
Definition
a longer text string
- extract using the slice() or split() methods |
|
|
Term
|
Definition
reference a character with a particular index
- extracts a character from a text string
string.charAt(i)
"NORTHWEST".charAt(4) returns H |
|
|
Term
object methods
.slice(start, end) |
|
Definition
extracts longer text strings
- extracts a substring from a text string
string.slice(start, end)
"NORTHWEST".slice(0,5)
returns NORTH |
|
|
Term
object methods
.substr(start, length) |
|
Definition
extract substrings based on their length
- to extract substrings based on length
string.substr(start, length)
"NORTHWEST".substr(5,2)
returns WE |
|
|
Term
object methods
.split(str) |
|
Definition
splits the text string at each occurrence of the (str)
strArray - string.split(str)
ex)
var wrods = new Array();
words = "Northwest Bearcats are Champs".split(" ");
splits the array based on the blank space
returns
Northwest Bearcats Are Champs in a different index of the array |
|
|
Term
trace or write segments of code dealing with
a. arrays and array methods |
|
Definition
var myArray = new Array(3,2,5,6);
myArray.reverse = 6 5 2 3
myArray.sort = 2 3 5 6
myArray.slice(0, 2) returns 2 3
myArray.splice(0, 1) returns 3 5 6
myArray.push(7, 9) returns 3 2 5 6 7 9
myArray.pop() returns 3 2 5 |
|
|
Term
trace or write segments of code dealing with
b. loops (for, while) |
|
Definition
for (var i = 0; i < 4; i++)
{
commands
}
while (i < 4)
{
commands
} |
|
|
Term
trace or write segments of code dealing with
selection statements (if, if..else, nested if, cascaded if, and switch statements) |
|
Definition
If:
if (thisYear == 2012)
{
command;
}
Nested if:
if (thisYear % 4 == 0)
{
if statement for century years
}
If Else:
if(thisYear = 4) document.write("hi")
else {
document.write("bye"
}
Cascaded if:
if (i > 90)
{ tax = 0; }
else if (i <32)
{ tax = 2;}
else {tax = 3;}
switch:
switch(day)
{
case 1: document.write("hi"); break;
case 2: document.write("why"); break
default: document.write("no"); break
} |
|
|
Term
What is the DOM and how the hierarchy works.
What is the top object, the next list of objects down the tree? |
|
Definition
all of the objects within documents and browsers need to be organized in a systematic way. The goal is to make every object related to the document or to the web browser accessible to a scripting language such as JavaScript
Tree:
- Window
- screen
- Navigator
- plugins
- mimeTypes
- history
- location
- frames
- event
- document
- amchors
- applets
- embeds
- frames
- images
- links
- plugins
- scripts
- stylesheets
- forms
- elements |
|
|
Term
what are object collections, such as document.forms[0], images, and various HMTL tags?
How are they used?
Be prepared to trace code using an object collection and answer questions about the collections. |
|
Definition
when more than one of the same type of object wxists, these objects are organized into arrays called object collections
used to reference all of the (object type) objects in the current document (within the current browser window)
ex )used to reference all of the inline image objects in the current document (within the current browser window)
document.images
first inline image - img src = "logo.jpg" id = logoImg" /
- reference by:
- document.images[0]
- document.images["logoImg"]
- document.images.logoImg
- can store in a variable |
|
|
Term
How do we reference objects by Name and ID such as
• .getElementsByTagName(tag)
• .getElementById(id).
How are they used? |
|
Definition
- not all elements are associated with an object collection
- you can create object collection based on:
- tag (name of element tags)
- objects.getElementsByTagName(tag)
- ex) document.getElementsByTagName("div")
- Id attribute
- document.getElementById(id)
- div id = "mainHeading"
...
div
- use document.getElementById("mainHeading")
- Name (value of name attribue)
- document.getElementsByName(name) |
|
|
Term
| how to set the value of an objects property or style property. |
|
Definition
- object property:
object.property = expression
document.images["logoImg"].src = "logo.jpg";
- style property:
object.style.attribute = expression
document.getElementsByTagName("h1")[0].style.fontSize = "24 px"; |
|
|
Term
| how to use object methods |
|
Definition
object.method(parameters)
Ex)
document.write("me"); |
|
|
Term
| how to use the this keyword. |
|
Definition
references the currently active object in the Web browser.
this.id
menuID = this.id + "List :" |
|
|
Term
with a form:
• how to reference a web form |
|
Definition
- document.forms[idref]
- docment.webform (webform = value of the name attribute assigned to the form)
- document.getElementById() method
ex)
document.forms[0] or document.forms["form1"] |
|
|
Term
with a form:
• how to reference a form element |
|
Definition
formObject.elements[idref]
formObject.idref
ex) document.forms[0].date |
|
|
Term
with a form:
• how to set the field value |
|
Definition
formObject.element.value = fieldvalue;
ex)
document.forms[0].date.value = "6-23-2011"; |
|
|
Term
with a form:
• how to navigate between fields |
|
Definition
formObject.element.focus();
ex)
document.forms[0].prod.focus(); |
|
|
Term
| what are the properties of selection lists? |
|
Definition
- length - number of options in the list
- name - name of the selection list
- options - collection of options in the list
- selectedIndex - index number of the currently selected option in the list |
|
|
Term
| what are the options for the properties of selection lists? |
|
Definition
- defaultSelected - a boolean value indicating whether the - option is selected by default
- index - the index value of the option
- selected - a boolean value indicating whether the option is currently selected
- text - text associated with the option
- value - value associated with the option |
|
|
Term
with forms:
how to use option Buttons and Check boxes |
|
Definition
- Option:
- options[idref]
- document.forms[0].shipType[0] or
document.forms[0].shipType["ship1"]
- can be told to be checked with checked Property
- Check box:
- similar to option buttons
- value stored in it is stored in the value property of the check box object
- this value is applied only when the check box is checked
- when unchecked, its field has no value assigned to it |
|
|
Term
with forms:
how to use calculated Fields |
|
Definition
- contents of input fields are treated as text strings
- converting text strings to numerical values:
parseFloat(text)
ex)
priveVal = parseFloat(document.forms[0].price.value); |
|
|
Term
with form validation:
• how to submit |
|
Definition
onsubmit event handler
formObj.
- if the function returns false, the submit event is cancelled
- a value of true allows the submit event to continue
ex)
document.forms[0].onsubmit = checkForm1; |
|
|
Term
with form validation:
• how to alert user |
|
Definition
use an alert box - a dialog box that displays an informative message to the user along with an OK button
syntax: alert(message); |
|
|
Term
with form validation:
• how to reset a form |
|
Definition
to reload the current page:
location.reload();
- add it to the cancel or reset button |
|
|
Term
when working with strings:
• how to calculate the length of a string |
|
Definition
the following code calculates the number of characters in the mascot variable, storing the value 7 in the lengthValue variable:
var mascot = "Bearcat";
var lengthValue = mascot.length
lengthValue here returns 7 |
|
|
Term
when working with strings:
• how to format text strings |
|
Definition
string.toUpperCase() - makes a text string in all caps
others:
- string.fontcolor(color) - changes teh color of string to the hexadecimal color value
- string.fontsize(value) - changes the font size of string to value
- string.toLowerCase() - changes string to lowercase letters |
|
|
Term
|
Definition
|
|
Term
when working with strings:
- string object methods |
|
Definition
- string.charAt() - returns the ith character from string
- string.indexOf(str, start) - searches string, beginning at the start index number, returning the index number of the first occurrence of str; if no start value is specified, the search begins with the first character
- string.slice(start, end) - extracts a substring from string, between the start and end index values; if no end value is specified, the substring extends to the end of the string
- string.split(str) - splits string into an array of string characters at each occurenct of str
- string.substr(start, length) - returns a substring from string starting at the start index value and continuing for length characters; if no length value is specified, the substring continues to the end of string |
|
|
