JavaScript, Part 2 Instructor: Charles Moen CSCI/CINF 4230

2 Debugging  When programming, add a small amount of code and then refresh the page to test it  When there’s an error, try these techniques Use an alert dialog to output variable values at critical locations and to trace the location of the problem Paste a copy of your code into a backup file, remove all your recent additions, and then add them back, a little at a time Comment out large chunks of code until the problem is removed, then uncomment small chunks until you find the location of the error Paste your code into JSLint at Ask someone else; you might figure it out yourself just by talking about it, or the other person may be able to help Google it JavaScript (Wilcox‏)

3 Debugging  Check the browser’s error console message  With Firefox Check the DOM in Firebug Use console.log("message"); to write to the console Use the Venkman debugger JavaScript (Wilcox‏)

4 JavaScript String Object  When you create a string variable, it is automatically made into a JavaScript String object  length property of the String object The number of characters in the string JavaScript (W3Schools, Koch)‏ var greeting = "Hello World"; alert(greeting.length); //outputs 11

5 String Methods  indexOf() Returns the index of the first character that matches the argument or -1 if it’s not present var greeting = "Hello World"; alert(greeting.indexOf("World")); //outputs 6  charAt() Returns the character at a particular position in a string var greeting = "Hello World"; alert(greeting.charAt(6)); //outputs W JavaScript (W3Schools, Koch)‏

6 String Methods  substring() Extracts a substring from a string Specify the start index, and the index following the end of the substring If there’s no second argument, then the substring continues until the end of the string var greeting = "Hello World"; alert(greeting.substring(6,10)); //outputs Worl alert(greeting.substring(6); //outputs World JavaScript (W3Schools, Koch)‏

7 String Methods  split() Splits a string into an array of strings The argument specifies which character to split on var greeting = "Hello World"; var substrings = greeting.split(" "); for (var i=0; i<substrings.length; i++) { alert(substrings[i]); } //first output is Hello //second output is World JavaScript (W3Schools, Koch)‏

8 String Methods  replace() Replaces some characters with other characters var greeting = "Hello World"; alert(greeting.replace("Hello","Hi")); //output is Hi World JavaScript (W3Schools, Koch)‏  match() Looks for the string in the argument and returns its value, or returns null if it’s not present var greeting = "Hello World"; alert(greeting.match("World")); //outputs World

9 Regular Expressions  A regular expression is a pattern for string matching  A pattern is enclosed between two slashes  We can use a regular expression with a String object’s “match” method JavaScript (W3Schools,Yue, Ding‏) var greeting = "Hello World"; alert(greeting.match(/World/)); //outputs World A regular expression to search for the characters “World”

10 Character Matching  Any character in the regular expression matches itself  A sequence of characters must match the same group  We can also specify a class of characters by using [ ] JavaScript (W3Schools,Yue, Ding‏) /World/ Matches “World” /[abc]/ Matches ‘a’ or ‘b’ or ‘c’ /[a-zA-Z]/ Matches any letter /[^abc]/ Matches any character except ‘a’ or ‘b’ or ‘c’ /a[aeiou]c/ Matches “aac” or “aec” or “aic” or “aoc” or “auc”. Matches any character except \n /a.c/ Matches ‘a’ followed by any character followed by ‘a’

11 Escaped Characters  Characters preceded by a backslash  Invisible characters, certain classes of characters JavaScript (W3Schools,Yue, Ding‏) \n newline \r carriage return \t tab \f formfeed \d A digit [0-9] \D Any character that’s not a digit [^0-9] \w An alphanumeric character [0-9a-zA-Z] \W An non-alphanumeric character [^0-9a-zA-Z] \s A white space [\t\f\r\n] \S A non-white-space character [^\t\f\r\n] \/ A slash

12 Multipliers  Specify how many times a character must occur in the pattern JavaScript (W3Schools,Yue, Ding‏) * 0 or more times + 1 or more times ? 0 or one time {5} Exactly 5 times {3,} 3 or more times {3,6} 3 to 6 times | or /abc|ace/ Matches either “abc” or “ace” /x+y*x+/ Matches one or more ‘x’ followed by 0 or more ‘y’ followed by 1 or more ‘x’

13 Anchors  Align the pattern with a particular part of the string JavaScript (W3Schools,Yue, Ding‏) ^ Matches the beginning of the string $ Matches the end of the string \b Matches on a word boundary \B Matches on a non-word boundary /^abc$/ Matches on “abc” only /^\d+$/ Matches on a string containing only digits /\bHello\b/ Matches “Hello!” but not “HelloThere”

14 Modifiers  Modifiers indicate special options JavaScript (W3Schools,Yue, Ding‏) i Case insensitive g Global m Multiline mode – the ^ and $ match before and after newlines /hello/i Matches “hello” or “HELLO” or “Hello”, etc.

15 Regular Expressions  We can use a regular expression with a String object’s “replace” method JavaScript (W3Schools,Yue, Ding‏) var greeting = "Hello"; alert(greeting.replace(/H/,"J")); //outputs Jello alert(greeting.replace(/l/g,"r")); //outputs Herro

16 References Ding, Wei, “JavaScript” UHCL lecture slides, Keith, Jeremy. DOM Scripting: Web Design with JavaScript and the Document Object Model. friends of ED, Koch, Peter-Paul, PPK on JavaScript. New Riders, Schultz, David and Craig Cook, Beginning HTML with CSS and XHTML: Modern Guide and Reference. Apress, W3Schools Online Web Tutorials. “JavaScript Tutorial”. [Online]. Available: Wilcox, Mike, “Advanced JavaScript Debugging Techniques”. [Online]. Available: techniques/ Yue, Kwok-Bun, “An Introduction to JavaScript” UHCL lecture notes, 2000.