02javascript.ppt

8/14/2019 02javascript.ppt

1/43

Javascript, The Movie


2/43

Tonight

A little more with arrays

Logical Operators and Flow Control

Functions

Regular Expressions


3/43

Arrays can be indexed orassociative: 20array.html

var myfisharray = ["goldfish", "betta","cichlid", "tuna"];

document.write(myfisharray[0] + "
");document.write(myfisharray[3] + "
");

var myotherarray = new Array();myotherarray["sam"] = "Sam lives here";

myotherarray["susie"] = "Susie lives here";

document.write(myotherarray["sam"] + "
");document.write(myotherarray["susie"] + "
");

There's really no difference, since the number work as labels, but

you can use the distinction.


4/43

Using Arrays: A Decent LastModified

We looked at the date() method with thelastModified property of the document

We can use this approach with arrays tomake a custom last modified time stampfor web pages

If you put this in an external script, youcan use the same script to write acustom footer for a web site (as I have)


5/43

An Array of Days

Make an array of day names

var days = new Array(8);days[1] = "Sunday";days[2] = "Monday";days[3] = "Tuesday";

days[4] = "Wednesday";days[5] = "Thursday";days[6] = "Friday";days[7] = "Saturday";


6/43

An object and some variables

var dateObj = new Date(document.lastModified);var wday = days[dateObj.getDay() + 1];

var lmonth = months[dateObj.getMonth() + 1];var date = dateObj.getDate();var fyear = dateObj.getFullYear();

Here, we make a date object and passit's properties into some variables


7/43


8/43

Arrays and External Scripts

One way to use arrays is to make an externaljavascript with just the data, and a second externaljavascript with your program to build the page.

This means you can have different data for differentpages, each controlled by a single program

The basic technique is chunking code

One Option

Reference the program script as an absolute URL Reference the data array as a relative URL


9/43


10/43

Logical Operators

"and" expressed with &&

"or" expressed with ||

"not" expressed with ! Thus:

true && true = true

true && false = false

true || false = true !true = false

Example

if (var1 == 1 || var2 == 2)


11/43

= != == != ===

= assigns values

== denotes equivalence (eg. values are

the same)

=== denotes identity (eg. values ANDtype are the same)


12/43

If Statements

Most basic branch

Also if/else and if/else if/else

Can be nested

if (class == "INLS")

{if (section == "668"){document.write("hooray!");}

else{


13/43

For loops

Loop is run for x times, where x isdefined

Brackets for more than one statement

Good for where the variable can beused for more than just the loop

for (count=1;count


14/43

While loops

While condition is met, loop continues

Use brackets to enclose multiple

statements

Make sure the condition will be met!

count = 1while (count


15/43

Incrementing and Decrementing

Use ++ to increment

Use -- to decrement

count++ is the same as count=count+1


16/43

Breaking the loop

Break command: when a condition ismet, the loop is broken and control

passes out of the loopcount = 1;while( count


17/43

Breaking the loop

Continue command: when a condition ismet, the loop is broken but control

passes to the top of the loopcount = 1;while( count


18/43

Switchcount = 1;

while( count


19/43

Other control structures

do while

throw, try, catch

for in


20/43

Functions

Good for an action that will be repeated

In a way, building a custom method

Functions can accept parameters Variable for functions can be local or global

Local variables are known only within the function

Local variables are declared with a "var" statement

Variables declared otherwise are global Global variables are available throughout the

document


21/43

Functions: An Example

function dateinbar(){var d = new Date();var y = d.getFullYear();

var m = d.getMonth() + 1;var d = d.getDate();var t = m + '/' + d + '/' + y + ' ';defaultStatus = "You arrived at the page on " + t + ".";}


22/43

Functions: mouseout_test

A simple function, called by:window.onmouseout = out_text;

function out_text(){

if (alert_message[x])

{

window.moveTo(0, 0);

window.resizeTo(window.screen.availWidth,

window.screen.availHeight);

alert(x + alert_message[x]);

window.focus();

x++;

}

} 25


23/43

Silly Stuff

Browsers can detect a lot of events

onblur detects when you leave something

behind, see 26_blur_test.html

You can also manipulate, to an extent,windows, although security is closing in

there, see 27_window_manipulation.html


24/43

Functions: Slideshow

Simple event handler in HTML:


25/43

Functions: Slideshow

Simple function in Javascript, this is a verysimple manipulation of a DOM object

var x = "1";

function change_slide(y) {

if (y == "next"){

x++;

}

if (y == "prev"){x--;

}

document.main_slide.src="data/Slide" + x + ".jpg"

}slide_show00.html


26/43

More than one way

You could also build an array.

var slides = new Array()var data_dir = './data';

slides[1] = data_dir + '/Slide1.jpg';

// This, for troubleshooting

// alert(slides[1]);

slides[2] = data_dir + '/Slide2.jpg';slides[3] = data_dir + '/Slide3.jpg';







27/43

More than one way

and walk that with events

slide_show01.html


28/43


29/43

Problems with this slideshow?

Forward and Back, and Up?

How many slides?

Titles?

Skip Slides?

Only one way to navigate


30/43

Additions and Updates

See a var for the total number of slides to controlposition (this is a hack!), don't fall off the edge

Multiple functions for actionsAnd a text box with the path to the slide

slide_show02.html

function next_slide()

{

if (slide_number < total_slides){

slide_number++;

document.slide.src= slides[slide_number].src;

document.text_input_box.text_box1.value = slides[slide_number].src;

}}


31/43

Things to Notice

I'm using two arrays, slides and titles inparallel (I could do this with objects)

I've established a convention for naming


32/43

But I also wanted

Some sort of index of slides with names

More flexibility in moving around

Aha! Radio buttons, and click on slide So, what I did was

Write some pure html form with radio buttons

Got that working

Then put in a titles array and Wrote some javascript to output that html with the data

from the titles array

Put an event handler on the form to move to any of the

slides, and one on the img, to move forward oneslide_show03.html


33/43

Write_titles()function write_titles() {

var open_a = "a";document.write('');for (slide_number = 1; slide_number


34/43

Then a cleaner Version

slide_show04 is pretty much the same

but the event handler for the radio buttons

is moved to the button from the form the radio buttons move with slide selection

Still requires that you put in the number

of slides, and build an array of titles.


35/43

Regular Expressions

Very arcane

Very powerful

Allows pattern matching for strings Used in string searches, replacements,

comparisons

Javascript regex are like perl We'll look at some simple examples tonight

What would you use these for?


36/43

Methods associated with regex exec: A RegExp method that executes a search for a match

in a string. It returns an array of information.

test: A RegExp method that tests for a match in a string. Itreturns true or false.

match: A String method that executes a search for a matchin a string. It returns an array of information or null on amismatch.

search: A String method that tests for a match in a string. It

returns the index of the match, or -1 if the search fails. replace: A String method that replaces the matched

substring with a replacement substring.

split: A String method that uses a regular expression or afixed string to break a string into an array of substrings.

from http://www.websina.com/bugzero/kb/regexp.html


37/43

Building an Expression

Enclosed in / characters

/abc/ represents the string "abc"

The expression is an object, created oneof two ways By assignment (note no quotes!)

re = /abc/;

With the RegExp methodre = new RegExp("abc");

Use the latter with user input or where the

expression will change


38/43

Example of testfunction testRegEx(string, expression)

{

re = new RegExp(expression)

if (re.test(string)){

document.write("

A match is found!
");
}

else{

document.write("

No Match
");
}

}

RegularExpressions.html


39/43

Special Characters

^ is used to match the beginning of a string:thus /^The/ matches "The fox"

$ matches at the end: thus /fox$/ matches"The fox"

Square brackets are used to match any oneof the characters listed: thus [aeiou] matchesvowels

\ is used for escaping special characters


40/43

Special Characters

\ is also used for indicating non-printable ascii

\n is a new line \r is a carriage return

\t is a tab

\s is a single white space


41/43

Special Characters

+ matches the preceding char 1 or moretimes, thus /do+m/ matches "dom" and

"doom" * matches the preceding char 0 or more

times

. matches any single character

? matches the preceding character 0 or1 time


42/43

Example in a form

Regular_Expression_Form03.html


43/43

Greedy Expressions

Expressions are "greedy" by default,and try to match the maximum number

of times

Date post:	04-Jun-2018
Category:	Documents
Upload:	chandra-bhushan
View:	217 times
Download:	0 times

02javascript.ppt

Documents