![4
Arrays
Similar to PHP, some syntax differences
var list = new Array(); // create new array
list[0] = "bananas"; // add to index 0
alert(list[0]); // 0th item: "bananas"
list.push("apples"); // use push to append
size = list.length; // size of array: 2
list.sort(); // this one is a method
list[2] = 5; // arrays can be of mixed type
// now ["apples", "bananas", 5]
More about arrays
Associative arrays
var zodiac = new Array();
zodiac["shaun"] = "Leo";
alert(zodiac["shaun"]); // "Leo"
Shorthand declaration
var groceries = new Array("bread", "milk", "cheese");
Loop through an array
for (item in groceries) {
document.write(item + "<br/>"); // writes
all items
}
Loops
Identical to PHP
for (var i = 0; i < 20; i++) {
document.write(I + "<br/>n");
}
while (info344=="awesome") {
comeToClass();
}
Conditionals
Uses else if, not elseif
if (total > 21) {
alert("you bust!);
}
else if (total < 22 && total >= 16) {
alert("Stand!");
}
else {
alert("Hit!");
}
Functions
Nearly identical to PHP
function power(base, exponent) {
var total = 1;
for (var i = 0; i < exponent; i++) {
total = total * base;
}
return total;
}
Objects
Can declare objects in JavaScript
Use function syntax
function Student(name, id) {
this.name = name;
this.id = id;
}
Use dot-notation to access them
var betty = new Student("Betty", 100);
alert (betty.id); // 100](https://image.slidesharecdn.com/2621047/85/lect4-4-320.jpg)
lect4
- 1. 1 Client-side Scripting with JavaScript INFO 344 Winter 2007 Previously Creating documents with HTML Styling content with CSS Dynamic documents with PHP User input with web forms Usability, design Accessibility Any questions? The Project You should have an idea by today By Tuesday, Jan 30 you should have Description Diagram Wireframes Writing assignment is due Tuesday Feb 6 Examples/Ideas Metafilter http://www.metafilter.com/ http://www.jjg.net/ia/visvocab/files/m etafilter_ia.pdf This week Expanding our web toolkit JavaScript: Adding smartness to the browser Previously
- 2. 2 Adding client-side scripting JavaScript JavaScript is a client-side scripting language Executed by browser Can’t interact with the server (without help) Can’t directly interact with PHP Can’t interact with file system What JavaScript can do Perform simple computation Math, string operations, etc. Change page contents Add and remove HTML elements Change text and image contents Control the browser Navigate to pages Open windows Including JavaScript Can be included in page Use <script> tags within <head> Can be placed in an external file Create .js file with JS code in it Use <script> tag within <head> to link Embedding JS in a page <html> <head> <title>JavaScript Test</title> <script type="text/javascript"> var msg = "Hi everybody!"; alert(msg); </script> </head> <body> <!-- body goes here --> </body> </html> Linking to a JS file <html> <head> <title>JavaScript Test</title> <script type="text/javascript" src="library.js"/></script> </head> <body> <!-- body goes here --> </body> </html> in library.js: var msg = "Hi everybody!"; alert(msg);
- 3. 3 JavaScript language basics Statements Statements are terminated in a semicolon var hello = "Hi everybody"; var sum = 3 + 5; Variables Variable names don’t start with $ Declare variables similar to PHP sum = 4 + 5; name = “Jim"; Using var before a variable name gives it a global scope var age = 25; Types Number Both integers and floats String Single or double quotes OK Escape characters: n, t, " Boolean More on types Type casting uses a function syntax document.write("5" + 5); // 55 document.write(Number("5") + 5); // 10 Strings are concatenated using +, not . document.write(a + " plus " + b + " = " + (a+b)); Displaying output The document.write() function inserts its argument into the page document.write ("Hello, " + name + "!"); The alert() function presents its argument in a pop-up window alert("Hello, " + name + "!");
- 4. 4 Arrays Similar to PHP, some syntax differences var list = new Array(); // create new array list[0] = "bananas"; // add to index 0 alert(list[0]); // 0th item: "bananas" list.push("apples"); // use push to append size = list.length; // size of array: 2 list.sort(); // this one is a method list[2] = 5; // arrays can be of mixed type // now ["apples", "bananas", 5] More about arrays Associative arrays var zodiac = new Array(); zodiac["shaun"] = "Leo"; alert(zodiac["shaun"]); // "Leo" Shorthand declaration var groceries = new Array("bread", "milk", "cheese"); Loop through an array for (item in groceries) { document.write(item + "<br/>"); // writes all items } Loops Identical to PHP for (var i = 0; i < 20; i++) { document.write(I + "<br/>n"); } while (info344=="awesome") { comeToClass(); } Conditionals Uses else if, not elseif if (total > 21) { alert("you bust!); } else if (total < 22 && total >= 16) { alert("Stand!"); } else { alert("Hit!"); } Functions Nearly identical to PHP function power(base, exponent) { var total = 1; for (var i = 0; i < exponent; i++) { total = total * base; } return total; } Objects Can declare objects in JavaScript Use function syntax function Student(name, id) { this.name = name; this.id = id; } Use dot-notation to access them var betty = new Student("Betty", 100); alert (betty.id); // 100
- 5. 5 The eval function Can be used to execute arbitrary JS code held in a string Evaluates code and returns the result var sum = eval("2 + 7"); document.write(sum); // 9 Beware security issues Equivalent eval() function in PHP Escaping text Identical to PHP “” (backslash) alert(“To continue, please press the ”OK” button.”); ’ ” n = new line f = line feed r = carriage return & = ampersand Comments Identical to Java and PHP // this is a one-line comment /* this is a multi-line comment */ Using JavaScript Adding JavaScript to pages JavaScript may be used inline Output text in document, like PHP Most JavaScript is event-driven Define functions Attach functions to events (e.g. clicking a button) Functions run when the event occurs Inline JavaScript … <body> <p>Document last modified: <script type="text/javascript"> document.write(document.lastM odified); </script> </p> </body>
- 6. 6 Event-driven JavaScript <html><head> <script type="text/javascript"> function welcome() { alert("hey there!"); } </script> </head> <body> <form> <input type="button" value="Click me" onclick="welcome();"/> </form> </body></html> Input type "button" Button element Looks like submit button By default, does nothing Attribute "value" determines button text Use onclick to add behavior <input type="button" value="Click me" onclick="welcome();"/> onclick handler The onclick handler fires whenever an item is clicked Applies to most items that can be clicked on (links, buttons, images) May reference a function defined in a <script> tag <a href="#" onclick="alert('Hey!');"> This is a JavaScript-powered link</a> Other event handlers onclick onmouseover, onmouseout onblur, onfocus onload (for window object) onsubmit (for forms) … and many more! See http://www.quirksmode.org/js/events_compi nfo.html Referencing form elements Referencing elements Often we would like our scripts to reference an element on the page Get the contents of a text field Change color of some text Two methods for referencing page elements Form referencing Document Object Model (DOM)
- 7. 7 Referencing forms in JS When creating forms and inputs, we give each element a name Refer to object using document.formName.elementName <body> <form name="emailForm"> <input type="text" name="address"/> </form> </body> document.emailForm.address Accessing form values Attribute value contains the value of most form elements document.emailForm.address.value = "a@b.com"; // set alert(document.emailForm.address.value); // "a@b.com" Use checked attribute for checkboxes if (document.emailForm.cb1.checked) { // cb1 is checked … } else { // it's not … } The Document Object Model DOM provides a set of methods for accessing HTML elements (not just in forms) Takes advantage of XHTML's tree structure document object represents root page element Allows us to reference elements by ID or tag name And their parents, children and siblings Can be used to modify page attributes DOM methods document.getElementById(id) Retrieves the element with the specified id Returns an element object (more on this later) // gets the page element with id="email" email = document.getElementById("email"); // display contents of element with id="email" alert(email.value); More methods we'll talk about later The id attribute Can be added to any XHTML element Not just form elements id must be unique on page Form elements may have both name and id <body> <form name="emailForm"> <input type="text" name="address" id="address"/> </form> </body> document.emailForm.address, or document.getElementById("address") Changing page content with the DOM We can also change the content of an HTML element using its innerHTML property <script type="text/javascript"> // when this function fires, add text to paragraph function addResult() { document.getElementById("change").innerHTML ="HI"; //c.innerHTML = "Success!"; } </script> <p id="change">New text will replace this.</p> <input type="button" value="Click" onclick="addResult();"/>
- 8. 8 Validating forms with JS Form validation Can be performed on client-side or server-side Attach validation function to form's onsubmit handler If validation function returns true, form passes data If false, form does not submit Validation example: form <form name="emailForm" action="submit.php" method="get" onsubmit="return validate();"> Enter your email address: <input type="text" name="address"/> <input type="submit" value="Submit"/> </form> Validation example: script <script type="text/javascript"> function validate() { if (document.emailForm.address.value == "") { alert("Please enter your email address!"); return false; } else { return true; } } </script> Design considerations Server-side vs. client-side Server-side code (PHP) Executes before browser loads page Can interact with external sources (databases, etc) Requires page refresh Client-side code (JavaScript) Executes after page loads Can't directly interact with other sources More responsive, no page refresh needed The two are often useful in combination
- 9. 9 Compatibility issues Can't expect JavaScript to work everywhere Different browsers support different features Some users turn JavaScript off Older browsers, non-graphical browsers, mobile browsers, etc… Solution: Provide redundant functionality with PHP PHP works on all browsers Providing alternatives Form validation can be performed both in PHP and JavaScript Use redundant validation Perform JS validation as above Validate in PHP script as well <form name="emailForm" action="submit.php" method="get" onsubmit="return validate();"> Alternatives Links: Provide JS functionality in JavaScript, comparable PHP version as link Non-JS browsers ignore onclick JS browsers return false, don't follow PHP link <a href="phpFunction.php" onclick="jsFunction(); return false;"> Link text</a> Debugging JavaScript JavaScript pages can be run locally in browser No great debugging tools for JS Use Firefox's JavaScript Console to debug your code JavaScript Security Cross Site Scripting (XSS) JS from one domain cannot access pages from another domain No access to file systems JS cannot read data from an external file Code injection Unvalidated user input can inject JS code into a response page Where to get help JavaScript Kit syntax references http://www.javascriptkit.com/jsref/ http://www.javascriptkit.com/domref/ W3Schools JavaScript tutorial http://www.w3schools.com/js/default.asp QuirksMode has information regarding which browsers support which functions http://www.quirksmode.org/
- 10. 10 Questions? Pop Quiz What’s the JavaScript syntax for declaring a global variable? 1. global MyVar; 2. global $MyVar 3. var MyVar 4. declare MyVar Pop Quiz What output does the following code produce? function MyFunc(limit) { var step = 2; for (var i = 0; i <= limit; i++) { total = step * i; document.write(total + "<br />"); } } MyFunc(100); test Pop Quiz Which of the following things can JavaScript NOT do? 1. Open new browser windows 2. Change content on the page 3. Read data from an external file 4. Validate user input Pop Quiz True or False? Javascript statements must end with a semi-colon? FALSE Pop Quiz DOM is an acronym for 1. Document Object Model 2. Distributed Object Method 3. Document Orientation Model 4. Data Object Model
- 11. 11 Next Overview of extra credit assignment JavaScript lab Advanced JavaScript (Time permitting) Getting user input confirm() allows you to display an OK/Cancel dialog Returns true or false exit = confirm("Are you sure you want to leave?"); if (exit) { /* leave page */ } prompt() allows you to create a pop-up dialog that requests information name = prompt("What is your name"); alert("Hello, " + name + "!"); Passing PHP variables to JS Can pass from PHP to JS using echo <script type="text/javascript"> var address = "http://google.com"; // pass variable "name" from PHP to JS <?php echo "var name = " . $name . ";n"; ?> </script> Passing JS variables to PHP Can set a hidden input using JavaScript <script type="text/javascript"> var size = "giant"; // pass variable "size" to PHP document.form1.size = size; </script> … <form name="form1" action="submit.php"> <input name="size" type="hidden" value=""/> </form> Opening windows with JavaScript The window.open() function can be used to open additional browser windows Syntax: var name = window.open(url, windowName, params) See http://www.javascriptkit.com/javatutors/ window1.shtml
- 12. 12 window.open() example <script type="text/javascript"> function openWindow(url) { // we can reference this window with variable 'win' var win = window.open(url, 'win', 'width=600,height=500,status'); } </script> … <a href="win.html" onclick="openWindow('win.html'); return false;">Open window</a>