Quick review:
JavaScript is a scripting language commonly used for client-side web development.
Scripting languages can be embedded or external to an HTML document
Embedded scripts are inserted in the location of the document where they are referenced.
Embedded scripts are inserted into the document via the script element:
<script type=”text/javascript”>
javascript commands
</script>
External scripts are linked via the link element.
Scripting languages make use of XHTML reserve characters and require special attention if the
document they are embedded in will be validated.
JavaScript is a C based Object-based language and is a weakly-typed language.
Some basic syntax rules:
Command lines must be terminated with a semicolon
JavaScript is case sensitive
Reserve words cannot be used as variable or function names
Variable names must start with a letter or an underscore and cannot contain spaces
More in depth JavaScript:
More on working with variables
Variable declaration:
var is the reserve word for declaring a new variable.
Example:
var variablename;
Variables can be of the following type:
Numeric
- defined by a number, must NOT be in quotes
String
- defined by information enclosed in quotes
Boolean
- defined by true or false, must NOT be in quotes
Null
- default value for a variable
Values can be assigned to a value using the = operator, which is an equals of assignment.
Therefore: var area = 1;
Declares a new variable and assigns it a numeric value of 1.
var area = “1”;
assigns the variable a string, and not a number.
Variables can be affected by operators, which assign a new value to the variable.
For example:
var area = 4 * 5; (arithmetic operator)
area = length * width; (arithmetic operator using two variables)
area = “length” * “width”; (string concatenation)
Variable Scope:
Variables can have either GLOBAL or LOCAL scope.
Global Scope means that the variable exists in memory for the duration of the page (or
external script) in which it was declared.
Local Scope means that the variable is temporarily assigned to memory for the duration of
the function or method that declared it.
Objects:
Objects
Java is an object-based language
Object based languages use built in objects, and cannot create classes of objects, or make
use of inheritance features.
Objects are things in memory that are more complex than basic data types.
Objects are defined by their properties.
For example: A Date object has some of the following that define it:
Hours, Day, Minutes, Seconds, Month
Like variables, objects must be declared to create a new instance of an object that is loaded into
system memory.
For example:
var TodaysDate = new Date();
This creates a new instance of the object Date, and gives it the name TodaysDate.
This object is then placed in memory and can be accessed by a reference to its
name.
Methods and Functions:
Methods:
Are processes by which JavaScript manipulates or interacts with an object or its
properties.
For example:
var today = new Date();
creates a new date object named today
today.getHours();
method call to return the value of the hours property of the date object
today.
Functions:
Collections of user defined commands that perform actions or return values.
Every function has the following properties:
Function declaration - lets the program know that the following entity is a
function.
Function Name – identifies the function
Parameters – comma delimited list of variables associated with the function
Function commands, or actions that the function performs
Brackets which identify the start and end of the function
These are written in the following format:
function functionName(parameters)
{
function commands
}
For example:
function returnName(incomingName)
{
document.write(incomingName);
}
This function takes a variable and then prints the variable to the HTML document.
Example without parameters:
function helloWorld()
{ document.write(“Hello World”); }
Functions that return data:
These functions have a RETURN statement, which tells JavaScript that a variable
or value will be passed out of the function.
function area(length, width)
{
var area = length * width;
return area;
}
NOTE!: When the program encounters a return statement, the function process will end. Any
code inside of the function that is placed AFTER the return statement will not be executed.
Calling a function:
Functions are ignored by the browser until called
Function calls have the following format:
functionName(parameters);
Using the above examples:
helloWorld();
Would call the helloWorld function, this function does not take any
parameters, therefore the () are left empty.
area(length, width);
Would call the area function and pass it the values of the length and width
variables.
Handling User Inputted Data: Forms and JavaScript:
Forms:
Two-sided tag
HTML element that creates a form widget on the page
Requires an input element to define the input parameters (type, where to send the data)
Input is an empty tag
Input requires a type attribute defining the type of form: Checkbox, radio, text, etc
Example:
<form name=”formName”>
<input type=”type” name=”inputName” />
</form>
An example creating a textbox:
<form name=”form1”>
<input type=”text” name=”input1”>
</form>
Buttons:
When taking in data, users should be presented with a button to execute the desired result
when they are ready.
HTML has a button element for creating buttons, which is a two sided tag that surrounds
the data to be used for the button’s label.
<button name=”buttonName”>button’s label</button>
Handling the data with JavaScript:
Data in forms can be accessed using a formname.inputname.value convetion.
For example:
<form name=”f1”>
<input type=”text” name=”s1”>
</form>
The javascript to get its value is:
var stuff = f1.s1.value;
To set its value:
f1.s1.value = “2”;
Adding Actions to your buttons:
Buttons can be assigned an action performed function by adding an onclick=”function”
attribute to the button.
Once clicked, the button will execute the function with the given name
For example:
<button onclick=”goFunction”> </button>
This will call the function goFunction when the button is clicked. The browser will begin
at the top of the HTML page and look through the page for the function.
Validating form input:
Forms are validated with a condition if… else statement.
If the form’s input is valid, processes one function
else (false case) process another function
var TestVar = formOne.inputOne.value;
if(isNaN(TestVar))
{alert("NaN!");}
else
{alert(“proper input”);}