By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
426,011 Members | 1,000 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 426,011 IT Pros & Developers. It's quick & easy.

A new JavaScript tutorial(Beta)

P: n/a
Hello Everyone,

I have just compleated a JavaScript tutorial and publishing the
draft(or the beta version, as I like to call it) for review. This is
not open to public yet.

The Tutorial is avaliable at...
http://www.geocities.com/binnyva/cod...nced_tutorial/

If any of you could spare the time, please have a look at my tutorial
and let me know if you find any errors/omissions.

Don't think much of the word 'Advanced' in the title - when I started
the tutorial, I had high hopes for the tutorial. But after some months
with very little free time in them, my standards came down - a lot.

Thanks in advance,

Binny V A
http://binnyva.blogspot.com/

Aug 31 '05 #1
Share this Question
Share on Google+
15 Replies


P: n/a
bi*****@hotmail.com wrote:
Hello Everyone,

I have just compleated a JavaScript tutorial and publishing the
draft(or the beta version, as I like to call it) for review. This is
not open to public yet.

The Tutorial is avaliable at...
http://www.geocities.com/binnyva/cod...nced_tutorial/

If any of you could spare the time, please have a look at my tutorial
and let me know if you find any errors/omissions.

Don't think much of the word 'Advanced' in the title - when I started
the tutorial, I had high hopes for the tutorial. But after some months
with very little free time in them, my standards came down - a lot.


JavaScript != JScript: http://www.jhz-cs.com/guides/js/jscript.html

Why waste time copying form values to variables when you could just use
the form value directly?

Seems to me that a wheel has just been re-invented. Googling for
"javascript tutorial" (with the quotes) returns 130,000 hits. When I
searched, WC Schools was first.

--
Hywel
http://kibo.org.uk/
Aug 31 '05 #2

P: n/a
Hywel Jenkins wrote:
Seems to me that a wheel has just been re-invented. Googling for
"javascript tutorial" (with the quotes) returns 130,000 hits. When I
searched, WC Schools was first.


Writing a short tutorial (or even an in depth one) could be considered a
good exercise to expand one's understanding of a topic. I wouldn't say
this is a complete waste of time.
Aug 31 '05 #3

P: n/a
Ivo
<bi*****@hotmail.com> wrote

I have just compleated a JavaScript tutorial and publishing the
draft(or the beta version, as I like to call it) for review.


Oh God, not another one! You have to understand that this is my first
reaction when a post begins with such a line. Why another Javascript
tutorial? Aren't there enough of them around by now? From the most basic to
expert, from crap via laughable to really thoughtful and original, all
levels are represented already on a zillion sites. And they are mostly
copies of eachother. Writing a tutorial, on any topic, is a good learning
experience, but offering it to others for reading, requires a different kind
of writing.

