Download
1 / 25
250 likes | 385 Views
Introduction To JavaScript. CS 15 – 22-March-2010. What is JavaScript?. A programming language It is interpreted by Web browsers and servers Just like XHTML and CSS XHTML – identifies the content (elements) of a web document
E N D
Introduction To JavaScript CS 15 – 22-March-2010
What is JavaScript? • A programming language • It is interpreted by Web browsers and servers • Just like XHTML and CSS • XHTML – identifies the content (elements) of a web document • CSS – defines how each element is to be displayed in the document • JavaScript provides for interacting with users • Do something based on what the user does • Makes pages dynamic • With JavaScript, a Web page can • Respond to user events such as click or enter or mouse-over or exit • Validate data entry in forms • Create custom HTML code and pages on-the-fly
How are we using JavaScript? • Place JavaScript functions in our document • The function will execute when an “event” occurs • An event is something that the user does, such as: • Loading a new Web page • Clicking on an object • Pressing a key • Submitting a form • Passing the mouse over an element (mouse over and mouse out) • JavaScript is alerted to these events by the browser
JavaScript Functions • A function is a set of instructions to the browser to do something • Typically – associated with an event, an element, and an action. • Events can be asked to “trigger” functions • Examples: • When user clicks (event) on button (element), function causes background color to change (action) • When user moves mouse over (event) an image (element), function causes image to grow bigger (action)
JavaScript Examples • Please download the following files from the blackboard • ChgStyleChgImage.htm • Two image files: gorilla.jpg and flowers.jpg • We will first define the event, then define the function(s) for the event. • The functions will perform the action we want it to do (changing the text style or changing images) • Once we understand what is done, then we will examine the “details” behind the JavaScript language
Do the following in ChgStyleChgImage.htm We will first define the EVENT and the ACTION All events are defined in the OPENING TAG of our XHTML element Change the <h1> opening tag to the following: <h1 id = “myH1” onclick=“ChangeStyle()”> We defined the “id” so that we can identify the specific element we are working with. onclick is a pre-defined event for the element. We have defined an action for it – ChangeStyle() We now have to define the JavaScript code for the ChangeStyle() function.
Defining the ChangeStyle() function • <head> • <script type=“text/JavaScript”> • function ChangeStyle() • { document.getElementById(“myH1”).style.color=“red”; document.getElementById(“myH1”).style.fontFamily=“Arial”; document.getElementById(“myH1”).style.textAlign=“center”; } • </script> • </head> • Save your file, reload the page on the browser, and click on the text element to see what happens
In ChgStyleChgImage.htm, do the following: For the <img> tag in the file, define the ID, Event and Action <img id=“gorilla” onclick=“chgImage()” src=…../> This defines the event (onclick) and the actions (chgImage() function). We next define the actual function in JavaScript
Defining chgImage() function function chgImage() { varmyimage, w, h; myimage = document.getElementById("gorilla"); w = myimage.width; h = myimage.height; w = parseInt(w); h = parseInt(h); myimage.width= w+100; myimage.height= h+100; myimage.src="flowers.jpg"; }
JavaScript Functions • Remember: A function is a set of instructions to the browser to do something • You can create your own functions • We’ll learn the basics • Like the one we just did • Or, you can find functions and “copy” them • Web pages providing free functions, such as http://www.java-scripts.net/ • By viewing the source of Web pages that have JavaScript on them • There are pre-defined functions already available
Pre-Defined Functions • Example: • alert() – Pops up an alert box like that shown below
Writing Your Own Functions We will put all functions in the <head> section Functions must appear between the two <script> tags<script type="text/javascript"> and</script>
Format of Functions • The argument list is required. It can be • Null () • A single argument, as for the alert function example • Several arguments separated by commas function function_name(argument list) { Lots of JavaScript statements }
Try this with the “flowers.jpg” image • Change the <img> tag so that when the image is clicked, the function fun() is run • Write the function fun(). It should • Pop up an alert box saying “This is fun” • Then it should pop up a box saying “Not really” • Then it should pop up a box saying “OK, maybe” • How do we do this? • Save it as haha.htm and (later) FTP it to the class server.
JavaScript Code • You must end each JavaScript statement with a semicolon (;) or a new line (or both) • Each statement is either • A JavaScript command (we will learn about these) • Or, a JavaScript function
JavaScript Variables • Use • Temporarily stores data • In memory – does not use disk • Creating variables • var variable-name; • Assigning a value to a variable • Variable-name=value
JavaScript Variables • Variable’s value can change. Example: • var x; • x=10; • some Javascript statements; • x=20; • Variable can be created and given a value in one step. Example: • var x=10;
Operating on variables + Addition - Subtraction * Multiplication / Division ++ increment by 1 -- decrement by 1
JavaScript – the language JavaScript is Object Oriented Manipulating Web page elements This is about understanding how the elements are organized Called DOM – Document Object Model
JavaScript is “Object Oriented” • It creates and manipulates objects • Examples of JavaScript Object Types • Form • Document • Window • String • Link • Image • Check box • Pretty much any XHTML element and more
Object Terminology • Type of object is called an “object class” • Form • h1 heading • Specific object is called an “object instance” or sometimes just an “object” • It is identified by an id • The form whose id is “DataEntryForm” • The h1 heading whose value is “title” or whose id is “myH1”
Objects Have Properties • Properties describe the characteristics of an Object • Dot Notation: object.property • window.name or window.statusbar • document.title • form.action • img.src • Different types of objects have different properties
Objects Have Methods • Methods are functions that are performed by an object (object class); think of them as verbs • Dot Notation: object.method( ) • Examples: • document.write( ) • document is the object type • write is the method – it writes something (the argument) into the document • window.open( ) • window is the object type • open is the method – it opens a new window
Manipulating Web Page Elements • document.getElementById(x) is a pre-defined function that gets the Web page element whose id is x • Example: document.getElementById("id5") • Save that in a variable. Example: • varmyhdr=document.getElementById("myh1"); • Manipulate the Web page element. Example: • myhdr.style.color="red";
Next Class.. • Different events that we can use • More JavaScript functions • More on providing inputs • More on variables • More events and • More (different) ways to write the JavaScript functions • Growing and Shrinking Images • Changing background colors;
