We've learned that variables are numbers, strings, and object parameters. There is also an important part of javascript: arrays.
An array is a list. Various lists such as lists, URLs, and color lists can be stored in an array.
Here we generate an array of colors:
var colors = new Array ("Red", "Blue", "green");
Now that you have an array, what can you do with it? The advantage of an array is that individual elements in an array can be called by numbers. The number of the first element is 0, which can be invoked in the following ways:
var the_element = colors[0];
When executing this line of JavaScript instructions, the variable the_element is given a value of the string "red". You can call the element in the array by writing out the name of the array and placing the order number of the elements in the array in square brackets. The order number of the 2nd element in the array is 1.
Once the array is generated, you can add and modify the array values. If you are going to color an array of 1th elements that have red that is purple, you can do this:
Colors[0] = "purple";
Arrays are often used for loops. The following are the applications of arrays and loops.
An array is a very useful thing because you can loop through the elements of an array to perform a function. The following is an example of looping through each element of a URL array.
First, to make this example work, we need to declare some variables:
var url_names = new Array ("hits.org", "awaken.org", "bianca.com");
var A_url;
Next, we loop through the elements in the array, open each URL and treat the OK button for the user clicking the alert box:
for (loop=0; loop<url_names.length;loop++)
{
Make is the name of a URL, for example http://www.hits.org/
A_url = "http://www." + Url_names[loop] + "/";
Open a Window
var new_window=open (A_url, "New_window", "width=300,height=300");
Wait for the Click
Alert ("Hit OK for the next site");
}
First, you'll notice the loop from 01 until url_names.length this variable. Place. Length behind the array name because it tells you how many elements are in the array. However, note that the number of array elements differs from the index number (ordinal number) of the last element in the array. If there are 3 elements in the array, the length of the array is 3, but the index number of the last element in the array is array[2] ... This is because the index number of the 1th element in the array is array[0] ... If you get an error message such as "Object Not found" When you execute an array call, and you have an array in your code, it is possible that you confuse the index number of the array element with the number of elements in the array.
No, you may also notice that the. length is placed at the end of the array. A little bit to attach some attributes to an object. This is because the array itself is an object, and length is an attribute of the array.
Another manifestation of an array term object is that you need to use a new command to generate a new array. In the example above, Url_names = the new Array (...) can actually be interpreted as: Generate a novel array, using Url_names to make a reference to it. You can notice that when the word "new" is applied in this way, a new object is generated.
The 1th row in the loop generates a variable. It is assigned a string.
A_url = "http://www." + Url_names[loop] + "/";
At the beginning of the loop, the initial value of the variable loop is 0. The 1th element of the Url_names array is the string "hits.org"., so in the first loop, the variable a_url is equivalent to the string "http://www.hits.org/" ...
The next line in the loop opens a window with the URL
var new_window=open (A_url, "New_window", "width=300,height=300");
Because we give the window the same name every time we open it, we don't open many windows when we go to the new URL. If we remove the window name "New_window" in the example above, a new window opens each time the loop is in.
The 3rd line of the loop just opens an alert box and treats the user by clicking the OK button.
Arrays can also be caused by other elements, not just strings. Arrays can be applied to various aspects of the JavaScript Document Object model (Document Object mode). The next lecture will cover this area of knowledge.
The following is the code in the onclick= "" Link:
var change=prompt (' Change which image (0 or 1)? ', ');
window.document.images[change].src= ' three.jpg ';
This example intends to use a picture exchange to demonstrate how the array intervenes in the DOM. Try this example and look at the source code.
DOCUMENT.IMAGE_NAME.SRC = ' some_image.gif ';
In order to do this, each picture needs to be named. If you don't know the name of the picture you want to swap, you know the order in the HTML page. You can specify the picture with its DOM number.
The first picture in an HTML file is document.images[0], and the second is document.images[1], so on. If you want to know how many pictures are in a file, you can check the image array length to know: Document.images.length. For example, you want to change all the graphics on your page for a spacer GLF picture, you can do this:
for (loop=0; loop<document.images.length; loop++)
{
DOCUMENT.IMAGES[LOOP].SRC = ' spacer.gif ';
}
Are you clear?
Good. Next we're going to learn the function.
A function is the last basic component of programming needs. All program languages are functions. A function is something that can be invoked at a certain angle and need not be rewritten.
If you want to teach yourself to read quickly and use a long text link once clicked to tell you the current time.
For example... Time!
Look at the Source:
<a href= "#" onclick= "
var the_date = new Date ();
var the_hour = the_date.gethours ();
var the_minute = The_date.getminutes ();
var the_second = The_date.getseconds ();
var the_time = the_hour + ': ' + the_minute + ': ' + the_second;
Alert (' The time is now: ' + the_time); " > Time!</a>
The details of this JavaScript work here are not important; we'll come back for a review later.
The important thing is that it's too long. If there are 10 more of these time links, you will need to clip the program every time. This makes your HTML both long and ugly. Also, if you want to change the program, you have to change it in 10 different places.
You can write a function to perform without having to make a 10 copy program. The functions used here are easy to edit and easy to read.
See how to write a timer function.
The HTML page contains a function called Announcetime. Call Annoumncetime from a link:
<a href= "#" onclick= "Announcetime ();" > Time!</a>
Just like this:
The downward look is like lesson two:
<a href= "#" onclick= "alert (' hello! ');" >Hello!</a>
This is called a warning dialog box called from a link. A function is like a method, and the only difference is that the method is attached to an object. In the example of this warning, this object is a Window object.
Let's go back to the function itself. If you look at the source, you'll see that the function is in the header of the HTML file.
<title> no parameter function </title>
<script langauge= "JavaScript" >
<!--hide Me
function Announcetime ()
{
Get the date, the hour, minutes, and seconds
var the_date = new Date ();
var the_hour = the_date.gethours ();
var the_minute = The_date.getminutes ();
var the_second = The_date.getseconds ();
Put together the string and alert with it
var the_time = The_hour + ":" + The_minute + ":" + the_second;
Alert ("The Time is now:" + the_time);
}
Show Me-->
</script>
<body>
...
</body>
OK, let's review this function line by row. First, all of the functions come from this format:
function functionname (parameter list)
{
Statements ...
}
A function's naming rule is similar to a variable. The first character must be a letter or a standard symbol. The remaining characters can be digits or a horizontal line. However, you must ensure that the function does not have the same name as the defined variable. Otherwise, there will be bad results. I name the functions in an uppercase way to make sure they don't happen to duplicate the characters.
The function name is followed by a set of parameters. This example is a function with no parameters, in the next example we will give an example.
parameter is the body of the function. This is a set of statements that you want to run after a function is called. In the next few examples, I intend to use the timekeeping device, so let me describe how it works.
First line:
var the_date = new Date ();
Gets a new Date object. Just as you get a new array with an array, you need to get a Date object first when you want to find out what time it is. When a new Date object is found, it is automatically reset to the current date and time. In order to get this information outside of the object, you must use this object method:
These methods obtain the appropriate number from the Date object.
var the_hour = the_date.gethours ();
var the_minute = The_date.getminutes ();
var the_second = The_date.getseconds ();
You may wonder: how can I assume that the Date object knows the way? Or how do I know there is such a thing as a Date object? These reasons should be taken from the JavaScript library, and I will do my best to explain the built-in JavaScript objects, but not necessarily completely clear to you.
Other parts of the function are clear. It calls back numbers in this way, turns them into strings, and invokes a warning to pop up a string dialog box. Notice that you can call a method and function inside the function. We will discuss it in detail.
Now if you've been through the time link, you may have noticed something wrong. You may get this feedback every time: "12:12:04", this is Getsecond () The return value is "4". So when you synthesize the time, what you see is the_minute+ ":" +the_second gets 14:4 rather than what we want. It's an easy thing to do, and a new function is needed to fix the minute and second synthetic values.
See parameters and return values.
Although parameterless functions reduce the write-source workload, HTML source code is useful for readability, but functions with parameters are more useful.
In the previous example, a problem occurs when the value of the minute or second returned is less than 10. The second value we want to see is 04 rather than 4. We can do this:
var the_minute = The_date.getminutes ();
if (The_minute < 10)
{
The_minute = "0" + the_minute;
}
var the_second = The_date.getseconds ();
if (The_second < 10)
{
The_second = "0" + the_second;
}
It will be very effective. But note that the same source you wrote two times: if something is less than 10, then add "0" before. So consider using a function when you want to rewrite it multiple times with the same code. In this case, I wrote a function called Fixnumber:
function Fixnumber (the_number)
{
if (The_number < 10)
{
The_number = "0" + the_number;
}
return the_number;
}
The Fixnumber parameter is the_number. A parameter is also a variable, and its parameter values are set when the function is called. In this case, we call the function like this:
var fixed_variable = Fixnumber (4);
The parameter the_number is set to 4 in the function. To this moment you should have a certain understanding of the subject of Fixnumber. It means: If the variable the_number is less than 10, then add a 0 in front of it. The new content here is return instruction: Returns the value of the The_number. The return instruction is used in the following situations:
var some_variable = someFunction ();
The value of the variable some_variable is the return value of the function somefunction (). In Fixnumber, I join: return the_number, then exit the function and send back the The_number value to any one of the variables waiting to be set.
So, I write code like this:
var fixed_variable = Fixnumber (4);
The initial value of the The_number will be set to 4 through the function call, and then because 4 is less than 10, the The_number will be changed to "04". The The_number value is then returned, and the variable fixed_variable is set to "04".
To include Fixnumber in the original function announcetime (), I added the following:
function Announcetime ()
{
Get the date, the hour, minutes, and seconds
var the_date = new Date ();
var the_hour = the_date.gethours ();
var the_minute = The_date.getminutes ();
var fixed_minute = Fixnumber (The_minute);
var the_second = The_date.getseconds ();
var fixed_second = Fixnumber (The_second);
Put together the string and alert with it
var the_time = The_hour + ":" + Fixed_minute + ":" + fixed_second;
Alert ("The Time is now:" +the_time);
}
When the time link is clicked, the time is 12:04:05. Get the date with the new date (), get the Hour with gethours (), get the minute with the previous method, the minute in this case should be 4, and then call Fixnumber, whose argument is The_minute:
var fixed_minute = Fixnumber (The_minute);
When Fixnumber () is invoked, the parameter the_number is set to The_minute. In this case, because The_minute is 4, The_number will be set to 4.
After setting the parameters, we enter the function body. Since 4 is less than 10,the_number is changed to "04", then the The_number value is returned with the return instruction. When "04" is returned by Fixnumber, this example fixed_minute is equal to "04".
We'll look at the process step-by-step. Suppose the time is 12:04:05.
We start with the function announcetime ()
1.the_minute = The_date.getminutes (); then The_minute = 4
2.fixed_minute = Fixnumber (the_minute); equals function Fixnumber () and returns its value to Fixed_minute
Now enter function Fixnumber ()
3. Function Fixnumber (the_number) Fixnumber () is called with The_minute value, The_minute value is 4, so now The_number = 4
4. if (The_number <) {The_number = "0" + the_number;} Because 4 is less than 10, so the_number is now equal to "04"
5. Returns the The_number value, exits the function and returns the value "04"
Now that the function fixtime () has been exited, so now we're back to Announcetime ()
6. The function returns a value of "04", so Fixed_minute is now equal to "04"
This example uses a function that has only one parameter. You can actually set multiple parameters for a function. Next we're going to talk about more than one parameter function.
Current 1/2 page
12 Next read the full text
