有人可以向我解释这个HTML / Javascript部分吗？

Question

Im following the tutorial over at sixrevisions : http://sixrevisions.com/tutorials/web-development-tutorials/psdhtml-conversion-elegant-and-simple-css3-web-layout/

However I ran into a problem. I have mainly been learning html / javascript from reverse engineering various tutorials, but I have come to a portion of code I have been trying for DAYS to understand.. Here is what I got so far.

 function clearText(field)

Declaring the function, giving it a name of "clearText" and stating it will be a text field.

if (field.defaultValue == field.value) field.value = '';

if the default value of the text field is equal to "value" (A string variable that can be set later?)

the full code

  function clearText(field)
  {
    if (field.defaultValue == field.value) field.value = '';
    else if (field.value == '') field.value = field.defaultValue;
  }

Can someone please break this down in a way a 16 year old could understand? I do get the structure of if statements, but I dont understand exactly what is going on here.

Answer 1

clearText is a function that takes a field as an argument.

field is an object that has two properties : defaultValue and value.

If its defaultValue is equal to its value, then set its value to ''.

If its value is '' then put its defaultValue in its value.

Appearently field.value is the actual value of the html field (it can be a password, a text input, a select maybe -not sure about the latest though-). I'm not sure if defaultValue is something that is standard in HTML elements or if it filled beforehand by the programmer (with other javascript code).

Answer 2

It might be easier to visualize what's going on if you have a test object.

var testFieldOne = {defaultValue: 'test', value: ''}
var testFieldTwo = {defaultValue: 'test', value: 'test'}

// 'value' is an empty string, the function will change it to 'test'
clearText(testFieldOne); 
console.log(testFieldOne.value); // Prints 'test'

// 'value' is the same as 'default', so it will be set to an empty string.
clearText(testFieldTwo); 
console.log(testFieldTwo.value); // Prints ''

Answer 3

You can display default text in input fields to guide the user, what the purpose of that input field is. But you don't want to submit your default text for processing. So you look, if the current field value is the same as your defult text. If that is the case, you clear the input field, so your data processing knows that there was no entry.

Answer 4

As in the tutorial, the default value is set to "Search". This function will empty the text field from its default value "Search" if the user either focus on or blur from the field, and if the text field is empty already, it will say "Search" again. /// By the way I'm 13 :-)

Answer 5

When you have a textarea (or an input tag), one of the things Javascript automatically does is gets what is inside of it, and stores in aa variable called value. So, if you have a textarea like this:

<form name="form1">
<textarea name="textarea1">
This is a sentence inside of a textbox.
</textarea>
</form>

you can get its value in Javascript like this:

document.form1.textarea1.value

which will return:

"This is a sentence inside of a textbox."

With that said, the clearText function accepts field as a value, so if we call it like so:

clearText(document.form1.textarea1)

it means that now, the "field" variable inside of clearText now equals document.form1.textarea1 and can be used as a short way to say the same thing. Which means, if we want to find what is inside of the textarea, we can now do:

field.value

which will, once again, return:

"This is a sentence inside of a textbox."

So, clearText first uses an if statement to check if the current value of the textarea (This is a sentence inside of a textbox.) is equal to its default value. If it is, it makes the textarea empty. If it is the other way around, it sets the textarea to contain its default text. If neither applies, nothing happens. Essentially, it toggles back and forth between the textbox being empty, or the default.

By the way, I don't think you are "reverse engineering" any tutorials at all. "reverse engineering" would involve getting the code back from a program which you are not supposed to be able to get the code back from. Javascript can be read by anyone.