1472251766_demojavascriptppt (1).ppt

JavaScript
Intro to scripting languages

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}
 Example
 if (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 function
 function myfunction()
 { alert(“Welcome Home!”);}
 Later in the page
 <form name=“myform”>
 <input type=“button” value=“Press Once”
 onclick=“myfunction()”>
 </form>

JavaScript
 General form
 function functionname(variable1,
variable2…)
 {
 JS for actual function;
 }

JavaScript
 Events
 JS actions are referred to as events

JavaScript
 onmouseover and onmouseout can be
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
 While
 while (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 point
 if (value==0) {break};
 Continue
 A skip in a loop
 for (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

1472251766_demojavascriptppt (1).ppt

Recommended

Recommended

More Related Content

Similar to 1472251766_demojavascriptppt (1).ppt

Similar to 1472251766_demojavascriptppt (1).ppt (20)

Recently uploaded

Recently uploaded (20)

1472251766_demojavascriptppt (1).ppt