Learnin Javascript

[ljbirns]

Can someone recommend a good SIMPLE TO UNDERSTAND book to help me learn Javascript ?

Lew

[fowmow]

This is something that comes up at least ten times every month or so in the newsgroup comp.lang.javascript.  I'll refer you to that FAQ for now.

http://jibbering.com/faq/#FAQ3_1

I'll say this about David Flanagan's book though.  I've read the 3rd edition and am currently reading the 5th.  It is simple enough to understand, but bounces back and forth in my opinion.  Also, it doesn't discuss advanced topics at all.  Or at least, nothing you couldn't find on a fairly decent resource site.

I would recommend it for an absolute beginner though.  I'll say this as well, download the errata and pay attention when something doesn't go right.  It's most likely a typo in the book.

If using Internet Explorer, I recommend Microsoft Script Editor.
If using Firefox, I recommend Firebug.

Also, Venkman might be a wise addition to your arsenal.

Depending on your level of expertise and understanding of technical documents you could view the latest revision of the ECMAScript revision or better yet, ISO/IEC 16262, which is basically the updated ECMAScript.

Also, an indispensable resource for JavaScript is the Mozilla Gecko pages at:

http://developer.mozilla.org/

I listed the root site so you could see all of the available technologies and areas of interest.  Merely click JavaScript if that is your only interest and you're off.  Oh, and a JavaScript programmer *must* be aware of the DOM.  So I'd suggest delving into the DOM category as well.

Good luck!

[ljbirns]

Absolute beginner -  that's me.

Thank you very much.  You gave me a lot of information.  I'll head out for Barnes & Noble.


Lew

[nontroppo]

I used these online tutorials to learn the basics:

http://www.howtocreate.co.uk/tutorials/javascript/
http://www.croczilla.com/~alex/reference/javascript_guide/index.html

and this to understand more:

http://simon.incutio.com/slides/2006/etech/javascript/js-reintroduction-notes.html

Though without knowing a bit of HTML, understanding the DOM will be tough, so you may want to make sure you know the basics there too...

[ljbirns]

I know nothing.  I want to learn.  I am trying to use an image as a background in a program that is on my HD
( Not a web page )  I get the image OK but it appears  split.  The  left portion of the image and then  the image again.  See screenshot.  Note the BLUE line and the repeat of the image .

I been trying to solve this for a week.  I figured a good SIMPLE book would do the trick.  Between all this info I should be able to work this out.

Lew

[mouser]

You know it might be nice to collect lists of the best learning resources for each language to put in our programming school sections: http://www.donationcoder.com/forum/index.php?board=77.0

If anyone wants to take on that project it would be welcome.

[fowmow]

What are the specifics?  Just, "I think Site A rocks for Language X?"

I am currently working on some reviews for App (app103), but I'd be more than willing to share what resources I use for various languages.

[fowmow]

I know nothing.  I want to learn.  I am trying to use an image as a background in a program that is on my HD
( Not a web page )  I get the image OK but it appears  split.  The  left portion of the image and then  the image again.  See screenshot.  Note the BLUE line and the repeat of the image .

I been trying to solve this for a week.  I figured a good SIMPLE book would do the trick.  Between all this info I should be able to work this out.

Um... so are we talking JavaScript still, or no?  If so, what type of environment are you running JavaScript in if not a Web browser?

EDIT:  I didn't mean that to sound as if there are no other possible means to run JavaScript except for in a browser.  I just meant what are you using to run your JavaScript then? 

[ljbirns]

The program ( NirSoft > SeqDownload ) downloads the radar sweeps from NOAA to my HD.  At some point I run the  animation  program ( part of SeqDownload)  It  " animates" the radar sweeps one at a time every X milliseconds.
You are correct in that is does open up my browser  ( Firefox )to show the animation and the background file that I  have added.  I have the file but for some reason it splits ( see my earlier post  blue line )  and so the radar scan is not accurately placed.    I ordered Flanagan's Book from Amazon. Should arrive any day.

Lew

[AbteriX]

@fowmow
You can use JS to code for WSH (Windows Scripting Host).
You can use it directly to do smtg with your files on disk
or use it e.g. in an text editor like PSPad to extend the editor functionality-

@ljbirns
Did you create the HTML file yourself?
It seams as you have put the image in the body tag
like
<BODY BACKGROUND="some.gif">
Than it's normal that the browser tile the image a few times till the browser window is full.

