Question? Leave a message!

Javascript events ppt

javascript complete reference ppt and javascript powerpoint replacement and javascript ppt introduction
Dr.LewisFinch Profile Pic
Published Date:15-07-2017
Website URL
Introduction to JavaScript Pat Morin COMP2405Outline What is JavaScript? • – History – Uses • Adding JavaScript to HTML • JavaScript syntax JavaScript events • JavaScript classes • The HTML Document Object Model • 2What is JavaScript? JavaScript is a programming language for use in • HTML pages • Invented in 1995 at Netscape Corporation (LiveScript) • JavaScript has nothing to do with Java • JavaScript programs are run by an interpreter built into the user's web browser (not on the server) 3Where does JavaScript Fit In? Recall • 1. client opens connection to server 2. client sends request to server 3. server sends response to client 4. client and server close connection What about Step 5? • 5. Client renders (displays) the response received from server • Step 5 involves displaying HTML • And running any JavaScript code within the HTML 4What can JavaScript Do? JavaScript can dynamically modify an HTML page • • JavaScript can react to user input • JavaScript can validate user input • JavaScript can be used to create cookies (yum) • JavaScript is a full-featured programming language • JavaScript user interaction does not require any communication with the server 5Pros and Cons of JavaScript Pros: • – Allows more dynamic HTML pages, even complete web applications Cons: • – Requires a JavaScript-enabled browser – Requires a client who trusts the server enough to run the code the server provides • JavaScript has some protection in place but can still cause security problems for clients Remember JavaScript was invented in 1995 and web- – browsers have changed a lot since then 6Using JavaScript in your HTML JavaScript can be inserted into documents by • using the SCRIPT tag html head titleHello World in JavaScript/title /head body script type="text/javascript" document.write("Hello World"); /script /body /html 7Where to Put your Scripts You can have any number of scripts • • Scripts can be placed in the HEAD or in the BODY – In the HEAD, scripts are run before the page is displayed – In the BODY, scripts are run as the page is displayed • In the HEAD is the right place to define functions and variables that are used by scripts within the BODY 8Using JavaScript in your HTML html head titleHello World in JavaScript/title script type="text/javascript" function helloWorld() document.write("Hello World"); /script /head body script type="text/javascript" helloWorld(); /script /body /html 9External Scripts Scripts can also be loaded from an external file • • This is useful if you have a complicated script or set of subroutines that are used in several different documents script src="myscript.js"/script 10JavaScript Variables JavaScript has variables that you can declare with • the optional var keyword • Variables declared within a function are local to that function • Variables declared outside of any function are global variables var myname = "Pat Morin"; 11JavaScript Operators and Constructs JavaScript has most of the operators we're used to • from C/Java – Arithmetic (+, - , , /, %) Assignment (=, +=, -=, = /=, %=, ++, ) – Logical (&&, , ) – – Comparison (, , =, =, ==) • Note: + also does string concatentation • Constructs: – if, else, while, for, switch, case 12Simple User Interaction There are three built-in methods of doing simple • user interaction – alert(msg) alerts the user that something has happened confirm(msg) asks the user to confirm (or cancel) – something prompt(msg, default) asks the user to enter some text – alert("There's a monster on the wing"); confirm("Are you sure you want to do that?"); prompt("Enter you name", "Adam"); 13JavaScript Functions JavaScript lets you define functions using the • function keyword • Functions can return values using the return keyword function showConfirm() confirm("Are you sure you want to do that?"); 14JavaScript Arrays JavaScript has arrays that are indexed starting at 0 • • Special version of for works with arrays script type="text/javascript" var colors = new Array(); colors0 = "red"; colors1 = "green"; colors2 = "blue"; colors3 = "orange"; colors4 = "magenta"; colors5 = "cyan"; for (var i in colors) document.write("div style=\"background-color:" + colorsi + ";\"" + colorsi + "/div\n"); /script 15JavaScript Events JavaScript can be made to respond to user events • • Common Events: – onload and onunload : when a page is first visited or left – onfocus, onblur, onchange : events pertaining to form elements – onsubmit : when a form is submitted – onmouseover, onmouseout : for "menu effects" A complete list of event types is available here • – 16Exception Handling JavaScript also has try, catch, and throw • keywords for handling JavaScript errors try runSomeCode(); catch(err) var txt="There was an error on this page.\n\n" + "Error description: " + err.description + "\n\n" alert(txt) 17Comments in JavaScript Comments in JavaScript are delimited with // and / • / as in Java and C++ 18JavaScript Objects JavaScript is object-oriented and uses the same • method-calling syntax as Java • We have already seen this with the document object document.write("Hello World"); 19Built-In JavaScript Objects Some basic objects are built-in to JavaScript • – String – Date – Array Boolean – Math – 20