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 http://www.jslint.com/

• 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 Worlalert(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 insensitiveg Globalm 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 Jelloalert(greeting.replace(/l/g,"r")); //outputs Herro

16

References

Ding, Wei, “JavaScript” UHCL lecture slides, 2008.

Keith, Jeremy. DOM Scripting: Web Design with JavaScript and the Document Object Model. friends of ED, 2005.

Koch, Peter-Paul, PPK on JavaScript. New Riders, 2007.

Schultz, David and Craig Cook, Beginning HTML with CSS and XHTML: Modern Guide and Reference. Apress, 2007.

W3Schools Online Web Tutorials. “JavaScript Tutorial”. [Online]. Available: http://www.w3schools.com/js/default.asp

Wilcox, Mike, “Advanced JavaScript Debugging Techniques”. [Online]. Available: http://www.sitepen.com/blog/2008/04/03/advanced-javascript-debugging-techniques/

Yue, Kwok-Bun, “An Introduction to JavaScript” UHCL lecture notes, 2000.