Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #19041

Re: Scope of search / reduce scope / about "this"

Show key headers only | View raw

thomas.lehmann@adtech.com wrote:
^^^^^^^^^^^^^^^^^^^^^^^^^
Please put your real name there.  And, if possible, do not post to Usenet 
via Google Groups, because of its flawed Web interface and the amount of 
spam from there; use a newsreader, like KNode or Thunderbird, instead.

> Simple example:
>   One element in the page should get automatically the focus.
>   The way I did was to mark that element with a special tag
>   and to search for it with <body onload="setFocus(document)">.

Be aware that this may look user-friendly superficially, but actually is not 
as it prevents scrolling the document with the keyboard.  If it works at 
all.
 
> The advantage:
>   is that the code is very simple; simply searching
>   the HTML elements fort this concrete attribute.
> 
> The disadvantage:
>   is that the whole HTML might be searched
>   depending on where the element is.
> 
> Goal:
>   I would like to place the "setFocus" call at a location
>   where I know I have to search less elements.
> 
>   If an user clicks a button it's simple:
>   example: <button onclick="setFocus(this.form)">
>   As you see the scope has been reduced to this.form.

Scope is a different concept, see below.
 
> Does not work (this="window", not "table"):
> [code]
>   <table>
>       <!--- hierarchy with some HTML elements -->
>       <script language="JavaScript">

  <script type="text/javascript">

in HTML 4.01, HTML5, and XHTML, and

  <script>

in HTML5 when it does not need to be backwards-compatible.

>       setFocus(this);

The “this” keyword refers to the “this” value of the (current) execution 
context.  The “this” value of the global execution context is the ECMAScript 
Global Object.  The code above is global code: code in the global execution 
context.  Therefore, “this” refers to the Global Object there, not to the 
table object.  In Web browsers, historically the ECMAScript Global Object is 
implemented or wrapped as the object representing the view the document is 
displayed in; that object has a “window” property that refers to itself.

It is a common misconception to think that the scope of an execution context 
and its “this” value would be the same thing.  The scope of an identifier is 
the part of a program in which that identifier can be resolved.  “this” is 
not an identifier, so it has nothing to do with scope.  There is a scope 
chain associated with an execution context containing references to the 
*execution* contexts in which it is embedded.  Specifically, an HTML element 
does _not_ constitute an ECMAScript execution context.

>       </script>
>     </table>

Not Valid.  The child element of a “table” element can only be a “thead”, 
“tbody”, “tfoot”, or “tr” element.

<http://validator.w3.org/>

> [/code]
> 
> Does somebody have an Idea on how to do it?

It is unclear what setFocus() does as you did not post the code, but one 
could assume that it uses a selector search.  This would be the wrong 
approach.  If it is not using a selector approach, then the reason why it 
seemingly takes long to search elements is rather that “onload” code (for 
the “load” event) is not executed before the document has been 
(*completely*) loaded.  This is a Good Thing because only then the document 
tree is ready for access via the DOM.  (But see also “DOMContentLoaded”.)

Give the element that you want to focus an ID (“id” attribute), and then use 
document.getElementById() to access the corresponding element object.

  setFocus(document.getElementById("myId"));

But if you already know the form the control is in, access the corresponding 
form object as you did, then use the form object's “elements” collection to 
access the form control:

  <body onload="setFocus(document.forms[…].elements["myControl"])" …>

or

  <… on…="setFocus(this.form.elements["myControl"])">

(For backwards compatibility you want to access the form control by its 
“name” attribute value then [same syntax].  Only if there are more controls 
of the same name, so that an ID would be more efficient/better maintainable, 
you may want to forego backwards-compatibility.)  This is also described in

  <http://jibbering.com/faq>

and

  <http://PointedEars.de/faq>.

BTW, there is de.comp.lang.javascript.

-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

Scope of search / reduce scope / about "this" thomas.lehmann@adtech.com - 2013-03-28 06:50 -0700
  Re: Scope of search / reduce scope / about "this" "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2013-03-28 15:29 +0100
  Re: Scope of search / reduce scope / about "this" Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-03-28 18:13 +0100
    Re: Scope of search / reduce scope / about "this" Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-03-28 18:33 +0100
  Re: Scope of search / reduce scope / about "this" Danny <dann90038@gmail.com> - 2013-03-28 12:37 -0700
    Re: Scope of search / reduce scope / about "this" Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-03-28 21:01 +0100
      HTML5 “autofocus” attribute (was: Scope of search / reduce scope / about "this") Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-03-29 23:27 +0100

csiph-web