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:

document.title = ↵    window.prompt(“Your title?”, “”);

o Reload your page and consider the result.

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.