OK, so much for a first reaction. Then, I notice three spelling and grammar
errors in that same first line, and whatever is left of my positive attitude
very quickly disappears. If the tutorial is equally untidily written,
learning anything from it is going to be a real challenge. Consider :
compleated -> completed
publishing -> publish / am publishing
draft(or -> draft (or

I went to the URL you gave. When I click a link on that page, IE reports an
error on line 33. I didn't investigate further.
hth
ivo
Aug 31 '05 #4

P: n/a
JRS: In article <uL********************@twister.nyc.rr.com>, dated Wed,
31 Aug 2005 21:59:54, seen in news:comp.lang.javascript, Kevin Newman
<Ca******@unFocus.com> posted :
Hywel Jenkins wrote:
Seems to me that a wheel has just been re-invented. Googling for
"javascript tutorial" (with the quotes) returns 130,000 hits. When I
searched, WC Schools was first.


Writing a short tutorial (or even an in depth one) could be considered a
good exercise to expand one's understanding of a topic. I wouldn't say
this is a complete waste of time.

Agreed : writing a tutorial must be self-educational. I once had a
Professor who undertook to deliver a lecture course on the grounds that
it was on a topic that he wanted to know more about - however, he was an
acknowledged genius.

The question is whether such a tutorial will be worth reading.

The newsgroup FAQ does not explicitly list any Javascript tutorials.

--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4
<URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Sep 1 '05 #5

P: n/a
Hi,
Writing a short tutorial (or even an in depth one) could
be considered a good exercise to expand one's understanding
of a topic. I wouldn't say this is a complete waste of time. Yes, writing the tutorial increased my knowledge. But
it is not by the contents of the tutorial - but by the
research I put into making it.
Seems to me that a wheel has just been re-invented.
Googling for "javascript tutorial" (with the quotes)
returns 130,000 hits. When I searched, WC Schools was first. I admit that there is a lot of JavaScript tutorials out
there - and this my addition to that endless list. I may
be reinventing the wheel, but then again, reinventing the
wheel is fun!
I went to the URL you gave. When I click a link on that page,
IE reports an error on line 33. I didn't investigate further.

Sorry about the javascript errors in my site. There is nothing that I
can do about it - all the errors are created and maintained by my web
host - geocities.com.

Sep 2 '05 #6

P: n/a
Hi,
Writing a short tutorial (or even an in depth one) could
be considered a good exercise to expand one's understanding
of a topic. I wouldn't say this is a complete waste of time. Yes, writing the tutorial increased my knowledge. But
it is not by the contents of the tutorial - but by the
research I put into making it.
Seems to me that a wheel has just been re-invented.
Googling for "javascript tutorial" (with the quotes)
returns 130,000 hits. When I searched, WC Schools was first. I admit that there is a lot of JavaScript tutorials out
there - and this my addition to that endless list. I may
be reinventing the wheel, but then again, reinventing the
wheel is fun!
I went to the URL you gave. When I click a link on that page,
IE reports an error on line 33. I didn't investigate further.

Sorry about the javascript errors in my site. There is nothing that I
can do about it - all the errors are created and maintained by my web
host - geocities.com.

Sep 2 '05 #7

P: n/a
binny v a wrote in message news:11**********************@g49g2000cwa.googlegr oups.com...
Hello Everyone,

I have just compleated a JavaScript tutorial and publishing the
draft(or the beta version, as I like to call it) for review. This is
not open to public yet.

The Tutorial is avaliable at...
http://www.geocities.com/binnyva/cod...nced_tutorial/

If any of you could spare the time, please have a look at my tutorial
and let me know if you find any errors/omissions.


Every tutorial has its pros and its cons. The cons is that there are
zillions of tutorials floating around, the pros are that with every
tutorial you might learn something new. Besides, writing or developing
such a tutorial allows (and in the end requires) you to understand the
presented matter.

I am sorry, I didn't look for errors or omissions, but just browsed
through it and it has several neat thingamajiggys in it ;-)
one of them is the possibility (with the evil "eval()") to execute
your own javascript or test results.

now on this I have the following question, and I hope someone can
answer this:
I use Firefox (1.0.6) and on the page
http://www.geocities.com/binnyva/cod...al/moving.html
at the end, you can "move" two <div>s containing jokes around.
when I initially load the page and write:
alert(document.getElementById("joke_2").style.left )
I get a blank alert box, but as soon as I write:

document.getElementById("joke_2").style.left = 120;
document.getElementById("joke_2").style.width = 290;
alert(document.getElementById("joke_2").style.left )

the alert box returns 120px.
Why is
document.getElementById("joke_2").style.left
blank at the beginning? shouldn't the style be computed and
filled in by the agent?
Sep 2 '05 #8

P: n/a
Robi wrote:
binny v a wrote:
I have just compleated a JavaScript tutorial and publishing the
draft(or the beta version, as I like to call it) for review.
This is not open to public yet.

The Tutorial is avaliable at...
http://www.geocities.com/binnyva/cod...nced_tutorial/

If any of you could spare the time, please have a look at my
tutorial and let me know if you find any errors/omissions.

Omissions are inevitably too numerous to list. With a subject so vast
there is little chance of covering everything in 14 short pages.
However, one serious omission arises from providing example mark-up in
XHTML style while promoting browser-scripting strategies that will fail
if they are exposed to an XHTML DOM. That contradiction really deserves
some words of explanation.

It is also a significant omission not to explain the extent to which the
example code is IE only (or at least effective only in IE and it's close
imitators) and/or relies on browsers operating in 'quirks' mode.

While the majority of the approaches and techniques presented are
sub-optimal (in the code they use and in cross-browser scripting terms)
actual errors mostly relate to the discussion and examples of (X)HTML
mark-up. This is well illustrated by this section opening paragraphs:-

<quote
cire="http://www.geocities.com/binnyva/code/javascript/advanced_tutorial
/">
JavaScript or JScript is a language that can be seen as the next step
from HTML. HTML is concerned with the simple display and presentation of
text and images. JavaScript offers more interactivity for the user and
above all more choice and understanding of the world wide web.
</quote>

-, the many examples of invalid mark-up, and particularly this section:-

<quote
cite="http://www.geocities.com/binnyva/code/javascript/advanced_tutorial
/div_span.html">
Span is a tag very similar to DIV in its properties. The difference
between the two is the while the DIV is a block-level element, SPAN is
an inline element. Both DIV and SPAN are grouping elements. The DIV and
SPAN elements, in conjunction with the id and class attributes, offer a
generic mechanism for adding structure to documents.

So when do you use SPAN and when do you use DIV? Use DIV if you want do
enclose lengthy contents or if the enclosed text will have HTML tags in
them. Use span for enclosing very small contents.

....

<style type="text/css">
div.thequote {
border:1px dashed black;
padding-left:50px;
padding-right:50px;
}
span.quoter {
padding-left:40px;
font-style:italic;
}
</style>
<div class="thequote">I accidentally shot my father-in-law
while deer hunting. It was an <u>honest</u> mistake.
I came out of the tent in the morning and thought <b>I saw
a deer in an orange vest making coffee</b>.<br />
<span class="quoter">Steven Wright</span></div>

If you are serious about web development, you should know these two tags
very well - they have awesome powers. These tags in alliance with CSS
are currently posing a great threat to the other tags. If these two tags
and CSS had their way, many old and obsolete tags would die - the first
to go will be the font tag. Next in line will be other tags like
b(bold) - will be replaced by <strong>, i(italics) - to be replaced by
<em>, etc. I have even heard reports that div is going to replace the
old(and faithful) table tag in layout! These tags with some others are
promising to bring about the HTML utopia - the separation of design and
content.
</quote>

Which demonstrates an apparent absence of technical understanding of
HTML mark-up.
Every tutorial has its pros and its cons. The cons is that
there are zillions of tutorials floating around,
There is nothing wrong with having zillions of tutorials around.
the pros are that with every
tutorial you might learn something new.
The expression that a little knowledge can be a dangerous thing can be
very applicable to javascript tutorials fond on the Internet.
Besides, writing or developing such a tutorial allows
(and in the end requires) you to understand the
presented matter.
Unfortunately that just is not true. It is true of writing a good
tutorial, by which I mean a tutorial that is complete, technically (and
otherwise) accurate, useful and capable of being understood by its
readers. Writing a bad tutorial requires no more than an ability to
churn out words (and certainly no understanding of the subject).

The problem with having zillions of tutorials available on the Internet
is that they range in quality form the very good to the catastrophically
bad, and that the vast majority (numerically) are at the bottom end of
that spectrum.

There is nothing to stop anybody writing a javascript "tutorial" and
publishing it on the Internet. A significant factor in their doing so is
their confidence in their own abilities and knowledge of the subject.
And confidence can be derived from superficial achievement, and
bolstered by isolation and an under-awareness of the full set of issues
that apply to Internet browser scripting.

A newcomer to the language, having learnt to (more of less) use the
language constructs will frequently find themselves massively frustrated
by their first exposures to having to get scripts to operate in more
than one browser (and people still talk of "both browsers", when there
are at lest 5 distinct flavours of dynamic visual browser in current
use, let alone all the other scriptable but less dynamic, or less
visual, browsers). Having experienced the initial extreme of frustration
the achievement of getting even one non-trivial script (say, a drop down
menu or similar) to satisfy some demonstrable criteria of "working" in
two or three test browsers can be a massive boost to the self-confidence
of its author.

I know that that was how it worked for me, and find it difficult to
express my gratitude towards the regulars of this group for totally
destroying my confidence in my own ability to script web browsers in
very short order after I started to post here. Without that I would not
now be in a position to appreciate how little I really understood at the
time, and how misplaced that initial confidence was.

Writing an explanation of a subject (that may take the form of a
tutorial, or be regarded as such) actually is a very good way of testing
your own understanding of a subject. If you can explain something to
someone else in a way that they understand then the chances are very
good that you understand what you were explaining yourself.

However, it is also possible to do a good job of explaining your
misconceptions to someone else such that they will share your
misconceptions, and unfortunately that is an issue with many web
tutorials. One way of avoiding that is to get critical feed-back about
your understanding and explanations from suitably qualified individuals.

In this respect participating in technical newsgroups is extremely
valuable as it presents an opportunity to try to provide technical
explanations on specific aspects of a subject under the scrutiny of at
least some individuals with a potentially better understanding, and so
misconceptions (and unconsidered issues) are likely to be raised in
response. And you often get to find out how well the individual
receiving the explanation understood it from how they respond.

It is probably the experience of critical feed-back that makes for a
good tutorial, but is would be best if that experience was gained prior
to writing the tutorial. Asking for a review of a completed tutorial is
probably better than nothing (assuming a willingness to re-write it in
response) but it is not very practical for anyone to make a full
response to 14 wide-ranging pages littered with incomplete and dubious
advice, and so the types of response elicited are likely to be easily
dismissed (to the detriment of the result).

Unfortunately a very low average quality also blights books on
javascript. I recall reading an example chapter from a javascript book
that featured the word "advanced" in its title, to find it filled with
bad advice, (IE) browser specific code and examples that would be better
described as needlessly convoluted than advanced.

"Advanced" is of course a relative term, and depends on where you are
observing from. The 'tutorial' mentioned above does not deserve the
label as its contents and subjects are very run of the mill browser
scripting. I am reminded of the interview for my current job, which was
advertised a requiring "advanced DHTML", and for which the interviewers
set a 'technical' test. I found that test very disappointing as it
hardly probed the knowledge of the candidates at all, requiring no more
than a broad familiarity with the more commonly used features of a
browser's object model, some familiarity with CSS and the ability to
recognise some really glaring syntax errors.

I stated after the test that I thought anyone who did not get 100%
should not be employed to script web browsers at all, and later
discovered that one of the reasons that I was offered the job was that
none of the other candidates had passed that same test. Which means that
every other applicant had believed themselves capable of writing
"advanced DHTML"[1] while actually not being qualified to script
browsers at all (or they were planning of trying to wing it).

[1] An alternative explanation would be that they didn't take the job
adverts' wording seriously, which is actually understandable as most
browser-scripting related job adverts betray apparent incomprehension on
the part of the prospective employer as to what they actually want
(proposing as they do combinations such as graphic design and DHTML,
advanced javascript and Dreamweaver, and so on).
I am sorry, I didn't look for errors or omissions, but just
browsed through it and it has several neat thingamajiggys
in it ;-) one of them is the possibility (with the evil
"eval()") to execute your own javascript or test results.
One of the rare justified employments for the eval function is
demonstrating the execution of javascript source code. Which doesn't
alter the assertion that eval is almost never of use in javascript
authoring, as pages with javascript as their subject, using eval for
demonstration purposes are a very tiny proportion of the applications
of javascript.
now on this I have the following question, and I hope
someone can answer this:
I use Firefox (1.0.6) and on the page http://www.geocities.com/binnyva/code/javascript/
advanced_tutorial/moving.html at the end, you can "move" two <div>s containing jokes around.
when I initially load the page and write:
alert(document.getElementById("joke_2").style.left )
I get a blank alert box, but as soon as I write:

