View
246
Download
1
Category
Preview:
Citation preview
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> <!-- greet.html Dave Reed --> <!-- Web page that displays a personalized greeting. --> <!-- =============================================== -->
<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..
Recommended