CPGM21X1 - Sheridan College

CPGM21X1 - Sheridan College

SYST 28043 Web Technologies Lesson 6 Intro to JavaScript JavaScript JavaScript is NOT Java! The syntax is similar JavaScript is a scripting language Client-side Object Oriented Has control structures, variables, etc. 02/14/20 Wendi Jollymore, ACES

2 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 02/14/20 Wendi Jollymore, ACES

3 Tag Used to put JavaScript in your document header or body Attributes: type=text/javascript language=javascript Deprecated src=myscripts.js 02/14/20 Wendi Jollymore, ACES

4 Tag The comments keep script hidden from older browsers 02/14/20 Wendi Jollymore, ACES 5

In-Line Scripts Put the script in

02/14/20 Wendi Jollymore, ACES 6 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 02/14/20 Wendi Jollymore, ACES 8 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 subdirectory Ill show you an example! 02/14/20 Wendi Jollymore, ACES 9 JavaScript Coding Basics Variables & Data Types Operators

Control Structures Functions 02/14/20 Wendi Jollymore, ACES 10 Variables & Data Types Variables can be declared Its good practice Use the var keyword You dont have to specify data type var userName="";

var dateFlag = 1; 02/14/20 Wendi Jollymore, ACES 11 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 $ 02/14/20 Wendi Jollymore, ACES 12 Variables & Data Types \b backspace Escape \f Form feed

\n New-line Sequences \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"); 02/14/20 Wendi Jollymore, ACES

13 Operators Arithmetic Operators + * / % ++ -02/14/20 addition subtraction multiplication division modulus

unary increment unary decrement Wendi Jollymore, ACES 14 Operators Assignment Operators = += -= *= /= %= 02/14/20

equals plus-equals minus-equals multiply-equals divide-equals modulus-equals Wendi Jollymore, ACES 15 Operators Relational Operators == != > >=

< <= equal to not equal to greater than greater than or equal to less than less than or equal to Logical Operators && || ! 02/14/20 AND Operator

OR Operator NOT Operator Wendi Jollymore, ACES 16 Control Structures If-Statements if (condition){ // code body } if (condition){ // code body } else { // code body } 02/14/20

Wendi Jollymore, ACES 17 Control Structures Switch Statement switch (expression) { case value1: // code body break; case value2: // code body break; default: // code body }

02/14/20 Wendi Jollymore, ACES 18 Iteration Pre-Test and Post-Test Loop while(condition) { // code body } do { // code body } while (condition); 02/14/20 Wendi Jollymore, ACES

19 Iteration For Loops: for (init; condition; cont) { // code body } for (item in collectionType) { // code body } 02/14/20 Wendi Jollymore, ACES 20 Defining Functions

Function header Keyword function Function name Parameter list in brackets Or empty brackets if no params Params dont need data types Return values Just add the return statement in the function 02/14/20 Wendi Jollymore, ACES 21 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 02/14/20 Wendi Jollymore, ACES 22 Exercises

Do the 3 quick exercises in the notes 02/14/20 Wendi Jollymore, ACES 23 JavaScript Objects There are some pre-defined objects in JavaScript They include (these arent all of them) Date String Math

Array Well look at the references for these on-line 02/14/20 Wendi Jollymore, ACES 24 Exercises Do the three exercises in the notes that use JavaScript objects 02/14/20 Wendi Jollymore, ACES

25 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 02/14/20

Wendi Jollymore, ACES 26 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 02/14/20

Wendi Jollymore, ACES 27 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 02/14/20

Wendi Jollymore, ACES 28 Exercise Go through the Common Tasks and try them all out Well do some of them together 02/14/20 Wendi Jollymore, ACES 29

Recently Viewed Presentations