document.getElementById("joke_2").style.left = 120;
document.getElementById("joke_2").style.width = 290;
alert(document.getElementById("joke_2").style.left )

the alert box returns 120px.
That is an interesting observation that I will return to later.
Why is
document.getElementById("joke_2").style.left
blank at the beginning?
This is a common question and arises from an under appreciation of the
role of an element's - style - object, and the application of styles
through CSS. On a previous page in the 'tutorial' you find:-

<quote
cite="http://www.geocities.com/binnyva/code/javascript/advanced_tutorial
/styles.html">
.... . The style can be anything that can be used as a CSS style. The
following format is to be used for all style changes.

document.getElementById('ID_OF_THE_ELEMENT').style .TYPE = 'NEW_VALUE';

The equivalent CSS statement will be

#ID_OF_THE_ELEMENT {
TYPE : NEW_VALUE;
}

An example

document.getElementById('name').style.color = 'blue';

And the CSS will be

#name {
color : blue;
}
</quote>

- in which the property of the - style - object is equated with the type
of style declaration that you would find in a STYLE element or an
external style sheet.

CSS may be declared/defined in many ways in an HTML document. It may be
found in external style sheets (imported as files), it may be found on
the page in STYLE elements, e.g.:-

<style type="text/css">
..someClass {
position:relative;
}
</style>

