JavaScript Adding active content to websites. Goals Understand structure of JavaScript Understand...
28
JavaScript Adding active content to websites
-
Upload
wilfred-joseph -
Category
Documents
-
view
213 -
download
0
Transcript of JavaScript Adding active content to websites. Goals Understand structure of JavaScript Understand...
JavaScript
Adding active content to websites
Goals
Understand structure of JavaScript Understand rules of coding Add active content to WebPages Add functions to WebPages
JavaScript
Programming language to add interactive content to pages
Validate forms Utilize cookies Control browser functions Inform users
JavaScript
Script should be placed in the <head> section of the page
JS is not HTML, you will need to make the browser aware of the code by using <script> tag <script type="text/javascript"> and
</script>
JavaScript
Rules End each line with a semicolon ; Text must be enclosed in quotes “ “ JS is case sensitive
Upper and lower case letters are NOT the same
JS is incredibly sensitive to mistakes, be extremely cautious!
JavaScript
<script>document.write("Welcome to my world!!!");</script>
This will write Welcome to my world!!! In your page
Not so exciting, but this can be used to write code to your page, creating massive pages with little coding
JavaScript
JS uses variables in order to store data and execute code
JS is case sensitive Upper case and lower case are seen
differently Myvariable <> myvariable
<>MyVariable Use same syntax throughout
JavaScript
Popup boxes Not popup windows, that is a breach of
netiquette Alert Confirm Prompt
JavaScript
Alert Used to inform user of something important
Confirm Used to confirm information, typically to
redirect user to acceptable page Prompt
Used to gain information from user for use in document
JavaScript
Alert Alert(“text goes here”)
Confirm Confirm(“text goes here”)
Prompt Prompt(“text goes here”, “default value”)
JavaScript
Confirms are typically written as if statements If statements are standard programming
when a choice needs to be made If OK is selected TRUE is registered If CANCEL is selected FALSE is registered
Prompt boxes are typically used to store information in a variable
JavaScript Variable
Place to store information for later use Example
Username=prompt(“Enter Name”, “Name”); Document.write(“Welcome” +username +“!”);
2nd example name=“my first name”; myname=tom; Document.write(myname);
JavaScript
Use the equal sign (=) to assign a value to a variable Variable can be used for input, output
and mathematical operations To compare variable, use a double
equal sign (==)
JavaScript
Other comparing operators
!= Not equal
< Less than
> Greater than
<= Less than or equal to
>= Greater than or equal to
JavaScript
If statements if (condition) {action1} else {action2}
Exampleif (confirm("Are you home?")) {alert("Welcome Home")}else{alert("Go Away!")};
If statements can also be “nested”if (confirm("Are you home?")) {alert("Welcome Home")}else{if (confirm("Do you want to come in?"))
{alert("Welcome to your new home!")}else{alert("Go Away!")};};
JavaScript
Logical Operators AND ( && ) Both conditions must be true
if (condition && condition) {action}
OR ( || ) Either condition must be true
if (condition || condition) {action}
NOT ( ! ) Inverts result of condition
if (!(condition)) {action}
JavaScript
Functions Pre-set event that allows a script action to take
place on or after specific event JS events will happen as soon as the page
loads unless written in a functionfunction myfunction(){ alert(“Welcome Home!”);}
Later in the page<form name=“myform”><input type=“button” value=“Press Once”onclick=“myfunction()”></form>
JavaScript
General formfunction functionname(variable1,
variable2…)
{
JS for actual function;
}
JavaScript
Events JS actions are referred to as events
JavaScript
onmouseover and onmouseout are mainly used in animating buttons Can only be used in conjunction with <a>
tags Idea for use
Create simple images (buttons, arrows, words) for links
onclick will cause an action to happen with user action
JavaScript
Animated Buttons Two steps
onmouseover onmouseout
Animation can only be applied to links
JavaScript
Loops Causes an action to happen a pre-
determined amount of times Two types
For While
JavaScript
For Used when you know exactly how many
times an action should happen While
Used to do an action until some requirement is met
JavaScript
For for (variable=startvalue; variable<=endvalue;
variable=variable+incrementfactor) {JS goes here}
Helpful for writing large HTML tables that require user input Idea: prompt box to define variable, for to give
specific range of data
JavaScript
Whilewhile (variable<=endvalue)
{JS goes here}
Also helpful for large tables, better suited when user input is not needed
JavaScript
Break Stops a loop at a specific pointif (value==0) {break};
Continue A skip in a loopfor (value=-50; value<=50; value=value+1)
{if (value==0) {continue};document.write((100/value)+"<br>");}
JavaScript
Array Automatically define large amount of
variables
Value1=10
Value2=20
Value3=30
….
Value1000=10000
value=new Array;for (number=1; number<=100; number=number+1){ value[number]=number*10};
JavaScript
The name of the array, new Array, is critical Array must be capitalized
