SYST Web Technologies SYST Web Technologies Lesson 6 – Intro to JavaScript

9/21/2015Wendi Jollymore, ACES2 JavaScript JavaScript is NOT Java! The syntax is similar JavaScript is a scripting language Client-side Object Oriented Has control structures, variables, etc.

9/21/2015Wendi Jollymore, ACES3 Using JavaScript In-Line Javascript Put JavaScript in document body Where you want results to appear In section of document Great for functions In external.JS file Store all your JavaScript in one or more files Refer to it in document when needed

9/21/2015Wendi Jollymore, ACES4 Tag Tag Used to put JavaScript in your document header or body Attributes: type=“text/javascript” language=“javascript” Deprecated src=“myscripts.js”

9/21/2015Wendi Jollymore, ACES5 Tag Tag <!-- // my statements and functions // go here // --> The comments keep script hidden from older browsers

9/21/2015Wendi Jollymore, ACES6 In-Line Scripts Put the script in tags where you want the output to appear Page last modified on: <!-- document.write(document.lastModified); // -->

9/21/2015Wendi Jollymore, ACES7 Scripts in Scripts in You can put scripts in the section If you want to refer to them more than once in your document If they contain functions used in other scripts in your document Use the tag in the tags

9/21/2015Wendi Jollymore, ACES8 Scripts in Scripts in Kaluha's Cat House <!-- function displayMsg() { alert("Welcome to the Cat House!"); } // -->

9/21/2015Wendi Jollymore, ACES9 External JavaScript Files Useful if you have many functions Useful when you use functions in more than one page Just type the scripts in plain text file Give the file a.js extension Usually saved in a /scripts sub- directory I’ll show you an example!

9/21/2015Wendi Jollymore, ACES10 JavaScript Coding Basics Variables & Data Types Operators Control Structures Functions

9/21/2015Wendi Jollymore, ACES11 Variables & Data Types Variables can be declared It’s good practice Use the var keyword You don’t have to specify data type var userName=""; var dateFlag = 1;

9/21/2015Wendi Jollymore, ACES12 Variables and Data Types Rules for Identifiers: identifier names are case-sensitive identifiers must start with a letter identifier names may not contain spaces identifiers must be made up of letters and numbers the only symbols allowed in identifier names are the underscore and $

9/21/2015Wendi Jollymore, ACES13 Variables & Data Types \bbackspace \fForm feed \nNew-line \rCarriage return \tTab \’Single-quote \”Double-quote \\Backslash alert("I said \"Click the button first!\" silly!"); document.write("Your location should be:\n\tC:\\webtech"); Escape Sequences

9/21/2015Wendi Jollymore, ACES14 Operators Arithmetic Operators + addition - subtraction *multiplication / division % modulus ++ unary increment -- unary decrement

9/21/2015Wendi Jollymore, ACES15 Operators Assignment Operators =equals += plus-equals -= minus-equals *= multiply-equals /= divide-equals %= modulus-equals

9/21/2015Wendi Jollymore, ACES16 Operators 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

9/21/2015Wendi Jollymore, ACES17 Control Structures If-Statements if (condition){ // code body } if (condition){ // code body } else { // code body }

9/21/2015Wendi Jollymore, ACES18 Control Structures Switch Statement switch (expression) { case value1: // code body break; case value2: // code body break; default: // code body }

9/21/2015Wendi Jollymore, ACES19 Iteration Pre-Test and Post-Test Loop while(condition) { // code body } do { // code body } while (condition);

9/21/2015Wendi Jollymore, ACES20 Iteration For Loops: for (init; condition; cont) { // code body } for (item in collectionType) { // code body }

9/21/2015Wendi Jollymore, ACES21 Defining Functions Function header Keyword function Function name Parameter list in brackets Or empty brackets if no params Params don’t need data types Return values Just add the return statement in the function

9/21/2015Wendi Jollymore, ACES22 Defining Functions function functionname(param1, param2,...) { // function body return value; // optional } Variable Scope Variables defined in a function are local to that function Define public variables outside functions

9/21/2015Wendi Jollymore, ACES23 Exercises Do the 3 quick exercises in the notes

9/21/2015Wendi Jollymore, ACES24 JavaScript Objects There are some pre-defined objects in JavaScript They include (these aren’t all of them) Date String Math Array We’ll look at the references for these on-line

9/21/2015Wendi Jollymore, ACES25 Exercises Do the three exercises in the notes that use JavaScript objects

9/21/2015Wendi Jollymore, ACES26 DOM Document Object Model W3C HTML standard for the structure of HTML documents Objects: Window Document Location History Each has various methods and properties you can use

9/21/2015Wendi Jollymore, ACES27 Event Handling Many elements and DOM objects have events Events = user manipulation of element/control/object You can associate code with an event When the event occurs, the code executes E.g. when user clicks a button, code in the “Click” event will execute See Event Reference online

9/21/2015Wendi Jollymore, ACES28 Common Tasks The notes on-line take you through some common, simple JavaScript tasks: Using Dialog Boxes Making a “Back” link Redirecting the User Working with Date/Time Form Validation Image Rollovers

9/21/2015Wendi Jollymore, ACES29 Exercise Go through the Common Tasks and try them all out We’ll do some of them together