- or it may be specified as an attribute of an element, e.g.:-

<div style="position:relative;"> ... </div>

How CSS rules are applied to HTML elements is determined by a number of
factors. There is the cascade (the C in CSS), in which the last
(applicable (possibly by media type)) rule encountered overrides
equivalent properties from rules previously encountered. And there is
specificity, where the most specific rule applies to any given element.
The CSS specification is the best guide to how these mechanisms work.
However, the style attribute of an element is the most specific way of
assigning CSS to an element and so the contents of a style attribute
override all other CSS rules (well almost, as rules that are declared as
!Important can still come into play (useful in print style sheets where
elements dynamically positioned/hidden through their style attributes
may need more printer-friendly styling)).

In the DOM, an Element object's - style - property is the representation
of the element's style _attribute_ in the HTML, only. It does not
represent the CSS applied to an element through style sheets or
declarations in STYLE elements on the page, only the contents of the
style attribute.

Thus if you read from a property of an Element's - style - object you
will only initially find values where those values are assigned in the
style attribute in the HTML.

If you assign values to the (recognised) properties of an Element's
style object you are effectively re-defining its style attribute (this
is in terms of the live DOM and may not be reflected in values read
using getAttribute('style') on the element). Such assignments are an
effective mechanism for setting CSS values because it is in the nature
of the style attribute to override all other CSS assignments in other
locations.
shouldn't the style be computed and
filled in by the agent?