Use  <IMG SRC="some.gif">
instead between <BODY  > and </BODY>

[ljbirns]

<IMG SRC=>  was my original choice.  It does put the image into the program but it puts it
not as background but almost as a separate page.

If A is the IMG  and B is the animated radar sweeps IMG SCR gives me      A
                                                                                                    B 

Background gives me      A/B  ( B is superimposed on A ) which is what I want but A  background is not correctly positioned.  I hope I am making myself clear.  This is not a serious problem.  I would like it to work and figured I could learn something at the same time.  Hence i bought the book.

Lew

[fowmow]

@fowmow
You can use JS to code for WSH (Windows Scripting Host).
You can use it directly to do smtg with your files on disk
or use it e.g. in an text editor like PSPad to extend the editor functionality-

I'm not sure what gave you the impression I didn't know this already.  Thanks for trying to help though.

[fowmow]

The program ( NirSoft > SeqDownload ) downloads the radar sweeps from NOAA to my HD.  At some point I run the  animation  program ( part of SeqDownload)  It  " animates" the radar sweeps one at a time every X milliseconds.
You are correct in that is does open up my browser  ( Firefox )to show the animation and the background file that I  have added.  I have the file but for some reason it splits ( see my earlier post  blue line )  and so the radar scan is not accurately placed.    I ordered Flanagan's Book from Amazon. Should arrive any day.

Whilst SeqDownload does provide the option for "JavaScript animation" it may not be the problem.  Or rather, JavaScript may not be the problem.

I don't suppose it is possible for you to post an example of this anomaly online is there?

Or perhaps give me the link to whatever scans you are retrieving, I'll download SeqDownload and try it myself to see if I can reproduce your problem.

[AbteriX]

I'm not sure what gave you the impression I didn't know this already.  Thanks for trying to help though.

  Sorry, i have understand your question wrong:

I just meant what are you using to run your JavaScript then?

[ljbirns]

I have attached two screen shots.  What I GET     and    what I WANT
Here is the URL that I download from .  http://radar.weather.gov/RadarImg/N0R/OKX_N0R_0.gif
Here is the NirSoft SeqDownload  website    http://www.nirsoft.net/utils/seqdownload.html
To be honest everything I read just confuses me more and more.

This is the  JavaScript: from NirSoft  MY ADDITION is  BODY BACKGROUND etc

html>
<head>
<title>Image Map Example</title>
<script LANGUAGE="JavaScript" type="text/javascript">
function update(t) {
  document.form1.text1.value = t;
}


</script>
</head>
<body>

html>
<head>
<title>Image Map Example</title>
<script LANGUAGE="JavaScript" type="text/javascript">
function update(t) {
document.form1.text1.value = t;
}
</script>
</head>
<BODY BACKGROUND ="file://C:/Documents and Settings/Owner/Desktop/mappics/110.png"

</body>
</SCRIPT>


Created By using <a href="http://www.nirsoft.net/utils/seqdownload.html" target="nirsoft">SeqDownload</a>
<p>

<!--***NIRSOFT_CODE***-->


<script language="javascript">
var imageIndex = 0;
var timeoutID = 0;
var playMode = 1;


function animImageInc()
{
if (imageIndex < numOfImages)
imageIndex++
else
imageIndex = 1;
}

function animImageDec()
{
if (imageIndex > 1)
imageIndex--;
else
imageIndex = numOfImages;
}

function setCurrImage()
{
document.MainImage.src = imgarray[imageIndex].src;
}

function updateAnim()
{
var currTimeoutValue;

currTimeoutValue = timeoutValue;

if (playMode == 1)
{
animImageInc();
if (imageIndex == numOfImages)
currTimeoutValue += animDelay;
}
else
{
animImageDec();
if (imageIndex == 1)
currTimeoutValue += animDelay;
}
setCurrImage();
timeoutID = setTimeout("updateAnim()", currTimeoutValue);
}

function clearLastUpdate()
{
clearTimeout(timeoutID);
timeoutID = 0;
}

function startPlay()
{
clearLastUpdate();
playMode = 1;
updateAnim();
}

function startPlayReverse()
{
clearLastUpdate();
playMode = 2;
updateAnim();
}


updateAnim();

</script>

