javascript intro

javascriptintro doug turnbull Topic 14a cs205 advanced web programming Turnbull - CS205 - Topic 14a

server client request web server server-side program JavaScript response client-side program database Turnbull - CS205 – Topic 14a

JavaScript Not Java! Interpreted Scripting Language (like PHP) Object-Oriented (like C++, Java) Syntax like C, C++, & Java Lightweight (unlike Java) Turnbull - CS205 - Topic 14a

Purposes Dynamic webpages - fewer page reloads • modify text • react to events • mouse, keyboard actions from user • validate data on forms • create cookies • adapt page to specific web browser Fewer page reloads = faster (better) user experience! Turnbull - CS205 - Topic 14a

Hello World <html><body> <script type="text/javascript"> document.write("Hello World!"); </script> </body> </html> Turnbull - CS205 - Topic 14a

Embedding Code • Create a <script></script> block in HTML • Add external file • <script src=“myCode.js”> </script> Can have multiple blocks or files Code executed from top to bottom • variables & functions can be shared across blocks • Place common functions in <head> Turnbull - CS205 - Topic 14a

Environment Access to browser • navigator,window,location,history objects • browser, version, OS, cookies enabled, url, etc. • try_nav_all example • http://www.w3schools.com/js/tryit.asp?filename=try_nav_all Access to document • document object • Document Object Model (DOM) • set/get cookies, form validation, button animation, image map, timed events Turnbull - CS205 - Topic 14a

Basics Case sensitive Statements end with semi-colon; Variables and functions names • Declare with var • var firstname = “alex”; • start with letter, _ or $ • can use digits but not as first character Comments • //single line comment • /* multi-line comment */ Turnbull - CS205 - Topic 14a

Numbers Everything is a floating point number • var x = 1/4; //equals 0.25; Operation: +, -, *, /, %, ++, -- Assignment: =, +=, -=, *=, /=, %=, • var x = 5; • x *= 3; //x now equals 15 Comparison: ==, !=, >, >=, <, <=, === • === //identity for value and type Print number • x.toString(); Turnbull - CS205 - Topic 14a

Strings Unicode Characters Single or Double Quote Special Characters: \n \t \& \\ \” \’ Concatenate with + • var myName = “Jane” + ” “ + ”Doe”; Length Property: myName.length charAt(pos) & substring(sPos, ePos) functions • “Lunch”.charAt(2); // “n” is the character Turnbull - CS205 - Topic 14a

Boolean • true & false • used for conditional statements • not much more to say, • really. Turnbull - CS205 - Topic 14a

Control Statements Conditionals: if (condition){} else if (condition){} else {} switch/case Loops: while(condition){} for(start; condition; increment){} break & continue Turnbull - CS205 - Topic 14a

Functions Define function function foo (var1, var2, …){ //my code here return someValue; } Use function <script> foo(3.2, “Bobby”); </script> Turnbull - CS205 - Topic 14a

Example Demo <html> <head> <script type="text/javascript"> function displaymessage() { alert("Hello World!"); } </script> </head> <body> <form> <input type="button" value="Click me!" onclick="displaymessage()" /> </form> </body> </html> Turnbull - CS205 - Topic 14a

objects New operator creates new objects • var a = new Object(); // generic object • var b = new Date(); // built-in objects • var c = new MyObject(); // custom objects Built in objects • Array, Boolean, Date, Math, Number, String, RegExp, Global • see w3school JavaScript Reference for details Turnbull - CS205 - Topic 14a

Custom Objects function Point (xVal,yVal) { this.x = xVal; this.y = yVal; this.len = function() { return Math.sqrt(this.x * this.x + this.y*this.y); };} var p = new Point(2,3); Document.write(p.len()); Turnbull - CS205 - Topic 14a

Exercise 1 Add a second function to the point class that prints out all the info about a point. • Use the Chrome JavaScript Console • view -> developer -> JavaScript Console Turnbull - CS205 - Topic 14a

Arrays JavaScript Object Elements do NOT have to be the same type var a = new Array(); a[0] = “pizza”; a[1] = 2.718; a[2] = false; Length Property • var b = a.length; Methods: • reverse(), sort(), slice(), push(), pop() Turnbull - CS205 - Topic 14a

Exercise 2 Try to write a email validator! Turnbull - CS205 - Topic 14a

Exercise 2 Demo <form action="submit.php" onsubmit="return validate_form(this);" method="post"> Email: <input type="text" name="email" size="30"> <input type="submit" value="Submit"> </form> • function validate_form(thisform) • { • //thisform.email.value is string to check • /*if bad email address • alert(“Bad Email Address”); • return false • else return true; */ • } Turnbull - CS205 - Topic 14a

Exercise 2 Demo function validateForm() { varx = document.forms["myForm"]["email"].value; varatpos = x.indexOf("@"); vardotpos = x.lastIndexOf("."); if(atpos < 1 || dotpos < atpos+2 || dotpos+2 >= x.length) { alert("Not a valid e-mail address"); return false; } return true; } Turnbull - CS205 - Topic 14a

Debugging JS on Chrome View > Developer > JavaScript Console Turnbull - CS205 - Topic 14a

Reading – w3schools JS Tutorial Turnbull - CS205 - Topic 14a

javascript intro