syst 28043 web technologies syst 28043 web technologies lesson 6 – intro to javascript
TRANSCRIPT
SYST 28043
Web Technologies
SYST 28043
Web Technologies
Lesson 6 – Intro to JavaScript
04/19/23 Wendi Jollymore, ACES 2
JavaScriptJavaScript
JavaScript is NOT Java!The syntax is similar
JavaScript is a scripting languageClient-sideObject OrientedHas control structures, variables, etc.
04/19/23 Wendi Jollymore, ACES 3
Using JavaScriptUsing JavaScript
In-Line JavascriptPut JavaScript in document bodyWhere you want results to appear
In <head> section of documentGreat for functions
In external .JS fileStore all your JavaScript in one or more filesRefer to it in document when needed
04/19/23 Wendi Jollymore, ACES 4
<script></script> Tag<script></script> Tag
Used to put JavaScript in your document header or bodyAttributes:
type=“text/javascript”language=“javascript”
Deprecated
src=“myscripts.js”
04/19/23 Wendi Jollymore, ACES 5
<script></script> Tag<script></script> Tag
<script>
<!--
// my statements and functions
// go here
// -->
</script>
The comments keep script hidden from older browsers
04/19/23 Wendi Jollymore, ACES 6
In-Line ScriptsIn-Line Scripts
Put the script in <script> tags where you want the output to appear
<p>Page last modified on:
<script type="text/javascript">
<!--
document.write(document.lastModified);
// -->
</script>
</p>
04/19/23 Wendi Jollymore, ACES 7
Scripts in <head>Scripts in <head>
You can put scripts in the <head> section
If you want to refer to them more than once in your documentIf they contain functions used in other scripts in your document
Use the <script> tag in the <head> tags
04/19/23 Wendi Jollymore, ACES 8
Scripts in <head>Scripts in <head><head><title>Kaluha's Cat House</title><script type="text/javascript"><!-- function displayMsg() { alert("Welcome to the Cat House!"); }// --></script></head>
04/19/23 Wendi Jollymore, ACES 9
External JavaScript FilesExternal JavaScript Files
Useful if you have many functionsUseful when you use functions in more than one pageJust type the scripts in plain text file
Give the file a .js extensionUsually saved in a /scripts sub-directory
I’ll show you an example!
04/19/23 Wendi Jollymore, ACES 10
JavaScript Coding BasicsJavaScript Coding Basics
Variables & Data TypesOperatorsControl StructuresFunctions
04/19/23 Wendi Jollymore, ACES 11
Variables & Data TypesVariables & Data Types
Variables can be declaredIt’s good practice
Use the var keywordYou don’t have to specify data type
var userName="";
var dateFlag = 1;
04/19/23 Wendi Jollymore, ACES 12
Variables and Data TypesVariables and Data Types
Rules for Identifiers:identifier names are case-sensitiveidentifiers must start with a letteridentifier names may not contain spacesidentifiers must be made up of letters and numbersthe only symbols allowed in identifier names are the underscore and $
04/19/23 Wendi Jollymore, ACES 13
Variables & Data TypesVariables & Data Types
\b backspace
\f Form feed
\n New-line
\r Carriage return
\t Tab
\’ Single-quote
\” Double-quote
\\ Backslash
alert("I said \"Click the button first!\" silly!");
document.write("Your location should be:\n\tC:\\webtech");
Escape
Sequences
04/19/23 Wendi Jollymore, ACES 14
OperatorsOperators
Arithmetic Operators+ addition- subtraction* multiplication/ division% modulus++ unary increment-- unary decrement
04/19/23 Wendi Jollymore, ACES 15
OperatorsOperators
Assignment Operators= equals+= plus-equals-= minus-equals*= multiply-equals/= divide-equals%= modulus-equals
04/19/23 Wendi Jollymore, ACES 16
OperatorsOperators
Relational Operators== equal to!= not equal to> greater than>= greater than or equal to< less than<= less than or equal to
Logical Operators&& AND Operator|| OR Operator! NOT Operator
04/19/23 Wendi Jollymore, ACES 17
Control StructuresControl Structures
If-Statementsif (condition){
// code body
}
if (condition){
// code body
} else {
// code body
}
04/19/23 Wendi Jollymore, ACES 18
Control StructuresControl Structures
Switch Statementswitch (expression) {case value1:
// code bodybreak;
case value2:// code bodybreak;
default:// code body
}
04/19/23 Wendi Jollymore, ACES 19
IterationIteration
Pre-Test and Post-Test Loop
while(condition) {
// code body
}
do {
// code body
} while (condition);
04/19/23 Wendi Jollymore, ACES 20
IterationIteration
For Loops:
for (init; condition; cont) {
// code body
}
for (item in collectionType) {
// code body
}
04/19/23 Wendi Jollymore, ACES 21
Defining FunctionsDefining Functions
Function headerKeyword functionFunction nameParameter list in brackets
Or empty brackets if no paramsParams don’t need data types
Return valuesJust add the return statement in the function
04/19/23 Wendi Jollymore, ACES 22
Defining FunctionsDefining Functions
function functionname(param1, param2, ...)
{
// function body
return value; // optional
}
Variable ScopeVariables defined in a function are local to that functionDefine public variables outside functions
04/19/23 Wendi Jollymore, ACES 23
ExercisesExercises
Do the 3 quick exercises in the notes
04/19/23 Wendi Jollymore, ACES 24
JavaScript ObjectsJavaScript Objects
There are some pre-defined objects in JavaScriptThey include (these aren’t all of them)
DateStringMathArray
We’ll look at the references for these on-line
04/19/23 Wendi Jollymore, ACES 25
ExercisesExercises
Do the three exercises in the notes that use JavaScript objects
04/19/23 Wendi Jollymore, ACES 26
DOMDOM
Document Object ModelW3C HTML standard for the structure of HTML documentsObjects:
WindowDocumentLocationHistory
Each has various methods and properties you can use
04/19/23 Wendi Jollymore, ACES 27
Event HandlingEvent Handling
Many elements and DOM objects have eventsEvents = user manipulation of element/control/object
You can associate code with an eventWhen the event occurs, the code executes
E.g. when user clicks a button, code in the “Click” event will execute
See Event Reference online
04/19/23 Wendi Jollymore, ACES 28
Common TasksCommon Tasks
The notes on-line take you through some common, simple JavaScript tasks:
Using Dialog BoxesMaking a “Back” linkRedirecting the UserWorking with Date/TimeForm ValidationImage Rollovers
04/19/23 Wendi Jollymore, ACES 29
ExerciseExercise
Go through the Common Tasks and try them all out
We’ll do some of them together