Objective Static vs. Dynamic Web pages. Variables. Assignments. JavaScript Hierarchy of Objects JavaScript Functions (prompt(“”,””) Document.write(“”)

Objective Static vs. Dynamic Web pages. Variables. Assignments. JavaScript Hierarchy of Objects JavaScript Functions

(prompt(“”,””) Document.write(“”) Alert(“”) document.bgColor document.fgColor document.linkColor document.vlinkColor, window.open() window.close() window.location confirm() window.moveBy()

Static Web Pages

Looks the same and behave in the same manner each time they are loaded into a browser

Content doesn’t changeIt doesn’t specifying dynamic behavior

Example html pages.A programming language is needed….

Dynamic Web pages Properties;

They are the pages that change while you are looking to them,

Varying their contents and responding to user actions.

VariablesA variable is a name used to symbolize a

dynamic value.A variable can be used to represent a value.JavaScript variables:

tempInFahr, X, Y, x, y, Sum, SUM, sum, Sum2Date,

Illegal variables:2hotforU, salary$, two word,

Assignments = is the assignment Operator.The value on the right side assigned to the

variable on the left side.x = y+1;myName = john,myname= Jan.Y= 1;Y= 3;

Cont..X = X +1

The current value of X is increased by 1, and the result is assigned back to x.

Note; = is assignment operator. == is equality operator.

JavaScriptA Statement in a programming language

specifies a particular action that the computer is to carry out, such as changing an image, opening a new window, changing the value of an variable.

JavaScript is a programming language that adding dynamic features to Web pages.

How? the simplest way to add dynamic content to a Web

page is to embed Java Script statements directly within the page using <script> tags.

Cont..How to insert javascript in a webpage; Use the HTML tag pair <script> and

</script> :

<script language="JavaScript" type="text/javascript>

alert(" your message goes here ");

</script>

JavaScript page<html>

<head> <title> Greetings </title> </head>

<body><p>

hello Word, this is the html part of web page.</p>

<script type="text/javascript">

JavaScript statments will go in here

</script>

</body></html>

<html>   

<head> <title> Greetings </title> </head>

<body> <script type="text/javascript"> firstName = prompt("Please enter your name", "");

document.write("<p>Hello " + firstName + ", welcome to my Web page.</p>");

</script>

<p> Whatever else you want to appear in your Web page... </p> </body></html>

A function Or SubroutineTake some variables, evaluate this variables

and produce an output.Example;

F(x)=x+2, alert(“hello cc312”), prompt(“what is your name”, “”)

Alert(“….”)Creats a pop-up windowAlert statement cause a new windows to

appear and display a specified message

Such as:alert(" your message goes here ");

Prompt(“Some text” , ” ”)Prompting the user for a value, the

programmer can specify ( a string of characters enclosed in quotes) that serve as prompt message, followed by another string that specifies a default value for the prompt.

Prompt(“Please enter your name”, “”);

Document.write(“”)Document.write(“ ”) statement is used to

display a message within the web page. document.write (“ ”) statement can display

text ( a string) or a combination of text and variables connected with ‘+’.

Documet.write(“hello class core 13.12”);

Formating outputAny string in a document.write statement

includes html tags will display just as any other text.document.write("<p>Hello <i>"+ firstName +

"</i>, welcome to my Web page.</p>”)In general, JavaScript treats any sequence of

characters enclosed in quotes as literal text.

Data typesIntegers

They are numbers, such as 1,2,3,4…Booleans;

True or False valuesStrings;

They are sequins of any kinds of data types. Such as “Brooklyn college”, “cc312”, this is 4 you”

Number RepresentationJavaScript automatically displays very large

or very small values using scientific notation. Example 100000 would be 1e5, X*10y =XeY

Programming errors and Debugging Bug refers to an error in a program Debugging is the process of systematically

locating and fixing errors in aprogram Three types errors can occur in a program:

1. Syntax errors are simple typographic errors.2. Run-time errors occur when operations are

applied to illegal values, such as dividing by 0. 3. Logic errors represent flaws in the design or

implementation of program.

Math library functionsMath.sqrt() returns a square root of the

input.Math.max (X,Y) returns the greater of

the two inputs.Math.min(X,Y) returns the minimum

number.Math.floor(2.564) returns floor of a

number, in this example it will return 2.Math.ceil(2.564) returns ceil of a number, in here it would return 3.

Hierarchy of ObjectsObjects follow a strict hierarchy where the

window object is the very top level. Such as: window.alert()Because window is the top level object it can

be omitted. alert();The second level of object is

window.documentsuch as: document.write(), document.bgcolor,

etc..

Cont..

alert() Prompt() Confirm()

. .

bgColor,fgColor,linkColorvlinkColor

Window

document

document.bgColor and document.fgColordocument.bgColor is for changing the

background color of pagedocument.fgColor is for changing the font color

of page

Example<html><head>< title> background and font color</title></head><body><p>This can be annoying...<script type=“text/javascript language="javascript">document.bgColor=“red”;document.fgColor=“blue”;</script></p></body></html>

document.linkColor and document.vlinkColordocument.linkColor is for changing the color of

unvisited hyper linksdocument.vlinkColor is for changing the color of

visited linksExample<html><head><title> link color</title></head><body><p>This can be annoying...<script type=“text/javascript

language="javascript">document.linkColor=“red”;document.vlinkColor=“blue”;</script></p></body></html>

window.open() and window.close()window.open() is for opening anew windowwindow.close() is for closing a windowexample<html><head><title> open and close

window</title></head><body><p><script type=“text/javascript language="javascript">window.open(“www.google.com);window.close();</script></p></body></html>

window.locationwindow.location is for changing the location of a

windowexamplehtml><head></head>

<body><p>Look at the location on top!<script language="javascript">newpage=prompt("Enter a URL“,"http://www.yahoo.com"); window.location=newpage;</script></center></body></html>

Confirm()

Confirm() is a method that produce dialog boxes when called

It is used to get user confirmation from a dialog box containing an OK button that returns true to the script and a cancel button that returns false to the script

Cont..ask= confirm(“do you want to open a new

window?”);If (ask){window.open();}Else{Alert(“you chose to not open a new window”);}

window.moveBy()window.moveBy() is for moving a window either

horizontally, vertically, or both, by the specified amount in pixels

<html> <head> </head> <body> <p>Did the page just move? <script language="javascript"> answer = confirm("Are you ready?"); if (answer) { window.moveBy(100,100); } </script> </p> </body> </html>

Thank You..

Objective Static vs. Dynamic Web pages. Variables. Assignments. JavaScript Hierarchy of Objects JavaScript Functions (prompt(“”,””) Document.write(“”)

Documents