The style is computed, and computed styles are available on W3C DOM
styles implementing browser through the getComputedStyle method of the
defaultView interface, and on IE 5+ through the currentStyle object that
is also a property of Elements (though currentStyle properties are not
as accurately representative as those derived from the getComputedStyle
method, where available).

But because the style property of elements is a representation of the
style attribute in the HTML it should not initially be assigned values
that do not appear in the attribute in the HTML. That is; it is not a
general representation of an element's applied styling, but just the
representation of the element's style attribute.

Returning to your observation that the alert reported "120px" when you
had assigned the numeric value 120; the Rules of CSS require that
non-zero length values explicitly state the units in which they are
defined (px, pt, em, cm, and so on). Internet Explorer has always
error-corrected values provided without the CSS units, assuming that
they are px values and assigning the value as a string with 'px' on the
end. Other browsers have sometimes followed IE in this respect, others
follow IE in "quirks" mode and insist upon correct CSS in "strict" mode
(and there are probably browsers that are always strict in their
interpretation of CSS, though I cannot think of any right now).

The practical upshot of this is that if you omit the CSS units from an
assignment you are writing code that will not function under some
circumstances. If, on the other hand, you habitually include the CSS
units you will be writing code that will work exactly the same on all
of the browsers (and in all of the circumstances) where assigning just
the number would work, and also work on all the browsers (and in all
of the circumstances) where a correct CSS value would be required.
E.G.:-

document.getElementById("id").style.top = 120+'px';