<form name="PlayForm">
<table>
<tr>
<td><input type="button" onclick="startPlay()" value="Play >>">
<td><input type="button" onclick="startPlayReverse()" value="Play <<">
<td><input type="button" onclick="clearLastUpdate()" value="Stop">
<td><input type="button" onclick="animImageInc();setCurrImage()" value=">>">
<td><input type="button" onclick="animImageDec();setCurrImage()" value="<<">
<td><input type="button" onclick="timeoutValue = parseInt(document.PlayForm.IntervalValue.value)" value="Change Interval >>">

<td><input type="text" name="IntervalValue">
</table>
</form>

<script language="javascript">
document.PlayForm.IntervalValue.value = timeoutValue;
</script>


</body>

</html>

[ljbirns]

I have tried adding the following ( one at a time ) to the script without results.

A)  <body style="background-attachment: fixed; background-repeat: no-repeat;" background=          "file://C:/Documents and Settings/Owner/Desktop/mappics/110.png"

B)    <background="fixed">

C)    <bg properites="fixed">

D)  <body background="file://C:/Documents and Settings/Owner/Desktop/mappics/110.png"      behavior="fixed">


E)  <body style="background-attachment: fixed; background-repeat:no-repeat;
    background="file://C:/Documents and Settings/Owner/Desktop/mappics/110.png">

Lew

[fowmow]

There are far too many things wrong with the markup and code you provided.  Is it at all possible for you to upload this example somewhere?

A few notes:

1.  That link you gave for the images, leads to only 1 image.  And it didn't appear to update...

2.  Setting one image as your background does not seem to be the primary way SeqDownload animates images.  Although it can be done.

3.  The "language" attribute is deprecated in favor of using:

type="text/javascript"

Although some would argue that it too is deprecated.

4.  The things you've tried (directly above this post) are all methods of styling the document via HTML attributes.  This should arguably be done via CSS.

However, I do not think it is the source of your problems.

Anything further, I'd really need to see an example page, complete with images and code.

[ljbirns]

There are far too many things wrong with the markup and code you provided.  Is it at all possible for you to upload this example somewhere?

A few notes:

1.  That link you gave for the images, leads to only 1 image.  And it didn't appear to update...

2.  Setting one image as your background does not seem to be the primary way SeqDownload animates images.  Although it can be done.

3.  The "language" attribute is deprecated in favor of using:

type="text/javascript"

Although some would argue that it too is deprecated.

4.  The things you've tried (directly above this post) are all methods of styling the document via HTML attributes.  This should arguably be done via CSS.

However, I do not think it is the source of your problems.

Anything further, I'd really need to see an example page, complete with images and code.

1) The link was ONE image from this site: > http://radar.weather.gov/radar.php?rid=okx&product=N0R&overlay=11101111&loop=no
I am downloading ONLY the radar scan without any background.

