o Comparison operators compare two values with each other. Most commonly, they are used to compare the contents of two variables – for example we might want to check if the value of var_1 was numerically greater than that of var_2.
o When you use a comparison operator, the value that is returned from the comparison is invariably a Boolean value of either true or false. For example, consider the following statements:
var_1 = 4; var_2 = 10;
var_3 = var_1 > var_2;
In this case, the value of var_3 is false. Note that the Boolean value of false is not the same as the text string “false”:
var_4 = false; // Boolean value var_5 = “false”; // Text string o Common comparison operators are given below:
Comparison
Function
x == y
Returns true if x and y are equivalent, false otherwise
x != y
Returns true if x and y are not equivalent, false otherwise
x > y
Returns true if x is numerically greater than y, false otherwise
x >= y
Returns true if x is numerically greater than or equal to y, false otherwise
x < y
Returns true if y is numerically greater than x, false otherwise
x <= y
Returns true if y is numerically greater than or equal to x, false otherwise
o To reverse the value returned from a comparison, we generally modify the comparison operator with a ! (a “bang”). Note that in many cases this is not necessary, but can aid comprehension:
var_1 !> var_2; var_1 <= var_2;
both of these are equivalent, but one may make more semantic sense in a given context than the other.
Project
o Open your previous project file, and save it under the name chapter_12.html.
o Ensure that your two variables both have numerical values in them and not strings.
o Use an alert box to display the result of a comparison of your two variables for each of the comparison operators listed above.
o Substitute one of the numerical values for a text string and repeat the procedure. Note the differences.
o While objects and methods allow us to do things on a page, such as alter the content or pop up dialogue boxes to interact with theuser, in many cases we will want to alter the value of one of an object’s properties directly. These cases are akin to painting our piano green.
o Given our discussion on methods so far, we might expect to be able to alter our object’s properties by using a method – for example, the following would seem logical:
piano.paint(“green”);
o In many cases, that is exactly what we will do. However, there are two drawbacks here. The first is that, within this course, the majority of objects that we discover are built into and defined by our browser. If we rely on using a method to alter an object’s property, we are also relying on the fact that the method exists in the first place.
o A much more direct way to solve this problem is to access the object’s properties directly. For example:
piano.colour = “green”;
o Here we are no longer using a method to perform an action, we are using what is known as an operator. In this case, the operator has the symbol “=”, and is known as the assignment operator.
o Within JavaScript, we can use this operator to great effectiveness. For example, we could alter the title element of a document (the text that is displayed in the top bar of the browser’s window) dynamically. This could be done when a user clicked on a part of the page using an event handler (more later on this), or could be set to automatically update each minute to show the current time in the page title. The code we would use for this task is simple:
document.title = “a new title”;
o There are many assignment operators in JavaScript. Some of the more common are shown in the table below:
Assignment
Function
x = y
Sets the value of x to y
x += y
Sets the value of x to x+y
x -= y
Sets the value of x to x-y
x *=y
Sets the value of x to x times y
x /=y
Sets the value of x to x divided by y
o Not all assignment operators work with all types of values. But the addition assignment operator works with both numbers and text. When dealing with numbers, the result will be the sum of the two numbers. When dealing with text (technically called strings), the result will be the concatenation of the two strings:
document.title += “!”;
will cause the symbol “!” to be appended to the end of the current document title.
Project
o Open your previous project file, and save it under the name chapter_6.html.
o Remove any existing JavaScript from your script tags, but leave the tags in place ready for some new JavaScript.
o Use your text editor to change the value of the title element of the page as follows, then load your page into a browser and view the result:
<title>With a little help from</title>
o Now, add a statement to our script element to add the following text to the end of the current title:
”JavaScript for Beginners!”;
o Reload the page in your browser and note the title bar of the window.
o If the display looks odd, consider your use of spaces…
o All we have so far is an example that does nothing more than HTML could manage. Let’s introduce a new method of the window object to help us to add a little more dynamism and interaction to the script. Change the value of the title tag as follows:
<title>Chapter 6: Assigning Values to Properties</title>
o Now, remove your previous JavaScript statement and insert the following:
o We have come across the window object before. Our demonstration of the alert method in chapter 4 could have been more properly written as:
window.alert(“message”);
In many cases, we can omit certain parts of our object/property/method hierarchy when writing our code. We will discuss this again later.
o To understand what is going on with our prompt method, we can write down a method prototype. This is a way of describing a method’s arguments in such a way that their effect on the method is more self explanatory. A prototype for the prompt method of the window object might look like the following:
window.prompt( message, default_response );
o So, we can see that the first argument defines the text that appears as the question in the prompt dialogue box. The second argument is a little less clear. Try your code with different values and see what difference your changes make.
o Finally, we note that this prompt method somehow takes the information typed into the box and passes it to our JavaScript assignment. Say someone typed “Hello World” into the box. It would have been as if our assignment had actually been:
document.title = “Hello World”;
o When this sort of passing of values occurs, it is said that the method has returned the value passed. In this case, we would say that “the prompt method has returned the value ‘Hello World’”, or that “the return value of the prompt method was ‘Hello World’”.
o Return values will become very important when we deal with event handlers later on.
o Generally speaking, objects are “things”. For example, a piano is an object.
o Properties are terms that can describe and define a particular object. Our piano, for example, has a colour, a weight, a height, pedals, a keyboard and a lid.
o Note from the above that an object’s properties can be properties themselves. So we have the case where a piano lid is a property of the piano, but is also an object in its own right, with its own set of properties – for example, the lid has a colour, a length, and even a state of either open or closed.
o If objects are the nouns of a programming language and properties are the adjectives, then methods are the verbs. Methods are actions that can be performed on (or by) a particular object. To continue our piano example, you could play a piano, open its lid, or press the sustain pedal.
o Many programming languages have similar ways of referring to objects and their properties or methods. In general, they are hierarchical, and an object’s relationship with its properties and methods, as well as with other objects, can often be easily seen from the programming notation.
o In JavaScript, we use a “dot notation” to represent objects and their properties and methods. For example, we would refer to our piano’s colour in the following way:
piano.colour;
o If we wanted to instruct JavaScript to play the piano, we could write something as simple as:
piano.play();
o A clear example of object hierarchy could be seen if we decided to open the lid of the piano:
piano.lid.open();
o Or even more so if we wanted to press the sustain pedal of the piano:
piano.pedals.sustain.press();
o Note that in some of the examples above, we have brackets () after each set of words, and in some we don’t. This has to do with making sure that JavaScript can understand what we say.
o JavaScript works with objects throughout its existence in a web browser. All HTML elements on a page can be described as objects, properties or methods. We have already seen a few of these objects in our previous introductory chapter:
document.write(…); document.location;
o In these examples, document is an object, while write is a method and location is a property.
o In these lines, we see a clue about the use of brackets in these statements. We use brackets to signify to JavaScript that we are talking about an object’s method, and not a property of the same name.
o Brackets also allow us to pass certain extra information to an object’s method. In the above example, to write the text “Hello world!” to a web page document, we would write the following JavaScript:
document.write(“Hello World”);
o Each method can do different things depending on what is put in the brackets (or “passed to the method as an argument”, to use the technical term). Indeed, many methods can take multiple “arguments” to modify its behaviour. Multiple arguments are separated by a comma (,).
o A JavaScript instruction like those shown here is referred to as a JavaScript statement. All statements should end in a single semi-colon (;). JavaScript will often ignore missed semi-colons at the end of lines, and insert the semi-colon for you. However, this can cause some unexpected results. Consider the following:
document.write(“<h1>Hello World! </h1>”);
o In many other languages, this would be acceptable. However, JavaScript will often interpret something like this as the following:
document.write(“<h1>;Hello World!; </h1>”);
o This interpretation will generate an error, as JavaScript will complain if you end a statement without ensuring that any terms between quotes have matching pairs of quotes. In this example, the first line’s “statement” is cut short, and JavaScript will fall over.
o For this reason, it is recommended that all your statements should end with semi-colons.
Let’s start with a quick tour of the major features of JavaScript. This chapter is intended to be a showcase of what JavaScript can do, not an in depth investigation into the deeper concepts, so don’t worry too much if you get lost or don’t understand the code you’re typing in!
Project –
Our JavaScript is all going to be written using NotePad. Open NotePad and save the resulting empty document in your user drive as chapter_4.html.
Begin by creating a basic HTML page in your blank document. It doesn’t have to be anything fancy – the following will be more than sufficient:
<html> <head>
<title>Chapter 4: A Tour of JavaScript</title>
</head>
<body>
<h1>A Tour of JavaScript</h1>
</body>
</html>
As a convention, when the notes intend that you should enter code all on one line, they will use an arrow as above to indicate that you should not take a new line at that point. With HTML, this is rarely important, but with JavaScript, a new line in the wrong place can stop your code from working.
Save your new webpage, and view it in your web browser. For the moment, use Internet Explorer to view this page. To do this, find your saved file on your user drive, and double-click on it. This will open the file in Internet Explorer by default, and let you see the header you’ve just created.
So far, we haven’t done anything beyond the scope of HTML. Let’s add some JavaScript to the page.
There are (generally speaking) three places in a web page where we can add JavaScript. The first of these is between a new set of HTML tags. These script tags take the following form:
o The script element above can be placed virtually anywhere you could place any element in an HTML page – in otherwords, in either the head element or the body element. It is most commonly placed in the former, though this is usually so that all your code can be easily found on the page.
o Note too that there is no arbitrary limit on the number of script elements that can be contained in an HTML page. There is nothing stopping you from having a hundred of these dotted around your pages, except perhaps prudence.
o Let’s add our opening and closing script tags to the head element of the page, like so:
Save the file, and then try refreshing your page in the browser window. Note that nothing has happened. This is what we expected – all we have done so far is to set up an area of the page to hold our JavaScript.
Go back to NotePad and enter the following text between the opening and closing script tags:
window.alert(“Hello world!”);
Save your changes, and again refresh your page in the browser window. Welcome to the world of JavaScript!
Go back to notepad and remove the window.alert line you just added. Now add the following, slightly more complex code:
if ( confirm(“Go to Google?”) ) {
document.location = “http://www.google.com/”;
}
o Again, save your changes and refresh the page. For those with an eye to future chapters, this is an example of a conditional statement, where we ask JavaScript to check the condition of something (in this case, our response to a question) and then to alter its behaviour based on what it finds.
o Now, both of these bits of JavaScript have run uncontrollably when the page has loaded into the browser. In most cases, we will want to have more control over when our JavaScript does what we ask it to.
o This control is the domain of events. In a browser, every element of an HTML document has associated with it a number of events that can happen to it. Links can be clicked, forms can be submitted, pages can be loaded and so on.
o Modify the previous lines of JavaScript in your script element to match the following:
function go_to_google() {
if ( confirm(“Go to Google?”) ) {
document.location =“http://www.google.com/”;
}
}
Be careful with your brackets here!
o Save and refresh, and note that nothing happens this time. This is because we have enclosed the previous action (popping up a question and acting on the response) within a function. A function is a block of code that is given a name – in this case, the name is go_to_google() – and is only run when that name is “called”. It can be useful to think of functions as magic spells that can be invoked when their name is said.
o To invoke this spell, we need to choose an element on the page to trigger it. A natural candidate is a link element, so add the following HTML to the body section of your page:
<p>A quick <a href=”#”>test</a>.</p>
o The # link is a common HTML trick that allows us to create a “link to nowhere”.
o Save and refresh, and check that the link appears on the page, and that it goes nowhere when clicked.
o Now, we want to have our page ask us if we want to “Go to Google?” when we click on that link. Here’s how
o Take the link element, and modify it as follows:
<a href=”#” onclick=”go_to_google();”>test</a>
o Save and refresh, and then click on the link. This is an example of an event handler. When the link is clicked (onclick), our browser says the “magic words” go_to_google(), and our function is invoked.
o For our final trick, add the following code to the body section of the page, after the paragraph containing the link:
document.write(“<h2>Here’s another ↵ header!</h2>”);
</script>
o Note that the line of code should be all on one line! Save the page and refresh the browser. Note that we now have a new line of text on the page – another header! We’ve used JavaScript to create HTML and tell the browser to display it appropriately. In this example, JavaScript has done nothing that we couldn’t have done with a line of HTML, but in future chapters we will see how we can use this to write the current date and more.
The form tag includes a name and the code runat=”server” This little code line means that everything will be taken care of by the server.
@ Page Language=”C#”
This first segment lets the page know that the language in use is C# and not VB or some other language. It’s pretty self-explanatory.
AutoEventWireup=”true”
The AutoEventWireup Boolean indicates whether the ASP.NET pages are automatically connected to event-handling functions. With C#, the default is set to true, so the pages are connected to event-handling functions.
CodeFile=”Default.aspx.cs”
The final section indicates the name of the C# file and what it inherits. Since the name of the ASP.NET design file is Default.aspx the CodeFile is Default.aspx.cs.
Inherits=”_Default”
The Inherits attribute refers to the name of the class that the code inherits.
The life cycle begins with a request for the page, which causes the server to load it. When the request is complete, the page is unloaded. The life cycle of a page is marked by the following events:
Initialize: Initialize is the first phase in the life cycle for any page or control. It is here that any settings needed for the duration of the incoming request are initialized.
Load ViewState: The ViewState property of the control is populated. The ViewState information comes from a hidden variable on the control, used to persist the state across round trips to the server. The input string from this hidden variable is parsed by the page framework, and the ViewState property is set. This can be modified via the LoadViewState( ) method: This allows ASP.NET to manage the state of your control across page loads so that each control is not reset to its default state each time the page is posted.
Process Post back Data: During this phase, the data sent to the server in the posting is processed. If any of this data results in a requirement to update the ViewState, that update is performed via the LoadPostData ( ) method.
Load: CreateChildControls ( ) is called, if necessary, to create and initialize server controls in the control tree. State is restored, and the form controls show client-side data. You can modify the load phase by handling the Load event with the OnLoad method.
Send Postback Change Modifications: If there are any state changes between the current state and the previous state, change events are raised via the RaisePostDataChangedEvent( ) method.
Handle Postback Events: The client-side event that caused the postback is handled.
PreRender: This is the phase just before the output is rendered to the browser. It is essentially your last chance to modify the output prior to rendering using the OnPreRender ( ) method.
Save State: Near the beginning of the life cycle, the persisted view state was loaded from the hidden variable. Now it is saved back to the hidden variable, persisting as a string object that will complete the round trip to the client. You can override this using the SaveViewState () method.
Render: This is where the output to be sent back to the client browser is generated. You can override it using the Render method. CreateChildControls ( ) is called, if necessary, to create and initialize server controls in the control tree.
Dispose: This is the last phase of the life cycle. It gives you an opportunity to do any final cleanup and release references to any expensive resources, such as database connections. You can modify it using the Dispose ( ) method.
The node (computer) on network which provides services to the clients is known as server.
Web server examples
Java’s->Tomcat Apache, Wamp Server
Netscape’s ->Netscape
ASP-> IIS (Internet Information Services) (Inetpub (internet publishing) folder-wwwroot (is the default folder for IIS where stay all the ASP files to execute))
There are two types of scripting. Server side scripting and client (browser) side scripting.
Client side scripting is used to create and decorate pages which will display on browser. It is browser dependent.
Example: Java Script and VB Scripting.
Server side scripting is used for operations (sending, receiving, calculating and storing data in database). All these operation are performed on server by asp and jsp and php.
Example: ASP and JSP, PHP.
Difference Between Client Side Scripting and Server Side Scripting
S.No.
Client Side Scripting
Server Side Scripting
1.
Script code is downloaded and executed at client side i.e pages will run on browser.
The script is executed at the server End and the result is send to the client End.
2.
Response to interaction is more immediate once the program code has been downloaded.
Complex process is more efficient as the program and associated resources are not downloaded to the browser.
3.
Client are source as they do not have access to files and database. It is only for designing not for operations.
Have access to files and databases but have security considerations when sending sensitive information.
4.
This scripting is browser dependent and behaves differently for every browser.
Does not depend on browser.
5.
Affected by the processing speed of user’s computer.
Affected by the processing speed of the host server.
Recent Comments