Generally, where one approach is available that satisfies all of the
browsers that are capable of a particular action (setting properties on
an element's style object in this case) it is best to learn to always
use that approach habitually, rather than having to think about whether
you can get away with omitting the CSS units (as might be practical on
an IE only Intranet).

Richard.
Sep 4 '05 #9

P: n/a
JRS: In article <df*******************@news.demon.co.uk>, dated Sun, 4
Sep 2005 22:11:02, seen in news:comp.lang.javascript, Richard Cornford
<Ri*****@litotes.demon.co.uk> posted :

One of the rare justified employments for the eval function is
demonstrating the execution of javascript source code.


I quibble : there is no need to use eval for the stated purpose, but it
is necessary for the execution of reader-provided code. The latter is a
facility which needs to be available to a tutorial-user, is generally
available by constructing and viewing a file, and can be made
conveniently available with a button that executes eval of a textarea.

For demonstration of function Fn(), one can start with the page

<script>
function Fn() { alert(123) }
</script>

<input type=button onClick="alert(Fn.toString())">

and then add what is needed for standards-compliance, decoration, etc.
Fn.toString() is the ultimate essence of what my double-bordered boxes
use.

AFAICS, all browsers are supposed to give a reasonable result from
function.toString() though details vary.

Most of my uses of eval are like T=eval(t0.value) or
T=+eval(t0.value) where t0 is an <input type=text name=t0 ...> and the
user is thereby enabled to give a numeric expression as input (this
helps the metrically-challenged, who can put 12*1.609 to specify with
miles a value which should be kilometres) ... but I'll probably change
that to T = UInp(t0) .

--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4
<URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Sep 5 '05 #10

P: n/a
> It is also a significant omission not to explain the extent to
which the example code is IE only (or at least effective only
in IE and it's close imitators) and/or relies on browsers operating
in 'quirks' mode.
Thanks for pointing this out - I am correcting the problems. I found
this
problem in the following pages.
http://www.geocities.com/binnyva/cod...al/moving.html
http://www.geocities.com/binnyva/cod...l/picture.html
... actual errors mostly relate to the discussion and examples of
(X)HTML mark-up. This is well illustrated by this section opening
paragraphs:-
JavaScript or JScript is a language that can be seen as the next step from HTML. HTML is concerned with the simple display and presentation of text and images. JavaScript offers more interactivity for the user and above all more choice and understanding of the world wide web.
Hmm. How should I change the text to make the description better?
-, the many examples of invalid mark-up, and particularly this section:-
If you are serious about web development, you should know these
two tags very well - they have awesome powers. These tags in
alliance with CSS are currently posing a great threat to the other
tags. If these two tags and CSS had their way, many old and
obsolete tags would die - the first to go will be the font tag.
Next in line will be other tags like b(bold) - will be replaced
by <strong>, i(italics) - to be replaced by <em>, etc. I have even
heard reports that div is going to replace the old(and faithful)
table tag in layout! These tags with some others are promising and
to bring about the HTML utopia - the separation of design
content.

Which demonstrates an apparent absence of technical understanding
of HTML mark-up.


Again, how do I make the description better? Or should I just remove
the offending para - this is just a side note - so I can safely delete
it.

Just give me some suggestions on how to make the above descriptions
better.
I am not correcting this myself - if my first attempt did not make the
mark, I don't expect much of the second attempt.

Thanks for all your feedback.

Binny V A

Sep 6 '05 #11

P: n/a
bi*****@gmail.com wrote:
<snip>
... actual errors mostly relate to the discussion and examples of
(X)HTML mark-up. This is well illustrated by this section opening
paragraphs:-
JavaScript or JScript is a language that can be seen as the next step
from HTML. HTML is concerned with the simple display and

presentation of
text and images. JavaScript offers more interactivity for the user

and
above all more choice and understanding of the world wide web.
You have really garbled that quote (and failed to attribute it
correctly). You might want to read the group's FAQ as it references
information on effectively formatting newsgroup posts.
Hmm. How should I change the text to make the description better?
Replace and/or re-order the words to produce a result that is more
meaningful and accurate.
-, the many examples of invalid mark-up, and particularly this

section:-

If you are serious about web development, you should know these
two tags very well - they have awesome powers. These tags in
alliance with CSS are currently posing a great threat to the other
tags. If these two tags and CSS had their way, many old and
obsolete tags would die - the first to go will be the font tag.
Next in line will be other tags like b(bold) - will be replaced
by <strong>, i(italics) - to be replaced by <em>, etc. I have even
heard reports that div is going to replace the old(and faithful)
table tag in layout! These tags with some others are promising and
to bring about the HTML utopia - the separation of design
content.

Which demonstrates an apparent absence of technical understanding
of HTML mark-up.


Again, how do I make the description better?


The statements that you actually made stem form fundamental
misconceptions as to the nature of HTML. Including an apparent
unawareness of the technical aspects of the language, so when you
wrote:-

| So when do you use SPAN and when do you use DIV? Use DIV if you
| want do enclose lengthy contents or if the enclosed text will
| have HTML tags in them. Use span for enclosing very small contents.

- you disregard HTML's rules about the permissible contents of its
various elements. And so deprive your readers of the opportunity to
appreciate the relative roles of inline elements and block elements.
Or should I just remove the offending para - this
is just a side note - so I can safely delete it.
That paragraph may be the nadir of the article, but removing it would
not solve my issue with it. The preceding mark-up:-

| <div class="thequote">I accidentally shot my father-in-law
| while deer hunting. It was an <u>honest</u> mistake.
| I came out of the tent in the morning and thought <b>I saw
| a deer in an orange vest making coffee</b>.<br />
| <span class="quoter">Steven Wright</span></div>

- betrays strange reasoning. You seem to want to apply CSS styling to a
block level element containing a quote. HTML has a BLOCKQUOTE element
which is block level and to which any CSS styling can be applied. It is
a semantic element, its name actually says something about the contents
of the element, and what is says seems to correspond precisely with the
role you have assigned to the DIV you are proposing in its place.

And instead of applying CSS as:-

| div.thequote {
| border:1px dashed black;
| padding-left:50px;
| padding-right:50px;
| }

- you could apply it as:-

BLOCKQUOTE {
border:1px dashed black;
padding-left:50px;
padding-right:50px;
}

- and have that CSS apply to all block level quotes, or use that as a
default block quote styling and use classes to categorise any special
types of block level quotes, and apply styling to those. E.G:-

BLOCKQUOTE.hyperbole {
font-weight:bold;
font-size:120%;
}

DIV and SPAN are semantically neutral elements, they are useful
(especially in conjunction with class attributes used for
classification) in extending HTMLs limited set of semantic elements. But
where other elements are available to describe the contents they should
not be used in preference. In this respect your use of SPAN to
categorise the individual being quoted is much more appropriate (even if
the class chosen is flawed).

Their role in purely structural grouping, especially when used to apply
layout, is a slightly different matter. For example, The name "Steven
Wright" is not part of the quote so maybe it should not be inside a
BLOCKQUOTE element, but you would want it grouped with the BLOCKQUOTE,
and laid out in association with it, which might result in:-

<div class="attributedQuote">
<blockquote>
<p>I accidentally shot my father-in-law while deer hunting.
It was an <em>honest</em> mistake. I came out of the tent in
the morning and thought <strong>I saw a deer in an orange
vest making coffee</strong>.</p>
</blockquote>
<div class="quoteAttribution">Steven Wright</div>
</div>
Just give me some suggestions on how to make the
above descriptions better.
Learn some HTML, and how to apply CSS to it.
I am not correcting this myself - if my first attempt
did not make the mark, I don't expect much of the second attempt.

<snip>

I always expect more of my second (and subsequent) attempts to explain
anything. I expect to have learnt more in the interim, taken account of
critical feedback and observed the effectiveness of the explanation on
whoever it is directed towards.

Richard.
Sep 7 '05 #12

P: n/a
Richard Cornford wrote:
You have really garbled that quote (and failed to attribute it
correctly). You might want to read the group's FAQ as it references
information on effectively formatting newsgroup posts.


It really seems that correcting folks for some fop ah in the fashion I
see here completely offiscates the topic at hand.

This seems to have been a problem since even the old days.

I guess if I'm ever looking for discussions on ng minutia
I have a list of people to see.

Does the term "off-topic" have any meaning?

I'd tell folks of this ilk to knock it off , but since they have nothing
constructive to say they simply speak with their hind sides facing the
screen.
--
--.
--=<> Dr. Clue (A.K.A. Ian A. Storms) <>=-- C++,HTML/CSS,Javascript,TCP ...
--`
Sep 7 '05 #13

P: n/a
Dr Clue wrote:


It really seems that correcting folks for some fop ah in the fashion I
see here completely offiscates the topic at hand.

This seems to have been a problem since even the old days.

I guess if I'm ever looking for discussions on ng minutia
I have a list of people to see.

Does the term "off-topic" have any meaning?

I'd tell folks of this ilk to knock it off , but since they have nothing
constructive to say they simply speak with their hind sides facing the
screen.


Did you actually follow the link to the js tutorial?

Faux pas
Obfuscates

Mick
Sep 7 '05 #14

P: n/a
Dr Clue wrote:
Richard Cornford wrote:
You have really garbled that quote (and failed to attribute it
correctly). You might want to read the group's FAQ as it
references information on effectively formatting newsgroup posts.


It really seems that correcting folks for some fop ah in the
fashion I see here completely offiscates the topic at hand.

This seems to have been a problem since even the old days.

I guess if I'm ever looking for discussions on ng minutia
I have a list of people to see.

Does the term "off-topic" have any meaning?

<snip>

Do you see the irony in quoting two sentences from a 6KB post, making
them the entire subject of a follow-up, and then questioning
on-topic-ness of that subject?

Advice given on the subject of posting styles is for the benefit of the
recipient. Prolonged observation of the behaviour of most of the regular
contributors to this group would revel a strong tendency to disregard
individuals who do not follow the posting conventions or do not make a
reasonable effort into rendering their posts easy to read and
understand. While individuals who do make the effort to communicate with
the group effectively frequently receive a great deal of help, advice,
etc.

Richard.
Sep 7 '05 #15

P: n/a
binnyva wrote in message news:11**********************@z14g2000cwz.googlegr oups.com...
Hi,
Writing a short tutorial (or even an in depth one) could
be considered a good exercise to expand one's understanding
of a topic. I wouldn't say this is a complete waste of time.

Yes, writing the tutorial increased my knowledge. But
it is not by the contents of the tutorial - but by the
research I put into making it.


On the "Moving Stuff around" page, I would add the possibility
of interchanging the <DIV>s in the other parental <TD>s

i.e.:
document.getElementById("joke_1").parentNode.nextS ibling.appendChild(document.getElementById("joke_1 "));
document.getElementById("joke_2").parentNode.previ ousSibling.appendChild(document.getElementById("jo ke_2"));

document.getElementById("joke_1").parentNode.inser tBefore(document.getElementById("joke_1"),document .getElementById("joke_1").parent
Node.firstChild);
document.getElementById("joke_2").parentNode.inser tBefore(document.getElementById("joke_2"),document .getElementById("joke_2").parent
Node.firstChild);

The first group switches the <DIV>s

<table>
<tr>
<td><div id="joke_1">...</div></td>
<td><div id="joke_2">...</div></td>
</tr>
</table>
into
<table>
<tr>
<td><div id="joke_2">...</div></td>
<td><div id="joke_1">...</div></td>
</tr>
</table>

the second group just moves the <div> to the first position of each <td>

switching effectively the jokes without positioning them ;-)

I'm sure the movement could be made easier or just with two lines,
but I didn't take the time to do that.

another possibility to move them, is to assign
document.getElementById("joke_1").offsetLeft to a variable and
document.getElementById("joke_2").offsetLeft to another and then
assign the variables +"px" to
document.getElementById("joke_2").style.left and
document.getElementById("joke_1").style.left

that's what I was missing in my previous post in this thread.
But that only positions the DIVs; although in "wrong" containers.
The appendChild/insertBefore version places them into the "correct"
containers, right in the container's position.

Richard, thanks for the style lecture, that got me on the track ;-)

Robi

Sep 7 '05 #16

This discussion thread is closed

Replies have been disabled for this discussion.