The radar image changes each time you visit the site.  Use the  LOOP feature to see the effect
The site only gives T  number of images in the loop phase. 
SeqDownload will give me 100 x T images making for a much more accurate time frame of the storm activity.
2) SeqDownload does NOT animate the background. It animates the images ( as in # 1 above )
I am looking for the animated images to be superimposed on a static background.

3) 3 and 4 of your reply is beyond my knowledge or understanding. ( Whatever coding I added
was modified from a book on JavaScript and various googled websites. Seemed  a good  at the time.
As for images and code I put the code  ( SeqDownload ) in my reply # 14 above.

In my post above  (my # 14 )I show the image I am getting. As you can see it is  for some reason tiled. Is there a way to  " un-tile " it ?

My ignorance  to even understand most of what you are saying is , of course, a hinderence to your helping me.  I appreciate all you are doing to help .

Thanks
Lew

[fowmow]

Alright.  I *am* going to get you sorted.  Please paste for me a screenshot of SeqDownloader's "Download Properties" dialog.  The one where you insert a new item.

I want to see your *exact* settings, and the *exact* URL you download from.  I used the revised URL you provided in your last post and was getting PHP files.

So, help me help you... once I figure out this downloading of images part, the rest is easy!

[ljbirns]

I think I screwed up with the revised URL.  Attached are screenshots of SeqDownload  dialogs.

The first one  # 36 shows the URL from which I download. The folder is where the downloaded GIF is stored. Last download
file is the name automatically given that file.  I have it set to download a new  file every 5 minutes.

The second one # 37 shows the annimation screen. Images folder is where the images reside on my computer.
The HTML template is the SeqDownload animation file to which I ADDED the BODY BACKGROUND line as below:

<html>
<head>
<title>Image Map Example</title>
<script LANGUAGE="JavaScript" type="text/javascript">
function update(t) {
  document.form1.text1.value = t;
}

</script>
</head>
<body>


html>
<head>
<title>Image Map Example</title>
<script LANGUAGE="JavaScript" type="text/javascript">
function update(t) {
document.form1.text1.value = t;
}
</script>

<BODY BACKGROUND ="file://C:/Documents and Settings/Owner/Desktop/mappics/110.png">

<background="fixed">

{

</style>
           

</SCRIPT>

  Created By using <a href="http://www.nirsoft.net/utils/seqdownload.html" target="nirsoft">SeqDownload</a>
<p>

<!--***NIRSOFT_CODE***-->


<script language="javascript">
var imageIndex = 0;
var timeoutID = 0;
var playMode = 1;


function animImageInc()
{
if (imageIndex < numOfImages)
imageIndex++
else
imageIndex = 1;
}

function animImageDec()
{
if (imageIndex > 1)
imageIndex--;
else
imageIndex = numOfImages;
}

function setCurrImage()
{
document.MainImage.src = imgarray[imageIndex].src;
}

function updateAnim()
{
var currTimeoutValue;

currTimeoutValue = timeoutValue;

if (playMode == 1)
{
animImageInc();
if (imageIndex == numOfImages)
currTimeoutValue += animDelay;
}
else
{
animImageDec();
if (imageIndex == 1)
currTimeoutValue += animDelay;
}
setCurrImage();
timeoutID = setTimeout("updateAnim()", currTimeoutValue);
}

function clearLastUpdate()
{
clearTimeout(timeoutID);
timeoutID = 0;
}

function startPlay()
{
clearLastUpdate();
playMode = 1;
updateAnim();
}

function startPlayReverse()
{
clearLastUpdate();
playMode = 2;
updateAnim();
}


updateAnim();

</script>

<form name="PlayForm">
<table>
<tr>
<td><input type="button" onclick="startPlay()" value="Play >>">
<td><input type="button" onclick="startPlayReverse()" value="Play <<">
<td><input type="button" onclick="clearLastUpdate()" value="Stop">
<td><input type="button" onclick="animImageInc();setCurrImage()" value=">>">
<td><input type="button" onclick="animImageDec();setCurrImage()" value="<<">
<td><input type="button" onclick="timeoutValue = parseInt(document.PlayForm.IntervalValue.value)" value="Change Interval >>">

<td><input type="text" name="IntervalValue">
</table>
</form>

<script language="javascript">
document.PlayForm.IntervalValue.value = timeoutValue;
</script>
</body>

If you don't check the template box you get the radar images WITHOUT any background.

Lew

[sri]

http://www.exforsys.com/tutorials/javascript.html

[fowmow]

Alright ljbirns, is this along the lines of what you wanted to see?

[attach=#]

[ljbirns]

WOW !!!  Exactly what I want to see.  Please show me how.

Thank you.

Lew

[fowmow]

Exactly what I originally thought.  Your problem was not JavaScript at all.  It was a CSS issue.  Well, technically a CSS issue.

The source that SeqDownload creates for you starts out something like this:

Code: (css)

<style type="text/css">
body, input {
	font-weight: normal;
	font-size: 12px;
	font-family:  Verdana, Arial, Helvetica;
	 }
</style>

All you have to do is add this, *directly* after that.

Code: (css)

body
{
	background-image: url("OKX_Topo_Short.jpg");
	background-repeat: no-repeat;
}

I'll leave it up to you to get that image.  Hint.

[ljbirns]

fowmow

Terriffc !!  I really thank you.  You did all the work. I truly don't understand  the difference between Javascript and CSS. Flanagan's book came.. I'm beginnig to think he might as well have written it in Greek.  But since I am retired now I have plenty of time to see what I can learn.
I tried to use a  GIF file that is on my HD instead of the URL. I changed URL(" xx")  to
  file("c:\map.gif");    as in # 3 above . It did not work. Is the syntax for files different than URL's ?  At any rate I do thank you for all the time and effort. This website and forum has
great people on it.

regards

Lew